diff --git a/x-pack/plugins/siem/public/alerts/components/activity_monitor/columns.tsx b/x-pack/plugins/siem/public/alerts/components/activity_monitor/columns.tsx
new file mode 100644
index 00000000000000..51a5397637e7ca
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/activity_monitor/columns.tsx
@@ -0,0 +1,97 @@
+/*
+ * 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.
+ */
+
+/* eslint-disable react/display-name */
+
+import {
+  EuiIconTip,
+  EuiLink,
+  EuiTextColor,
+  EuiBasicTableColumn,
+  EuiTableActionsColumnType,
+} from '@elastic/eui';
+import React from 'react';
+import { getEmptyTagValue } from '../../../common/components/empty_value';
+import { ColumnTypes } from './types';
+
+const actions: EuiTableActionsColumnType<ColumnTypes>['actions'] = [
+  {
+    available: (item: ColumnTypes) => item.status === 'Running',
+    description: 'Stop',
+    icon: 'stop',
+    isPrimary: true,
+    name: 'Stop',
+    onClick: () => {},
+    type: 'icon',
+  },
+  {
+    available: (item: ColumnTypes) => item.status === 'Stopped',
+    description: 'Resume',
+    icon: 'play',
+    isPrimary: true,
+    name: 'Resume',
+    onClick: () => {},
+    type: 'icon',
+  },
+];
+
+// Michael: Are we able to do custom, in-table-header filters, as shown in my wireframes?
+export const columns: Array<EuiBasicTableColumn<ColumnTypes>> = [
+  {
+    field: 'rule' as const,
+    name: 'Rule',
+    render: (value: ColumnTypes['rule'], _: ColumnTypes) => (
+      <EuiLink href={value.href}>{value.name}</EuiLink>
+    ),
+    sortable: true,
+    truncateText: true,
+  },
+  {
+    field: 'ran' as const,
+    name: 'Ran',
+    render: (value: ColumnTypes['ran'], _: ColumnTypes) => '--',
+    sortable: true,
+    truncateText: true,
+  },
+  {
+    field: 'lookedBackTo' as const,
+    name: 'Looked back to',
+    render: (value: ColumnTypes['lookedBackTo'], _: ColumnTypes) => '--',
+    sortable: true,
+    truncateText: true,
+  },
+  {
+    field: 'status' as const,
+    name: 'Status',
+    sortable: true,
+    truncateText: true,
+  },
+  {
+    field: 'response' as const,
+    name: 'Response',
+    render: (value: ColumnTypes['response'], _: ColumnTypes) => {
+      return value === undefined ? (
+        getEmptyTagValue()
+      ) : (
+        <>
+          {value === 'Fail' ? (
+            <EuiTextColor color="danger">
+              {value} <EuiIconTip content="Full fail message here." type="iInCircle" />
+            </EuiTextColor>
+          ) : (
+            <EuiTextColor color="secondary">{value}</EuiTextColor>
+          )}
+        </>
+      );
+    },
+    sortable: true,
+    truncateText: true,
+  },
+  {
+    actions,
+    width: '40px',
+  },
+];
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/activity_monitor/index.test.tsx b/x-pack/plugins/siem/public/alerts/components/activity_monitor/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/components/activity_monitor/index.test.tsx
rename to x-pack/plugins/siem/public/alerts/components/activity_monitor/index.test.tsx
diff --git a/x-pack/plugins/siem/public/alerts/components/activity_monitor/index.tsx b/x-pack/plugins/siem/public/alerts/components/activity_monitor/index.tsx
new file mode 100644
index 00000000000000..c2b6b0f025e1d6
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/activity_monitor/index.tsx
@@ -0,0 +1,320 @@
+/*
+ * 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 { EuiBasicTable, EuiPanel, EuiSpacer } from '@elastic/eui';
+import React, { useState, useCallback } from 'react';
+import { HeaderSection } from '../../../common/components/header_section';
+import {
+  UtilityBar,
+  UtilityBarAction,
+  UtilityBarGroup,
+  UtilityBarSection,
+  UtilityBarText,
+} from '../../../common/components/utility_bar';
+import { columns } from './columns';
+import { ColumnTypes, PageTypes, SortTypes } from './types';
+
+export const ActivityMonitor = React.memo(() => {
+  const sampleTableData: ColumnTypes[] = [
+    {
+      id: 1,
+      rule: {
+        href: '#/detections/rules/rule-details',
+        name: 'Automated exfiltration',
+      },
+      ran: '2019-12-28 00:00:00.000-05:00',
+      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
+      status: 'Running',
+    },
+    {
+      id: 2,
+      rule: {
+        href: '#/detections/rules/rule-details',
+        name: 'Automated exfiltration',
+      },
+      ran: '2019-12-28 00:00:00.000-05:00',
+      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
+      status: 'Stopped',
+    },
+    {
+      id: 3,
+      rule: {
+        href: '#/detections/rules/rule-details',
+        name: 'Automated exfiltration',
+      },
+      ran: '2019-12-28 00:00:00.000-05:00',
+      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
+      status: 'Completed',
+      response: 'Fail',
+    },
+    {
+      id: 4,
+      rule: {
+        href: '#/detections/rules/rule-details',
+        name: 'Automated exfiltration',
+      },
+      ran: '2019-12-28 00:00:00.000-05:00',
+      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
+      status: 'Completed',
+      response: 'Success',
+    },
+    {
+      id: 5,
+      rule: {
+        href: '#/detections/rules/rule-details',
+        name: 'Automated exfiltration',
+      },
+      ran: '2019-12-28 00:00:00.000-05:00',
+      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
+      status: 'Completed',
+      response: 'Success',
+    },
+    {
+      id: 6,
+      rule: {
+        href: '#/detections/rules/rule-details',
+        name: 'Automated exfiltration',
+      },
+      ran: '2019-12-28 00:00:00.000-05:00',
+      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
+      status: 'Completed',
+      response: 'Success',
+    },
+    {
+      id: 7,
+      rule: {
+        href: '#/detections/rules/rule-details',
+        name: 'Automated exfiltration',
+      },
+      ran: '2019-12-28 00:00:00.000-05:00',
+      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
+      status: 'Completed',
+      response: 'Success',
+    },
+    {
+      id: 8,
+      rule: {
+        href: '#/detections/rules/rule-details',
+        name: 'Automated exfiltration',
+      },
+      ran: '2019-12-28 00:00:00.000-05:00',
+      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
+      status: 'Completed',
+      response: 'Success',
+    },
+    {
+      id: 9,
+      rule: {
+        href: '#/detections/rules/rule-details',
+        name: 'Automated exfiltration',
+      },
+      ran: '2019-12-28 00:00:00.000-05:00',
+      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
+      status: 'Completed',
+      response: 'Success',
+    },
+    {
+      id: 10,
+      rule: {
+        href: '#/detections/rules/rule-details',
+        name: 'Automated exfiltration',
+      },
+      ran: '2019-12-28 00:00:00.000-05:00',
+      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
+      status: 'Completed',
+      response: 'Success',
+    },
+    {
+      id: 11,
+      rule: {
+        href: '#/detections/rules/rule-details',
+        name: 'Automated exfiltration',
+      },
+      ran: '2019-12-28 00:00:00.000-05:00',
+      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
+      status: 'Completed',
+      response: 'Success',
+    },
+    {
+      id: 12,
+      rule: {
+        href: '#/detections/rules/rule-details',
+        name: 'Automated exfiltration',
+      },
+      ran: '2019-12-28 00:00:00.000-05:00',
+      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
+      status: 'Completed',
+      response: 'Success',
+    },
+    {
+      id: 13,
+      rule: {
+        href: '#/detections/rules/rule-details',
+        name: 'Automated exfiltration',
+      },
+      ran: '2019-12-28 00:00:00.000-05:00',
+      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
+      status: 'Completed',
+      response: 'Success',
+    },
+    {
+      id: 14,
+      rule: {
+        href: '#/detections/rules/rule-details',
+        name: 'Automated exfiltration',
+      },
+      ran: '2019-12-28 00:00:00.000-05:00',
+      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
+      status: 'Completed',
+      response: 'Success',
+    },
+    {
+      id: 15,
+      rule: {
+        href: '#/detections/rules/rule-details',
+        name: 'Automated exfiltration',
+      },
+      ran: '2019-12-28 00:00:00.000-05:00',
+      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
+      status: 'Completed',
+      response: 'Success',
+    },
+    {
+      id: 16,
+      rule: {
+        href: '#/detections/rules/rule-details',
+        name: 'Automated exfiltration',
+      },
+      ran: '2019-12-28 00:00:00.000-05:00',
+      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
+      status: 'Completed',
+      response: 'Success',
+    },
+    {
+      id: 17,
+      rule: {
+        href: '#/detections/rules/rule-details',
+        name: 'Automated exfiltration',
+      },
+      ran: '2019-12-28 00:00:00.000-05:00',
+      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
+      status: 'Completed',
+      response: 'Success',
+    },
+    {
+      id: 18,
+      rule: {
+        href: '#/detections/rules/rule-details',
+        name: 'Automated exfiltration',
+      },
+      ran: '2019-12-28 00:00:00.000-05:00',
+      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
+      status: 'Completed',
+      response: 'Success',
+    },
+    {
+      id: 19,
+      rule: {
+        href: '#/detections/rules/rule-details',
+        name: 'Automated exfiltration',
+      },
+      ran: '2019-12-28 00:00:00.000-05:00',
+      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
+      status: 'Completed',
+      response: 'Success',
+    },
+    {
+      id: 20,
+      rule: {
+        href: '#/detections/rules/rule-details',
+        name: 'Automated exfiltration',
+      },
+      ran: '2019-12-28 00:00:00.000-05:00',
+      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
+      status: 'Completed',
+      response: 'Success',
+    },
+    {
+      id: 21,
+      rule: {
+        href: '#/detections/rules/rule-details',
+        name: 'Automated exfiltration',
+      },
+      ran: '2019-12-28 00:00:00.000-05:00',
+      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
+      status: 'Completed',
+      response: 'Success',
+    },
+  ];
+
+  const [itemsTotalState] = useState<number>(sampleTableData.length);
+  const [pageState, setPageState] = useState<PageTypes>({ index: 0, size: 20 });
+  // const [selectedState, setSelectedState] = useState<ColumnTypes[]>([]);
+  const [sortState, setSortState] = useState<SortTypes>({ field: 'ran', direction: 'desc' });
+
+  const handleChange = useCallback(
+    ({ page, sort }: { page?: PageTypes; sort?: SortTypes }) => {
+      setPageState(page!);
+      setSortState(sort!);
+    },
+    [setPageState, setSortState]
+  );
+
+  return (
+    <>
+      <EuiSpacer />
+
+      <EuiPanel>
+        <HeaderSection title="Activity monitor" />
+        <UtilityBar border>
+          <UtilityBarSection>
+            <UtilityBarGroup>
+              <UtilityBarText>{'Showing: 39 activites'}</UtilityBarText>
+            </UtilityBarGroup>
+
+            <UtilityBarGroup>
+              <UtilityBarText>{'Selected: 2 activities'}</UtilityBarText>
+
+              <UtilityBarAction iconType="stop">{'Stop selected'}</UtilityBarAction>
+            </UtilityBarGroup>
+
+            <UtilityBarGroup>
+              <UtilityBarAction iconType="cross">{'Clear 7 filters'}</UtilityBarAction>
+            </UtilityBarGroup>
+          </UtilityBarSection>
+        </UtilityBar>
+        {
+          // @ts-ignore `Columns` interface differs from EUI's `column` type and is used all over this plugin, so ignore the differences instead of refactoring a lot of code
+        }
+        <EuiBasicTable
+          columns={columns}
+          isSelectable
+          itemId="id"
+          items={sampleTableData}
+          onChange={handleChange}
+          pagination={{
+            pageIndex: pageState.index,
+            pageSize: pageState.size,
+            totalItemCount: itemsTotalState,
+            pageSizeOptions: [5, 10, 20],
+          }}
+          selection={{
+            selectable: (item: ColumnTypes) => item.status !== 'Completed',
+            selectableMessage: (selectable: boolean) =>
+              selectable ? '' : 'Completed runs cannot be acted upon',
+            onSelectionChange: (selectedItems: ColumnTypes[]) => {
+              // setSelectedState(selectedItems);
+            },
+          }}
+          sorting={{
+            sort: sortState,
+          }}
+        />
+      </EuiPanel>
+    </>
+  );
+});
+ActivityMonitor.displayName = 'ActivityMonitor';
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/activity_monitor/types.ts b/x-pack/plugins/siem/public/alerts/components/activity_monitor/types.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/components/activity_monitor/types.ts
rename to x-pack/plugins/siem/public/alerts/components/activity_monitor/types.ts
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/detection_engine_header_page/index.test.tsx b/x-pack/plugins/siem/public/alerts/components/detection_engine_header_page/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/components/detection_engine_header_page/index.test.tsx
rename to x-pack/plugins/siem/public/alerts/components/detection_engine_header_page/index.test.tsx
diff --git a/x-pack/plugins/siem/public/alerts/components/detection_engine_header_page/index.tsx b/x-pack/plugins/siem/public/alerts/components/detection_engine_header_page/index.tsx
new file mode 100644
index 00000000000000..42a5afb600fba6
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/detection_engine_header_page/index.tsx
@@ -0,0 +1,24 @@
+/*
+ * 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 { HeaderPage, HeaderPageProps } from '../../../common/components/header_page';
+import * as i18n from './translations';
+
+const DetectionEngineHeaderPageComponent: React.FC<HeaderPageProps> = props => (
+  <HeaderPage {...props} />
+);
+
+DetectionEngineHeaderPageComponent.defaultProps = {
+  badgeOptions: {
+    beta: true,
+    text: i18n.PAGE_BADGE_LABEL,
+    tooltip: i18n.PAGE_BADGE_TOOLTIP,
+  },
+};
+
+export const DetectionEngineHeaderPage = React.memo(DetectionEngineHeaderPageComponent);
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/detection_engine_header_page/translations.ts b/x-pack/plugins/siem/public/alerts/components/detection_engine_header_page/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/components/detection_engine_header_page/translations.ts
rename to x-pack/plugins/siem/public/alerts/components/detection_engine_header_page/translations.ts
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/no_api_integration_callout/index.test.tsx b/x-pack/plugins/siem/public/alerts/components/no_api_integration_callout/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/components/no_api_integration_callout/index.test.tsx
rename to x-pack/plugins/siem/public/alerts/components/no_api_integration_callout/index.test.tsx
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/no_api_integration_callout/index.tsx b/x-pack/plugins/siem/public/alerts/components/no_api_integration_callout/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/components/no_api_integration_callout/index.tsx
rename to x-pack/plugins/siem/public/alerts/components/no_api_integration_callout/index.tsx
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/no_api_integration_callout/translations.ts b/x-pack/plugins/siem/public/alerts/components/no_api_integration_callout/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/components/no_api_integration_callout/translations.ts
rename to x-pack/plugins/siem/public/alerts/components/no_api_integration_callout/translations.ts
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/no_write_signals_callout/index.test.tsx b/x-pack/plugins/siem/public/alerts/components/no_write_signals_callout/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/components/no_write_signals_callout/index.test.tsx
rename to x-pack/plugins/siem/public/alerts/components/no_write_signals_callout/index.test.tsx
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/no_write_signals_callout/index.tsx b/x-pack/plugins/siem/public/alerts/components/no_write_signals_callout/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/components/no_write_signals_callout/index.tsx
rename to x-pack/plugins/siem/public/alerts/components/no_write_signals_callout/index.tsx
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/no_write_signals_callout/translations.ts b/x-pack/plugins/siem/public/alerts/components/no_write_signals_callout/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/components/no_write_signals_callout/translations.ts
rename to x-pack/plugins/siem/public/alerts/components/no_write_signals_callout/translations.ts
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/accordion_title/index.test.tsx b/x-pack/plugins/siem/public/alerts/components/rules/accordion_title/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/accordion_title/index.test.tsx
rename to x-pack/plugins/siem/public/alerts/components/rules/accordion_title/index.test.tsx
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/accordion_title/index.tsx b/x-pack/plugins/siem/public/alerts/components/rules/accordion_title/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/accordion_title/index.tsx
rename to x-pack/plugins/siem/public/alerts/components/rules/accordion_title/index.tsx
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/add_item_form/index.test.tsx b/x-pack/plugins/siem/public/alerts/components/rules/add_item_form/index.test.tsx
new file mode 100644
index 00000000000000..890e66c8767c4b
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/add_item_form/index.test.tsx
@@ -0,0 +1,32 @@
+/*
+ * 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 { AddItem } from './index';
+import { useFormFieldMock } from '../../../../common/mock/test_providers';
+
+describe('AddItem', () => {
+  it('renders correctly', () => {
+    const Component = () => {
+      const field = useFormFieldMock();
+
+      return (
+        <AddItem
+          addText="text"
+          field={field}
+          dataTestSubj="dataTestSubj"
+          idAria="idAria"
+          isDisabled={false}
+        />
+      );
+    };
+    const wrapper = shallow(<Component />);
+
+    expect(wrapper.dive().find('[iconType="plusInCircle"]')).toHaveLength(1);
+  });
+});
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/add_item_form/index.tsx b/x-pack/plugins/siem/public/alerts/components/rules/add_item_form/index.tsx
new file mode 100644
index 00000000000000..d6c18078f8acd4
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/add_item_form/index.tsx
@@ -0,0 +1,188 @@
+/*
+ * 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 {
+  EuiButtonEmpty,
+  EuiButtonIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiFieldText,
+  EuiSpacer,
+} from '@elastic/eui';
+import { isEmpty } from 'lodash/fp';
+import React, { ChangeEvent, useCallback, useEffect, useState, useRef } from 'react';
+import styled from 'styled-components';
+
+import * as RuleI18n from '../../../pages/detection_engine/rules/translations';
+import { FieldHook, getFieldValidityAndErrorMessage } from '../../../../shared_imports';
+
+interface AddItemProps {
+  addText: string;
+  field: FieldHook;
+  dataTestSubj: string;
+  idAria: string;
+  isDisabled: boolean;
+  validate?: (args: unknown) => boolean;
+}
+
+const MyEuiFormRow = styled(EuiFormRow)`
+  .euiFormRow__labelWrapper {
+    .euiText {
+      padding-right: 32px;
+    }
+  }
+`;
+
+export const MyAddItemButton = styled(EuiButtonEmpty)`
+  margin-top: 4px;
+
+  &.euiButtonEmpty--xSmall {
+    font-size: 12px;
+  }
+
+  .euiIcon {
+    width: 12px;
+    height: 12px;
+  }
+`;
+
+MyAddItemButton.defaultProps = {
+  flush: 'left',
+  iconType: 'plusInCircle',
+  size: 'xs',
+};
+
+export const AddItem = ({
+  addText,
+  dataTestSubj,
+  field,
+  idAria,
+  isDisabled,
+  validate,
+}: AddItemProps) => {
+  const [showValidation, setShowValidation] = useState(false);
+  const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
+  const [haveBeenKeyboardDeleted, setHaveBeenKeyboardDeleted] = useState(-1);
+
+  const inputsRef = useRef<HTMLInputElement[]>([]);
+
+  const removeItem = useCallback(
+    (index: number) => {
+      const values = field.value as string[];
+      const newValues = [...values.slice(0, index), ...values.slice(index + 1)];
+      field.setValue(newValues.length === 0 ? [''] : newValues);
+      inputsRef.current = [
+        ...inputsRef.current.slice(0, index),
+        ...inputsRef.current.slice(index + 1),
+      ];
+      inputsRef.current = inputsRef.current.map((ref, i) => {
+        if (i >= index && inputsRef.current[index] != null) {
+          ref.value = 're-render';
+        }
+        return ref;
+      });
+    },
+    [field]
+  );
+
+  const addItem = useCallback(() => {
+    const values = field.value as string[];
+    field.setValue([...values, '']);
+  }, [field]);
+
+  const updateItem = useCallback(
+    (event: ChangeEvent<HTMLInputElement>, index: number) => {
+      event.persist();
+      const values = field.value as string[];
+      const value = event.target.value;
+      field.setValue([...values.slice(0, index), value, ...values.slice(index + 1)]);
+    },
+    [field]
+  );
+
+  const handleLastInputRef = useCallback(
+    (index: number, element: HTMLInputElement | null) => {
+      if (element != null) {
+        inputsRef.current = [
+          ...inputsRef.current.slice(0, index),
+          element,
+          ...inputsRef.current.slice(index + 1),
+        ];
+      }
+    },
+    [inputsRef]
+  );
+
+  useEffect(() => {
+    if (
+      haveBeenKeyboardDeleted !== -1 &&
+      !isEmpty(inputsRef.current) &&
+      inputsRef.current[haveBeenKeyboardDeleted] != null
+    ) {
+      inputsRef.current[haveBeenKeyboardDeleted].focus();
+      setHaveBeenKeyboardDeleted(-1);
+    }
+  }, [haveBeenKeyboardDeleted, inputsRef.current]);
+
+  const values = field.value as string[];
+  return (
+    <MyEuiFormRow
+      label={field.label}
+      labelAppend={field.labelAppend}
+      error={showValidation ? errorMessage : null}
+      isInvalid={showValidation && isInvalid}
+      fullWidth
+      data-test-subj={dataTestSubj}
+      describedByIds={idAria ? [idAria] : undefined}
+    >
+      <>
+        {values.map((item, index) => {
+          const euiFieldProps = {
+            disabled: isDisabled,
+            ...(index === values.length - 1
+              ? { inputRef: handleLastInputRef.bind(null, index) }
+              : {}),
+            ...((inputsRef.current[index] != null && inputsRef.current[index].value !== item) ||
+            inputsRef.current[index] == null
+              ? { value: item }
+              : {}),
+            isInvalid: validate == null ? false : showValidation && validate(item),
+          };
+          return (
+            <div key={index}>
+              <EuiFlexGroup gutterSize="s" alignItems="center">
+                <EuiFlexItem grow>
+                  <EuiFieldText
+                    onBlur={() => setShowValidation(true)}
+                    onChange={e => updateItem(e, index)}
+                    fullWidth
+                    {...euiFieldProps}
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiButtonIcon
+                    color="danger"
+                    iconType="trash"
+                    isDisabled={isDisabled || (isEmpty(item) && values.length === 1)}
+                    onClick={() => removeItem(index)}
+                    aria-label={RuleI18n.DELETE}
+                  />
+                </EuiFlexItem>
+              </EuiFlexGroup>
+
+              {values.length - 1 !== index && <EuiSpacer size="s" />}
+            </div>
+          );
+        })}
+
+        <MyAddItemButton onClick={addItem} isDisabled={isDisabled}>
+          {addText}
+        </MyAddItemButton>
+      </>
+    </MyEuiFormRow>
+  );
+};
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/all_rules_tables/index.test.tsx b/x-pack/plugins/siem/public/alerts/components/rules/all_rules_tables/index.test.tsx
new file mode 100644
index 00000000000000..d841af69a7537d
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/all_rules_tables/index.test.tsx
@@ -0,0 +1,120 @@
+/*
+ * 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, { useRef } from 'react';
+import { shallow } from 'enzyme';
+
+import { AllRulesTables } from './index';
+import { AllRulesTabs } from '../../../pages/detection_engine/rules/all';
+
+describe('AllRulesTables', () => {
+  it('renders correctly', () => {
+    const Component = () => {
+      const ref = useRef();
+
+      return (
+        <AllRulesTables
+          selectedTab={AllRulesTabs.rules}
+          euiBasicTableSelectionProps={{}}
+          hasNoPermissions={false}
+          monitoringColumns={[]}
+          rules={[]}
+          rulesColumns={[]}
+          rulesStatuses={[]}
+          tableOnChangeCallback={jest.fn()}
+          tableRef={ref}
+          pagination={{
+            pageIndex: 0,
+            pageSize: 0,
+            totalItemCount: 0,
+            pageSizeOptions: [0],
+          }}
+          sorting={{
+            sort: {
+              field: 'enabled',
+              direction: 'asc',
+            },
+          }}
+        />
+      );
+    };
+    const wrapper = shallow(<Component />);
+
+    expect(wrapper.dive().find('[data-test-subj="rules-table"]')).toHaveLength(1);
+  });
+
+  it('renders rules tab when "selectedTab" is "rules"', () => {
+    const Component = () => {
+      const ref = useRef();
+
+      return (
+        <AllRulesTables
+          selectedTab={AllRulesTabs.rules}
+          euiBasicTableSelectionProps={{}}
+          hasNoPermissions={false}
+          monitoringColumns={[]}
+          rules={[]}
+          rulesColumns={[]}
+          rulesStatuses={[]}
+          tableOnChangeCallback={jest.fn()}
+          tableRef={ref}
+          pagination={{
+            pageIndex: 0,
+            pageSize: 0,
+            totalItemCount: 0,
+            pageSizeOptions: [0],
+          }}
+          sorting={{
+            sort: {
+              field: 'enabled',
+              direction: 'asc',
+            },
+          }}
+        />
+      );
+    };
+    const wrapper = shallow(<Component />);
+
+    expect(wrapper.dive().find('[data-test-subj="rules-table"]')).toHaveLength(1);
+    expect(wrapper.dive().find('[data-test-subj="monitoring-table"]')).toHaveLength(0);
+  });
+
+  it('renders monitoring tab when "selectedTab" is "monitoring"', () => {
+    const Component = () => {
+      const ref = useRef();
+
+      return (
+        <AllRulesTables
+          selectedTab={AllRulesTabs.monitoring}
+          euiBasicTableSelectionProps={{}}
+          hasNoPermissions={false}
+          monitoringColumns={[]}
+          rules={[]}
+          rulesColumns={[]}
+          rulesStatuses={[]}
+          tableOnChangeCallback={jest.fn()}
+          tableRef={ref}
+          pagination={{
+            pageIndex: 0,
+            pageSize: 0,
+            totalItemCount: 0,
+            pageSizeOptions: [0],
+          }}
+          sorting={{
+            sort: {
+              field: 'enabled',
+              direction: 'asc',
+            },
+          }}
+        />
+      );
+    };
+    const wrapper = shallow(<Component />);
+
+    expect(wrapper.dive().find('[data-test-subj="rules-table"]')).toHaveLength(0);
+    expect(wrapper.dive().find('[data-test-subj="monitoring-table"]')).toHaveLength(1);
+  });
+});
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/all_rules_tables/index.tsx b/x-pack/plugins/siem/public/alerts/components/rules/all_rules_tables/index.tsx
new file mode 100644
index 00000000000000..8fd3f648bc812c
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/all_rules_tables/index.tsx
@@ -0,0 +1,115 @@
+/*
+ * 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 {
+  EuiBasicTable,
+  EuiBasicTableColumn,
+  EuiEmptyPrompt,
+  Direction,
+  EuiTableSelectionType,
+} from '@elastic/eui';
+import React, { useMemo, memo } from 'react';
+import styled from 'styled-components';
+
+import { EuiBasicTableOnChange } from '../../../pages/detection_engine/rules/types';
+import * as i18n from '../../../pages/detection_engine/rules/translations';
+import {
+  RulesColumns,
+  RuleStatusRowItemType,
+} from '../../../pages/detection_engine/rules/all/columns';
+import { Rule, Rules } from '../../../containers/detection_engine/rules/types';
+import { AllRulesTabs } from '../../../pages/detection_engine/rules/all';
+
+// EuiBasicTable give me a hardtime with adding the ref attributes so I went the easy way
+// after few hours of fight with typescript !!!! I lost :(
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const MyEuiBasicTable = styled(EuiBasicTable as any)`` as any;
+
+export interface SortingType {
+  sort: {
+    field: 'enabled';
+    direction: Direction;
+  };
+}
+
+interface AllRulesTablesProps {
+  euiBasicTableSelectionProps: EuiTableSelectionType<Rule>;
+  hasNoPermissions: boolean;
+  monitoringColumns: Array<EuiBasicTableColumn<RuleStatusRowItemType>>;
+  pagination: {
+    pageIndex: number;
+    pageSize: number;
+    totalItemCount: number;
+    pageSizeOptions: number[];
+  };
+  rules: Rules;
+  rulesColumns: RulesColumns[];
+  rulesStatuses: RuleStatusRowItemType[];
+  sorting: {
+    sort: {
+      field: 'enabled';
+      direction: Direction;
+    };
+  };
+  tableOnChangeCallback: ({ page, sort }: EuiBasicTableOnChange) => void;
+  tableRef?: React.MutableRefObject<EuiBasicTable | undefined>;
+  selectedTab: AllRulesTabs;
+}
+
+export const AllRulesTablesComponent: React.FC<AllRulesTablesProps> = ({
+  euiBasicTableSelectionProps,
+  hasNoPermissions,
+  monitoringColumns,
+  pagination,
+  rules,
+  rulesColumns,
+  rulesStatuses,
+  sorting,
+  tableOnChangeCallback,
+  tableRef,
+  selectedTab,
+}) => {
+  const emptyPrompt = useMemo(() => {
+    return (
+      <EuiEmptyPrompt title={<h3>{i18n.NO_RULES}</h3>} titleSize="xs" body={i18n.NO_RULES_BODY} />
+    );
+  }, []);
+
+  return (
+    <>
+      {selectedTab === AllRulesTabs.rules && (
+        <MyEuiBasicTable
+          data-test-subj="rules-table"
+          columns={rulesColumns}
+          isSelectable={!hasNoPermissions ?? false}
+          itemId="id"
+          items={rules ?? []}
+          noItemsMessage={emptyPrompt}
+          onChange={tableOnChangeCallback}
+          pagination={pagination}
+          ref={tableRef}
+          sorting={sorting}
+          selection={hasNoPermissions ? undefined : euiBasicTableSelectionProps}
+        />
+      )}
+      {selectedTab === AllRulesTabs.monitoring && (
+        <MyEuiBasicTable
+          data-test-subj="monitoring-table"
+          columns={monitoringColumns}
+          isSelectable={!hasNoPermissions ?? false}
+          itemId="id"
+          items={rulesStatuses}
+          noItemsMessage={emptyPrompt}
+          onChange={tableOnChangeCallback}
+          pagination={pagination}
+          sorting={sorting}
+        />
+      )}
+    </>
+  );
+};
+
+export const AllRulesTables = memo(AllRulesTablesComponent);
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/anomaly_threshold_slider/index.test.tsx b/x-pack/plugins/siem/public/alerts/components/rules/anomaly_threshold_slider/index.test.tsx
new file mode 100644
index 00000000000000..5e65ff2fca59b3
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/anomaly_threshold_slider/index.test.tsx
@@ -0,0 +1,24 @@
+/*
+ * 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 { AnomalyThresholdSlider } from './index';
+import { useFormFieldMock } from '../../../../common/mock';
+
+describe('AnomalyThresholdSlider', () => {
+  it('renders correctly', () => {
+    const Component = () => {
+      const field = useFormFieldMock();
+
+      return <AnomalyThresholdSlider describedByIds={[]} field={field} />;
+    };
+    const wrapper = shallow(<Component />);
+
+    expect(wrapper.dive().find('EuiRange')).toHaveLength(1);
+  });
+});
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/anomaly_threshold_slider/index.tsx b/x-pack/plugins/siem/public/alerts/components/rules/anomaly_threshold_slider/index.tsx
new file mode 100644
index 00000000000000..705626c77621c7
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/anomaly_threshold_slider/index.tsx
@@ -0,0 +1,53 @@
+/*
+ * 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, { useCallback } from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiRange, EuiFormRow } from '@elastic/eui';
+
+import { FieldHook } from '../../../../shared_imports';
+
+interface AnomalyThresholdSliderProps {
+  describedByIds: string[];
+  field: FieldHook;
+}
+type Event = React.ChangeEvent<HTMLInputElement>;
+type EventArg = Event | React.MouseEvent<HTMLButtonElement>;
+
+export const AnomalyThresholdSlider = ({
+  describedByIds = [],
+  field,
+}: AnomalyThresholdSliderProps) => {
+  const threshold = field.value as number;
+  const onThresholdChange = useCallback(
+    (event: EventArg) => {
+      const thresholdValue = Number((event as Event).target.value);
+      field.setValue(thresholdValue);
+    },
+    [field]
+  );
+
+  return (
+    <EuiFormRow
+      label={field.label}
+      data-test-subj="anomalyThresholdSlider"
+      describedByIds={describedByIds}
+    >
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <EuiRange
+            value={threshold}
+            onChange={onThresholdChange}
+            fullWidth
+            showInput
+            showRange
+            showTicks
+            tickInterval={25}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiFormRow>
+  );
+};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/description_step/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/alerts/components/rules/description_step/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/description_step/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/alerts/components/rules/description_step/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/description_step/assets/list_tree_icon.svg b/x-pack/plugins/siem/public/alerts/components/rules/description_step/assets/list_tree_icon.svg
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/description_step/assets/list_tree_icon.svg
rename to x-pack/plugins/siem/public/alerts/components/rules/description_step/assets/list_tree_icon.svg
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/description_step/helpers.test.tsx b/x-pack/plugins/siem/public/alerts/components/rules/description_step/helpers.test.tsx
new file mode 100644
index 00000000000000..70de3d2a72dcc2
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/description_step/helpers.test.tsx
@@ -0,0 +1,415 @@
+/*
+ * 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 { EuiLoadingSpinner } from '@elastic/eui';
+
+import { coreMock } from '../../../../../../../../src/core/public/mocks';
+import { esFilters, FilterManager } from '../../../../../../../../src/plugins/data/public';
+import { SeverityBadge } from '../severity_badge';
+
+import * as i18n from './translations';
+import {
+  isNotEmptyArray,
+  buildQueryBarDescription,
+  buildThreatDescription,
+  buildUnorderedListArrayDescription,
+  buildStringArrayDescription,
+  buildSeverityDescription,
+  buildUrlsDescription,
+  buildNoteDescription,
+  buildRuleTypeDescription,
+} from './helpers';
+import { ListItems } from './types';
+
+const setupMock = coreMock.createSetup();
+const uiSettingsMock = (pinnedByDefault: boolean) => (key: string) => {
+  switch (key) {
+    case 'filters:pinnedByDefault':
+      return pinnedByDefault;
+    default:
+      throw new Error(`Unexpected uiSettings key in FilterManager mock: ${key}`);
+  }
+};
+setupMock.uiSettings.get.mockImplementation(uiSettingsMock(true));
+const mockFilterManager = new FilterManager(setupMock.uiSettings);
+
+const mockQueryBar = {
+  query: 'test query',
+  filters: [
+    {
+      $state: {
+        store: esFilters.FilterStateStore.GLOBAL_STATE,
+      },
+      meta: {
+        alias: null,
+        disabled: false,
+        key: 'event.category',
+        negate: false,
+        params: {
+          query: 'file',
+        },
+        type: 'phrase',
+      },
+      query: {
+        match_phrase: {
+          'event.category': 'file',
+        },
+      },
+    },
+  ],
+  saved_id: 'test123',
+};
+
+describe('helpers', () => {
+  describe('isNotEmptyArray', () => {
+    test('returns false if empty array', () => {
+      const result = isNotEmptyArray([]);
+      expect(result).toBeFalsy();
+    });
+
+    test('returns false if array of empty strings', () => {
+      const result = isNotEmptyArray(['', '']);
+      expect(result).toBeFalsy();
+    });
+
+    test('returns true if array of string with space', () => {
+      const result = isNotEmptyArray([' ']);
+      expect(result).toBeTruthy();
+    });
+
+    test('returns true if array with at least one non-empty string', () => {
+      const result = isNotEmptyArray(['', 'abc']);
+      expect(result).toBeTruthy();
+    });
+  });
+
+  describe('buildQueryBarDescription', () => {
+    test('returns empty array if no filters, query or savedId exist', () => {
+      const emptyMockQueryBar = {
+        query: '',
+        filters: [],
+        saved_id: '',
+      };
+      const result: ListItems[] = buildQueryBarDescription({
+        field: 'queryBar',
+        filters: emptyMockQueryBar.filters,
+        filterManager: mockFilterManager,
+        query: emptyMockQueryBar.query,
+        savedId: emptyMockQueryBar.saved_id,
+      });
+      expect(result).toEqual([]);
+    });
+
+    test('returns expected array of ListItems when filters exists, but no indexPatterns passed in', () => {
+      const mockQueryBarWithFilters = {
+        ...mockQueryBar,
+        query: '',
+        saved_id: '',
+      };
+      const result: ListItems[] = buildQueryBarDescription({
+        field: 'queryBar',
+        filters: mockQueryBarWithFilters.filters,
+        filterManager: mockFilterManager,
+        query: mockQueryBarWithFilters.query,
+        savedId: mockQueryBarWithFilters.saved_id,
+      });
+      const wrapper = shallow<React.ReactElement>(result[0].description as React.ReactElement);
+
+      expect(result[0].title).toEqual(<>{i18n.FILTERS_LABEL} </>);
+      expect(wrapper.find(EuiLoadingSpinner).exists()).toBeTruthy();
+    });
+
+    test('returns expected array of ListItems when filters AND indexPatterns exist', () => {
+      const mockQueryBarWithFilters = {
+        ...mockQueryBar,
+        query: '',
+        saved_id: '',
+      };
+      const result: ListItems[] = buildQueryBarDescription({
+        field: 'queryBar',
+        filters: mockQueryBarWithFilters.filters,
+        filterManager: mockFilterManager,
+        query: mockQueryBarWithFilters.query,
+        savedId: mockQueryBarWithFilters.saved_id,
+        indexPatterns: { fields: [{ name: 'test name', type: 'test type' }], title: 'test title' },
+      });
+      const wrapper = shallow<React.ReactElement>(result[0].description as React.ReactElement);
+      const filterLabelComponent = wrapper.find(esFilters.FilterLabel).at(0);
+
+      expect(result[0].title).toEqual(<>{i18n.FILTERS_LABEL} </>);
+      expect(filterLabelComponent.prop('valueLabel')).toEqual('file');
+      expect(filterLabelComponent.prop('filter')).toEqual(mockQueryBar.filters[0]);
+    });
+
+    test('returns expected array of ListItems when "query.query" exists', () => {
+      const mockQueryBarWithQuery = {
+        ...mockQueryBar,
+        filters: [],
+        saved_id: '',
+      };
+      const result: ListItems[] = buildQueryBarDescription({
+        field: 'queryBar',
+        filters: mockQueryBarWithQuery.filters,
+        filterManager: mockFilterManager,
+        query: mockQueryBarWithQuery.query,
+        savedId: mockQueryBarWithQuery.saved_id,
+      });
+      expect(result[0].title).toEqual(<>{i18n.QUERY_LABEL} </>);
+      expect(result[0].description).toEqual(<>{mockQueryBarWithQuery.query} </>);
+    });
+
+    test('returns expected array of ListItems when "savedId" exists', () => {
+      const mockQueryBarWithSavedId = {
+        ...mockQueryBar,
+        query: '',
+        filters: [],
+      };
+      const result: ListItems[] = buildQueryBarDescription({
+        field: 'queryBar',
+        filters: mockQueryBarWithSavedId.filters,
+        filterManager: mockFilterManager,
+        query: mockQueryBarWithSavedId.query,
+        savedId: mockQueryBarWithSavedId.saved_id,
+      });
+      expect(result[0].title).toEqual(<>{i18n.SAVED_ID_LABEL} </>);
+      expect(result[0].description).toEqual(<>{mockQueryBarWithSavedId.saved_id} </>);
+    });
+  });
+
+  describe('buildThreatDescription', () => {
+    test('returns empty array if no threats', () => {
+      const result: ListItems[] = buildThreatDescription({ label: 'Mitre Attack', threat: [] });
+      expect(result).toHaveLength(0);
+    });
+
+    test('returns empty tactic link if no corresponding tactic id found', () => {
+      const result: ListItems[] = buildThreatDescription({
+        label: 'Mitre Attack',
+        threat: [
+          {
+            framework: 'MITRE ATTACK',
+            technique: [{ reference: 'https://test.com', name: 'Audio Capture', id: 'T1123' }],
+            tactic: { reference: 'https://test.com', name: 'Collection', id: 'TA000999' },
+          },
+        ],
+      });
+      const wrapper = shallow<React.ReactElement>(result[0].description as React.ReactElement);
+      expect(result[0].title).toEqual('Mitre Attack');
+      expect(wrapper.find('[data-test-subj="threatTacticLink"]').text()).toEqual('');
+      expect(wrapper.find('[data-test-subj="threatTechniqueLink"]').text()).toEqual(
+        'Audio Capture (T1123)'
+      );
+    });
+
+    test('returns empty technique link if no corresponding technique id found', () => {
+      const result: ListItems[] = buildThreatDescription({
+        label: 'Mitre Attack',
+        threat: [
+          {
+            framework: 'MITRE ATTACK',
+            technique: [{ reference: 'https://test.com', name: 'Audio Capture', id: 'T1123456' }],
+            tactic: { reference: 'https://test.com', name: 'Collection', id: 'TA0009' },
+          },
+        ],
+      });
+      const wrapper = shallow<React.ReactElement>(result[0].description as React.ReactElement);
+      expect(result[0].title).toEqual('Mitre Attack');
+      expect(wrapper.find('[data-test-subj="threatTacticLink"]').text()).toEqual(
+        'Collection (TA0009)'
+      );
+      expect(wrapper.find('[data-test-subj="threatTechniqueLink"]').text()).toEqual('');
+    });
+
+    test('returns with corresponding tactic and technique link text', () => {
+      const result: ListItems[] = buildThreatDescription({
+        label: 'Mitre Attack',
+        threat: [
+          {
+            framework: 'MITRE ATTACK',
+            technique: [{ reference: 'https://test.com', name: 'Audio Capture', id: 'T1123' }],
+            tactic: { reference: 'https://test.com', name: 'Collection', id: 'TA0009' },
+          },
+        ],
+      });
+      const wrapper = shallow<React.ReactElement>(result[0].description as React.ReactElement);
+      expect(result[0].title).toEqual('Mitre Attack');
+      expect(wrapper.find('[data-test-subj="threatTacticLink"]').text()).toEqual(
+        'Collection (TA0009)'
+      );
+      expect(wrapper.find('[data-test-subj="threatTechniqueLink"]').text()).toEqual(
+        'Audio Capture (T1123)'
+      );
+    });
+
+    test('returns corresponding number of tactic and technique links', () => {
+      const result: ListItems[] = buildThreatDescription({
+        label: 'Mitre Attack',
+        threat: [
+          {
+            framework: 'MITRE ATTACK',
+            technique: [
+              { reference: 'https://test.com', name: 'Audio Capture', id: 'T1123' },
+              { reference: 'https://test.com', name: 'Clipboard Data', id: 'T1115' },
+            ],
+            tactic: { reference: 'https://test.com', name: 'Collection', id: 'TA0009' },
+          },
+          {
+            framework: 'MITRE ATTACK',
+            technique: [
+              { reference: 'https://test.com', name: 'Automated Collection', id: 'T1119' },
+            ],
+            tactic: { reference: 'https://test.com', name: 'Discovery', id: 'TA0007' },
+          },
+        ],
+      });
+      const wrapper = shallow<React.ReactElement>(result[0].description as React.ReactElement);
+
+      expect(wrapper.find('[data-test-subj="threatTacticLink"]')).toHaveLength(2);
+      expect(wrapper.find('[data-test-subj="threatTechniqueLink"]')).toHaveLength(3);
+    });
+  });
+
+  describe('buildUnorderedListArrayDescription', () => {
+    test('returns empty array if "values" is empty array', () => {
+      const result: ListItems[] = buildUnorderedListArrayDescription(
+        'Test label',
+        'falsePositives',
+        []
+      );
+      expect(result).toHaveLength(0);
+    });
+
+    test('returns ListItem with corresponding number of valid values items', () => {
+      const result: ListItems[] = buildUnorderedListArrayDescription(
+        'Test label',
+        'falsePositives',
+        ['', 'falsePositive1', 'falsePositive2']
+      );
+      const wrapper = shallow<React.ReactElement>(result[0].description as React.ReactElement);
+
+      expect(result[0].title).toEqual('Test label');
+      expect(wrapper.find('[data-test-subj="unorderedListArrayDescriptionItem"]')).toHaveLength(2);
+    });
+  });
+
+  describe('buildStringArrayDescription', () => {
+    test('returns empty array if "values" is empty array', () => {
+      const result: ListItems[] = buildStringArrayDescription('Test label', 'tags', []);
+      expect(result).toHaveLength(0);
+    });
+
+    test('returns ListItem with corresponding number of valid values items', () => {
+      const result: ListItems[] = buildStringArrayDescription('Test label', 'tags', [
+        '',
+        'tag1',
+        'tag2',
+      ]);
+      const wrapper = shallow<React.ReactElement>(result[0].description as React.ReactElement);
+
+      expect(result[0].title).toEqual('Test label');
+      expect(wrapper.find('[data-test-subj="stringArrayDescriptionBadgeItem"]')).toHaveLength(2);
+      expect(
+        wrapper
+          .find('[data-test-subj="stringArrayDescriptionBadgeItem"]')
+          .first()
+          .text()
+      ).toEqual('tag1');
+      expect(
+        wrapper
+          .find('[data-test-subj="stringArrayDescriptionBadgeItem"]')
+          .at(1)
+          .text()
+      ).toEqual('tag2');
+    });
+  });
+
+  describe('buildSeverityDescription', () => {
+    test('returns ListItem with passed in label and SeverityBadge component', () => {
+      const result: ListItems[] = buildSeverityDescription('Test label', 'Test description value');
+
+      expect(result[0].title).toEqual('Test label');
+      expect(result[0].description).toEqual(<SeverityBadge value="Test description value" />);
+    });
+  });
+
+  describe('buildUrlsDescription', () => {
+    test('returns empty array if "values" is empty array', () => {
+      const result: ListItems[] = buildUrlsDescription('Test label', []);
+      expect(result).toHaveLength(0);
+    });
+
+    test('returns ListItem with corresponding number of valid values items', () => {
+      const result: ListItems[] = buildUrlsDescription('Test label', [
+        'www.test.com',
+        'www.test2.com',
+      ]);
+      const wrapper = shallow<React.ReactElement>(result[0].description as React.ReactElement);
+
+      expect(result[0].title).toEqual('Test label');
+      expect(wrapper.find('[data-test-subj="urlsDescriptionReferenceLinkItem"]')).toHaveLength(2);
+      expect(
+        wrapper
+          .find('[data-test-subj="urlsDescriptionReferenceLinkItem"]')
+          .first()
+          .text()
+      ).toEqual('www.test.com');
+      expect(
+        wrapper
+          .find('[data-test-subj="urlsDescriptionReferenceLinkItem"]')
+          .at(1)
+          .text()
+      ).toEqual('www.test2.com');
+    });
+  });
+
+  describe('buildNoteDescription', () => {
+    test('returns ListItem with passed in label and note content', () => {
+      const noteSample =
+        'Cras mattism. [Pellentesque](https://elastic.co). ### Malesuada adipiscing tristique';
+      const result: ListItems[] = buildNoteDescription('Test label', noteSample);
+      const wrapper = shallow<React.ReactElement>(result[0].description as React.ReactElement);
+      const noteElement = wrapper.find('[data-test-subj="noteDescriptionItem"]').at(0);
+
+      expect(result[0].title).toEqual('Test label');
+      expect(noteElement.exists()).toBeTruthy();
+      expect(noteElement.text()).toEqual(noteSample);
+    });
+
+    test('returns empty array if passed in note is empty string', () => {
+      const result: ListItems[] = buildNoteDescription('Test label', '');
+
+      expect(result).toHaveLength(0);
+    });
+  });
+
+  describe('buildRuleTypeDescription', () => {
+    it('returns the label for a machine_learning type', () => {
+      const [result]: ListItems[] = buildRuleTypeDescription('Test label', 'machine_learning');
+
+      expect(result.title).toEqual('Test label');
+    });
+
+    it('returns a humanized description for a machine_learning type', () => {
+      const [result]: ListItems[] = buildRuleTypeDescription('Test label', 'machine_learning');
+
+      expect(result.description).toEqual('Machine Learning');
+    });
+
+    it('returns the label for a query type', () => {
+      const [result]: ListItems[] = buildRuleTypeDescription('Test label', 'query');
+
+      expect(result.title).toEqual('Test label');
+    });
+
+    it('returns a humanized description for a query type', () => {
+      const [result]: ListItems[] = buildRuleTypeDescription('Test label', 'query');
+
+      expect(result.description).toEqual('Query');
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/description_step/helpers.tsx b/x-pack/plugins/siem/public/alerts/components/rules/description_step/helpers.tsx
new file mode 100644
index 00000000000000..ad3ed538c875b7
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/description_step/helpers.tsx
@@ -0,0 +1,294 @@
+/*
+ * 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 {
+  EuiBadge,
+  EuiLoadingSpinner,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonEmpty,
+  EuiSpacer,
+  EuiLink,
+  EuiText,
+} from '@elastic/eui';
+
+import { isEmpty } from 'lodash/fp';
+import React from 'react';
+import styled from 'styled-components';
+
+import { RuleType } from '../../../../../common/detection_engine/types';
+import { esFilters } from '../../../../../../../../src/plugins/data/public';
+
+import { tacticsOptions, techniquesOptions } from '../../../mitre/mitre_tactics_techniques';
+
+import * as i18n from './translations';
+import { BuildQueryBarDescription, BuildThreatDescription, ListItems } from './types';
+import { SeverityBadge } from '../severity_badge';
+import ListTreeIcon from './assets/list_tree_icon.svg';
+import { assertUnreachable } from '../../../../common/lib/helpers';
+
+const NoteDescriptionContainer = styled(EuiFlexItem)`
+  height: 105px;
+  overflow-y: hidden;
+`;
+
+export const isNotEmptyArray = (values: string[]) => !isEmpty(values.join(''));
+
+const EuiBadgeWrap = (styled(EuiBadge)`
+  .euiBadge__text {
+    white-space: pre-wrap !important;
+  }
+` as unknown) as typeof EuiBadge;
+
+export const buildQueryBarDescription = ({
+  field,
+  filters,
+  filterManager,
+  query,
+  savedId,
+  indexPatterns,
+}: BuildQueryBarDescription): ListItems[] => {
+  let items: ListItems[] = [];
+  if (!isEmpty(filters)) {
+    filterManager.setFilters(filters);
+    items = [
+      ...items,
+      {
+        title: <>{i18n.FILTERS_LABEL} </>,
+        description: (
+          <EuiFlexGroup wrap responsive={false} gutterSize="xs">
+            {filterManager.getFilters().map((filter, index) => (
+              <EuiFlexItem grow={false} key={`${field}-filter-${index}`}>
+                <EuiBadgeWrap color="hollow">
+                  {indexPatterns != null ? (
+                    <esFilters.FilterLabel
+                      filter={filter}
+                      valueLabel={esFilters.getDisplayValueFromFilter(filter, [indexPatterns])}
+                    />
+                  ) : (
+                    <EuiLoadingSpinner size="m" />
+                  )}
+                </EuiBadgeWrap>
+              </EuiFlexItem>
+            ))}
+          </EuiFlexGroup>
+        ),
+      },
+    ];
+  }
+  if (!isEmpty(query)) {
+    items = [
+      ...items,
+      {
+        title: <>{i18n.QUERY_LABEL} </>,
+        description: <>{query} </>,
+      },
+    ];
+  }
+  if (!isEmpty(savedId)) {
+    items = [
+      ...items,
+      {
+        title: <>{i18n.SAVED_ID_LABEL} </>,
+        description: <>{savedId} </>,
+      },
+    ];
+  }
+  return items;
+};
+
+const ThreatEuiFlexGroup = styled(EuiFlexGroup)`
+  .euiFlexItem {
+    margin-bottom: 0px;
+  }
+`;
+
+const TechniqueLinkItem = styled(EuiButtonEmpty)`
+  .euiIcon {
+    width: 8px;
+    height: 8px;
+  }
+`;
+
+export const buildThreatDescription = ({ label, threat }: BuildThreatDescription): ListItems[] => {
+  if (threat.length > 0) {
+    return [
+      {
+        title: label,
+        description: (
+          <ThreatEuiFlexGroup direction="column">
+            {threat.map((singleThreat, index) => {
+              const tactic = tacticsOptions.find(t => t.id === singleThreat.tactic.id);
+              return (
+                <EuiFlexItem key={`${singleThreat.tactic.name}-${index}`}>
+                  <EuiLink
+                    data-test-subj="threatTacticLink"
+                    href={singleThreat.tactic.reference}
+                    target="_blank"
+                  >
+                    {tactic != null ? tactic.text : ''}
+                  </EuiLink>
+                  <EuiFlexGroup gutterSize="none" alignItems="flexStart" direction="column">
+                    {singleThreat.technique.map(technique => {
+                      const myTechnique = techniquesOptions.find(t => t.id === technique.id);
+                      return (
+                        <EuiFlexItem>
+                          <TechniqueLinkItem
+                            data-test-subj="threatTechniqueLink"
+                            href={technique.reference}
+                            target="_blank"
+                            iconType={ListTreeIcon}
+                            size="xs"
+                            flush="left"
+                          >
+                            {myTechnique != null ? myTechnique.label : ''}
+                          </TechniqueLinkItem>
+                        </EuiFlexItem>
+                      );
+                    })}
+                  </EuiFlexGroup>
+                </EuiFlexItem>
+              );
+            })}
+            <EuiSpacer />
+          </ThreatEuiFlexGroup>
+        ),
+      },
+    ];
+  }
+  return [];
+};
+
+export const buildUnorderedListArrayDescription = (
+  label: string,
+  field: string,
+  values: string[]
+): ListItems[] => {
+  if (isNotEmptyArray(values)) {
+    return [
+      {
+        title: label,
+        description: (
+          <EuiText size="s">
+            <ul>
+              {values.map(val =>
+                isEmpty(val) ? null : (
+                  <li data-test-subj="unorderedListArrayDescriptionItem" key={`${field}-${val}`}>
+                    {val}
+                  </li>
+                )
+              )}
+            </ul>
+          </EuiText>
+        ),
+      },
+    ];
+  }
+  return [];
+};
+
+export const buildStringArrayDescription = (
+  label: string,
+  field: string,
+  values: string[]
+): ListItems[] => {
+  if (isNotEmptyArray(values)) {
+    return [
+      {
+        title: label,
+        description: (
+          <EuiFlexGroup responsive={false} gutterSize="xs" wrap>
+            {values.map((val: string) =>
+              isEmpty(val) ? null : (
+                <EuiFlexItem grow={false} key={`${field}-${val}`}>
+                  <EuiBadgeWrap data-test-subj="stringArrayDescriptionBadgeItem" color="hollow">
+                    {val}
+                  </EuiBadgeWrap>
+                </EuiFlexItem>
+              )
+            )}
+          </EuiFlexGroup>
+        ),
+      },
+    ];
+  }
+  return [];
+};
+
+export const buildSeverityDescription = (label: string, value: string): ListItems[] => [
+  {
+    title: label,
+    description: <SeverityBadge value={value} />,
+  },
+];
+
+export const buildUrlsDescription = (label: string, values: string[]): ListItems[] => {
+  if (isNotEmptyArray(values)) {
+    return [
+      {
+        title: label,
+        description: (
+          <EuiText size="s">
+            <ul>
+              {values
+                .filter(v => !isEmpty(v))
+                .map((val, index) => (
+                  <li data-test-subj="urlsDescriptionReferenceLinkItem" key={`${index}-${val}`}>
+                    <EuiLink href={val} external target="_blank">
+                      {val}
+                    </EuiLink>
+                  </li>
+                ))}
+            </ul>
+          </EuiText>
+        ),
+      },
+    ];
+  }
+  return [];
+};
+
+export const buildNoteDescription = (label: string, note: string): ListItems[] => {
+  if (note.trim() !== '') {
+    return [
+      {
+        title: label,
+        description: (
+          <NoteDescriptionContainer>
+            <div data-test-subj="noteDescriptionItem" className="eui-yScrollWithShadows">
+              {note}
+            </div>
+          </NoteDescriptionContainer>
+        ),
+      },
+    ];
+  }
+  return [];
+};
+
+export const buildRuleTypeDescription = (label: string, ruleType: RuleType): ListItems[] => {
+  switch (ruleType) {
+    case 'machine_learning': {
+      return [
+        {
+          title: label,
+          description: i18n.ML_TYPE_DESCRIPTION,
+        },
+      ];
+    }
+    case 'query':
+    case 'saved_query': {
+      return [
+        {
+          title: label,
+          description: i18n.QUERY_TYPE_DESCRIPTION,
+        },
+      ];
+    }
+    default:
+      return assertUnreachable(ruleType);
+  }
+};
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/description_step/index.test.tsx b/x-pack/plugins/siem/public/alerts/components/rules/description_step/index.test.tsx
new file mode 100644
index 00000000000000..0cd79f1db78a03
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/description_step/index.test.tsx
@@ -0,0 +1,474 @@
+/*
+ * 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 {
+  StepRuleDescriptionComponent,
+  addFilterStateIfNotThere,
+  buildListItems,
+  getDescriptionItem,
+} from '.';
+
+import { esFilters, Filter, FilterManager } from '../../../../../../../../src/plugins/data/public';
+import {
+  mockAboutStepRule,
+  mockDefineStepRule,
+} from '../../../pages/detection_engine/rules/all/__mocks__/mock';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { coreMock } from '../../../../../../../../src/core/public/mocks';
+import { DEFAULT_TIMELINE_TITLE } from '../../../../timelines/components/timeline/translations';
+import * as i18n from './translations';
+
+import { schema } from '../step_about_rule/schema';
+import { ListItems } from './types';
+import { AboutStepRule } from '../../../pages/detection_engine/rules/types';
+
+jest.mock('../../../../common/lib/kibana');
+
+describe('description_step', () => {
+  const setupMock = coreMock.createSetup();
+  const uiSettingsMock = (pinnedByDefault: boolean) => (key: string) => {
+    switch (key) {
+      case 'filters:pinnedByDefault':
+        return pinnedByDefault;
+      default:
+        throw new Error(`Unexpected uiSettings key in FilterManager mock: ${key}`);
+    }
+  };
+  let mockFilterManager: FilterManager;
+  let mockAboutStep: AboutStepRule;
+
+  beforeEach(() => {
+    setupMock.uiSettings.get.mockImplementation(uiSettingsMock(true));
+    mockFilterManager = new FilterManager(setupMock.uiSettings);
+    mockAboutStep = mockAboutStepRule();
+  });
+
+  describe('StepRuleDescriptionComponent', () => {
+    test('renders correctly against snapshot when columns is "multi"', () => {
+      const wrapper = shallow(
+        <StepRuleDescriptionComponent columns="multi" data={mockAboutStep} schema={schema} />
+      );
+      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.find('[data-test-subj="listItemColumnStepRuleDescription"]')).toHaveLength(2);
+    });
+
+    test('renders correctly against snapshot when columns is "single"', () => {
+      const wrapper = shallow(
+        <StepRuleDescriptionComponent columns="single" data={mockAboutStep} schema={schema} />
+      );
+      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.find('[data-test-subj="listItemColumnStepRuleDescription"]')).toHaveLength(1);
+    });
+
+    test('renders correctly against snapshot when columns is "singleSplit', () => {
+      const wrapper = shallow(
+        <StepRuleDescriptionComponent columns="singleSplit" data={mockAboutStep} schema={schema} />
+      );
+      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.find('[data-test-subj="listItemColumnStepRuleDescription"]')).toHaveLength(1);
+      expect(
+        wrapper
+          .find('[data-test-subj="singleSplitStepRuleDescriptionList"]')
+          .at(0)
+          .prop('type')
+      ).toEqual('column');
+    });
+  });
+
+  describe('addFilterStateIfNotThere', () => {
+    test('it does not change the state if it is global', () => {
+      const filters: Filter[] = [
+        {
+          $state: {
+            store: esFilters.FilterStateStore.GLOBAL_STATE,
+          },
+          meta: {
+            alias: null,
+            disabled: false,
+            key: 'event.category',
+            negate: false,
+            params: {
+              query: 'file',
+            },
+            type: 'phrase',
+          },
+          query: {
+            match_phrase: {
+              'event.category': 'file',
+            },
+          },
+        },
+        {
+          $state: {
+            store: esFilters.FilterStateStore.GLOBAL_STATE,
+          },
+          meta: {
+            alias: null,
+            disabled: false,
+            key: 'event.category',
+            negate: false,
+            params: {
+              query: 'file',
+            },
+            type: 'phrase',
+          },
+          query: {
+            match_phrase: {
+              'event.category': 'file',
+            },
+          },
+        },
+      ];
+      const output = addFilterStateIfNotThere(filters);
+      const expected: Filter[] = [
+        {
+          $state: {
+            store: esFilters.FilterStateStore.GLOBAL_STATE,
+          },
+          meta: {
+            alias: null,
+            disabled: false,
+            key: 'event.category',
+            negate: false,
+            params: {
+              query: 'file',
+            },
+            type: 'phrase',
+          },
+          query: {
+            match_phrase: {
+              'event.category': 'file',
+            },
+          },
+        },
+        {
+          $state: {
+            store: esFilters.FilterStateStore.GLOBAL_STATE,
+          },
+          meta: {
+            alias: null,
+            disabled: false,
+            key: 'event.category',
+            negate: false,
+            params: {
+              query: 'file',
+            },
+            type: 'phrase',
+          },
+          query: {
+            match_phrase: {
+              'event.category': 'file',
+            },
+          },
+        },
+      ];
+      expect(output).toEqual(expected);
+    });
+
+    test('it adds the state if it does not exist as local', () => {
+      const filters: Filter[] = [
+        {
+          meta: {
+            alias: null,
+            disabled: false,
+            key: 'event.category',
+            negate: false,
+            params: {
+              query: 'file',
+            },
+            type: 'phrase',
+          },
+          query: {
+            match_phrase: {
+              'event.category': 'file',
+            },
+          },
+        },
+        {
+          meta: {
+            alias: null,
+            disabled: false,
+            key: 'event.category',
+            negate: false,
+            params: {
+              query: 'file',
+            },
+            type: 'phrase',
+          },
+          query: {
+            match_phrase: {
+              'event.category': 'file',
+            },
+          },
+        },
+      ];
+      const output = addFilterStateIfNotThere(filters);
+      const expected: Filter[] = [
+        {
+          $state: {
+            store: esFilters.FilterStateStore.APP_STATE,
+          },
+          meta: {
+            alias: null,
+            disabled: false,
+            key: 'event.category',
+            negate: false,
+            params: {
+              query: 'file',
+            },
+            type: 'phrase',
+          },
+          query: {
+            match_phrase: {
+              'event.category': 'file',
+            },
+          },
+        },
+        {
+          $state: {
+            store: esFilters.FilterStateStore.APP_STATE,
+          },
+          meta: {
+            alias: null,
+            disabled: false,
+            key: 'event.category',
+            negate: false,
+            params: {
+              query: 'file',
+            },
+            type: 'phrase',
+          },
+          query: {
+            match_phrase: {
+              'event.category': 'file',
+            },
+          },
+        },
+      ];
+      expect(output).toEqual(expected);
+    });
+  });
+
+  describe('buildListItems', () => {
+    test('returns expected ListItems array when given valid inputs', () => {
+      const result: ListItems[] = buildListItems(mockAboutStep, schema, mockFilterManager);
+
+      expect(result.length).toEqual(9);
+    });
+  });
+
+  describe('getDescriptionItem', () => {
+    test('returns ListItem with all values enumerated when value[field] is an array', () => {
+      const result: ListItems[] = getDescriptionItem(
+        'tags',
+        'Tags label',
+        mockAboutStep,
+        mockFilterManager
+      );
+
+      expect(result[0].title).toEqual('Tags label');
+      expect(typeof result[0].description).toEqual('object');
+    });
+
+    test('returns ListItem with description of value[field] when value[field] is a string', () => {
+      const result: ListItems[] = getDescriptionItem(
+        'description',
+        'Description label',
+        mockAboutStep,
+        mockFilterManager
+      );
+
+      expect(result[0].title).toEqual('Description label');
+      expect(result[0].description).toEqual('24/7');
+    });
+
+    test('returns empty array when "value" is a non-existant property in "field"', () => {
+      const result: ListItems[] = getDescriptionItem(
+        'jibberjabber',
+        'JibberJabber label',
+        mockAboutStep,
+        mockFilterManager
+      );
+
+      expect(result.length).toEqual(0);
+    });
+
+    describe('queryBar', () => {
+      test('returns array of ListItems when queryBar exist', () => {
+        const mockQueryBar = {
+          isNew: false,
+          queryBar: {
+            query: {
+              query: 'user.name: root or user.name: admin',
+              language: 'kuery',
+            },
+            filters: null,
+            saved_id: null,
+          },
+        };
+        const result: ListItems[] = getDescriptionItem(
+          'queryBar',
+          'Query bar label',
+          mockQueryBar,
+          mockFilterManager
+        );
+
+        expect(result[0].title).toEqual(<>{i18n.QUERY_LABEL} </>);
+        expect(result[0].description).toEqual(<>{mockQueryBar.queryBar.query.query} </>);
+      });
+    });
+
+    describe('threat', () => {
+      test('returns array of ListItems when threat exist', () => {
+        const result: ListItems[] = getDescriptionItem(
+          'threat',
+          'Threat label',
+          mockAboutStep,
+          mockFilterManager
+        );
+
+        expect(result[0].title).toEqual('Threat label');
+        expect(React.isValidElement(result[0].description)).toBeTruthy();
+      });
+
+      test('filters out threats with tactic.name of "none"', () => {
+        const mockStep = {
+          ...mockAboutStep,
+          threat: [
+            {
+              framework: 'mockFramework',
+              tactic: {
+                id: '1234',
+                name: 'none',
+                reference: 'reference1',
+              },
+              technique: [
+                {
+                  id: '456',
+                  name: 'technique1',
+                  reference: 'technique reference',
+                },
+              ],
+            },
+          ],
+        };
+        const result: ListItems[] = getDescriptionItem(
+          'threat',
+          'Threat label',
+          mockStep,
+          mockFilterManager
+        );
+
+        expect(result.length).toEqual(0);
+      });
+    });
+
+    describe('references', () => {
+      test('returns array of ListItems when references exist', () => {
+        const result: ListItems[] = getDescriptionItem(
+          'references',
+          'Reference label',
+          mockAboutStep,
+          mockFilterManager
+        );
+
+        expect(result[0].title).toEqual('Reference label');
+        expect(React.isValidElement(result[0].description)).toBeTruthy();
+      });
+    });
+
+    describe('falsePositives', () => {
+      test('returns array of ListItems when falsePositives exist', () => {
+        const result: ListItems[] = getDescriptionItem(
+          'falsePositives',
+          'False positives label',
+          mockAboutStep,
+          mockFilterManager
+        );
+
+        expect(result[0].title).toEqual('False positives label');
+        expect(React.isValidElement(result[0].description)).toBeTruthy();
+      });
+    });
+
+    describe('severity', () => {
+      test('returns array of ListItems when severity exist', () => {
+        const result: ListItems[] = getDescriptionItem(
+          'severity',
+          'Severity label',
+          mockAboutStep,
+          mockFilterManager
+        );
+
+        expect(result[0].title).toEqual('Severity label');
+        expect(React.isValidElement(result[0].description)).toBeTruthy();
+      });
+    });
+
+    describe('riskScore', () => {
+      test('returns array of ListItems when riskScore exist', () => {
+        const result: ListItems[] = getDescriptionItem(
+          'riskScore',
+          'Risk score label',
+          mockAboutStep,
+          mockFilterManager
+        );
+
+        expect(result[0].title).toEqual('Risk score label');
+        expect(result[0].description).toEqual(21);
+      });
+    });
+
+    describe('timeline', () => {
+      test('returns timeline title if one exists', () => {
+        const mockDefineStep = mockDefineStepRule();
+        const result: ListItems[] = getDescriptionItem(
+          'timeline',
+          'Timeline label',
+          mockDefineStep,
+          mockFilterManager
+        );
+
+        expect(result[0].title).toEqual('Timeline label');
+        expect(result[0].description).toEqual('Titled timeline');
+      });
+
+      test('returns default timeline title if none exists', () => {
+        const mockStep = {
+          ...mockDefineStepRule(),
+          timeline: {
+            id: '12345',
+          },
+        };
+        const result: ListItems[] = getDescriptionItem(
+          'timeline',
+          'Timeline label',
+          mockStep,
+          mockFilterManager
+        );
+
+        expect(result[0].title).toEqual('Timeline label');
+        expect(result[0].description).toEqual(DEFAULT_TIMELINE_TITLE);
+      });
+    });
+
+    describe('note', () => {
+      test('returns default "note" description', () => {
+        const result: ListItems[] = getDescriptionItem(
+          'note',
+          'Investigation guide',
+          mockAboutStep,
+          mockFilterManager
+        );
+
+        expect(result[0].title).toEqual('Investigation guide');
+        expect(React.isValidElement(result[0].description)).toBeTruthy();
+      });
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/description_step/index.tsx b/x-pack/plugins/siem/public/alerts/components/rules/description_step/index.tsx
new file mode 100644
index 00000000000000..86fe128b0a4fb7
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/description_step/index.tsx
@@ -0,0 +1,205 @@
+/*
+ * 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 { EuiDescriptionList, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { isEmpty, chunk, get, pick, isNumber } from 'lodash/fp';
+import React, { memo, useState } from 'react';
+import styled from 'styled-components';
+
+import { RuleType } from '../../../../../common/detection_engine/types';
+import {
+  IIndexPattern,
+  Filter,
+  esFilters,
+  FilterManager,
+} from '../../../../../../../../src/plugins/data/public';
+import { DEFAULT_TIMELINE_TITLE } from '../../../../timelines/components/timeline/translations';
+import { useKibana } from '../../../../common/lib/kibana';
+import { IMitreEnterpriseAttack } from '../../../pages/detection_engine/rules/types';
+import { FieldValueTimeline } from '../pick_timeline';
+import { FormSchema } from '../../../../shared_imports';
+import { ListItems } from './types';
+import {
+  buildQueryBarDescription,
+  buildSeverityDescription,
+  buildStringArrayDescription,
+  buildThreatDescription,
+  buildUnorderedListArrayDescription,
+  buildUrlsDescription,
+  buildNoteDescription,
+  buildRuleTypeDescription,
+} from './helpers';
+import { useSiemJobs } from '../../../../common/components/ml_popover/hooks/use_siem_jobs';
+import { buildMlJobDescription } from './ml_job_description';
+
+const DescriptionListContainer = styled(EuiDescriptionList)`
+  &.euiDescriptionList--column .euiDescriptionList__title {
+    width: 30%;
+  }
+  &.euiDescriptionList--column .euiDescriptionList__description {
+    width: 70%;
+  }
+`;
+
+interface StepRuleDescriptionProps {
+  columns?: 'multi' | 'single' | 'singleSplit';
+  data: unknown;
+  indexPatterns?: IIndexPattern;
+  schema: FormSchema;
+}
+
+export const StepRuleDescriptionComponent: React.FC<StepRuleDescriptionProps> = ({
+  data,
+  columns = 'multi',
+  indexPatterns,
+  schema,
+}) => {
+  const kibana = useKibana();
+  const [filterManager] = useState<FilterManager>(new FilterManager(kibana.services.uiSettings));
+  const [, siemJobs] = useSiemJobs(true);
+
+  const keys = Object.keys(schema);
+  const listItems = keys.reduce((acc: ListItems[], key: string) => {
+    if (key === 'machineLearningJobId') {
+      return [
+        ...acc,
+        buildMlJobDescription(
+          get(key, data) as string,
+          (get(key, schema) as { label: string }).label,
+          siemJobs
+        ),
+      ];
+    }
+    return [...acc, ...buildListItems(data, pick(key, schema), filterManager, indexPatterns)];
+  }, []);
+
+  if (columns === 'multi') {
+    return (
+      <EuiFlexGroup>
+        {chunk(Math.ceil(listItems.length / 2), listItems).map((chunkListItems, index) => (
+          <EuiFlexItem
+            data-test-subj="listItemColumnStepRuleDescription"
+            key={`description-step-rule-${index}`}
+          >
+            <EuiDescriptionList listItems={chunkListItems} />
+          </EuiFlexItem>
+        ))}
+      </EuiFlexGroup>
+    );
+  }
+
+  return (
+    <EuiFlexGroup>
+      <EuiFlexItem data-test-subj="listItemColumnStepRuleDescription">
+        {columns === 'single' ? (
+          <EuiDescriptionList listItems={listItems} />
+        ) : (
+          <DescriptionListContainer
+            data-test-subj="singleSplitStepRuleDescriptionList"
+            type="column"
+            listItems={listItems}
+          />
+        )}
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
+
+export const StepRuleDescription = memo(StepRuleDescriptionComponent);
+
+export const buildListItems = (
+  data: unknown,
+  schema: FormSchema,
+  filterManager: FilterManager,
+  indexPatterns?: IIndexPattern
+): ListItems[] =>
+  Object.keys(schema).reduce<ListItems[]>(
+    (acc, field) => [
+      ...acc,
+      ...getDescriptionItem(
+        field,
+        get([field, 'label'], schema),
+        data,
+        filterManager,
+        indexPatterns
+      ),
+    ],
+    []
+  );
+
+export const addFilterStateIfNotThere = (filters: Filter[]): Filter[] => {
+  return filters.map(filter => {
+    if (filter.$state == null) {
+      return { $state: { store: esFilters.FilterStateStore.APP_STATE }, ...filter };
+    } else {
+      return filter;
+    }
+  });
+};
+
+export const getDescriptionItem = (
+  field: string,
+  label: string,
+  data: unknown,
+  filterManager: FilterManager,
+  indexPatterns?: IIndexPattern
+): ListItems[] => {
+  if (field === 'queryBar') {
+    const filters = addFilterStateIfNotThere(get('queryBar.filters', data) ?? []);
+    const query = get('queryBar.query.query', data);
+    const savedId = get('queryBar.saved_id', data);
+    return buildQueryBarDescription({
+      field,
+      filters,
+      filterManager,
+      query,
+      savedId,
+      indexPatterns,
+    });
+  } else if (field === 'threat') {
+    const threat: IMitreEnterpriseAttack[] = get(field, data).filter(
+      (singleThreat: IMitreEnterpriseAttack) => singleThreat.tactic.name !== 'none'
+    );
+    return buildThreatDescription({ label, threat });
+  } else if (field === 'references') {
+    const urls: string[] = get(field, data);
+    return buildUrlsDescription(label, urls);
+  } else if (field === 'falsePositives') {
+    const values: string[] = get(field, data);
+    return buildUnorderedListArrayDescription(label, field, values);
+  } else if (Array.isArray(get(field, data))) {
+    const values: string[] = get(field, data);
+    return buildStringArrayDescription(label, field, values);
+  } else if (field === 'severity') {
+    const val: string = get(field, data);
+    return buildSeverityDescription(label, val);
+  } else if (field === 'timeline') {
+    const timeline = get(field, data) as FieldValueTimeline;
+    return [
+      {
+        title: label,
+        description: timeline.title ?? DEFAULT_TIMELINE_TITLE,
+      },
+    ];
+  } else if (field === 'note') {
+    const val: string = get(field, data);
+    return buildNoteDescription(label, val);
+  } else if (field === 'ruleType') {
+    const ruleType: RuleType = get(field, data);
+    return buildRuleTypeDescription(label, ruleType);
+  }
+
+  const description: string = get(field, data);
+  if (isNumber(description) || !isEmpty(description)) {
+    return [
+      {
+        title: label,
+        description,
+      },
+    ];
+  }
+  return [];
+};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/description_step/ml_job_description.test.tsx b/x-pack/plugins/siem/public/alerts/components/rules/description_step/ml_job_description.test.tsx
similarity index 97%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/description_step/ml_job_description.test.tsx
rename to x-pack/plugins/siem/public/alerts/components/rules/description_step/ml_job_description.test.tsx
index 59231c31d15bb4..c82a465f08c3a7 100644
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/description_step/ml_job_description.test.tsx
+++ b/x-pack/plugins/siem/public/alerts/components/rules/description_step/ml_job_description.test.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import { MlJobDescription, AuditIcon, JobStatusBadge } from './ml_job_description';
-jest.mock('../../../../../lib/kibana');
+jest.mock('../../../../common/lib/kibana');
 
 const job = {
   moduleId: 'moduleId',
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/description_step/ml_job_description.tsx b/x-pack/plugins/siem/public/alerts/components/rules/description_step/ml_job_description.tsx
similarity index 92%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/description_step/ml_job_description.tsx
rename to x-pack/plugins/siem/public/alerts/components/rules/description_step/ml_job_description.tsx
index 33d3dbcba86312..c5df8b1a3db706 100644
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/description_step/ml_job_description.tsx
+++ b/x-pack/plugins/siem/public/alerts/components/rules/description_step/ml_job_description.tsx
@@ -8,9 +8,9 @@ import React from 'react';
 import styled from 'styled-components';
 import { EuiBadge, EuiIcon, EuiLink, EuiToolTip } from '@elastic/eui';
 
-import { isJobStarted } from '../../../../../../common/machine_learning/helpers';
-import { useKibana } from '../../../../../lib/kibana';
-import { SiemJob } from '../../../../../components/ml_popover/types';
+import { isJobStarted } from '../../../../../common/machine_learning/helpers';
+import { useKibana } from '../../../../common/lib/kibana';
+import { SiemJob } from '../../../../common/components/ml_popover/types';
 import { ListItems } from './types';
 import { ML_JOB_STARTED, ML_JOB_STOPPED } from './translations';
 
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/description_step/translations.tsx b/x-pack/plugins/siem/public/alerts/components/rules/description_step/translations.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/description_step/translations.tsx
rename to x-pack/plugins/siem/public/alerts/components/rules/description_step/translations.tsx
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/description_step/types.ts b/x-pack/plugins/siem/public/alerts/components/rules/description_step/types.ts
new file mode 100644
index 00000000000000..bcda5ff67a9a62
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/description_step/types.ts
@@ -0,0 +1,32 @@
+/*
+ * 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 { ReactNode } from 'react';
+
+import {
+  IIndexPattern,
+  Filter,
+  FilterManager,
+} from '../../../../../../../../src/plugins/data/public';
+import { IMitreEnterpriseAttack } from '../../../pages/detection_engine/rules/types';
+
+export interface ListItems {
+  title: NonNullable<ReactNode>;
+  description: NonNullable<ReactNode>;
+}
+
+export interface BuildQueryBarDescription {
+  field: string;
+  filters: Filter[];
+  filterManager: FilterManager;
+  query: string;
+  savedId: string;
+  indexPatterns?: IIndexPattern;
+}
+
+export interface BuildThreatDescription {
+  label: string;
+  threat: IMitreEnterpriseAttack[];
+}
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/mitre/helpers.test.tsx b/x-pack/plugins/siem/public/alerts/components/rules/mitre/helpers.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/mitre/helpers.test.tsx
rename to x-pack/plugins/siem/public/alerts/components/rules/mitre/helpers.test.tsx
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/mitre/helpers.ts b/x-pack/plugins/siem/public/alerts/components/rules/mitre/helpers.ts
new file mode 100644
index 00000000000000..2dc7a6d8f45e59
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/mitre/helpers.ts
@@ -0,0 +1,18 @@
+/*
+ * 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 { isEmpty } from 'lodash/fp';
+
+import { IMitreAttack } from '../../../pages/detection_engine/rules/types';
+
+export const isMitreAttackInvalid = (
+  tacticName: string | null | undefined,
+  technique: IMitreAttack[] | null | undefined
+) => {
+  if (isEmpty(tacticName) || (tacticName !== 'none' && isEmpty(technique))) {
+    return true;
+  }
+  return false;
+};
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/mitre/index.test.tsx b/x-pack/plugins/siem/public/alerts/components/rules/mitre/index.test.tsx
new file mode 100644
index 00000000000000..ecf1bda807b68c
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/mitre/index.test.tsx
@@ -0,0 +1,31 @@
+/*
+ * 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 { AddMitreThreat } from './index';
+import { useFormFieldMock } from '../../../../common/mock';
+
+describe('AddMitreThreat', () => {
+  it('renders correctly', () => {
+    const Component = () => {
+      const field = useFormFieldMock();
+
+      return (
+        <AddMitreThreat
+          dataTestSubj="dataTestSubj"
+          idAria="idAria"
+          isDisabled={false}
+          field={field}
+        />
+      );
+    };
+    const wrapper = shallow(<Component />);
+
+    expect(wrapper.dive().find('[data-test-subj="addMitre"]')).toHaveLength(1);
+  });
+});
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/mitre/index.tsx b/x-pack/plugins/siem/public/alerts/components/rules/mitre/index.tsx
new file mode 100644
index 00000000000000..4170ce5ebeabd7
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/mitre/index.tsx
@@ -0,0 +1,218 @@
+/*
+ * 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 {
+  EuiButtonIcon,
+  EuiFormRow,
+  EuiSuperSelect,
+  EuiSpacer,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiComboBox,
+  EuiText,
+} from '@elastic/eui';
+import { isEmpty, kebabCase, camelCase } from 'lodash/fp';
+import React, { useCallback, useState } from 'react';
+import styled from 'styled-components';
+
+import { tacticsOptions, techniquesOptions } from '../../../mitre/mitre_tactics_techniques';
+import * as Rulei18n from '../../../pages/detection_engine/rules/translations';
+import { FieldHook, getFieldValidityAndErrorMessage } from '../../../../shared_imports';
+import { threatDefault } from '../step_about_rule/default_value';
+import { IMitreEnterpriseAttack } from '../../../pages/detection_engine/rules/types';
+import { MyAddItemButton } from '../add_item_form';
+import { isMitreAttackInvalid } from './helpers';
+import * as i18n from './translations';
+
+const MitreContainer = styled.div`
+  margin-top: 16px;
+`;
+const MyEuiSuperSelect = styled(EuiSuperSelect)`
+  width: 280px;
+`;
+interface AddItemProps {
+  field: FieldHook;
+  dataTestSubj: string;
+  idAria: string;
+  isDisabled: boolean;
+}
+
+export const AddMitreThreat = ({ dataTestSubj, field, idAria, isDisabled }: AddItemProps) => {
+  const [showValidation, setShowValidation] = useState(false);
+  const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
+
+  const removeItem = useCallback(
+    (index: number) => {
+      const values = field.value as string[];
+      const newValues = [...values.slice(0, index), ...values.slice(index + 1)];
+      if (isEmpty(newValues)) {
+        field.setValue(threatDefault);
+      } else {
+        field.setValue(newValues);
+      }
+    },
+    [field]
+  );
+
+  const addItem = useCallback(() => {
+    const values = field.value as IMitreEnterpriseAttack[];
+    if (!isEmpty(values[values.length - 1])) {
+      field.setValue([
+        ...values,
+        { tactic: { id: 'none', name: 'none', reference: 'none' }, technique: [] },
+      ]);
+    } else {
+      field.setValue([{ tactic: { id: 'none', name: 'none', reference: 'none' }, technique: [] }]);
+    }
+  }, [field]);
+
+  const updateTactic = useCallback(
+    (index: number, value: string) => {
+      const values = field.value as IMitreEnterpriseAttack[];
+      const { id, reference, name } = tacticsOptions.find(t => t.value === value) || {
+        id: '',
+        name: '',
+        reference: '',
+      };
+      field.setValue([
+        ...values.slice(0, index),
+        {
+          ...values[index],
+          tactic: { id, reference, name },
+          technique: [],
+        },
+        ...values.slice(index + 1),
+      ]);
+    },
+    [field]
+  );
+
+  const updateTechniques = useCallback(
+    (index: number, selectedOptions: unknown[]) => {
+      field.setValue([
+        ...values.slice(0, index),
+        {
+          ...values[index],
+          technique: selectedOptions,
+        },
+        ...values.slice(index + 1),
+      ]);
+    },
+    [field]
+  );
+
+  const values = field.value as IMitreEnterpriseAttack[];
+
+  const getSelectTactic = (tacticName: string, index: number, disabled: boolean) => (
+    <MyEuiSuperSelect
+      id="selectDocExample"
+      options={[
+        ...(tacticName === 'none'
+          ? [
+              {
+                inputDisplay: <>{i18n.TACTIC_PLACEHOLDER}</>,
+                value: 'none',
+                disabled,
+              },
+            ]
+          : []),
+        ...tacticsOptions.map(t => ({
+          inputDisplay: <>{t.text}</>,
+          value: t.value,
+          disabled,
+        })),
+      ]}
+      aria-label=""
+      onChange={updateTactic.bind(null, index)}
+      fullWidth={false}
+      valueOfSelected={camelCase(tacticName)}
+      data-test-subj="mitreTactic"
+    />
+  );
+
+  const getSelectTechniques = (item: IMitreEnterpriseAttack, index: number, disabled: boolean) => {
+    const invalid = isMitreAttackInvalid(item.tactic.name, item.technique);
+    const options = techniquesOptions.filter(t => t.tactics.includes(kebabCase(item.tactic.name)));
+    const selectedOptions = item.technique.map(technic => ({
+      ...technic,
+      label: `${technic.name} (${technic.id})`, // API doesn't allow for label field
+    }));
+
+    return (
+      <EuiFlexGroup gutterSize="s" alignItems="center">
+        <EuiFlexItem grow>
+          <EuiComboBox
+            data-test-subj="mitreTechniques"
+            placeholder={item.tactic.name === 'none' ? '' : i18n.TECHNIQUES_PLACEHOLDER}
+            options={options}
+            selectedOptions={selectedOptions}
+            onChange={updateTechniques.bind(null, index)}
+            isDisabled={disabled || item.tactic.name === 'none'}
+            fullWidth={true}
+            isInvalid={showValidation && invalid}
+            onBlur={() => setShowValidation(true)}
+          />
+          {showValidation && invalid && (
+            <EuiText color="danger" size="xs">
+              <p>{errorMessage}</p>
+            </EuiText>
+          )}
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButtonIcon
+            color="danger"
+            iconType="trash"
+            isDisabled={disabled || item.tactic.name === 'none'}
+            onClick={() => removeItem(index)}
+            aria-label={Rulei18n.DELETE}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  };
+
+  return (
+    <MitreContainer>
+      {values.map((item, index) => (
+        <div key={index}>
+          <EuiFlexGroup gutterSize="s" justifyContent="spaceBetween" alignItems="flexStart">
+            <EuiFlexItem grow={false}>
+              {index === 0 ? (
+                <EuiFormRow
+                  label={`${field.label} ${i18n.TACTIC}`}
+                  labelAppend={field.labelAppend}
+                  describedByIds={idAria ? [`${idAria} ${i18n.TACTIC}`] : undefined}
+                >
+                  <>{getSelectTactic(item.tactic.name, index, isDisabled)}</>
+                </EuiFormRow>
+              ) : (
+                getSelectTactic(item.tactic.name, index, isDisabled)
+              )}
+            </EuiFlexItem>
+            <EuiFlexItem grow>
+              {index === 0 ? (
+                <EuiFormRow
+                  label={`${field.label} ${i18n.TECHNIQUE}`}
+                  isInvalid={showValidation && isInvalid}
+                  fullWidth
+                  describedByIds={idAria ? [`${idAria} ${i18n.TECHNIQUE}`] : undefined}
+                >
+                  <>{getSelectTechniques(item, index, isDisabled)}</>
+                </EuiFormRow>
+              ) : (
+                getSelectTechniques(item, index, isDisabled)
+              )}
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          {values.length - 1 !== index && <EuiSpacer size="s" />}
+        </div>
+      ))}
+      <MyAddItemButton data-test-subj="addMitre" onClick={addItem} isDisabled={isDisabled}>
+        {i18n.ADD_MITRE_ATTACK}
+      </MyAddItemButton>
+    </MitreContainer>
+  );
+};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/mitre/translations.ts b/x-pack/plugins/siem/public/alerts/components/rules/mitre/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/mitre/translations.ts
rename to x-pack/plugins/siem/public/alerts/components/rules/mitre/translations.ts
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/ml_job_select/index.test.tsx b/x-pack/plugins/siem/public/alerts/components/rules/ml_job_select/index.test.tsx
new file mode 100644
index 00000000000000..6f6581e4de1c37
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/ml_job_select/index.test.tsx
@@ -0,0 +1,31 @@
+/*
+ * 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 { MlJobSelect } from './index';
+import { useSiemJobs } from '../../../../common/components/ml_popover/hooks/use_siem_jobs';
+import { useFormFieldMock } from '../../../../common/mock';
+jest.mock('../../../../common/components/ml_popover/hooks/use_siem_jobs');
+jest.mock('../../../../common/lib/kibana');
+
+describe('MlJobSelect', () => {
+  beforeAll(() => {
+    (useSiemJobs as jest.Mock).mockReturnValue([false, []]);
+  });
+
+  it('renders correctly', () => {
+    const Component = () => {
+      const field = useFormFieldMock();
+
+      return <MlJobSelect describedByIds={[]} field={field} />;
+    };
+    const wrapper = shallow(<Component />);
+
+    expect(wrapper.dive().find('[data-test-subj="mlJobSelect"]')).toHaveLength(1);
+  });
+});
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/ml_job_select/index.tsx b/x-pack/plugins/siem/public/alerts/components/rules/ml_job_select/index.tsx
new file mode 100644
index 00000000000000..d3b6de6cf0c405
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/ml_job_select/index.tsx
@@ -0,0 +1,140 @@
+/*
+ * 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, { useCallback, useMemo } from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiIcon,
+  EuiLink,
+  EuiSuperSelect,
+  EuiText,
+} from '@elastic/eui';
+
+import styled from 'styled-components';
+import { isJobStarted } from '../../../../../common/machine_learning/helpers';
+import { FieldHook, getFieldValidityAndErrorMessage } from '../../../../shared_imports';
+import { useSiemJobs } from '../../../../common/components/ml_popover/hooks/use_siem_jobs';
+import { useKibana } from '../../../../common/lib/kibana';
+import {
+  ML_JOB_SELECT_PLACEHOLDER_TEXT,
+  ENABLE_ML_JOB_WARNING,
+} from '../step_define_rule/translations';
+
+const HelpTextWarningContainer = styled.div`
+  margin-top: 10px;
+`;
+
+const MlJobSelectEuiFlexGroup = styled(EuiFlexGroup)`
+  margin-bottom: 5px;
+`;
+
+const HelpText: React.FC<{ href: string; showEnableWarning: boolean }> = ({
+  href,
+  showEnableWarning = false,
+}) => (
+  <>
+    <FormattedMessage
+      id="xpack.siem.detectionEngine.createRule.stepDefineRule.machineLearningJobIdHelpText"
+      defaultMessage="We've provided a few common jobs to get you started. To add your own custom jobs, assign a group of “siem” to those jobs in the {machineLearning} application to make them appear here."
+      values={{
+        machineLearning: (
+          <EuiLink href={href} target="_blank">
+            <FormattedMessage
+              id="xpack.siem.components.mlJobSelect.machineLearningLink"
+              defaultMessage="Machine Learning"
+            />
+          </EuiLink>
+        ),
+      }}
+    />
+    {showEnableWarning && (
+      <HelpTextWarningContainer>
+        <EuiText size="xs" color="warning">
+          <EuiIcon type="alert" />
+          <span>{ENABLE_ML_JOB_WARNING}</span>
+        </EuiText>
+      </HelpTextWarningContainer>
+    )}
+  </>
+);
+
+const JobDisplay: React.FC<{ title: string; description: string }> = ({ title, description }) => (
+  <>
+    <strong>{title}</strong>
+    <EuiText size="xs" color="subdued">
+      <p>{description}</p>
+    </EuiText>
+  </>
+);
+
+interface MlJobSelectProps {
+  describedByIds: string[];
+  field: FieldHook;
+}
+
+export const MlJobSelect: React.FC<MlJobSelectProps> = ({ describedByIds = [], field }) => {
+  const jobId = field.value as string;
+  const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
+  const [isLoading, siemJobs] = useSiemJobs(false);
+  const mlUrl = useKibana().services.application.getUrlForApp('ml');
+  const handleJobChange = useCallback(
+    (machineLearningJobId: string) => {
+      field.setValue(machineLearningJobId);
+    },
+    [field]
+  );
+  const placeholderOption = {
+    value: 'placeholder',
+    inputDisplay: ML_JOB_SELECT_PLACEHOLDER_TEXT,
+    dropdownDisplay: ML_JOB_SELECT_PLACEHOLDER_TEXT,
+    disabled: true,
+  };
+
+  const jobOptions = siemJobs.map(job => ({
+    value: job.id,
+    inputDisplay: job.id,
+    dropdownDisplay: <JobDisplay title={job.id} description={job.description} />,
+  }));
+
+  const options = [placeholderOption, ...jobOptions];
+
+  const isJobRunning = useMemo(() => {
+    // If the selected job is not found in the list, it means the placeholder is selected
+    // and so we don't want to show the warning, thus isJobRunning will be true when 'job == null'
+    const job = siemJobs.find(j => j.id === jobId);
+    return job == null || isJobStarted(job.jobState, job.datafeedState);
+  }, [siemJobs, jobId]);
+
+  return (
+    <MlJobSelectEuiFlexGroup>
+      <EuiFlexItem>
+        <EuiFormRow
+          label={field.label}
+          helpText={<HelpText href={mlUrl} showEnableWarning={!isJobRunning} />}
+          isInvalid={isInvalid}
+          error={errorMessage}
+          data-test-subj="mlJobSelect"
+          describedByIds={describedByIds}
+        >
+          <EuiFlexGroup>
+            <EuiFlexItem>
+              <EuiSuperSelect
+                hasDividers
+                isLoading={isLoading}
+                onChange={handleJobChange}
+                options={options}
+                valueOfSelected={jobId || 'placeholder'}
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFormRow>
+      </EuiFlexItem>
+    </MlJobSelectEuiFlexGroup>
+  );
+};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/next_step/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/alerts/components/rules/next_step/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/next_step/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/alerts/components/rules/next_step/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/next_step/index.test.tsx b/x-pack/plugins/siem/public/alerts/components/rules/next_step/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/next_step/index.test.tsx
rename to x-pack/plugins/siem/public/alerts/components/rules/next_step/index.test.tsx
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/next_step/index.tsx b/x-pack/plugins/siem/public/alerts/components/rules/next_step/index.tsx
new file mode 100644
index 00000000000000..d97c2b4c8c0aa4
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/next_step/index.tsx
@@ -0,0 +1,32 @@
+/*
+ * 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 { EuiHorizontalRule, EuiFlexGroup, EuiFlexItem, EuiButton } from '@elastic/eui';
+import * as RuleI18n from '../../../pages/detection_engine/rules/translations';
+
+interface NextStepProps {
+  onClick: () => Promise<void>;
+  isDisabled: boolean;
+  dataTestSubj?: string;
+}
+
+export const NextStep = React.memo<NextStepProps>(
+  ({ onClick, isDisabled, dataTestSubj = 'nextStep-continue' }) => (
+    <>
+      <EuiHorizontalRule margin="m" />
+      <EuiFlexGroup alignItems="center" justifyContent="flexEnd" gutterSize="xs" responsive={false}>
+        <EuiFlexItem grow={false}>
+          <EuiButton fill onClick={onClick} isDisabled={isDisabled} data-test-subj={dataTestSubj}>
+            {RuleI18n.CONTINUE}
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </>
+  )
+);
+
+NextStep.displayName = 'NextStep';
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/optional_field_label/index.test.tsx b/x-pack/plugins/siem/public/alerts/components/rules/optional_field_label/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/optional_field_label/index.test.tsx
rename to x-pack/plugins/siem/public/alerts/components/rules/optional_field_label/index.test.tsx
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/optional_field_label/index.tsx b/x-pack/plugins/siem/public/alerts/components/rules/optional_field_label/index.tsx
new file mode 100644
index 00000000000000..0d144e30cbaba9
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/optional_field_label/index.tsx
@@ -0,0 +1,16 @@
+/*
+ * 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 { EuiText } from '@elastic/eui';
+import React from 'react';
+
+import * as RuleI18n from '../../../pages/detection_engine/rules/translations';
+
+export const OptionalFieldLabel = (
+  <EuiText color="subdued" size="xs">
+    {RuleI18n.OPTIONAL_FIELD}
+  </EuiText>
+);
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/pick_timeline/index.test.tsx b/x-pack/plugins/siem/public/alerts/components/rules/pick_timeline/index.test.tsx
new file mode 100644
index 00000000000000..379a8a48e1ad7a
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/pick_timeline/index.test.tsx
@@ -0,0 +1,31 @@
+/*
+ * 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 { PickTimeline } from './index';
+import { useFormFieldMock } from '../../../../common/mock';
+
+describe('PickTimeline', () => {
+  it('renders correctly', () => {
+    const Component = () => {
+      const field = useFormFieldMock();
+
+      return (
+        <PickTimeline
+          dataTestSubj="pick-timeline"
+          idAria="idAria"
+          isDisabled={false}
+          field={field}
+        />
+      );
+    };
+    const wrapper = shallow(<Component />);
+
+    expect(wrapper.dive().find('[data-test-subj="pick-timeline"]')).toHaveLength(1);
+  });
+});
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/pick_timeline/index.tsx b/x-pack/plugins/siem/public/alerts/components/rules/pick_timeline/index.tsx
new file mode 100644
index 00000000000000..0029e70e4edda8
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/pick_timeline/index.tsx
@@ -0,0 +1,74 @@
+/*
+ * 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 { EuiFormRow } from '@elastic/eui';
+import React, { useCallback, useEffect, useState } from 'react';
+
+import { SearchTimelineSuperSelect } from '../../../../timelines/components/timeline/search_super_select';
+import { FieldHook, getFieldValidityAndErrorMessage } from '../../../../shared_imports';
+
+export interface FieldValueTimeline {
+  id: string | null;
+  title: string | null;
+}
+
+interface QueryBarDefineRuleProps {
+  dataTestSubj: string;
+  field: FieldHook;
+  idAria: string;
+  isDisabled: boolean;
+}
+
+export const PickTimeline = ({
+  dataTestSubj,
+  field,
+  idAria,
+  isDisabled = false,
+}: QueryBarDefineRuleProps) => {
+  const [timelineId, setTimelineId] = useState<string | null>(null);
+  const [timelineTitle, setTimelineTitle] = useState<string | null>(null);
+
+  const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
+
+  useEffect(() => {
+    const { id, title } = field.value as FieldValueTimeline;
+    if (timelineTitle !== title && timelineId !== id) {
+      setTimelineId(id);
+      setTimelineTitle(title);
+    }
+  }, [field.value]);
+
+  const handleOnTimelineChange = useCallback(
+    (title: string, id: string | null) => {
+      if (id === null) {
+        field.setValue({ id, title: null });
+      } else if (timelineTitle !== title && timelineId !== id) {
+        field.setValue({ id, title });
+      }
+    },
+    [field]
+  );
+
+  return (
+    <EuiFormRow
+      label={field.label}
+      labelAppend={field.labelAppend}
+      helpText={field.helpText}
+      error={errorMessage}
+      isInvalid={isInvalid}
+      data-test-subj={dataTestSubj}
+      describedByIds={idAria ? [idAria] : undefined}
+    >
+      <SearchTimelineSuperSelect
+        isDisabled={isDisabled}
+        hideUntitled={true}
+        timelineId={timelineId}
+        timelineTitle={timelineTitle}
+        onTimelineChange={handleOnTimelineChange}
+      />
+    </EuiFormRow>
+  );
+};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/pre_packaged_rules/load_empty_prompt.test.tsx b/x-pack/plugins/siem/public/alerts/components/rules/pre_packaged_rules/load_empty_prompt.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/pre_packaged_rules/load_empty_prompt.test.tsx
rename to x-pack/plugins/siem/public/alerts/components/rules/pre_packaged_rules/load_empty_prompt.test.tsx
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/pre_packaged_rules/load_empty_prompt.tsx b/x-pack/plugins/siem/public/alerts/components/rules/pre_packaged_rules/load_empty_prompt.tsx
similarity index 94%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/pre_packaged_rules/load_empty_prompt.tsx
rename to x-pack/plugins/siem/public/alerts/components/rules/pre_packaged_rules/load_empty_prompt.tsx
index 5d136265ef1f23..cd88c4ce72af80 100644
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/pre_packaged_rules/load_empty_prompt.tsx
+++ b/x-pack/plugins/siem/public/alerts/components/rules/pre_packaged_rules/load_empty_prompt.tsx
@@ -8,7 +8,7 @@ import { EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiButton } from '@elastic/e
 import React, { memo, useCallback } from 'react';
 import styled from 'styled-components';
 
-import { DETECTION_ENGINE_PAGE_NAME } from '../../../../../components/link_to/redirect_to_detection_engine';
+import { DETECTION_ENGINE_PAGE_NAME } from '../../../../common/components/link_to/redirect_to_detection_engine';
 import * as i18n from './translations';
 
 const EmptyPrompt = styled(EuiEmptyPrompt)`
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/pre_packaged_rules/translations.ts b/x-pack/plugins/siem/public/alerts/components/rules/pre_packaged_rules/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/pre_packaged_rules/translations.ts
rename to x-pack/plugins/siem/public/alerts/components/rules/pre_packaged_rules/translations.ts
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/pre_packaged_rules/update_callout.test.tsx b/x-pack/plugins/siem/public/alerts/components/rules/pre_packaged_rules/update_callout.test.tsx
similarity index 89%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/pre_packaged_rules/update_callout.test.tsx
rename to x-pack/plugins/siem/public/alerts/components/rules/pre_packaged_rules/update_callout.test.tsx
index 807da79fb7a1ab..b5dca70ad95758 100644
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/pre_packaged_rules/update_callout.test.tsx
+++ b/x-pack/plugins/siem/public/alerts/components/rules/pre_packaged_rules/update_callout.test.tsx
@@ -8,8 +8,8 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import { UpdatePrePackagedRulesCallOut } from './update_callout';
-import { useKibana } from '../../../../../lib/kibana';
-jest.mock('../../../../../lib/kibana');
+import { useKibana } from '../../../../common/lib/kibana';
+jest.mock('../../../../common/lib/kibana');
 
 describe('UpdatePrePackagedRulesCallOut', () => {
   beforeAll(() => {
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/pre_packaged_rules/update_callout.tsx b/x-pack/plugins/siem/public/alerts/components/rules/pre_packaged_rules/update_callout.tsx
similarity index 95%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/pre_packaged_rules/update_callout.tsx
rename to x-pack/plugins/siem/public/alerts/components/rules/pre_packaged_rules/update_callout.tsx
index c2887508a9ae9a..0faf4074ed890d 100644
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/pre_packaged_rules/update_callout.tsx
+++ b/x-pack/plugins/siem/public/alerts/components/rules/pre_packaged_rules/update_callout.tsx
@@ -8,7 +8,7 @@ import React, { memo } from 'react';
 
 import { EuiCallOut, EuiButton, EuiLink } from '@elastic/eui';
 
-import { useKibana } from '../../../../../lib/kibana';
+import { useKibana } from '../../../../common/lib/kibana';
 import * as i18n from './translations';
 
 interface UpdatePrePackagedRulesCallOutProps {
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/query_bar/index.test.tsx b/x-pack/plugins/siem/public/alerts/components/rules/query_bar/index.test.tsx
new file mode 100644
index 00000000000000..e22359edecd1a9
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/query_bar/index.test.tsx
@@ -0,0 +1,37 @@
+/*
+ * 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 { QueryBarDefineRule } from './index';
+import { useFormFieldMock } from '../../../../common/mock';
+
+jest.mock('../../../../common/lib/kibana');
+
+describe('QueryBarDefineRule', () => {
+  it('renders correctly', () => {
+    const Component = () => {
+      const field = useFormFieldMock();
+
+      return (
+        <QueryBarDefineRule
+          browserFields={{}}
+          isLoading={false}
+          indexPattern={{ fields: [], title: 'title' }}
+          onCloseTimelineSearch={jest.fn()}
+          openTimelineSearch={true}
+          dataTestSubj="query-bar-define-rule"
+          idAria="idAria"
+          field={field}
+        />
+      );
+    };
+    const wrapper = shallow(<Component />);
+
+    expect(wrapper.dive().find('[data-test-subj="query-bar-define-rule"]')).toHaveLength(1);
+  });
+});
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/query_bar/index.tsx b/x-pack/plugins/siem/public/alerts/components/rules/query_bar/index.tsx
new file mode 100644
index 00000000000000..1aa5ce66d371ef
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/query_bar/index.tsx
@@ -0,0 +1,285 @@
+/*
+ * 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 { EuiFormRow, EuiMutationObserver } from '@elastic/eui';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Subscription } from 'rxjs';
+import styled from 'styled-components';
+import deepEqual from 'fast-deep-equal';
+
+import {
+  Filter,
+  IIndexPattern,
+  Query,
+  FilterManager,
+  SavedQuery,
+  SavedQueryTimeFilter,
+} from '../../../../../../../../src/plugins/data/public';
+
+import { BrowserFields } from '../../../../common/containers/source';
+import { OpenTimelineModal } from '../../../../timelines/components/open_timeline/open_timeline_modal';
+import { ActionTimelineToShow } from '../../../../timelines/components/open_timeline/types';
+import { QueryBar } from '../../../../common/components/query_bar';
+import { buildGlobalQuery } from '../../../../timelines/components/timeline/helpers';
+import { getDataProviderFilter } from '../../../../timelines/components/timeline/query_bar';
+import { convertKueryToElasticSearchQuery } from '../../../../common/lib/keury';
+import { useKibana } from '../../../../common/lib/kibana';
+import { TimelineModel } from '../../../../timelines/store/timeline/model';
+import { useSavedQueryServices } from '../../../../common/utils/saved_query_services';
+import { FieldHook, getFieldValidityAndErrorMessage } from '../../../../shared_imports';
+import * as i18n from './translations';
+
+export interface FieldValueQueryBar {
+  filters: Filter[];
+  query: Query;
+  saved_id?: string;
+}
+interface QueryBarDefineRuleProps {
+  browserFields: BrowserFields;
+  dataTestSubj: string;
+  field: FieldHook;
+  idAria: string;
+  isLoading: boolean;
+  indexPattern: IIndexPattern;
+  onCloseTimelineSearch: () => void;
+  openTimelineSearch: boolean;
+  resizeParentContainer?: (height: number) => void;
+}
+
+const StyledEuiFormRow = styled(EuiFormRow)`
+  .kbnTypeahead__items {
+    max-height: 45vh !important;
+  }
+  .globalQueryBar {
+    padding: 4px 0px 0px 0px;
+    .kbnQueryBar {
+      & > div:first-child {
+        margin: 0px 0px 0px 4px;
+      }
+    }
+  }
+`;
+
+// TODO need to add disabled in the SearchBar
+
+export const QueryBarDefineRule = ({
+  browserFields,
+  dataTestSubj,
+  field,
+  idAria,
+  indexPattern,
+  isLoading = false,
+  onCloseTimelineSearch,
+  openTimelineSearch = false,
+  resizeParentContainer,
+}: QueryBarDefineRuleProps) => {
+  const [originalHeight, setOriginalHeight] = useState(-1);
+  const [loadingTimeline, setLoadingTimeline] = useState(false);
+  const [savedQuery, setSavedQuery] = useState<SavedQuery | null>(null);
+  const [queryDraft, setQueryDraft] = useState<Query>({ query: '', language: 'kuery' });
+  const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
+
+  const kibana = useKibana();
+  const [filterManager] = useState<FilterManager>(new FilterManager(kibana.services.uiSettings));
+
+  const savedQueryServices = useSavedQueryServices();
+
+  useEffect(() => {
+    let isSubscribed = true;
+    const subscriptions = new Subscription();
+    filterManager.setFilters([]);
+
+    subscriptions.add(
+      filterManager.getUpdates$().subscribe({
+        next: () => {
+          if (isSubscribed) {
+            const newFilters = filterManager.getFilters();
+            const { filters } = field.value as FieldValueQueryBar;
+
+            if (!deepEqual(filters, newFilters)) {
+              field.setValue({ ...(field.value as FieldValueQueryBar), filters: newFilters });
+            }
+          }
+        },
+      })
+    );
+
+    return () => {
+      isSubscribed = false;
+      subscriptions.unsubscribe();
+    };
+  }, [field.value]);
+
+  useEffect(() => {
+    let isSubscribed = true;
+    async function updateFilterQueryFromValue() {
+      const { filters, query, saved_id: savedId } = field.value as FieldValueQueryBar;
+      if (!deepEqual(query, queryDraft)) {
+        setQueryDraft(query);
+      }
+      if (!deepEqual(filters, filterManager.getFilters())) {
+        filterManager.setFilters(filters);
+      }
+      if (
+        (savedId != null && savedQuery != null && savedId !== savedQuery.id) ||
+        (savedId != null && savedQuery == null)
+      ) {
+        try {
+          const mySavedQuery = await savedQueryServices.getSavedQuery(savedId);
+          if (isSubscribed && mySavedQuery != null) {
+            setSavedQuery(mySavedQuery);
+          }
+        } catch {
+          setSavedQuery(null);
+        }
+      } else if (savedId == null && savedQuery != null) {
+        setSavedQuery(null);
+      }
+    }
+    updateFilterQueryFromValue();
+    return () => {
+      isSubscribed = false;
+    };
+  }, [field.value]);
+
+  const onSubmitQuery = useCallback(
+    (newQuery: Query, timefilter?: SavedQueryTimeFilter) => {
+      const { query } = field.value as FieldValueQueryBar;
+      if (!deepEqual(query, newQuery)) {
+        field.setValue({ ...(field.value as FieldValueQueryBar), query: newQuery });
+      }
+    },
+    [field]
+  );
+
+  const onChangedQuery = useCallback(
+    (newQuery: Query) => {
+      const { query } = field.value as FieldValueQueryBar;
+      if (!deepEqual(query, newQuery)) {
+        field.setValue({ ...(field.value as FieldValueQueryBar), query: newQuery });
+      }
+    },
+    [field]
+  );
+
+  const onSavedQuery = useCallback(
+    (newSavedQuery: SavedQuery | null) => {
+      if (newSavedQuery != null) {
+        const { saved_id: savedId } = field.value as FieldValueQueryBar;
+        if (newSavedQuery.id !== savedId) {
+          setSavedQuery(newSavedQuery);
+          field.setValue({
+            filters: newSavedQuery.attributes.filters,
+            query: newSavedQuery.attributes.query,
+            saved_id: newSavedQuery.id,
+          });
+        }
+      }
+    },
+    [field.value]
+  );
+
+  const onCloseTimelineModal = useCallback(() => {
+    setLoadingTimeline(true);
+    onCloseTimelineSearch();
+  }, [onCloseTimelineSearch]);
+
+  const onOpenTimeline = useCallback(
+    (timeline: TimelineModel) => {
+      setLoadingTimeline(false);
+      const newQuery = {
+        query: timeline.kqlQuery.filterQuery?.kuery?.expression ?? '',
+        language: timeline.kqlQuery.filterQuery?.kuery?.kind ?? 'kuery',
+      };
+      const dataProvidersDsl =
+        timeline.dataProviders != null && timeline.dataProviders.length > 0
+          ? convertKueryToElasticSearchQuery(
+              buildGlobalQuery(timeline.dataProviders, browserFields),
+              indexPattern
+            )
+          : '';
+      const newFilters = timeline.filters ?? [];
+      field.setValue({
+        filters:
+          dataProvidersDsl !== ''
+            ? [...newFilters, getDataProviderFilter(dataProvidersDsl)]
+            : newFilters,
+        query: newQuery,
+        saved_id: '',
+      });
+    },
+    [browserFields, field, indexPattern]
+  );
+
+  const onMutation = (event: unknown, observer: unknown) => {
+    if (resizeParentContainer != null) {
+      const suggestionContainer = document.getElementById('kbnTypeahead__items');
+      if (suggestionContainer != null) {
+        const box = suggestionContainer.getBoundingClientRect();
+        const accordionContainer = document.getElementById('define-rule');
+        if (accordionContainer != null) {
+          const accordionBox = accordionContainer.getBoundingClientRect();
+          if (originalHeight === -1 || accordionBox.height < originalHeight + box.height) {
+            resizeParentContainer(originalHeight + box.height - 100);
+          }
+          if (originalHeight === -1) {
+            setOriginalHeight(accordionBox.height);
+          }
+        }
+      } else {
+        resizeParentContainer(-1);
+      }
+    }
+  };
+
+  const actionTimelineToHide = useMemo<ActionTimelineToShow[]>(() => ['duplicate'], []);
+
+  return (
+    <>
+      <StyledEuiFormRow
+        label={field.label}
+        labelAppend={field.labelAppend}
+        helpText={field.helpText}
+        error={errorMessage}
+        isInvalid={isInvalid}
+        fullWidth
+        data-test-subj={dataTestSubj}
+        describedByIds={idAria ? [idAria] : undefined}
+      >
+        <EuiMutationObserver
+          observerOptions={{ subtree: true, attributes: true, childList: true }}
+          onMutation={onMutation}
+        >
+          {mutationRef => (
+            <div ref={mutationRef}>
+              <QueryBar
+                indexPattern={indexPattern}
+                isLoading={isLoading || loadingTimeline}
+                isRefreshPaused={false}
+                filterQuery={queryDraft}
+                filterManager={filterManager}
+                filters={filterManager.getFilters() || []}
+                onChangedQuery={onChangedQuery}
+                onSubmitQuery={onSubmitQuery}
+                savedQuery={savedQuery}
+                onSavedQuery={onSavedQuery}
+                hideSavedQuery={false}
+              />
+            </div>
+          )}
+        </EuiMutationObserver>
+      </StyledEuiFormRow>
+      {openTimelineSearch ? (
+        <OpenTimelineModal
+          hideActions={actionTimelineToHide}
+          modalTitle={i18n.IMPORT_TIMELINE_MODAL}
+          onClose={onCloseTimelineModal}
+          onOpen={onOpenTimeline}
+        />
+      ) : null}
+    </>
+  );
+};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/query_bar/translations.tsx b/x-pack/plugins/siem/public/alerts/components/rules/query_bar/translations.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/query_bar/translations.tsx
rename to x-pack/plugins/siem/public/alerts/components/rules/query_bar/translations.tsx
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/read_only_callout/index.test.tsx b/x-pack/plugins/siem/public/alerts/components/rules/read_only_callout/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/read_only_callout/index.test.tsx
rename to x-pack/plugins/siem/public/alerts/components/rules/read_only_callout/index.test.tsx
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/read_only_callout/index.tsx b/x-pack/plugins/siem/public/alerts/components/rules/read_only_callout/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/read_only_callout/index.tsx
rename to x-pack/plugins/siem/public/alerts/components/rules/read_only_callout/index.tsx
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/read_only_callout/translations.ts b/x-pack/plugins/siem/public/alerts/components/rules/read_only_callout/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/read_only_callout/translations.ts
rename to x-pack/plugins/siem/public/alerts/components/rules/read_only_callout/translations.ts
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/rule_actions_field/index.test.tsx b/x-pack/plugins/siem/public/alerts/components/rules/rule_actions_field/index.test.tsx
new file mode 100644
index 00000000000000..579f8869c08b17
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/rule_actions_field/index.test.tsx
@@ -0,0 +1,42 @@
+/*
+ * 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 { RuleActionsField } from './index';
+import { useKibana } from '../../../../common/lib/kibana';
+import { useFormFieldMock } from '../../../../common/mock';
+jest.mock('../../../../common/lib/kibana');
+
+describe('RuleActionsField', () => {
+  it('should not render ActionForm is no actions are supported', () => {
+    (useKibana as jest.Mock).mockReturnValue({
+      services: {
+        triggers_actions_ui: {
+          actionTypeRegistry: {},
+        },
+        application: {
+          capabilities: {
+            actions: {
+              delete: true,
+              save: true,
+              show: true,
+            },
+          },
+        },
+      },
+    });
+    const Component = () => {
+      const field = useFormFieldMock();
+
+      return <RuleActionsField euiFieldProps={{ options: [] }} field={field} />;
+    };
+    const wrapper = shallow(<Component />);
+
+    expect(wrapper.dive().find('ActionForm')).toHaveLength(0);
+  });
+});
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/rule_actions_field/index.tsx b/x-pack/plugins/siem/public/alerts/components/rules/rule_actions_field/index.tsx
new file mode 100644
index 00000000000000..2e9a793bbdef2a
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/rule_actions_field/index.tsx
@@ -0,0 +1,87 @@
+/*
+ * 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, { useCallback, useEffect, useState } from 'react';
+import deepMerge from 'deepmerge';
+
+import { NOTIFICATION_SUPPORTED_ACTION_TYPES_IDS } from '../../../../../common/constants';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { loadActionTypes } from '../../../../../../triggers_actions_ui/public/application/lib/action_connector_api';
+import { SelectField } from '../../../../shared_imports';
+import { ActionForm, ActionType } from '../../../../../../triggers_actions_ui/public';
+import { AlertAction } from '../../../../../../alerting/common';
+import { useKibana } from '../../../../common/lib/kibana';
+
+type ThrottleSelectField = typeof SelectField;
+
+const DEFAULT_ACTION_GROUP_ID = 'default';
+const DEFAULT_ACTION_MESSAGE =
+  'Rule {{context.rule.name}} generated {{state.signals_count}} signals';
+
+export const RuleActionsField: ThrottleSelectField = ({ field, messageVariables }) => {
+  const [supportedActionTypes, setSupportedActionTypes] = useState<ActionType[] | undefined>();
+  const {
+    http,
+    triggers_actions_ui: { actionTypeRegistry },
+    notifications,
+    docLinks,
+    application: { capabilities },
+  } = useKibana().services;
+
+  const setActionIdByIndex = useCallback(
+    (id: string, index: number) => {
+      const updatedActions = [...(field.value as Array<Partial<AlertAction>>)];
+      updatedActions[index] = deepMerge(updatedActions[index], { id });
+      field.setValue(updatedActions);
+    },
+    [field]
+  );
+
+  const setAlertProperty = useCallback(
+    (updatedActions: AlertAction[]) => field.setValue(updatedActions),
+    [field]
+  );
+
+  const setActionParamsProperty = useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (key: string, value: any, index: number) => {
+      const updatedActions = [...(field.value as AlertAction[])];
+      updatedActions[index].params[key] = value;
+      field.setValue(updatedActions);
+    },
+    [field]
+  );
+
+  useEffect(() => {
+    (async function() {
+      const actionTypes = await loadActionTypes({ http });
+      const supportedTypes = actionTypes.filter(actionType =>
+        NOTIFICATION_SUPPORTED_ACTION_TYPES_IDS.includes(actionType.id)
+      );
+      setSupportedActionTypes(supportedTypes);
+    })();
+  }, []);
+
+  if (!supportedActionTypes) return <></>;
+
+  return (
+    <ActionForm
+      actions={field.value as AlertAction[]}
+      messageVariables={messageVariables}
+      defaultActionGroupId={DEFAULT_ACTION_GROUP_ID}
+      setActionIdByIndex={setActionIdByIndex}
+      setAlertProperty={setAlertProperty}
+      setActionParamsProperty={setActionParamsProperty}
+      http={http}
+      actionTypeRegistry={actionTypeRegistry}
+      actionTypes={supportedActionTypes}
+      defaultActionMessage={DEFAULT_ACTION_MESSAGE}
+      toastNotifications={notifications.toasts}
+      docLinks={docLinks}
+      capabilities={capabilities}
+    />
+  );
+};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_actions_overflow/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/alerts/components/rules/rule_actions_overflow/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_actions_overflow/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/alerts/components/rules/rule_actions_overflow/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/rule_actions_overflow/index.test.tsx b/x-pack/plugins/siem/public/alerts/components/rules/rule_actions_overflow/index.test.tsx
new file mode 100644
index 00000000000000..a648a1bdb9aa86
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/rule_actions_overflow/index.test.tsx
@@ -0,0 +1,298 @@
+/*
+ * 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 { shallow, mount } from 'enzyme';
+import React from 'react';
+
+import {
+  deleteRulesAction,
+  duplicateRulesAction,
+} from '../../../pages/detection_engine/rules/all/actions';
+import { RuleActionsOverflow } from './index';
+import { mockRule } from '../../../pages/detection_engine/rules/all/__mocks__/mock';
+
+jest.mock('react-router-dom', () => ({
+  useHistory: () => ({
+    push: jest.fn(),
+  }),
+}));
+
+jest.mock('../../../pages/detection_engine/rules/all/actions', () => ({
+  deleteRulesAction: jest.fn(),
+  duplicateRulesAction: jest.fn(),
+}));
+
+describe('RuleActionsOverflow', () => {
+  describe('snapshots', () => {
+    test('renders correctly against snapshot', () => {
+      const wrapper = shallow(
+        <RuleActionsOverflow rule={mockRule('id')} userHasNoPermissions={false} />
+      );
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  describe('rules details menu panel', () => {
+    test('there is at least one item when there is a rule within the rules-details-menu-panel', () => {
+      const wrapper = mount(
+        <RuleActionsOverflow rule={mockRule('id')} userHasNoPermissions={false} />
+      );
+      wrapper.find('[data-test-subj="rules-details-popover-button-icon"] button').simulate('click');
+      wrapper.update();
+      const items: unknown[] = wrapper
+        .find('[data-test-subj="rules-details-menu-panel"]')
+        .first()
+        .prop('items');
+
+      expect(items.length).toBeGreaterThan(0);
+    });
+
+    test('items are empty when there is a null rule within the rules-details-menu-panel', () => {
+      const wrapper = mount(<RuleActionsOverflow rule={null} userHasNoPermissions={false} />);
+      wrapper.find('[data-test-subj="rules-details-popover-button-icon"] button').simulate('click');
+      wrapper.update();
+      expect(
+        wrapper
+          .find('[data-test-subj="rules-details-menu-panel"]')
+          .first()
+          .prop('items')
+      ).toEqual([]);
+    });
+
+    test('items are empty when there is an undefined rule within the rules-details-menu-panel', () => {
+      const wrapper = mount(<RuleActionsOverflow rule={null} userHasNoPermissions={false} />);
+      wrapper.find('[data-test-subj="rules-details-popover-button-icon"] button').simulate('click');
+      wrapper.update();
+      expect(
+        wrapper
+          .find('[data-test-subj="rules-details-menu-panel"]')
+          .first()
+          .prop('items')
+      ).toEqual([]);
+    });
+
+    test('it opens the popover when rules-details-popover-button-icon is clicked', () => {
+      const wrapper = mount(
+        <RuleActionsOverflow rule={mockRule('id')} userHasNoPermissions={false} />
+      );
+      wrapper.find('[data-test-subj="rules-details-popover-button-icon"] button').simulate('click');
+      wrapper.update();
+      expect(
+        wrapper
+          .find('[data-test-subj="rules-details-popover"]')
+          .first()
+          .prop('isOpen')
+      ).toEqual(true);
+    });
+  });
+
+  describe('rules details pop over button icon', () => {
+    test('it does not open the popover when rules-details-popover-button-icon is clicked when the user does not have permission', () => {
+      const wrapper = mount(
+        <RuleActionsOverflow rule={mockRule('id')} userHasNoPermissions={true} />
+      );
+      wrapper.find('[data-test-subj="rules-details-popover-button-icon"] button').simulate('click');
+      wrapper.update();
+      expect(
+        wrapper
+          .find('[data-test-subj="rules-details-popover"]')
+          .first()
+          .prop('isOpen')
+      ).toEqual(false);
+    });
+  });
+
+  describe('rules details duplicate rule', () => {
+    test('it does not open the popover when rules-details-popover-button-icon is clicked and the user does not have permission', () => {
+      const rule = mockRule('id');
+      const wrapper = mount(<RuleActionsOverflow rule={rule} userHasNoPermissions={true} />);
+      wrapper.find('[data-test-subj="rules-details-popover-button-icon"] button').simulate('click');
+      wrapper.update();
+      expect(wrapper.find('[data-test-subj="rules-details-delete-rule"] button').exists()).toEqual(
+        false
+      );
+    });
+
+    test('it opens the popover when rules-details-popover-button-icon is clicked', () => {
+      const wrapper = mount(
+        <RuleActionsOverflow rule={mockRule('id')} userHasNoPermissions={false} />
+      );
+      wrapper.find('[data-test-subj="rules-details-popover-button-icon"] button').simulate('click');
+      wrapper.update();
+      expect(
+        wrapper
+          .find('[data-test-subj="rules-details-popover"]')
+          .first()
+          .prop('isOpen')
+      ).toEqual(true);
+    });
+
+    test('it closes the popover when rules-details-duplicate-rule is clicked', () => {
+      const wrapper = mount(
+        <RuleActionsOverflow rule={mockRule('id')} userHasNoPermissions={false} />
+      );
+      wrapper.find('[data-test-subj="rules-details-popover-button-icon"] button').simulate('click');
+      wrapper.update();
+      wrapper.find('[data-test-subj="rules-details-duplicate-rule"] button').simulate('click');
+      wrapper.update();
+      expect(
+        wrapper
+          .find('[data-test-subj="rules-details-popover"]')
+          .first()
+          .prop('isOpen')
+      ).toEqual(false);
+    });
+
+    test('it calls duplicateRulesAction when rules-details-duplicate-rule is clicked', () => {
+      const wrapper = mount(
+        <RuleActionsOverflow rule={mockRule('id')} userHasNoPermissions={false} />
+      );
+      wrapper.find('[data-test-subj="rules-details-popover-button-icon"] button').simulate('click');
+      wrapper.update();
+      wrapper.find('[data-test-subj="rules-details-duplicate-rule"] button').simulate('click');
+      wrapper.update();
+      expect(duplicateRulesAction).toHaveBeenCalled();
+    });
+
+    test('it calls duplicateRulesAction with the rule and rule.id when rules-details-duplicate-rule is clicked', () => {
+      const rule = mockRule('id');
+      const wrapper = mount(<RuleActionsOverflow rule={rule} userHasNoPermissions={false} />);
+      wrapper.find('[data-test-subj="rules-details-popover-button-icon"] button').simulate('click');
+      wrapper.update();
+      wrapper.find('[data-test-subj="rules-details-duplicate-rule"] button').simulate('click');
+      wrapper.update();
+      expect(duplicateRulesAction).toHaveBeenCalledWith(
+        [rule],
+        [rule.id],
+        expect.anything(),
+        expect.anything()
+      );
+    });
+  });
+
+  describe('rules details export rule', () => {
+    test('it does not open the popover when rules-details-popover-button-icon is clicked and the user does not have permission', () => {
+      const rule = mockRule('id');
+      const wrapper = mount(<RuleActionsOverflow rule={rule} userHasNoPermissions={true} />);
+      wrapper.find('[data-test-subj="rules-details-popover-button-icon"] button').simulate('click');
+      wrapper.update();
+      expect(wrapper.find('[data-test-subj="rules-details-export-rule"] button').exists()).toEqual(
+        false
+      );
+    });
+
+    test('it closes the popover when rules-details-export-rule is clicked', () => {
+      const wrapper = mount(
+        <RuleActionsOverflow rule={mockRule('id')} userHasNoPermissions={false} />
+      );
+      wrapper.find('[data-test-subj="rules-details-popover-button-icon"] button').simulate('click');
+      wrapper.update();
+      wrapper.find('[data-test-subj="rules-details-export-rule"] button').simulate('click');
+      wrapper.update();
+      expect(
+        wrapper
+          .find('[data-test-subj="rules-details-popover"]')
+          .first()
+          .prop('isOpen')
+      ).toEqual(false);
+    });
+
+    test('it sets the rule.rule_id on the generic downloader when rules-details-export-rule is clicked', () => {
+      const rule = mockRule('id');
+      const wrapper = mount(<RuleActionsOverflow rule={rule} userHasNoPermissions={false} />);
+      wrapper.find('[data-test-subj="rules-details-popover-button-icon"] button').simulate('click');
+      wrapper.update();
+      wrapper.find('[data-test-subj="rules-details-export-rule"] button').simulate('click');
+      wrapper.update();
+      expect(
+        wrapper.find('[data-test-subj="rules-details-generic-downloader"]').prop('ids')
+      ).toEqual([rule.rule_id]);
+    });
+
+    test('it does not close the pop over on rules-details-export-rule when the rule is an immutable rule and the user does a click', () => {
+      const rule = mockRule('id');
+      rule.immutable = true;
+      const wrapper = mount(<RuleActionsOverflow rule={rule} userHasNoPermissions={false} />);
+      wrapper.find('[data-test-subj="rules-details-popover-button-icon"] button').simulate('click');
+      wrapper.update();
+      wrapper.find('[data-test-subj="rules-details-export-rule"] button').simulate('click');
+      wrapper.update();
+      expect(
+        wrapper
+          .find('[data-test-subj="rules-details-popover"]')
+          .first()
+          .prop('isOpen')
+      ).toEqual(true);
+    });
+
+    test('it does not set the rule.rule_id on rules-details-export-rule when the rule is an immutable rule', () => {
+      const rule = mockRule('id');
+      rule.immutable = true;
+      const wrapper = mount(<RuleActionsOverflow rule={rule} userHasNoPermissions={false} />);
+      wrapper.find('[data-test-subj="rules-details-popover-button-icon"] button').simulate('click');
+      wrapper.update();
+      wrapper.find('[data-test-subj="rules-details-export-rule"] button').simulate('click');
+      wrapper.update();
+      expect(
+        wrapper.find('[data-test-subj="rules-details-generic-downloader"]').prop('ids')
+      ).toEqual([]);
+    });
+  });
+
+  describe('rules details delete rule', () => {
+    test('it does not open the popover when rules-details-popover-button-icon is clicked and the user does not have permission', () => {
+      const rule = mockRule('id');
+      const wrapper = mount(<RuleActionsOverflow rule={rule} userHasNoPermissions={true} />);
+      wrapper.find('[data-test-subj="rules-details-popover-button-icon"] button').simulate('click');
+      wrapper.update();
+      expect(wrapper.find('[data-test-subj="rules-details-delete-rule"] button').exists()).toEqual(
+        false
+      );
+    });
+
+    test('it closes the popover when rules-details-delete-rule is clicked', () => {
+      const wrapper = mount(
+        <RuleActionsOverflow rule={mockRule('id')} userHasNoPermissions={false} />
+      );
+      wrapper.find('[data-test-subj="rules-details-popover-button-icon"] button').simulate('click');
+      wrapper.update();
+      wrapper.find('[data-test-subj="rules-details-delete-rule"] button').simulate('click');
+      wrapper.update();
+      expect(
+        wrapper
+          .find('[data-test-subj="rules-details-popover"]')
+          .first()
+          .prop('isOpen')
+      ).toEqual(false);
+    });
+
+    test('it calls deleteRulesAction when rules-details-delete-rule is clicked', () => {
+      const wrapper = mount(
+        <RuleActionsOverflow rule={mockRule('id')} userHasNoPermissions={false} />
+      );
+      wrapper.find('[data-test-subj="rules-details-popover-button-icon"] button').simulate('click');
+      wrapper.update();
+      wrapper.find('[data-test-subj="rules-details-delete-rule"] button').simulate('click');
+      wrapper.update();
+      expect(deleteRulesAction).toHaveBeenCalled();
+    });
+
+    test('it calls deleteRulesAction with the rule.id when rules-details-delete-rule is clicked', () => {
+      const rule = mockRule('id');
+      const wrapper = mount(<RuleActionsOverflow rule={rule} userHasNoPermissions={false} />);
+      wrapper.find('[data-test-subj="rules-details-popover-button-icon"] button').simulate('click');
+      wrapper.update();
+      wrapper.find('[data-test-subj="rules-details-delete-rule"] button').simulate('click');
+      wrapper.update();
+      expect(deleteRulesAction).toHaveBeenCalledWith(
+        [rule.id],
+        expect.anything(),
+        expect.anything(),
+        expect.anything()
+      );
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/rule_actions_overflow/index.tsx b/x-pack/plugins/siem/public/alerts/components/rules/rule_actions_overflow/index.tsx
new file mode 100644
index 00000000000000..2d8e6bef8ee90d
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/rule_actions_overflow/index.tsx
@@ -0,0 +1,158 @@
+/*
+ * 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 {
+  EuiButtonIcon,
+  EuiContextMenuItem,
+  EuiContextMenuPanel,
+  EuiPopover,
+  EuiToolTip,
+} from '@elastic/eui';
+import React, { useCallback, useMemo, useState } from 'react';
+import styled from 'styled-components';
+
+import { noop } from 'lodash/fp';
+import { useHistory } from 'react-router-dom';
+import { Rule, exportRules } from '../../../../alerts/containers/detection_engine/rules';
+import * as i18n from './translations';
+import * as i18nActions from '../../../pages/detection_engine/rules/translations';
+import { displaySuccessToast, useStateToaster } from '../../../../common/components/toasters';
+import {
+  deleteRulesAction,
+  duplicateRulesAction,
+} from '../../../pages/detection_engine/rules/all/actions';
+import { GenericDownloader } from '../../../../common/components/generic_downloader';
+import { DETECTION_ENGINE_PAGE_NAME } from '../../../../common/components/link_to/redirect_to_detection_engine';
+
+const MyEuiButtonIcon = styled(EuiButtonIcon)`
+  &.euiButtonIcon {
+    svg {
+      transform: rotate(90deg);
+    }
+    border: 1px solid  ${({ theme }) => theme.euiColorPrimary};
+    width: 40px;
+    height: 40px;
+  }
+`;
+
+interface RuleActionsOverflowComponentProps {
+  rule: Rule | null;
+  userHasNoPermissions: boolean;
+}
+
+/**
+ * Overflow Actions for a Rule
+ */
+const RuleActionsOverflowComponent = ({
+  rule,
+  userHasNoPermissions,
+}: RuleActionsOverflowComponentProps) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [rulesToExport, setRulesToExport] = useState<string[]>([]);
+  const history = useHistory();
+  const [, dispatchToaster] = useStateToaster();
+
+  const onRuleDeletedCallback = useCallback(() => {
+    history.push(`/${DETECTION_ENGINE_PAGE_NAME}/rules`);
+  }, [history]);
+
+  const actions = useMemo(
+    () =>
+      rule != null
+        ? [
+            <EuiContextMenuItem
+              key={i18nActions.DUPLICATE_RULE}
+              icon="copy"
+              disabled={userHasNoPermissions}
+              data-test-subj="rules-details-duplicate-rule"
+              onClick={async () => {
+                setIsPopoverOpen(false);
+                await duplicateRulesAction([rule], [rule.id], noop, dispatchToaster);
+              }}
+            >
+              {i18nActions.DUPLICATE_RULE}
+            </EuiContextMenuItem>,
+            <EuiContextMenuItem
+              key={i18nActions.EXPORT_RULE}
+              icon="exportAction"
+              disabled={userHasNoPermissions || rule.immutable}
+              data-test-subj="rules-details-export-rule"
+              onClick={() => {
+                setIsPopoverOpen(false);
+                setRulesToExport([rule.rule_id]);
+              }}
+            >
+              {i18nActions.EXPORT_RULE}
+            </EuiContextMenuItem>,
+            <EuiContextMenuItem
+              key={i18nActions.DELETE_RULE}
+              icon="trash"
+              disabled={userHasNoPermissions}
+              data-test-subj="rules-details-delete-rule"
+              onClick={async () => {
+                setIsPopoverOpen(false);
+                await deleteRulesAction([rule.id], noop, dispatchToaster, onRuleDeletedCallback);
+              }}
+            >
+              {i18nActions.DELETE_RULE}
+            </EuiContextMenuItem>,
+          ]
+        : [],
+    [rule, userHasNoPermissions]
+  );
+
+  const handlePopoverOpen = useCallback(() => {
+    setIsPopoverOpen(!isPopoverOpen);
+  }, [setIsPopoverOpen, isPopoverOpen]);
+
+  const button = useMemo(
+    () => (
+      <EuiToolTip position="top" content={i18n.ALL_ACTIONS}>
+        <MyEuiButtonIcon
+          iconType="boxesHorizontal"
+          aria-label={i18n.ALL_ACTIONS}
+          isDisabled={userHasNoPermissions}
+          data-test-subj="rules-details-popover-button-icon"
+          onClick={handlePopoverOpen}
+        />
+      </EuiToolTip>
+    ),
+    [handlePopoverOpen, userHasNoPermissions]
+  );
+
+  return (
+    <>
+      <EuiPopover
+        anchorPosition="leftCenter"
+        button={button}
+        closePopover={() => setIsPopoverOpen(false)}
+        id="ruleActionsOverflow"
+        isOpen={isPopoverOpen}
+        data-test-subj="rules-details-popover"
+        ownFocus={true}
+        panelPaddingSize="none"
+      >
+        <EuiContextMenuPanel data-test-subj="rules-details-menu-panel" items={actions} />
+      </EuiPopover>
+      <GenericDownloader
+        filename={`${i18nActions.EXPORT_FILENAME}.ndjson`}
+        ids={rulesToExport}
+        exportSelectedData={exportRules}
+        data-test-subj="rules-details-generic-downloader"
+        onExportSuccess={exportCount => {
+          displaySuccessToast(
+            i18nActions.SUCCESSFULLY_EXPORTED_RULES(exportCount),
+            dispatchToaster
+          );
+        }}
+      />
+    </>
+  );
+};
+
+export const RuleActionsOverflow = React.memo(RuleActionsOverflowComponent);
+
+RuleActionsOverflow.displayName = 'RuleActionsOverflow';
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_actions_overflow/translations.ts b/x-pack/plugins/siem/public/alerts/components/rules/rule_actions_overflow/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_actions_overflow/translations.ts
rename to x-pack/plugins/siem/public/alerts/components/rules/rule_actions_overflow/translations.ts
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_status/helpers.test.tsx b/x-pack/plugins/siem/public/alerts/components/rules/rule_status/helpers.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_status/helpers.test.tsx
rename to x-pack/plugins/siem/public/alerts/components/rules/rule_status/helpers.test.tsx
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/rule_status/helpers.ts b/x-pack/plugins/siem/public/alerts/components/rules/rule_status/helpers.ts
new file mode 100644
index 00000000000000..88fca3d95604e7
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/rule_status/helpers.ts
@@ -0,0 +1,18 @@
+/*
+ * 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 { RuleStatusType } from '../../../../alerts/containers/detection_engine/rules';
+
+export const getStatusColor = (status: RuleStatusType | string | null) =>
+  status == null
+    ? 'subdued'
+    : status === 'succeeded'
+    ? 'success'
+    : status === 'failed'
+    ? 'danger'
+    : status === 'executing' || status === 'going to run'
+    ? 'warning'
+    : 'subdued';
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_status/index.test.tsx b/x-pack/plugins/siem/public/alerts/components/rules/rule_status/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_status/index.test.tsx
rename to x-pack/plugins/siem/public/alerts/components/rules/rule_status/index.test.tsx
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/rule_status/index.tsx b/x-pack/plugins/siem/public/alerts/components/rules/rule_status/index.tsx
new file mode 100644
index 00000000000000..53be48bc988509
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/rule_status/index.tsx
@@ -0,0 +1,102 @@
+/*
+ * 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 {
+  EuiButtonIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHealth,
+  EuiLoadingSpinner,
+  EuiText,
+} from '@elastic/eui';
+import React, { memo, useCallback, useEffect, useState } from 'react';
+import deepEqual from 'fast-deep-equal';
+
+import {
+  useRuleStatus,
+  RuleInfoStatus,
+} from '../../../../alerts/containers/detection_engine/rules';
+import { FormattedDate } from '../../../../common/components/formatted_date';
+import { getEmptyTagValue } from '../../../../common/components/empty_value';
+import { getStatusColor } from './helpers';
+import * as i18n from './translations';
+
+interface RuleStatusProps {
+  ruleId: string | null;
+  ruleEnabled?: boolean | null;
+}
+
+const RuleStatusComponent: React.FC<RuleStatusProps> = ({ ruleId, ruleEnabled }) => {
+  const [loading, ruleStatus, fetchRuleStatus] = useRuleStatus(ruleId);
+  const [myRuleEnabled, setMyRuleEnabled] = useState<boolean | null>(ruleEnabled ?? null);
+  const [currentStatus, setCurrentStatus] = useState<RuleInfoStatus | null>(
+    ruleStatus?.current_status ?? null
+  );
+
+  useEffect(() => {
+    if (myRuleEnabled !== ruleEnabled && fetchRuleStatus != null && ruleId != null) {
+      fetchRuleStatus(ruleId);
+      if (myRuleEnabled !== ruleEnabled) {
+        setMyRuleEnabled(ruleEnabled ?? null);
+      }
+    }
+  }, [fetchRuleStatus, myRuleEnabled, ruleId, ruleEnabled, setMyRuleEnabled]);
+
+  useEffect(() => {
+    if (!deepEqual(currentStatus, ruleStatus?.current_status)) {
+      setCurrentStatus(ruleStatus?.current_status ?? null);
+    }
+  }, [currentStatus, ruleStatus, setCurrentStatus]);
+
+  const handleRefresh = useCallback(() => {
+    if (fetchRuleStatus != null && ruleId != null) {
+      fetchRuleStatus(ruleId);
+    }
+  }, [fetchRuleStatus, ruleId]);
+
+  return (
+    <EuiFlexGroup gutterSize="xs" alignItems="center" justifyContent="flexStart">
+      <EuiFlexItem grow={false}>
+        {i18n.STATUS}
+        {':'}
+      </EuiFlexItem>
+      {loading && (
+        <EuiFlexItem>
+          <EuiLoadingSpinner size="m" data-test-subj="rule-status-loader" />
+        </EuiFlexItem>
+      )}
+      {!loading && (
+        <>
+          <EuiFlexItem grow={false}>
+            <EuiHealth color={getStatusColor(currentStatus?.status ?? null)}>
+              <EuiText size="xs">{currentStatus?.status ?? getEmptyTagValue()}</EuiText>
+            </EuiHealth>
+          </EuiFlexItem>
+          {currentStatus?.status_date != null && currentStatus?.status != null && (
+            <>
+              <EuiFlexItem grow={false}>
+                <>{i18n.STATUS_AT}</>
+              </EuiFlexItem>
+              <EuiFlexItem grow={true}>
+                <FormattedDate value={currentStatus?.status_date} fieldName={i18n.STATUS_DATE} />
+              </EuiFlexItem>
+            </>
+          )}
+          <EuiFlexItem grow={false}>
+            <EuiButtonIcon
+              color="primary"
+              onClick={handleRefresh}
+              iconType="refresh"
+              aria-label={i18n.REFRESH}
+            />
+          </EuiFlexItem>
+        </>
+      )}
+    </EuiFlexGroup>
+  );
+};
+
+export const RuleStatus = memo(RuleStatusComponent);
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_status/translations.ts b/x-pack/plugins/siem/public/alerts/components/rules/rule_status/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_status/translations.ts
rename to x-pack/plugins/siem/public/alerts/components/rules/rule_status/translations.ts
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_switch/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/alerts/components/rules/rule_switch/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_switch/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/alerts/components/rules/rule_switch/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_switch/index.test.tsx b/x-pack/plugins/siem/public/alerts/components/rules/rule_switch/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_switch/index.test.tsx
rename to x-pack/plugins/siem/public/alerts/components/rules/rule_switch/index.test.tsx
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/rule_switch/index.tsx b/x-pack/plugins/siem/public/alerts/components/rules/rule_switch/index.tsx
new file mode 100644
index 00000000000000..2f718818ff2e73
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/rule_switch/index.tsx
@@ -0,0 +1,134 @@
+/*
+ * 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 {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLoadingSpinner,
+  EuiSwitch,
+  EuiSwitchEvent,
+} from '@elastic/eui';
+import { isEmpty } from 'lodash/fp';
+import styled from 'styled-components';
+import React, { useCallback, useState, useEffect } from 'react';
+
+import * as i18n from '../../../pages/detection_engine/rules/translations';
+import { enableRules } from '../../../../alerts/containers/detection_engine/rules';
+import { enableRulesAction } from '../../../pages/detection_engine/rules/all/actions';
+import { Action } from '../../../pages/detection_engine/rules/all/reducer';
+import { useStateToaster, displayErrorToast } from '../../../../common/components/toasters';
+import { bucketRulesResponse } from '../../../pages/detection_engine/rules/all/helpers';
+
+const StaticSwitch = styled(EuiSwitch)`
+  .euiSwitch__thumb,
+  .euiSwitch__icon {
+    transition: none;
+  }
+`;
+
+StaticSwitch.displayName = 'StaticSwitch';
+
+export interface RuleSwitchProps {
+  dispatch?: React.Dispatch<Action>;
+  id: string;
+  enabled: boolean;
+  isDisabled?: boolean;
+  isLoading?: boolean;
+  optionLabel?: string;
+  onChange?: (enabled: boolean) => void;
+}
+
+/**
+ * Basic switch component for displaying loader when enabled/disabled
+ */
+export const RuleSwitchComponent = ({
+  dispatch,
+  id,
+  isDisabled,
+  isLoading,
+  enabled,
+  optionLabel,
+  onChange,
+}: RuleSwitchProps) => {
+  const [myIsLoading, setMyIsLoading] = useState(false);
+  const [myEnabled, setMyEnabled] = useState(enabled ?? false);
+  const [, dispatchToaster] = useStateToaster();
+
+  const onRuleStateChange = useCallback(
+    async (event: EuiSwitchEvent) => {
+      setMyIsLoading(true);
+      if (dispatch != null) {
+        await enableRulesAction([id], event.target.checked!, dispatch, dispatchToaster);
+      } else {
+        try {
+          const enabling = event.target.checked!;
+          const response = await enableRules({
+            ids: [id],
+            enabled: enabling,
+          });
+          const { rules, errors } = bucketRulesResponse(response);
+
+          if (errors.length > 0) {
+            setMyIsLoading(false);
+            const title = enabling
+              ? i18n.BATCH_ACTION_ACTIVATE_SELECTED_ERROR(1)
+              : i18n.BATCH_ACTION_DEACTIVATE_SELECTED_ERROR(1);
+            displayErrorToast(
+              title,
+              errors.map(e => e.error.message),
+              dispatchToaster
+            );
+          } else {
+            const [rule] = rules;
+            setMyEnabled(rule.enabled);
+            if (onChange != null) {
+              onChange(rule.enabled);
+            }
+          }
+        } catch {
+          setMyIsLoading(false);
+        }
+      }
+      setMyIsLoading(false);
+    },
+    [dispatch, id]
+  );
+
+  useEffect(() => {
+    if (myEnabled !== enabled) {
+      setMyEnabled(enabled);
+    }
+  }, [enabled]);
+
+  useEffect(() => {
+    if (myIsLoading !== isLoading) {
+      setMyIsLoading(isLoading ?? false);
+    }
+  }, [isLoading]);
+
+  return (
+    <EuiFlexGroup alignItems="center" justifyContent="spaceAround">
+      <EuiFlexItem grow={false}>
+        {myIsLoading ? (
+          <EuiLoadingSpinner size="m" data-test-subj="rule-switch-loader" />
+        ) : (
+          <StaticSwitch
+            data-test-subj="rule-switch"
+            label={optionLabel ?? ''}
+            showLabel={!isEmpty(optionLabel)}
+            disabled={isDisabled}
+            checked={myEnabled}
+            onChange={onRuleStateChange}
+          />
+        )}
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
+
+export const RuleSwitch = React.memo(RuleSwitchComponent);
+
+RuleSwitch.displayName = 'RuleSwitch';
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/schedule_item_form/index.test.tsx b/x-pack/plugins/siem/public/alerts/components/rules/schedule_item_form/index.test.tsx
new file mode 100644
index 00000000000000..9dddd9e6c40851
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/schedule_item_form/index.test.tsx
@@ -0,0 +1,31 @@
+/*
+ * 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 { ScheduleItem } from './index';
+import { useFormFieldMock } from '../../../../common/mock';
+
+describe('ScheduleItem', () => {
+  it('renders correctly', () => {
+    const Component = () => {
+      const field = useFormFieldMock();
+
+      return (
+        <ScheduleItem
+          dataTestSubj="schedule-item"
+          idAria="idAria"
+          isDisabled={false}
+          field={field}
+        />
+      );
+    };
+    const wrapper = shallow(<Component />);
+
+    expect(wrapper.dive().find('[data-test-subj="schedule-item"]')).toHaveLength(1);
+  });
+});
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/schedule_item_form/index.tsx b/x-pack/plugins/siem/public/alerts/components/rules/schedule_item_form/index.tsx
new file mode 100644
index 00000000000000..ffb6c4eda32438
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/schedule_item_form/index.tsx
@@ -0,0 +1,163 @@
+/*
+ * 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 {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFieldNumber,
+  EuiFormRow,
+  EuiSelect,
+  EuiFormControlLayout,
+} from '@elastic/eui';
+import { isEmpty } from 'lodash/fp';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import styled from 'styled-components';
+
+import { FieldHook, getFieldValidityAndErrorMessage } from '../../../../shared_imports';
+
+import * as I18n from './translations';
+
+interface ScheduleItemProps {
+  field: FieldHook;
+  dataTestSubj: string;
+  idAria: string;
+  isDisabled: boolean;
+  minimumValue?: number;
+}
+
+const timeTypeOptions = [
+  { value: 's', text: I18n.SECONDS },
+  { value: 'm', text: I18n.MINUTES },
+  { value: 'h', text: I18n.HOURS },
+];
+
+// move optional label to the end of input
+const StyledLabelAppend = styled(EuiFlexItem)`
+  &.euiFlexItem.euiFlexItem--flexGrowZero {
+    margin-left: 31px;
+  }
+`;
+
+const StyledEuiFormRow = styled(EuiFormRow)`
+  max-width: none;
+
+  .euiFormControlLayout {
+    max-width: 200px !important;
+  }
+
+  .euiFormControlLayout__childrenWrapper > *:first-child {
+    box-shadow: none;
+    height: 38px;
+  }
+
+  .euiFormControlLayout:not(:first-child) {
+    border-left: 1px solid ${({ theme }) => theme.eui.euiColorLightShade};
+  }
+`;
+
+const MyEuiSelect = styled(EuiSelect)`
+  width: auto;
+`;
+
+export const ScheduleItem = ({
+  dataTestSubj,
+  field,
+  idAria,
+  isDisabled,
+  minimumValue = 0,
+}: ScheduleItemProps) => {
+  const [timeType, setTimeType] = useState('s');
+  const [timeVal, setTimeVal] = useState<number>(0);
+  const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
+
+  const onChangeTimeType = useCallback(
+    e => {
+      setTimeType(e.target.value);
+      field.setValue(`${timeVal}${e.target.value}`);
+    },
+    [timeVal]
+  );
+
+  const onChangeTimeVal = useCallback(
+    e => {
+      const sanitizedValue: number = parseInt(e.target.value, 10);
+      setTimeVal(sanitizedValue);
+      field.setValue(`${sanitizedValue}${timeType}`);
+    },
+    [timeType]
+  );
+
+  useEffect(() => {
+    if (field.value !== `${timeVal}${timeType}`) {
+      const filterTimeVal = (field.value as string).match(/\d+/g);
+      const filterTimeType = (field.value as string).match(/[a-zA-Z]+/g);
+      if (
+        !isEmpty(filterTimeVal) &&
+        filterTimeVal != null &&
+        !isNaN(Number(filterTimeVal[0])) &&
+        Number(filterTimeVal[0]) !== Number(timeVal)
+      ) {
+        setTimeVal(Number(filterTimeVal[0]));
+      }
+      if (
+        !isEmpty(filterTimeType) &&
+        filterTimeType != null &&
+        ['s', 'm', 'h'].includes(filterTimeType[0]) &&
+        filterTimeType[0] !== timeType
+      ) {
+        setTimeType(filterTimeType[0]);
+      }
+    }
+  }, [field.value]);
+
+  // EUI missing some props
+  const rest = { disabled: isDisabled };
+  const label = useMemo(
+    () => (
+      <EuiFlexGroup gutterSize="s" justifyContent="flexStart" alignItems="center">
+        <EuiFlexItem grow={false} component="span">
+          {field.label}
+        </EuiFlexItem>
+        <StyledLabelAppend grow={false} component="span">
+          {field.labelAppend}
+        </StyledLabelAppend>
+      </EuiFlexGroup>
+    ),
+    [field.label, field.labelAppend]
+  );
+
+  return (
+    <StyledEuiFormRow
+      label={label}
+      helpText={field.helpText}
+      error={errorMessage}
+      isInvalid={isInvalid}
+      fullWidth={false}
+      data-test-subj={dataTestSubj}
+      describedByIds={idAria ? [idAria] : undefined}
+    >
+      <EuiFormControlLayout
+        append={
+          <MyEuiSelect
+            fullWidth={false}
+            options={timeTypeOptions}
+            onChange={onChangeTimeType}
+            value={timeType}
+            {...rest}
+          />
+        }
+      >
+        <EuiFieldNumber
+          fullWidth
+          min={minimumValue}
+          onChange={onChangeTimeVal}
+          value={timeVal}
+          {...rest}
+        />
+      </EuiFormControlLayout>
+    </StyledEuiFormRow>
+  );
+};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/schedule_item_form/translations.ts b/x-pack/plugins/siem/public/alerts/components/rules/schedule_item_form/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/schedule_item_form/translations.ts
rename to x-pack/plugins/siem/public/alerts/components/rules/schedule_item_form/translations.ts
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/select_rule_type/index.test.tsx b/x-pack/plugins/siem/public/alerts/components/rules/select_rule_type/index.test.tsx
new file mode 100644
index 00000000000000..87401408c3cc18
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/select_rule_type/index.test.tsx
@@ -0,0 +1,25 @@
+/*
+ * 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 { SelectRuleType } from './index';
+import { useFormFieldMock } from '../../../../common/mock';
+jest.mock('../../../../common/lib/kibana');
+
+describe('SelectRuleType', () => {
+  it('renders correctly', () => {
+    const Component = () => {
+      const field = useFormFieldMock();
+
+      return <SelectRuleType field={field} />;
+    };
+    const wrapper = shallow(<Component />);
+
+    expect(wrapper.dive().find('[data-test-subj="selectRuleType"]')).toHaveLength(1);
+  });
+});
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/select_rule_type/index.tsx b/x-pack/plugins/siem/public/alerts/components/rules/select_rule_type/index.tsx
new file mode 100644
index 00000000000000..58112732bea3b1
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/select_rule_type/index.tsx
@@ -0,0 +1,123 @@
+/*
+ * 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, { useCallback } from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import {
+  EuiCard,
+  EuiFlexGrid,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiIcon,
+  EuiLink,
+  EuiText,
+} from '@elastic/eui';
+
+import { isMlRule } from '../../../../../common/machine_learning/helpers';
+import { RuleType } from '../../../../../common/detection_engine/types';
+import { FieldHook } from '../../../../shared_imports';
+import { useKibana } from '../../../../common/lib/kibana';
+import * as i18n from './translations';
+
+const MlCardDescription = ({
+  subscriptionUrl,
+  hasValidLicense = false,
+}: {
+  subscriptionUrl: string;
+  hasValidLicense?: boolean;
+}) => (
+  <EuiText size="s">
+    {hasValidLicense ? (
+      i18n.ML_TYPE_DESCRIPTION
+    ) : (
+      <FormattedMessage
+        id="xpack.siem.detectionEngine.createRule.stepDefineRule.ruleTypeField.mlTypeDisabledDescription"
+        defaultMessage="Access to ML requires a {subscriptionsLink}."
+        values={{
+          subscriptionsLink: (
+            <EuiLink href={subscriptionUrl} target="_blank">
+              <FormattedMessage
+                id="xpack.siem.components.stepDefineRule.ruleTypeField.subscriptionsLink"
+                defaultMessage="Platinum subscription"
+              />
+            </EuiLink>
+          ),
+        }}
+      />
+    )}
+  </EuiText>
+);
+
+interface SelectRuleTypeProps {
+  describedByIds?: string[];
+  field: FieldHook;
+  hasValidLicense?: boolean;
+  isMlAdmin?: boolean;
+  isReadOnly?: boolean;
+}
+
+export const SelectRuleType: React.FC<SelectRuleTypeProps> = ({
+  describedByIds = [],
+  field,
+  isReadOnly = false,
+  hasValidLicense = false,
+  isMlAdmin = false,
+}) => {
+  const ruleType = field.value as RuleType;
+  const setType = useCallback(
+    (type: RuleType) => {
+      field.setValue(type);
+    },
+    [field]
+  );
+  const setMl = useCallback(() => setType('machine_learning'), [setType]);
+  const setQuery = useCallback(() => setType('query'), [setType]);
+  const mlCardDisabled = isReadOnly || !hasValidLicense || !isMlAdmin;
+  const licensingUrl = useKibana().services.application.getUrlForApp('kibana', {
+    path: '#/management/elasticsearch/license_management',
+  });
+
+  return (
+    <EuiFormRow
+      fullWidth
+      data-test-subj="selectRuleType"
+      describedByIds={describedByIds}
+      label={field.label}
+    >
+      <EuiFlexGrid columns={4}>
+        <EuiFlexItem>
+          <EuiCard
+            data-test-subj="customRuleType"
+            title={i18n.QUERY_TYPE_TITLE}
+            description={i18n.QUERY_TYPE_DESCRIPTION}
+            icon={<EuiIcon size="l" type="search" />}
+            selectable={{
+              isDisabled: isReadOnly,
+              onClick: setQuery,
+              isSelected: !isMlRule(ruleType),
+            }}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiCard
+            data-test-subj="machineLearningRuleType"
+            title={i18n.ML_TYPE_TITLE}
+            description={
+              <MlCardDescription subscriptionUrl={licensingUrl} hasValidLicense={hasValidLicense} />
+            }
+            icon={<EuiIcon size="l" type="machineLearningApp" />}
+            isDisabled={mlCardDisabled}
+            selectable={{
+              isDisabled: mlCardDisabled,
+              onClick: setMl,
+              isSelected: isMlRule(ruleType),
+            }}
+          />
+        </EuiFlexItem>
+      </EuiFlexGrid>
+    </EuiFormRow>
+  );
+};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/select_rule_type/translations.ts b/x-pack/plugins/siem/public/alerts/components/rules/select_rule_type/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/select_rule_type/translations.ts
rename to x-pack/plugins/siem/public/alerts/components/rules/select_rule_type/translations.ts
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/severity_badge/index.test.tsx b/x-pack/plugins/siem/public/alerts/components/rules/severity_badge/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/severity_badge/index.test.tsx
rename to x-pack/plugins/siem/public/alerts/components/rules/severity_badge/index.test.tsx
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/severity_badge/index.tsx b/x-pack/plugins/siem/public/alerts/components/rules/severity_badge/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/severity_badge/index.tsx
rename to x-pack/plugins/siem/public/alerts/components/rules/severity_badge/index.tsx
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/status_icon/index.test.tsx b/x-pack/plugins/siem/public/alerts/components/rules/status_icon/index.test.tsx
new file mode 100644
index 00000000000000..6a16008e9d616d
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/status_icon/index.test.tsx
@@ -0,0 +1,22 @@
+/*
+ * 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 { TestProviders } from '../../../../common/mock';
+import { RuleStatusIcon } from './index';
+jest.mock('../../../../common/lib/kibana');
+
+describe('RuleStatusIcon', () => {
+  it('renders correctly', () => {
+    const wrapper = shallow(<RuleStatusIcon name="name" type="active" />, {
+      wrappingComponent: TestProviders,
+    });
+
+    expect(wrapper.find('EuiAvatar')).toHaveLength(1);
+  });
+});
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/status_icon/index.tsx b/x-pack/plugins/siem/public/alerts/components/rules/status_icon/index.tsx
new file mode 100644
index 00000000000000..443ee3e1811f62
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/status_icon/index.tsx
@@ -0,0 +1,39 @@
+/*
+ * 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 { EuiAvatar, EuiIcon } from '@elastic/eui';
+import React, { memo } from 'react';
+import styled from 'styled-components';
+
+import { useEuiTheme } from '../../../../common/lib/theme/use_eui_theme';
+import { RuleStatusType } from '../../../pages/detection_engine/rules/types';
+
+export interface RuleStatusIconProps {
+  name: string;
+  type: RuleStatusType;
+}
+
+const RuleStatusIconStyled = styled.div`
+  position: relative;
+  svg {
+    position: absolute;
+    top: 8px;
+    left: 9px;
+  }
+`;
+
+const RuleStatusIconComponent: React.FC<RuleStatusIconProps> = ({ name, type }) => {
+  const theme = useEuiTheme();
+  const color = type === 'passive' ? theme.euiColorLightestShade : theme.euiColorPrimary;
+  return (
+    <RuleStatusIconStyled>
+      <EuiAvatar color={color} name={type === 'valid' ? '' : name} size="l" />
+      {type === 'valid' ? <EuiIcon type="check" color={theme.euiColorEmptyShade} size="l" /> : null}
+    </RuleStatusIconStyled>
+  );
+};
+
+export const RuleStatusIcon = memo(RuleStatusIconComponent);
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule/data.tsx b/x-pack/plugins/siem/public/alerts/components/rules/step_about_rule/data.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule/data.tsx
rename to x-pack/plugins/siem/public/alerts/components/rules/step_about_rule/data.tsx
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule/default_value.ts b/x-pack/plugins/siem/public/alerts/components/rules/step_about_rule/default_value.ts
similarity index 89%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule/default_value.ts
rename to x-pack/plugins/siem/public/alerts/components/rules/step_about_rule/default_value.ts
index 52b0038507b594..977769158481e0 100644
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule/default_value.ts
+++ b/x-pack/plugins/siem/public/alerts/components/rules/step_about_rule/default_value.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { AboutStepRule } from '../../types';
+import { AboutStepRule } from '../../../pages/detection_engine/rules/types';
 
 export const threatDefault = [
   {
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule/helpers.test.ts b/x-pack/plugins/siem/public/alerts/components/rules/step_about_rule/helpers.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule/helpers.test.ts
rename to x-pack/plugins/siem/public/alerts/components/rules/step_about_rule/helpers.test.ts
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule/helpers.ts b/x-pack/plugins/siem/public/alerts/components/rules/step_about_rule/helpers.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule/helpers.ts
rename to x-pack/plugins/siem/public/alerts/components/rules/step_about_rule/helpers.ts
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/step_about_rule/index.test.tsx b/x-pack/plugins/siem/public/alerts/components/rules/step_about_rule/index.test.tsx
new file mode 100644
index 00000000000000..13a62cee047ba9
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/step_about_rule/index.test.tsx
@@ -0,0 +1,167 @@
+/*
+ * 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 { mount, shallow } from 'enzyme';
+import { ThemeProvider } from 'styled-components';
+import euiDarkVars from '@elastic/eui/dist/eui_theme_light.json';
+
+import { StepAboutRule } from '.';
+
+import { mockAboutStepRule } from '../../../pages/detection_engine/rules/all/__mocks__/mock';
+import { StepRuleDescription } from '../description_step';
+import { stepAboutDefaultValue } from './default_value';
+
+const theme = () => ({ eui: euiDarkVars, darkMode: true });
+
+/* eslint-disable no-console */
+// Silence until enzyme fixed to use ReactTestUtils.act()
+const originalError = console.error;
+beforeAll(() => {
+  console.error = jest.fn();
+});
+afterAll(() => {
+  console.error = originalError;
+});
+/* eslint-enable no-console */
+
+describe('StepAboutRuleComponent', () => {
+  test('it renders StepRuleDescription if isReadOnlyView is true and "name" property exists', () => {
+    const wrapper = shallow(
+      <StepAboutRule
+        addPadding={false}
+        defaultValues={mockAboutStepRule()}
+        descriptionColumns="multi"
+        isReadOnlyView={true}
+        isLoading={false}
+      />
+    );
+
+    expect(wrapper.find(StepRuleDescription).exists()).toBeTruthy();
+  });
+
+  test('it prevents user from clicking continue if no "description" defined', () => {
+    const wrapper = mount(
+      <ThemeProvider theme={theme}>
+        <StepAboutRule
+          addPadding={true}
+          defaultValues={stepAboutDefaultValue}
+          descriptionColumns="multi"
+          isReadOnlyView={false}
+          isLoading={false}
+          setForm={jest.fn()}
+          setStepData={jest.fn()}
+        />
+      </ThemeProvider>
+    );
+
+    const nameInput = wrapper
+      .find('input[aria-describedby="detectionEngineStepAboutRuleName"]')
+      .at(0);
+    nameInput.simulate('change', { target: { value: 'Test name text' } });
+
+    const descriptionInput = wrapper
+      .find('textarea[aria-describedby="detectionEngineStepAboutRuleDescription"]')
+      .at(0);
+    const nextButton = wrapper.find('button[data-test-subj="about-continue"]').at(0);
+    nextButton.simulate('click');
+
+    expect(
+      wrapper
+        .find('input[aria-describedby="detectionEngineStepAboutRuleName"]')
+        .at(0)
+        .props().value
+    ).toEqual('Test name text');
+    expect(descriptionInput.props().value).toEqual('');
+    expect(
+      wrapper
+        .find('EuiFormRow[data-test-subj="detectionEngineStepAboutRuleDescription"] label')
+        .at(0)
+        .hasClass('euiFormLabel-isInvalid')
+    ).toBeTruthy();
+    expect(
+      wrapper
+        .find('EuiFormRow[data-test-subj="detectionEngineStepAboutRuleDescription"] EuiTextArea')
+        .at(0)
+        .prop('isInvalid')
+    ).toBeTruthy();
+  });
+
+  test('it prevents user from clicking continue if no "name" defined', () => {
+    const wrapper = mount(
+      <ThemeProvider theme={theme}>
+        <StepAboutRule
+          addPadding={true}
+          defaultValues={stepAboutDefaultValue}
+          descriptionColumns="multi"
+          isReadOnlyView={false}
+          isLoading={false}
+          setForm={jest.fn()}
+          setStepData={jest.fn()}
+        />
+      </ThemeProvider>
+    );
+
+    const descriptionInput = wrapper
+      .find('textarea[aria-describedby="detectionEngineStepAboutRuleDescription"]')
+      .at(0);
+    descriptionInput.simulate('change', { target: { value: 'Test description text' } });
+
+    const nameInput = wrapper
+      .find('input[aria-describedby="detectionEngineStepAboutRuleName"]')
+      .at(0);
+    const nextButton = wrapper.find('button[data-test-subj="about-continue"]').at(0);
+    nextButton.simulate('click');
+
+    expect(
+      wrapper
+        .find('textarea[aria-describedby="detectionEngineStepAboutRuleDescription"]')
+        .at(0)
+        .props().value
+    ).toEqual('Test description text');
+    expect(nameInput.props().value).toEqual('');
+    expect(
+      wrapper
+        .find('EuiFormRow[data-test-subj="detectionEngineStepAboutRuleName"] label')
+        .at(0)
+        .hasClass('euiFormLabel-isInvalid')
+    ).toBeTruthy();
+    expect(
+      wrapper
+        .find('EuiFormRow[data-test-subj="detectionEngineStepAboutRuleName"] EuiFieldText')
+        .at(0)
+        .prop('isInvalid')
+    ).toBeTruthy();
+  });
+
+  test('it allows user to click continue if "name" and "description" are defined', () => {
+    const wrapper = mount(
+      <ThemeProvider theme={theme}>
+        <StepAboutRule
+          addPadding={true}
+          defaultValues={stepAboutDefaultValue}
+          descriptionColumns="multi"
+          isReadOnlyView={false}
+          isLoading={false}
+          setForm={jest.fn()}
+          setStepData={jest.fn()}
+        />
+      </ThemeProvider>
+    );
+
+    const descriptionInput = wrapper
+      .find('textarea[aria-describedby="detectionEngineStepAboutRuleDescription"]')
+      .at(0);
+    descriptionInput.simulate('change', { target: { value: 'Test description text' } });
+
+    const nameInput = wrapper
+      .find('input[aria-describedby="detectionEngineStepAboutRuleName"]')
+      .at(0);
+    nameInput.simulate('change', { target: { value: 'Test name text' } });
+
+    const nextButton = wrapper.find('button[data-test-subj="about-continue"]').at(0);
+    nextButton.simulate('click');
+  });
+});
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/step_about_rule/index.tsx b/x-pack/plugins/siem/public/alerts/components/rules/step_about_rule/index.tsx
new file mode 100644
index 00000000000000..78ae3e44705c70
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/step_about_rule/index.tsx
@@ -0,0 +1,283 @@
+/*
+ * 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 { EuiAccordion, EuiFlexItem, EuiSpacer, EuiButtonEmpty } from '@elastic/eui';
+import React, { FC, memo, useCallback, useEffect, useState } from 'react';
+import styled from 'styled-components';
+import deepEqual from 'fast-deep-equal';
+
+import {
+  RuleStepProps,
+  RuleStep,
+  AboutStepRule,
+} from '../../../pages/detection_engine/rules/types';
+import { AddItem } from '../add_item_form';
+import { StepRuleDescription } from '../description_step';
+import { AddMitreThreat } from '../mitre';
+import {
+  Field,
+  Form,
+  FormDataProvider,
+  getUseField,
+  UseField,
+  useForm,
+} from '../../../../shared_imports';
+
+import { defaultRiskScoreBySeverity, severityOptions, SeverityValue } from './data';
+import { stepAboutDefaultValue } from './default_value';
+import { isUrlInvalid } from './helpers';
+import { schema } from './schema';
+import * as I18n from './translations';
+import { StepContentWrapper } from '../step_content_wrapper';
+import { NextStep } from '../next_step';
+import { MarkdownEditorForm } from '../../../../common/components/markdown_editor/form';
+import { setFieldValue } from '../../../pages/detection_engine/rules/helpers';
+
+const CommonUseField = getUseField({ component: Field });
+
+interface StepAboutRuleProps extends RuleStepProps {
+  defaultValues?: AboutStepRule | null;
+}
+
+const ThreeQuartersContainer = styled.div`
+  max-width: 740px;
+`;
+
+ThreeQuartersContainer.displayName = 'ThreeQuartersContainer';
+
+const TagContainer = styled.div`
+  margin-top: 16px;
+`;
+
+TagContainer.displayName = 'TagContainer';
+
+const AdvancedSettingsAccordion = styled(EuiAccordion)`
+  .euiAccordion__iconWrapper {
+    display: none;
+  }
+
+  .euiAccordion__childWrapper {
+    transition-duration: 1ms; /* hack to fire Step accordion to set proper content's height */
+  }
+
+  &.euiAccordion-isOpen .euiButtonEmpty__content > svg {
+    transform: rotate(90deg);
+  }
+`;
+
+const AdvancedSettingsAccordionButton = (
+  <EuiButtonEmpty flush="left" size="s" iconType="arrowRight">
+    {I18n.ADVANCED_SETTINGS}
+  </EuiButtonEmpty>
+);
+
+const StepAboutRuleComponent: FC<StepAboutRuleProps> = ({
+  addPadding = false,
+  defaultValues,
+  descriptionColumns = 'singleSplit',
+  isReadOnlyView,
+  isUpdateView = false,
+  isLoading,
+  setForm,
+  setStepData,
+}) => {
+  const [myStepData, setMyStepData] = useState<AboutStepRule>(stepAboutDefaultValue);
+
+  const { form } = useForm({
+    defaultValue: myStepData,
+    options: { stripEmptyFields: false },
+    schema,
+  });
+
+  const onSubmit = useCallback(async () => {
+    if (setStepData) {
+      setStepData(RuleStep.aboutRule, null, false);
+      const { isValid, data } = await form.submit();
+      if (isValid) {
+        setStepData(RuleStep.aboutRule, data, isValid);
+        setMyStepData({ ...data, isNew: false } as AboutStepRule);
+      }
+    }
+  }, [form]);
+
+  useEffect(() => {
+    const { isNew, ...initDefaultValue } = myStepData;
+    if (defaultValues != null && !deepEqual(initDefaultValue, defaultValues)) {
+      const myDefaultValues = {
+        ...defaultValues,
+        isNew: false,
+      };
+      setMyStepData(myDefaultValues);
+      setFieldValue(form, schema, myDefaultValues);
+    }
+  }, [defaultValues]);
+
+  useEffect(() => {
+    if (setForm != null) {
+      setForm(RuleStep.aboutRule, form);
+    }
+  }, [form]);
+
+  return isReadOnlyView && myStepData.name != null ? (
+    <StepContentWrapper data-test-subj="aboutStep" addPadding={addPadding}>
+      <StepRuleDescription columns={descriptionColumns} schema={schema} data={myStepData} />
+    </StepContentWrapper>
+  ) : (
+    <>
+      <StepContentWrapper addPadding={!isUpdateView}>
+        <Form form={form}>
+          <ThreeQuartersContainer>
+            <CommonUseField
+              path="name"
+              componentProps={{
+                idAria: 'detectionEngineStepAboutRuleName',
+                'data-test-subj': 'detectionEngineStepAboutRuleName',
+                euiFieldProps: {
+                  fullWidth: true,
+                  disabled: isLoading,
+                },
+              }}
+            />
+          </ThreeQuartersContainer>
+          <EuiSpacer size="m" />
+          <ThreeQuartersContainer>
+            <CommonUseField
+              path="description"
+              componentProps={{
+                idAria: 'detectionEngineStepAboutRuleDescription',
+                'data-test-subj': 'detectionEngineStepAboutRuleDescription',
+                euiFieldProps: {
+                  disabled: isLoading,
+                  compressed: true,
+                  fullWidth: true,
+                },
+              }}
+            />
+          </ThreeQuartersContainer>
+          <EuiSpacer size="m" />
+          <EuiFlexItem>
+            <CommonUseField
+              path="severity"
+              componentProps={{
+                idAria: 'detectionEngineStepAboutRuleSeverity',
+                'data-test-subj': 'detectionEngineStepAboutRuleSeverity',
+                euiFieldProps: {
+                  fullWidth: false,
+                  disabled: isLoading,
+                  options: severityOptions,
+                },
+              }}
+            />
+          </EuiFlexItem>
+          <EuiSpacer size="m" />
+          <EuiFlexItem>
+            <CommonUseField
+              path="riskScore"
+              componentProps={{
+                idAria: 'detectionEngineStepAboutRuleRiskScore',
+                'data-test-subj': 'detectionEngineStepAboutRuleRiskScore',
+                euiFieldProps: {
+                  max: 100,
+                  min: 0,
+                  fullWidth: false,
+                  disabled: isLoading,
+                  showTicks: true,
+                  tickInterval: 25,
+                },
+              }}
+            />
+          </EuiFlexItem>
+          <TagContainer>
+            <CommonUseField
+              path="tags"
+              componentProps={{
+                idAria: 'detectionEngineStepAboutRuleTags',
+                'data-test-subj': 'detectionEngineStepAboutRuleTags',
+                euiFieldProps: {
+                  fullWidth: true,
+                  isDisabled: isLoading,
+                  placeholder: '',
+                },
+              }}
+            />
+          </TagContainer>
+          <EuiSpacer size="m" />
+          <AdvancedSettingsAccordion
+            data-test-subj="advancedSettings"
+            id="advancedSettingsAccordion"
+            buttonContent={AdvancedSettingsAccordionButton}
+          >
+            <EuiSpacer size="m" />
+            <UseField
+              path="references"
+              component={AddItem}
+              componentProps={{
+                addText: I18n.ADD_REFERENCE,
+                idAria: 'detectionEngineStepAboutRuleReferenceUrls',
+                isDisabled: isLoading,
+                dataTestSubj: 'detectionEngineStepAboutRuleReferenceUrls',
+                validate: isUrlInvalid,
+              }}
+            />
+            <UseField
+              path="falsePositives"
+              component={AddItem}
+              componentProps={{
+                addText: I18n.ADD_FALSE_POSITIVE,
+                idAria: 'detectionEngineStepAboutRuleFalsePositives',
+                isDisabled: isLoading,
+                dataTestSubj: 'detectionEngineStepAboutRuleFalsePositives',
+              }}
+            />
+            <UseField
+              path="threat"
+              component={AddMitreThreat}
+              componentProps={{
+                idAria: 'detectionEngineStepAboutRuleMitreThreat',
+                isDisabled: isLoading,
+                dataTestSubj: 'detectionEngineStepAboutRuleMitreThreat',
+              }}
+            />
+            <EuiSpacer size="m" />
+            <ThreeQuartersContainer>
+              <UseField
+                path="note"
+                component={MarkdownEditorForm}
+                componentProps={{
+                  idAria: 'detectionEngineStepAboutRuleNote',
+                  isDisabled: isLoading,
+                  dataTestSubj: 'detectionEngineStepAboutRuleNote',
+                  placeholder: I18n.ADD_RULE_NOTE_HELP_TEXT,
+                }}
+              />
+            </ThreeQuartersContainer>
+          </AdvancedSettingsAccordion>
+          <FormDataProvider pathsToWatch="severity">
+            {({ severity }) => {
+              const newRiskScore = defaultRiskScoreBySeverity[severity as SeverityValue];
+              const severityField = form.getFields().severity;
+              const riskScoreField = form.getFields().riskScore;
+              if (
+                severityField.value !== severity &&
+                newRiskScore != null &&
+                riskScoreField.value !== newRiskScore
+              ) {
+                riskScoreField.setValue(newRiskScore);
+              }
+              return null;
+            }}
+          </FormDataProvider>
+        </Form>
+      </StepContentWrapper>
+
+      {!isUpdateView && (
+        <NextStep dataTestSubj="about-continue" onClick={onSubmit} isDisabled={isLoading} />
+      )}
+    </>
+  );
+};
+
+export const StepAboutRule = memo(StepAboutRuleComponent);
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/step_about_rule/schema.tsx b/x-pack/plugins/siem/public/alerts/components/rules/step_about_rule/schema.tsx
new file mode 100644
index 00000000000000..3cb5e9a0dd5f01
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/step_about_rule/schema.tsx
@@ -0,0 +1,190 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+import {
+  FIELD_TYPES,
+  fieldValidators,
+  FormSchema,
+  ValidationFunc,
+  ERROR_CODE,
+} from '../../../../shared_imports';
+import { IMitreEnterpriseAttack } from '../../../pages/detection_engine/rules/types';
+import { isMitreAttackInvalid } from '../mitre/helpers';
+import { OptionalFieldLabel } from '../optional_field_label';
+import { isUrlInvalid } from './helpers';
+import * as I18n from './translations';
+
+const { emptyField } = fieldValidators;
+
+export const schema: FormSchema = {
+  name: {
+    type: FIELD_TYPES.TEXT,
+    label: i18n.translate('xpack.siem.detectionEngine.createRule.stepAboutRule.fieldNameLabel', {
+      defaultMessage: 'Name',
+    }),
+    validations: [
+      {
+        validator: emptyField(
+          i18n.translate(
+            'xpack.siem.detectionEngine.createRule.stepAboutRule.nameFieldRequiredError',
+            {
+              defaultMessage: 'A name is required.',
+            }
+          )
+        ),
+      },
+    ],
+  },
+  description: {
+    type: FIELD_TYPES.TEXTAREA,
+    label: i18n.translate(
+      'xpack.siem.detectionEngine.createRule.stepAboutRule.fieldDescriptionLabel',
+      {
+        defaultMessage: 'Description',
+      }
+    ),
+    validations: [
+      {
+        validator: emptyField(
+          i18n.translate(
+            'xpack.siem.detectionEngine.createRule.stepAboutRule.descriptionFieldRequiredError',
+            {
+              defaultMessage: 'A description is required.',
+            }
+          )
+        ),
+      },
+    ],
+  },
+  severity: {
+    type: FIELD_TYPES.SUPER_SELECT,
+    label: i18n.translate(
+      'xpack.siem.detectionEngine.createRule.stepAboutRule.fieldSeverityLabel',
+      {
+        defaultMessage: 'Severity',
+      }
+    ),
+    validations: [
+      {
+        validator: emptyField(
+          i18n.translate(
+            'xpack.siem.detectionEngine.createRule.stepAboutRule.severityFieldRequiredError',
+            {
+              defaultMessage: 'A severity is required.',
+            }
+          )
+        ),
+      },
+    ],
+  },
+  riskScore: {
+    type: FIELD_TYPES.RANGE,
+    label: i18n.translate(
+      'xpack.siem.detectionEngine.createRule.stepAboutRule.fieldRiskScoreLabel',
+      {
+        defaultMessage: 'Risk score',
+      }
+    ),
+  },
+  references: {
+    label: i18n.translate(
+      'xpack.siem.detectionEngine.createRule.stepAboutRule.fieldReferenceUrlsLabel',
+      {
+        defaultMessage: 'Reference URLs',
+      }
+    ),
+    labelAppend: OptionalFieldLabel,
+    validations: [
+      {
+        validator: (
+          ...args: Parameters<ValidationFunc>
+        ): ReturnType<ValidationFunc<{}, ERROR_CODE>> | undefined => {
+          const [{ value, path }] = args;
+          let hasError = false;
+          (value as string[]).forEach(url => {
+            if (isUrlInvalid(url)) {
+              hasError = true;
+            }
+          });
+          return hasError
+            ? {
+                code: 'ERR_FIELD_FORMAT',
+                path,
+                message: I18n.URL_FORMAT_INVALID,
+              }
+            : undefined;
+        },
+      },
+    ],
+  },
+  falsePositives: {
+    label: i18n.translate(
+      'xpack.siem.detectionEngine.createRule.stepAboutRule.fieldFalsePositiveLabel',
+      {
+        defaultMessage: 'False positive examples',
+      }
+    ),
+    labelAppend: OptionalFieldLabel,
+  },
+  threat: {
+    label: i18n.translate(
+      'xpack.siem.detectionEngine.createRule.stepAboutRule.fieldMitreThreatLabel',
+      {
+        defaultMessage: 'MITRE ATT&CK\\u2122',
+      }
+    ),
+    labelAppend: OptionalFieldLabel,
+    validations: [
+      {
+        validator: (
+          ...args: Parameters<ValidationFunc>
+        ): ReturnType<ValidationFunc<{}, ERROR_CODE>> | undefined => {
+          const [{ value, path }] = args;
+          let hasError = false;
+          (value as IMitreEnterpriseAttack[]).forEach(v => {
+            if (isMitreAttackInvalid(v.tactic.name, v.technique)) {
+              hasError = true;
+            }
+          });
+          return hasError
+            ? {
+                code: 'ERR_FIELD_MISSING',
+                path,
+                message: I18n.CUSTOM_MITRE_ATTACK_TECHNIQUES_REQUIRED,
+              }
+            : undefined;
+        },
+      },
+    ],
+  },
+  tags: {
+    type: FIELD_TYPES.COMBO_BOX,
+    label: i18n.translate('xpack.siem.detectionEngine.createRule.stepAboutRule.fieldTagsLabel', {
+      defaultMessage: 'Tags',
+    }),
+    helpText: i18n.translate(
+      'xpack.siem.detectionEngine.createRule.stepAboutRule.fieldTagsHelpText',
+      {
+        defaultMessage:
+          'Type one or more custom identifying tags for this rule. Press enter after each tag to begin a new one.',
+      }
+    ),
+    labelAppend: OptionalFieldLabel,
+  },
+  note: {
+    type: FIELD_TYPES.TEXTAREA,
+    label: i18n.translate('xpack.siem.detectionEngine.createRule.stepAboutRule.guideLabel', {
+      defaultMessage: 'Investigation guide',
+    }),
+    helpText: i18n.translate('xpack.siem.detectionEngine.createRule.stepAboutRule.guideHelpText', {
+      defaultMessage:
+        'Provide helpful information for analysts that are performing a signal investigation. This guide will appear on both the rule details page and in timelines created from signals generated by this rule.',
+    }),
+    labelAppend: OptionalFieldLabel,
+  },
+};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule/translations.ts b/x-pack/plugins/siem/public/alerts/components/rules/step_about_rule/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule/translations.ts
rename to x-pack/plugins/siem/public/alerts/components/rules/step_about_rule/translations.ts
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/step_about_rule_details/index.test.tsx b/x-pack/plugins/siem/public/alerts/components/rules/step_about_rule_details/index.test.tsx
new file mode 100644
index 00000000000000..cd499c60b12337
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/step_about_rule_details/index.test.tsx
@@ -0,0 +1,170 @@
+/*
+ * 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 { mount, shallow } from 'enzyme';
+import { EuiProgress, EuiButtonGroup } from '@elastic/eui';
+import { ThemeProvider } from 'styled-components';
+import euiDarkVars from '@elastic/eui/dist/eui_theme_light.json';
+
+import { StepAboutRuleToggleDetails } from '.';
+import { mockAboutStepRule } from '../../../pages/detection_engine/rules/all/__mocks__/mock';
+import { HeaderSection } from '../../../../common/components/header_section';
+import { StepAboutRule } from '../step_about_rule';
+import { AboutStepRule } from '../../../pages/detection_engine/rules/types';
+
+jest.mock('../../../../common/lib/kibana');
+
+const theme = () => ({ eui: euiDarkVars, darkMode: true });
+
+describe('StepAboutRuleToggleDetails', () => {
+  let mockRule: AboutStepRule;
+
+  beforeEach(() => {
+    mockRule = mockAboutStepRule();
+  });
+
+  test('it renders loading component when "loading" is true', () => {
+    const wrapper = shallow(
+      <StepAboutRuleToggleDetails
+        loading={true}
+        stepDataDetails={{
+          note: mockRule.note,
+          description: mockRule.description,
+        }}
+        stepData={mockRule}
+      />
+    );
+
+    expect(wrapper.find(EuiProgress).exists()).toBeTruthy();
+    expect(wrapper.find(HeaderSection).exists()).toBeTruthy();
+  });
+
+  test('it does not render details if stepDataDetails is null', () => {
+    const wrapper = shallow(
+      <StepAboutRuleToggleDetails loading={true} stepDataDetails={null} stepData={mockRule} />
+    );
+
+    expect(wrapper.find(StepAboutRule).exists()).toBeFalsy();
+  });
+
+  test('it does not render details if stepData is null', () => {
+    const wrapper = shallow(
+      <StepAboutRuleToggleDetails
+        loading={true}
+        stepDataDetails={{
+          note: '',
+          description: '',
+        }}
+        stepData={null}
+      />
+    );
+
+    expect(wrapper.find(StepAboutRule).exists()).toBeFalsy();
+  });
+
+  describe('note value is empty string', () => {
+    test('it does not render toggle buttons', () => {
+      const mockAboutStepWithoutNote = {
+        ...mockRule,
+        note: '',
+      };
+      const wrapper = shallow(
+        <StepAboutRuleToggleDetails
+          loading={false}
+          stepDataDetails={{
+            note: '',
+            description: mockRule.description,
+          }}
+          stepData={mockAboutStepWithoutNote}
+        />
+      );
+
+      expect(wrapper.find('[data-test-subj="stepAboutDetailsToggle"]').exists()).toBeFalsy();
+      expect(wrapper.find('[data-test-subj="stepAboutDetailsNoteContent"]').exists()).toBeFalsy();
+      expect(wrapper.find('[data-test-subj="stepAboutDetailsContent"]').exists()).toBeTruthy();
+    });
+  });
+
+  describe('note value does exist', () => {
+    test('it renders toggle buttons, defaulted to "details"', () => {
+      const wrapper = mount(
+        <ThemeProvider theme={theme}>
+          <StepAboutRuleToggleDetails
+            loading={false}
+            stepDataDetails={{
+              note: mockRule.note,
+              description: mockRule.description,
+            }}
+            stepData={mockRule}
+          />
+        </ThemeProvider>
+      );
+
+      expect(wrapper.find(EuiButtonGroup).exists()).toBeTruthy();
+      expect(
+        wrapper
+          .find('EuiButtonToggle[id="details"]')
+          .at(0)
+          .prop('isSelected')
+      ).toBeTruthy();
+      expect(
+        wrapper
+          .find('EuiButtonToggle[id="notes"]')
+          .at(0)
+          .prop('isSelected')
+      ).toBeFalsy();
+    });
+
+    test('it allows users to toggle between "details" and "note"', () => {
+      const wrapper = mount(
+        <ThemeProvider theme={theme}>
+          <StepAboutRuleToggleDetails
+            loading={false}
+            stepDataDetails={{
+              note: mockRule.note,
+              description: mockRule.description,
+            }}
+            stepData={mockRule}
+          />
+        </ThemeProvider>
+      );
+
+      expect(wrapper.find('EuiButtonGroup[idSelected="details"]').exists()).toBeTruthy();
+      expect(wrapper.find('EuiButtonGroup[idSelected="notes"]').exists()).toBeFalsy();
+
+      wrapper
+        .find('input[title="Investigation guide"]')
+        .at(0)
+        .simulate('change', { target: { value: 'notes' } });
+
+      expect(wrapper.find('EuiButtonGroup[idSelected="details"]').exists()).toBeFalsy();
+      expect(wrapper.find('EuiButtonGroup[idSelected="notes"]').exists()).toBeTruthy();
+    });
+
+    test('it displays notes markdown when user toggles to "notes"', () => {
+      const wrapper = mount(
+        <ThemeProvider theme={theme}>
+          <StepAboutRuleToggleDetails
+            loading={false}
+            stepDataDetails={{
+              note: mockRule.note,
+              description: mockRule.description,
+            }}
+            stepData={mockRule}
+          />
+        </ThemeProvider>
+      );
+
+      wrapper
+        .find('input[title="Investigation guide"]')
+        .at(0)
+        .simulate('change', { target: { value: 'notes' } });
+
+      expect(wrapper.find('EuiButtonGroup[idSelected="notes"]').exists()).toBeTruthy();
+      expect(wrapper.find('Markdown h1').text()).toEqual('this is some markdown documentation');
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/step_about_rule_details/index.tsx b/x-pack/plugins/siem/public/alerts/components/rules/step_about_rule_details/index.tsx
new file mode 100644
index 00000000000000..2163ea80f673ae
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/step_about_rule_details/index.tsx
@@ -0,0 +1,150 @@
+/*
+ * 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 {
+  EuiPanel,
+  EuiProgress,
+  EuiButtonGroup,
+  EuiButtonGroupOption,
+  EuiSpacer,
+  EuiFlexItem,
+  EuiText,
+  EuiFlexGroup,
+  EuiResizeObserver,
+} from '@elastic/eui';
+import React, { memo, useCallback, useState } from 'react';
+import styled from 'styled-components';
+import { isEmpty } from 'lodash/fp';
+
+import { HeaderSection } from '../../../../common/components/header_section';
+import { Markdown } from '../../../../common/components/markdown';
+import { AboutStepRule, AboutStepRuleDetails } from '../../../pages/detection_engine/rules/types';
+import * as i18n from './translations';
+import { StepAboutRule } from '../step_about_rule';
+
+const MyPanel = styled(EuiPanel)`
+  position: relative;
+`;
+
+const FlexGroupFullHeight = styled(EuiFlexGroup)`
+  height: 100%;
+`;
+
+const VerticalOverflowContainer = styled.div((props: { maxHeight: number }) => ({
+  'max-height': `${props.maxHeight}px`,
+  'overflow-y': 'hidden',
+}));
+
+const VerticalOverflowContent = styled.div((props: { maxHeight: number }) => ({
+  'max-height': `${props.maxHeight}px`,
+}));
+
+const AboutContent = styled.div`
+  height: 100%;
+`;
+
+const toggleOptions: EuiButtonGroupOption[] = [
+  {
+    id: 'details',
+    label: i18n.ABOUT_PANEL_DETAILS_TAB,
+  },
+  {
+    id: 'notes',
+    label: i18n.ABOUT_PANEL_NOTES_TAB,
+  },
+];
+
+interface StepPanelProps {
+  stepData: AboutStepRule | null;
+  stepDataDetails: AboutStepRuleDetails | null;
+  loading: boolean;
+}
+
+const StepAboutRuleToggleDetailsComponent: React.FC<StepPanelProps> = ({
+  stepData,
+  stepDataDetails,
+  loading,
+}) => {
+  const [selectedToggleOption, setToggleOption] = useState('details');
+  const [aboutPanelHeight, setAboutPanelHeight] = useState(0);
+
+  const onResize = useCallback(
+    (e: { height: number; width: number }) => {
+      setAboutPanelHeight(e.height);
+    },
+    [setAboutPanelHeight]
+  );
+
+  return (
+    <MyPanel>
+      {loading && (
+        <>
+          <EuiProgress size="xs" color="accent" position="absolute" />
+          <HeaderSection title={i18n.ABOUT_TEXT} />
+        </>
+      )}
+      {stepData != null && stepDataDetails != null && (
+        <FlexGroupFullHeight gutterSize="xs" direction="column">
+          <EuiFlexItem grow={1} key="header">
+            <HeaderSection title={i18n.ABOUT_TEXT}>
+              {!isEmpty(stepDataDetails.note) && stepDataDetails.note.trim() !== '' && (
+                <EuiButtonGroup
+                  options={toggleOptions}
+                  idSelected={selectedToggleOption}
+                  onChange={val => {
+                    setToggleOption(val);
+                  }}
+                  data-test-subj="stepAboutDetailsToggle"
+                />
+              )}
+            </HeaderSection>
+          </EuiFlexItem>
+          <EuiFlexItem grow={5} key="details">
+            {selectedToggleOption === 'details' ? (
+              <EuiResizeObserver data-test-subj="stepAboutDetailsContent" onResize={onResize}>
+                {resizeRef => (
+                  <AboutContent ref={resizeRef}>
+                    <VerticalOverflowContainer maxHeight={120}>
+                      <VerticalOverflowContent maxHeight={120} className="eui-yScrollWithShadows">
+                        <EuiText
+                          size="s"
+                          data-test-subj="stepAboutRuleDetailsToggleDescriptionText"
+                        >
+                          {stepDataDetails.description}
+                        </EuiText>
+                      </VerticalOverflowContent>
+                    </VerticalOverflowContainer>
+                    <EuiSpacer size="m" />
+                    <StepAboutRule
+                      descriptionColumns="singleSplit"
+                      isReadOnlyView={true}
+                      isLoading={false}
+                      defaultValues={stepData}
+                    />
+                  </AboutContent>
+                )}
+              </EuiResizeObserver>
+            ) : (
+              <VerticalOverflowContainer
+                data-test-subj="stepAboutDetailsNoteContent"
+                maxHeight={aboutPanelHeight}
+              >
+                <VerticalOverflowContent
+                  maxHeight={aboutPanelHeight}
+                  className="eui-yScrollWithShadows"
+                >
+                  <Markdown raw={stepDataDetails.note} />
+                </VerticalOverflowContent>
+              </VerticalOverflowContainer>
+            )}
+          </EuiFlexItem>
+        </FlexGroupFullHeight>
+      )}
+    </MyPanel>
+  );
+};
+
+export const StepAboutRuleToggleDetails = memo(StepAboutRuleToggleDetailsComponent);
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule_details/translations.ts b/x-pack/plugins/siem/public/alerts/components/rules/step_about_rule_details/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule_details/translations.ts
rename to x-pack/plugins/siem/public/alerts/components/rules/step_about_rule_details/translations.ts
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_content_wrapper/index.test.tsx b/x-pack/plugins/siem/public/alerts/components/rules/step_content_wrapper/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_content_wrapper/index.test.tsx
rename to x-pack/plugins/siem/public/alerts/components/rules/step_content_wrapper/index.test.tsx
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_content_wrapper/index.tsx b/x-pack/plugins/siem/public/alerts/components/rules/step_content_wrapper/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_content_wrapper/index.tsx
rename to x-pack/plugins/siem/public/alerts/components/rules/step_content_wrapper/index.tsx
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/step_define_rule/index.test.tsx b/x-pack/plugins/siem/public/alerts/components/rules/step_define_rule/index.test.tsx
new file mode 100644
index 00000000000000..6831548992ff10
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/step_define_rule/index.test.tsx
@@ -0,0 +1,20 @@
+/*
+ * 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 { StepDefineRule } from './index';
+
+jest.mock('../../../../common/lib/kibana');
+
+describe('StepDefineRule', () => {
+  it('renders correctly', () => {
+    const wrapper = shallow(<StepDefineRule isReadOnlyView={false} isLoading={false} />);
+
+    expect(wrapper.find('Form[data-test-subj="stepDefineRule"]')).toHaveLength(1);
+  });
+});
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/step_define_rule/index.tsx b/x-pack/plugins/siem/public/alerts/components/rules/step_define_rule/index.tsx
new file mode 100644
index 00000000000000..119f851ecdfe45
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/step_define_rule/index.tsx
@@ -0,0 +1,283 @@
+/*
+ * 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 { EuiButtonEmpty, EuiFormRow } from '@elastic/eui';
+import React, { FC, memo, useCallback, useState, useEffect } from 'react';
+import styled from 'styled-components';
+import deepEqual from 'fast-deep-equal';
+
+import { DEFAULT_INDEX_KEY } from '../../../../../common/constants';
+import { isMlRule } from '../../../../../common/machine_learning/helpers';
+import { hasMlAdminPermissions } from '../../../../../common/machine_learning/has_ml_admin_permissions';
+import { IIndexPattern } from '../../../../../../../../src/plugins/data/public';
+import { useFetchIndexPatterns } from '../../../../alerts/containers/detection_engine/rules';
+import { DEFAULT_TIMELINE_TITLE } from '../../../../timelines/components/timeline/translations';
+import { useMlCapabilities } from '../../../../common/components/ml_popover/hooks/use_ml_capabilities';
+import { useUiSetting$ } from '../../../../common/lib/kibana';
+import { setFieldValue } from '../../../pages/detection_engine/rules/helpers';
+import {
+  filterRuleFieldsForType,
+  RuleFields,
+} from '../../../pages/detection_engine/rules/create/helpers';
+import {
+  DefineStepRule,
+  RuleStep,
+  RuleStepProps,
+} from '../../../pages/detection_engine/rules/types';
+import { StepRuleDescription } from '../description_step';
+import { QueryBarDefineRule } from '../query_bar';
+import { SelectRuleType } from '../select_rule_type';
+import { AnomalyThresholdSlider } from '../anomaly_threshold_slider';
+import { MlJobSelect } from '../ml_job_select';
+import { PickTimeline } from '../pick_timeline';
+import { StepContentWrapper } from '../step_content_wrapper';
+import { NextStep } from '../next_step';
+import {
+  Field,
+  Form,
+  FormDataProvider,
+  getUseField,
+  UseField,
+  useForm,
+  FormSchema,
+} from '../../../../shared_imports';
+import { schema } from './schema';
+import * as i18n from './translations';
+
+const CommonUseField = getUseField({ component: Field });
+
+interface StepDefineRuleProps extends RuleStepProps {
+  defaultValues?: DefineStepRule | null;
+}
+
+const stepDefineDefaultValue: DefineStepRule = {
+  anomalyThreshold: 50,
+  index: [],
+  isNew: true,
+  machineLearningJobId: '',
+  ruleType: 'query',
+  queryBar: {
+    query: { query: '', language: 'kuery' },
+    filters: [],
+    saved_id: undefined,
+  },
+  timeline: {
+    id: null,
+    title: DEFAULT_TIMELINE_TITLE,
+  },
+};
+
+const MyLabelButton = styled(EuiButtonEmpty)`
+  height: 18px;
+  font-size: 12px;
+
+  .euiIcon {
+    width: 14px;
+    height: 14px;
+  }
+`;
+
+MyLabelButton.defaultProps = {
+  flush: 'right',
+};
+
+const StepDefineRuleComponent: FC<StepDefineRuleProps> = ({
+  addPadding = false,
+  defaultValues,
+  descriptionColumns = 'singleSplit',
+  isReadOnlyView,
+  isLoading,
+  isUpdateView = false,
+  setForm,
+  setStepData,
+}) => {
+  const mlCapabilities = useMlCapabilities();
+  const [openTimelineSearch, setOpenTimelineSearch] = useState(false);
+  const [indexModified, setIndexModified] = useState(false);
+  const [localIsMlRule, setIsMlRule] = useState(false);
+  const [indicesConfig] = useUiSetting$<string[]>(DEFAULT_INDEX_KEY);
+  const [myStepData, setMyStepData] = useState<DefineStepRule>({
+    ...stepDefineDefaultValue,
+    index: indicesConfig ?? [],
+  });
+  const [
+    { browserFields, indexPatterns: indexPatternQueryBar, isLoading: indexPatternLoadingQueryBar },
+  ] = useFetchIndexPatterns(myStepData.index);
+
+  const { form } = useForm({
+    defaultValue: myStepData,
+    options: { stripEmptyFields: false },
+    schema,
+  });
+  const clearErrors = useCallback(() => form.reset({ resetValues: false }), [form]);
+
+  const onSubmit = useCallback(async () => {
+    if (setStepData) {
+      setStepData(RuleStep.defineRule, null, false);
+      const { isValid, data } = await form.submit();
+      if (isValid && setStepData) {
+        setStepData(RuleStep.defineRule, data, isValid);
+        setMyStepData({ ...data, isNew: false } as DefineStepRule);
+      }
+    }
+  }, [form]);
+
+  useEffect(() => {
+    const { isNew, ...values } = myStepData;
+    if (defaultValues != null && !deepEqual(values, defaultValues)) {
+      const newValues = { ...values, ...defaultValues, isNew: false };
+      setMyStepData(newValues);
+      setFieldValue(form, schema, newValues);
+    }
+  }, [defaultValues, setMyStepData, setFieldValue]);
+
+  useEffect(() => {
+    if (setForm != null) {
+      setForm(RuleStep.defineRule, form);
+    }
+  }, [form]);
+
+  const handleResetIndices = useCallback(() => {
+    const indexField = form.getFields().index;
+    indexField.setValue(indicesConfig);
+  }, [form, indicesConfig]);
+
+  const handleOpenTimelineSearch = useCallback(() => {
+    setOpenTimelineSearch(true);
+  }, []);
+
+  const handleCloseTimelineSearch = useCallback(() => {
+    setOpenTimelineSearch(false);
+  }, []);
+
+  return isReadOnlyView ? (
+    <StepContentWrapper data-test-subj="definitionRule" addPadding={addPadding}>
+      <StepRuleDescription
+        columns={descriptionColumns}
+        indexPatterns={indexPatternQueryBar as IIndexPattern}
+        schema={filterRuleFieldsForType(schema as FormSchema & RuleFields, myStepData.ruleType)}
+        data={filterRuleFieldsForType(myStepData, myStepData.ruleType)}
+      />
+    </StepContentWrapper>
+  ) : (
+    <>
+      <StepContentWrapper addPadding={!isUpdateView}>
+        <Form form={form} data-test-subj="stepDefineRule">
+          <UseField
+            path="ruleType"
+            component={SelectRuleType}
+            componentProps={{
+              describedByIds: ['detectionEngineStepDefineRuleType'],
+              isReadOnly: isUpdateView,
+              hasValidLicense: mlCapabilities.isPlatinumOrTrialLicense,
+              isMlAdmin: hasMlAdminPermissions(mlCapabilities),
+            }}
+          />
+          <EuiFormRow fullWidth style={{ display: localIsMlRule ? 'none' : 'flex' }}>
+            <>
+              <CommonUseField
+                path="index"
+                config={{
+                  ...schema.index,
+                  labelAppend: indexModified ? (
+                    <MyLabelButton onClick={handleResetIndices} iconType="refresh">
+                      {i18n.RESET_DEFAULT_INDEX}
+                    </MyLabelButton>
+                  ) : null,
+                }}
+                componentProps={{
+                  idAria: 'detectionEngineStepDefineRuleIndices',
+                  'data-test-subj': 'detectionEngineStepDefineRuleIndices',
+                  euiFieldProps: {
+                    fullWidth: true,
+                    isDisabled: isLoading,
+                    placeholder: '',
+                  },
+                }}
+              />
+              <UseField
+                path="queryBar"
+                config={{
+                  ...schema.queryBar,
+                  labelAppend: (
+                    <MyLabelButton onClick={handleOpenTimelineSearch}>
+                      {i18n.IMPORT_TIMELINE_QUERY}
+                    </MyLabelButton>
+                  ),
+                }}
+                component={QueryBarDefineRule}
+                componentProps={{
+                  browserFields,
+                  idAria: 'detectionEngineStepDefineRuleQueryBar',
+                  indexPattern: indexPatternQueryBar,
+                  isDisabled: isLoading,
+                  isLoading: indexPatternLoadingQueryBar,
+                  dataTestSubj: 'detectionEngineStepDefineRuleQueryBar',
+                  openTimelineSearch,
+                  onCloseTimelineSearch: handleCloseTimelineSearch,
+                }}
+              />
+            </>
+          </EuiFormRow>
+          <EuiFormRow fullWidth style={{ display: localIsMlRule ? 'flex' : 'none' }}>
+            <>
+              <UseField
+                path="machineLearningJobId"
+                component={MlJobSelect}
+                componentProps={{
+                  describedByIds: ['detectionEngineStepDefineRulemachineLearningJobId'],
+                }}
+              />
+              <UseField
+                path="anomalyThreshold"
+                component={AnomalyThresholdSlider}
+                componentProps={{
+                  describedByIds: ['detectionEngineStepDefineRuleAnomalyThreshold'],
+                }}
+              />
+            </>
+          </EuiFormRow>
+          <UseField
+            path="timeline"
+            component={PickTimeline}
+            componentProps={{
+              idAria: 'detectionEngineStepDefineRuleTimeline',
+              isDisabled: isLoading,
+              dataTestSubj: 'detectionEngineStepDefineRuleTimeline',
+            }}
+          />
+          <FormDataProvider pathsToWatch={['index', 'ruleType']}>
+            {({ index, ruleType }) => {
+              if (index != null) {
+                if (deepEqual(index, indicesConfig) && indexModified) {
+                  setIndexModified(false);
+                } else if (!deepEqual(index, indicesConfig) && !indexModified) {
+                  setIndexModified(true);
+                }
+              }
+
+              if (isMlRule(ruleType) && !localIsMlRule) {
+                setIsMlRule(true);
+                clearErrors();
+              } else if (!isMlRule(ruleType) && localIsMlRule) {
+                setIsMlRule(false);
+                clearErrors();
+              }
+
+              return null;
+            }}
+          </FormDataProvider>
+        </Form>
+      </StepContentWrapper>
+
+      {!isUpdateView && (
+        <NextStep dataTestSubj="define-continue" onClick={onSubmit} isDisabled={isLoading} />
+      )}
+    </>
+  );
+};
+
+export const StepDefineRule = memo(StepDefineRuleComponent);
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/step_define_rule/schema.tsx b/x-pack/plugins/siem/public/alerts/components/rules/step_define_rule/schema.tsx
new file mode 100644
index 00000000000000..babfebb2c6ca7c
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/step_define_rule/schema.tsx
@@ -0,0 +1,176 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import { EuiText } from '@elastic/eui';
+import { isEmpty } from 'lodash/fp';
+import React from 'react';
+
+import { isMlRule } from '../../../../../common/machine_learning/helpers';
+import { esKuery } from '../../../../../../../../src/plugins/data/public';
+import { FieldValueQueryBar } from '../query_bar';
+import {
+  ERROR_CODE,
+  FIELD_TYPES,
+  fieldValidators,
+  FormSchema,
+  ValidationFunc,
+} from '../../../../shared_imports';
+import { CUSTOM_QUERY_REQUIRED, INVALID_CUSTOM_QUERY, INDEX_HELPER_TEXT } from './translations';
+
+export const schema: FormSchema = {
+  index: {
+    type: FIELD_TYPES.COMBO_BOX,
+    label: i18n.translate(
+      'xpack.siem.detectionEngine.createRule.stepAboutRule.fiedIndexPatternsLabel',
+      {
+        defaultMessage: 'Index patterns',
+      }
+    ),
+    helpText: <EuiText size="xs">{INDEX_HELPER_TEXT}</EuiText>,
+    validations: [
+      {
+        validator: (
+          ...args: Parameters<ValidationFunc>
+        ): ReturnType<ValidationFunc<{}, ERROR_CODE>> | undefined => {
+          const [{ formData }] = args;
+          const needsValidation = !isMlRule(formData.ruleType);
+
+          if (!needsValidation) {
+            return;
+          }
+
+          return fieldValidators.emptyField(
+            i18n.translate(
+              'xpack.siem.detectionEngine.createRule.stepDefineRule.outputIndiceNameFieldRequiredError',
+              {
+                defaultMessage: 'A minimum of one index pattern is required.',
+              }
+            )
+          )(...args);
+        },
+      },
+    ],
+  },
+  queryBar: {
+    label: i18n.translate(
+      'xpack.siem.detectionEngine.createRule.stepDefineRule.fieldQuerBarLabel',
+      {
+        defaultMessage: 'Custom query',
+      }
+    ),
+    validations: [
+      {
+        validator: (
+          ...args: Parameters<ValidationFunc>
+        ): ReturnType<ValidationFunc<{}, ERROR_CODE>> | undefined => {
+          const [{ value, path, formData }] = args;
+          const { query, filters } = value as FieldValueQueryBar;
+          const needsValidation = !isMlRule(formData.ruleType);
+          if (!needsValidation) {
+            return;
+          }
+
+          return isEmpty(query.query as string) && isEmpty(filters)
+            ? {
+                code: 'ERR_FIELD_MISSING',
+                path,
+                message: CUSTOM_QUERY_REQUIRED,
+              }
+            : undefined;
+        },
+      },
+      {
+        validator: (
+          ...args: Parameters<ValidationFunc>
+        ): ReturnType<ValidationFunc<{}, ERROR_CODE>> | undefined => {
+          const [{ value, path, formData }] = args;
+          const { query } = value as FieldValueQueryBar;
+          const needsValidation = !isMlRule(formData.ruleType);
+          if (!needsValidation) {
+            return;
+          }
+
+          if (!isEmpty(query.query as string) && query.language === 'kuery') {
+            try {
+              esKuery.fromKueryExpression(query.query);
+            } catch (err) {
+              return {
+                code: 'ERR_FIELD_FORMAT',
+                path,
+                message: INVALID_CUSTOM_QUERY,
+              };
+            }
+          }
+        },
+      },
+    ],
+  },
+  ruleType: {
+    label: i18n.translate(
+      'xpack.siem.detectionEngine.createRule.stepDefineRule.fieldRuleTypeLabel',
+      {
+        defaultMessage: 'Rule type',
+      }
+    ),
+    validations: [],
+  },
+  anomalyThreshold: {
+    label: i18n.translate(
+      'xpack.siem.detectionEngine.createRule.stepDefineRule.fieldAnomalyThresholdLabel',
+      {
+        defaultMessage: 'Anomaly score threshold',
+      }
+    ),
+    validations: [],
+  },
+  machineLearningJobId: {
+    label: i18n.translate(
+      'xpack.siem.detectionEngine.createRule.stepDefineRule.fieldMachineLearningJobIdLabel',
+      {
+        defaultMessage: 'Machine Learning job',
+      }
+    ),
+    validations: [
+      {
+        validator: (
+          ...args: Parameters<ValidationFunc>
+        ): ReturnType<ValidationFunc<{}, ERROR_CODE>> | undefined => {
+          const [{ formData }] = args;
+          const needsValidation = isMlRule(formData.ruleType);
+
+          if (!needsValidation) {
+            return;
+          }
+
+          return fieldValidators.emptyField(
+            i18n.translate(
+              'xpack.siem.detectionEngine.createRule.stepDefineRule.machineLearningJobIdRequired',
+              {
+                defaultMessage: 'A Machine Learning job is required.',
+              }
+            )
+          )(...args);
+        },
+      },
+    ],
+  },
+  timeline: {
+    label: i18n.translate(
+      'xpack.siem.detectionEngine.createRule.stepAboutRule.fieldTimelineTemplateLabel',
+      {
+        defaultMessage: 'Timeline template',
+      }
+    ),
+    helpText: i18n.translate(
+      'xpack.siem.detectionEngine.createRule.stepAboutRule.fieldTimelineTemplateHelpText',
+      {
+        defaultMessage:
+          'Select an existing timeline to use as a template when investigating generated signals.',
+      }
+    ),
+  },
+};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_define_rule/translations.tsx b/x-pack/plugins/siem/public/alerts/components/rules/step_define_rule/translations.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_define_rule/translations.tsx
rename to x-pack/plugins/siem/public/alerts/components/rules/step_define_rule/translations.tsx
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_define_rule/types.ts b/x-pack/plugins/siem/public/alerts/components/rules/step_define_rule/types.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_define_rule/types.ts
rename to x-pack/plugins/siem/public/alerts/components/rules/step_define_rule/types.ts
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_panel/index.test.tsx b/x-pack/plugins/siem/public/alerts/components/rules/step_panel/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_panel/index.test.tsx
rename to x-pack/plugins/siem/public/alerts/components/rules/step_panel/index.test.tsx
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/step_panel/index.tsx b/x-pack/plugins/siem/public/alerts/components/rules/step_panel/index.tsx
new file mode 100644
index 00000000000000..ef8cfc99a3b11f
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/step_panel/index.tsx
@@ -0,0 +1,33 @@
+/*
+ * 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 { EuiPanel, EuiProgress } from '@elastic/eui';
+import React, { memo } from 'react';
+import styled from 'styled-components';
+
+import { HeaderSection } from '../../../../common/components/header_section';
+
+interface StepPanelProps {
+  children: React.ReactNode;
+  loading: boolean;
+  title: string;
+}
+
+const MyPanel = styled(EuiPanel)`
+  position: relative;
+`;
+
+MyPanel.displayName = 'MyPanel';
+
+const StepPanelComponent: React.FC<StepPanelProps> = ({ children, loading, title }) => (
+  <MyPanel>
+    {loading && <EuiProgress size="xs" color="accent" position="absolute" />}
+    <HeaderSection title={title} />
+    {children}
+  </MyPanel>
+);
+
+export const StepPanel = memo(StepPanelComponent);
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/step_rule_actions/index.test.tsx b/x-pack/plugins/siem/public/alerts/components/rules/step_rule_actions/index.test.tsx
new file mode 100644
index 00000000000000..712aacd3e3e822
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/step_rule_actions/index.test.tsx
@@ -0,0 +1,22 @@
+/*
+ * 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 { StepRuleActions } from './index';
+
+jest.mock('../../../../common/lib/kibana');
+
+describe('StepRuleActions', () => {
+  it('renders correctly', () => {
+    const wrapper = shallow(
+      <StepRuleActions actionMessageParams={[]} isReadOnlyView={false} isLoading={false} />
+    );
+
+    expect(wrapper.find('[data-test-subj="stepRuleActions"]')).toHaveLength(1);
+  });
+});
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/step_rule_actions/index.tsx b/x-pack/plugins/siem/public/alerts/components/rules/step_rule_actions/index.tsx
new file mode 100644
index 00000000000000..2d22f0a3437f1c
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/step_rule_actions/index.tsx
@@ -0,0 +1,189 @@
+/*
+ * 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 { EuiHorizontalRule, EuiFlexGroup, EuiFlexItem, EuiButton, EuiSpacer } from '@elastic/eui';
+import React, { FC, memo, useCallback, useEffect, useMemo, useState } from 'react';
+import deepEqual from 'fast-deep-equal';
+
+import { setFieldValue } from '../../../pages/detection_engine/rules/helpers';
+import {
+  RuleStep,
+  RuleStepProps,
+  ActionsStepRule,
+} from '../../../pages/detection_engine/rules/types';
+import { StepRuleDescription } from '../description_step';
+import { Form, UseField, useForm } from '../../../../shared_imports';
+import { StepContentWrapper } from '../step_content_wrapper';
+import { ThrottleSelectField, THROTTLE_OPTIONS } from '../throttle_select_field';
+import { RuleActionsField } from '../rule_actions_field';
+import { useKibana } from '../../../../common/lib/kibana';
+import { schema } from './schema';
+import * as I18n from './translations';
+
+interface StepRuleActionsProps extends RuleStepProps {
+  defaultValues?: ActionsStepRule | null;
+  actionMessageParams: string[];
+}
+
+const stepActionsDefaultValue = {
+  enabled: true,
+  isNew: true,
+  actions: [],
+  kibanaSiemAppUrl: '',
+  throttle: THROTTLE_OPTIONS[0].value,
+};
+
+const GhostFormField = () => <></>;
+
+const StepRuleActionsComponent: FC<StepRuleActionsProps> = ({
+  addPadding = false,
+  defaultValues,
+  isReadOnlyView,
+  isLoading,
+  isUpdateView = false,
+  setStepData,
+  setForm,
+  actionMessageParams,
+}) => {
+  const [myStepData, setMyStepData] = useState<ActionsStepRule>(stepActionsDefaultValue);
+  const {
+    services: { application },
+  } = useKibana();
+
+  const { form } = useForm({
+    defaultValue: myStepData,
+    options: { stripEmptyFields: false },
+    schema,
+  });
+
+  const kibanaAbsoluteUrl = useMemo(() => application.getUrlForApp('siem', { absolute: true }), [
+    application,
+  ]);
+
+  const onSubmit = useCallback(
+    async (enabled: boolean) => {
+      if (setStepData) {
+        setStepData(RuleStep.ruleActions, null, false);
+        const { isValid: newIsValid, data } = await form.submit();
+        if (newIsValid) {
+          setStepData(RuleStep.ruleActions, { ...data, enabled }, newIsValid);
+          setMyStepData({ ...data, isNew: false } as ActionsStepRule);
+        }
+      }
+    },
+    [form]
+  );
+
+  useEffect(() => {
+    const { isNew, ...initDefaultValue } = myStepData;
+    if (defaultValues != null && !deepEqual(initDefaultValue, defaultValues)) {
+      const myDefaultValues = {
+        ...defaultValues,
+        isNew: false,
+      };
+      setMyStepData(myDefaultValues);
+      setFieldValue(form, schema, myDefaultValues);
+    }
+  }, [defaultValues]);
+
+  useEffect(() => {
+    if (setForm != null) {
+      setForm(RuleStep.ruleActions, form);
+    }
+  }, [form]);
+
+  const updateThrottle = useCallback(throttle => setMyStepData({ ...myStepData, throttle }), [
+    myStepData,
+    setMyStepData,
+  ]);
+
+  const throttleFieldComponentProps = useMemo(
+    () => ({
+      idAria: 'detectionEngineStepRuleActionsThrottle',
+      isDisabled: isLoading,
+      dataTestSubj: 'detectionEngineStepRuleActionsThrottle',
+      hasNoInitialSelection: false,
+      handleChange: updateThrottle,
+      euiFieldProps: {
+        options: THROTTLE_OPTIONS,
+      },
+    }),
+    [isLoading, updateThrottle]
+  );
+
+  return isReadOnlyView && myStepData != null ? (
+    <StepContentWrapper addPadding={addPadding}>
+      <StepRuleDescription schema={schema} data={myStepData} />
+    </StepContentWrapper>
+  ) : (
+    <>
+      <StepContentWrapper addPadding={!isUpdateView}>
+        <Form form={form} data-test-subj="stepRuleActions">
+          <UseField
+            path="throttle"
+            component={ThrottleSelectField}
+            componentProps={throttleFieldComponentProps}
+          />
+          {myStepData.throttle !== stepActionsDefaultValue.throttle && (
+            <>
+              <EuiSpacer />
+              <UseField
+                path="actions"
+                defaultValue={myStepData.actions}
+                component={RuleActionsField}
+                componentProps={{
+                  messageVariables: actionMessageParams,
+                }}
+              />
+              <UseField
+                path="kibanaSiemAppUrl"
+                defaultValue={kibanaAbsoluteUrl}
+                component={GhostFormField}
+              />
+            </>
+          )}
+          <UseField path="enabled" defaultValue={myStepData.enabled} component={GhostFormField} />
+        </Form>
+      </StepContentWrapper>
+
+      {!isUpdateView && (
+        <>
+          <EuiHorizontalRule margin="m" />
+          <EuiFlexGroup
+            alignItems="center"
+            justifyContent="flexEnd"
+            gutterSize="xs"
+            responsive={false}
+          >
+            <EuiFlexItem grow={false}>
+              <EuiButton
+                fill={false}
+                isDisabled={isLoading}
+                isLoading={isLoading}
+                onClick={onSubmit.bind(null, false)}
+              >
+                {I18n.COMPLETE_WITHOUT_ACTIVATING}
+              </EuiButton>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButton
+                fill
+                isDisabled={isLoading}
+                isLoading={isLoading}
+                onClick={onSubmit.bind(null, true)}
+                data-test-subj="create-activate"
+              >
+                {I18n.COMPLETE_WITH_ACTIVATING}
+              </EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </>
+      )}
+    </>
+  );
+};
+
+export const StepRuleActions = memo(StepRuleActionsComponent);
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/step_rule_actions/schema.tsx b/x-pack/plugins/siem/public/alerts/components/rules/step_rule_actions/schema.tsx
new file mode 100644
index 00000000000000..a978e038985f64
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/step_rule_actions/schema.tsx
@@ -0,0 +1,32 @@
+/*
+ * 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.
+ */
+
+/* istanbul ignore file */
+
+import { i18n } from '@kbn/i18n';
+
+import { FormSchema } from '../../../../shared_imports';
+
+export const schema: FormSchema = {
+  actions: {},
+  enabled: {},
+  kibanaSiemAppUrl: {},
+  throttle: {
+    label: i18n.translate(
+      'xpack.siem.detectionEngine.createRule.stepRuleActions.fieldThrottleLabel',
+      {
+        defaultMessage: 'Actions frequency',
+      }
+    ),
+    helpText: i18n.translate(
+      'xpack.siem.detectionEngine.createRule.stepRuleActions.fieldThrottleHelpText',
+      {
+        defaultMessage:
+          'Select when automated actions should be performed if a rule evaluates as true.',
+      }
+    ),
+  },
+};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_rule_actions/translations.tsx b/x-pack/plugins/siem/public/alerts/components/rules/step_rule_actions/translations.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_rule_actions/translations.tsx
rename to x-pack/plugins/siem/public/alerts/components/rules/step_rule_actions/translations.tsx
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/step_schedule_rule/index.test.tsx b/x-pack/plugins/siem/public/alerts/components/rules/step_schedule_rule/index.test.tsx
new file mode 100644
index 00000000000000..6f5eddfe051a13
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/step_schedule_rule/index.test.tsx
@@ -0,0 +1,27 @@
+/*
+ * 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, mount } from 'enzyme';
+
+import { TestProviders } from '../../../../common/mock';
+import { StepScheduleRule } from './index';
+
+describe('StepScheduleRule', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(<StepScheduleRule isReadOnlyView={false} isLoading={false} />, {
+      wrappingComponent: TestProviders,
+    });
+
+    expect(wrapper.find('Form[data-test-subj="stepScheduleRule"]')).toHaveLength(1);
+  });
+
+  it('renders correctly if isReadOnlyView', () => {
+    const wrapper = shallow(<StepScheduleRule isReadOnlyView={true} isLoading={false} />);
+
+    expect(wrapper.find('StepContentWrapper')).toHaveLength(1);
+  });
+});
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/step_schedule_rule/index.tsx b/x-pack/plugins/siem/public/alerts/components/rules/step_schedule_rule/index.tsx
new file mode 100644
index 00000000000000..fa49637a0c830d
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/step_schedule_rule/index.tsx
@@ -0,0 +1,126 @@
+/*
+ * 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, { FC, memo, useCallback, useEffect, useState } from 'react';
+import deepEqual from 'fast-deep-equal';
+import styled from 'styled-components';
+
+import { setFieldValue } from '../../../pages/detection_engine/rules/helpers';
+import {
+  RuleStep,
+  RuleStepProps,
+  ScheduleStepRule,
+} from '../../../pages/detection_engine/rules/types';
+import { StepRuleDescription } from '../description_step';
+import { ScheduleItem } from '../schedule_item_form';
+import { Form, UseField, useForm } from '../../../../shared_imports';
+import { StepContentWrapper } from '../step_content_wrapper';
+import { NextStep } from '../next_step';
+import { schema } from './schema';
+
+interface StepScheduleRuleProps extends RuleStepProps {
+  defaultValues?: ScheduleStepRule | null;
+}
+
+const RestrictedWidthContainer = styled.div`
+  max-width: 300px;
+`;
+
+const stepScheduleDefaultValue = {
+  interval: '5m',
+  isNew: true,
+  from: '1m',
+};
+
+const StepScheduleRuleComponent: FC<StepScheduleRuleProps> = ({
+  addPadding = false,
+  defaultValues,
+  descriptionColumns = 'singleSplit',
+  isReadOnlyView,
+  isLoading,
+  isUpdateView = false,
+  setStepData,
+  setForm,
+}) => {
+  const [myStepData, setMyStepData] = useState<ScheduleStepRule>(stepScheduleDefaultValue);
+
+  const { form } = useForm({
+    defaultValue: myStepData,
+    options: { stripEmptyFields: false },
+    schema,
+  });
+
+  const onSubmit = useCallback(async () => {
+    if (setStepData) {
+      setStepData(RuleStep.scheduleRule, null, false);
+      const { isValid: newIsValid, data } = await form.submit();
+      if (newIsValid) {
+        setStepData(RuleStep.scheduleRule, { ...data }, newIsValid);
+        setMyStepData({ ...data, isNew: false } as ScheduleStepRule);
+      }
+    }
+  }, [form]);
+
+  useEffect(() => {
+    const { isNew, ...initDefaultValue } = myStepData;
+    if (defaultValues != null && !deepEqual(initDefaultValue, defaultValues)) {
+      const myDefaultValues = {
+        ...defaultValues,
+        isNew: false,
+      };
+      setMyStepData(myDefaultValues);
+      setFieldValue(form, schema, myDefaultValues);
+    }
+  }, [defaultValues]);
+
+  useEffect(() => {
+    if (setForm != null) {
+      setForm(RuleStep.scheduleRule, form);
+    }
+  }, [form]);
+
+  return isReadOnlyView && myStepData != null ? (
+    <StepContentWrapper addPadding={addPadding}>
+      <StepRuleDescription columns={descriptionColumns} schema={schema} data={myStepData} />
+    </StepContentWrapper>
+  ) : (
+    <>
+      <StepContentWrapper addPadding={!isUpdateView}>
+        <Form form={form} data-test-subj="stepScheduleRule">
+          <RestrictedWidthContainer>
+            <UseField
+              path="interval"
+              component={ScheduleItem}
+              componentProps={{
+                idAria: 'detectionEngineStepScheduleRuleInterval',
+                isDisabled: isLoading,
+                dataTestSubj: 'detectionEngineStepScheduleRuleInterval',
+              }}
+            />
+          </RestrictedWidthContainer>
+          <RestrictedWidthContainer>
+            <UseField
+              path="from"
+              component={ScheduleItem}
+              componentProps={{
+                idAria: 'detectionEngineStepScheduleRuleFrom',
+                isDisabled: isLoading,
+                dataTestSubj: 'detectionEngineStepScheduleRuleFrom',
+                minimumValue: 1,
+              }}
+            />
+          </RestrictedWidthContainer>
+        </Form>
+      </StepContentWrapper>
+
+      {!isUpdateView && (
+        <NextStep dataTestSubj="schedule-continue" onClick={onSubmit} isDisabled={isLoading} />
+      )}
+    </>
+  );
+};
+
+export const StepScheduleRule = memo(StepScheduleRuleComponent);
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/step_schedule_rule/schema.tsx b/x-pack/plugins/siem/public/alerts/components/rules/step_schedule_rule/schema.tsx
new file mode 100644
index 00000000000000..99ff8a67273727
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/step_schedule_rule/schema.tsx
@@ -0,0 +1,45 @@
+/*
+ * 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.
+ */
+
+/* istanbul ignore file */
+
+import { i18n } from '@kbn/i18n';
+
+import { OptionalFieldLabel } from '../optional_field_label';
+import { FormSchema } from '../../../../shared_imports';
+
+export const schema: FormSchema = {
+  interval: {
+    label: i18n.translate(
+      'xpack.siem.detectionEngine.createRule.stepScheduleRule.fieldIntervalLabel',
+      {
+        defaultMessage: 'Runs every',
+      }
+    ),
+    helpText: i18n.translate(
+      'xpack.siem.detectionEngine.createRule.stepScheduleRule.fieldIntervalHelpText',
+      {
+        defaultMessage:
+          'Rules run periodically and detect signals within the specified time frame.',
+      }
+    ),
+  },
+  from: {
+    label: i18n.translate(
+      'xpack.siem.detectionEngine.createRule.stepScheduleRule.fieldAdditionalLookBackLabel',
+      {
+        defaultMessage: 'Additional look-back time',
+      }
+    ),
+    labelAppend: OptionalFieldLabel,
+    helpText: i18n.translate(
+      'xpack.siem.detectionEngine.createRule.stepScheduleRule.fieldAdditionalLookBackHelpText',
+      {
+        defaultMessage: 'Adds time to the look-back period to prevent missed signals.',
+      }
+    ),
+  },
+};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_schedule_rule/translations.tsx b/x-pack/plugins/siem/public/alerts/components/rules/step_schedule_rule/translations.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_schedule_rule/translations.tsx
rename to x-pack/plugins/siem/public/alerts/components/rules/step_schedule_rule/translations.tsx
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/throttle_select_field/index.test.tsx b/x-pack/plugins/siem/public/alerts/components/rules/throttle_select_field/index.test.tsx
new file mode 100644
index 00000000000000..2a13c40a0dd170
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/throttle_select_field/index.test.tsx
@@ -0,0 +1,24 @@
+/*
+ * 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 { ThrottleSelectField } from './index';
+import { useFormFieldMock } from '../../../../common/mock';
+
+describe('ThrottleSelectField', () => {
+  it('renders correctly', () => {
+    const Component = () => {
+      const field = useFormFieldMock();
+
+      return <ThrottleSelectField field={field} euiFieldProps={{ options: [] }} />;
+    };
+    const wrapper = shallow(<Component />);
+
+    expect(wrapper.dive().find('SelectField')).toHaveLength(1);
+  });
+});
diff --git a/x-pack/plugins/siem/public/alerts/components/rules/throttle_select_field/index.tsx b/x-pack/plugins/siem/public/alerts/components/rules/throttle_select_field/index.tsx
new file mode 100644
index 00000000000000..281c45b19ece58
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/rules/throttle_select_field/index.tsx
@@ -0,0 +1,36 @@
+/*
+ * 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, { useCallback } from 'react';
+
+import {
+  NOTIFICATION_THROTTLE_RULE,
+  NOTIFICATION_THROTTLE_NO_ACTIONS,
+} from '../../../../../common/constants';
+import { SelectField } from '../../../../shared_imports';
+
+export const THROTTLE_OPTIONS = [
+  { value: NOTIFICATION_THROTTLE_NO_ACTIONS, text: 'Perform no actions' },
+  { value: NOTIFICATION_THROTTLE_RULE, text: 'On each rule execution' },
+  { value: '1h', text: 'Hourly' },
+  { value: '1d', text: 'Daily' },
+  { value: '7d', text: 'Weekly' },
+];
+
+type ThrottleSelectField = typeof SelectField;
+
+export const ThrottleSelectField: ThrottleSelectField = props => {
+  const onChange = useCallback(
+    e => {
+      const throttle = e.target.value;
+      props.field.setValue(throttle);
+      props.handleChange(throttle);
+    },
+    [props.field.setValue, props.handleChange]
+  );
+  const newEuiFieldProps = { ...props.euiFieldProps, onChange };
+  return <SelectField {...props} euiFieldProps={newEuiFieldProps} />;
+};
diff --git a/x-pack/plugins/siem/public/alerts/components/signals/actions.test.tsx b/x-pack/plugins/siem/public/alerts/components/signals/actions.test.tsx
new file mode 100644
index 00000000000000..d3be87ce7c39cc
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/signals/actions.test.tsx
@@ -0,0 +1,384 @@
+/*
+ * 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 sinon from 'sinon';
+import moment from 'moment';
+
+import { sendSignalToTimelineAction, determineToAndFrom } from './actions';
+import {
+  mockEcsDataWithSignal,
+  defaultTimelineProps,
+  apolloClient,
+  mockTimelineApolloResult,
+} from '../../../common/mock/';
+import { CreateTimeline, UpdateTimelineLoading } from './types';
+import { Ecs } from '../../../graphql/types';
+import { TimelineType } from '../../../../common/types/timeline';
+
+jest.mock('apollo-client');
+
+describe('signals actions', () => {
+  const anchor = '2020-03-01T17:59:46.349Z';
+  const unix = moment(anchor).valueOf();
+  let createTimeline: CreateTimeline;
+  let updateTimelineIsLoading: UpdateTimelineLoading;
+  let clock: sinon.SinonFakeTimers;
+
+  beforeEach(() => {
+    // jest carries state between mocked implementations when using
+    // spyOn. So now we're doing all three of these.
+    // https://github.com/facebook/jest/issues/7136#issuecomment-565976599
+    jest.resetAllMocks();
+    jest.restoreAllMocks();
+    jest.clearAllMocks();
+
+    createTimeline = jest.fn() as jest.Mocked<CreateTimeline>;
+    updateTimelineIsLoading = jest.fn() as jest.Mocked<UpdateTimelineLoading>;
+
+    jest.spyOn(apolloClient, 'query').mockResolvedValue(mockTimelineApolloResult);
+
+    clock = sinon.useFakeTimers(unix);
+  });
+
+  afterEach(() => {
+    clock.restore();
+  });
+
+  describe('sendSignalToTimelineAction', () => {
+    describe('timeline id is NOT empty string and apollo client exists', () => {
+      test('it invokes updateTimelineIsLoading to set to true', async () => {
+        await sendSignalToTimelineAction({
+          apolloClient,
+          createTimeline,
+          ecsData: mockEcsDataWithSignal,
+          updateTimelineIsLoading,
+        });
+
+        expect(updateTimelineIsLoading).toHaveBeenCalledTimes(1);
+        expect(updateTimelineIsLoading).toHaveBeenCalledWith({ id: 'timeline-1', isLoading: true });
+      });
+
+      test('it invokes createTimeline with designated timeline template if "timelineTemplate" exists', async () => {
+        await sendSignalToTimelineAction({
+          apolloClient,
+          createTimeline,
+          ecsData: mockEcsDataWithSignal,
+          updateTimelineIsLoading,
+        });
+        const expected = {
+          from: 1541444305937,
+          timeline: {
+            columns: [
+              {
+                aggregatable: undefined,
+                category: undefined,
+                columnHeaderType: 'not-filtered',
+                description: undefined,
+                example: undefined,
+                id: '@timestamp',
+                placeholder: undefined,
+                type: undefined,
+                width: 190,
+              },
+              {
+                aggregatable: undefined,
+                category: undefined,
+                columnHeaderType: 'not-filtered',
+                description: undefined,
+                example: undefined,
+                id: 'message',
+                placeholder: undefined,
+                type: undefined,
+                width: 180,
+              },
+              {
+                aggregatable: undefined,
+                category: undefined,
+                columnHeaderType: 'not-filtered',
+                description: undefined,
+                example: undefined,
+                id: 'event.category',
+                placeholder: undefined,
+                type: undefined,
+                width: 180,
+              },
+              {
+                aggregatable: undefined,
+                category: undefined,
+                columnHeaderType: 'not-filtered',
+                description: undefined,
+                example: undefined,
+                id: 'host.name',
+                placeholder: undefined,
+                type: undefined,
+                width: 180,
+              },
+              {
+                aggregatable: undefined,
+                category: undefined,
+                columnHeaderType: 'not-filtered',
+                description: undefined,
+                example: undefined,
+                id: 'source.ip',
+                placeholder: undefined,
+                type: undefined,
+                width: 180,
+              },
+              {
+                aggregatable: undefined,
+                category: undefined,
+                columnHeaderType: 'not-filtered',
+                description: undefined,
+                example: undefined,
+                id: 'destination.ip',
+                placeholder: undefined,
+                type: undefined,
+                width: 180,
+              },
+              {
+                aggregatable: undefined,
+                category: undefined,
+                columnHeaderType: 'not-filtered',
+                description: undefined,
+                example: undefined,
+                id: 'user.name',
+                placeholder: undefined,
+                type: undefined,
+                width: 180,
+              },
+            ],
+            dataProviders: [],
+            dateRange: {
+              end: 1541444605937,
+              start: 1541444305937,
+            },
+            deletedEventIds: [],
+            description: 'This is a sample rule description',
+            eventIdToNoteIds: {},
+            eventType: 'all',
+            filters: [
+              {
+                $state: {
+                  store: 'appState',
+                },
+                meta: {
+                  key: 'host.name',
+                  negate: false,
+                  params: {
+                    query: 'apache',
+                  },
+                  type: 'phrase',
+                },
+                query: {
+                  match_phrase: {
+                    'host.name': 'apache',
+                  },
+                },
+              },
+            ],
+            highlightedDropAndProviderId: '',
+            historyIds: [],
+            id: '',
+            isFavorite: false,
+            isLive: false,
+            isLoading: false,
+            isSaving: false,
+            isSelectAllChecked: false,
+            itemsPerPage: 25,
+            itemsPerPageOptions: [10, 25, 50, 100],
+            kqlMode: 'filter',
+            kqlQuery: {
+              filterQuery: {
+                kuery: {
+                  expression: '',
+                  kind: 'kuery',
+                },
+                serializedQuery: '',
+              },
+              filterQueryDraft: {
+                expression: '',
+                kind: 'kuery',
+              },
+            },
+            loadingEventIds: [],
+            noteIds: [],
+            pinnedEventIds: {},
+            pinnedEventsSaveObject: {},
+            savedObjectId: null,
+            selectedEventIds: {},
+            show: true,
+            showCheckboxes: false,
+            showRowRenderers: true,
+            sort: {
+              columnId: '@timestamp',
+              sortDirection: 'desc',
+            },
+            title: '',
+            timelineType: TimelineType.default,
+            templateTimelineId: null,
+            templateTimelineVersion: null,
+            version: null,
+            width: 1100,
+          },
+          to: 1541444605937,
+          ruleNote: '# this is some markdown documentation',
+        };
+
+        expect(createTimeline).toHaveBeenCalledWith(expected);
+      });
+
+      test('it invokes createTimeline with kqlQuery.filterQuery.kuery.kind as "kuery" if not specified in returned timeline template', async () => {
+        const mockTimelineApolloResultModified = {
+          ...mockTimelineApolloResult,
+          kqlQuery: {
+            filterQuery: {
+              kuery: {
+                expression: [''],
+              },
+            },
+            filterQueryDraft: {
+              expression: [''],
+            },
+          },
+        };
+        jest.spyOn(apolloClient, 'query').mockResolvedValue(mockTimelineApolloResultModified);
+
+        await sendSignalToTimelineAction({
+          apolloClient,
+          createTimeline,
+          ecsData: mockEcsDataWithSignal,
+          updateTimelineIsLoading,
+        });
+        // @ts-ignore
+        const createTimelineArg = createTimeline.mock.calls[0][0];
+
+        expect(createTimeline).toHaveBeenCalledTimes(1);
+        expect(createTimelineArg.timeline.kqlQuery.filterQuery.kuery.kind).toEqual('kuery');
+      });
+
+      test('it invokes createTimeline with kqlQuery.filterQueryDraft.kuery.kind as "kuery" if not specified in returned timeline template', async () => {
+        const mockTimelineApolloResultModified = {
+          ...mockTimelineApolloResult,
+          kqlQuery: {
+            filterQuery: {
+              kuery: {
+                expression: [''],
+              },
+            },
+            filterQueryDraft: {
+              expression: [''],
+            },
+          },
+        };
+        jest.spyOn(apolloClient, 'query').mockResolvedValue(mockTimelineApolloResultModified);
+
+        await sendSignalToTimelineAction({
+          apolloClient,
+          createTimeline,
+          ecsData: mockEcsDataWithSignal,
+          updateTimelineIsLoading,
+        });
+        // @ts-ignore
+        const createTimelineArg = createTimeline.mock.calls[0][0];
+
+        expect(createTimeline).toHaveBeenCalledTimes(1);
+        expect(createTimelineArg.timeline.kqlQuery.filterQueryDraft.kind).toEqual('kuery');
+      });
+
+      test('it invokes createTimeline with default timeline if apolloClient throws', async () => {
+        jest.spyOn(apolloClient, 'query').mockImplementation(() => {
+          throw new Error('Test error');
+        });
+
+        await sendSignalToTimelineAction({
+          apolloClient,
+          createTimeline,
+          ecsData: mockEcsDataWithSignal,
+          updateTimelineIsLoading,
+        });
+
+        expect(updateTimelineIsLoading).toHaveBeenCalledWith({ id: 'timeline-1', isLoading: true });
+        expect(updateTimelineIsLoading).toHaveBeenCalledWith({
+          id: 'timeline-1',
+          isLoading: false,
+        });
+        expect(createTimeline).toHaveBeenCalledTimes(1);
+        expect(createTimeline).toHaveBeenCalledWith(defaultTimelineProps);
+      });
+    });
+
+    describe('timelineId is empty string', () => {
+      test('it invokes createTimeline with timelineDefaults', async () => {
+        const ecsDataMock: Ecs = {
+          ...mockEcsDataWithSignal,
+          signal: {
+            rule: {
+              ...mockEcsDataWithSignal.signal?.rule!,
+              timeline_id: null,
+            },
+          },
+        };
+
+        await sendSignalToTimelineAction({
+          apolloClient,
+          createTimeline,
+          ecsData: ecsDataMock,
+          updateTimelineIsLoading,
+        });
+
+        expect(updateTimelineIsLoading).not.toHaveBeenCalled();
+        expect(createTimeline).toHaveBeenCalledTimes(1);
+        expect(createTimeline).toHaveBeenCalledWith(defaultTimelineProps);
+      });
+    });
+
+    describe('apolloClient is not defined', () => {
+      test('it invokes createTimeline with timelineDefaults', async () => {
+        const ecsDataMock: Ecs = {
+          ...mockEcsDataWithSignal,
+          signal: {
+            rule: {
+              ...mockEcsDataWithSignal.signal?.rule!,
+              timeline_id: [''],
+            },
+          },
+        };
+
+        await sendSignalToTimelineAction({
+          createTimeline,
+          ecsData: ecsDataMock,
+          updateTimelineIsLoading,
+        });
+
+        expect(updateTimelineIsLoading).not.toHaveBeenCalled();
+        expect(createTimeline).toHaveBeenCalledTimes(1);
+        expect(createTimeline).toHaveBeenCalledWith(defaultTimelineProps);
+      });
+    });
+  });
+
+  describe('determineToAndFrom', () => {
+    test('it uses ecs.Data.timestamp if one is provided', () => {
+      const ecsDataMock: Ecs = {
+        ...mockEcsDataWithSignal,
+        timestamp: '2020-03-20T17:59:46.349Z',
+      };
+      const result = determineToAndFrom({ ecsData: ecsDataMock });
+
+      expect(result.from).toEqual(1584726886349);
+      expect(result.to).toEqual(1584727186349);
+    });
+
+    test('it uses current time timestamp if ecsData.timestamp is not provided', () => {
+      const { timestamp, ...ecsDataMock } = {
+        ...mockEcsDataWithSignal,
+      };
+      const result = determineToAndFrom({ ecsData: ecsDataMock });
+
+      expect(result.from).toEqual(1583085286349);
+      expect(result.to).toEqual(1583085586349);
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/alerts/components/signals/actions.tsx b/x-pack/plugins/siem/public/alerts/components/signals/actions.tsx
new file mode 100644
index 00000000000000..044633da62f610
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/signals/actions.tsx
@@ -0,0 +1,210 @@
+/*
+ * 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 dateMath from '@elastic/datemath';
+import { getOr, isEmpty } from 'lodash/fp';
+import moment from 'moment';
+
+import { updateSignalStatus } from '../../containers/detection_engine/signals/api';
+import { SendSignalToTimelineActionProps, UpdateSignalStatusActionProps } from './types';
+import { TimelineNonEcsData, GetOneTimeline, TimelineResult, Ecs } from '../../../graphql/types';
+import { oneTimelineQuery } from '../../../timelines/containers/one/index.gql_query';
+import { timelineDefaults } from '../../../timelines/store/timeline/defaults';
+import {
+  omitTypenameInTimeline,
+  formatTimelineResultToModel,
+} from '../../../timelines/components/open_timeline/helpers';
+import { convertKueryToElasticSearchQuery } from '../../../common/lib/keury';
+import {
+  replaceTemplateFieldFromQuery,
+  replaceTemplateFieldFromMatchFilters,
+  replaceTemplateFieldFromDataProviders,
+} from './helpers';
+
+export const getUpdateSignalsQuery = (eventIds: Readonly<string[]>) => {
+  return {
+    query: {
+      bool: {
+        filter: {
+          terms: {
+            _id: [...eventIds],
+          },
+        },
+      },
+    },
+  };
+};
+
+export const getFilterAndRuleBounds = (
+  data: TimelineNonEcsData[][]
+): [string[], number, number] => {
+  const stringFilter = data?.[0].filter(d => d.field === 'signal.rule.filters')?.[0]?.value ?? [];
+
+  const eventTimes = data
+    .flatMap(signal => signal.filter(d => d.field === 'signal.original_time')?.[0]?.value ?? [])
+    .map(d => moment(d));
+
+  return [stringFilter, moment.min(eventTimes).valueOf(), moment.max(eventTimes).valueOf()];
+};
+
+export const updateSignalStatusAction = async ({
+  query,
+  signalIds,
+  status,
+  setEventsLoading,
+  setEventsDeleted,
+}: UpdateSignalStatusActionProps) => {
+  try {
+    setEventsLoading({ eventIds: signalIds, isLoading: true });
+
+    const queryObject = query ? { query: JSON.parse(query) } : getUpdateSignalsQuery(signalIds);
+
+    await updateSignalStatus({ query: queryObject, status });
+    // TODO: Only delete those that were successfully updated from updatedRules
+    setEventsDeleted({ eventIds: signalIds, isDeleted: true });
+  } catch (e) {
+    // TODO: Show error toasts
+  } finally {
+    setEventsLoading({ eventIds: signalIds, isLoading: false });
+  }
+};
+
+export const determineToAndFrom = ({ ecsData }: { ecsData: Ecs }) => {
+  const ellapsedTimeRule = moment.duration(
+    moment().diff(
+      dateMath.parse(ecsData.signal?.rule?.from != null ? ecsData.signal?.rule?.from[0] : 'now-0s')
+    )
+  );
+
+  const from = moment(ecsData.timestamp ?? new Date())
+    .subtract(ellapsedTimeRule)
+    .valueOf();
+  const to = moment(ecsData.timestamp ?? new Date()).valueOf();
+
+  return { to, from };
+};
+
+export const sendSignalToTimelineAction = async ({
+  apolloClient,
+  createTimeline,
+  ecsData,
+  updateTimelineIsLoading,
+}: SendSignalToTimelineActionProps) => {
+  let openSignalInBasicTimeline = true;
+  const noteContent = ecsData.signal?.rule?.note != null ? ecsData.signal?.rule?.note[0] : '';
+  const timelineId =
+    ecsData.signal?.rule?.timeline_id != null ? ecsData.signal?.rule?.timeline_id[0] : '';
+  const { to, from } = determineToAndFrom({ ecsData });
+
+  if (timelineId !== '' && apolloClient != null) {
+    try {
+      updateTimelineIsLoading({ id: 'timeline-1', isLoading: true });
+      const responseTimeline = await apolloClient.query<
+        GetOneTimeline.Query,
+        GetOneTimeline.Variables
+      >({
+        query: oneTimelineQuery,
+        fetchPolicy: 'no-cache',
+        variables: {
+          id: timelineId,
+        },
+      });
+      const resultingTimeline: TimelineResult = getOr({}, 'data.getOneTimeline', responseTimeline);
+
+      if (!isEmpty(resultingTimeline)) {
+        const timelineTemplate: TimelineResult = omitTypenameInTimeline(resultingTimeline);
+        openSignalInBasicTimeline = false;
+        const { timeline } = formatTimelineResultToModel(timelineTemplate, true);
+        const query = replaceTemplateFieldFromQuery(
+          timeline.kqlQuery?.filterQuery?.kuery?.expression ?? '',
+          ecsData
+        );
+        const filters = replaceTemplateFieldFromMatchFilters(timeline.filters ?? [], ecsData);
+        const dataProviders = replaceTemplateFieldFromDataProviders(
+          timeline.dataProviders ?? [],
+          ecsData
+        );
+        createTimeline({
+          from,
+          timeline: {
+            ...timeline,
+            dataProviders,
+            eventType: 'all',
+            filters,
+            dateRange: {
+              start: from,
+              end: to,
+            },
+            kqlQuery: {
+              filterQuery: {
+                kuery: {
+                  kind: timeline.kqlQuery?.filterQuery?.kuery?.kind ?? 'kuery',
+                  expression: query,
+                },
+                serializedQuery: convertKueryToElasticSearchQuery(query),
+              },
+              filterQueryDraft: {
+                kind: timeline.kqlQuery?.filterQuery?.kuery?.kind ?? 'kuery',
+                expression: query,
+              },
+            },
+            show: true,
+          },
+          to,
+          ruleNote: noteContent,
+        });
+      }
+    } catch {
+      openSignalInBasicTimeline = true;
+      updateTimelineIsLoading({ id: 'timeline-1', isLoading: false });
+    }
+  }
+
+  if (openSignalInBasicTimeline) {
+    createTimeline({
+      from,
+      timeline: {
+        ...timelineDefaults,
+        dataProviders: [
+          {
+            and: [],
+            id: `send-signal-to-timeline-action-default-draggable-event-details-value-formatted-field-value-timeline-1-signal-id-${ecsData._id}`,
+            name: ecsData._id,
+            enabled: true,
+            excluded: false,
+            kqlQuery: '',
+            queryMatch: {
+              field: '_id',
+              value: ecsData._id,
+              operator: ':',
+            },
+          },
+        ],
+        id: 'timeline-1',
+        dateRange: {
+          start: from,
+          end: to,
+        },
+        eventType: 'all',
+        kqlQuery: {
+          filterQuery: {
+            kuery: {
+              kind: 'kuery',
+              expression: '',
+            },
+            serializedQuery: '',
+          },
+          filterQueryDraft: {
+            kind: 'kuery',
+            expression: '',
+          },
+        },
+      },
+      to,
+      ruleNote: noteContent,
+    });
+  }
+};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/signals/default_config.test.tsx b/x-pack/plugins/siem/public/alerts/components/signals/default_config.test.tsx
similarity index 96%
rename from x-pack/plugins/siem/public/pages/detection_engine/components/signals/default_config.test.tsx
rename to x-pack/plugins/siem/public/alerts/components/signals/default_config.test.tsx
index 5428b9932fbde7..71da68108da7ee 100644
--- a/x-pack/plugins/siem/public/pages/detection_engine/components/signals/default_config.test.tsx
+++ b/x-pack/plugins/siem/public/alerts/components/signals/default_config.test.tsx
@@ -7,8 +7,8 @@ import React from 'react';
 import { mount, ReactWrapper } from 'enzyme';
 import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
 
-import { Filter } from '../../../../../../../../src/plugins/data/common/es_query';
-import { TimelineAction } from '../../../../components/timeline/body/actions';
+import { Filter } from '../../../../../../../src/plugins/data/common/es_query';
+import { TimelineAction } from '../../../timelines/components/timeline/body/actions';
 import { buildSignalsRuleIdFilter, getSignalsActions } from './default_config';
 import {
   CreateTimeline,
@@ -16,7 +16,7 @@ import {
   SetEventsLoadingProps,
   UpdateTimelineLoading,
 } from './types';
-import { mockEcsDataWithSignal } from '../../../../mock/mock_ecs';
+import { mockEcsDataWithSignal } from '../../../common/mock/mock_ecs';
 import { sendSignalToTimelineAction, updateSignalStatusAction } from './actions';
 import * as i18n from './translations';
 
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/signals/default_config.tsx b/x-pack/plugins/siem/public/alerts/components/signals/default_config.tsx
similarity index 92%
rename from x-pack/plugins/siem/public/pages/detection_engine/components/signals/default_config.tsx
rename to x-pack/plugins/siem/public/alerts/components/signals/default_config.tsx
index 81b643b7894dfc..05e0baba66d0a2 100644
--- a/x-pack/plugins/siem/public/pages/detection_engine/components/signals/default_config.tsx
+++ b/x-pack/plugins/siem/public/alerts/components/signals/default_config.tsx
@@ -10,15 +10,18 @@ import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
 import ApolloClient from 'apollo-client';
 import React from 'react';
 
-import { Filter } from '../../../../../../../../src/plugins/data/common/es_query';
-import { TimelineAction, TimelineActionProps } from '../../../../components/timeline/body/actions';
-import { defaultColumnHeaderType } from '../../../../components/timeline/body/column_headers/default_headers';
+import { Filter } from '../../../../../../../src/plugins/data/common/es_query';
+import {
+  TimelineAction,
+  TimelineActionProps,
+} from '../../../timelines/components/timeline/body/actions';
+import { defaultColumnHeaderType } from '../../../timelines/components/timeline/body/column_headers/default_headers';
 import {
   DEFAULT_COLUMN_MIN_WIDTH,
   DEFAULT_DATE_COLUMN_MIN_WIDTH,
-} from '../../../../components/timeline/body/constants';
-import { ColumnHeaderOptions, SubsetTimelineModel } from '../../../../store/timeline/model';
-import { timelineDefaults } from '../../../../store/timeline/defaults';
+} from '../../../timelines/components/timeline/body/constants';
+import { ColumnHeaderOptions, SubsetTimelineModel } from '../../../timelines/store/timeline/model';
+import { timelineDefaults } from '../../../timelines/store/timeline/defaults';
 
 import { FILTER_OPEN } from './signals_filter_group';
 import { sendSignalToTimelineAction, updateSignalStatusAction } from './actions';
diff --git a/x-pack/plugins/siem/public/alerts/components/signals/helpers.test.ts b/x-pack/plugins/siem/public/alerts/components/signals/helpers.test.ts
new file mode 100644
index 00000000000000..ad4f5cf8b4aa88
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/signals/helpers.test.ts
@@ -0,0 +1,274 @@
+/*
+ * 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 { cloneDeep } from 'lodash/fp';
+
+import { mockEcsData } from '../../../common/mock/mock_ecs';
+import { Filter } from '../../../../../../../src/plugins/data/public';
+import { DataProvider } from '../../../timelines/components/timeline/data_providers/data_provider';
+import { mockDataProviders } from '../../../timelines/components/timeline/data_providers/mock/mock_data_providers';
+
+import {
+  getStringArray,
+  replaceTemplateFieldFromQuery,
+  replaceTemplateFieldFromMatchFilters,
+  reformatDataProviderWithNewValue,
+} from './helpers';
+
+describe('helpers', () => {
+  let mockEcsDataClone = cloneDeep(mockEcsData);
+  beforeEach(() => {
+    mockEcsDataClone = cloneDeep(mockEcsData);
+  });
+  describe('getStringOrStringArray', () => {
+    test('it should correctly return a string array', () => {
+      const value = getStringArray('x', {
+        x: 'The nickname of the developer we all :heart:',
+      });
+      expect(value).toEqual(['The nickname of the developer we all :heart:']);
+    });
+
+    test('it should correctly return a string array with a single element', () => {
+      const value = getStringArray('x', {
+        x: ['The nickname of the developer we all :heart:'],
+      });
+      expect(value).toEqual(['The nickname of the developer we all :heart:']);
+    });
+
+    test('it should correctly return a string array with two elements of strings', () => {
+      const value = getStringArray('x', {
+        x: ['The nickname of the developer we all :heart:', 'We are all made of stars'],
+      });
+      expect(value).toEqual([
+        'The nickname of the developer we all :heart:',
+        'We are all made of stars',
+      ]);
+    });
+
+    test('it should correctly return a string array with deep elements', () => {
+      const value = getStringArray('x.y.z', {
+        x: { y: { z: 'zed' } },
+      });
+      expect(value).toEqual(['zed']);
+    });
+
+    test('it should correctly return a string array with a non-existent value', () => {
+      const value = getStringArray('non.existent', {
+        x: { y: { z: 'zed' } },
+      });
+      expect(value).toEqual([]);
+    });
+
+    test('it should trace an error if the value is not a string', () => {
+      const mockConsole: Console = ({ trace: jest.fn() } as unknown) as Console;
+      const value = getStringArray('a', { a: 5 }, mockConsole);
+      expect(value).toEqual([]);
+      expect(
+        mockConsole.trace
+      ).toHaveBeenCalledWith(
+        'Data type that is not a string or string array detected:',
+        5,
+        'when trying to access field:',
+        'a',
+        'from data object of:',
+        { a: 5 }
+      );
+    });
+
+    test('it should trace an error if the value is an array of mixed values', () => {
+      const mockConsole: Console = ({ trace: jest.fn() } as unknown) as Console;
+      const value = getStringArray('a', { a: ['hi', 5] }, mockConsole);
+      expect(value).toEqual([]);
+      expect(
+        mockConsole.trace
+      ).toHaveBeenCalledWith(
+        'Data type that is not a string or string array detected:',
+        ['hi', 5],
+        'when trying to access field:',
+        'a',
+        'from data object of:',
+        { a: ['hi', 5] }
+      );
+    });
+  });
+
+  describe('replaceTemplateFieldFromQuery', () => {
+    test('given an empty query string this returns an empty query string', () => {
+      const replacement = replaceTemplateFieldFromQuery('', mockEcsDataClone[0]);
+      expect(replacement).toEqual('');
+    });
+
+    test('given a query string with spaces this returns an empty query string', () => {
+      const replacement = replaceTemplateFieldFromQuery('    ', mockEcsDataClone[0]);
+      expect(replacement).toEqual('');
+    });
+
+    test('it should replace a query with a template value such as apache from a mock template', () => {
+      const replacement = replaceTemplateFieldFromQuery(
+        'host.name: placeholdertext',
+        mockEcsDataClone[0]
+      );
+      expect(replacement).toEqual('host.name: apache');
+    });
+
+    test('it should replace a template field with an ECS value that is not an array', () => {
+      mockEcsDataClone[0].host!.name = ('apache' as unknown) as string[]; // very unsafe cast for this test case
+      const replacement = replaceTemplateFieldFromQuery('host.name: *', mockEcsDataClone[0]);
+      expect(replacement).toEqual('host.name: *');
+    });
+
+    test('it should NOT replace a query with a template value that is not part of the template fields array', () => {
+      const replacement = replaceTemplateFieldFromQuery(
+        'user.id: placeholdertext',
+        mockEcsDataClone[0]
+      );
+      expect(replacement).toEqual('user.id: placeholdertext');
+    });
+  });
+
+  describe('replaceTemplateFieldFromMatchFilters', () => {
+    test('given an empty query filter this will return an empty filter', () => {
+      const replacement = replaceTemplateFieldFromMatchFilters([], mockEcsDataClone[0]);
+      expect(replacement).toEqual([]);
+    });
+
+    test('given a query filter this will return that filter with the placeholder replaced', () => {
+      const filters: Filter[] = [
+        {
+          meta: {
+            type: 'phrase',
+            key: 'host.name',
+            alias: 'alias',
+            disabled: false,
+            negate: false,
+            params: { query: 'Braden' },
+          },
+          query: { match_phrase: { 'host.name': 'Braden' } },
+        },
+      ];
+      const replacement = replaceTemplateFieldFromMatchFilters(filters, mockEcsDataClone[0]);
+      const expected: Filter[] = [
+        {
+          meta: {
+            type: 'phrase',
+            key: 'host.name',
+            alias: 'alias',
+            disabled: false,
+            negate: false,
+            params: { query: 'apache' },
+          },
+          query: { match_phrase: { 'host.name': 'apache' } },
+        },
+      ];
+      expect(replacement).toEqual(expected);
+    });
+
+    test('given a query filter with a value not in the templateFields, this will NOT replace the placeholder value', () => {
+      const filters: Filter[] = [
+        {
+          meta: {
+            type: 'phrase',
+            key: 'user.id',
+            alias: 'alias',
+            disabled: false,
+            negate: false,
+            params: { query: 'Evan' },
+          },
+          query: { match_phrase: { 'user.id': 'Evan' } },
+        },
+      ];
+      const replacement = replaceTemplateFieldFromMatchFilters(filters, mockEcsDataClone[0]);
+      const expected: Filter[] = [
+        {
+          meta: {
+            type: 'phrase',
+            key: 'user.id',
+            alias: 'alias',
+            disabled: false,
+            negate: false,
+            params: { query: 'Evan' },
+          },
+          query: { match_phrase: { 'user.id': 'Evan' } },
+        },
+      ];
+      expect(replacement).toEqual(expected);
+    });
+  });
+
+  describe('reformatDataProviderWithNewValue', () => {
+    test('it should replace a query with a template value such as apache from a mock data provider', () => {
+      const mockDataProvider: DataProvider = mockDataProviders[0];
+      mockDataProvider.queryMatch.field = 'host.name';
+      mockDataProvider.id = 'Braden';
+      mockDataProvider.name = 'Braden';
+      mockDataProvider.queryMatch.value = 'Braden';
+      const replacement = reformatDataProviderWithNewValue(mockDataProvider, mockEcsDataClone[0]);
+      expect(replacement).toEqual({
+        id: 'apache',
+        name: 'apache',
+        enabled: true,
+        excluded: false,
+        kqlQuery: '',
+        queryMatch: {
+          field: 'host.name',
+          value: 'apache',
+          operator: ':',
+          displayField: undefined,
+          displayValue: undefined,
+        },
+        and: [],
+      });
+    });
+
+    test('it should replace a query with a template value such as apache from a mock data provider using a string in the data provider', () => {
+      mockEcsDataClone[0].host!.name = ('apache' as unknown) as string[]; // very unsafe cast for this test case
+      const mockDataProvider: DataProvider = mockDataProviders[0];
+      mockDataProvider.queryMatch.field = 'host.name';
+      mockDataProvider.id = 'Braden';
+      mockDataProvider.name = 'Braden';
+      mockDataProvider.queryMatch.value = 'Braden';
+      const replacement = reformatDataProviderWithNewValue(mockDataProvider, mockEcsDataClone[0]);
+      expect(replacement).toEqual({
+        id: 'apache',
+        name: 'apache',
+        enabled: true,
+        excluded: false,
+        kqlQuery: '',
+        queryMatch: {
+          field: 'host.name',
+          value: 'apache',
+          operator: ':',
+          displayField: undefined,
+          displayValue: undefined,
+        },
+        and: [],
+      });
+    });
+
+    test('it should NOT replace a query with a template value that is not part of a template such as user.id', () => {
+      const mockDataProvider: DataProvider = mockDataProviders[0];
+      mockDataProvider.queryMatch.field = 'user.id';
+      mockDataProvider.id = 'my-id';
+      mockDataProvider.name = 'Rebecca';
+      mockDataProvider.queryMatch.value = 'Rebecca';
+      const replacement = reformatDataProviderWithNewValue(mockDataProvider, mockEcsDataClone[0]);
+      expect(replacement).toEqual({
+        id: 'my-id',
+        name: 'Rebecca',
+        enabled: true,
+        excluded: false,
+        kqlQuery: '',
+        queryMatch: {
+          field: 'user.id',
+          value: 'Rebecca',
+          operator: ':',
+          displayField: undefined,
+          displayValue: undefined,
+        },
+        and: [],
+      });
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/alerts/components/signals/helpers.ts b/x-pack/plugins/siem/public/alerts/components/signals/helpers.ts
new file mode 100644
index 00000000000000..5099d61254caa7
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/signals/helpers.ts
@@ -0,0 +1,165 @@
+/*
+ * 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 { get, isEmpty } from 'lodash/fp';
+import { Filter, esKuery, KueryNode } from '../../../../../../../src/plugins/data/public';
+import {
+  DataProvider,
+  DataProvidersAnd,
+} from '../../../timelines/components/timeline/data_providers/data_provider';
+import { Ecs } from '../../../graphql/types';
+
+interface FindValueToChangeInQuery {
+  field: string;
+  valueToChange: string;
+}
+
+/**
+ * Fields that will be replaced with the template strings from a a saved timeline template.
+ * This is used for the signals detection engine feature when you save a timeline template
+ * and are the fields you can replace when creating a template.
+ */
+const templateFields = [
+  'host.name',
+  'host.hostname',
+  'host.domain',
+  'host.id',
+  'host.ip',
+  'client.ip',
+  'destination.ip',
+  'server.ip',
+  'source.ip',
+  'network.community_id',
+  'user.name',
+  'process.name',
+];
+
+/**
+ * This will return an unknown as a string array if it exists from an unknown data type and a string
+ * that represents the path within the data object the same as lodash's "get". If the value is non-existent
+ * we will return an empty array. If it is a non string value then this will log a trace to the console
+ * that it encountered an error and return an empty array.
+ * @param field string of the field to access
+ * @param data The unknown data that is typically a ECS value to get the value
+ * @param localConsole The local console which can be sent in to make this pure (for tests) or use the default console
+ */
+export const getStringArray = (field: string, data: unknown, localConsole = console): string[] => {
+  const value: unknown | undefined = get(field, data);
+  if (value == null) {
+    return [];
+  } else if (typeof value === 'string') {
+    return [value];
+  } else if (Array.isArray(value) && value.every(element => typeof element === 'string')) {
+    return value;
+  } else {
+    localConsole.trace(
+      'Data type that is not a string or string array detected:',
+      value,
+      'when trying to access field:',
+      field,
+      'from data object of:',
+      data
+    );
+    return [];
+  }
+};
+
+export const findValueToChangeInQuery = (
+  kueryNode: KueryNode,
+  valueToChange: FindValueToChangeInQuery[] = []
+): FindValueToChangeInQuery[] => {
+  let localValueToChange = valueToChange;
+  if (kueryNode.function === 'is' && templateFields.includes(kueryNode.arguments[0].value)) {
+    localValueToChange = [
+      ...localValueToChange,
+      {
+        field: kueryNode.arguments[0].value,
+        valueToChange: kueryNode.arguments[1].value,
+      },
+    ];
+  }
+  return kueryNode.arguments.reduce(
+    (addValueToChange: FindValueToChangeInQuery[], ast: KueryNode) => {
+      if (ast.function === 'is' && templateFields.includes(ast.arguments[0].value)) {
+        return [
+          ...addValueToChange,
+          {
+            field: ast.arguments[0].value,
+            valueToChange: ast.arguments[1].value,
+          },
+        ];
+      }
+      if (ast.arguments) {
+        return findValueToChangeInQuery(ast, addValueToChange);
+      }
+      return addValueToChange;
+    },
+    localValueToChange
+  );
+};
+
+export const replaceTemplateFieldFromQuery = (query: string, ecsData: Ecs): string => {
+  if (query.trim() !== '') {
+    const valueToChange = findValueToChangeInQuery(esKuery.fromKueryExpression(query));
+    return valueToChange.reduce((newQuery, vtc) => {
+      const newValue = getStringArray(vtc.field, ecsData);
+      if (newValue.length) {
+        return newQuery.replace(vtc.valueToChange, newValue[0]);
+      } else {
+        return newQuery;
+      }
+    }, query);
+  } else {
+    return '';
+  }
+};
+
+export const replaceTemplateFieldFromMatchFilters = (filters: Filter[], ecsData: Ecs): Filter[] =>
+  filters.map(filter => {
+    if (
+      filter.meta.type === 'phrase' &&
+      filter.meta.key != null &&
+      templateFields.includes(filter.meta.key)
+    ) {
+      const newValue = getStringArray(filter.meta.key, ecsData);
+      if (newValue.length) {
+        filter.meta.params = { query: newValue[0] };
+        filter.query = { match_phrase: { [filter.meta.key]: newValue[0] } };
+      }
+    }
+    return filter;
+  });
+
+export const reformatDataProviderWithNewValue = <T extends DataProvider | DataProvidersAnd>(
+  dataProvider: T,
+  ecsData: Ecs
+): T => {
+  if (templateFields.includes(dataProvider.queryMatch.field)) {
+    const newValue = getStringArray(dataProvider.queryMatch.field, ecsData);
+    if (newValue.length) {
+      dataProvider.id = dataProvider.id.replace(dataProvider.name, newValue[0]);
+      dataProvider.name = newValue[0];
+      dataProvider.queryMatch.value = newValue[0];
+      dataProvider.queryMatch.displayField = undefined;
+      dataProvider.queryMatch.displayValue = undefined;
+    }
+  }
+  return dataProvider;
+};
+
+export const replaceTemplateFieldFromDataProviders = (
+  dataProviders: DataProvider[],
+  ecsData: Ecs
+): DataProvider[] =>
+  dataProviders.map(dataProvider => {
+    const newDataProvider = reformatDataProviderWithNewValue(dataProvider, ecsData);
+    if (newDataProvider.and != null && !isEmpty(newDataProvider.and)) {
+      newDataProvider.and = newDataProvider.and.map(andDataProvider =>
+        reformatDataProviderWithNewValue(andDataProvider, ecsData)
+      );
+    }
+    return newDataProvider;
+  });
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/signals/index.test.tsx b/x-pack/plugins/siem/public/alerts/components/signals/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/components/signals/index.test.tsx
rename to x-pack/plugins/siem/public/alerts/components/signals/index.test.tsx
diff --git a/x-pack/plugins/siem/public/alerts/components/signals/index.tsx b/x-pack/plugins/siem/public/alerts/components/signals/index.tsx
new file mode 100644
index 00000000000000..eb19cfea97324f
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/signals/index.tsx
@@ -0,0 +1,369 @@
+/*
+ * 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 { EuiPanel, EuiLoadingContent } from '@elastic/eui';
+import { isEmpty } from 'lodash/fp';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { connect, ConnectedProps } from 'react-redux';
+import { Dispatch } from 'redux';
+
+import { Filter, esQuery } from '../../../../../../../src/plugins/data/public';
+import { useFetchIndexPatterns } from '../../../alerts/containers/detection_engine/rules/fetch_index_patterns';
+import { StatefulEventsViewer } from '../../../common/components/events_viewer';
+import { HeaderSection } from '../../../common/components/header_section';
+import { combineQueries } from '../../../timelines/components/timeline/helpers';
+import { useKibana } from '../../../common/lib/kibana';
+import { inputsSelectors, State, inputsModel } from '../../../common/store';
+import { timelineActions, timelineSelectors } from '../../../timelines/store/timeline';
+import { TimelineModel } from '../../../timelines/store/timeline/model';
+import { timelineDefaults } from '../../../timelines/store/timeline/defaults';
+import { useApolloClient } from '../../../common/utils/apollo_context';
+
+import { updateSignalStatusAction } from './actions';
+import {
+  getSignalsActions,
+  requiredFieldsForActions,
+  signalsClosedFilters,
+  signalsDefaultModel,
+  signalsOpenFilters,
+} from './default_config';
+import {
+  FILTER_CLOSED,
+  FILTER_OPEN,
+  SignalFilterOption,
+  SignalsTableFilterGroup,
+} from './signals_filter_group';
+import { SignalsUtilityBar } from './signals_utility_bar';
+import * as i18n from './translations';
+import {
+  CreateTimelineProps,
+  SetEventsDeletedProps,
+  SetEventsLoadingProps,
+  UpdateSignalsStatusCallback,
+  UpdateSignalsStatusProps,
+} from './types';
+import { dispatchUpdateTimeline } from '../../../timelines/components/open_timeline/helpers';
+
+export const SIGNALS_PAGE_TIMELINE_ID = 'signals-page';
+
+interface OwnProps {
+  canUserCRUD: boolean;
+  defaultFilters?: Filter[];
+  hasIndexWrite: boolean;
+  from: number;
+  loading: boolean;
+  signalsIndex: string;
+  to: number;
+}
+
+type SignalsTableComponentProps = OwnProps & PropsFromRedux;
+
+export const SignalsTableComponent: React.FC<SignalsTableComponentProps> = ({
+  canUserCRUD,
+  clearEventsDeleted,
+  clearEventsLoading,
+  clearSelected,
+  defaultFilters,
+  from,
+  globalFilters,
+  globalQuery,
+  hasIndexWrite,
+  isSelectAllChecked,
+  loading,
+  loadingEventIds,
+  selectedEventIds,
+  setEventsDeleted,
+  setEventsLoading,
+  signalsIndex,
+  to,
+  updateTimeline,
+  updateTimelineIsLoading,
+}) => {
+  const [selectAll, setSelectAll] = useState(false);
+  const apolloClient = useApolloClient();
+
+  const [showClearSelectionAction, setShowClearSelectionAction] = useState(false);
+  const [filterGroup, setFilterGroup] = useState<SignalFilterOption>(FILTER_OPEN);
+  const [{ browserFields, indexPatterns }] = useFetchIndexPatterns(
+    signalsIndex !== '' ? [signalsIndex] : []
+  );
+  const kibana = useKibana();
+
+  const getGlobalQuery = useCallback(() => {
+    if (browserFields != null && indexPatterns != null) {
+      return combineQueries({
+        config: esQuery.getEsQueryConfig(kibana.services.uiSettings),
+        dataProviders: [],
+        indexPattern: indexPatterns,
+        browserFields,
+        filters: isEmpty(defaultFilters)
+          ? globalFilters
+          : [...(defaultFilters ?? []), ...globalFilters],
+        kqlQuery: globalQuery,
+        kqlMode: globalQuery.language,
+        start: from,
+        end: to,
+        isEventViewer: true,
+      });
+    }
+    return null;
+  }, [browserFields, globalFilters, globalQuery, indexPatterns, kibana, to, from]);
+
+  // Callback for creating a new timeline -- utilized by row/batch actions
+  const createTimelineCallback = useCallback(
+    ({ from: fromTimeline, timeline, to: toTimeline, ruleNote }: CreateTimelineProps) => {
+      updateTimelineIsLoading({ id: 'timeline-1', isLoading: false });
+      updateTimeline({
+        duplicate: true,
+        from: fromTimeline,
+        id: 'timeline-1',
+        notes: [],
+        timeline: {
+          ...timeline,
+          show: true,
+        },
+        to: toTimeline,
+        ruleNote,
+      })();
+    },
+    [updateTimeline, updateTimelineIsLoading]
+  );
+
+  const setEventsLoadingCallback = useCallback(
+    ({ eventIds, isLoading }: SetEventsLoadingProps) => {
+      setEventsLoading!({ id: SIGNALS_PAGE_TIMELINE_ID, eventIds, isLoading });
+    },
+    [setEventsLoading, SIGNALS_PAGE_TIMELINE_ID]
+  );
+
+  const setEventsDeletedCallback = useCallback(
+    ({ eventIds, isDeleted }: SetEventsDeletedProps) => {
+      setEventsDeleted!({ id: SIGNALS_PAGE_TIMELINE_ID, eventIds, isDeleted });
+    },
+    [setEventsDeleted, SIGNALS_PAGE_TIMELINE_ID]
+  );
+
+  // Catches state change isSelectAllChecked->false upon user selection change to reset utility bar
+  useEffect(() => {
+    if (!isSelectAllChecked) {
+      setShowClearSelectionAction(false);
+    } else {
+      setSelectAll(false);
+    }
+  }, [isSelectAllChecked]);
+
+  // Callback for when open/closed filter changes
+  const onFilterGroupChangedCallback = useCallback(
+    (newFilterGroup: SignalFilterOption) => {
+      clearEventsLoading!({ id: SIGNALS_PAGE_TIMELINE_ID });
+      clearEventsDeleted!({ id: SIGNALS_PAGE_TIMELINE_ID });
+      clearSelected!({ id: SIGNALS_PAGE_TIMELINE_ID });
+      setFilterGroup(newFilterGroup);
+    },
+    [clearEventsLoading, clearEventsDeleted, clearSelected, setFilterGroup]
+  );
+
+  // Callback for clearing entire selection from utility bar
+  const clearSelectionCallback = useCallback(() => {
+    clearSelected!({ id: SIGNALS_PAGE_TIMELINE_ID });
+    setSelectAll(false);
+    setShowClearSelectionAction(false);
+  }, [clearSelected, setSelectAll, setShowClearSelectionAction]);
+
+  // Callback for selecting all events on all pages from utility bar
+  // Dispatches to stateful_body's selectAll via TimelineTypeContext props
+  // as scope of response data required to actually set selectedEvents
+  const selectAllCallback = useCallback(() => {
+    setSelectAll(true);
+    setShowClearSelectionAction(true);
+  }, [setSelectAll, setShowClearSelectionAction]);
+
+  const updateSignalsStatusCallback: UpdateSignalsStatusCallback = useCallback(
+    async (refetchQuery: inputsModel.Refetch, { signalIds, status }: UpdateSignalsStatusProps) => {
+      await updateSignalStatusAction({
+        query: showClearSelectionAction ? getGlobalQuery()?.filterQuery : undefined,
+        signalIds: Object.keys(selectedEventIds),
+        status,
+        setEventsDeleted: setEventsDeletedCallback,
+        setEventsLoading: setEventsLoadingCallback,
+      });
+      refetchQuery();
+    },
+    [
+      getGlobalQuery,
+      selectedEventIds,
+      setEventsDeletedCallback,
+      setEventsLoadingCallback,
+      showClearSelectionAction,
+    ]
+  );
+
+  // Callback for creating the SignalUtilityBar which receives totalCount from EventsViewer component
+  const utilityBarCallback = useCallback(
+    (refetchQuery: inputsModel.Refetch, totalCount: number) => {
+      return (
+        <SignalsUtilityBar
+          canUserCRUD={canUserCRUD}
+          areEventsLoading={loadingEventIds.length > 0}
+          clearSelection={clearSelectionCallback}
+          hasIndexWrite={hasIndexWrite}
+          isFilteredToOpen={filterGroup === FILTER_OPEN}
+          selectAll={selectAllCallback}
+          selectedEventIds={selectedEventIds}
+          showClearSelection={showClearSelectionAction}
+          totalCount={totalCount}
+          updateSignalsStatus={updateSignalsStatusCallback.bind(null, refetchQuery)}
+        />
+      );
+    },
+    [
+      canUserCRUD,
+      hasIndexWrite,
+      clearSelectionCallback,
+      filterGroup,
+      loadingEventIds.length,
+      selectAllCallback,
+      selectedEventIds,
+      showClearSelectionAction,
+      updateSignalsStatusCallback,
+    ]
+  );
+
+  // Send to Timeline / Update Signal Status Actions for each table row
+  const additionalActions = useMemo(
+    () =>
+      getSignalsActions({
+        apolloClient,
+        canUserCRUD,
+        hasIndexWrite,
+        createTimeline: createTimelineCallback,
+        setEventsLoading: setEventsLoadingCallback,
+        setEventsDeleted: setEventsDeletedCallback,
+        status: filterGroup === FILTER_OPEN ? FILTER_CLOSED : FILTER_OPEN,
+        updateTimelineIsLoading,
+      }),
+    [
+      apolloClient,
+      canUserCRUD,
+      createTimelineCallback,
+      hasIndexWrite,
+      filterGroup,
+      setEventsLoadingCallback,
+      setEventsDeletedCallback,
+      updateTimelineIsLoading,
+    ]
+  );
+
+  const defaultIndices = useMemo(() => [signalsIndex], [signalsIndex]);
+  const defaultFiltersMemo = useMemo(() => {
+    if (isEmpty(defaultFilters)) {
+      return filterGroup === FILTER_OPEN ? signalsOpenFilters : signalsClosedFilters;
+    } else if (defaultFilters != null && !isEmpty(defaultFilters)) {
+      return [
+        ...defaultFilters,
+        ...(filterGroup === FILTER_OPEN ? signalsOpenFilters : signalsClosedFilters),
+      ];
+    }
+  }, [defaultFilters, filterGroup]);
+
+  const timelineTypeContext = useMemo(
+    () => ({
+      documentType: i18n.SIGNALS_DOCUMENT_TYPE,
+      footerText: i18n.TOTAL_COUNT_OF_SIGNALS,
+      loadingText: i18n.LOADING_SIGNALS,
+      queryFields: requiredFieldsForActions,
+      timelineActions: additionalActions,
+      title: i18n.SIGNALS_TABLE_TITLE,
+      selectAll: canUserCRUD ? selectAll : false,
+    }),
+    [additionalActions, canUserCRUD, selectAll]
+  );
+
+  const headerFilterGroup = useMemo(
+    () => <SignalsTableFilterGroup onFilterGroupChanged={onFilterGroupChangedCallback} />,
+    [onFilterGroupChangedCallback]
+  );
+
+  if (loading || isEmpty(signalsIndex)) {
+    return (
+      <EuiPanel>
+        <HeaderSection title={i18n.SIGNALS_TABLE_TITLE} />
+        <EuiLoadingContent data-test-subj="loading-signals-panel" />
+      </EuiPanel>
+    );
+  }
+
+  return (
+    <StatefulEventsViewer
+      defaultIndices={defaultIndices}
+      pageFilters={defaultFiltersMemo}
+      defaultModel={signalsDefaultModel}
+      end={to}
+      headerFilterGroup={headerFilterGroup}
+      id={SIGNALS_PAGE_TIMELINE_ID}
+      start={from}
+      timelineTypeContext={timelineTypeContext}
+      utilityBar={utilityBarCallback}
+    />
+  );
+};
+
+const makeMapStateToProps = () => {
+  const getTimeline = timelineSelectors.getTimelineByIdSelector();
+  const getGlobalInputs = inputsSelectors.globalSelector();
+  const mapStateToProps = (state: State) => {
+    const timeline: TimelineModel =
+      getTimeline(state, SIGNALS_PAGE_TIMELINE_ID) ?? timelineDefaults;
+    const { deletedEventIds, isSelectAllChecked, loadingEventIds, selectedEventIds } = timeline;
+
+    const globalInputs: inputsModel.InputsRange = getGlobalInputs(state);
+    const { query, filters } = globalInputs;
+    return {
+      globalQuery: query,
+      globalFilters: filters,
+      deletedEventIds,
+      isSelectAllChecked,
+      loadingEventIds,
+      selectedEventIds,
+    };
+  };
+  return mapStateToProps;
+};
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  clearSelected: ({ id }: { id: string }) => dispatch(timelineActions.clearSelected({ id })),
+  setEventsLoading: ({
+    id,
+    eventIds,
+    isLoading,
+  }: {
+    id: string;
+    eventIds: string[];
+    isLoading: boolean;
+  }) => dispatch(timelineActions.setEventsLoading({ id, eventIds, isLoading })),
+  clearEventsLoading: ({ id }: { id: string }) =>
+    dispatch(timelineActions.clearEventsLoading({ id })),
+  setEventsDeleted: ({
+    id,
+    eventIds,
+    isDeleted,
+  }: {
+    id: string;
+    eventIds: string[];
+    isDeleted: boolean;
+  }) => dispatch(timelineActions.setEventsDeleted({ id, eventIds, isDeleted })),
+  clearEventsDeleted: ({ id }: { id: string }) =>
+    dispatch(timelineActions.clearEventsDeleted({ id })),
+  updateTimelineIsLoading: ({ id, isLoading }: { id: string; isLoading: boolean }) =>
+    dispatch(timelineActions.updateIsLoading({ id, isLoading })),
+  updateTimeline: dispatchUpdateTimeline(dispatch),
+});
+
+const connector = connect(makeMapStateToProps, mapDispatchToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export const SignalsTable = connector(React.memo(SignalsTableComponent));
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/signals/signals_filter_group/index.test.tsx b/x-pack/plugins/siem/public/alerts/components/signals/signals_filter_group/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/components/signals/signals_filter_group/index.test.tsx
rename to x-pack/plugins/siem/public/alerts/components/signals/signals_filter_group/index.test.tsx
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/signals/signals_filter_group/index.tsx b/x-pack/plugins/siem/public/alerts/components/signals/signals_filter_group/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/components/signals/signals_filter_group/index.tsx
rename to x-pack/plugins/siem/public/alerts/components/signals/signals_filter_group/index.tsx
diff --git a/x-pack/plugins/siem/public/alerts/components/signals/signals_utility_bar/index.test.tsx b/x-pack/plugins/siem/public/alerts/components/signals/signals_utility_bar/index.test.tsx
new file mode 100644
index 00000000000000..3b43185c2c16b4
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/signals/signals_utility_bar/index.test.tsx
@@ -0,0 +1,33 @@
+/*
+ * 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 { SignalsUtilityBar } from './index';
+
+jest.mock('../../../../common/lib/kibana');
+
+describe('SignalsUtilityBar', () => {
+  it('renders correctly', () => {
+    const wrapper = shallow(
+      <SignalsUtilityBar
+        canUserCRUD={true}
+        hasIndexWrite={true}
+        areEventsLoading={false}
+        clearSelection={jest.fn()}
+        totalCount={100}
+        selectedEventIds={{}}
+        isFilteredToOpen={false}
+        selectAll={jest.fn()}
+        showClearSelection={true}
+        updateSignalsStatus={jest.fn()}
+      />
+    );
+
+    expect(wrapper.find('[dataTestSubj="openCloseSignal"]')).toBeTruthy();
+  });
+});
diff --git a/x-pack/plugins/siem/public/alerts/components/signals/signals_utility_bar/index.tsx b/x-pack/plugins/siem/public/alerts/components/signals/signals_utility_bar/index.tsx
new file mode 100644
index 00000000000000..e23f4ebdd3d30a
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/signals/signals_utility_bar/index.tsx
@@ -0,0 +1,125 @@
+/*
+ * 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 { isEmpty } from 'lodash/fp';
+import React, { useCallback } from 'react';
+import numeral from '@elastic/numeral';
+
+import { DEFAULT_NUMBER_FORMAT } from '../../../../../common/constants';
+import {
+  UtilityBar,
+  UtilityBarAction,
+  UtilityBarGroup,
+  UtilityBarSection,
+  UtilityBarText,
+} from '../../../../common/components/utility_bar';
+import * as i18n from './translations';
+import { useUiSetting$ } from '../../../../common/lib/kibana';
+import { TimelineNonEcsData } from '../../../../graphql/types';
+import { UpdateSignalsStatus } from '../types';
+import { FILTER_CLOSED, FILTER_OPEN } from '../signals_filter_group';
+
+interface SignalsUtilityBarProps {
+  canUserCRUD: boolean;
+  hasIndexWrite: boolean;
+  areEventsLoading: boolean;
+  clearSelection: () => void;
+  isFilteredToOpen: boolean;
+  selectAll: () => void;
+  selectedEventIds: Readonly<Record<string, TimelineNonEcsData[]>>;
+  showClearSelection: boolean;
+  totalCount: number;
+  updateSignalsStatus: UpdateSignalsStatus;
+}
+
+const SignalsUtilityBarComponent: React.FC<SignalsUtilityBarProps> = ({
+  canUserCRUD,
+  hasIndexWrite,
+  areEventsLoading,
+  clearSelection,
+  totalCount,
+  selectedEventIds,
+  isFilteredToOpen,
+  selectAll,
+  showClearSelection,
+  updateSignalsStatus,
+}) => {
+  const [defaultNumberFormat] = useUiSetting$<string>(DEFAULT_NUMBER_FORMAT);
+
+  const handleUpdateStatus = useCallback(async () => {
+    await updateSignalsStatus({
+      signalIds: Object.keys(selectedEventIds),
+      status: isFilteredToOpen ? FILTER_CLOSED : FILTER_OPEN,
+    });
+  }, [selectedEventIds, updateSignalsStatus, isFilteredToOpen]);
+
+  const formattedTotalCount = numeral(totalCount).format(defaultNumberFormat);
+  const formattedSelectedEventsCount = numeral(Object.keys(selectedEventIds).length).format(
+    defaultNumberFormat
+  );
+
+  return (
+    <>
+      <UtilityBar>
+        <UtilityBarSection>
+          <UtilityBarGroup>
+            <UtilityBarText dataTestSubj="showingSignals">
+              {i18n.SHOWING_SIGNALS(formattedTotalCount, totalCount)}
+            </UtilityBarText>
+          </UtilityBarGroup>
+
+          <UtilityBarGroup>
+            {canUserCRUD && hasIndexWrite && (
+              <>
+                <UtilityBarText dataTestSubj="selectedSignals">
+                  {i18n.SELECTED_SIGNALS(
+                    showClearSelection ? formattedTotalCount : formattedSelectedEventsCount,
+                    showClearSelection ? totalCount : Object.keys(selectedEventIds).length
+                  )}
+                </UtilityBarText>
+
+                <UtilityBarAction
+                  dataTestSubj="openCloseSignal"
+                  disabled={areEventsLoading || isEmpty(selectedEventIds)}
+                  iconType={isFilteredToOpen ? 'securitySignalResolved' : 'securitySignalDetected'}
+                  onClick={handleUpdateStatus}
+                >
+                  {isFilteredToOpen
+                    ? i18n.BATCH_ACTION_CLOSE_SELECTED
+                    : i18n.BATCH_ACTION_OPEN_SELECTED}
+                </UtilityBarAction>
+
+                <UtilityBarAction
+                  iconType={showClearSelection ? 'cross' : 'pagesSelect'}
+                  onClick={() => {
+                    if (!showClearSelection) {
+                      selectAll();
+                    } else {
+                      clearSelection();
+                    }
+                  }}
+                >
+                  {showClearSelection
+                    ? i18n.CLEAR_SELECTION
+                    : i18n.SELECT_ALL_SIGNALS(formattedTotalCount, totalCount)}
+                </UtilityBarAction>
+              </>
+            )}
+          </UtilityBarGroup>
+        </UtilityBarSection>
+      </UtilityBar>
+    </>
+  );
+};
+
+export const SignalsUtilityBar = React.memo(
+  SignalsUtilityBarComponent,
+  (prevProps, nextProps) =>
+    prevProps.areEventsLoading === nextProps.areEventsLoading &&
+    prevProps.selectedEventIds === nextProps.selectedEventIds &&
+    prevProps.totalCount === nextProps.totalCount &&
+    prevProps.showClearSelection === nextProps.showClearSelection
+);
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/signals/signals_utility_bar/translations.ts b/x-pack/plugins/siem/public/alerts/components/signals/signals_utility_bar/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/components/signals/signals_utility_bar/translations.ts
rename to x-pack/plugins/siem/public/alerts/components/signals/signals_utility_bar/translations.ts
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/signals/translations.ts b/x-pack/plugins/siem/public/alerts/components/signals/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/components/signals/translations.ts
rename to x-pack/plugins/siem/public/alerts/components/signals/translations.ts
diff --git a/x-pack/plugins/siem/public/alerts/components/signals/types.ts b/x-pack/plugins/siem/public/alerts/components/signals/types.ts
new file mode 100644
index 00000000000000..b3c770415ed574
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/signals/types.ts
@@ -0,0 +1,60 @@
+/*
+ * 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 ApolloClient from 'apollo-client';
+
+import { Ecs } from '../../../graphql/types';
+import { TimelineModel } from '../../../timelines/store/timeline/model';
+import { inputsModel } from '../../../common/store';
+
+export interface SetEventsLoadingProps {
+  eventIds: string[];
+  isLoading: boolean;
+}
+
+export interface SetEventsDeletedProps {
+  eventIds: string[];
+  isDeleted: boolean;
+}
+
+export interface UpdateSignalsStatusProps {
+  signalIds: string[];
+  status: 'open' | 'closed';
+}
+
+export type UpdateSignalsStatusCallback = (
+  refetchQuery: inputsModel.Refetch,
+  { signalIds, status }: UpdateSignalsStatusProps
+) => void;
+export type UpdateSignalsStatus = ({ signalIds, status }: UpdateSignalsStatusProps) => void;
+
+export interface UpdateSignalStatusActionProps {
+  query?: string;
+  signalIds: string[];
+  status: 'open' | 'closed';
+  setEventsLoading: ({ eventIds, isLoading }: SetEventsLoadingProps) => void;
+  setEventsDeleted: ({ eventIds, isDeleted }: SetEventsDeletedProps) => void;
+}
+
+export type SendSignalsToTimeline = () => void;
+
+export interface SendSignalToTimelineActionProps {
+  apolloClient?: ApolloClient<{}>;
+  createTimeline: CreateTimeline;
+  ecsData: Ecs;
+  updateTimelineIsLoading: UpdateTimelineLoading;
+}
+
+export type UpdateTimelineLoading = ({ id, isLoading }: { id: string; isLoading: boolean }) => void;
+
+export interface CreateTimelineProps {
+  from: number;
+  timeline: TimelineModel;
+  to: number;
+  ruleNote?: string;
+}
+
+export type CreateTimeline = ({ from, timeline, to }: CreateTimelineProps) => void;
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/config.ts b/x-pack/plugins/siem/public/alerts/components/signals_histogram_panel/config.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/config.ts
rename to x-pack/plugins/siem/public/alerts/components/signals_histogram_panel/config.ts
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/helpers.test.tsx b/x-pack/plugins/siem/public/alerts/components/signals_histogram_panel/helpers.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/helpers.test.tsx
rename to x-pack/plugins/siem/public/alerts/components/signals_histogram_panel/helpers.test.tsx
diff --git a/x-pack/plugins/siem/public/alerts/components/signals_histogram_panel/helpers.tsx b/x-pack/plugins/siem/public/alerts/components/signals_histogram_panel/helpers.tsx
new file mode 100644
index 00000000000000..0c9fa39e53d00b
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/signals_histogram_panel/helpers.tsx
@@ -0,0 +1,101 @@
+/*
+ * 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 { showAllOthersBucket } from '../../../../common/constants';
+import { HistogramData, SignalsAggregation, SignalsBucket, SignalsGroupBucket } from './types';
+import { SignalSearchResponse } from '../../containers/detection_engine/signals/types';
+import * as i18n from './translations';
+
+export const formatSignalsData = (
+  signalsData: SignalSearchResponse<{}, SignalsAggregation> | null
+) => {
+  const groupBuckets: SignalsGroupBucket[] =
+    signalsData?.aggregations?.signalsByGrouping?.buckets ?? [];
+  return groupBuckets.reduce<HistogramData[]>((acc, { key: group, signals }) => {
+    const signalsBucket: SignalsBucket[] = signals.buckets ?? [];
+
+    return [
+      ...acc,
+      ...signalsBucket.map(({ key, doc_count }: SignalsBucket) => ({
+        x: key,
+        y: doc_count,
+        g: group,
+      })),
+    ];
+  }, []);
+};
+
+export const getSignalsHistogramQuery = (
+  stackByField: string,
+  from: number,
+  to: number,
+  additionalFilters: Array<{
+    bool: { filter: unknown[]; should: unknown[]; must_not: unknown[]; must: unknown[] };
+  }>
+) => {
+  const missing = showAllOthersBucket.includes(stackByField)
+    ? {
+        missing: stackByField.endsWith('.ip') ? '0.0.0.0' : i18n.ALL_OTHERS,
+      }
+    : {};
+
+  return {
+    aggs: {
+      signalsByGrouping: {
+        terms: {
+          field: stackByField,
+          ...missing,
+          order: {
+            _count: 'desc',
+          },
+          size: 10,
+        },
+        aggs: {
+          signals: {
+            date_histogram: {
+              field: '@timestamp',
+              fixed_interval: `${Math.floor((to - from) / 32)}ms`,
+              min_doc_count: 0,
+              extended_bounds: {
+                min: from,
+                max: to,
+              },
+            },
+          },
+        },
+      },
+    },
+    query: {
+      bool: {
+        filter: [
+          ...additionalFilters,
+          {
+            range: {
+              '@timestamp': {
+                gte: from,
+                lte: to,
+              },
+            },
+          },
+        ],
+      },
+    },
+  };
+};
+
+/**
+ * Returns `true` when the signals histogram initial loading spinner should be shown
+ *
+ * @param isInitialLoading The loading spinner will only be displayed if this value is `true`, because after initial load, a different, non-spinner loading indicator is displayed
+ * @param isLoadingSignals When `true`, IO is being performed to request signals (for rendering in the histogram)
+ */
+export const showInitialLoadingSpinner = ({
+  isInitialLoading,
+  isLoadingSignals,
+}: {
+  isInitialLoading: boolean;
+  isLoadingSignals: boolean;
+}): boolean => isInitialLoading && isLoadingSignals;
diff --git a/x-pack/plugins/siem/public/alerts/components/signals_histogram_panel/index.test.tsx b/x-pack/plugins/siem/public/alerts/components/signals_histogram_panel/index.test.tsx
new file mode 100644
index 00000000000000..6578af19094df7
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/signals_histogram_panel/index.test.tsx
@@ -0,0 +1,29 @@
+/*
+ * 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 { SignalsHistogramPanel } from './index';
+
+jest.mock('../../../common/lib/kibana');
+jest.mock('../../../common/components/navigation/use_get_url_search');
+
+describe('SignalsHistogramPanel', () => {
+  it('renders correctly', () => {
+    const wrapper = shallow(
+      <SignalsHistogramPanel
+        from={0}
+        signalIndexName="signalIndexName"
+        setQuery={jest.fn()}
+        to={1}
+        updateDateRange={jest.fn()}
+      />
+    );
+
+    expect(wrapper.find('[id="detections-histogram"]')).toBeTruthy();
+  });
+});
diff --git a/x-pack/plugins/siem/public/alerts/components/signals_histogram_panel/index.tsx b/x-pack/plugins/siem/public/alerts/components/signals_histogram_panel/index.tsx
new file mode 100644
index 00000000000000..0a1ce5a39af895
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/signals_histogram_panel/index.tsx
@@ -0,0 +1,284 @@
+/*
+ * 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 { Position } from '@elastic/charts';
+import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiSelect, EuiPanel } from '@elastic/eui';
+import numeral from '@elastic/numeral';
+import React, { memo, useCallback, useMemo, useState, useEffect } from 'react';
+import styled from 'styled-components';
+import { isEmpty } from 'lodash/fp';
+import uuid from 'uuid';
+
+import { DEFAULT_NUMBER_FORMAT } from '../../../../common/constants';
+import { UpdateDateRange } from '../../../common/components/charts/common';
+import { LegendItem } from '../../../common/components/charts/draggable_legend_item';
+import { escapeDataProviderId } from '../../../common/components/drag_and_drop/helpers';
+import { HeaderSection } from '../../../common/components/header_section';
+import { Filter, esQuery, Query } from '../../../../../../../src/plugins/data/public';
+import { useQuerySignals } from '../../containers/detection_engine/signals/use_query';
+import { getDetectionEngineUrl } from '../../../common/components/link_to';
+import { defaultLegendColors } from '../../../common/components/matrix_histogram/utils';
+import { InspectButtonContainer } from '../../../common/components/inspect';
+import { useGetUrlSearch } from '../../../common/components/navigation/use_get_url_search';
+import { MatrixLoader } from '../../../common/components/matrix_histogram/matrix_loader';
+import { MatrixHistogramOption } from '../../../common/components/matrix_histogram/types';
+import { useKibana, useUiSetting$ } from '../../../common/lib/kibana';
+import { navTabs } from '../../../app/home/home_navigations';
+import { signalsHistogramOptions } from './config';
+import { formatSignalsData, getSignalsHistogramQuery, showInitialLoadingSpinner } from './helpers';
+import { SignalsHistogram } from './signals_histogram';
+import * as i18n from './translations';
+import { RegisterQuery, SignalsHistogramOption, SignalsAggregation, SignalsTotal } from './types';
+
+const DEFAULT_PANEL_HEIGHT = 300;
+
+const StyledEuiPanel = styled(EuiPanel)<{ height?: number }>`
+  display: flex;
+  flex-direction: column;
+  ${({ height }) => (height != null ? `height: ${height}px;` : '')}
+  position: relative;
+`;
+
+const defaultTotalSignalsObj: SignalsTotal = {
+  value: 0,
+  relation: 'eq',
+};
+
+export const DETECTIONS_HISTOGRAM_ID = 'detections-histogram';
+
+const ViewSignalsFlexItem = styled(EuiFlexItem)`
+  margin-left: 24px;
+`;
+
+interface SignalsHistogramPanelProps {
+  chartHeight?: number;
+  defaultStackByOption?: SignalsHistogramOption;
+  deleteQuery?: ({ id }: { id: string }) => void;
+  filters?: Filter[];
+  from: number;
+  headerChildren?: React.ReactNode;
+  /** Override all defaults, and only display this field */
+  onlyField?: string;
+  query?: Query;
+  legendPosition?: Position;
+  panelHeight?: number;
+  signalIndexName: string | null;
+  setQuery: (params: RegisterQuery) => void;
+  showLinkToSignals?: boolean;
+  showTotalSignalsCount?: boolean;
+  stackByOptions?: SignalsHistogramOption[];
+  title?: string;
+  to: number;
+  updateDateRange: UpdateDateRange;
+}
+
+const getHistogramOption = (fieldName: string): MatrixHistogramOption => ({
+  text: fieldName,
+  value: fieldName,
+});
+
+const NO_LEGEND_DATA: LegendItem[] = [];
+
+export const SignalsHistogramPanel = memo<SignalsHistogramPanelProps>(
+  ({
+    chartHeight,
+    defaultStackByOption = signalsHistogramOptions[0],
+    deleteQuery,
+    filters,
+    headerChildren,
+    onlyField,
+    query,
+    from,
+    legendPosition = 'right',
+    panelHeight = DEFAULT_PANEL_HEIGHT,
+    setQuery,
+    signalIndexName,
+    showLinkToSignals = false,
+    showTotalSignalsCount = false,
+    stackByOptions,
+    to,
+    title = i18n.HISTOGRAM_HEADER,
+    updateDateRange,
+  }) => {
+    // create a unique, but stable (across re-renders) query id
+    const uniqueQueryId = useMemo(() => `${DETECTIONS_HISTOGRAM_ID}-${uuid.v4()}`, []);
+    const [isInitialLoading, setIsInitialLoading] = useState(true);
+    const [defaultNumberFormat] = useUiSetting$<string>(DEFAULT_NUMBER_FORMAT);
+    const [totalSignalsObj, setTotalSignalsObj] = useState<SignalsTotal>(defaultTotalSignalsObj);
+    const [selectedStackByOption, setSelectedStackByOption] = useState<SignalsHistogramOption>(
+      onlyField == null ? defaultStackByOption : getHistogramOption(onlyField)
+    );
+    const {
+      loading: isLoadingSignals,
+      data: signalsData,
+      setQuery: setSignalsQuery,
+      response,
+      request,
+      refetch,
+    } = useQuerySignals<{}, SignalsAggregation>(
+      getSignalsHistogramQuery(selectedStackByOption.value, from, to, []),
+      signalIndexName
+    );
+    const kibana = useKibana();
+    const urlSearch = useGetUrlSearch(navTabs.detections);
+
+    const totalSignals = useMemo(
+      () =>
+        i18n.SHOWING_SIGNALS(
+          numeral(totalSignalsObj.value).format(defaultNumberFormat),
+          totalSignalsObj.value,
+          totalSignalsObj.relation === 'gte' ? '>' : totalSignalsObj.relation === 'lte' ? '<' : ''
+        ),
+      [totalSignalsObj]
+    );
+
+    const setSelectedOptionCallback = useCallback((event: React.ChangeEvent<HTMLSelectElement>) => {
+      setSelectedStackByOption(
+        stackByOptions?.find(co => co.value === event.target.value) ?? defaultStackByOption
+      );
+    }, []);
+
+    const formattedSignalsData = useMemo(() => formatSignalsData(signalsData), [signalsData]);
+
+    const legendItems: LegendItem[] = useMemo(
+      () =>
+        signalsData?.aggregations?.signalsByGrouping?.buckets != null
+          ? signalsData.aggregations.signalsByGrouping.buckets.map((bucket, i) => ({
+              color: i < defaultLegendColors.length ? defaultLegendColors[i] : undefined,
+              dataProviderId: escapeDataProviderId(
+                `draggable-legend-item-${uuid.v4()}-${selectedStackByOption.value}-${bucket.key}`
+              ),
+              field: selectedStackByOption.value,
+              value: bucket.key,
+            }))
+          : NO_LEGEND_DATA,
+      [signalsData, selectedStackByOption.value]
+    );
+
+    useEffect(() => {
+      let canceled = false;
+
+      if (!canceled && !showInitialLoadingSpinner({ isInitialLoading, isLoadingSignals })) {
+        setIsInitialLoading(false);
+      }
+
+      return () => {
+        canceled = true; // prevent long running data fetches from updating state after unmounting
+      };
+    }, [isInitialLoading, isLoadingSignals, setIsInitialLoading]);
+
+    useEffect(() => {
+      return () => {
+        if (deleteQuery) {
+          deleteQuery({ id: uniqueQueryId });
+        }
+      };
+    }, []);
+
+    useEffect(() => {
+      if (refetch != null && setQuery != null) {
+        setQuery({
+          id: uniqueQueryId,
+          inspect: {
+            dsl: [request],
+            response: [response],
+          },
+          loading: isLoadingSignals,
+          refetch,
+        });
+      }
+    }, [setQuery, isLoadingSignals, signalsData, response, request, refetch]);
+
+    useEffect(() => {
+      setTotalSignalsObj(
+        signalsData?.hits.total ?? {
+          value: 0,
+          relation: 'eq',
+        }
+      );
+    }, [signalsData]);
+
+    useEffect(() => {
+      const converted = esQuery.buildEsQuery(
+        undefined,
+        query != null ? [query] : [],
+        filters?.filter(f => f.meta.disabled === false) ?? [],
+        {
+          ...esQuery.getEsQueryConfig(kibana.services.uiSettings),
+          dateFormatTZ: undefined,
+        }
+      );
+
+      setSignalsQuery(
+        getSignalsHistogramQuery(
+          selectedStackByOption.value,
+          from,
+          to,
+          !isEmpty(converted) ? [converted] : []
+        )
+      );
+    }, [selectedStackByOption.value, from, to, query, filters]);
+
+    const linkButton = useMemo(() => {
+      if (showLinkToSignals) {
+        return (
+          <ViewSignalsFlexItem grow={false}>
+            <EuiButton href={getDetectionEngineUrl(urlSearch)}>{i18n.VIEW_SIGNALS}</EuiButton>
+          </ViewSignalsFlexItem>
+        );
+      }
+    }, [showLinkToSignals, urlSearch]);
+
+    const titleText = useMemo(() => (onlyField == null ? title : i18n.TOP(onlyField)), [
+      onlyField,
+      title,
+    ]);
+
+    return (
+      <InspectButtonContainer data-test-subj="signals-histogram-panel" show={!isInitialLoading}>
+        <StyledEuiPanel height={panelHeight}>
+          <HeaderSection
+            id={uniqueQueryId}
+            title={titleText}
+            titleSize={onlyField == null ? 'm' : 's'}
+            subtitle={!isInitialLoading && showTotalSignalsCount && totalSignals}
+          >
+            <EuiFlexGroup alignItems="center" gutterSize="none">
+              <EuiFlexItem grow={false}>
+                {stackByOptions && (
+                  <EuiSelect
+                    onChange={setSelectedOptionCallback}
+                    options={stackByOptions}
+                    prepend={i18n.STACK_BY_LABEL}
+                    value={selectedStackByOption.value}
+                  />
+                )}
+                {headerChildren != null && headerChildren}
+              </EuiFlexItem>
+              {linkButton}
+            </EuiFlexGroup>
+          </HeaderSection>
+
+          {isInitialLoading ? (
+            <MatrixLoader />
+          ) : (
+            <SignalsHistogram
+              chartHeight={chartHeight}
+              data={formattedSignalsData}
+              from={from}
+              legendItems={legendItems}
+              legendPosition={legendPosition}
+              loading={isLoadingSignals}
+              to={to}
+              updateDateRange={updateDateRange}
+            />
+          )}
+        </StyledEuiPanel>
+      </InspectButtonContainer>
+    );
+  }
+);
+
+SignalsHistogramPanel.displayName = 'SignalsHistogramPanel';
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/signals_histogram.test.tsx b/x-pack/plugins/siem/public/alerts/components/signals_histogram_panel/signals_histogram.test.tsx
similarity index 94%
rename from x-pack/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/signals_histogram.test.tsx
rename to x-pack/plugins/siem/public/alerts/components/signals_histogram_panel/signals_histogram.test.tsx
index 6a116efb8f2f8b..f921c00cdafb7b 100644
--- a/x-pack/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/signals_histogram.test.tsx
+++ b/x-pack/plugins/siem/public/alerts/components/signals_histogram_panel/signals_histogram.test.tsx
@@ -9,7 +9,7 @@ import { shallow } from 'enzyme';
 
 import { SignalsHistogram } from './signals_histogram';
 
-jest.mock('../../../../lib/kibana');
+jest.mock('../../../common/lib/kibana');
 
 describe('SignalsHistogram', () => {
   it('renders correctly', () => {
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/signals_histogram.tsx b/x-pack/plugins/siem/public/alerts/components/signals_histogram_panel/signals_histogram.tsx
similarity index 89%
rename from x-pack/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/signals_histogram.tsx
rename to x-pack/plugins/siem/public/alerts/components/signals_histogram_panel/signals_histogram.tsx
index a031f2542b8779..3c6e7b84fd2b41 100644
--- a/x-pack/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/signals_histogram.tsx
+++ b/x-pack/plugins/siem/public/alerts/components/signals_histogram_panel/signals_histogram.tsx
@@ -15,10 +15,10 @@ import {
 import { EuiFlexGroup, EuiFlexItem, EuiProgress } from '@elastic/eui';
 import React, { useMemo } from 'react';
 
-import { useTheme, UpdateDateRange } from '../../../../components/charts/common';
-import { histogramDateTimeFormatter } from '../../../../components/utils';
-import { DraggableLegend } from '../../../../components/charts/draggable_legend';
-import { LegendItem } from '../../../../components/charts/draggable_legend_item';
+import { useTheme, UpdateDateRange } from '../../../common/components/charts/common';
+import { histogramDateTimeFormatter } from '../../../common/components/utils';
+import { DraggableLegend } from '../../../common/components/charts/draggable_legend';
+import { LegendItem } from '../../../common/components/charts/draggable_legend_item';
 
 import { HistogramData } from './types';
 
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/translations.ts b/x-pack/plugins/siem/public/alerts/components/signals_histogram_panel/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/translations.ts
rename to x-pack/plugins/siem/public/alerts/components/signals_histogram_panel/translations.ts
diff --git a/x-pack/plugins/siem/public/alerts/components/signals_histogram_panel/types.ts b/x-pack/plugins/siem/public/alerts/components/signals_histogram_panel/types.ts
new file mode 100644
index 00000000000000..41d58a4a7391d9
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/signals_histogram_panel/types.ts
@@ -0,0 +1,49 @@
+/*
+ * 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 { inputsModel } from '../../../common/store';
+
+export interface SignalsHistogramOption {
+  text: string;
+  value: string;
+}
+
+export interface HistogramData {
+  x: number;
+  y: number;
+  g: string;
+}
+
+export interface SignalsAggregation {
+  signalsByGrouping: {
+    buckets: SignalsGroupBucket[];
+  };
+}
+
+export interface SignalsBucket {
+  key_as_string: string;
+  key: number;
+  doc_count: number;
+}
+
+export interface SignalsGroupBucket {
+  key: string;
+  signals: {
+    buckets: SignalsBucket[];
+  };
+}
+
+export interface SignalsTotal {
+  value: number;
+  relation: string;
+}
+
+export interface RegisterQuery {
+  id: string;
+  inspect: inputsModel.InspectQuery | null;
+  loading: boolean;
+  refetch: inputsModel.Refetch;
+}
diff --git a/x-pack/plugins/siem/public/alerts/components/signals_info/index.tsx b/x-pack/plugins/siem/public/alerts/components/signals_info/index.tsx
new file mode 100644
index 00000000000000..b1d7f2cfe7eb52
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/signals_info/index.tsx
@@ -0,0 +1,49 @@
+/*
+ * 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 { EuiLoadingSpinner } from '@elastic/eui';
+import { FormattedRelative } from '@kbn/i18n/react';
+import React, { useState, useEffect } from 'react';
+
+import { useQuerySignals } from '../../containers/detection_engine/signals/use_query';
+import { buildLastSignalsQuery } from './query.dsl';
+import { Aggs } from './types';
+
+interface SignalInfo {
+  ruleId?: string | null;
+}
+
+type Return = [React.ReactNode, React.ReactNode];
+
+export const useSignalInfo = ({ ruleId = null }: SignalInfo): Return => {
+  const [lastSignals, setLastSignals] = useState<React.ReactElement | null>(
+    <EuiLoadingSpinner size="m" />
+  );
+  const [totalSignals, setTotalSignals] = useState<React.ReactElement | null>(
+    <EuiLoadingSpinner size="m" />
+  );
+
+  const { loading, data: signals } = useQuerySignals<unknown, Aggs>(buildLastSignalsQuery(ruleId));
+
+  useEffect(() => {
+    if (signals != null) {
+      const mySignals = signals;
+      setLastSignals(
+        mySignals.aggregations?.lastSeen.value != null ? (
+          <FormattedRelative
+            value={new Date(mySignals.aggregations?.lastSeen.value_as_string ?? '')}
+          />
+        ) : null
+      );
+      setTotalSignals(<>{mySignals.hits.total.value}</>);
+    } else {
+      setLastSignals(null);
+      setTotalSignals(null);
+    }
+  }, [loading, signals]);
+
+  return [lastSignals, totalSignals];
+};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/signals_info/query.dsl.ts b/x-pack/plugins/siem/public/alerts/components/signals_info/query.dsl.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/components/signals_info/query.dsl.ts
rename to x-pack/plugins/siem/public/alerts/components/signals_info/query.dsl.ts
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/signals_info/types.ts b/x-pack/plugins/siem/public/alerts/components/signals_info/types.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/components/signals_info/types.ts
rename to x-pack/plugins/siem/public/alerts/components/signals_info/types.ts
diff --git a/x-pack/plugins/siem/public/alerts/components/user_info/index.test.tsx b/x-pack/plugins/siem/public/alerts/components/user_info/index.test.tsx
new file mode 100644
index 00000000000000..81b2c4347e17c7
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/user_info/index.test.tsx
@@ -0,0 +1,50 @@
+/*
+ * 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 { renderHook } from '@testing-library/react-hooks';
+import { useUserInfo } from './index';
+
+import { usePrivilegeUser } from '../../containers/detection_engine/signals/use_privilege_user';
+import { useSignalIndex } from '../../containers/detection_engine/signals/use_signal_index';
+import { useKibana } from '../../../common/lib/kibana';
+jest.mock('../../containers/detection_engine/signals/use_privilege_user');
+jest.mock('../../containers/detection_engine/signals/use_signal_index');
+jest.mock('../../../common/lib/kibana');
+
+describe('useUserInfo', () => {
+  beforeAll(() => {
+    (usePrivilegeUser as jest.Mock).mockReturnValue({});
+    (useSignalIndex as jest.Mock).mockReturnValue({});
+    (useKibana as jest.Mock).mockReturnValue({
+      services: {
+        application: {
+          capabilities: {
+            siem: {
+              crud: true,
+            },
+          },
+        },
+      },
+    });
+  });
+  it('returns default state', () => {
+    const { result } = renderHook(() => useUserInfo());
+
+    expect(result).toEqual({
+      current: {
+        canUserCRUD: null,
+        hasEncryptionKey: null,
+        hasIndexManage: null,
+        hasIndexWrite: null,
+        isAuthenticated: null,
+        isSignalIndexExists: null,
+        loading: true,
+        signalIndexName: null,
+      },
+      error: undefined,
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/alerts/components/user_info/index.tsx b/x-pack/plugins/siem/public/alerts/components/user_info/index.tsx
new file mode 100644
index 00000000000000..faf90162925595
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/components/user_info/index.tsx
@@ -0,0 +1,243 @@
+/*
+ * 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 { noop } from 'lodash/fp';
+import React, { useEffect, useReducer, Dispatch, createContext, useContext } from 'react';
+
+import { usePrivilegeUser } from '../../containers/detection_engine/signals/use_privilege_user';
+import { useSignalIndex } from '../../containers/detection_engine/signals/use_signal_index';
+import { useKibana } from '../../../common/lib/kibana';
+
+export interface State {
+  canUserCRUD: boolean | null;
+  hasIndexManage: boolean | null;
+  hasIndexWrite: boolean | null;
+  isSignalIndexExists: boolean | null;
+  isAuthenticated: boolean | null;
+  hasEncryptionKey: boolean | null;
+  loading: boolean;
+  signalIndexName: string | null;
+}
+
+const initialState: State = {
+  canUserCRUD: null,
+  hasIndexManage: null,
+  hasIndexWrite: null,
+  isSignalIndexExists: null,
+  isAuthenticated: null,
+  hasEncryptionKey: null,
+  loading: true,
+  signalIndexName: null,
+};
+
+export type Action =
+  | { type: 'updateLoading'; loading: boolean }
+  | {
+      type: 'updateHasIndexManage';
+      hasIndexManage: boolean | null;
+    }
+  | {
+      type: 'updateHasIndexWrite';
+      hasIndexWrite: boolean | null;
+    }
+  | {
+      type: 'updateIsSignalIndexExists';
+      isSignalIndexExists: boolean | null;
+    }
+  | {
+      type: 'updateIsAuthenticated';
+      isAuthenticated: boolean | null;
+    }
+  | {
+      type: 'updateHasEncryptionKey';
+      hasEncryptionKey: boolean | null;
+    }
+  | {
+      type: 'updateCanUserCRUD';
+      canUserCRUD: boolean | null;
+    }
+  | {
+      type: 'updateSignalIndexName';
+      signalIndexName: string | null;
+    };
+
+export const userInfoReducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case 'updateLoading': {
+      return {
+        ...state,
+        loading: action.loading,
+      };
+    }
+    case 'updateHasIndexManage': {
+      return {
+        ...state,
+        hasIndexManage: action.hasIndexManage,
+      };
+    }
+    case 'updateHasIndexWrite': {
+      return {
+        ...state,
+        hasIndexWrite: action.hasIndexWrite,
+      };
+    }
+    case 'updateIsSignalIndexExists': {
+      return {
+        ...state,
+        isSignalIndexExists: action.isSignalIndexExists,
+      };
+    }
+    case 'updateIsAuthenticated': {
+      return {
+        ...state,
+        isAuthenticated: action.isAuthenticated,
+      };
+    }
+    case 'updateHasEncryptionKey': {
+      return {
+        ...state,
+        hasEncryptionKey: action.hasEncryptionKey,
+      };
+    }
+    case 'updateCanUserCRUD': {
+      return {
+        ...state,
+        canUserCRUD: action.canUserCRUD,
+      };
+    }
+    case 'updateSignalIndexName': {
+      return {
+        ...state,
+        signalIndexName: action.signalIndexName,
+      };
+    }
+    default:
+      return state;
+  }
+};
+
+const StateUserInfoContext = createContext<[State, Dispatch<Action>]>([initialState, () => noop]);
+
+const useUserData = () => useContext(StateUserInfoContext);
+
+interface ManageUserInfoProps {
+  children: React.ReactNode;
+}
+
+export const ManageUserInfo = ({ children }: ManageUserInfoProps) => (
+  <StateUserInfoContext.Provider value={useReducer(userInfoReducer, initialState)}>
+    {children}
+  </StateUserInfoContext.Provider>
+);
+
+export const useUserInfo = (): State => {
+  const [
+    {
+      canUserCRUD,
+      hasIndexManage,
+      hasIndexWrite,
+      isSignalIndexExists,
+      isAuthenticated,
+      hasEncryptionKey,
+      loading,
+      signalIndexName,
+    },
+    dispatch,
+  ] = useUserData();
+  const {
+    loading: privilegeLoading,
+    isAuthenticated: isApiAuthenticated,
+    hasEncryptionKey: isApiEncryptionKey,
+    hasIndexManage: hasApiIndexManage,
+    hasIndexWrite: hasApiIndexWrite,
+  } = usePrivilegeUser();
+  const {
+    loading: indexNameLoading,
+    signalIndexExists: isApiSignalIndexExists,
+    signalIndexName: apiSignalIndexName,
+    createDeSignalIndex: createSignalIndex,
+  } = useSignalIndex();
+
+  const uiCapabilities = useKibana().services.application.capabilities;
+  const capabilitiesCanUserCRUD: boolean =
+    typeof uiCapabilities.siem.crud === 'boolean' ? uiCapabilities.siem.crud : false;
+
+  useEffect(() => {
+    if (loading !== privilegeLoading || indexNameLoading) {
+      dispatch({ type: 'updateLoading', loading: privilegeLoading || indexNameLoading });
+    }
+  }, [loading, privilegeLoading, indexNameLoading]);
+
+  useEffect(() => {
+    if (!loading && hasIndexManage !== hasApiIndexManage && hasApiIndexManage != null) {
+      dispatch({ type: 'updateHasIndexManage', hasIndexManage: hasApiIndexManage });
+    }
+  }, [loading, hasIndexManage, hasApiIndexManage]);
+
+  useEffect(() => {
+    if (!loading && hasIndexWrite !== hasApiIndexWrite && hasApiIndexWrite != null) {
+      dispatch({ type: 'updateHasIndexWrite', hasIndexWrite: hasApiIndexWrite });
+    }
+  }, [loading, hasIndexWrite, hasApiIndexWrite]);
+
+  useEffect(() => {
+    if (
+      !loading &&
+      isSignalIndexExists !== isApiSignalIndexExists &&
+      isApiSignalIndexExists != null
+    ) {
+      dispatch({ type: 'updateIsSignalIndexExists', isSignalIndexExists: isApiSignalIndexExists });
+    }
+  }, [loading, isSignalIndexExists, isApiSignalIndexExists]);
+
+  useEffect(() => {
+    if (!loading && isAuthenticated !== isApiAuthenticated && isApiAuthenticated != null) {
+      dispatch({ type: 'updateIsAuthenticated', isAuthenticated: isApiAuthenticated });
+    }
+  }, [loading, isAuthenticated, isApiAuthenticated]);
+
+  useEffect(() => {
+    if (!loading && hasEncryptionKey !== isApiEncryptionKey && isApiEncryptionKey != null) {
+      dispatch({ type: 'updateHasEncryptionKey', hasEncryptionKey: isApiEncryptionKey });
+    }
+  }, [loading, hasEncryptionKey, isApiEncryptionKey]);
+
+  useEffect(() => {
+    if (!loading && canUserCRUD !== capabilitiesCanUserCRUD && capabilitiesCanUserCRUD != null) {
+      dispatch({ type: 'updateCanUserCRUD', canUserCRUD: capabilitiesCanUserCRUD });
+    }
+  }, [loading, canUserCRUD, capabilitiesCanUserCRUD]);
+
+  useEffect(() => {
+    if (!loading && signalIndexName !== apiSignalIndexName && apiSignalIndexName != null) {
+      dispatch({ type: 'updateSignalIndexName', signalIndexName: apiSignalIndexName });
+    }
+  }, [loading, signalIndexName, apiSignalIndexName]);
+
+  useEffect(() => {
+    if (
+      isAuthenticated &&
+      hasEncryptionKey &&
+      hasIndexManage &&
+      isSignalIndexExists != null &&
+      !isSignalIndexExists &&
+      createSignalIndex != null
+    ) {
+      createSignalIndex();
+    }
+  }, [createSignalIndex, isAuthenticated, hasEncryptionKey, isSignalIndexExists, hasIndexManage]);
+
+  return {
+    loading,
+    isSignalIndexExists,
+    isAuthenticated,
+    hasEncryptionKey,
+    canUserCRUD,
+    hasIndexManage,
+    hasIndexWrite,
+    signalIndexName,
+  };
+};
diff --git a/x-pack/plugins/siem/public/containers/detection_engine/rules/__mocks__/api.ts b/x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/__mocks__/api.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/detection_engine/rules/__mocks__/api.ts
rename to x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/__mocks__/api.ts
diff --git a/x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/api.test.ts b/x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/api.test.ts
new file mode 100644
index 00000000000000..abba7c02cf8757
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/api.test.ts
@@ -0,0 +1,559 @@
+/*
+ * 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 { KibanaServices } from '../../../../common/lib/kibana';
+import {
+  addRule,
+  fetchRules,
+  fetchRuleById,
+  enableRules,
+  deleteRules,
+  duplicateRules,
+  createPrepackagedRules,
+  importRules,
+  exportRules,
+  getRuleStatusById,
+  fetchTags,
+  getPrePackagedRulesStatus,
+} from './api';
+import { ruleMock, rulesMock } from './mock';
+
+const abortCtrl = new AbortController();
+const mockKibanaServices = KibanaServices.get as jest.Mock;
+jest.mock('../../../../common/lib/kibana');
+
+const fetchMock = jest.fn();
+mockKibanaServices.mockReturnValue({ http: { fetch: fetchMock } });
+
+describe('Detections Rules API', () => {
+  describe('addRule', () => {
+    beforeEach(() => {
+      fetchMock.mockClear();
+      fetchMock.mockResolvedValue(ruleMock);
+    });
+
+    test('check parameter url, body', async () => {
+      await addRule({ rule: ruleMock, signal: abortCtrl.signal });
+      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules', {
+        body:
+          '{"description":"some desc","enabled":true,"false_positives":[],"filters":[],"from":"now-360s","index":["apm-*-transaction*","auditbeat-*","endgame-*","filebeat-*","packetbeat-*","winlogbeat-*"],"interval":"5m","rule_id":"bbd3106e-b4b5-4d7c-a1a2-47531d6a2baf","language":"kuery","risk_score":75,"name":"Test rule","query":"user.email: \'root@elastic.co\'","references":[],"severity":"high","tags":["APM"],"to":"now","type":"query","threat":[],"throttle":null}',
+        method: 'POST',
+        signal: abortCtrl.signal,
+      });
+    });
+
+    test('happy path', async () => {
+      const ruleResp = await addRule({ rule: ruleMock, signal: abortCtrl.signal });
+      expect(ruleResp).toEqual(ruleMock);
+    });
+  });
+
+  describe('fetchRules', () => {
+    beforeEach(() => {
+      fetchMock.mockClear();
+      fetchMock.mockResolvedValue(rulesMock);
+    });
+
+    test('check parameter url, query without any options', async () => {
+      await fetchRules({ signal: abortCtrl.signal });
+      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/_find', {
+        method: 'GET',
+        query: {
+          page: 1,
+          per_page: 20,
+          sort_field: 'enabled',
+          sort_order: 'desc',
+        },
+        signal: abortCtrl.signal,
+      });
+    });
+
+    test('check parameter url, query with a filter', async () => {
+      await fetchRules({
+        filterOptions: {
+          filter: 'hello world',
+          sortField: 'enabled',
+          sortOrder: 'desc',
+          showCustomRules: false,
+          showElasticRules: false,
+          tags: [],
+        },
+        signal: abortCtrl.signal,
+      });
+
+      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/_find', {
+        method: 'GET',
+        query: {
+          filter: 'alert.attributes.name: hello world',
+          page: 1,
+          per_page: 20,
+          sort_field: 'enabled',
+          sort_order: 'desc',
+        },
+        signal: abortCtrl.signal,
+      });
+    });
+
+    test('check parameter url, query with showCustomRules', async () => {
+      await fetchRules({
+        filterOptions: {
+          filter: '',
+          sortField: 'enabled',
+          sortOrder: 'desc',
+          showCustomRules: true,
+          showElasticRules: false,
+          tags: [],
+        },
+        signal: abortCtrl.signal,
+      });
+
+      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/_find', {
+        method: 'GET',
+        query: {
+          filter: 'alert.attributes.tags: "__internal_immutable:false"',
+          page: 1,
+          per_page: 20,
+          sort_field: 'enabled',
+          sort_order: 'desc',
+        },
+        signal: abortCtrl.signal,
+      });
+    });
+
+    test('check parameter url, query with showElasticRules', async () => {
+      await fetchRules({
+        filterOptions: {
+          filter: '',
+          sortField: 'enabled',
+          sortOrder: 'desc',
+          showCustomRules: false,
+          showElasticRules: true,
+          tags: [],
+        },
+        signal: abortCtrl.signal,
+      });
+
+      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/_find', {
+        method: 'GET',
+        query: {
+          filter: 'alert.attributes.tags: "__internal_immutable:true"',
+          page: 1,
+          per_page: 20,
+          sort_field: 'enabled',
+          sort_order: 'desc',
+        },
+        signal: abortCtrl.signal,
+      });
+    });
+
+    test('check parameter url, query with tags', async () => {
+      await fetchRules({
+        filterOptions: {
+          filter: '',
+          sortField: 'enabled',
+          sortOrder: 'desc',
+          showCustomRules: false,
+          showElasticRules: false,
+          tags: ['hello', 'world'],
+        },
+        signal: abortCtrl.signal,
+      });
+
+      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/_find', {
+        method: 'GET',
+        query: {
+          filter: 'alert.attributes.tags: hello AND alert.attributes.tags: world',
+          page: 1,
+          per_page: 20,
+          sort_field: 'enabled',
+          sort_order: 'desc',
+        },
+        signal: abortCtrl.signal,
+      });
+    });
+
+    test('check parameter url, query with all options', async () => {
+      await fetchRules({
+        filterOptions: {
+          filter: 'ruleName',
+          sortField: 'enabled',
+          sortOrder: 'desc',
+          showCustomRules: true,
+          showElasticRules: true,
+          tags: ['hello', 'world'],
+        },
+        signal: abortCtrl.signal,
+      });
+      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/_find', {
+        method: 'GET',
+        query: {
+          filter:
+            'alert.attributes.name: ruleName AND alert.attributes.tags: "__internal_immutable:false" AND alert.attributes.tags: "__internal_immutable:true" AND alert.attributes.tags: hello AND alert.attributes.tags: world',
+          page: 1,
+          per_page: 20,
+          sort_field: 'enabled',
+          sort_order: 'desc',
+        },
+        signal: abortCtrl.signal,
+      });
+    });
+
+    test('happy path', async () => {
+      const rulesResp = await fetchRules({ signal: abortCtrl.signal });
+      expect(rulesResp).toEqual(rulesMock);
+    });
+  });
+
+  describe('fetchRuleById', () => {
+    beforeEach(() => {
+      fetchMock.mockClear();
+      fetchMock.mockResolvedValue(ruleMock);
+    });
+
+    test('check parameter url, query', async () => {
+      await fetchRuleById({ id: 'mySuperRuleId', signal: abortCtrl.signal });
+      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules', {
+        query: {
+          id: 'mySuperRuleId',
+        },
+        method: 'GET',
+        signal: abortCtrl.signal,
+      });
+    });
+
+    test('happy path', async () => {
+      const ruleResp = await fetchRuleById({ id: 'mySuperRuleId', signal: abortCtrl.signal });
+      expect(ruleResp).toEqual(ruleMock);
+    });
+  });
+
+  describe('enableRules', () => {
+    beforeEach(() => {
+      fetchMock.mockClear();
+      fetchMock.mockResolvedValue(rulesMock);
+    });
+
+    test('check parameter url, body when enabling rules', async () => {
+      await enableRules({ ids: ['mySuperRuleId', 'mySuperRuleId_II'], enabled: true });
+      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/_bulk_update', {
+        body: '[{"id":"mySuperRuleId","enabled":true},{"id":"mySuperRuleId_II","enabled":true}]',
+        method: 'PATCH',
+      });
+    });
+    test('check parameter url, body when disabling rules', async () => {
+      await enableRules({ ids: ['mySuperRuleId', 'mySuperRuleId_II'], enabled: false });
+      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/_bulk_update', {
+        body: '[{"id":"mySuperRuleId","enabled":false},{"id":"mySuperRuleId_II","enabled":false}]',
+        method: 'PATCH',
+      });
+    });
+    test('happy path', async () => {
+      const ruleResp = await enableRules({
+        ids: ['mySuperRuleId', 'mySuperRuleId_II'],
+        enabled: true,
+      });
+      expect(ruleResp).toEqual(rulesMock);
+    });
+  });
+
+  describe('deleteRules', () => {
+    beforeEach(() => {
+      fetchMock.mockClear();
+      fetchMock.mockResolvedValue(rulesMock);
+    });
+
+    test('check parameter url, body when deleting rules', async () => {
+      await deleteRules({ ids: ['mySuperRuleId', 'mySuperRuleId_II'] });
+      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/_bulk_delete', {
+        body: '[{"id":"mySuperRuleId"},{"id":"mySuperRuleId_II"}]',
+        method: 'DELETE',
+      });
+    });
+
+    test('happy path', async () => {
+      const ruleResp = await deleteRules({
+        ids: ['mySuperRuleId', 'mySuperRuleId_II'],
+      });
+      expect(ruleResp).toEqual(rulesMock);
+    });
+  });
+
+  describe('duplicateRules', () => {
+    beforeEach(() => {
+      fetchMock.mockClear();
+      fetchMock.mockResolvedValue(rulesMock);
+    });
+
+    test('check parameter url, body when duplicating rules', async () => {
+      await duplicateRules({ rules: rulesMock.data });
+      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/_bulk_create', {
+        body:
+          '[{"actions":[],"description":"Elastic Endpoint detected Credential Dumping. Click the Elastic Endpoint icon in the event.module column or the link in the rule.reference column in the External Alerts tab of the SIEM Detections page for additional information.","enabled":false,"false_positives":[],"from":"now-660s","index":["endgame-*"],"interval":"10m","language":"kuery","output_index":".siem-signals-default","max_signals":100,"risk_score":73,"name":"Credential Dumping - Detected - Elastic Endpoint [Duplicate]","query":"event.kind:alert and event.module:endgame and event.action:cred_theft_event and endgame.metadata.type:detection","filters":[],"references":[],"severity":"high","tags":["Elastic","Endpoint"],"to":"now","type":"query","threat":[],"throttle":null,"version":1},{"actions":[],"description":"Elastic Endpoint detected an Adversary Behavior. Click the Elastic Endpoint icon in the event.module column or the link in the rule.reference column in the External Alerts tab of the SIEM Detections page for additional information.","enabled":false,"false_positives":[],"from":"now-660s","index":["endgame-*"],"interval":"10m","language":"kuery","output_index":".siem-signals-default","max_signals":100,"risk_score":47,"name":"Adversary Behavior - Detected - Elastic Endpoint [Duplicate]","query":"event.kind:alert and event.module:endgame and event.action:rules_engine_event","filters":[],"references":[],"severity":"medium","tags":["Elastic","Endpoint"],"to":"now","type":"query","threat":[],"throttle":null,"version":1}]',
+        method: 'POST',
+      });
+    });
+
+    test('happy path', async () => {
+      const ruleResp = await duplicateRules({ rules: rulesMock.data });
+      expect(ruleResp).toEqual(rulesMock);
+    });
+  });
+
+  describe('createPrepackagedRules', () => {
+    beforeEach(() => {
+      fetchMock.mockClear();
+      fetchMock.mockResolvedValue('unknown');
+    });
+
+    test('check parameter url when creating pre-packaged rules', async () => {
+      await createPrepackagedRules({ signal: abortCtrl.signal });
+      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/prepackaged', {
+        signal: abortCtrl.signal,
+        method: 'PUT',
+      });
+    });
+    test('happy path', async () => {
+      const resp = await createPrepackagedRules({ signal: abortCtrl.signal });
+      expect(resp).toEqual(true);
+    });
+  });
+
+  describe('importRules', () => {
+    const fileToImport: File = {
+      lastModified: 33,
+      name: 'fileToImport',
+      size: 89,
+      type: 'json',
+      arrayBuffer: jest.fn(),
+      slice: jest.fn(),
+      stream: jest.fn(),
+      text: jest.fn(),
+    } as File;
+    const formData = new FormData();
+    formData.append('file', fileToImport);
+
+    beforeEach(() => {
+      fetchMock.mockClear();
+      fetchMock.mockResolvedValue('unknown');
+    });
+
+    test('check parameter url, body and query when importing rules', async () => {
+      await importRules({ fileToImport, signal: abortCtrl.signal });
+      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/_import', {
+        signal: abortCtrl.signal,
+        method: 'POST',
+        body: formData,
+        headers: {
+          'Content-Type': undefined,
+        },
+        query: {
+          overwrite: false,
+        },
+      });
+    });
+
+    test('check parameter url, body and query when importing rules with overwrite', async () => {
+      await importRules({ fileToImport, overwrite: true, signal: abortCtrl.signal });
+      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/_import', {
+        signal: abortCtrl.signal,
+        method: 'POST',
+        body: formData,
+        headers: {
+          'Content-Type': undefined,
+        },
+        query: {
+          overwrite: true,
+        },
+      });
+    });
+
+    test('happy path', async () => {
+      fetchMock.mockResolvedValue({
+        success: true,
+        success_count: 33,
+        errors: [],
+      });
+      const resp = await importRules({ fileToImport, signal: abortCtrl.signal });
+      expect(resp).toEqual({
+        success: true,
+        success_count: 33,
+        errors: [],
+      });
+    });
+  });
+
+  describe('exportRules', () => {
+    const blob: Blob = {
+      size: 89,
+      type: 'json',
+      arrayBuffer: jest.fn(),
+      slice: jest.fn(),
+      stream: jest.fn(),
+      text: jest.fn(),
+    } as Blob;
+
+    beforeEach(() => {
+      fetchMock.mockClear();
+      fetchMock.mockResolvedValue(blob);
+    });
+
+    test('check parameter url, body and query when exporting rules', async () => {
+      await exportRules({
+        ids: ['mySuperRuleId', 'mySuperRuleId_II'],
+        signal: abortCtrl.signal,
+      });
+      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/_export', {
+        signal: abortCtrl.signal,
+        method: 'POST',
+        body: '{"objects":[{"rule_id":"mySuperRuleId"},{"rule_id":"mySuperRuleId_II"}]}',
+        query: {
+          exclude_export_details: false,
+          file_name: 'rules_export.ndjson',
+        },
+      });
+    });
+
+    test('check parameter url, body and query when exporting rules with excludeExportDetails', async () => {
+      await exportRules({
+        excludeExportDetails: true,
+        ids: ['mySuperRuleId', 'mySuperRuleId_II'],
+        signal: abortCtrl.signal,
+      });
+      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/_export', {
+        signal: abortCtrl.signal,
+        method: 'POST',
+        body: '{"objects":[{"rule_id":"mySuperRuleId"},{"rule_id":"mySuperRuleId_II"}]}',
+        query: {
+          exclude_export_details: true,
+          file_name: 'rules_export.ndjson',
+        },
+      });
+    });
+
+    test('check parameter url, body and query when exporting rules with fileName', async () => {
+      await exportRules({
+        filename: 'myFileName.ndjson',
+        ids: ['mySuperRuleId', 'mySuperRuleId_II'],
+        signal: abortCtrl.signal,
+      });
+      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/_export', {
+        signal: abortCtrl.signal,
+        method: 'POST',
+        body: '{"objects":[{"rule_id":"mySuperRuleId"},{"rule_id":"mySuperRuleId_II"}]}',
+        query: {
+          exclude_export_details: false,
+          file_name: 'myFileName.ndjson',
+        },
+      });
+    });
+
+    test('check parameter url, body and query when exporting rules with all options', async () => {
+      await exportRules({
+        excludeExportDetails: true,
+        filename: 'myFileName.ndjson',
+        ids: ['mySuperRuleId', 'mySuperRuleId_II'],
+        signal: abortCtrl.signal,
+      });
+      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/_export', {
+        signal: abortCtrl.signal,
+        method: 'POST',
+        body: '{"objects":[{"rule_id":"mySuperRuleId"},{"rule_id":"mySuperRuleId_II"}]}',
+        query: {
+          exclude_export_details: true,
+          file_name: 'myFileName.ndjson',
+        },
+      });
+    });
+
+    test('happy path', async () => {
+      const resp = await exportRules({
+        ids: ['mySuperRuleId', 'mySuperRuleId_II'],
+        signal: abortCtrl.signal,
+      });
+      expect(resp).toEqual(blob);
+    });
+  });
+
+  describe('getRuleStatusById', () => {
+    const statusMock = {
+      myRule: {
+        current_status: {
+          alert_id: 'alertId',
+          status_date: 'mm/dd/yyyyTHH:MM:sssz',
+          status: 'succeeded',
+          last_failure_at: null,
+          last_success_at: 'mm/dd/yyyyTHH:MM:sssz',
+          last_failure_message: null,
+          last_success_message: 'it is a success',
+        },
+        failures: [],
+      },
+    };
+
+    beforeEach(() => {
+      fetchMock.mockClear();
+      fetchMock.mockResolvedValue(statusMock);
+    });
+
+    test('check parameter url, query', async () => {
+      await getRuleStatusById({ id: 'mySuperRuleId', signal: abortCtrl.signal });
+      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/_find_statuses', {
+        body: '{"ids":["mySuperRuleId"]}',
+        method: 'POST',
+        signal: abortCtrl.signal,
+      });
+    });
+
+    test('happy path', async () => {
+      const ruleResp = await getRuleStatusById({ id: 'mySuperRuleId', signal: abortCtrl.signal });
+      expect(ruleResp).toEqual(statusMock);
+    });
+  });
+
+  describe('fetchTags', () => {
+    beforeEach(() => {
+      fetchMock.mockClear();
+      fetchMock.mockResolvedValue(['some', 'tags']);
+    });
+
+    test('check parameter url when fetching tags', async () => {
+      await fetchTags({ signal: abortCtrl.signal });
+      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/tags', {
+        signal: abortCtrl.signal,
+        method: 'GET',
+      });
+    });
+
+    test('happy path', async () => {
+      const resp = await fetchTags({ signal: abortCtrl.signal });
+      expect(resp).toEqual(['some', 'tags']);
+    });
+  });
+
+  describe('getPrePackagedRulesStatus', () => {
+    const prePackagedRulesStatus = {
+      rules_custom_installed: 33,
+      rules_installed: 12,
+      rules_not_installed: 0,
+      rules_not_updated: 2,
+    };
+    beforeEach(() => {
+      fetchMock.mockClear();
+      fetchMock.mockResolvedValue(prePackagedRulesStatus);
+    });
+    test('check parameter url when fetching tags', async () => {
+      await getPrePackagedRulesStatus({ signal: abortCtrl.signal });
+      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/prepackaged/_status', {
+        signal: abortCtrl.signal,
+        method: 'GET',
+      });
+    });
+    test('happy path', async () => {
+      const resp = await getPrePackagedRulesStatus({ signal: abortCtrl.signal });
+      expect(resp).toEqual(prePackagedRulesStatus);
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/api.ts b/x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/api.ts
new file mode 100644
index 00000000000000..9ae29a740dd870
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/api.ts
@@ -0,0 +1,331 @@
+/*
+ * 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 {
+  DETECTION_ENGINE_RULES_URL,
+  DETECTION_ENGINE_PREPACKAGED_URL,
+  DETECTION_ENGINE_RULES_STATUS_URL,
+  DETECTION_ENGINE_PREPACKAGED_RULES_STATUS_URL,
+  DETECTION_ENGINE_TAGS_URL,
+} from '../../../../../common/constants';
+import {
+  AddRulesProps,
+  DeleteRulesProps,
+  DuplicateRulesProps,
+  EnableRulesProps,
+  FetchRulesProps,
+  FetchRulesResponse,
+  NewRule,
+  Rule,
+  FetchRuleProps,
+  BasicFetchProps,
+  ImportDataProps,
+  ExportDocumentsProps,
+  RuleStatusResponse,
+  ImportDataResponse,
+  PrePackagedRulesStatusResponse,
+  BulkRuleResponse,
+} from './types';
+import { KibanaServices } from '../../../../common/lib/kibana';
+import * as i18n from '../../../pages/detection_engine/rules/translations';
+
+/**
+ * Add provided Rule
+ *
+ * @param rule to add
+ * @param signal to cancel request
+ *
+ * @throws An error if response is not OK
+ */
+export const addRule = async ({ rule, signal }: AddRulesProps): Promise<NewRule> =>
+  KibanaServices.get().http.fetch<NewRule>(DETECTION_ENGINE_RULES_URL, {
+    method: rule.id != null ? 'PUT' : 'POST',
+    body: JSON.stringify(rule),
+    signal,
+  });
+
+/**
+ * Fetches all rules from the Detection Engine API
+ *
+ * @param filterOptions desired filters (e.g. filter/sortField/sortOrder)
+ * @param pagination desired pagination options (e.g. page/perPage)
+ * @param signal to cancel request
+ *
+ * @throws An error if response is not OK
+ */
+export const fetchRules = async ({
+  filterOptions = {
+    filter: '',
+    sortField: 'enabled',
+    sortOrder: 'desc',
+    showCustomRules: false,
+    showElasticRules: false,
+    tags: [],
+  },
+  pagination = {
+    page: 1,
+    perPage: 20,
+    total: 0,
+  },
+  signal,
+}: FetchRulesProps): Promise<FetchRulesResponse> => {
+  const filters = [
+    ...(filterOptions.filter.length ? [`alert.attributes.name: ${filterOptions.filter}`] : []),
+    ...(filterOptions.showCustomRules
+      ? [`alert.attributes.tags: "__internal_immutable:false"`]
+      : []),
+    ...(filterOptions.showElasticRules
+      ? [`alert.attributes.tags: "__internal_immutable:true"`]
+      : []),
+    ...(filterOptions.tags?.map(t => `alert.attributes.tags: ${t}`) ?? []),
+  ];
+
+  const query = {
+    page: pagination.page,
+    per_page: pagination.perPage,
+    sort_field: filterOptions.sortField,
+    sort_order: filterOptions.sortOrder,
+    ...(filters.length ? { filter: filters.join(' AND ') } : {}),
+  };
+
+  return KibanaServices.get().http.fetch<FetchRulesResponse>(
+    `${DETECTION_ENGINE_RULES_URL}/_find`,
+    {
+      method: 'GET',
+      query,
+      signal,
+    }
+  );
+};
+
+/**
+ * Fetch a Rule by providing a Rule ID
+ *
+ * @param id Rule ID's (not rule_id)
+ * @param signal to cancel request
+ *
+ * @throws An error if response is not OK
+ */
+export const fetchRuleById = async ({ id, signal }: FetchRuleProps): Promise<Rule> =>
+  KibanaServices.get().http.fetch<Rule>(DETECTION_ENGINE_RULES_URL, {
+    method: 'GET',
+    query: { id },
+    signal,
+  });
+
+/**
+ * Enables/Disables provided Rule ID's
+ *
+ * @param ids array of Rule ID's (not rule_id) to enable/disable
+ * @param enabled to enable or disable
+ *
+ * @throws An error if response is not OK
+ */
+export const enableRules = async ({ ids, enabled }: EnableRulesProps): Promise<BulkRuleResponse> =>
+  KibanaServices.get().http.fetch<BulkRuleResponse>(`${DETECTION_ENGINE_RULES_URL}/_bulk_update`, {
+    method: 'PATCH',
+    body: JSON.stringify(ids.map(id => ({ id, enabled }))),
+  });
+
+/**
+ * Deletes provided Rule ID's
+ *
+ * @param ids array of Rule ID's (not rule_id) to delete
+ *
+ * @throws An error if response is not OK
+ */
+export const deleteRules = async ({ ids }: DeleteRulesProps): Promise<BulkRuleResponse> =>
+  KibanaServices.get().http.fetch<Rule[]>(`${DETECTION_ENGINE_RULES_URL}/_bulk_delete`, {
+    method: 'DELETE',
+    body: JSON.stringify(ids.map(id => ({ id }))),
+  });
+
+/**
+ * Duplicates provided Rules
+ *
+ * @param rules to duplicate
+ *
+ * @throws An error if response is not OK
+ */
+export const duplicateRules = async ({ rules }: DuplicateRulesProps): Promise<BulkRuleResponse> =>
+  KibanaServices.get().http.fetch<Rule[]>(`${DETECTION_ENGINE_RULES_URL}/_bulk_create`, {
+    method: 'POST',
+    body: JSON.stringify(
+      rules.map(rule => ({
+        ...rule,
+        name: `${rule.name} [${i18n.DUPLICATE}]`,
+        created_at: undefined,
+        created_by: undefined,
+        id: undefined,
+        rule_id: undefined,
+        updated_at: undefined,
+        updated_by: undefined,
+        enabled: rule.enabled,
+        immutable: undefined,
+        last_success_at: undefined,
+        last_success_message: undefined,
+        last_failure_at: undefined,
+        last_failure_message: undefined,
+        status: undefined,
+        status_date: undefined,
+      }))
+    ),
+  });
+
+/**
+ * Create Prepackaged Rules
+ *
+ * @param signal AbortSignal for cancelling request
+ *
+ * @throws An error if response is not OK
+ */
+export const createPrepackagedRules = async ({ signal }: BasicFetchProps): Promise<boolean> => {
+  await KibanaServices.get().http.fetch<unknown>(DETECTION_ENGINE_PREPACKAGED_URL, {
+    method: 'PUT',
+    signal,
+  });
+
+  return true;
+};
+
+/**
+ * Imports rules in the same format as exported via the _export API
+ *
+ * @param fileToImport File to upload containing rules to import
+ * @param overwrite whether or not to overwrite rules with the same ruleId
+ * @param signal AbortSignal for cancelling request
+ *
+ * @throws An error if response is not OK
+ */
+export const importRules = async ({
+  fileToImport,
+  overwrite = false,
+  signal,
+}: ImportDataProps): Promise<ImportDataResponse> => {
+  const formData = new FormData();
+  formData.append('file', fileToImport);
+
+  return KibanaServices.get().http.fetch<ImportDataResponse>(
+    `${DETECTION_ENGINE_RULES_URL}/_import`,
+    {
+      method: 'POST',
+      headers: { 'Content-Type': undefined },
+      query: { overwrite },
+      body: formData,
+      signal,
+    }
+  );
+};
+
+/**
+ * Export rules from the server as a file download
+ *
+ * @param excludeExportDetails whether or not to exclude additional details at bottom of exported file (defaults to false)
+ * @param filename of exported rules. Be sure to include `.ndjson` extension! (defaults to localized `rules_export.ndjson`)
+ * @param ruleIds array of rule_id's (not id!) to export (empty array exports _all_ rules)
+ * @param signal AbortSignal for cancelling request
+ *
+ * @throws An error if response is not OK
+ */
+export const exportRules = async ({
+  excludeExportDetails = false,
+  filename = `${i18n.EXPORT_FILENAME}.ndjson`,
+  ids = [],
+  signal,
+}: ExportDocumentsProps): Promise<Blob> => {
+  const body =
+    ids.length > 0 ? JSON.stringify({ objects: ids.map(rule => ({ rule_id: rule })) }) : undefined;
+
+  return KibanaServices.get().http.fetch<Blob>(`${DETECTION_ENGINE_RULES_URL}/_export`, {
+    method: 'POST',
+    body,
+    query: {
+      exclude_export_details: excludeExportDetails,
+      file_name: filename,
+    },
+    signal,
+  });
+};
+
+/**
+ * Get Rule Status provided Rule ID
+ *
+ * @param id string of Rule ID's (not rule_id)
+ * @param signal AbortSignal for cancelling request
+ *
+ * @throws An error if response is not OK
+ */
+export const getRuleStatusById = async ({
+  id,
+  signal,
+}: {
+  id: string;
+  signal: AbortSignal;
+}): Promise<RuleStatusResponse> =>
+  KibanaServices.get().http.fetch<RuleStatusResponse>(DETECTION_ENGINE_RULES_STATUS_URL, {
+    method: 'POST',
+    body: JSON.stringify({ ids: [id] }),
+    signal,
+  });
+
+/**
+ * Return rule statuses given list of alert ids
+ *
+ * @param ids array of string of Rule ID's (not rule_id)
+ * @param signal AbortSignal for cancelling request
+ *
+ * @throws An error if response is not OK
+ */
+export const getRulesStatusByIds = async ({
+  ids,
+  signal,
+}: {
+  ids: string[];
+  signal: AbortSignal;
+}): Promise<RuleStatusResponse> => {
+  const res = await KibanaServices.get().http.fetch<RuleStatusResponse>(
+    DETECTION_ENGINE_RULES_STATUS_URL,
+    {
+      method: 'POST',
+      body: JSON.stringify({ ids }),
+      signal,
+    }
+  );
+  return res;
+};
+
+/**
+ * Fetch all unique Tags used by Rules
+ *
+ * @param signal to cancel request
+ *
+ * @throws An error if response is not OK
+ */
+export const fetchTags = async ({ signal }: { signal: AbortSignal }): Promise<string[]> =>
+  KibanaServices.get().http.fetch<string[]>(DETECTION_ENGINE_TAGS_URL, {
+    method: 'GET',
+    signal,
+  });
+
+/**
+ * Get pre packaged rules Status
+ *
+ * @param signal AbortSignal for cancelling request
+ *
+ * @throws An error if response is not OK
+ */
+export const getPrePackagedRulesStatus = async ({
+  signal,
+}: {
+  signal: AbortSignal;
+}): Promise<PrePackagedRulesStatusResponse> =>
+  KibanaServices.get().http.fetch<PrePackagedRulesStatusResponse>(
+    DETECTION_ENGINE_PREPACKAGED_RULES_STATUS_URL,
+    {
+      method: 'GET',
+      signal,
+    }
+  );
diff --git a/x-pack/plugins/siem/public/containers/detection_engine/rules/fetch_index_patterns.test.tsx b/x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/fetch_index_patterns.test.tsx
similarity index 98%
rename from x-pack/plugins/siem/public/containers/detection_engine/rules/fetch_index_patterns.test.tsx
rename to x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/fetch_index_patterns.test.tsx
index 8c688fe5615f00..79d5886f8845f1 100644
--- a/x-pack/plugins/siem/public/containers/detection_engine/rules/fetch_index_patterns.test.tsx
+++ b/x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/fetch_index_patterns.test.tsx
@@ -6,14 +6,14 @@
 
 import { renderHook, act } from '@testing-library/react-hooks';
 
-import { DEFAULT_INDEX_PATTERN } from '../../../../common/constants';
-import { useApolloClient } from '../../../utils/apollo_context';
-import { mocksSource } from '../../source/mock';
+import { DEFAULT_INDEX_PATTERN } from '../../../../../common/constants';
+import { useApolloClient } from '../../../../common/utils/apollo_context';
+import { mocksSource } from '../../../../common/containers/source/mock';
 
 import { useFetchIndexPatterns, Return } from './fetch_index_patterns';
 
 const mockUseApolloClient = useApolloClient as jest.Mock;
-jest.mock('../../../utils/apollo_context');
+jest.mock('../../../../common/utils/apollo_context');
 
 describe('useFetchIndexPatterns', () => {
   beforeEach(() => {
diff --git a/x-pack/plugins/siem/public/containers/detection_engine/rules/fetch_index_patterns.tsx b/x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/fetch_index_patterns.tsx
similarity index 89%
rename from x-pack/plugins/siem/public/containers/detection_engine/rules/fetch_index_patterns.tsx
rename to x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/fetch_index_patterns.tsx
index 7e222045a1a3ba..dec9f344e16b83 100644
--- a/x-pack/plugins/siem/public/containers/detection_engine/rules/fetch_index_patterns.tsx
+++ b/x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/fetch_index_patterns.tsx
@@ -8,16 +8,16 @@ import { isEmpty, get } from 'lodash/fp';
 import { useEffect, useState, Dispatch, SetStateAction } from 'react';
 import deepEqual from 'fast-deep-equal';
 
-import { IIndexPattern } from '../../../../../../../src/plugins/data/public';
+import { IIndexPattern } from '../../../../../../../../src/plugins/data/public';
 import {
   BrowserFields,
   getBrowserFields,
   getIndexFields,
   sourceQuery,
-} from '../../../containers/source';
-import { errorToToaster, useStateToaster } from '../../../components/toasters';
-import { SourceQuery } from '../../../graphql/types';
-import { useApolloClient } from '../../../utils/apollo_context';
+} from '../../../../common/containers/source';
+import { errorToToaster, useStateToaster } from '../../../../common/components/toasters';
+import { SourceQuery } from '../../../../graphql/types';
+import { useApolloClient } from '../../../../common/utils/apollo_context';
 
 import * as i18n from './translations';
 
diff --git a/x-pack/plugins/siem/public/containers/detection_engine/rules/index.ts b/x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/index.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/detection_engine/rules/index.ts
rename to x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/index.ts
diff --git a/x-pack/plugins/siem/public/containers/detection_engine/rules/mock.ts b/x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/mock.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/detection_engine/rules/mock.ts
rename to x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/mock.ts
diff --git a/x-pack/plugins/siem/public/containers/detection_engine/rules/persist_rule.test.tsx b/x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/persist_rule.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/containers/detection_engine/rules/persist_rule.test.tsx
rename to x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/persist_rule.test.tsx
diff --git a/x-pack/plugins/siem/public/containers/detection_engine/rules/persist_rule.tsx b/x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/persist_rule.tsx
similarity index 94%
rename from x-pack/plugins/siem/public/containers/detection_engine/rules/persist_rule.tsx
rename to x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/persist_rule.tsx
index 4d4f6c9d8f63a4..03080bf68cbf53 100644
--- a/x-pack/plugins/siem/public/containers/detection_engine/rules/persist_rule.tsx
+++ b/x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/persist_rule.tsx
@@ -6,7 +6,7 @@
 
 import { useEffect, useState, Dispatch } from 'react';
 
-import { errorToToaster, useStateToaster } from '../../../components/toasters';
+import { errorToToaster, useStateToaster } from '../../../../common/components/toasters';
 
 import { addRule as persistRule } from './api';
 import * as i18n from './translations';
diff --git a/x-pack/plugins/siem/public/containers/detection_engine/rules/translations.ts b/x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/detection_engine/rules/translations.ts
rename to x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/translations.ts
diff --git a/x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/types.ts b/x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/types.ts
new file mode 100644
index 00000000000000..897568cdbf16ed
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/types.ts
@@ -0,0 +1,246 @@
+/*
+ * 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 * as t from 'io-ts';
+
+import { RuleTypeSchema } from '../../../../../common/detection_engine/types';
+
+/**
+ * Params is an "record", since it is a type of AlertActionParams which is action templates.
+ * @see x-pack/plugins/alerting/common/alert.ts
+ */
+export const action = t.exact(
+  t.type({
+    group: t.string,
+    id: t.string,
+    action_type_id: t.string,
+    params: t.record(t.string, t.any),
+  })
+);
+
+export const NewRuleSchema = t.intersection([
+  t.type({
+    description: t.string,
+    enabled: t.boolean,
+    interval: t.string,
+    name: t.string,
+    risk_score: t.number,
+    severity: t.string,
+    type: RuleTypeSchema,
+  }),
+  t.partial({
+    actions: t.array(action),
+    anomaly_threshold: t.number,
+    created_by: t.string,
+    false_positives: t.array(t.string),
+    filters: t.array(t.unknown),
+    from: t.string,
+    id: t.string,
+    index: t.array(t.string),
+    language: t.string,
+    machine_learning_job_id: t.string,
+    max_signals: t.number,
+    query: t.string,
+    references: t.array(t.string),
+    rule_id: t.string,
+    saved_id: t.string,
+    tags: t.array(t.string),
+    threat: t.array(t.unknown),
+    throttle: t.union([t.string, t.null]),
+    to: t.string,
+    updated_by: t.string,
+    note: t.string,
+  }),
+]);
+
+export const NewRulesSchema = t.array(NewRuleSchema);
+export type NewRule = t.TypeOf<typeof NewRuleSchema>;
+
+export interface AddRulesProps {
+  rule: NewRule;
+  signal: AbortSignal;
+}
+
+const MetaRule = t.intersection([
+  t.type({
+    from: t.string,
+  }),
+  t.partial({
+    throttle: t.string,
+    kibana_siem_app_url: t.string,
+  }),
+]);
+
+export const RuleSchema = t.intersection([
+  t.type({
+    created_at: t.string,
+    created_by: t.string,
+    description: t.string,
+    enabled: t.boolean,
+    false_positives: t.array(t.string),
+    from: t.string,
+    id: t.string,
+    interval: t.string,
+    immutable: t.boolean,
+    name: t.string,
+    max_signals: t.number,
+    references: t.array(t.string),
+    risk_score: t.number,
+    rule_id: t.string,
+    severity: t.string,
+    tags: t.array(t.string),
+    type: RuleTypeSchema,
+    to: t.string,
+    threat: t.array(t.unknown),
+    updated_at: t.string,
+    updated_by: t.string,
+    actions: t.array(action),
+    throttle: t.union([t.string, t.null]),
+  }),
+  t.partial({
+    anomaly_threshold: t.number,
+    filters: t.array(t.unknown),
+    index: t.array(t.string),
+    language: t.string,
+    last_failure_at: t.string,
+    last_failure_message: t.string,
+    meta: MetaRule,
+    machine_learning_job_id: t.string,
+    output_index: t.string,
+    query: t.string,
+    saved_id: t.string,
+    status: t.string,
+    status_date: t.string,
+    timeline_id: t.string,
+    timeline_title: t.string,
+    note: t.string,
+    version: t.number,
+  }),
+]);
+
+export const RulesSchema = t.array(RuleSchema);
+
+export type Rule = t.TypeOf<typeof RuleSchema>;
+export type Rules = t.TypeOf<typeof RulesSchema>;
+
+export interface RuleError {
+  id?: string;
+  rule_id?: string;
+  error: { status_code: number; message: string };
+}
+
+export type BulkRuleResponse = Array<Rule | RuleError>;
+
+export interface RuleResponseBuckets {
+  rules: Rule[];
+  errors: RuleError[];
+}
+
+export interface PaginationOptions {
+  page: number;
+  perPage: number;
+  total: number;
+}
+
+export interface FetchRulesProps {
+  pagination?: PaginationOptions;
+  filterOptions?: FilterOptions;
+  signal: AbortSignal;
+}
+
+export interface FilterOptions {
+  filter: string;
+  sortField: string;
+  sortOrder: 'asc' | 'desc';
+  showCustomRules?: boolean;
+  showElasticRules?: boolean;
+  tags?: string[];
+}
+
+export interface FetchRulesResponse {
+  page: number;
+  perPage: number;
+  total: number;
+  data: Rule[];
+}
+
+export interface FetchRuleProps {
+  id: string;
+  signal: AbortSignal;
+}
+
+export interface EnableRulesProps {
+  ids: string[];
+  enabled: boolean;
+}
+
+export interface DeleteRulesProps {
+  ids: string[];
+}
+
+export interface DuplicateRulesProps {
+  rules: Rule[];
+}
+
+export interface BasicFetchProps {
+  signal: AbortSignal;
+}
+
+export interface ImportDataProps {
+  fileToImport: File;
+  overwrite?: boolean;
+  signal: AbortSignal;
+}
+
+export interface ImportRulesResponseError {
+  rule_id: string;
+  error: {
+    status_code: number;
+    message: string;
+  };
+}
+
+export interface ImportDataResponse {
+  success: boolean;
+  success_count: number;
+  errors: ImportRulesResponseError[];
+}
+
+export interface ExportDocumentsProps {
+  ids: string[];
+  filename?: string;
+  excludeExportDetails?: boolean;
+  signal: AbortSignal;
+}
+
+export interface RuleStatus {
+  current_status: RuleInfoStatus;
+  failures: RuleInfoStatus[];
+}
+
+export type RuleStatusType = 'executing' | 'failed' | 'going to run' | 'succeeded';
+export interface RuleInfoStatus {
+  alert_id: string;
+  status_date: string;
+  status: RuleStatusType | null;
+  last_failure_at: string | null;
+  last_success_at: string | null;
+  last_failure_message: string | null;
+  last_success_message: string | null;
+  last_look_back_date: string | null | undefined;
+  gap: string | null | undefined;
+  bulk_create_time_durations: string[] | null | undefined;
+  search_after_time_durations: string[] | null | undefined;
+}
+
+export type RuleStatusResponse = Record<string, RuleStatus>;
+
+export interface PrePackagedRulesStatusResponse {
+  rules_custom_installed: number;
+  rules_installed: number;
+  rules_not_installed: number;
+  rules_not_updated: number;
+}
diff --git a/x-pack/plugins/siem/public/containers/detection_engine/rules/use_pre_packaged_rules.test.tsx b/x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/use_pre_packaged_rules.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/containers/detection_engine/rules/use_pre_packaged_rules.test.tsx
rename to x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/use_pre_packaged_rules.test.tsx
diff --git a/x-pack/plugins/siem/public/containers/detection_engine/rules/use_pre_packaged_rules.tsx b/x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/use_pre_packaged_rules.tsx
similarity index 98%
rename from x-pack/plugins/siem/public/containers/detection_engine/rules/use_pre_packaged_rules.tsx
rename to x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/use_pre_packaged_rules.tsx
index 44d5de10e361a0..f1897002e13cde 100644
--- a/x-pack/plugins/siem/public/containers/detection_engine/rules/use_pre_packaged_rules.tsx
+++ b/x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/use_pre_packaged_rules.tsx
@@ -6,7 +6,11 @@
 
 import { useEffect, useState } from 'react';
 
-import { errorToToaster, useStateToaster, displaySuccessToast } from '../../../components/toasters';
+import {
+  errorToToaster,
+  useStateToaster,
+  displaySuccessToast,
+} from '../../../../common/components/toasters';
 import { getPrePackagedRulesStatus, createPrepackagedRules } from './api';
 import * as i18n from './translations';
 
diff --git a/x-pack/plugins/siem/public/containers/detection_engine/rules/use_rule.test.tsx b/x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/use_rule.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/containers/detection_engine/rules/use_rule.test.tsx
rename to x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/use_rule.test.tsx
diff --git a/x-pack/plugins/siem/public/containers/detection_engine/rules/use_rule.tsx b/x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/use_rule.tsx
similarity index 94%
rename from x-pack/plugins/siem/public/containers/detection_engine/rules/use_rule.tsx
rename to x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/use_rule.tsx
index d6a49e006e1b83..6ae5da3e56ff64 100644
--- a/x-pack/plugins/siem/public/containers/detection_engine/rules/use_rule.tsx
+++ b/x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/use_rule.tsx
@@ -6,7 +6,7 @@
 
 import { useEffect, useState } from 'react';
 
-import { errorToToaster, useStateToaster } from '../../../components/toasters';
+import { errorToToaster, useStateToaster } from '../../../../common/components/toasters';
 import { fetchRuleById } from './api';
 import * as i18n from './translations';
 import { Rule } from './types';
diff --git a/x-pack/plugins/siem/public/containers/detection_engine/rules/use_rule_status.test.tsx b/x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/use_rule_status.test.tsx
similarity index 99%
rename from x-pack/plugins/siem/public/containers/detection_engine/rules/use_rule_status.test.tsx
rename to x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/use_rule_status.test.tsx
index f74c2bad1019e8..f203eca42cde62 100644
--- a/x-pack/plugins/siem/public/containers/detection_engine/rules/use_rule_status.test.tsx
+++ b/x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/use_rule_status.test.tsx
@@ -12,7 +12,7 @@ import {
   ReturnRulesStatuses,
 } from './use_rule_status';
 import * as api from './api';
-import { Rule } from '../rules/types';
+import { Rule } from './types';
 
 jest.mock('./api');
 
diff --git a/x-pack/plugins/siem/public/containers/detection_engine/rules/use_rule_status.tsx b/x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/use_rule_status.tsx
similarity index 97%
rename from x-pack/plugins/siem/public/containers/detection_engine/rules/use_rule_status.tsx
rename to x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/use_rule_status.tsx
index 412fc0706b1517..9164f38d2ac287 100644
--- a/x-pack/plugins/siem/public/containers/detection_engine/rules/use_rule_status.tsx
+++ b/x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/use_rule_status.tsx
@@ -6,7 +6,7 @@
 
 import { useEffect, useRef, useState } from 'react';
 
-import { errorToToaster, useStateToaster } from '../../../components/toasters';
+import { errorToToaster, useStateToaster } from '../../../../common/components/toasters';
 import { RuleStatusRowItemType } from '../../../pages/detection_engine/rules/all/columns';
 import { getRuleStatusById, getRulesStatusByIds } from './api';
 import * as i18n from './translations';
diff --git a/x-pack/plugins/siem/public/containers/detection_engine/rules/use_rules.test.tsx b/x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/use_rules.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/containers/detection_engine/rules/use_rules.test.tsx
rename to x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/use_rules.test.tsx
diff --git a/x-pack/plugins/siem/public/containers/detection_engine/rules/use_rules.tsx b/x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/use_rules.tsx
similarity index 97%
rename from x-pack/plugins/siem/public/containers/detection_engine/rules/use_rules.tsx
rename to x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/use_rules.tsx
index 6e41e229c24909..3a074f2bc3785a 100644
--- a/x-pack/plugins/siem/public/containers/detection_engine/rules/use_rules.tsx
+++ b/x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/use_rules.tsx
@@ -8,7 +8,7 @@ import { noop } from 'lodash/fp';
 import { useEffect, useState, useRef } from 'react';
 
 import { FetchRulesResponse, FilterOptions, PaginationOptions, Rule } from './types';
-import { errorToToaster, useStateToaster } from '../../../components/toasters';
+import { errorToToaster, useStateToaster } from '../../../../common/components/toasters';
 import { fetchRules } from './api';
 import * as i18n from './translations';
 
diff --git a/x-pack/plugins/siem/public/containers/detection_engine/rules/use_tags.test.tsx b/x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/use_tags.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/containers/detection_engine/rules/use_tags.test.tsx
rename to x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/use_tags.test.tsx
diff --git a/x-pack/plugins/siem/public/containers/detection_engine/rules/use_tags.tsx b/x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/use_tags.tsx
similarity index 94%
rename from x-pack/plugins/siem/public/containers/detection_engine/rules/use_tags.tsx
rename to x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/use_tags.tsx
index 669efedc619bbc..ebfe73f2f08639 100644
--- a/x-pack/plugins/siem/public/containers/detection_engine/rules/use_tags.tsx
+++ b/x-pack/plugins/siem/public/alerts/containers/detection_engine/rules/use_tags.tsx
@@ -6,7 +6,7 @@
 
 import { noop } from 'lodash/fp';
 import { useEffect, useState, useRef } from 'react';
-import { errorToToaster, useStateToaster } from '../../../components/toasters';
+import { errorToToaster, useStateToaster } from '../../../../common/components/toasters';
 import { fetchTags } from './api';
 import * as i18n from './translations';
 
diff --git a/x-pack/plugins/siem/public/containers/detection_engine/signals/__mocks__/api.ts b/x-pack/plugins/siem/public/alerts/containers/detection_engine/signals/__mocks__/api.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/detection_engine/signals/__mocks__/api.ts
rename to x-pack/plugins/siem/public/alerts/containers/detection_engine/signals/__mocks__/api.ts
diff --git a/x-pack/plugins/siem/public/alerts/containers/detection_engine/signals/api.test.ts b/x-pack/plugins/siem/public/alerts/containers/detection_engine/signals/api.test.ts
new file mode 100644
index 00000000000000..67d81d19faa7c5
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/containers/detection_engine/signals/api.test.ts
@@ -0,0 +1,165 @@
+/*
+ * 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 { KibanaServices } from '../../../../common/lib/kibana';
+import {
+  signalsMock,
+  mockSignalsQuery,
+  mockStatusSignalQuery,
+  mockSignalIndex,
+  mockUserPrivilege,
+} from './mock';
+import {
+  fetchQuerySignals,
+  updateSignalStatus,
+  getSignalIndex,
+  getUserPrivilege,
+  createSignalIndex,
+} from './api';
+
+const abortCtrl = new AbortController();
+const mockKibanaServices = KibanaServices.get as jest.Mock;
+jest.mock('../../../../common/lib/kibana');
+
+const fetchMock = jest.fn();
+mockKibanaServices.mockReturnValue({ http: { fetch: fetchMock } });
+
+describe('Detections Signals API', () => {
+  describe('fetchQuerySignals', () => {
+    beforeEach(() => {
+      fetchMock.mockClear();
+      fetchMock.mockResolvedValue(signalsMock);
+    });
+
+    test('check parameter url, body', async () => {
+      await fetchQuerySignals({ query: mockSignalsQuery, signal: abortCtrl.signal });
+      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/signals/search', {
+        body:
+          '{"aggs":{"signalsByGrouping":{"terms":{"field":"signal.rule.risk_score","missing":"All others","order":{"_count":"desc"},"size":10},"aggs":{"signals":{"date_histogram":{"field":"@timestamp","fixed_interval":"81000000ms","min_doc_count":0,"extended_bounds":{"min":1579644343954,"max":1582236343955}}}}}},"query":{"bool":{"filter":[{"bool":{"must":[],"filter":[{"match_all":{}}],"should":[],"must_not":[]}},{"range":{"@timestamp":{"gte":1579644343954,"lte":1582236343955}}}]}}}',
+        method: 'POST',
+        signal: abortCtrl.signal,
+      });
+    });
+
+    test('happy path', async () => {
+      const signalsResp = await fetchQuerySignals({
+        query: mockSignalsQuery,
+        signal: abortCtrl.signal,
+      });
+      expect(signalsResp).toEqual(signalsMock);
+    });
+  });
+
+  describe('updateSignalStatus', () => {
+    beforeEach(() => {
+      fetchMock.mockClear();
+      fetchMock.mockResolvedValue({});
+    });
+
+    test('check parameter url, body when closing a signal', async () => {
+      await updateSignalStatus({
+        query: mockStatusSignalQuery,
+        signal: abortCtrl.signal,
+        status: 'closed',
+      });
+      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/signals/status', {
+        body:
+          '{"status":"closed","bool":{"filter":{"terms":{"_id":["b4ee5c32e3a321057edcc953ca17228c6fdfe5ba43fdbbdaffa8cefa11605cc5"]}}}}',
+        method: 'POST',
+        signal: abortCtrl.signal,
+      });
+    });
+
+    test('check parameter url, body when opening a signal', async () => {
+      await updateSignalStatus({
+        query: mockStatusSignalQuery,
+        signal: abortCtrl.signal,
+        status: 'open',
+      });
+      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/signals/status', {
+        body:
+          '{"status":"open","bool":{"filter":{"terms":{"_id":["b4ee5c32e3a321057edcc953ca17228c6fdfe5ba43fdbbdaffa8cefa11605cc5"]}}}}',
+        method: 'POST',
+        signal: abortCtrl.signal,
+      });
+    });
+
+    test('happy path', async () => {
+      const signalsResp = await updateSignalStatus({
+        query: mockStatusSignalQuery,
+        signal: abortCtrl.signal,
+        status: 'open',
+      });
+      expect(signalsResp).toEqual({});
+    });
+  });
+
+  describe('getSignalIndex', () => {
+    beforeEach(() => {
+      fetchMock.mockClear();
+      fetchMock.mockResolvedValue(mockSignalIndex);
+    });
+
+    test('check parameter url', async () => {
+      await getSignalIndex({ signal: abortCtrl.signal });
+      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/index', {
+        method: 'GET',
+        signal: abortCtrl.signal,
+      });
+    });
+
+    test('happy path', async () => {
+      const signalsResp = await getSignalIndex({
+        signal: abortCtrl.signal,
+      });
+      expect(signalsResp).toEqual(mockSignalIndex);
+    });
+  });
+
+  describe('getUserPrivilege', () => {
+    beforeEach(() => {
+      fetchMock.mockClear();
+      fetchMock.mockResolvedValue(mockUserPrivilege);
+    });
+
+    test('check parameter url', async () => {
+      await getUserPrivilege({ signal: abortCtrl.signal });
+      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/privileges', {
+        method: 'GET',
+        signal: abortCtrl.signal,
+      });
+    });
+
+    test('happy path', async () => {
+      const signalsResp = await getUserPrivilege({
+        signal: abortCtrl.signal,
+      });
+      expect(signalsResp).toEqual(mockUserPrivilege);
+    });
+  });
+
+  describe('createSignalIndex', () => {
+    beforeEach(() => {
+      fetchMock.mockClear();
+      fetchMock.mockResolvedValue(mockSignalIndex);
+    });
+
+    test('check parameter url', async () => {
+      await createSignalIndex({ signal: abortCtrl.signal });
+      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/index', {
+        method: 'POST',
+        signal: abortCtrl.signal,
+      });
+    });
+
+    test('happy path', async () => {
+      const signalsResp = await createSignalIndex({
+        signal: abortCtrl.signal,
+      });
+      expect(signalsResp).toEqual(mockSignalIndex);
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/alerts/containers/detection_engine/signals/api.ts b/x-pack/plugins/siem/public/alerts/containers/detection_engine/signals/api.ts
new file mode 100644
index 00000000000000..860305dd58e679
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/containers/detection_engine/signals/api.ts
@@ -0,0 +1,101 @@
+/*
+ * 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 {
+  DETECTION_ENGINE_QUERY_SIGNALS_URL,
+  DETECTION_ENGINE_SIGNALS_STATUS_URL,
+  DETECTION_ENGINE_INDEX_URL,
+  DETECTION_ENGINE_PRIVILEGES_URL,
+} from '../../../../../common/constants';
+import { KibanaServices } from '../../../../common/lib/kibana';
+import {
+  BasicSignals,
+  Privilege,
+  QuerySignals,
+  SignalSearchResponse,
+  SignalsIndex,
+  UpdateSignalStatusProps,
+} from './types';
+
+/**
+ * Fetch Signals by providing a query
+ *
+ * @param query String to match a dsl
+ * @param signal to cancel request
+ *
+ * @throws An error if response is not OK
+ */
+export const fetchQuerySignals = async <Hit, Aggregations>({
+  query,
+  signal,
+}: QuerySignals): Promise<SignalSearchResponse<Hit, Aggregations>> =>
+  KibanaServices.get().http.fetch<SignalSearchResponse<Hit, Aggregations>>(
+    DETECTION_ENGINE_QUERY_SIGNALS_URL,
+    {
+      method: 'POST',
+      body: JSON.stringify(query),
+      signal,
+    }
+  );
+
+/**
+ * Update signal status by query
+ *
+ * @param query of signals to update
+ * @param status to update to('open' / 'closed')
+ * @param signal AbortSignal for cancelling request
+ *
+ * @throws An error if response is not OK
+ */
+export const updateSignalStatus = async ({
+  query,
+  status,
+  signal,
+}: UpdateSignalStatusProps): Promise<unknown> =>
+  KibanaServices.get().http.fetch(DETECTION_ENGINE_SIGNALS_STATUS_URL, {
+    method: 'POST',
+    body: JSON.stringify({ status, ...query }),
+    signal,
+  });
+
+/**
+ * Fetch Signal Index
+ *
+ * @param signal AbortSignal for cancelling request
+ *
+ * @throws An error if response is not OK
+ */
+export const getSignalIndex = async ({ signal }: BasicSignals): Promise<SignalsIndex> =>
+  KibanaServices.get().http.fetch<SignalsIndex>(DETECTION_ENGINE_INDEX_URL, {
+    method: 'GET',
+    signal,
+  });
+
+/**
+ * Get User Privileges
+ *
+ * @param signal AbortSignal for cancelling request
+ *
+ * @throws An error if response is not OK
+ */
+export const getUserPrivilege = async ({ signal }: BasicSignals): Promise<Privilege> =>
+  KibanaServices.get().http.fetch<Privilege>(DETECTION_ENGINE_PRIVILEGES_URL, {
+    method: 'GET',
+    signal,
+  });
+
+/**
+ * Create Signal Index if needed it
+ *
+ * @param signal AbortSignal for cancelling request
+ *
+ * @throws An error if response is not OK
+ */
+export const createSignalIndex = async ({ signal }: BasicSignals): Promise<SignalsIndex> =>
+  KibanaServices.get().http.fetch<SignalsIndex>(DETECTION_ENGINE_INDEX_URL, {
+    method: 'POST',
+    signal,
+  });
diff --git a/x-pack/plugins/siem/public/containers/detection_engine/signals/mock.ts b/x-pack/plugins/siem/public/alerts/containers/detection_engine/signals/mock.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/detection_engine/signals/mock.ts
rename to x-pack/plugins/siem/public/alerts/containers/detection_engine/signals/mock.ts
diff --git a/x-pack/plugins/siem/public/containers/detection_engine/signals/translations.ts b/x-pack/plugins/siem/public/alerts/containers/detection_engine/signals/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/detection_engine/signals/translations.ts
rename to x-pack/plugins/siem/public/alerts/containers/detection_engine/signals/translations.ts
diff --git a/x-pack/plugins/siem/public/containers/detection_engine/signals/types.ts b/x-pack/plugins/siem/public/alerts/containers/detection_engine/signals/types.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/detection_engine/signals/types.ts
rename to x-pack/plugins/siem/public/alerts/containers/detection_engine/signals/types.ts
diff --git a/x-pack/plugins/siem/public/containers/detection_engine/signals/use_privilege_user.test.tsx b/x-pack/plugins/siem/public/alerts/containers/detection_engine/signals/use_privilege_user.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/containers/detection_engine/signals/use_privilege_user.test.tsx
rename to x-pack/plugins/siem/public/alerts/containers/detection_engine/signals/use_privilege_user.test.tsx
diff --git a/x-pack/plugins/siem/public/containers/detection_engine/signals/use_privilege_user.tsx b/x-pack/plugins/siem/public/alerts/containers/detection_engine/signals/use_privilege_user.tsx
similarity index 96%
rename from x-pack/plugins/siem/public/containers/detection_engine/signals/use_privilege_user.tsx
rename to x-pack/plugins/siem/public/alerts/containers/detection_engine/signals/use_privilege_user.tsx
index 140dd1544b12b0..e67afd686a7cab 100644
--- a/x-pack/plugins/siem/public/containers/detection_engine/signals/use_privilege_user.tsx
+++ b/x-pack/plugins/siem/public/alerts/containers/detection_engine/signals/use_privilege_user.tsx
@@ -6,7 +6,7 @@
 
 import { useEffect, useState } from 'react';
 
-import { errorToToaster, useStateToaster } from '../../../components/toasters';
+import { errorToToaster, useStateToaster } from '../../../../common/components/toasters';
 import { getUserPrivilege } from './api';
 import * as i18n from './translations';
 
diff --git a/x-pack/plugins/siem/public/containers/detection_engine/signals/use_query.test.tsx b/x-pack/plugins/siem/public/alerts/containers/detection_engine/signals/use_query.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/containers/detection_engine/signals/use_query.test.tsx
rename to x-pack/plugins/siem/public/alerts/containers/detection_engine/signals/use_query.test.tsx
diff --git a/x-pack/plugins/siem/public/containers/detection_engine/signals/use_query.tsx b/x-pack/plugins/siem/public/alerts/containers/detection_engine/signals/use_query.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/containers/detection_engine/signals/use_query.tsx
rename to x-pack/plugins/siem/public/alerts/containers/detection_engine/signals/use_query.tsx
diff --git a/x-pack/plugins/siem/public/containers/detection_engine/signals/use_signal_index.test.tsx b/x-pack/plugins/siem/public/alerts/containers/detection_engine/signals/use_signal_index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/containers/detection_engine/signals/use_signal_index.test.tsx
rename to x-pack/plugins/siem/public/alerts/containers/detection_engine/signals/use_signal_index.test.tsx
diff --git a/x-pack/plugins/siem/public/containers/detection_engine/signals/use_signal_index.tsx b/x-pack/plugins/siem/public/alerts/containers/detection_engine/signals/use_signal_index.tsx
similarity index 95%
rename from x-pack/plugins/siem/public/containers/detection_engine/signals/use_signal_index.tsx
rename to x-pack/plugins/siem/public/alerts/containers/detection_engine/signals/use_signal_index.tsx
index a7f5c9731320e1..6c428bd9354ee3 100644
--- a/x-pack/plugins/siem/public/containers/detection_engine/signals/use_signal_index.tsx
+++ b/x-pack/plugins/siem/public/alerts/containers/detection_engine/signals/use_signal_index.tsx
@@ -6,10 +6,10 @@
 
 import { useEffect, useState } from 'react';
 
-import { errorToToaster, useStateToaster } from '../../../components/toasters';
+import { errorToToaster, useStateToaster } from '../../../../common/components/toasters';
 import { createSignalIndex, getSignalIndex } from './api';
 import * as i18n from './translations';
-import { isApiError } from '../../../utils/api';
+import { isApiError } from '../../../../common/utils/api';
 
 type Func = () => void;
 
diff --git a/x-pack/plugins/siem/public/alerts/index.ts b/x-pack/plugins/siem/public/alerts/index.ts
new file mode 100644
index 00000000000000..c1501419a1cf6f
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/index.ts
@@ -0,0 +1,18 @@
+/*
+ * 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 { getAlertsRoutes } from './routes';
+import { SecuritySubPlugin } from '../app/types';
+
+export class Alerts {
+  public setup() {}
+
+  public start(): SecuritySubPlugin {
+    return {
+      routes: getAlertsRoutes(),
+    };
+  }
+}
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/mitre/mitre_tactics_techniques.ts b/x-pack/plugins/siem/public/alerts/mitre/mitre_tactics_techniques.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/mitre/mitre_tactics_techniques.ts
rename to x-pack/plugins/siem/public/alerts/mitre/mitre_tactics_techniques.ts
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/mitre/types.ts b/x-pack/plugins/siem/public/alerts/mitre/types.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/mitre/types.ts
rename to x-pack/plugins/siem/public/alerts/mitre/types.ts
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/detection_engine.test.tsx b/x-pack/plugins/siem/public/alerts/pages/detection_engine/detection_engine.test.tsx
similarity index 80%
rename from x-pack/plugins/siem/public/pages/detection_engine/detection_engine.test.tsx
rename to x-pack/plugins/siem/public/alerts/pages/detection_engine/detection_engine.test.tsx
index 779e9a4557f2af..de8a732839728d 100644
--- a/x-pack/plugins/siem/public/pages/detection_engine/detection_engine.test.tsx
+++ b/x-pack/plugins/siem/public/alerts/pages/detection_engine/detection_engine.test.tsx
@@ -8,13 +8,13 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { useParams } from 'react-router-dom';
 
-import '../../mock/match_media';
-import { setAbsoluteRangeDatePicker } from '../../store/inputs/actions';
+import '../../../common/mock/match_media';
+import { setAbsoluteRangeDatePicker } from '../../../common/store/inputs/actions';
 import { DetectionEnginePageComponent } from './detection_engine';
-import { useUserInfo } from './components/user_info';
+import { useUserInfo } from '../../components/user_info';
 
-jest.mock('./components/user_info');
-jest.mock('../../lib/kibana');
+jest.mock('../../components/user_info');
+jest.mock('../../../common/lib/kibana');
 jest.mock('react-router-dom', () => {
   const originalModule = jest.requireActual('react-router-dom');
 
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/detection_engine.tsx b/x-pack/plugins/siem/public/alerts/pages/detection_engine/detection_engine.tsx
similarity index 80%
rename from x-pack/plugins/siem/public/pages/detection_engine/detection_engine.tsx
rename to x-pack/plugins/siem/public/alerts/pages/detection_engine/detection_engine.tsx
index 3e23700b08e66d..a83a85678bd03e 100644
--- a/x-pack/plugins/siem/public/pages/detection_engine/detection_engine.tsx
+++ b/x-pack/plugins/siem/public/alerts/pages/detection_engine/detection_engine.tsx
@@ -10,35 +10,38 @@ import { useParams } from 'react-router-dom';
 import { StickyContainer } from 'react-sticky';
 import { connect, ConnectedProps } from 'react-redux';
 
-import { GlobalTime } from '../../containers/global_time';
-import { indicesExistOrDataTemporarilyUnavailable, WithSource } from '../../containers/source';
-import { AlertsTable } from '../../components/alerts_viewer/alerts_table';
-import { UpdateDateRange } from '../../components/charts/common';
-import { FiltersGlobal } from '../../components/filters_global';
+import { GlobalTime } from '../../../common/containers/global_time';
+import {
+  indicesExistOrDataTemporarilyUnavailable,
+  WithSource,
+} from '../../../common/containers/source';
+import { AlertsTable } from '../../../common/components/alerts_viewer/alerts_table';
+import { UpdateDateRange } from '../../../common/components/charts/common';
+import { FiltersGlobal } from '../../../common/components/filters_global';
 import {
   getDetectionEngineTabUrl,
   getRulesUrl,
-} from '../../components/link_to/redirect_to_detection_engine';
-import { SiemSearchBar } from '../../components/search_bar';
-import { WrapperPage } from '../../components/wrapper_page';
-import { SiemNavigation } from '../../components/navigation';
-import { NavTab } from '../../components/navigation/types';
-import { State } from '../../store';
-import { inputsSelectors } from '../../store/inputs';
-import { setAbsoluteRangeDatePicker as dispatchSetAbsoluteRangeDatePicker } from '../../store/inputs/actions';
-import { SpyRoute } from '../../utils/route/spy_routes';
-import { InputsRange } from '../../store/inputs/model';
-import { AlertsByCategory } from '../overview/alerts_by_category';
-import { useSignalInfo } from './components/signals_info';
-import { SignalsTable } from './components/signals';
-import { NoApiIntegrationKeyCallOut } from './components/no_api_integration_callout';
-import { NoWriteSignalsCallOut } from './components/no_write_signals_callout';
-import { SignalsHistogramPanel } from './components/signals_histogram_panel';
-import { signalsHistogramOptions } from './components/signals_histogram_panel/config';
-import { useUserInfo } from './components/user_info';
+} from '../../../common/components/link_to/redirect_to_detection_engine';
+import { SiemSearchBar } from '../../../common/components/search_bar';
+import { WrapperPage } from '../../../common/components/wrapper_page';
+import { SiemNavigation } from '../../../common/components/navigation';
+import { NavTab } from '../../../common/components/navigation/types';
+import { State } from '../../../common/store';
+import { inputsSelectors } from '../../../common/store/inputs';
+import { setAbsoluteRangeDatePicker as dispatchSetAbsoluteRangeDatePicker } from '../../../common/store/inputs/actions';
+import { SpyRoute } from '../../../common/utils/route/spy_routes';
+import { InputsRange } from '../../../common/store/inputs/model';
+import { AlertsByCategory } from '../../../overview/components/alerts_by_category';
+import { useSignalInfo } from '../../components/signals_info';
+import { SignalsTable } from '../../components/signals';
+import { NoApiIntegrationKeyCallOut } from '../../components/no_api_integration_callout';
+import { NoWriteSignalsCallOut } from '../../components/no_write_signals_callout';
+import { SignalsHistogramPanel } from '../../components/signals_histogram_panel';
+import { signalsHistogramOptions } from '../../components/signals_histogram_panel/config';
+import { useUserInfo } from '../../components/user_info';
 import { DetectionEngineEmptyPage } from './detection_engine_empty_page';
 import { DetectionEngineNoIndex } from './detection_engine_no_signal_index';
-import { DetectionEngineHeaderPage } from './components/detection_engine_header_page';
+import { DetectionEngineHeaderPage } from '../../components/detection_engine_header_page';
 import { DetectionEngineUserUnauthenticated } from './detection_engine_user_unauthenticated';
 import * as i18n from './translations';
 import { DetectionEngineTab } from './types';
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/detection_engine_empty_page.test.tsx b/x-pack/plugins/siem/public/alerts/pages/detection_engine/detection_engine_empty_page.test.tsx
similarity index 93%
rename from x-pack/plugins/siem/public/pages/detection_engine/detection_engine_empty_page.test.tsx
rename to x-pack/plugins/siem/public/alerts/pages/detection_engine/detection_engine_empty_page.test.tsx
index f64526fd2f7c46..039c878b121a09 100644
--- a/x-pack/plugins/siem/public/pages/detection_engine/detection_engine_empty_page.test.tsx
+++ b/x-pack/plugins/siem/public/alerts/pages/detection_engine/detection_engine_empty_page.test.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import { DetectionEngineEmptyPage } from './detection_engine_empty_page';
-jest.mock('../../lib/kibana');
+jest.mock('../../../common/lib/kibana');
 
 describe('DetectionEngineEmptyPage', () => {
   it('renders correctly', () => {
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/detection_engine_empty_page.tsx b/x-pack/plugins/siem/public/alerts/pages/detection_engine/detection_engine_empty_page.tsx
similarity index 83%
rename from x-pack/plugins/siem/public/pages/detection_engine/detection_engine_empty_page.tsx
rename to x-pack/plugins/siem/public/alerts/pages/detection_engine/detection_engine_empty_page.tsx
index 7516bb13a9e750..3d8f221a023754 100644
--- a/x-pack/plugins/siem/public/pages/detection_engine/detection_engine_empty_page.tsx
+++ b/x-pack/plugins/siem/public/alerts/pages/detection_engine/detection_engine_empty_page.tsx
@@ -6,9 +6,9 @@
 
 import React from 'react';
 
-import { useKibana } from '../../lib/kibana';
-import { EmptyPage } from '../../components/empty_page';
-import * as i18n from '../common/translations';
+import { useKibana } from '../../../common/lib/kibana';
+import { EmptyPage } from '../../../common/components/empty_page';
+import * as i18n from '../../../common/translations';
 
 export const DetectionEngineEmptyPage = React.memo(() => (
   <EmptyPage
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/detection_engine_no_signal_index.test.tsx b/x-pack/plugins/siem/public/alerts/pages/detection_engine/detection_engine_no_signal_index.test.tsx
similarity index 93%
rename from x-pack/plugins/siem/public/pages/detection_engine/detection_engine_no_signal_index.test.tsx
rename to x-pack/plugins/siem/public/alerts/pages/detection_engine/detection_engine_no_signal_index.test.tsx
index e9f05f7aafe3c7..34d55908c9ba16 100644
--- a/x-pack/plugins/siem/public/pages/detection_engine/detection_engine_no_signal_index.test.tsx
+++ b/x-pack/plugins/siem/public/alerts/pages/detection_engine/detection_engine_no_signal_index.test.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import { DetectionEngineNoIndex } from './detection_engine_no_signal_index';
-jest.mock('../../lib/kibana');
+jest.mock('../../../common/lib/kibana');
 
 describe('DetectionEngineNoIndex', () => {
   it('renders correctly', () => {
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/detection_engine_no_signal_index.tsx b/x-pack/plugins/siem/public/alerts/pages/detection_engine/detection_engine_no_signal_index.tsx
similarity index 88%
rename from x-pack/plugins/siem/public/pages/detection_engine/detection_engine_no_signal_index.tsx
rename to x-pack/plugins/siem/public/alerts/pages/detection_engine/detection_engine_no_signal_index.tsx
index f1478ab5858c9a..59267b5d62a26d 100644
--- a/x-pack/plugins/siem/public/pages/detection_engine/detection_engine_no_signal_index.tsx
+++ b/x-pack/plugins/siem/public/alerts/pages/detection_engine/detection_engine_no_signal_index.tsx
@@ -6,9 +6,9 @@
 
 import React from 'react';
 
-import { EmptyPage } from '../../components/empty_page';
+import { EmptyPage } from '../../../common/components/empty_page';
 import * as i18n from './translations';
-import { useKibana } from '../../lib/kibana';
+import { useKibana } from '../../../common/lib/kibana';
 
 export const DetectionEngineNoIndex = React.memo(() => {
   const docLinks = useKibana().services.docLinks;
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/detection_engine_user_unauthenticated.test.tsx b/x-pack/plugins/siem/public/alerts/pages/detection_engine/detection_engine_user_unauthenticated.test.tsx
similarity index 93%
rename from x-pack/plugins/siem/public/pages/detection_engine/detection_engine_user_unauthenticated.test.tsx
rename to x-pack/plugins/siem/public/alerts/pages/detection_engine/detection_engine_user_unauthenticated.test.tsx
index e71f4de2b010bb..5a1efe1c71857b 100644
--- a/x-pack/plugins/siem/public/pages/detection_engine/detection_engine_user_unauthenticated.test.tsx
+++ b/x-pack/plugins/siem/public/alerts/pages/detection_engine/detection_engine_user_unauthenticated.test.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import { DetectionEngineUserUnauthenticated } from './detection_engine_user_unauthenticated';
-jest.mock('../../lib/kibana');
+jest.mock('../../../common/lib/kibana');
 
 describe('DetectionEngineUserUnauthenticated', () => {
   it('renders correctly', () => {
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/detection_engine_user_unauthenticated.tsx b/x-pack/plugins/siem/public/alerts/pages/detection_engine/detection_engine_user_unauthenticated.tsx
similarity index 88%
rename from x-pack/plugins/siem/public/pages/detection_engine/detection_engine_user_unauthenticated.tsx
rename to x-pack/plugins/siem/public/alerts/pages/detection_engine/detection_engine_user_unauthenticated.tsx
index b5c805f92135ad..fc1fee1077bd65 100644
--- a/x-pack/plugins/siem/public/pages/detection_engine/detection_engine_user_unauthenticated.tsx
+++ b/x-pack/plugins/siem/public/alerts/pages/detection_engine/detection_engine_user_unauthenticated.tsx
@@ -6,9 +6,9 @@
 
 import React from 'react';
 
-import { EmptyPage } from '../../components/empty_page';
+import { EmptyPage } from '../../../common/components/empty_page';
 import * as i18n from './translations';
-import { useKibana } from '../../lib/kibana';
+import { useKibana } from '../../../common/lib/kibana';
 
 export const DetectionEngineUserUnauthenticated = React.memo(() => {
   const docLinks = useKibana().services.docLinks;
diff --git a/x-pack/plugins/siem/public/alerts/pages/detection_engine/index.test.tsx b/x-pack/plugins/siem/public/alerts/pages/detection_engine/index.test.tsx
new file mode 100644
index 00000000000000..d4e654321ef988
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/pages/detection_engine/index.test.tsx
@@ -0,0 +1,19 @@
+/*
+ * 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 '../../../common/mock/match_media';
+import { DetectionEngineContainer } from './index';
+
+describe('DetectionEngineContainer', () => {
+  it('renders correctly', () => {
+    const wrapper = shallow(<DetectionEngineContainer url="url" />);
+
+    expect(wrapper.find('ManageUserInfo')).toHaveLength(1);
+  });
+});
diff --git a/x-pack/plugins/siem/public/alerts/pages/detection_engine/index.tsx b/x-pack/plugins/siem/public/alerts/pages/detection_engine/index.tsx
new file mode 100644
index 00000000000000..756e222c029502
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/pages/detection_engine/index.tsx
@@ -0,0 +1,54 @@
+/*
+ * 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 { Redirect, Route, Switch, RouteComponentProps } from 'react-router-dom';
+
+import { ManageUserInfo } from '../../components/user_info';
+import { CreateRulePage } from './rules/create';
+import { DetectionEnginePage } from './detection_engine';
+import { EditRulePage } from './rules/edit';
+import { RuleDetailsPage } from './rules/details';
+import { RulesPage } from './rules';
+import { DetectionEngineTab } from './types';
+
+const detectionEnginePath = `/:pageName(detections)`;
+
+type Props = Partial<RouteComponentProps<{}>> & { url: string };
+
+const DetectionEngineContainerComponent: React.FC<Props> = () => (
+  <ManageUserInfo>
+    <Switch>
+      <Route
+        exact
+        path={`${detectionEnginePath}/:tabName(${DetectionEngineTab.signals}|${DetectionEngineTab.alerts})`}
+        strict
+      >
+        <DetectionEnginePage />
+      </Route>
+      <Route exact path={`${detectionEnginePath}/rules`}>
+        <RulesPage />
+      </Route>
+      <Route exact path={`${detectionEnginePath}/rules/create`}>
+        <CreateRulePage />
+      </Route>
+      <Route exact path={`${detectionEnginePath}/rules/id/:detailName`}>
+        <RuleDetailsPage />
+      </Route>
+      <Route exact path={`${detectionEnginePath}/rules/id/:detailName/edit`}>
+        <EditRulePage />
+      </Route>
+      <Route
+        path="/detections/"
+        render={({ location: { search = '' } }) => (
+          <Redirect from="/detections/" to={`/detections/${DetectionEngineTab.signals}${search}`} />
+        )}
+      />
+    </Switch>
+  </ManageUserInfo>
+);
+
+export const DetectionEngineContainer = React.memo(DetectionEngineContainerComponent);
diff --git a/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/__mocks__/mock.ts b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/__mocks__/mock.ts
new file mode 100644
index 00000000000000..1b43a513d0d297
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/__mocks__/mock.ts
@@ -0,0 +1,218 @@
+/*
+ * 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 { esFilters } from '../../../../../../../../../../src/plugins/data/public';
+import { Rule, RuleError } from '../../../../../../alerts/containers/detection_engine/rules';
+import { AboutStepRule, ActionsStepRule, DefineStepRule, ScheduleStepRule } from '../../types';
+import { FieldValueQueryBar } from '../../../../../../alerts/components/rules/query_bar';
+
+export const mockQueryBar: FieldValueQueryBar = {
+  query: {
+    query: 'test query',
+    language: 'kuery',
+  },
+  filters: [
+    {
+      $state: {
+        store: esFilters.FilterStateStore.GLOBAL_STATE,
+      },
+      meta: {
+        alias: null,
+        disabled: false,
+        key: 'event.category',
+        negate: false,
+        params: {
+          query: 'file',
+        },
+        type: 'phrase',
+      },
+      query: {
+        match_phrase: {
+          'event.category': 'file',
+        },
+      },
+    },
+  ],
+  saved_id: 'test123',
+};
+
+export const mockRule = (id: string): Rule => ({
+  actions: [],
+  created_at: '2020-01-10T21:11:45.839Z',
+  updated_at: '2020-01-10T21:11:45.839Z',
+  created_by: 'elastic',
+  description: '24/7',
+  enabled: true,
+  false_positives: [],
+  filters: [],
+  from: 'now-300s',
+  id,
+  immutable: false,
+  index: ['auditbeat-*'],
+  interval: '5m',
+  rule_id: 'b5ba41ab-aaf3-4f43-971b-bdf9434ce0ea',
+  language: 'kuery',
+  output_index: '.siem-signals-default',
+  max_signals: 100,
+  risk_score: 21,
+  name: 'Home Grown!',
+  query: '',
+  references: [],
+  saved_id: "Garrett's IP",
+  timeline_id: '86aa74d0-2136-11ea-9864-ebc8cc1cb8c2',
+  timeline_title: 'Untitled timeline',
+  meta: { from: '0m' },
+  severity: 'low',
+  updated_by: 'elastic',
+  tags: [],
+  to: 'now',
+  type: 'saved_query',
+  threat: [],
+  throttle: 'no_actions',
+  note: '# this is some markdown documentation',
+  version: 1,
+});
+
+export const mockRuleWithEverything = (id: string): Rule => ({
+  actions: [],
+  created_at: '2020-01-10T21:11:45.839Z',
+  updated_at: '2020-01-10T21:11:45.839Z',
+  created_by: 'elastic',
+  description: '24/7',
+  enabled: true,
+  false_positives: ['test'],
+  filters: [
+    {
+      $state: {
+        store: esFilters.FilterStateStore.GLOBAL_STATE,
+      },
+      meta: {
+        alias: null,
+        disabled: false,
+        key: 'event.category',
+        negate: false,
+        params: {
+          query: 'file',
+        },
+        type: 'phrase',
+      },
+      query: {
+        match_phrase: {
+          'event.category': 'file',
+        },
+      },
+    },
+  ],
+  from: 'now-300s',
+  id,
+  immutable: false,
+  index: ['auditbeat-*'],
+  interval: '5m',
+  rule_id: 'b5ba41ab-aaf3-4f43-971b-bdf9434ce0ea',
+  language: 'kuery',
+  output_index: '.siem-signals-default',
+  max_signals: 100,
+  risk_score: 21,
+  name: 'Query with rule-id',
+  query: 'user.name: root or user.name: admin',
+  references: ['www.test.co'],
+  saved_id: 'test123',
+  timeline_id: '86aa74d0-2136-11ea-9864-ebc8cc1cb8c2',
+  timeline_title: 'Titled timeline',
+  meta: { from: '0m' },
+  severity: 'low',
+  updated_by: 'elastic',
+  tags: ['tag1', 'tag2'],
+  to: 'now',
+  type: 'saved_query',
+  threat: [
+    {
+      framework: 'mockFramework',
+      tactic: {
+        id: '1234',
+        name: 'tactic1',
+        reference: 'reference1',
+      },
+      technique: [
+        {
+          id: '456',
+          name: 'technique1',
+          reference: 'technique reference',
+        },
+      ],
+    },
+  ],
+  throttle: 'no_actions',
+  note: '# this is some markdown documentation',
+  version: 1,
+});
+
+export const mockAboutStepRule = (isNew = false): AboutStepRule => ({
+  isNew,
+  name: 'Query with rule-id',
+  description: '24/7',
+  severity: 'low',
+  riskScore: 21,
+  references: ['www.test.co'],
+  falsePositives: ['test'],
+  tags: ['tag1', 'tag2'],
+  threat: [
+    {
+      framework: 'mockFramework',
+      tactic: {
+        id: '1234',
+        name: 'tactic1',
+        reference: 'reference1',
+      },
+      technique: [
+        {
+          id: '456',
+          name: 'technique1',
+          reference: 'technique reference',
+        },
+      ],
+    },
+  ],
+  note: '# this is some markdown documentation',
+});
+
+export const mockActionsStepRule = (isNew = false, enabled = false): ActionsStepRule => ({
+  isNew,
+  actions: [],
+  kibanaSiemAppUrl: 'http://localhost:5601/app/siem',
+  enabled,
+  throttle: 'no_actions',
+});
+
+export const mockDefineStepRule = (isNew = false): DefineStepRule => ({
+  isNew,
+  ruleType: 'query',
+  anomalyThreshold: 50,
+  machineLearningJobId: '',
+  index: ['filebeat-'],
+  queryBar: mockQueryBar,
+  timeline: {
+    id: '86aa74d0-2136-11ea-9864-ebc8cc1cb8c2',
+    title: 'Titled timeline',
+  },
+});
+
+export const mockScheduleStepRule = (isNew = false): ScheduleStepRule => ({
+  isNew,
+  interval: '5m',
+  from: '6m',
+  to: 'now',
+});
+
+export const mockRuleError = (id: string): RuleError => ({
+  rule_id: id,
+  error: { status_code: 404, message: `id: "${id}" not found` },
+});
+
+export const mockRules: Rule[] = [
+  mockRule('abe6c564-050d-45a5-aaf0-386c37dd1f61'),
+  mockRule('63f06f34-c181-4b2d-af35-f2ace572a1ee'),
+];
diff --git a/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/actions.tsx b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/actions.tsx
new file mode 100644
index 00000000000000..5ed7221b68bf35
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/actions.tsx
@@ -0,0 +1,136 @@
+/*
+ * 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 * as H from 'history';
+import React, { Dispatch } from 'react';
+
+import { DETECTION_ENGINE_PAGE_NAME } from '../../../../../common/components/link_to/redirect_to_detection_engine';
+import {
+  deleteRules,
+  duplicateRules,
+  enableRules,
+  Rule,
+} from '../../../../../alerts/containers/detection_engine/rules';
+import { Action } from './reducer';
+
+import {
+  ActionToaster,
+  displayErrorToast,
+  displaySuccessToast,
+  errorToToaster,
+} from '../../../../../common/components/toasters';
+import { track, METRIC_TYPE, TELEMETRY_EVENT } from '../../../../../common/lib/telemetry';
+
+import * as i18n from '../translations';
+import { bucketRulesResponse } from './helpers';
+
+export const editRuleAction = (rule: Rule, history: H.History) => {
+  history.push(`/${DETECTION_ENGINE_PAGE_NAME}/rules/id/${rule.id}/edit`);
+};
+
+export const duplicateRulesAction = async (
+  rules: Rule[],
+  ruleIds: string[],
+  dispatch: React.Dispatch<Action>,
+  dispatchToaster: Dispatch<ActionToaster>
+) => {
+  try {
+    dispatch({ type: 'loadingRuleIds', ids: ruleIds, actionType: 'duplicate' });
+    const response = await duplicateRules({ rules });
+    const { errors } = bucketRulesResponse(response);
+    if (errors.length > 0) {
+      displayErrorToast(
+        i18n.DUPLICATE_RULE_ERROR,
+        errors.map(e => e.error.message),
+        dispatchToaster
+      );
+    } else {
+      displaySuccessToast(i18n.SUCCESSFULLY_DUPLICATED_RULES(ruleIds.length), dispatchToaster);
+    }
+    dispatch({ type: 'loadingRuleIds', ids: [], actionType: null });
+  } catch (error) {
+    dispatch({ type: 'loadingRuleIds', ids: [], actionType: null });
+    errorToToaster({ title: i18n.DUPLICATE_RULE_ERROR, error, dispatchToaster });
+  }
+};
+
+export const exportRulesAction = (exportRuleId: string[], dispatch: React.Dispatch<Action>) => {
+  dispatch({ type: 'exportRuleIds', ids: exportRuleId });
+};
+
+export const deleteRulesAction = async (
+  ruleIds: string[],
+  dispatch: React.Dispatch<Action>,
+  dispatchToaster: Dispatch<ActionToaster>,
+  onRuleDeleted?: () => void
+) => {
+  try {
+    dispatch({ type: 'loadingRuleIds', ids: ruleIds, actionType: 'delete' });
+    const response = await deleteRules({ ids: ruleIds });
+    const { errors } = bucketRulesResponse(response);
+    dispatch({ type: 'loadingRuleIds', ids: [], actionType: null });
+    if (errors.length > 0) {
+      displayErrorToast(
+        i18n.BATCH_ACTION_DELETE_SELECTED_ERROR(ruleIds.length),
+        errors.map(e => e.error.message),
+        dispatchToaster
+      );
+    } else if (onRuleDeleted) {
+      onRuleDeleted();
+    }
+  } catch (error) {
+    dispatch({ type: 'loadingRuleIds', ids: [], actionType: null });
+    errorToToaster({
+      title: i18n.BATCH_ACTION_DELETE_SELECTED_ERROR(ruleIds.length),
+      error,
+      dispatchToaster,
+    });
+  }
+};
+
+export const enableRulesAction = async (
+  ids: string[],
+  enabled: boolean,
+  dispatch: React.Dispatch<Action>,
+  dispatchToaster: Dispatch<ActionToaster>
+) => {
+  const errorTitle = enabled
+    ? i18n.BATCH_ACTION_ACTIVATE_SELECTED_ERROR(ids.length)
+    : i18n.BATCH_ACTION_DEACTIVATE_SELECTED_ERROR(ids.length);
+
+  try {
+    dispatch({ type: 'loadingRuleIds', ids, actionType: enabled ? 'enable' : 'disable' });
+
+    const response = await enableRules({ ids, enabled });
+    const { rules, errors } = bucketRulesResponse(response);
+
+    dispatch({ type: 'updateRules', rules });
+
+    if (errors.length > 0) {
+      displayErrorToast(
+        errorTitle,
+        errors.map(e => e.error.message),
+        dispatchToaster
+      );
+    }
+
+    if (rules.some(rule => rule.immutable)) {
+      track(
+        METRIC_TYPE.COUNT,
+        enabled ? TELEMETRY_EVENT.SIEM_RULE_ENABLED : TELEMETRY_EVENT.SIEM_RULE_DISABLED
+      );
+    }
+    if (rules.some(rule => !rule.immutable)) {
+      track(
+        METRIC_TYPE.COUNT,
+        enabled ? TELEMETRY_EVENT.CUSTOM_RULE_ENABLED : TELEMETRY_EVENT.CUSTOM_RULE_DISABLED
+      );
+    }
+  } catch (e) {
+    displayErrorToast(errorTitle, [e.message], dispatchToaster);
+    dispatch({ type: 'loadingRuleIds', ids: [], actionType: null });
+  }
+};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/all/batch_actions.tsx b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/batch_actions.tsx
similarity index 97%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/all/batch_actions.tsx
rename to x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/batch_actions.tsx
index 454ef18e0ae143..769839a62091b0 100644
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/all/batch_actions.tsx
+++ b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/batch_actions.tsx
@@ -14,8 +14,8 @@ import {
   enableRulesAction,
   exportRulesAction,
 } from './actions';
-import { ActionToaster, displayWarningToast } from '../../../../components/toasters';
-import { Rule } from '../../../../containers/detection_engine/rules';
+import { ActionToaster, displayWarningToast } from '../../../../../common/components/toasters';
+import { Rule } from '../../../../../alerts/containers/detection_engine/rules';
 import * as detectionI18n from '../../translations';
 
 interface GetBatchItems {
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/all/columns.test.tsx b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/columns.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/all/columns.test.tsx
rename to x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/columns.test.tsx
diff --git a/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/columns.tsx b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/columns.tsx
new file mode 100644
index 00000000000000..224a32ef6ac9d8
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/columns.tsx
@@ -0,0 +1,333 @@
+/*
+ * 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.
+ */
+
+/* eslint-disable react/display-name */
+
+import {
+  EuiBadge,
+  EuiLink,
+  EuiBasicTableColumn,
+  EuiTableActionsColumnType,
+  EuiText,
+  EuiHealth,
+  EuiToolTip,
+} from '@elastic/eui';
+import { FormattedRelative } from '@kbn/i18n/react';
+import * as H from 'history';
+import React, { Dispatch } from 'react';
+
+import { isMlRule } from '../../../../../../common/machine_learning/helpers';
+import { Rule, RuleStatus } from '../../../../../alerts/containers/detection_engine/rules';
+import { getEmptyTagValue } from '../../../../../common/components/empty_value';
+import { FormattedDate } from '../../../../../common/components/formatted_date';
+import { getRuleDetailsUrl } from '../../../../../common/components/link_to/redirect_to_detection_engine';
+import { ActionToaster } from '../../../../../common/components/toasters';
+import { TruncatableText } from '../../../../../common/components/truncatable_text';
+import { getStatusColor } from '../../../../components/rules/rule_status/helpers';
+import { RuleSwitch } from '../../../../components/rules/rule_switch';
+import { SeverityBadge } from '../../../../components/rules/severity_badge';
+import * as i18n from '../translations';
+import {
+  deleteRulesAction,
+  duplicateRulesAction,
+  editRuleAction,
+  exportRulesAction,
+} from './actions';
+import { Action } from './reducer';
+import { LocalizedDateTooltip } from '../../../../../common/components/localized_date_tooltip';
+import * as detectionI18n from '../../translations';
+
+export const getActions = (
+  dispatch: React.Dispatch<Action>,
+  dispatchToaster: Dispatch<ActionToaster>,
+  history: H.History,
+  reFetchRules: (refreshPrePackagedRule?: boolean) => void
+) => [
+  {
+    description: i18n.EDIT_RULE_SETTINGS,
+    icon: 'controlsHorizontal',
+    name: i18n.EDIT_RULE_SETTINGS,
+    onClick: (rowItem: Rule) => editRuleAction(rowItem, history),
+  },
+  {
+    description: i18n.DUPLICATE_RULE,
+    icon: 'copy',
+    name: i18n.DUPLICATE_RULE,
+    onClick: async (rowItem: Rule) => {
+      await duplicateRulesAction([rowItem], [rowItem.id], dispatch, dispatchToaster);
+      await reFetchRules(true);
+    },
+  },
+  {
+    'data-test-subj': 'exportRuleAction',
+    description: i18n.EXPORT_RULE,
+    icon: 'exportAction',
+    name: i18n.EXPORT_RULE,
+    onClick: (rowItem: Rule) => exportRulesAction([rowItem.rule_id], dispatch),
+    enabled: (rowItem: Rule) => !rowItem.immutable,
+  },
+  {
+    'data-test-subj': 'deleteRuleAction',
+    description: i18n.DELETE_RULE,
+    icon: 'trash',
+    name: i18n.DELETE_RULE,
+    onClick: async (rowItem: Rule) => {
+      await deleteRulesAction([rowItem.id], dispatch, dispatchToaster);
+      await reFetchRules(true);
+    },
+  },
+];
+
+export type RuleStatusRowItemType = RuleStatus & {
+  name: string;
+  id: string;
+};
+export type RulesColumns = EuiBasicTableColumn<Rule> | EuiTableActionsColumnType<Rule>;
+export type RulesStatusesColumns = EuiBasicTableColumn<RuleStatusRowItemType>;
+
+interface GetColumns {
+  dispatch: React.Dispatch<Action>;
+  dispatchToaster: Dispatch<ActionToaster>;
+  history: H.History;
+  hasMlPermissions: boolean;
+  hasNoPermissions: boolean;
+  loadingRuleIds: string[];
+  reFetchRules: (refreshPrePackagedRule?: boolean) => void;
+}
+
+// Michael: Are we able to do custom, in-table-header filters, as shown in my wireframes?
+export const getColumns = ({
+  dispatch,
+  dispatchToaster,
+  history,
+  hasMlPermissions,
+  hasNoPermissions,
+  loadingRuleIds,
+  reFetchRules,
+}: GetColumns): RulesColumns[] => {
+  const cols: RulesColumns[] = [
+    {
+      field: 'name',
+      name: i18n.COLUMN_RULE,
+      render: (value: Rule['name'], item: Rule) => (
+        <EuiLink data-test-subj="ruleName" href={getRuleDetailsUrl(item.id)}>
+          {value}
+        </EuiLink>
+      ),
+      truncateText: true,
+      width: '24%',
+    },
+    {
+      field: 'risk_score',
+      name: i18n.COLUMN_RISK_SCORE,
+      render: (value: Rule['risk_score']) => (
+        <EuiText data-test-subj="riskScore" size="s">
+          {value}
+        </EuiText>
+      ),
+      truncateText: true,
+      width: '14%',
+    },
+    {
+      field: 'severity',
+      name: i18n.COLUMN_SEVERITY,
+      render: (value: Rule['severity']) => <SeverityBadge value={value} />,
+      truncateText: true,
+      width: '16%',
+    },
+    {
+      field: 'status_date',
+      name: i18n.COLUMN_LAST_COMPLETE_RUN,
+      render: (value: Rule['status_date']) => {
+        return value == null ? (
+          getEmptyTagValue()
+        ) : (
+          <LocalizedDateTooltip fieldName={i18n.COLUMN_LAST_COMPLETE_RUN} date={new Date(value)}>
+            <FormattedRelative value={value} />
+          </LocalizedDateTooltip>
+        );
+      },
+      truncateText: true,
+      width: '20%',
+    },
+    {
+      field: 'status',
+      name: i18n.COLUMN_LAST_RESPONSE,
+      render: (value: Rule['status']) => {
+        return (
+          <>
+            <EuiHealth color={getStatusColor(value ?? null)}>
+              {value ?? getEmptyTagValue()}
+            </EuiHealth>
+          </>
+        );
+      },
+      width: '16%',
+      truncateText: true,
+    },
+    {
+      field: 'tags',
+      name: i18n.COLUMN_TAGS,
+      render: (value: Rule['tags']) => (
+        <TruncatableText data-test-subj="tags">
+          {value.map((tag, i) => (
+            <EuiBadge color="hollow" key={`${tag}-${i}`}>
+              {tag}
+            </EuiBadge>
+          ))}
+        </TruncatableText>
+      ),
+      truncateText: true,
+      width: '20%',
+    },
+    {
+      align: 'center',
+      field: 'enabled',
+      name: i18n.COLUMN_ACTIVATE,
+      render: (value: Rule['enabled'], item: Rule) => (
+        <EuiToolTip
+          position="top"
+          content={
+            isMlRule(item.type) && !hasMlPermissions
+              ? detectionI18n.ML_RULES_DISABLED_MESSAGE
+              : undefined
+          }
+        >
+          <RuleSwitch
+            data-test-subj="enabled"
+            dispatch={dispatch}
+            id={item.id}
+            enabled={item.enabled}
+            isDisabled={
+              hasNoPermissions || (isMlRule(item.type) && !hasMlPermissions && !item.enabled)
+            }
+            isLoading={loadingRuleIds.includes(item.id)}
+          />
+        </EuiToolTip>
+      ),
+      sortable: true,
+      width: '95px',
+    },
+  ];
+  const actions: RulesColumns[] = [
+    {
+      actions: getActions(dispatch, dispatchToaster, history, reFetchRules),
+      width: '40px',
+    } as EuiTableActionsColumnType<Rule>,
+  ];
+
+  return hasNoPermissions ? cols : [...cols, ...actions];
+};
+
+export const getMonitoringColumns = (): RulesStatusesColumns[] => {
+  const cols: RulesStatusesColumns[] = [
+    {
+      field: 'name',
+      name: i18n.COLUMN_RULE,
+      render: (value: RuleStatus['current_status']['status'], item: RuleStatusRowItemType) => {
+        return (
+          <EuiLink data-test-subj="ruleName" href={getRuleDetailsUrl(item.id)}>
+            {value}
+          </EuiLink>
+        );
+      },
+      truncateText: true,
+      width: '24%',
+    },
+    {
+      field: 'current_status.bulk_create_time_durations',
+      name: i18n.COLUMN_INDEXING_TIMES,
+      render: (value: RuleStatus['current_status']['bulk_create_time_durations']) => (
+        <EuiText data-test-subj="bulk_create_time_durations" size="s">
+          {value != null && value.length > 0
+            ? Math.max(...value?.map(item => Number.parseFloat(item)))
+            : getEmptyTagValue()}
+        </EuiText>
+      ),
+      truncateText: true,
+      width: '14%',
+    },
+    {
+      field: 'current_status.search_after_time_durations',
+      name: i18n.COLUMN_QUERY_TIMES,
+      render: (value: RuleStatus['current_status']['search_after_time_durations']) => (
+        <EuiText data-test-subj="search_after_time_durations" size="s">
+          {value != null && value.length > 0
+            ? Math.max(...value?.map(item => Number.parseFloat(item)))
+            : getEmptyTagValue()}
+        </EuiText>
+      ),
+      truncateText: true,
+      width: '14%',
+    },
+    {
+      field: 'current_status.gap',
+      name: i18n.COLUMN_GAP,
+      render: (value: RuleStatus['current_status']['gap']) => (
+        <EuiText data-test-subj="gap" size="s">
+          {value ?? getEmptyTagValue()}
+        </EuiText>
+      ),
+      truncateText: true,
+      width: '14%',
+    },
+    {
+      field: 'current_status.last_look_back_date',
+      name: i18n.COLUMN_LAST_LOOKBACK_DATE,
+      render: (value: RuleStatus['current_status']['last_look_back_date']) => {
+        return value == null ? (
+          getEmptyTagValue()
+        ) : (
+          <FormattedDate value={value} fieldName={'last look back date'} />
+        );
+      },
+      truncateText: true,
+      width: '16%',
+    },
+    {
+      field: 'current_status.status_date',
+      name: i18n.COLUMN_LAST_COMPLETE_RUN,
+      render: (value: RuleStatus['current_status']['status_date']) => {
+        return value == null ? (
+          getEmptyTagValue()
+        ) : (
+          <LocalizedDateTooltip fieldName={i18n.COLUMN_LAST_COMPLETE_RUN} date={new Date(value)}>
+            <FormattedRelative value={value} />
+          </LocalizedDateTooltip>
+        );
+      },
+      truncateText: true,
+      width: '20%',
+    },
+    {
+      field: 'current_status.status',
+      name: i18n.COLUMN_LAST_RESPONSE,
+      render: (value: RuleStatus['current_status']['status']) => {
+        return (
+          <>
+            <EuiHealth color={getStatusColor(value ?? null)}>
+              {value ?? getEmptyTagValue()}
+            </EuiHealth>
+          </>
+        );
+      },
+      width: '16%',
+      truncateText: true,
+    },
+    {
+      field: 'activate',
+      name: i18n.COLUMN_ACTIVATE,
+      render: (value: Rule['enabled']) => (
+        <EuiText data-test-subj="search_after_time_durations" size="s">
+          {value ? i18n.ACTIVE : i18n.INACTIVE}
+        </EuiText>
+      ),
+      width: '95px',
+    },
+  ];
+
+  return cols;
+};
diff --git a/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/helpers.test.tsx b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/helpers.test.tsx
new file mode 100644
index 00000000000000..7350cec0115fb9
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/helpers.test.tsx
@@ -0,0 +1,89 @@
+/*
+ * 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 { bucketRulesResponse, showRulesTable } from './helpers';
+import { mockRule, mockRuleError } from './__mocks__/mock';
+import uuid from 'uuid';
+import { Rule, RuleError } from '../../../../../alerts/containers/detection_engine/rules';
+
+describe('AllRulesTable Helpers', () => {
+  const mockRule1: Readonly<Rule> = mockRule(uuid.v4());
+  const mockRule2: Readonly<Rule> = mockRule(uuid.v4());
+  const mockRuleError1: Readonly<RuleError> = mockRuleError(uuid.v4());
+  const mockRuleError2: Readonly<RuleError> = mockRuleError(uuid.v4());
+
+  describe('bucketRulesResponse', () => {
+    test('buckets empty response', () => {
+      const bucketedResponse = bucketRulesResponse([]);
+      expect(bucketedResponse).toEqual({ rules: [], errors: [] });
+    });
+
+    test('buckets all error response', () => {
+      const bucketedResponse = bucketRulesResponse([mockRuleError1, mockRuleError2]);
+      expect(bucketedResponse).toEqual({ rules: [], errors: [mockRuleError1, mockRuleError2] });
+    });
+
+    test('buckets all success response', () => {
+      const bucketedResponse = bucketRulesResponse([mockRule1, mockRule2]);
+      expect(bucketedResponse).toEqual({ rules: [mockRule1, mockRule2], errors: [] });
+    });
+
+    test('buckets mixed success/error response', () => {
+      const bucketedResponse = bucketRulesResponse([
+        mockRule1,
+        mockRuleError1,
+        mockRule2,
+        mockRuleError2,
+      ]);
+      expect(bucketedResponse).toEqual({
+        rules: [mockRule1, mockRule2],
+        errors: [mockRuleError1, mockRuleError2],
+      });
+    });
+  });
+
+  describe('showRulesTable', () => {
+    test('returns false when rulesCustomInstalled and rulesInstalled are null', () => {
+      const result = showRulesTable({
+        rulesCustomInstalled: null,
+        rulesInstalled: null,
+      });
+      expect(result).toBeFalsy();
+    });
+
+    test('returns false when rulesCustomInstalled and rulesInstalled are 0', () => {
+      const result = showRulesTable({
+        rulesCustomInstalled: 0,
+        rulesInstalled: 0,
+      });
+      expect(result).toBeFalsy();
+    });
+
+    test('returns false when both rulesCustomInstalled and rulesInstalled checks return false', () => {
+      const result = showRulesTable({
+        rulesCustomInstalled: 0,
+        rulesInstalled: null,
+      });
+      expect(result).toBeFalsy();
+    });
+
+    test('returns true if rulesCustomInstalled is not null or 0', () => {
+      const result = showRulesTable({
+        rulesCustomInstalled: 5,
+        rulesInstalled: null,
+      });
+      expect(result).toBeTruthy();
+    });
+
+    test('returns true if rulesInstalled is not null or 0', () => {
+      const result = showRulesTable({
+        rulesCustomInstalled: null,
+        rulesInstalled: 5,
+      });
+      expect(result).toBeTruthy();
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/helpers.ts b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/helpers.ts
new file mode 100644
index 00000000000000..632d03cebef713
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/helpers.ts
@@ -0,0 +1,35 @@
+/*
+ * 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 {
+  BulkRuleResponse,
+  RuleResponseBuckets,
+} from '../../../../../alerts/containers/detection_engine/rules';
+
+/**
+ * Separates rules/errors from bulk rules API response (create/update/delete)
+ *
+ * @param response BulkRuleResponse from bulk rules API
+ */
+export const bucketRulesResponse = (response: BulkRuleResponse) =>
+  response.reduce<RuleResponseBuckets>(
+    (acc, cv): RuleResponseBuckets => {
+      return 'error' in cv
+        ? { rules: [...acc.rules], errors: [...acc.errors, cv] }
+        : { rules: [...acc.rules, cv], errors: [...acc.errors] };
+    },
+    { rules: [], errors: [] }
+  );
+
+export const showRulesTable = ({
+  rulesCustomInstalled,
+  rulesInstalled,
+}: {
+  rulesCustomInstalled: number | null;
+  rulesInstalled: number | null;
+}) =>
+  (rulesCustomInstalled != null && rulesCustomInstalled > 0) ||
+  (rulesInstalled != null && rulesInstalled > 0);
diff --git a/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/index.test.tsx b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/index.test.tsx
new file mode 100644
index 00000000000000..11909ae7d9c531
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/index.test.tsx
@@ -0,0 +1,230 @@
+/*
+ * 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, mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
+
+import { createKibanaContextProviderMock } from '../../../../../common/mock/kibana_react';
+import { TestProviders } from '../../../../../common/mock';
+import { wait } from '../../../../../common/lib/helpers';
+import { AllRules } from './index';
+
+jest.mock('./reducer', () => {
+  return {
+    allRulesReducer: jest.fn().mockReturnValue(() => ({
+      exportRuleIds: [],
+      filterOptions: {
+        filter: 'some filter',
+        sortField: 'some sort field',
+        sortOrder: 'desc',
+      },
+      loadingRuleIds: [],
+      loadingRulesAction: null,
+      pagination: {
+        page: 1,
+        perPage: 20,
+        total: 1,
+      },
+      rules: [
+        {
+          actions: [],
+          created_at: '2020-02-14T19:49:28.178Z',
+          created_by: 'elastic',
+          description: 'jibber jabber',
+          enabled: false,
+          false_positives: [],
+          filters: [],
+          from: 'now-660s',
+          id: 'rule-id-1',
+          immutable: true,
+          index: ['endgame-*'],
+          interval: '10m',
+          language: 'kuery',
+          max_signals: 100,
+          name: 'Credential Dumping - Detected - Elastic Endpoint',
+          output_index: '.siem-signals-default',
+          query: 'host.name:*',
+          references: [],
+          risk_score: 73,
+          rule_id: '571afc56-5ed9-465d-a2a9-045f099f6e7e',
+          severity: 'high',
+          tags: ['Elastic', 'Endpoint'],
+          threat: [],
+          throttle: null,
+          to: 'now',
+          type: 'query',
+          updated_at: '2020-02-14T19:49:28.320Z',
+          updated_by: 'elastic',
+          version: 1,
+        },
+      ],
+      selectedRuleIds: [],
+    })),
+  };
+});
+
+jest.mock('../../../../../alerts/containers/detection_engine/rules', () => {
+  return {
+    useRules: jest.fn().mockReturnValue([
+      false,
+      {
+        page: 1,
+        perPage: 20,
+        total: 1,
+        data: [
+          {
+            actions: [],
+            created_at: '2020-02-14T19:49:28.178Z',
+            created_by: 'elastic',
+            description: 'jibber jabber',
+            enabled: false,
+            false_positives: [],
+            filters: [],
+            from: 'now-660s',
+            id: 'rule-id-1',
+            immutable: true,
+            index: ['endgame-*'],
+            interval: '10m',
+            language: 'kuery',
+            max_signals: 100,
+            name: 'Credential Dumping - Detected - Elastic Endpoint',
+            output_index: '.siem-signals-default',
+            query: 'host.name:*',
+            references: [],
+            risk_score: 73,
+            rule_id: '571afc56-5ed9-465d-a2a9-045f099f6e7e',
+            severity: 'high',
+            tags: ['Elastic', 'Endpoint'],
+            threat: [],
+            throttle: null,
+            to: 'now',
+            type: 'query',
+            updated_at: '2020-02-14T19:49:28.320Z',
+            updated_by: 'elastic',
+            version: 1,
+          },
+        ],
+      },
+    ]),
+    useRulesStatuses: jest.fn().mockReturnValue({
+      loading: false,
+      rulesStatuses: [
+        {
+          current_status: {
+            alert_id: 'alertId',
+            bulk_create_time_durations: ['2235.01'],
+            gap: null,
+            last_failure_at: null,
+            last_failure_message: null,
+            last_look_back_date: new Date().toISOString(),
+            last_success_at: new Date().toISOString(),
+            last_success_message: 'it is a success',
+            search_after_time_durations: ['616.97'],
+            status: 'succeeded',
+            status_date: new Date().toISOString(),
+          },
+          failures: [],
+          id: '12345678987654321',
+          activate: true,
+          name: 'Test rule',
+        },
+      ],
+    }),
+  };
+});
+
+jest.mock('react-router-dom', () => {
+  const originalModule = jest.requireActual('react-router-dom');
+
+  return {
+    ...originalModule,
+    useHistory: jest.fn(),
+  };
+});
+
+describe('AllRules', () => {
+  it('renders correctly', () => {
+    const wrapper = shallow(
+      <AllRules
+        createPrePackagedRules={jest.fn()}
+        hasNoPermissions={false}
+        loading={false}
+        loadingCreatePrePackagedRules={false}
+        refetchPrePackagedRulesStatus={jest.fn()}
+        rulesCustomInstalled={0}
+        rulesInstalled={0}
+        rulesNotInstalled={0}
+        rulesNotUpdated={0}
+        setRefreshRulesData={jest.fn()}
+      />
+    );
+
+    expect(wrapper.find('[title="All rules"]')).toHaveLength(1);
+  });
+
+  it('renders rules tab', async () => {
+    const KibanaContext = createKibanaContextProviderMock();
+    const wrapper = mount(
+      <TestProviders>
+        <KibanaContext services={{ storage: { get: jest.fn() } }}>
+          <AllRules
+            createPrePackagedRules={jest.fn()}
+            hasNoPermissions={false}
+            loading={false}
+            loadingCreatePrePackagedRules={false}
+            refetchPrePackagedRulesStatus={jest.fn()}
+            rulesCustomInstalled={1}
+            rulesInstalled={0}
+            rulesNotInstalled={0}
+            rulesNotUpdated={0}
+            setRefreshRulesData={jest.fn()}
+          />
+        </KibanaContext>
+      </TestProviders>
+    );
+
+    await act(async () => {
+      await wait();
+
+      expect(wrapper.exists('[data-test-subj="monitoring-table"]')).toBeFalsy();
+      expect(wrapper.exists('[data-test-subj="rules-table"]')).toBeTruthy();
+    });
+  });
+
+  it('renders monitoring tab when monitoring tab clicked', async () => {
+    const KibanaContext = createKibanaContextProviderMock();
+
+    const wrapper = mount(
+      <TestProviders>
+        <KibanaContext services={{ storage: { get: jest.fn() } }}>
+          <AllRules
+            createPrePackagedRules={jest.fn()}
+            hasNoPermissions={false}
+            loading={false}
+            loadingCreatePrePackagedRules={false}
+            refetchPrePackagedRulesStatus={jest.fn()}
+            rulesCustomInstalled={1}
+            rulesInstalled={0}
+            rulesNotInstalled={0}
+            rulesNotUpdated={0}
+            setRefreshRulesData={jest.fn()}
+          />
+        </KibanaContext>
+      </TestProviders>
+    );
+    const monitoringTab = wrapper.find('[data-test-subj="allRulesTableTab-monitoring"] button');
+    monitoringTab.simulate('click');
+
+    await act(async () => {
+      wrapper.update();
+      await wait();
+
+      expect(wrapper.exists('[data-test-subj="monitoring-table"]')).toBeTruthy();
+      expect(wrapper.exists('[data-test-subj="rules-table"]')).toBeFalsy();
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/index.tsx b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/index.tsx
new file mode 100644
index 00000000000000..c1fd24e24a38bb
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/index.tsx
@@ -0,0 +1,423 @@
+/*
+ * 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 {
+  EuiBasicTable,
+  EuiContextMenuPanel,
+  EuiLoadingContent,
+  EuiSpacer,
+  EuiTab,
+  EuiTabs,
+} from '@elastic/eui';
+import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import uuid from 'uuid';
+
+import {
+  useRules,
+  useRulesStatuses,
+  CreatePreBuiltRules,
+  FilterOptions,
+  Rule,
+  PaginationOptions,
+  exportRules,
+} from '../../../../../alerts/containers/detection_engine/rules';
+import { HeaderSection } from '../../../../../common/components/header_section';
+import {
+  UtilityBar,
+  UtilityBarAction,
+  UtilityBarGroup,
+  UtilityBarSection,
+  UtilityBarText,
+} from '../../../../../common/components/utility_bar';
+import { useStateToaster } from '../../../../../common/components/toasters';
+import { Loader } from '../../../../../common/components/loader';
+import { Panel } from '../../../../../common/components/panel';
+import { PrePackagedRulesPrompt } from '../../../../components/rules/pre_packaged_rules/load_empty_prompt';
+import { GenericDownloader } from '../../../../../common/components/generic_downloader';
+import { AllRulesTables, SortingType } from '../../../../components/rules/all_rules_tables';
+import { getPrePackagedRuleStatus } from '../helpers';
+import * as i18n from '../translations';
+import { EuiBasicTableOnChange } from '../types';
+import { getBatchItems } from './batch_actions';
+import { getColumns, getMonitoringColumns } from './columns';
+import { showRulesTable } from './helpers';
+import { allRulesReducer, State } from './reducer';
+import { RulesTableFilters } from './rules_table_filters/rules_table_filters';
+import { useMlCapabilities } from '../../../../../common/components/ml_popover/hooks/use_ml_capabilities';
+import { hasMlAdminPermissions } from '../../../../../../common/machine_learning/has_ml_admin_permissions';
+
+const SORT_FIELD = 'enabled';
+const initialState: State = {
+  exportRuleIds: [],
+  filterOptions: {
+    filter: '',
+    sortField: SORT_FIELD,
+    sortOrder: 'desc',
+  },
+  loadingRuleIds: [],
+  loadingRulesAction: null,
+  pagination: {
+    page: 1,
+    perPage: 20,
+    total: 0,
+  },
+  rules: [],
+  selectedRuleIds: [],
+};
+
+interface AllRulesProps {
+  createPrePackagedRules: CreatePreBuiltRules | null;
+  hasNoPermissions: boolean;
+  loading: boolean;
+  loadingCreatePrePackagedRules: boolean;
+  refetchPrePackagedRulesStatus: () => void;
+  rulesCustomInstalled: number | null;
+  rulesInstalled: number | null;
+  rulesNotInstalled: number | null;
+  rulesNotUpdated: number | null;
+  setRefreshRulesData: (refreshRule: (refreshPrePackagedRule?: boolean) => void) => void;
+}
+
+export enum AllRulesTabs {
+  rules = 'rules',
+  monitoring = 'monitoring',
+}
+
+const allRulesTabs = [
+  {
+    id: AllRulesTabs.rules,
+    name: i18n.RULES_TAB,
+    disabled: false,
+  },
+  {
+    id: AllRulesTabs.monitoring,
+    name: i18n.MONITORING_TAB,
+    disabled: false,
+  },
+];
+
+/**
+ * Table Component for displaying all Rules for a given cluster. Provides the ability to filter
+ * by name, sort by enabled, and perform the following actions:
+ *   * Enable/Disable
+ *   * Duplicate
+ *   * Delete
+ *   * Import/Export
+ */
+export const AllRules = React.memo<AllRulesProps>(
+  ({
+    createPrePackagedRules,
+    hasNoPermissions,
+    loading,
+    loadingCreatePrePackagedRules,
+    refetchPrePackagedRulesStatus,
+    rulesCustomInstalled,
+    rulesInstalled,
+    rulesNotInstalled,
+    rulesNotUpdated,
+    setRefreshRulesData,
+  }) => {
+    const [initLoading, setInitLoading] = useState(true);
+    const tableRef = useRef<EuiBasicTable>();
+    const [
+      {
+        exportRuleIds,
+        filterOptions,
+        loadingRuleIds,
+        loadingRulesAction,
+        pagination,
+        rules,
+        selectedRuleIds,
+      },
+      dispatch,
+    ] = useReducer(allRulesReducer(tableRef), initialState);
+    const { loading: isLoadingRulesStatuses, rulesStatuses } = useRulesStatuses(rules);
+    const history = useHistory();
+    const [, dispatchToaster] = useStateToaster();
+    const mlCapabilities = useMlCapabilities();
+    const [allRulesTab, setAllRulesTab] = useState(AllRulesTabs.rules);
+
+    // TODO: Refactor license check + hasMlAdminPermissions to common check
+    const hasMlPermissions =
+      mlCapabilities.isPlatinumOrTrialLicense && hasMlAdminPermissions(mlCapabilities);
+
+    const setRules = useCallback((newRules: Rule[], newPagination: Partial<PaginationOptions>) => {
+      dispatch({
+        type: 'setRules',
+        rules: newRules,
+        pagination: newPagination,
+      });
+    }, []);
+
+    const [isLoadingRules, , reFetchRulesData] = useRules({
+      pagination,
+      filterOptions,
+      refetchPrePackagedRulesStatus,
+      dispatchRulesInReducer: setRules,
+    });
+
+    const sorting = useMemo(
+      (): SortingType => ({ sort: { field: 'enabled', direction: filterOptions.sortOrder } }),
+      [filterOptions.sortOrder]
+    );
+
+    const prePackagedRuleStatus = getPrePackagedRuleStatus(
+      rulesInstalled,
+      rulesNotInstalled,
+      rulesNotUpdated
+    );
+
+    const getBatchItemsPopoverContent = useCallback(
+      (closePopover: () => void) => (
+        <EuiContextMenuPanel
+          items={getBatchItems({
+            closePopover,
+            dispatch,
+            dispatchToaster,
+            hasMlPermissions,
+            loadingRuleIds,
+            selectedRuleIds,
+            reFetchRules: reFetchRulesData,
+            rules,
+          })}
+        />
+      ),
+      [
+        dispatch,
+        dispatchToaster,
+        hasMlPermissions,
+        loadingRuleIds,
+        reFetchRulesData,
+        rules,
+        selectedRuleIds,
+      ]
+    );
+
+    const paginationMemo = useMemo(
+      () => ({
+        pageIndex: pagination.page - 1,
+        pageSize: pagination.perPage,
+        totalItemCount: pagination.total,
+        pageSizeOptions: [5, 10, 20, 50, 100, 200, 300],
+      }),
+      [pagination]
+    );
+
+    const tableOnChangeCallback = useCallback(
+      ({ page, sort }: EuiBasicTableOnChange) => {
+        dispatch({
+          type: 'updateFilterOptions',
+          filterOptions: {
+            sortField: SORT_FIELD, // Only enabled is supported for sorting currently
+            sortOrder: sort?.direction ?? 'desc',
+          },
+          pagination: { page: page.index + 1, perPage: page.size },
+        });
+      },
+      [dispatch]
+    );
+
+    const rulesColumns = useMemo(() => {
+      return getColumns({
+        dispatch,
+        dispatchToaster,
+        history,
+        hasMlPermissions,
+        hasNoPermissions,
+        loadingRuleIds:
+          loadingRulesAction != null &&
+          (loadingRulesAction === 'enable' || loadingRulesAction === 'disable')
+            ? loadingRuleIds
+            : [],
+        reFetchRules: reFetchRulesData,
+      });
+    }, [
+      dispatch,
+      dispatchToaster,
+      hasMlPermissions,
+      history,
+      loadingRuleIds,
+      loadingRulesAction,
+      reFetchRulesData,
+    ]);
+
+    const monitoringColumns = useMemo(() => getMonitoringColumns(), []);
+
+    useEffect(() => {
+      if (reFetchRulesData != null) {
+        setRefreshRulesData(reFetchRulesData);
+      }
+    }, [reFetchRulesData, setRefreshRulesData]);
+
+    useEffect(() => {
+      if (initLoading && !loading && !isLoadingRules && !isLoadingRulesStatuses) {
+        setInitLoading(false);
+      }
+    }, [initLoading, loading, isLoadingRules, isLoadingRulesStatuses]);
+
+    const handleCreatePrePackagedRules = useCallback(async () => {
+      if (createPrePackagedRules != null && reFetchRulesData != null) {
+        await createPrePackagedRules();
+        reFetchRulesData(true);
+      }
+    }, [createPrePackagedRules, reFetchRulesData]);
+
+    const euiBasicTableSelectionProps = useMemo(
+      () => ({
+        selectable: (item: Rule) => !loadingRuleIds.includes(item.id),
+        onSelectionChange: (selected: Rule[]) =>
+          dispatch({ type: 'selectedRuleIds', ids: selected.map(r => r.id) }),
+      }),
+      [loadingRuleIds]
+    );
+
+    const onFilterChangedCallback = useCallback((newFilterOptions: Partial<FilterOptions>) => {
+      dispatch({
+        type: 'updateFilterOptions',
+        filterOptions: {
+          ...newFilterOptions,
+        },
+        pagination: { page: 1 },
+      });
+    }, []);
+
+    const isLoadingAnActionOnRule = useMemo(() => {
+      if (
+        loadingRuleIds.length > 0 &&
+        (loadingRulesAction === 'disable' || loadingRulesAction === 'enable')
+      ) {
+        return false;
+      } else if (loadingRuleIds.length > 0) {
+        return true;
+      }
+      return false;
+    }, [loadingRuleIds, loadingRulesAction]);
+
+    const tabs = useMemo(
+      () => (
+        <EuiTabs>
+          {allRulesTabs.map(tab => (
+            <EuiTab
+              data-test-subj={`allRulesTableTab-${tab.id}`}
+              onClick={() => setAllRulesTab(tab.id)}
+              isSelected={tab.id === allRulesTab}
+              disabled={tab.disabled}
+              key={tab.id}
+            >
+              {tab.name}
+            </EuiTab>
+          ))}
+        </EuiTabs>
+      ),
+      [allRulesTabs, allRulesTab, setAllRulesTab]
+    );
+
+    return (
+      <>
+        <GenericDownloader
+          filename={`${i18n.EXPORT_FILENAME}.ndjson`}
+          ids={exportRuleIds}
+          onExportSuccess={exportCount => {
+            dispatch({ type: 'loadingRuleIds', ids: [], actionType: null });
+            dispatchToaster({
+              type: 'addToaster',
+              toast: {
+                id: uuid.v4(),
+                title: i18n.SUCCESSFULLY_EXPORTED_RULES(exportCount),
+                color: 'success',
+                iconType: 'check',
+              },
+            });
+          }}
+          exportSelectedData={exportRules}
+        />
+        <EuiSpacer />
+        {tabs}
+        <EuiSpacer />
+
+        <Panel loading={loading || isLoadingRules || isLoadingRulesStatuses}>
+          <>
+            <HeaderSection split title={i18n.ALL_RULES}>
+              <RulesTableFilters
+                onFilterChanged={onFilterChangedCallback}
+                rulesCustomInstalled={rulesCustomInstalled}
+                rulesInstalled={rulesInstalled}
+              />
+            </HeaderSection>
+
+            {(loading || isLoadingRules || isLoadingAnActionOnRule || isLoadingRulesStatuses) &&
+              !initLoading && (
+                <Loader data-test-subj="loadingPanelAllRulesTable" overlay size="xl" />
+              )}
+            {rulesCustomInstalled != null &&
+              rulesCustomInstalled === 0 &&
+              prePackagedRuleStatus === 'ruleNotInstalled' &&
+              !initLoading && (
+                <PrePackagedRulesPrompt
+                  createPrePackagedRules={handleCreatePrePackagedRules}
+                  loading={loadingCreatePrePackagedRules}
+                  userHasNoPermissions={hasNoPermissions}
+                />
+              )}
+            {initLoading && (
+              <EuiLoadingContent data-test-subj="initialLoadingPanelAllRulesTable" lines={10} />
+            )}
+            {showRulesTable({ rulesCustomInstalled, rulesInstalled }) && !initLoading && (
+              <>
+                <UtilityBar>
+                  <UtilityBarSection>
+                    <UtilityBarGroup>
+                      <UtilityBarText dataTestSubj="showingRules">
+                        {i18n.SHOWING_RULES(pagination.total ?? 0)}
+                      </UtilityBarText>
+                    </UtilityBarGroup>
+
+                    <UtilityBarGroup>
+                      <UtilityBarText>{i18n.SELECTED_RULES(selectedRuleIds.length)}</UtilityBarText>
+                      {!hasNoPermissions && (
+                        <UtilityBarAction
+                          dataTestSubj="bulkActions"
+                          iconSide="right"
+                          iconType="arrowDown"
+                          popoverContent={getBatchItemsPopoverContent}
+                        >
+                          {i18n.BATCH_ACTIONS}
+                        </UtilityBarAction>
+                      )}
+                      <UtilityBarAction
+                        iconSide="left"
+                        iconType="refresh"
+                        onClick={() => reFetchRulesData(true)}
+                      >
+                        {i18n.REFRESH}
+                      </UtilityBarAction>
+                    </UtilityBarGroup>
+                  </UtilityBarSection>
+                </UtilityBar>
+                <AllRulesTables
+                  selectedTab={allRulesTab}
+                  euiBasicTableSelectionProps={euiBasicTableSelectionProps}
+                  hasNoPermissions={hasNoPermissions}
+                  monitoringColumns={monitoringColumns}
+                  pagination={paginationMemo}
+                  rules={rules}
+                  rulesColumns={rulesColumns}
+                  rulesStatuses={rulesStatuses}
+                  sorting={sorting}
+                  tableOnChangeCallback={tableOnChangeCallback}
+                  tableRef={tableRef}
+                />
+              </>
+            )}
+          </>
+        </Panel>
+      </>
+    );
+  }
+);
+
+AllRules.displayName = 'AllRules';
diff --git a/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/reducer.ts b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/reducer.ts
new file mode 100644
index 00000000000000..72559d84eeab42
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/reducer.ts
@@ -0,0 +1,132 @@
+/*
+ * 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 { EuiBasicTable } from '@elastic/eui';
+import {
+  FilterOptions,
+  PaginationOptions,
+  Rule,
+} from '../../../../../alerts/containers/detection_engine/rules';
+
+type LoadingRuleAction = 'duplicate' | 'enable' | 'disable' | 'export' | 'delete' | null;
+export interface State {
+  exportRuleIds: string[];
+  filterOptions: FilterOptions;
+  loadingRuleIds: string[];
+  loadingRulesAction: LoadingRuleAction;
+  pagination: PaginationOptions;
+  rules: Rule[];
+  selectedRuleIds: string[];
+}
+
+export type Action =
+  | { type: 'exportRuleIds'; ids: string[] }
+  | { type: 'loadingRuleIds'; ids: string[]; actionType: LoadingRuleAction }
+  | { type: 'selectedRuleIds'; ids: string[] }
+  | { type: 'setRules'; rules: Rule[]; pagination: Partial<PaginationOptions> }
+  | { type: 'updateRules'; rules: Rule[] }
+  | {
+      type: 'updateFilterOptions';
+      filterOptions: Partial<FilterOptions>;
+      pagination: Partial<PaginationOptions>;
+    }
+  | { type: 'failure' };
+
+export const allRulesReducer = (
+  tableRef: React.MutableRefObject<EuiBasicTable<unknown> | undefined>
+) => (state: State, action: Action): State => {
+  switch (action.type) {
+    case 'exportRuleIds': {
+      return {
+        ...state,
+        loadingRuleIds: action.ids,
+        loadingRulesAction: 'export',
+        exportRuleIds: action.ids,
+      };
+    }
+    case 'loadingRuleIds': {
+      return {
+        ...state,
+        loadingRuleIds: action.actionType == null ? [] : [...state.loadingRuleIds, ...action.ids],
+        loadingRulesAction: action.actionType,
+      };
+    }
+    case 'selectedRuleIds': {
+      return {
+        ...state,
+        selectedRuleIds: action.ids,
+      };
+    }
+    case 'setRules': {
+      if (
+        tableRef != null &&
+        tableRef.current != null &&
+        tableRef.current.changeSelection != null
+      ) {
+        // for future devs: eui basic table is not giving us a prop to set the value, so
+        // we are using the ref in setTimeout to reset on the next loop so that we
+        // do not get a warning telling us we are trying to update during a render
+        window.setTimeout(() => tableRef?.current?.changeSelection([]), 0);
+      }
+
+      return {
+        ...state,
+        rules: action.rules,
+        selectedRuleIds: [],
+        loadingRuleIds: [],
+        loadingRulesAction: null,
+        pagination: {
+          ...state.pagination,
+          ...action.pagination,
+        },
+      };
+    }
+    case 'updateRules': {
+      if (state.rules != null) {
+        const ruleIds = state.rules.map(r => r.id);
+        const updatedRules = action.rules.reduce((rules, updatedRule) => {
+          let newRules = rules;
+          if (ruleIds.includes(updatedRule.id)) {
+            newRules = newRules.map(r => (updatedRule.id === r.id ? updatedRule : r));
+          } else {
+            newRules = [...newRules, updatedRule];
+          }
+          return newRules;
+        }, state.rules);
+        const updatedRuleIds = action.rules.map(r => r.id);
+        const newLoadingRuleIds = state.loadingRuleIds.filter(id => !updatedRuleIds.includes(id));
+        return {
+          ...state,
+          rules: updatedRules,
+          loadingRuleIds: newLoadingRuleIds,
+          loadingRulesAction: newLoadingRuleIds.length === 0 ? null : state.loadingRulesAction,
+        };
+      }
+      return state;
+    }
+    case 'updateFilterOptions': {
+      return {
+        ...state,
+        filterOptions: {
+          ...state.filterOptions,
+          ...action.filterOptions,
+        },
+        pagination: {
+          ...state.pagination,
+          ...action.pagination,
+        },
+      };
+    }
+    case 'failure': {
+      return {
+        ...state,
+        rules: [],
+      };
+    }
+    default:
+      return state;
+  }
+};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/all/rules_table_filters/rules_table_filters.test.tsx b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/rules_table_filters/rules_table_filters.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/all/rules_table_filters/rules_table_filters.test.tsx
rename to x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/rules_table_filters/rules_table_filters.test.tsx
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/all/rules_table_filters/rules_table_filters.tsx b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/rules_table_filters/rules_table_filters.tsx
similarity index 95%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/all/rules_table_filters/rules_table_filters.tsx
rename to x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/rules_table_filters/rules_table_filters.tsx
index ddb8894c206b56..de4804f37f1bc9 100644
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/all/rules_table_filters/rules_table_filters.tsx
+++ b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/rules_table_filters/rules_table_filters.tsx
@@ -16,8 +16,8 @@ import {
 import { isEqual } from 'lodash/fp';
 import * as i18n from '../../translations';
 
-import { FilterOptions } from '../../../../../containers/detection_engine/rules';
-import { useTags } from '../../../../../containers/detection_engine/rules/use_tags';
+import { FilterOptions } from '../../../../../../alerts/containers/detection_engine/rules';
+import { useTags } from '../../../../../../alerts/containers/detection_engine/rules/use_tags';
 import { TagsFilterPopover } from './tags_filter_popover';
 
 interface RulesTableFiltersProps {
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/all/rules_table_filters/tags_filter_popover.test.tsx b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/rules_table_filters/tags_filter_popover.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/all/rules_table_filters/tags_filter_popover.test.tsx
rename to x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/rules_table_filters/tags_filter_popover.test.tsx
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/all/rules_table_filters/tags_filter_popover.tsx b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/rules_table_filters/tags_filter_popover.tsx
similarity index 95%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/all/rules_table_filters/tags_filter_popover.tsx
rename to x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/rules_table_filters/tags_filter_popover.tsx
index 44149a072f5c1e..b453125223c307 100644
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/all/rules_table_filters/tags_filter_popover.tsx
+++ b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/all/rules_table_filters/tags_filter_popover.tsx
@@ -16,7 +16,7 @@ import {
 } from '@elastic/eui';
 import styled from 'styled-components';
 import * as i18n from '../../translations';
-import { toggleSelectedGroup } from '../../../../../components/ml_popover/jobs_table/filters/toggle_selected_group';
+import { toggleSelectedGroup } from '../../../../../../common/components/ml_popover/jobs_table/filters/toggle_selected_group';
 
 interface TagsFilterPopoverProps {
   selectedTags: string[];
diff --git a/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/create/helpers.test.ts b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/create/helpers.test.ts
new file mode 100644
index 00000000000000..1894d0ab1a9e7b
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/create/helpers.test.ts
@@ -0,0 +1,730 @@
+/*
+ * 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 { NewRule } from '../../../../../alerts/containers/detection_engine/rules';
+import {
+  DefineStepRuleJson,
+  ScheduleStepRuleJson,
+  AboutStepRuleJson,
+  ActionsStepRuleJson,
+  AboutStepRule,
+  ActionsStepRule,
+  ScheduleStepRule,
+  DefineStepRule,
+} from '../types';
+import {
+  getTimeTypeValue,
+  formatDefineStepData,
+  formatScheduleStepData,
+  formatAboutStepData,
+  formatActionsStepData,
+  formatRule,
+  filterRuleFieldsForType,
+} from './helpers';
+import {
+  mockDefineStepRule,
+  mockQueryBar,
+  mockScheduleStepRule,
+  mockAboutStepRule,
+  mockActionsStepRule,
+} from '../all/__mocks__/mock';
+
+describe('helpers', () => {
+  describe('getTimeTypeValue', () => {
+    test('returns timeObj with value 0 if no time value found', () => {
+      const result = getTimeTypeValue('m');
+
+      expect(result).toEqual({ unit: 'm', value: 0 });
+    });
+
+    test('returns timeObj with unit set to empty string if no expected time type found', () => {
+      const result = getTimeTypeValue('5l');
+
+      expect(result).toEqual({ unit: '', value: 5 });
+    });
+
+    test('returns timeObj with unit of s and value 5 when time is 5s ', () => {
+      const result = getTimeTypeValue('5s');
+
+      expect(result).toEqual({ unit: 's', value: 5 });
+    });
+
+    test('returns timeObj with unit of m and value 5 when time is 5m ', () => {
+      const result = getTimeTypeValue('5m');
+
+      expect(result).toEqual({ unit: 'm', value: 5 });
+    });
+
+    test('returns timeObj with unit of h and value 5 when time is 5h ', () => {
+      const result = getTimeTypeValue('5h');
+
+      expect(result).toEqual({ unit: 'h', value: 5 });
+    });
+
+    test('returns timeObj with value of 5 when time is float like 5.6m ', () => {
+      const result = getTimeTypeValue('5m');
+
+      expect(result).toEqual({ unit: 'm', value: 5 });
+    });
+
+    test('returns timeObj with value of 0 and unit of "" if random string passed in', () => {
+      const result = getTimeTypeValue('random');
+
+      expect(result).toEqual({ unit: '', value: 0 });
+    });
+  });
+
+  describe('formatDefineStepData', () => {
+    let mockData: DefineStepRule;
+
+    beforeEach(() => {
+      mockData = mockDefineStepRule();
+    });
+
+    test('returns formatted object as DefineStepRuleJson', () => {
+      const result: DefineStepRuleJson = formatDefineStepData(mockData);
+      const expected = {
+        language: 'kuery',
+        filters: mockQueryBar.filters,
+        query: 'test query',
+        saved_id: 'test123',
+        index: ['filebeat-'],
+        type: 'saved_query',
+        timeline_id: '86aa74d0-2136-11ea-9864-ebc8cc1cb8c2',
+        timeline_title: 'Titled timeline',
+      };
+
+      expect(result).toEqual(expected);
+    });
+
+    test('returns formatted object with no saved_id if no savedId provided', () => {
+      const mockStepData = {
+        ...mockData,
+        queryBar: {
+          ...mockData.queryBar,
+          saved_id: '',
+        },
+      };
+      const result: DefineStepRuleJson = formatDefineStepData(mockStepData);
+      const expected = {
+        language: 'kuery',
+        filters: mockQueryBar.filters,
+        query: 'test query',
+        index: ['filebeat-'],
+        saved_id: '',
+        type: 'query',
+        timeline_id: '86aa74d0-2136-11ea-9864-ebc8cc1cb8c2',
+        timeline_title: 'Titled timeline',
+      };
+
+      expect(result).toEqual(expected);
+    });
+
+    test('returns formatted object without timeline_id and timeline_title if timeline.id is null', () => {
+      const mockStepData = {
+        ...mockData,
+      };
+      delete mockStepData.timeline.id;
+
+      const result: DefineStepRuleJson = formatDefineStepData(mockStepData);
+
+      const expected = {
+        language: 'kuery',
+        filters: mockQueryBar.filters,
+        query: 'test query',
+        index: ['filebeat-'],
+        saved_id: 'test123',
+        type: 'saved_query',
+      };
+
+      expect(result).toEqual(expected);
+    });
+
+    test('returns formatted object with timeline_id and timeline_title if timeline.id is "', () => {
+      const mockStepData = {
+        ...mockData,
+        timeline: {
+          ...mockData.timeline,
+          id: '',
+        },
+      };
+      const result: DefineStepRuleJson = formatDefineStepData(mockStepData);
+
+      const expected = {
+        language: 'kuery',
+        filters: mockQueryBar.filters,
+        query: 'test query',
+        index: ['filebeat-'],
+        saved_id: 'test123',
+        type: 'saved_query',
+        timeline_id: '',
+        timeline_title: 'Titled timeline',
+      };
+
+      expect(result).toEqual(expected);
+    });
+
+    test('returns formatted object without timeline_id and timeline_title if timeline.title is null', () => {
+      const mockStepData = {
+        ...mockData,
+        timeline: {
+          ...mockData.timeline,
+          id: '86aa74d0-2136-11ea-9864-ebc8cc1cb8c2',
+        },
+      };
+      delete mockStepData.timeline.title;
+      const result: DefineStepRuleJson = formatDefineStepData(mockStepData);
+
+      const expected = {
+        language: 'kuery',
+        filters: mockQueryBar.filters,
+        query: 'test query',
+        index: ['filebeat-'],
+        saved_id: 'test123',
+        type: 'saved_query',
+      };
+
+      expect(result).toEqual(expected);
+    });
+
+    test('returns formatted object with timeline_id and timeline_title if timeline.title is "', () => {
+      const mockStepData = {
+        ...mockData,
+        timeline: {
+          ...mockData.timeline,
+          title: '',
+        },
+      };
+      const result: DefineStepRuleJson = formatDefineStepData(mockStepData);
+
+      const expected = {
+        language: 'kuery',
+        filters: mockQueryBar.filters,
+        query: 'test query',
+        index: ['filebeat-'],
+        saved_id: 'test123',
+        type: 'saved_query',
+        timeline_id: '86aa74d0-2136-11ea-9864-ebc8cc1cb8c2',
+        timeline_title: '',
+      };
+
+      expect(result).toEqual(expected);
+    });
+
+    test('returns ML fields if type is machine_learning', () => {
+      const mockStepData: DefineStepRule = {
+        ...mockData,
+        ruleType: 'machine_learning',
+        anomalyThreshold: 44,
+        machineLearningJobId: 'some_jobert_id',
+      };
+      const result: DefineStepRuleJson = formatDefineStepData(mockStepData);
+
+      const expected = {
+        type: 'machine_learning',
+        anomaly_threshold: 44,
+        machine_learning_job_id: 'some_jobert_id',
+        timeline_id: '86aa74d0-2136-11ea-9864-ebc8cc1cb8c2',
+        timeline_title: 'Titled timeline',
+      };
+
+      expect(result).toEqual(expected);
+    });
+  });
+
+  describe('formatScheduleStepData', () => {
+    let mockData: ScheduleStepRule;
+
+    beforeEach(() => {
+      mockData = mockScheduleStepRule();
+    });
+
+    test('returns formatted object as ScheduleStepRuleJson', () => {
+      const result: ScheduleStepRuleJson = formatScheduleStepData(mockData);
+      const expected = {
+        from: 'now-660s',
+        to: 'now',
+        interval: '5m',
+        meta: {
+          from: '6m',
+        },
+      };
+
+      expect(result).toEqual(expected);
+    });
+
+    test('returns formatted object with "to" as "now" if "to" not supplied', () => {
+      const mockStepData = {
+        ...mockData,
+      };
+      delete mockStepData.to;
+      const result: ScheduleStepRuleJson = formatScheduleStepData(mockStepData);
+      const expected = {
+        from: 'now-660s',
+        to: 'now',
+        interval: '5m',
+        meta: {
+          from: '6m',
+        },
+      };
+
+      expect(result).toEqual(expected);
+    });
+
+    test('returns formatted object with "to" as "now" if "to" random string', () => {
+      const mockStepData = {
+        ...mockData,
+        to: 'random',
+      };
+      const result: ScheduleStepRuleJson = formatScheduleStepData(mockStepData);
+      const expected = {
+        from: 'now-660s',
+        to: 'now',
+        interval: '5m',
+        meta: {
+          from: '6m',
+        },
+      };
+
+      expect(result).toEqual(expected);
+    });
+
+    test('returns formatted object  if "from" random string', () => {
+      const mockStepData = {
+        ...mockData,
+        from: 'random',
+      };
+      const result: ScheduleStepRuleJson = formatScheduleStepData(mockStepData);
+      const expected = {
+        from: 'now-300s',
+        to: 'now',
+        interval: '5m',
+        meta: {
+          from: 'random',
+        },
+      };
+
+      expect(result).toEqual(expected);
+    });
+
+    test('returns formatted object  if "interval" random string', () => {
+      const mockStepData = {
+        ...mockData,
+        interval: 'random',
+      };
+      const result: ScheduleStepRuleJson = formatScheduleStepData(mockStepData);
+      const expected = {
+        from: 'now-360s',
+        to: 'now',
+        interval: 'random',
+        meta: {
+          from: '6m',
+        },
+      };
+
+      expect(result).toEqual(expected);
+    });
+  });
+
+  describe('formatAboutStepData', () => {
+    let mockData: AboutStepRule;
+
+    beforeEach(() => {
+      mockData = mockAboutStepRule();
+    });
+
+    test('returns formatted object as AboutStepRuleJson', () => {
+      const result: AboutStepRuleJson = formatAboutStepData(mockData);
+      const expected = {
+        description: '24/7',
+        false_positives: ['test'],
+        name: 'Query with rule-id',
+        note: '# this is some markdown documentation',
+        references: ['www.test.co'],
+        risk_score: 21,
+        severity: 'low',
+        tags: ['tag1', 'tag2'],
+        threat: [
+          {
+            framework: 'MITRE ATT&CK',
+            tactic: {
+              id: '1234',
+              name: 'tactic1',
+              reference: 'reference1',
+            },
+            technique: [
+              {
+                id: '456',
+                name: 'technique1',
+                reference: 'technique reference',
+              },
+            ],
+          },
+        ],
+      };
+
+      expect(result).toEqual(expected);
+    });
+
+    test('returns formatted object with empty falsePositive and references filtered out', () => {
+      const mockStepData = {
+        ...mockData,
+        falsePositives: ['', 'test', ''],
+        references: ['www.test.co', ''],
+      };
+      const result: AboutStepRuleJson = formatAboutStepData(mockStepData);
+      const expected = {
+        description: '24/7',
+        false_positives: ['test'],
+        name: 'Query with rule-id',
+        note: '# this is some markdown documentation',
+        references: ['www.test.co'],
+        risk_score: 21,
+        severity: 'low',
+        tags: ['tag1', 'tag2'],
+        threat: [
+          {
+            framework: 'MITRE ATT&CK',
+            tactic: {
+              id: '1234',
+              name: 'tactic1',
+              reference: 'reference1',
+            },
+            technique: [
+              {
+                id: '456',
+                name: 'technique1',
+                reference: 'technique reference',
+              },
+            ],
+          },
+        ],
+      };
+
+      expect(result).toEqual(expected);
+    });
+
+    test('returns formatted object without note if note is empty string', () => {
+      const mockStepData = {
+        ...mockData,
+        note: '',
+      };
+      const result: AboutStepRuleJson = formatAboutStepData(mockStepData);
+      const expected = {
+        description: '24/7',
+        false_positives: ['test'],
+        name: 'Query with rule-id',
+        references: ['www.test.co'],
+        risk_score: 21,
+        severity: 'low',
+        tags: ['tag1', 'tag2'],
+        threat: [
+          {
+            framework: 'MITRE ATT&CK',
+            tactic: {
+              id: '1234',
+              name: 'tactic1',
+              reference: 'reference1',
+            },
+            technique: [
+              {
+                id: '456',
+                name: 'technique1',
+                reference: 'technique reference',
+              },
+            ],
+          },
+        ],
+      };
+
+      expect(result).toEqual(expected);
+    });
+
+    test('returns formatted object with threats filtered out where tactic.name is "none"', () => {
+      const mockStepData = {
+        ...mockData,
+        threat: [
+          {
+            framework: 'mockFramework',
+            tactic: {
+              id: '1234',
+              name: 'tactic1',
+              reference: 'reference1',
+            },
+            technique: [
+              {
+                id: '456',
+                name: 'technique1',
+                reference: 'technique reference',
+              },
+            ],
+          },
+          {
+            framework: 'mockFramework',
+            tactic: {
+              id: '1234',
+              name: 'none',
+              reference: 'reference1',
+            },
+            technique: [
+              {
+                id: '456',
+                name: 'technique1',
+                reference: 'technique reference',
+              },
+            ],
+          },
+        ],
+      };
+      const result: AboutStepRuleJson = formatAboutStepData(mockStepData);
+      const expected = {
+        description: '24/7',
+        false_positives: ['test'],
+        name: 'Query with rule-id',
+        note: '# this is some markdown documentation',
+        references: ['www.test.co'],
+        risk_score: 21,
+        severity: 'low',
+        tags: ['tag1', 'tag2'],
+        threat: [
+          {
+            framework: 'MITRE ATT&CK',
+            tactic: { id: '1234', name: 'tactic1', reference: 'reference1' },
+            technique: [{ id: '456', name: 'technique1', reference: 'technique reference' }],
+          },
+        ],
+      };
+
+      expect(result).toEqual(expected);
+    });
+  });
+
+  describe('formatActionsStepData', () => {
+    let mockData: ActionsStepRule;
+
+    beforeEach(() => {
+      mockData = mockActionsStepRule();
+    });
+
+    test('returns formatted object as ActionsStepRuleJson', () => {
+      const result: ActionsStepRuleJson = formatActionsStepData(mockData);
+      const expected = {
+        actions: [],
+        enabled: false,
+        meta: {
+          kibana_siem_app_url: 'http://localhost:5601/app/siem',
+        },
+        throttle: 'no_actions',
+      };
+
+      expect(result).toEqual(expected);
+    });
+
+    test('returns proper throttle value for no_actions', () => {
+      const mockStepData = {
+        ...mockData,
+        throttle: 'no_actions',
+      };
+      const result: ActionsStepRuleJson = formatActionsStepData(mockStepData);
+      const expected = {
+        actions: [],
+        enabled: false,
+        meta: {
+          kibana_siem_app_url: mockStepData.kibanaSiemAppUrl,
+        },
+        throttle: 'no_actions',
+      };
+
+      expect(result).toEqual(expected);
+    });
+
+    test('returns proper throttle value for rule', () => {
+      const mockStepData = {
+        ...mockData,
+        throttle: 'rule',
+        actions: [
+          {
+            group: 'default',
+            id: 'id',
+            actionTypeId: 'actionTypeId',
+            params: {},
+          },
+        ],
+      };
+      const result: ActionsStepRuleJson = formatActionsStepData(mockStepData);
+      const expected = {
+        actions: [
+          {
+            group: mockStepData.actions[0].group,
+            id: mockStepData.actions[0].id,
+            action_type_id: mockStepData.actions[0].actionTypeId,
+            params: mockStepData.actions[0].params,
+          },
+        ],
+        enabled: false,
+        meta: {
+          kibana_siem_app_url: mockStepData.kibanaSiemAppUrl,
+        },
+        throttle: 'rule',
+      };
+
+      expect(result).toEqual(expected);
+    });
+
+    test('returns proper throttle value for interval', () => {
+      const mockStepData = {
+        ...mockData,
+        throttle: '1d',
+        actions: [
+          {
+            group: 'default',
+            id: 'id',
+            actionTypeId: 'actionTypeId',
+            params: {},
+          },
+        ],
+      };
+      const result: ActionsStepRuleJson = formatActionsStepData(mockStepData);
+      const expected = {
+        actions: [
+          {
+            group: mockStepData.actions[0].group,
+            id: mockStepData.actions[0].id,
+            action_type_id: mockStepData.actions[0].actionTypeId,
+            params: mockStepData.actions[0].params,
+          },
+        ],
+        enabled: false,
+        meta: {
+          kibana_siem_app_url: mockStepData.kibanaSiemAppUrl,
+        },
+        throttle: mockStepData.throttle,
+      };
+
+      expect(result).toEqual(expected);
+    });
+
+    test('returns actions with action_type_id', () => {
+      const mockAction = {
+        group: 'default',
+        id: '99403909-ca9b-49ba-9d7a-7e5320e68d05',
+        params: { message: 'ML Rule generated {{state.signals_count}} signals' },
+        actionTypeId: '.slack',
+      };
+
+      const mockStepData = {
+        ...mockData,
+        actions: [mockAction],
+      };
+      const result: ActionsStepRuleJson = formatActionsStepData(mockStepData);
+      const expected = {
+        actions: [
+          {
+            group: mockAction.group,
+            id: mockAction.id,
+            params: mockAction.params,
+            action_type_id: mockAction.actionTypeId,
+          },
+        ],
+        enabled: false,
+        meta: {
+          kibana_siem_app_url: mockStepData.kibanaSiemAppUrl,
+        },
+        throttle: 'no_actions',
+      };
+
+      expect(result).toEqual(expected);
+    });
+  });
+
+  describe('formatRule', () => {
+    let mockAbout: AboutStepRule;
+    let mockDefine: DefineStepRule;
+    let mockSchedule: ScheduleStepRule;
+    let mockActions: ActionsStepRule;
+
+    beforeEach(() => {
+      mockAbout = mockAboutStepRule();
+      mockDefine = mockDefineStepRule();
+      mockSchedule = mockScheduleStepRule();
+      mockActions = mockActionsStepRule();
+    });
+
+    test('returns NewRule with type of saved_query when saved_id exists', () => {
+      const result: NewRule = formatRule(mockDefine, mockAbout, mockSchedule, mockActions);
+
+      expect(result.type).toEqual('saved_query');
+    });
+
+    test('returns NewRule with type of query when saved_id does not exist', () => {
+      const mockDefineStepRuleWithoutSavedId = {
+        ...mockDefine,
+        queryBar: {
+          ...mockDefine.queryBar,
+          saved_id: '',
+        },
+      };
+      const result: NewRule = formatRule(
+        mockDefineStepRuleWithoutSavedId,
+        mockAbout,
+        mockSchedule,
+        mockActions
+      );
+
+      expect(result.type).toEqual('query');
+    });
+
+    test('returns NewRule without id if ruleId does not exist', () => {
+      const result: NewRule = formatRule(mockDefine, mockAbout, mockSchedule, mockActions);
+
+      expect(result.id).toBeUndefined();
+    });
+  });
+
+  describe('filterRuleFieldsForType', () => {
+    let fields: DefineStepRule;
+
+    beforeEach(() => {
+      fields = mockDefineStepRule();
+    });
+
+    it('removes query fields if the type is machine learning', () => {
+      const result = filterRuleFieldsForType(fields, 'machine_learning');
+      expect(result).not.toHaveProperty('index');
+      expect(result).not.toHaveProperty('queryBar');
+    });
+
+    it('leaves ML fields if the type is machine learning', () => {
+      const result = filterRuleFieldsForType(fields, 'machine_learning');
+      expect(result).toHaveProperty('anomalyThreshold');
+      expect(result).toHaveProperty('machineLearningJobId');
+    });
+
+    it('leaves arbitrary fields if the type is machine learning', () => {
+      const result = filterRuleFieldsForType(fields, 'machine_learning');
+      expect(result).toHaveProperty('timeline');
+      expect(result).toHaveProperty('ruleType');
+    });
+
+    it('removes ML fields if the type is not machine learning', () => {
+      const result = filterRuleFieldsForType(fields, 'query');
+      expect(result).not.toHaveProperty('anomalyThreshold');
+      expect(result).not.toHaveProperty('machineLearningJobId');
+    });
+
+    it('leaves query fields if the type is query', () => {
+      const result = filterRuleFieldsForType(fields, 'query');
+      expect(result).toHaveProperty('index');
+      expect(result).toHaveProperty('queryBar');
+    });
+
+    it('leaves arbitrary fields if the type is query', () => {
+      const result = filterRuleFieldsForType(fields, 'query');
+      expect(result).toHaveProperty('timeline');
+      expect(result).toHaveProperty('ruleType');
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/create/helpers.ts b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/create/helpers.ts
new file mode 100644
index 00000000000000..7f200ef421c489
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/create/helpers.ts
@@ -0,0 +1,174 @@
+/*
+ * 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 { has, isEmpty } from 'lodash/fp';
+import moment from 'moment';
+import deepmerge from 'deepmerge';
+
+import { NOTIFICATION_THROTTLE_NO_ACTIONS } from '../../../../../../common/constants';
+import { transformAlertToRuleAction } from '../../../../../../common/detection_engine/transform_actions';
+import { RuleType } from '../../../../../../common/detection_engine/types';
+import { isMlRule } from '../../../../../../common/machine_learning/helpers';
+import { NewRule } from '../../../../../alerts/containers/detection_engine/rules';
+
+import {
+  AboutStepRule,
+  DefineStepRule,
+  ScheduleStepRule,
+  ActionsStepRule,
+  DefineStepRuleJson,
+  ScheduleStepRuleJson,
+  AboutStepRuleJson,
+  ActionsStepRuleJson,
+} from '../types';
+
+export const getTimeTypeValue = (time: string): { unit: string; value: number } => {
+  const timeObj = {
+    unit: '',
+    value: 0,
+  };
+  const filterTimeVal = (time as string).match(/\d+/g);
+  const filterTimeType = (time as string).match(/[a-zA-Z]+/g);
+  if (!isEmpty(filterTimeVal) && filterTimeVal != null && !isNaN(Number(filterTimeVal[0]))) {
+    timeObj.value = Number(filterTimeVal[0]);
+  }
+  if (
+    !isEmpty(filterTimeType) &&
+    filterTimeType != null &&
+    ['s', 'm', 'h'].includes(filterTimeType[0])
+  ) {
+    timeObj.unit = filterTimeType[0];
+  }
+  return timeObj;
+};
+
+export interface RuleFields {
+  anomalyThreshold: unknown;
+  machineLearningJobId: unknown;
+  queryBar: unknown;
+  index: unknown;
+  ruleType: unknown;
+}
+type QueryRuleFields<T> = Omit<T, 'anomalyThreshold' | 'machineLearningJobId'>;
+type MlRuleFields<T> = Omit<T, 'queryBar' | 'index'>;
+
+const isMlFields = <T>(fields: QueryRuleFields<T> | MlRuleFields<T>): fields is MlRuleFields<T> =>
+  has('anomalyThreshold', fields);
+
+export const filterRuleFieldsForType = <T extends RuleFields>(fields: T, type: RuleType) => {
+  if (isMlRule(type)) {
+    const { index, queryBar, ...mlRuleFields } = fields;
+    return mlRuleFields;
+  } else {
+    const { anomalyThreshold, machineLearningJobId, ...queryRuleFields } = fields;
+    return queryRuleFields;
+  }
+};
+
+export const formatDefineStepData = (defineStepData: DefineStepRule): DefineStepRuleJson => {
+  const ruleFields = filterRuleFieldsForType(defineStepData, defineStepData.ruleType);
+  const { ruleType, timeline } = ruleFields;
+  const baseFields = {
+    type: ruleType,
+    ...(timeline.id != null &&
+      timeline.title != null && {
+        timeline_id: timeline.id,
+        timeline_title: timeline.title,
+      }),
+  };
+
+  const typeFields = isMlFields(ruleFields)
+    ? {
+        anomaly_threshold: ruleFields.anomalyThreshold,
+        machine_learning_job_id: ruleFields.machineLearningJobId,
+      }
+    : {
+        index: ruleFields.index,
+        filters: ruleFields.queryBar?.filters,
+        language: ruleFields.queryBar?.query?.language,
+        query: ruleFields.queryBar?.query?.query as string,
+        saved_id: ruleFields.queryBar?.saved_id,
+        ...(ruleType === 'query' &&
+          ruleFields.queryBar?.saved_id && { type: 'saved_query' as RuleType }),
+      };
+
+  return {
+    ...baseFields,
+    ...typeFields,
+  };
+};
+
+export const formatScheduleStepData = (scheduleData: ScheduleStepRule): ScheduleStepRuleJson => {
+  const { isNew, ...formatScheduleData } = scheduleData;
+  if (!isEmpty(formatScheduleData.interval) && !isEmpty(formatScheduleData.from)) {
+    const { unit: intervalUnit, value: intervalValue } = getTimeTypeValue(
+      formatScheduleData.interval
+    );
+    const { unit: fromUnit, value: fromValue } = getTimeTypeValue(formatScheduleData.from);
+    const duration = moment.duration(intervalValue, intervalUnit as 's' | 'm' | 'h');
+    duration.add(fromValue, fromUnit as 's' | 'm' | 'h');
+    formatScheduleData.from = `now-${duration.asSeconds()}s`;
+    formatScheduleData.to = 'now';
+  }
+  return {
+    ...formatScheduleData,
+    meta: {
+      from: scheduleData.from,
+    },
+  };
+};
+
+export const formatAboutStepData = (aboutStepData: AboutStepRule): AboutStepRuleJson => {
+  const { falsePositives, references, riskScore, threat, isNew, note, ...rest } = aboutStepData;
+  return {
+    false_positives: falsePositives.filter(item => !isEmpty(item)),
+    references: references.filter(item => !isEmpty(item)),
+    risk_score: riskScore,
+    threat: threat
+      .filter(singleThreat => singleThreat.tactic.name !== 'none')
+      .map(singleThreat => ({
+        ...singleThreat,
+        framework: 'MITRE ATT&CK',
+        technique: singleThreat.technique.map(technique => {
+          const { id, name, reference } = technique;
+          return { id, name, reference };
+        }),
+      })),
+    ...(!isEmpty(note) ? { note } : {}),
+    ...rest,
+  };
+};
+
+export const formatActionsStepData = (actionsStepData: ActionsStepRule): ActionsStepRuleJson => {
+  const {
+    actions = [],
+    enabled,
+    kibanaSiemAppUrl,
+    throttle = NOTIFICATION_THROTTLE_NO_ACTIONS,
+  } = actionsStepData;
+
+  return {
+    actions: actions.map(transformAlertToRuleAction),
+    enabled,
+    throttle: actions.length ? throttle : NOTIFICATION_THROTTLE_NO_ACTIONS,
+    meta: {
+      kibana_siem_app_url: kibanaSiemAppUrl,
+    },
+  };
+};
+
+export const formatRule = (
+  defineStepData: DefineStepRule,
+  aboutStepData: AboutStepRule,
+  scheduleData: ScheduleStepRule,
+  actionsData: ActionsStepRule
+): NewRule =>
+  deepmerge.all([
+    formatDefineStepData(defineStepData),
+    formatAboutStepData(aboutStepData),
+    formatScheduleStepData(scheduleData),
+    formatActionsStepData(actionsData),
+  ]) as NewRule;
diff --git a/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/create/index.test.tsx b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/create/index.test.tsx
new file mode 100644
index 00000000000000..7749e38578e906
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/create/index.test.tsx
@@ -0,0 +1,23 @@
+/*
+ * 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 { TestProviders } from '../../../../../common/mock';
+import { CreateRulePage } from './index';
+import { useUserInfo } from '../../../../components/user_info';
+
+jest.mock('../../../../components/user_info');
+
+describe('CreateRulePage', () => {
+  it('renders correctly', () => {
+    (useUserInfo as jest.Mock).mockReturnValue({});
+    const wrapper = shallow(<CreateRulePage />, { wrappingComponent: TestProviders });
+
+    expect(wrapper.find('[title="Create new rule"]')).toHaveLength(1);
+  });
+});
diff --git a/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/create/index.tsx b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/create/index.tsx
new file mode 100644
index 00000000000000..5cf7f9e5b15a30
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/create/index.tsx
@@ -0,0 +1,428 @@
+/*
+ * 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 { EuiButtonEmpty, EuiAccordion, EuiHorizontalRule, EuiPanel, EuiSpacer } from '@elastic/eui';
+import React, { useCallback, useRef, useState, useMemo } from 'react';
+import { Redirect } from 'react-router-dom';
+import styled, { StyledComponent } from 'styled-components';
+
+import { usePersistRule } from '../../../../../alerts/containers/detection_engine/rules';
+
+import { DETECTION_ENGINE_PAGE_NAME } from '../../../../../common/components/link_to/redirect_to_detection_engine';
+import { WrapperPage } from '../../../../../common/components/wrapper_page';
+import { displaySuccessToast, useStateToaster } from '../../../../../common/components/toasters';
+import { SpyRoute } from '../../../../../common/utils/route/spy_routes';
+import { useUserInfo } from '../../../../components/user_info';
+import { AccordionTitle } from '../../../../components/rules/accordion_title';
+import { FormData, FormHook } from '../../../../../shared_imports';
+import { StepAboutRule } from '../../../../components/rules/step_about_rule';
+import { StepDefineRule } from '../../../../components/rules/step_define_rule';
+import { StepScheduleRule } from '../../../../components/rules/step_schedule_rule';
+import { StepRuleActions } from '../../../../components/rules/step_rule_actions';
+import { DetectionEngineHeaderPage } from '../../../../components/detection_engine_header_page';
+import * as RuleI18n from '../translations';
+import { redirectToDetections, getActionMessageParams, userHasNoPermissions } from '../helpers';
+import {
+  AboutStepRule,
+  DefineStepRule,
+  RuleStep,
+  RuleStepData,
+  ScheduleStepRule,
+  ActionsStepRule,
+} from '../types';
+import { formatRule } from './helpers';
+import * as i18n from './translations';
+
+const stepsRuleOrder = [
+  RuleStep.defineRule,
+  RuleStep.aboutRule,
+  RuleStep.scheduleRule,
+  RuleStep.ruleActions,
+];
+
+const MyEuiPanel = styled(EuiPanel)<{
+  zindex?: number;
+}>`
+  position: relative;
+  z-index: ${props => props.zindex}; /* ugly fix to allow searchBar to overflow the EuiPanel */
+
+  > .euiAccordion > .euiAccordion__triggerWrapper {
+    .euiAccordion__button {
+      cursor: default !important;
+      &:hover {
+        text-decoration: none !important;
+      }
+    }
+
+    .euiAccordion__iconWrapper {
+      display: none;
+    }
+  }
+`;
+
+MyEuiPanel.displayName = 'MyEuiPanel';
+
+const StepDefineRuleAccordion: StyledComponent<
+  typeof EuiAccordion,
+  any, // eslint-disable-line
+  { ref: React.MutableRefObject<EuiAccordion | null> },
+  never
+> = styled(EuiAccordion)`
+  .euiAccordion__childWrapper {
+    overflow: visible;
+  }
+`;
+
+StepDefineRuleAccordion.displayName = 'StepDefineRuleAccordion';
+
+const CreateRulePageComponent: React.FC = () => {
+  const {
+    loading,
+    isSignalIndexExists,
+    isAuthenticated,
+    hasEncryptionKey,
+    canUserCRUD,
+  } = useUserInfo();
+  const [, dispatchToaster] = useStateToaster();
+  const [openAccordionId, setOpenAccordionId] = useState<RuleStep>(RuleStep.defineRule);
+  const defineRuleRef = useRef<EuiAccordion | null>(null);
+  const aboutRuleRef = useRef<EuiAccordion | null>(null);
+  const scheduleRuleRef = useRef<EuiAccordion | null>(null);
+  const ruleActionsRef = useRef<EuiAccordion | null>(null);
+  const stepsForm = useRef<Record<RuleStep, FormHook<FormData> | null>>({
+    [RuleStep.defineRule]: null,
+    [RuleStep.aboutRule]: null,
+    [RuleStep.scheduleRule]: null,
+    [RuleStep.ruleActions]: null,
+  });
+  const stepsData = useRef<Record<RuleStep, RuleStepData>>({
+    [RuleStep.defineRule]: { isValid: false, data: {} },
+    [RuleStep.aboutRule]: { isValid: false, data: {} },
+    [RuleStep.scheduleRule]: { isValid: false, data: {} },
+    [RuleStep.ruleActions]: { isValid: false, data: {} },
+  });
+  const [isStepRuleInReadOnlyView, setIsStepRuleInEditView] = useState<Record<RuleStep, boolean>>({
+    [RuleStep.defineRule]: false,
+    [RuleStep.aboutRule]: false,
+    [RuleStep.scheduleRule]: false,
+    [RuleStep.ruleActions]: false,
+  });
+  const [{ isLoading, isSaved }, setRule] = usePersistRule();
+  const actionMessageParams = useMemo(
+    () =>
+      getActionMessageParams((stepsData.current['define-rule'].data as DefineStepRule).ruleType),
+    [stepsData.current['define-rule'].data]
+  );
+
+  const setStepData = useCallback(
+    (step: RuleStep, data: unknown, isValid: boolean) => {
+      stepsData.current[step] = { ...stepsData.current[step], data, isValid };
+      if (isValid) {
+        const stepRuleIdx = stepsRuleOrder.findIndex(item => step === item);
+        if ([0, 1, 2].includes(stepRuleIdx)) {
+          if (isStepRuleInReadOnlyView[stepsRuleOrder[stepRuleIdx + 1]]) {
+            setOpenAccordionId(stepsRuleOrder[stepRuleIdx + 1]);
+            setIsStepRuleInEditView({
+              ...isStepRuleInReadOnlyView,
+              [step]: true,
+              [stepsRuleOrder[stepRuleIdx + 1]]: false,
+            });
+          } else if (openAccordionId !== stepsRuleOrder[stepRuleIdx + 1]) {
+            setIsStepRuleInEditView({
+              ...isStepRuleInReadOnlyView,
+              [step]: true,
+            });
+            openCloseAccordion(stepsRuleOrder[stepRuleIdx + 1]);
+            setOpenAccordionId(stepsRuleOrder[stepRuleIdx + 1]);
+          }
+        } else if (
+          stepRuleIdx === 3 &&
+          stepsData.current[RuleStep.defineRule].isValid &&
+          stepsData.current[RuleStep.aboutRule].isValid &&
+          stepsData.current[RuleStep.scheduleRule].isValid
+        ) {
+          setRule(
+            formatRule(
+              stepsData.current[RuleStep.defineRule].data as DefineStepRule,
+              stepsData.current[RuleStep.aboutRule].data as AboutStepRule,
+              stepsData.current[RuleStep.scheduleRule].data as ScheduleStepRule,
+              stepsData.current[RuleStep.ruleActions].data as ActionsStepRule
+            )
+          );
+        }
+      }
+    },
+    [isStepRuleInReadOnlyView, openAccordionId, stepsData.current, setRule]
+  );
+
+  const setStepsForm = useCallback((step: RuleStep, form: FormHook<FormData>) => {
+    stepsForm.current[step] = form;
+  }, []);
+
+  const getAccordionType = useCallback(
+    (accordionId: RuleStep) => {
+      if (accordionId === openAccordionId) {
+        return 'active';
+      } else if (stepsData.current[accordionId].isValid) {
+        return 'valid';
+      }
+      return 'passive';
+    },
+    [openAccordionId, stepsData.current]
+  );
+
+  const defineRuleButton = (
+    <AccordionTitle
+      name="1"
+      title={RuleI18n.DEFINE_RULE}
+      type={getAccordionType(RuleStep.defineRule)}
+    />
+  );
+
+  const aboutRuleButton = (
+    <AccordionTitle
+      name="2"
+      title={RuleI18n.ABOUT_RULE}
+      type={getAccordionType(RuleStep.aboutRule)}
+    />
+  );
+
+  const scheduleRuleButton = (
+    <AccordionTitle
+      name="3"
+      title={RuleI18n.SCHEDULE_RULE}
+      type={getAccordionType(RuleStep.scheduleRule)}
+    />
+  );
+
+  const ruleActionsButton = (
+    <AccordionTitle
+      name="4"
+      title={RuleI18n.RULE_ACTIONS}
+      type={getAccordionType(RuleStep.ruleActions)}
+    />
+  );
+
+  const openCloseAccordion = (accordionId: RuleStep | null) => {
+    if (accordionId != null) {
+      if (accordionId === RuleStep.defineRule && defineRuleRef.current != null) {
+        defineRuleRef.current.onToggle();
+      } else if (accordionId === RuleStep.aboutRule && aboutRuleRef.current != null) {
+        aboutRuleRef.current.onToggle();
+      } else if (accordionId === RuleStep.scheduleRule && scheduleRuleRef.current != null) {
+        scheduleRuleRef.current.onToggle();
+      } else if (accordionId === RuleStep.ruleActions && ruleActionsRef.current != null) {
+        ruleActionsRef.current.onToggle();
+      }
+    }
+  };
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const manageAccordions = useCallback(
+    (id: RuleStep, isOpen: boolean) => {
+      const activeRuleIdx = stepsRuleOrder.findIndex(step => step === openAccordionId);
+      const stepRuleIdx = stepsRuleOrder.findIndex(step => step === id);
+
+      if ((id === openAccordionId || stepRuleIdx < activeRuleIdx) && !isOpen) {
+        openCloseAccordion(id);
+      } else if (stepRuleIdx >= activeRuleIdx) {
+        if (
+          openAccordionId !== id &&
+          !stepsData.current[openAccordionId].isValid &&
+          !isStepRuleInReadOnlyView[id] &&
+          isOpen
+        ) {
+          openCloseAccordion(id);
+        }
+      }
+    },
+    [isStepRuleInReadOnlyView, openAccordionId, stepsData]
+  );
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const manageIsEditable = useCallback(
+    async (id: RuleStep) => {
+      const activeForm = await stepsForm.current[openAccordionId]?.submit();
+      if (activeForm != null && activeForm?.isValid) {
+        stepsData.current[openAccordionId] = {
+          ...stepsData.current[openAccordionId],
+          data: activeForm.data,
+          isValid: activeForm.isValid,
+        };
+        setOpenAccordionId(id);
+        setIsStepRuleInEditView({
+          ...isStepRuleInReadOnlyView,
+          [openAccordionId]: true,
+          [id]: false,
+        });
+      }
+    },
+    [isStepRuleInReadOnlyView, openAccordionId]
+  );
+
+  if (isSaved) {
+    const ruleName = (stepsData.current[RuleStep.aboutRule].data as AboutStepRule).name;
+    displaySuccessToast(i18n.SUCCESSFULLY_CREATED_RULES(ruleName), dispatchToaster);
+    return <Redirect to={`/${DETECTION_ENGINE_PAGE_NAME}/rules`} />;
+  }
+
+  if (redirectToDetections(isSignalIndexExists, isAuthenticated, hasEncryptionKey)) {
+    return <Redirect to={`/${DETECTION_ENGINE_PAGE_NAME}`} />;
+  } else if (userHasNoPermissions(canUserCRUD)) {
+    return <Redirect to={`/${DETECTION_ENGINE_PAGE_NAME}/rules`} />;
+  }
+
+  return (
+    <>
+      <WrapperPage restrictWidth>
+        <DetectionEngineHeaderPage
+          backOptions={{ href: '#detections/rules', text: i18n.BACK_TO_RULES }}
+          border
+          isLoading={isLoading || loading}
+          title={i18n.PAGE_TITLE}
+        />
+        <MyEuiPanel zindex={4}>
+          <StepDefineRuleAccordion
+            initialIsOpen={true}
+            id={RuleStep.defineRule}
+            buttonContent={defineRuleButton}
+            paddingSize="xs"
+            ref={defineRuleRef}
+            onToggle={manageAccordions.bind(null, RuleStep.defineRule)}
+            extraAction={
+              stepsData.current[RuleStep.defineRule].isValid && (
+                <EuiButtonEmpty
+                  iconType="pencil"
+                  size="xs"
+                  onClick={manageIsEditable.bind(null, RuleStep.defineRule)}
+                >
+                  {i18n.EDIT_RULE}
+                </EuiButtonEmpty>
+              )
+            }
+          >
+            <EuiHorizontalRule margin="m" />
+            <StepDefineRule
+              addPadding={true}
+              defaultValues={
+                (stepsData.current[RuleStep.defineRule].data as DefineStepRule) ?? null
+              }
+              isReadOnlyView={isStepRuleInReadOnlyView[RuleStep.defineRule]}
+              isLoading={isLoading || loading}
+              setForm={setStepsForm}
+              setStepData={setStepData}
+              descriptionColumns="singleSplit"
+            />
+          </StepDefineRuleAccordion>
+        </MyEuiPanel>
+        <EuiSpacer size="l" />
+        <MyEuiPanel zindex={3}>
+          <EuiAccordion
+            initialIsOpen={false}
+            id={RuleStep.aboutRule}
+            buttonContent={aboutRuleButton}
+            paddingSize="xs"
+            ref={aboutRuleRef}
+            onToggle={manageAccordions.bind(null, RuleStep.aboutRule)}
+            extraAction={
+              stepsData.current[RuleStep.aboutRule].isValid && (
+                <EuiButtonEmpty
+                  iconType="pencil"
+                  size="xs"
+                  onClick={manageIsEditable.bind(null, RuleStep.aboutRule)}
+                >
+                  {i18n.EDIT_RULE}
+                </EuiButtonEmpty>
+              )
+            }
+          >
+            <EuiHorizontalRule margin="m" />
+            <StepAboutRule
+              addPadding={true}
+              defaultValues={(stepsData.current[RuleStep.aboutRule].data as AboutStepRule) ?? null}
+              descriptionColumns="singleSplit"
+              isReadOnlyView={isStepRuleInReadOnlyView[RuleStep.aboutRule]}
+              isLoading={isLoading || loading}
+              setForm={setStepsForm}
+              setStepData={setStepData}
+            />
+          </EuiAccordion>
+        </MyEuiPanel>
+        <EuiSpacer size="l" />
+        <MyEuiPanel zindex={2}>
+          <EuiAccordion
+            initialIsOpen={false}
+            id={RuleStep.scheduleRule}
+            buttonContent={scheduleRuleButton}
+            paddingSize="xs"
+            ref={scheduleRuleRef}
+            onToggle={manageAccordions.bind(null, RuleStep.scheduleRule)}
+            extraAction={
+              stepsData.current[RuleStep.scheduleRule].isValid && (
+                <EuiButtonEmpty
+                  iconType="pencil"
+                  size="xs"
+                  onClick={manageIsEditable.bind(null, RuleStep.scheduleRule)}
+                >
+                  {i18n.EDIT_RULE}
+                </EuiButtonEmpty>
+              )
+            }
+          >
+            <EuiHorizontalRule margin="m" />
+            <StepScheduleRule
+              addPadding={true}
+              defaultValues={
+                (stepsData.current[RuleStep.scheduleRule].data as ScheduleStepRule) ?? null
+              }
+              descriptionColumns="singleSplit"
+              isReadOnlyView={isStepRuleInReadOnlyView[RuleStep.scheduleRule]}
+              isLoading={isLoading || loading}
+              setForm={setStepsForm}
+              setStepData={setStepData}
+            />
+          </EuiAccordion>
+        </MyEuiPanel>
+        <EuiSpacer size="l" />
+        <MyEuiPanel zindex={1}>
+          <EuiAccordion
+            initialIsOpen={false}
+            id={RuleStep.ruleActions}
+            buttonContent={ruleActionsButton}
+            paddingSize="xs"
+            ref={ruleActionsRef}
+            onToggle={manageAccordions.bind(null, RuleStep.ruleActions)}
+            extraAction={
+              stepsData.current[RuleStep.ruleActions].isValid && (
+                <EuiButtonEmpty
+                  iconType="pencil"
+                  size="xs"
+                  onClick={manageIsEditable.bind(null, RuleStep.ruleActions)}
+                >
+                  {i18n.EDIT_RULE}
+                </EuiButtonEmpty>
+              )
+            }
+          >
+            <EuiHorizontalRule margin="m" />
+            <StepRuleActions
+              addPadding={true}
+              isReadOnlyView={isStepRuleInReadOnlyView[RuleStep.ruleActions]}
+              isLoading={isLoading || loading}
+              setForm={setStepsForm}
+              setStepData={setStepData}
+              actionMessageParams={actionMessageParams}
+            />
+          </EuiAccordion>
+        </MyEuiPanel>
+      </WrapperPage>
+
+      <SpyRoute />
+    </>
+  );
+};
+
+export const CreateRulePage = React.memo(CreateRulePageComponent);
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/create/translations.ts b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/create/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/create/translations.ts
rename to x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/create/translations.ts
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/details/failure_history.test.tsx b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/details/failure_history.test.tsx
similarity index 76%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/details/failure_history.test.tsx
rename to x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/details/failure_history.test.tsx
index a83ff4c54b0761..fc16bcd96f7665 100644
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/details/failure_history.test.tsx
+++ b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/details/failure_history.test.tsx
@@ -7,10 +7,10 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { TestProviders } from '../../../../mock';
+import { TestProviders } from '../../../../../common/mock';
 import { FailureHistory } from './failure_history';
-import { useRuleStatus } from '../../../../containers/detection_engine/rules';
-jest.mock('../../../../containers/detection_engine/rules');
+import { useRuleStatus } from '../../../../../alerts/containers/detection_engine/rules';
+jest.mock('../../../../../alerts/containers/detection_engine/rules');
 
 describe('FailureHistory', () => {
   beforeAll(() => {
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/details/failure_history.tsx b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/details/failure_history.tsx
similarity index 87%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/details/failure_history.tsx
rename to x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/details/failure_history.tsx
index f660c1763d5e01..f03f320c514184 100644
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/details/failure_history.tsx
+++ b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/details/failure_history.tsx
@@ -15,10 +15,13 @@ import {
 } from '@elastic/eui';
 import React, { memo } from 'react';
 
-import { useRuleStatus, RuleInfoStatus } from '../../../../containers/detection_engine/rules';
-import { HeaderSection } from '../../../../components/header_section';
+import {
+  useRuleStatus,
+  RuleInfoStatus,
+} from '../../../../../alerts/containers/detection_engine/rules';
+import { HeaderSection } from '../../../../../common/components/header_section';
 import * as i18n from './translations';
-import { FormattedDate } from '../../../../components/formatted_date';
+import { FormattedDate } from '../../../../../common/components/formatted_date';
 
 interface FailureHistoryProps {
   id?: string | null;
diff --git a/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/details/index.test.tsx b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/details/index.test.tsx
new file mode 100644
index 00000000000000..d755f972f29501
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/details/index.test.tsx
@@ -0,0 +1,47 @@
+/*
+ * 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 '../../../../../common/mock/match_media';
+import { TestProviders } from '../../../../../common/mock';
+import { RuleDetailsPageComponent } from './index';
+import { setAbsoluteRangeDatePicker } from '../../../../../common/store/inputs/actions';
+import { useUserInfo } from '../../../../components/user_info';
+import { useParams } from 'react-router-dom';
+
+jest.mock('../../../../components/user_info');
+jest.mock('react-router-dom', () => {
+  const originalModule = jest.requireActual('react-router-dom');
+
+  return {
+    ...originalModule,
+    useParams: jest.fn(),
+  };
+});
+
+describe('RuleDetailsPageComponent', () => {
+  beforeAll(() => {
+    (useUserInfo as jest.Mock).mockReturnValue({});
+    (useParams as jest.Mock).mockReturnValue({});
+  });
+
+  it('renders correctly', () => {
+    const wrapper = shallow(
+      <RuleDetailsPageComponent
+        query={{ query: '', language: 'language' }}
+        filters={[]}
+        setAbsoluteRangeDatePicker={setAbsoluteRangeDatePicker}
+      />,
+      {
+        wrappingComponent: TestProviders,
+      }
+    );
+
+    expect(wrapper.find('WithSource')).toHaveLength(1);
+  });
+});
diff --git a/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/details/index.tsx b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/details/index.tsx
new file mode 100644
index 00000000000000..60491387c492d7
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/details/index.tsx
@@ -0,0 +1,429 @@
+/*
+ * 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.
+ */
+
+/* eslint-disable react-hooks/rules-of-hooks */
+
+import {
+  EuiButton,
+  EuiLoadingSpinner,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiTab,
+  EuiTabs,
+  EuiToolTip,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import React, { FC, memo, useCallback, useMemo, useState } from 'react';
+import { Redirect, useParams } from 'react-router-dom';
+import { StickyContainer } from 'react-sticky';
+import { connect, ConnectedProps } from 'react-redux';
+
+import { UpdateDateRange } from '../../../../../common/components/charts/common';
+import { FiltersGlobal } from '../../../../../common/components/filters_global';
+import { FormattedDate } from '../../../../../common/components/formatted_date';
+import {
+  getEditRuleUrl,
+  getRulesUrl,
+  DETECTION_ENGINE_PAGE_NAME,
+} from '../../../../../common/components/link_to/redirect_to_detection_engine';
+import { SiemSearchBar } from '../../../../../common/components/search_bar';
+import { WrapperPage } from '../../../../../common/components/wrapper_page';
+import { useRule } from '../../../../../alerts/containers/detection_engine/rules';
+
+import {
+  indicesExistOrDataTemporarilyUnavailable,
+  WithSource,
+} from '../../../../../common/containers/source';
+import { SpyRoute } from '../../../../../common/utils/route/spy_routes';
+
+import { StepAboutRuleToggleDetails } from '../../../../components/rules/step_about_rule_details';
+import { DetectionEngineHeaderPage } from '../../../../components/detection_engine_header_page';
+import { SignalsHistogramPanel } from '../../../../components/signals_histogram_panel';
+import { SignalsTable } from '../../../../components/signals';
+import { useUserInfo } from '../../../../components/user_info';
+import { DetectionEngineEmptyPage } from '../../detection_engine_empty_page';
+import { useSignalInfo } from '../../../../components/signals_info';
+import { StepDefineRule } from '../../../../components/rules/step_define_rule';
+import { StepScheduleRule } from '../../../../components/rules/step_schedule_rule';
+import { buildSignalsRuleIdFilter } from '../../../../components/signals/default_config';
+import { NoWriteSignalsCallOut } from '../../../../components/no_write_signals_callout';
+import * as detectionI18n from '../../translations';
+import { ReadOnlyCallOut } from '../../../../components/rules/read_only_callout';
+import { RuleSwitch } from '../../../../components/rules/rule_switch';
+import { StepPanel } from '../../../../components/rules/step_panel';
+import { getStepsData, redirectToDetections, userHasNoPermissions } from '../helpers';
+import * as ruleI18n from '../translations';
+import * as i18n from './translations';
+import { GlobalTime } from '../../../../../common/containers/global_time';
+import { signalsHistogramOptions } from '../../../../components/signals_histogram_panel/config';
+import { inputsSelectors } from '../../../../../common/store/inputs';
+import { State } from '../../../../../common/store';
+import { InputsRange } from '../../../../../common/store/inputs/model';
+import { setAbsoluteRangeDatePicker as dispatchSetAbsoluteRangeDatePicker } from '../../../../../common/store/inputs/actions';
+import { RuleActionsOverflow } from '../../../../components/rules/rule_actions_overflow';
+import { RuleStatusFailedCallOut } from './status_failed_callout';
+import { FailureHistory } from './failure_history';
+import { RuleStatus } from '../../../../components/rules//rule_status';
+import { useMlCapabilities } from '../../../../../common/components/ml_popover/hooks/use_ml_capabilities';
+import { hasMlAdminPermissions } from '../../../../../../common/machine_learning/has_ml_admin_permissions';
+
+enum RuleDetailTabs {
+  signals = 'signals',
+  failures = 'failures',
+}
+
+const ruleDetailTabs = [
+  {
+    id: RuleDetailTabs.signals,
+    name: detectionI18n.SIGNAL,
+    disabled: false,
+  },
+  {
+    id: RuleDetailTabs.failures,
+    name: i18n.FAILURE_HISTORY_TAB,
+    disabled: false,
+  },
+];
+
+export const RuleDetailsPageComponent: FC<PropsFromRedux> = ({
+  filters,
+  query,
+  setAbsoluteRangeDatePicker,
+}) => {
+  const {
+    loading,
+    isSignalIndexExists,
+    isAuthenticated,
+    hasEncryptionKey,
+    canUserCRUD,
+    hasIndexWrite,
+    signalIndexName,
+  } = useUserInfo();
+  const { detailName: ruleId } = useParams();
+  const [isLoading, rule] = useRule(ruleId);
+  // This is used to re-trigger api rule status when user de/activate rule
+  const [ruleEnabled, setRuleEnabled] = useState<boolean | null>(null);
+  const [ruleDetailTab, setRuleDetailTab] = useState(RuleDetailTabs.signals);
+  const { aboutRuleData, modifiedAboutRuleDetailsData, defineRuleData, scheduleRuleData } =
+    rule != null
+      ? getStepsData({ rule, detailsView: true })
+      : {
+          aboutRuleData: null,
+          modifiedAboutRuleDetailsData: null,
+          defineRuleData: null,
+          scheduleRuleData: null,
+        };
+  const [lastSignals] = useSignalInfo({ ruleId });
+  const mlCapabilities = useMlCapabilities();
+
+  // TODO: Refactor license check + hasMlAdminPermissions to common check
+  const hasMlPermissions =
+    mlCapabilities.isPlatinumOrTrialLicense && hasMlAdminPermissions(mlCapabilities);
+
+  const title = isLoading === true || rule === null ? <EuiLoadingSpinner size="m" /> : rule.name;
+  const subTitle = useMemo(
+    () =>
+      isLoading === true || rule === null ? (
+        <EuiLoadingSpinner size="m" />
+      ) : (
+        [
+          <FormattedMessage
+            id="xpack.siem.detectionEngine.ruleDetails.ruleCreationDescription"
+            defaultMessage="Created by: {by} on {date}"
+            values={{
+              by: rule?.created_by ?? i18n.UNKNOWN,
+              date: (
+                <FormattedDate
+                  value={rule?.created_at ?? new Date().toISOString()}
+                  fieldName="createdAt"
+                />
+              ),
+            }}
+          />,
+          rule?.updated_by != null ? (
+            <FormattedMessage
+              id="xpack.siem.detectionEngine.ruleDetails.ruleUpdateDescription"
+              defaultMessage="Updated by: {by} on {date}"
+              values={{
+                by: rule?.updated_by ?? i18n.UNKNOWN,
+                date: (
+                  <FormattedDate
+                    value={rule?.updated_at ?? new Date().toISOString()}
+                    fieldName="updatedAt"
+                  />
+                ),
+              }}
+            />
+          ) : (
+            ''
+          ),
+        ]
+      ),
+    [isLoading, rule]
+  );
+
+  const signalDefaultFilters = useMemo(
+    () => (ruleId != null ? buildSignalsRuleIdFilter(ruleId) : []),
+    [ruleId]
+  );
+
+  const signalMergedFilters = useMemo(() => [...signalDefaultFilters, ...filters], [
+    signalDefaultFilters,
+    filters,
+  ]);
+
+  const tabs = useMemo(
+    () => (
+      <EuiTabs>
+        {ruleDetailTabs.map(tab => (
+          <EuiTab
+            onClick={() => setRuleDetailTab(tab.id)}
+            isSelected={tab.id === ruleDetailTab}
+            disabled={tab.disabled}
+            key={tab.id}
+          >
+            {tab.name}
+          </EuiTab>
+        ))}
+      </EuiTabs>
+    ),
+    [ruleDetailTabs, ruleDetailTab, setRuleDetailTab]
+  );
+  const ruleError = useMemo(
+    () =>
+      rule?.status === 'failed' &&
+      ruleDetailTab === RuleDetailTabs.signals &&
+      rule?.last_failure_at != null ? (
+        <RuleStatusFailedCallOut
+          message={rule?.last_failure_message ?? ''}
+          date={rule?.last_failure_at}
+        />
+      ) : null,
+    [rule, ruleDetailTab]
+  );
+
+  const indexToAdd = useMemo(() => (signalIndexName == null ? [] : [signalIndexName]), [
+    signalIndexName,
+  ]);
+
+  const updateDateRangeCallback = useCallback<UpdateDateRange>(
+    ({ x }) => {
+      if (!x) {
+        return;
+      }
+      const [min, max] = x;
+      setAbsoluteRangeDatePicker({ id: 'global', from: min, to: max });
+    },
+    [setAbsoluteRangeDatePicker]
+  );
+
+  const handleOnChangeEnabledRule = useCallback(
+    (enabled: boolean) => {
+      if (ruleEnabled == null || enabled !== ruleEnabled) {
+        setRuleEnabled(enabled);
+      }
+    },
+    [ruleEnabled, setRuleEnabled]
+  );
+
+  if (redirectToDetections(isSignalIndexExists, isAuthenticated, hasEncryptionKey)) {
+    return <Redirect to={`/${DETECTION_ENGINE_PAGE_NAME}`} />;
+  }
+
+  return (
+    <>
+      {hasIndexWrite != null && !hasIndexWrite && <NoWriteSignalsCallOut />}
+      {userHasNoPermissions(canUserCRUD) && <ReadOnlyCallOut />}
+      <WithSource sourceId="default" indexToAdd={indexToAdd}>
+        {({ indicesExist, indexPattern }) => {
+          return indicesExistOrDataTemporarilyUnavailable(indicesExist) ? (
+            <GlobalTime>
+              {({ to, from, deleteQuery, setQuery }) => (
+                <StickyContainer>
+                  <FiltersGlobal>
+                    <SiemSearchBar id="global" indexPattern={indexPattern} />
+                  </FiltersGlobal>
+
+                  <WrapperPage>
+                    <DetectionEngineHeaderPage
+                      backOptions={{
+                        href: getRulesUrl(),
+                        text: i18n.BACK_TO_RULES,
+                      }}
+                      border
+                      subtitle={subTitle}
+                      subtitle2={[
+                        ...(lastSignals != null
+                          ? [
+                              <>
+                                {detectionI18n.LAST_SIGNAL}
+                                {': '}
+                                {lastSignals}
+                              </>,
+                            ]
+                          : []),
+                        <RuleStatus ruleId={ruleId ?? null} ruleEnabled={ruleEnabled} />,
+                      ]}
+                      title={title}
+                    >
+                      <EuiFlexGroup alignItems="center">
+                        <EuiFlexItem grow={false}>
+                          <EuiToolTip
+                            position="top"
+                            content={
+                              rule?.type === 'machine_learning' && !hasMlPermissions
+                                ? detectionI18n.ML_RULES_DISABLED_MESSAGE
+                                : undefined
+                            }
+                          >
+                            <RuleSwitch
+                              id={rule?.id ?? '-1'}
+                              isDisabled={
+                                userHasNoPermissions(canUserCRUD) ||
+                                (!hasMlPermissions && !rule?.enabled)
+                              }
+                              enabled={rule?.enabled ?? false}
+                              optionLabel={i18n.ACTIVATE_RULE}
+                              onChange={handleOnChangeEnabledRule}
+                            />
+                          </EuiToolTip>
+                        </EuiFlexItem>
+
+                        <EuiFlexItem grow={false}>
+                          <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
+                            <EuiFlexItem grow={false}>
+                              <EuiButton
+                                href={getEditRuleUrl(ruleId ?? '')}
+                                iconType="controlsHorizontal"
+                                isDisabled={userHasNoPermissions(canUserCRUD) ?? true}
+                              >
+                                {ruleI18n.EDIT_RULE_SETTINGS}
+                              </EuiButton>
+                            </EuiFlexItem>
+                            <EuiFlexItem grow={false}>
+                              <RuleActionsOverflow
+                                rule={rule}
+                                userHasNoPermissions={userHasNoPermissions(canUserCRUD)}
+                              />
+                            </EuiFlexItem>
+                          </EuiFlexGroup>
+                        </EuiFlexItem>
+                      </EuiFlexGroup>
+                    </DetectionEngineHeaderPage>
+                    {ruleError}
+                    <EuiSpacer />
+                    <EuiFlexGroup>
+                      <EuiFlexItem data-test-subj="aboutRule" component="section" grow={1}>
+                        <StepAboutRuleToggleDetails
+                          loading={isLoading}
+                          stepData={aboutRuleData}
+                          stepDataDetails={modifiedAboutRuleDetailsData}
+                        />
+                      </EuiFlexItem>
+
+                      <EuiFlexItem grow={1}>
+                        <EuiFlexGroup direction="column">
+                          <EuiFlexItem component="section" grow={1}>
+                            <StepPanel loading={isLoading} title={ruleI18n.DEFINITION}>
+                              {defineRuleData != null && (
+                                <StepDefineRule
+                                  descriptionColumns="singleSplit"
+                                  isReadOnlyView={true}
+                                  isLoading={false}
+                                  defaultValues={defineRuleData}
+                                />
+                              )}
+                            </StepPanel>
+                          </EuiFlexItem>
+                          <EuiSpacer />
+                          <EuiFlexItem data-test-subj="schedule" component="section" grow={1}>
+                            <StepPanel loading={isLoading} title={ruleI18n.SCHEDULE}>
+                              {scheduleRuleData != null && (
+                                <StepScheduleRule
+                                  descriptionColumns="singleSplit"
+                                  isReadOnlyView={true}
+                                  isLoading={false}
+                                  defaultValues={scheduleRuleData}
+                                />
+                              )}
+                            </StepPanel>
+                          </EuiFlexItem>
+                        </EuiFlexGroup>
+                      </EuiFlexItem>
+                    </EuiFlexGroup>
+                    <EuiSpacer />
+                    {tabs}
+                    <EuiSpacer />
+                    {ruleDetailTab === RuleDetailTabs.signals && (
+                      <>
+                        <SignalsHistogramPanel
+                          deleteQuery={deleteQuery}
+                          filters={signalMergedFilters}
+                          query={query}
+                          from={from}
+                          signalIndexName={signalIndexName}
+                          setQuery={setQuery}
+                          stackByOptions={signalsHistogramOptions}
+                          to={to}
+                          updateDateRange={updateDateRangeCallback}
+                        />
+                        <EuiSpacer />
+                        {ruleId != null && (
+                          <SignalsTable
+                            canUserCRUD={canUserCRUD ?? false}
+                            defaultFilters={signalDefaultFilters}
+                            hasIndexWrite={hasIndexWrite ?? false}
+                            from={from}
+                            loading={loading}
+                            signalsIndex={signalIndexName ?? ''}
+                            to={to}
+                          />
+                        )}
+                      </>
+                    )}
+                    {ruleDetailTab === RuleDetailTabs.failures && <FailureHistory id={rule?.id} />}
+                  </WrapperPage>
+                </StickyContainer>
+              )}
+            </GlobalTime>
+          ) : (
+            <WrapperPage>
+              <DetectionEngineHeaderPage border title={i18n.PAGE_TITLE} />
+
+              <DetectionEngineEmptyPage />
+            </WrapperPage>
+          );
+        }}
+      </WithSource>
+
+      <SpyRoute state={{ ruleName: rule?.name }} />
+    </>
+  );
+};
+
+const makeMapStateToProps = () => {
+  const getGlobalInputs = inputsSelectors.globalSelector();
+  return (state: State) => {
+    const globalInputs: InputsRange = getGlobalInputs(state);
+    const { query, filters } = globalInputs;
+
+    return {
+      query,
+      filters,
+    };
+  };
+};
+
+const mapDispatchToProps = {
+  setAbsoluteRangeDatePicker: dispatchSetAbsoluteRangeDatePicker,
+};
+
+const connector = connect(makeMapStateToProps, mapDispatchToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export const RuleDetailsPage = connector(memo(RuleDetailsPageComponent));
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/details/status_failed_callout.test.tsx b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/details/status_failed_callout.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/details/status_failed_callout.test.tsx
rename to x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/details/status_failed_callout.test.tsx
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/details/status_failed_callout.tsx b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/details/status_failed_callout.tsx
similarity index 93%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/details/status_failed_callout.tsx
rename to x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/details/status_failed_callout.tsx
index d1699a83becafa..5b5b96ace8670c 100644
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/details/status_failed_callout.tsx
+++ b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/details/status_failed_callout.tsx
@@ -7,7 +7,7 @@
 import { EuiCallOut, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import React, { memo } from 'react';
 
-import { FormattedDate } from '../../../../components/formatted_date';
+import { FormattedDate } from '../../../../../common/components/formatted_date';
 import * as i18n from './translations';
 
 interface RuleStatusFailedCallOutComponentProps {
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/details/translations.ts b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/details/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/details/translations.ts
rename to x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/details/translations.ts
diff --git a/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/edit/index.test.tsx b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/edit/index.test.tsx
new file mode 100644
index 00000000000000..91bc2ce7bce253
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/edit/index.test.tsx
@@ -0,0 +1,33 @@
+/*
+ * 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 { TestProviders } from '../../../../../common/mock';
+import { EditRulePage } from './index';
+import { useUserInfo } from '../../../../components/user_info';
+import { useParams } from 'react-router-dom';
+
+jest.mock('../../../../components/user_info');
+jest.mock('react-router-dom', () => {
+  const originalModule = jest.requireActual('react-router-dom');
+
+  return {
+    ...originalModule,
+    useParams: jest.fn(),
+  };
+});
+
+describe('EditRulePage', () => {
+  it('renders correctly', () => {
+    (useUserInfo as jest.Mock).mockReturnValue({});
+    (useParams as jest.Mock).mockReturnValue({});
+    const wrapper = shallow(<EditRulePage />, { wrappingComponent: TestProviders });
+
+    expect(wrapper.find('[title="Edit rule settings"]')).toHaveLength(1);
+  });
+});
diff --git a/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/edit/index.tsx b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/edit/index.tsx
new file mode 100644
index 00000000000000..041f932c412cf4
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/edit/index.tsx
@@ -0,0 +1,431 @@
+/*
+ * 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.
+ */
+
+/* eslint-disable react-hooks/rules-of-hooks */
+
+import {
+  EuiButton,
+  EuiCallOut,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiTabbedContent,
+  EuiTabbedContentTab,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import React, { FC, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Redirect, useParams } from 'react-router-dom';
+
+import { useRule, usePersistRule } from '../../../../../alerts/containers/detection_engine/rules';
+import { WrapperPage } from '../../../../../common/components/wrapper_page';
+import { DETECTION_ENGINE_PAGE_NAME } from '../../../../../common/components/link_to/redirect_to_detection_engine';
+import { displaySuccessToast, useStateToaster } from '../../../../../common/components/toasters';
+import { SpyRoute } from '../../../../../common/utils/route/spy_routes';
+import { useUserInfo } from '../../../../components/user_info';
+import { DetectionEngineHeaderPage } from '../../../../components/detection_engine_header_page';
+import { FormHook, FormData } from '../../../../../shared_imports';
+import { StepPanel } from '../../../../components/rules/step_panel';
+import { StepAboutRule } from '../../../../components/rules/step_about_rule';
+import { StepDefineRule } from '../../../../components/rules/step_define_rule';
+import { StepScheduleRule } from '../../../../components/rules/step_schedule_rule';
+import { StepRuleActions } from '../../../../components/rules/step_rule_actions';
+import { formatRule } from '../create/helpers';
+import {
+  getStepsData,
+  redirectToDetections,
+  getActionMessageParams,
+  userHasNoPermissions,
+} from '../helpers';
+import * as ruleI18n from '../translations';
+import {
+  RuleStep,
+  DefineStepRule,
+  AboutStepRule,
+  ScheduleStepRule,
+  ActionsStepRule,
+} from '../types';
+import * as i18n from './translations';
+
+interface StepRuleForm {
+  isValid: boolean;
+}
+interface AboutStepRuleForm extends StepRuleForm {
+  data: AboutStepRule | null;
+}
+interface DefineStepRuleForm extends StepRuleForm {
+  data: DefineStepRule | null;
+}
+interface ScheduleStepRuleForm extends StepRuleForm {
+  data: ScheduleStepRule | null;
+}
+
+interface ActionsStepRuleForm extends StepRuleForm {
+  data: ActionsStepRule | null;
+}
+
+const EditRulePageComponent: FC = () => {
+  const [, dispatchToaster] = useStateToaster();
+  const {
+    loading: initLoading,
+    isSignalIndexExists,
+    isAuthenticated,
+    hasEncryptionKey,
+    canUserCRUD,
+  } = useUserInfo();
+  const { detailName: ruleId } = useParams();
+  const [loading, rule] = useRule(ruleId);
+
+  const [initForm, setInitForm] = useState(false);
+  const [myAboutRuleForm, setMyAboutRuleForm] = useState<AboutStepRuleForm>({
+    data: null,
+    isValid: false,
+  });
+  const [myDefineRuleForm, setMyDefineRuleForm] = useState<DefineStepRuleForm>({
+    data: null,
+    isValid: false,
+  });
+  const [myScheduleRuleForm, setMyScheduleRuleForm] = useState<ScheduleStepRuleForm>({
+    data: null,
+    isValid: false,
+  });
+  const [myActionsRuleForm, setMyActionsRuleForm] = useState<ActionsStepRuleForm>({
+    data: null,
+    isValid: false,
+  });
+  const [selectedTab, setSelectedTab] = useState<EuiTabbedContentTab>();
+  const stepsForm = useRef<Record<RuleStep, FormHook<FormData> | null>>({
+    [RuleStep.defineRule]: null,
+    [RuleStep.aboutRule]: null,
+    [RuleStep.scheduleRule]: null,
+    [RuleStep.ruleActions]: null,
+  });
+  const [{ isLoading, isSaved }, setRule] = usePersistRule();
+  const [tabHasError, setTabHasError] = useState<RuleStep[]>([]);
+  const actionMessageParams = useMemo(() => getActionMessageParams(rule?.type), [rule]);
+  const setStepsForm = useCallback(
+    (step: RuleStep, form: FormHook<FormData>) => {
+      stepsForm.current[step] = form;
+      if (initForm && step === (selectedTab?.id as RuleStep) && form.isSubmitted === false) {
+        setInitForm(false);
+        form.submit();
+      }
+    },
+    [initForm, selectedTab]
+  );
+  const tabs = useMemo(
+    () => [
+      {
+        id: RuleStep.defineRule,
+        name: ruleI18n.DEFINITION,
+        disabled: rule?.immutable,
+        content: (
+          <>
+            <EuiSpacer />
+            <StepPanel loading={loading || initLoading} title={ruleI18n.DEFINITION}>
+              {myDefineRuleForm.data != null && (
+                <StepDefineRule
+                  isReadOnlyView={false}
+                  isLoading={isLoading}
+                  isUpdateView
+                  defaultValues={myDefineRuleForm.data}
+                  setForm={setStepsForm}
+                />
+              )}
+              <EuiSpacer />
+            </StepPanel>
+          </>
+        ),
+      },
+      {
+        id: RuleStep.aboutRule,
+        name: ruleI18n.ABOUT,
+        disabled: rule?.immutable,
+        content: (
+          <>
+            <EuiSpacer />
+            <StepPanel loading={loading || initLoading} title={ruleI18n.ABOUT}>
+              {myAboutRuleForm.data != null && (
+                <StepAboutRule
+                  isReadOnlyView={false}
+                  isLoading={isLoading}
+                  isUpdateView
+                  defaultValues={myAboutRuleForm.data}
+                  setForm={setStepsForm}
+                />
+              )}
+              <EuiSpacer />
+            </StepPanel>
+          </>
+        ),
+      },
+      {
+        id: RuleStep.scheduleRule,
+        name: ruleI18n.SCHEDULE,
+        disabled: rule?.immutable,
+        content: (
+          <>
+            <EuiSpacer />
+            <StepPanel loading={loading || initLoading} title={ruleI18n.SCHEDULE}>
+              {myScheduleRuleForm.data != null && (
+                <StepScheduleRule
+                  isReadOnlyView={false}
+                  isLoading={isLoading}
+                  isUpdateView
+                  defaultValues={myScheduleRuleForm.data}
+                  setForm={setStepsForm}
+                />
+              )}
+              <EuiSpacer />
+            </StepPanel>
+          </>
+        ),
+      },
+      {
+        id: RuleStep.ruleActions,
+        name: ruleI18n.ACTIONS,
+        content: (
+          <>
+            <EuiSpacer />
+            <StepPanel loading={loading || initLoading} title={ruleI18n.ACTIONS}>
+              {myActionsRuleForm.data != null && (
+                <StepRuleActions
+                  isReadOnlyView={false}
+                  isLoading={isLoading}
+                  isUpdateView
+                  defaultValues={myActionsRuleForm.data}
+                  setForm={setStepsForm}
+                  actionMessageParams={actionMessageParams}
+                />
+              )}
+              <EuiSpacer />
+            </StepPanel>
+          </>
+        ),
+      },
+    ],
+    [
+      rule,
+      loading,
+      initLoading,
+      isLoading,
+      myAboutRuleForm,
+      myDefineRuleForm,
+      myScheduleRuleForm,
+      myActionsRuleForm,
+      setStepsForm,
+      stepsForm,
+      actionMessageParams,
+    ]
+  );
+
+  const onSubmit = useCallback(async () => {
+    const activeFormId = selectedTab?.id as RuleStep;
+    const activeForm = await stepsForm.current[activeFormId]?.submit();
+
+    const invalidForms = [
+      RuleStep.aboutRule,
+      RuleStep.defineRule,
+      RuleStep.scheduleRule,
+      RuleStep.ruleActions,
+    ].reduce<RuleStep[]>((acc, step) => {
+      if (
+        (step === activeFormId && activeForm != null && !activeForm?.isValid) ||
+        (step === RuleStep.aboutRule && !myAboutRuleForm.isValid) ||
+        (step === RuleStep.defineRule && !myDefineRuleForm.isValid) ||
+        (step === RuleStep.scheduleRule && !myScheduleRuleForm.isValid) ||
+        (step === RuleStep.ruleActions && !myActionsRuleForm.isValid)
+      ) {
+        return [...acc, step];
+      }
+      return acc;
+    }, []);
+
+    if (invalidForms.length === 0 && activeForm != null) {
+      setTabHasError([]);
+      setRule({
+        ...formatRule(
+          (activeFormId === RuleStep.defineRule
+            ? activeForm.data
+            : myDefineRuleForm.data) as DefineStepRule,
+          (activeFormId === RuleStep.aboutRule
+            ? activeForm.data
+            : myAboutRuleForm.data) as AboutStepRule,
+          (activeFormId === RuleStep.scheduleRule
+            ? activeForm.data
+            : myScheduleRuleForm.data) as ScheduleStepRule,
+          (activeFormId === RuleStep.ruleActions
+            ? activeForm.data
+            : myActionsRuleForm.data) as ActionsStepRule
+        ),
+        ...(ruleId ? { id: ruleId } : {}),
+      });
+    } else {
+      setTabHasError(invalidForms);
+    }
+  }, [
+    stepsForm,
+    myAboutRuleForm,
+    myDefineRuleForm,
+    myScheduleRuleForm,
+    myActionsRuleForm,
+    selectedTab,
+    ruleId,
+  ]);
+
+  useEffect(() => {
+    if (rule != null) {
+      const { aboutRuleData, defineRuleData, scheduleRuleData, ruleActionsData } = getStepsData({
+        rule,
+      });
+      setMyAboutRuleForm({ data: aboutRuleData, isValid: true });
+      setMyDefineRuleForm({ data: defineRuleData, isValid: true });
+      setMyScheduleRuleForm({ data: scheduleRuleData, isValid: true });
+      setMyActionsRuleForm({ data: ruleActionsData, isValid: true });
+    }
+  }, [rule]);
+
+  const onTabClick = useCallback(
+    async (tab: EuiTabbedContentTab) => {
+      if (selectedTab != null) {
+        const ruleStep = selectedTab.id as RuleStep;
+        const respForm = await stepsForm.current[ruleStep]?.submit();
+
+        if (respForm != null) {
+          if (ruleStep === RuleStep.aboutRule) {
+            setMyAboutRuleForm({
+              data: respForm.data as AboutStepRule,
+              isValid: respForm.isValid,
+            });
+          } else if (ruleStep === RuleStep.defineRule) {
+            setMyDefineRuleForm({
+              data: respForm.data as DefineStepRule,
+              isValid: respForm.isValid,
+            });
+          } else if (ruleStep === RuleStep.scheduleRule) {
+            setMyScheduleRuleForm({
+              data: respForm.data as ScheduleStepRule,
+              isValid: respForm.isValid,
+            });
+          } else if (ruleStep === RuleStep.ruleActions) {
+            setMyActionsRuleForm({
+              data: respForm.data as ActionsStepRule,
+              isValid: respForm.isValid,
+            });
+          }
+        }
+      }
+      setInitForm(true);
+      setSelectedTab(tab);
+    },
+    [selectedTab, stepsForm.current]
+  );
+
+  useEffect(() => {
+    if (rule != null) {
+      const { aboutRuleData, defineRuleData, scheduleRuleData, ruleActionsData } = getStepsData({
+        rule,
+      });
+      setMyAboutRuleForm({ data: aboutRuleData, isValid: true });
+      setMyDefineRuleForm({ data: defineRuleData, isValid: true });
+      setMyScheduleRuleForm({ data: scheduleRuleData, isValid: true });
+      setMyActionsRuleForm({ data: ruleActionsData, isValid: true });
+    }
+  }, [rule]);
+
+  useEffect(() => {
+    const tabIndex = rule?.immutable ? 3 : 0;
+    setSelectedTab(tabs[tabIndex]);
+  }, [rule]);
+
+  if (isSaved) {
+    displaySuccessToast(i18n.SUCCESSFULLY_SAVED_RULE(rule?.name ?? ''), dispatchToaster);
+    return <Redirect to={`/${DETECTION_ENGINE_PAGE_NAME}/rules/id/${ruleId}`} />;
+  }
+
+  if (redirectToDetections(isSignalIndexExists, isAuthenticated, hasEncryptionKey)) {
+    return <Redirect to={`/${DETECTION_ENGINE_PAGE_NAME}`} />;
+  } else if (userHasNoPermissions(canUserCRUD)) {
+    return <Redirect to={`/${DETECTION_ENGINE_PAGE_NAME}/rules/id/${ruleId}`} />;
+  }
+
+  return (
+    <>
+      <WrapperPage restrictWidth>
+        <DetectionEngineHeaderPage
+          backOptions={{
+            href: `#/${DETECTION_ENGINE_PAGE_NAME}/rules/id/${ruleId}`,
+            text: `${i18n.BACK_TO} ${rule?.name ?? ''}`,
+          }}
+          isLoading={isLoading}
+          title={i18n.PAGE_TITLE}
+        />
+        {tabHasError.length > 0 && (
+          <EuiCallOut title={i18n.SORRY_ERRORS} color="danger" iconType="alert">
+            <FormattedMessage
+              id="xpack.siem.detectionEngine.rule.editRule.errorMsgDescription"
+              defaultMessage="You have an invalid input in {countError, plural, one {this tab} other {these tabs}}: {tabHasError}"
+              values={{
+                countError: tabHasError.length,
+                tabHasError: tabHasError
+                  .map(t => {
+                    if (t === RuleStep.aboutRule) {
+                      return ruleI18n.ABOUT;
+                    } else if (t === RuleStep.defineRule) {
+                      return ruleI18n.DEFINITION;
+                    } else if (t === RuleStep.scheduleRule) {
+                      return ruleI18n.SCHEDULE;
+                    } else if (t === RuleStep.ruleActions) {
+                      return ruleI18n.RULE_ACTIONS;
+                    }
+                    return t;
+                  })
+                  .join(', '),
+              }}
+            />
+          </EuiCallOut>
+        )}
+
+        <EuiTabbedContent
+          initialSelectedTab={tabs[0]}
+          selectedTab={tabs.find(t => t.id === selectedTab?.id)}
+          onTabClick={onTabClick}
+          tabs={tabs}
+        />
+
+        <EuiSpacer />
+
+        <EuiFlexGroup
+          alignItems="center"
+          gutterSize="s"
+          justifyContent="flexEnd"
+          responsive={false}
+        >
+          <EuiFlexItem grow={false}>
+            <EuiButton iconType="cross" href={`#/${DETECTION_ENGINE_PAGE_NAME}/rules/id/${ruleId}`}>
+              {i18n.CANCEL}
+            </EuiButton>
+          </EuiFlexItem>
+
+          <EuiFlexItem grow={false}>
+            <EuiButton
+              fill
+              onClick={onSubmit}
+              iconType="save"
+              isLoading={isLoading}
+              isDisabled={initLoading}
+            >
+              {i18n.SAVE_CHANGES}
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </WrapperPage>
+
+      <SpyRoute state={{ ruleName: rule?.name }} />
+    </>
+  );
+};
+
+export const EditRulePage = memo(EditRulePageComponent);
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/edit/translations.ts b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/edit/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/edit/translations.ts
rename to x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/edit/translations.ts
diff --git a/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/helpers.test.tsx b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/helpers.test.tsx
new file mode 100644
index 00000000000000..6c64577b083df0
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/helpers.test.tsx
@@ -0,0 +1,378 @@
+/*
+ * 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 {
+  GetStepsData,
+  getDefineStepsData,
+  getScheduleStepsData,
+  getStepsData,
+  getAboutStepsData,
+  getActionsStepsData,
+  getHumanizedDuration,
+  getModifiedAboutDetailsData,
+  determineDetailsValue,
+  userHasNoPermissions,
+} from './helpers';
+import { mockRuleWithEverything, mockRule } from './all/__mocks__/mock';
+import { esFilters } from '../../../../../../../../src/plugins/data/public';
+import { Rule } from '../../../../alerts/containers/detection_engine/rules';
+import {
+  AboutStepRule,
+  AboutStepRuleDetails,
+  DefineStepRule,
+  ScheduleStepRule,
+  ActionsStepRule,
+} from './types';
+
+describe('rule helpers', () => {
+  describe('getStepsData', () => {
+    test('returns object with about, define, schedule and actions step properties formatted', () => {
+      const {
+        defineRuleData,
+        modifiedAboutRuleDetailsData,
+        aboutRuleData,
+        scheduleRuleData,
+        ruleActionsData,
+      }: GetStepsData = getStepsData({
+        rule: mockRuleWithEverything('test-id'),
+      });
+      const defineRuleStepData = {
+        isNew: false,
+        ruleType: 'saved_query',
+        anomalyThreshold: 50,
+        index: ['auditbeat-*'],
+        machineLearningJobId: '',
+        queryBar: {
+          query: {
+            query: 'user.name: root or user.name: admin',
+            language: 'kuery',
+          },
+          filters: [
+            {
+              $state: {
+                store: esFilters.FilterStateStore.GLOBAL_STATE,
+              },
+              meta: {
+                alias: null,
+                disabled: false,
+                key: 'event.category',
+                negate: false,
+                params: {
+                  query: 'file',
+                },
+                type: 'phrase',
+              },
+              query: {
+                match_phrase: {
+                  'event.category': 'file',
+                },
+              },
+            },
+          ],
+          saved_id: 'test123',
+        },
+        timeline: {
+          id: '86aa74d0-2136-11ea-9864-ebc8cc1cb8c2',
+          title: 'Titled timeline',
+        },
+      };
+      const aboutRuleStepData = {
+        description: '24/7',
+        falsePositives: ['test'],
+        isNew: false,
+        name: 'Query with rule-id',
+        note: '# this is some markdown documentation',
+        references: ['www.test.co'],
+        riskScore: 21,
+        severity: 'low',
+        tags: ['tag1', 'tag2'],
+        threat: [
+          {
+            framework: 'mockFramework',
+            tactic: {
+              id: '1234',
+              name: 'tactic1',
+              reference: 'reference1',
+            },
+            technique: [
+              {
+                id: '456',
+                name: 'technique1',
+                reference: 'technique reference',
+              },
+            ],
+          },
+        ],
+      };
+      const scheduleRuleStepData = { from: '0s', interval: '5m', isNew: false };
+      const ruleActionsStepData = {
+        enabled: true,
+        throttle: 'no_actions',
+        isNew: false,
+        actions: [],
+      };
+      const aboutRuleDataDetailsData = {
+        note: '# this is some markdown documentation',
+        description: '24/7',
+      };
+
+      expect(defineRuleData).toEqual(defineRuleStepData);
+      expect(aboutRuleData).toEqual(aboutRuleStepData);
+      expect(scheduleRuleData).toEqual(scheduleRuleStepData);
+      expect(ruleActionsData).toEqual(ruleActionsStepData);
+      expect(modifiedAboutRuleDetailsData).toEqual(aboutRuleDataDetailsData);
+    });
+  });
+
+  describe('getAboutStepsData', () => {
+    test('returns name, description, and note as empty string if detailsView is true', () => {
+      const result: AboutStepRule = getAboutStepsData(mockRuleWithEverything('test-id'), true);
+
+      expect(result.name).toEqual('');
+      expect(result.description).toEqual('');
+      expect(result.note).toEqual('');
+    });
+
+    test('returns note as empty string if property does not exist on rule', () => {
+      const mockedRule = mockRuleWithEverything('test-id');
+      delete mockedRule.note;
+      const result: AboutStepRule = getAboutStepsData(mockedRule, false);
+
+      expect(result.note).toEqual('');
+    });
+  });
+
+  describe('determineDetailsValue', () => {
+    test('returns name, description, and note as empty string if detailsView is true', () => {
+      const result: Pick<Rule, 'name' | 'description' | 'note'> = determineDetailsValue(
+        mockRuleWithEverything('test-id'),
+        true
+      );
+      const expected = { name: '', description: '', note: '' };
+
+      expect(result).toEqual(expected);
+    });
+
+    test('returns name, description, and note values if detailsView is false', () => {
+      const mockedRule = mockRuleWithEverything('test-id');
+      const result: Pick<Rule, 'name' | 'description' | 'note'> = determineDetailsValue(
+        mockedRule,
+        false
+      );
+      const expected = {
+        name: mockedRule.name,
+        description: mockedRule.description,
+        note: mockedRule.note,
+      };
+
+      expect(result).toEqual(expected);
+    });
+
+    test('returns note as empty string if property does not exist on rule', () => {
+      const mockedRule = mockRuleWithEverything('test-id');
+      delete mockedRule.note;
+      const result: Pick<Rule, 'name' | 'description' | 'note'> = determineDetailsValue(
+        mockedRule,
+        false
+      );
+      const expected = { name: mockedRule.name, description: mockedRule.description, note: '' };
+
+      expect(result).toEqual(expected);
+    });
+  });
+
+  describe('getDefineStepsData', () => {
+    test('returns with saved_id if value exists on rule', () => {
+      const result: DefineStepRule = getDefineStepsData(mockRule('test-id'));
+      const expected = {
+        isNew: false,
+        ruleType: 'saved_query',
+        anomalyThreshold: 50,
+        machineLearningJobId: '',
+        index: ['auditbeat-*'],
+        queryBar: {
+          query: {
+            query: '',
+            language: 'kuery',
+          },
+          filters: [],
+          saved_id: "Garrett's IP",
+        },
+        timeline: {
+          id: '86aa74d0-2136-11ea-9864-ebc8cc1cb8c2',
+          title: 'Untitled timeline',
+        },
+      };
+
+      expect(result).toEqual(expected);
+    });
+
+    test('returns with saved_id of undefined if value does not exist on rule', () => {
+      const mockedRule = {
+        ...mockRule('test-id'),
+      };
+      delete mockedRule.saved_id;
+      const result: DefineStepRule = getDefineStepsData(mockedRule);
+      const expected = {
+        isNew: false,
+        ruleType: 'saved_query',
+        anomalyThreshold: 50,
+        machineLearningJobId: '',
+        index: ['auditbeat-*'],
+        queryBar: {
+          query: {
+            query: '',
+            language: 'kuery',
+          },
+          filters: [],
+          saved_id: undefined,
+        },
+        timeline: {
+          id: '86aa74d0-2136-11ea-9864-ebc8cc1cb8c2',
+          title: 'Untitled timeline',
+        },
+      };
+
+      expect(result).toEqual(expected);
+    });
+
+    test('returns timeline id and title of null if they do not exist on rule', () => {
+      const mockedRule = mockRuleWithEverything('test-id');
+      delete mockedRule.timeline_id;
+      delete mockedRule.timeline_title;
+      const result: DefineStepRule = getDefineStepsData(mockedRule);
+
+      expect(result.timeline.id).toBeNull();
+      expect(result.timeline.title).toBeNull();
+    });
+  });
+
+  describe('getHumanizedDuration', () => {
+    test('returns from as seconds if from duration is less than a minute', () => {
+      const result = getHumanizedDuration('now-62s', '1m');
+
+      expect(result).toEqual('2s');
+    });
+
+    test('returns from as minutes if from duration is less than an hour', () => {
+      const result = getHumanizedDuration('now-660s', '5m');
+
+      expect(result).toEqual('6m');
+    });
+
+    test('returns from as hours if from duration is more than 60 minutes', () => {
+      const result = getHumanizedDuration('now-7400s', '5m');
+
+      expect(result).toEqual('1h');
+    });
+
+    test('returns from as if from is not parsable as dateMath', () => {
+      const result = getHumanizedDuration('randomstring', '5m');
+
+      expect(result).toEqual('NaNh');
+    });
+
+    test('returns from as 5m if interval is not parsable as dateMath', () => {
+      const result = getHumanizedDuration('now-300s', 'randomstring');
+
+      expect(result).toEqual('5m');
+    });
+  });
+
+  describe('getScheduleStepsData', () => {
+    test('returns expected ScheduleStep rule object', () => {
+      const mockedRule = {
+        ...mockRule('test-id'),
+      };
+      const result: ScheduleStepRule = getScheduleStepsData(mockedRule);
+      const expected = {
+        isNew: false,
+        interval: mockedRule.interval,
+        from: '0s',
+      };
+
+      expect(result).toEqual(expected);
+    });
+  });
+
+  describe('getActionsStepsData', () => {
+    test('returns expected ActionsStepRule rule object', () => {
+      const mockedRule = {
+        ...mockRule('test-id'),
+        actions: [
+          {
+            id: 'id',
+            group: 'group',
+            params: {},
+            action_type_id: 'action_type_id',
+          },
+        ],
+      };
+      const result: ActionsStepRule = getActionsStepsData(mockedRule);
+      const expected = {
+        actions: [
+          {
+            id: 'id',
+            group: 'group',
+            params: {},
+            actionTypeId: 'action_type_id',
+          },
+        ],
+        enabled: mockedRule.enabled,
+        isNew: false,
+        throttle: 'no_actions',
+      };
+
+      expect(result).toEqual(expected);
+    });
+  });
+
+  describe('getModifiedAboutDetailsData', () => {
+    test('returns object with "note" and "description" being those of passed in rule', () => {
+      const result: AboutStepRuleDetails = getModifiedAboutDetailsData(
+        mockRuleWithEverything('test-id')
+      );
+      const aboutRuleDataDetailsData = {
+        note: '# this is some markdown documentation',
+        description: '24/7',
+      };
+
+      expect(result).toEqual(aboutRuleDataDetailsData);
+    });
+
+    test('returns "note" with empty string if "note" does not exist', () => {
+      const { note, ...mockRuleWithoutNote } = { ...mockRuleWithEverything('test-id') };
+      const result: AboutStepRuleDetails = getModifiedAboutDetailsData(mockRuleWithoutNote);
+
+      const aboutRuleDetailsData = { note: '', description: mockRuleWithoutNote.description };
+
+      expect(result).toEqual(aboutRuleDetailsData);
+    });
+  });
+
+  describe('userHasNoPermissions', () => {
+    test("returns false when user's CRUD operations are null", () => {
+      const result: boolean = userHasNoPermissions(null);
+      const userHasNoPermissionsExpectedResult = false;
+
+      expect(result).toEqual(userHasNoPermissionsExpectedResult);
+    });
+
+    test('returns true when user cannot CRUD', () => {
+      const result: boolean = userHasNoPermissions(false);
+      const userHasNoPermissionsExpectedResult = true;
+
+      expect(result).toEqual(userHasNoPermissionsExpectedResult);
+    });
+
+    test('returns false when user can CRUD', () => {
+      const result: boolean = userHasNoPermissions(true);
+      const userHasNoPermissionsExpectedResult = false;
+
+      expect(result).toEqual(userHasNoPermissionsExpectedResult);
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/helpers.tsx b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/helpers.tsx
new file mode 100644
index 00000000000000..8fbb8babe90c7b
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/helpers.tsx
@@ -0,0 +1,273 @@
+/*
+ * 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 dateMath from '@elastic/datemath';
+import { get } from 'lodash/fp';
+import moment from 'moment';
+import memoizeOne from 'memoize-one';
+import { useLocation } from 'react-router-dom';
+
+import { RuleAlertAction, RuleType } from '../../../../../common/detection_engine/types';
+import { isMlRule } from '../../../../../common/machine_learning/helpers';
+import { transformRuleToAlertAction } from '../../../../../common/detection_engine/transform_actions';
+import { Filter } from '../../../../../../../../src/plugins/data/public';
+import { Rule } from '../../../../alerts/containers/detection_engine/rules';
+import { FormData, FormHook, FormSchema } from '../../../../shared_imports';
+import {
+  AboutStepRule,
+  AboutStepRuleDetails,
+  DefineStepRule,
+  IMitreEnterpriseAttack,
+  ScheduleStepRule,
+  ActionsStepRule,
+} from './types';
+
+export interface GetStepsData {
+  aboutRuleData: AboutStepRule;
+  modifiedAboutRuleDetailsData: AboutStepRuleDetails;
+  defineRuleData: DefineStepRule;
+  scheduleRuleData: ScheduleStepRule;
+  ruleActionsData: ActionsStepRule;
+}
+
+export const getStepsData = ({
+  rule,
+  detailsView = false,
+}: {
+  rule: Rule;
+  detailsView?: boolean;
+}): GetStepsData => {
+  const defineRuleData: DefineStepRule = getDefineStepsData(rule);
+  const aboutRuleData: AboutStepRule = getAboutStepsData(rule, detailsView);
+  const modifiedAboutRuleDetailsData: AboutStepRuleDetails = getModifiedAboutDetailsData(rule);
+  const scheduleRuleData: ScheduleStepRule = getScheduleStepsData(rule);
+  const ruleActionsData: ActionsStepRule = getActionsStepsData(rule);
+
+  return {
+    aboutRuleData,
+    modifiedAboutRuleDetailsData,
+    defineRuleData,
+    scheduleRuleData,
+    ruleActionsData,
+  };
+};
+
+export const getActionsStepsData = (
+  rule: Omit<Rule, 'actions'> & { actions: RuleAlertAction[] }
+): ActionsStepRule => {
+  const { enabled, throttle, meta, actions = [] } = rule;
+
+  return {
+    actions: actions?.map(transformRuleToAlertAction),
+    isNew: false,
+    throttle,
+    kibanaSiemAppUrl: meta?.kibana_siem_app_url,
+    enabled,
+  };
+};
+
+export const getDefineStepsData = (rule: Rule): DefineStepRule => ({
+  isNew: false,
+  ruleType: rule.type,
+  anomalyThreshold: rule.anomaly_threshold ?? 50,
+  machineLearningJobId: rule.machine_learning_job_id ?? '',
+  index: rule.index ?? [],
+  queryBar: {
+    query: { query: rule.query ?? '', language: rule.language ?? '' },
+    filters: (rule.filters ?? []) as Filter[],
+    saved_id: rule.saved_id,
+  },
+  timeline: {
+    id: rule.timeline_id ?? null,
+    title: rule.timeline_title ?? null,
+  },
+});
+
+export const getScheduleStepsData = (rule: Rule): ScheduleStepRule => {
+  const { interval, from } = rule;
+  const fromHumanizedValue = getHumanizedDuration(from, interval);
+
+  return {
+    isNew: false,
+    interval,
+    from: fromHumanizedValue,
+  };
+};
+
+export const getHumanizedDuration = (from: string, interval: string): string => {
+  const fromValue = dateMath.parse(from) ?? moment();
+  const intervalValue = dateMath.parse(`now-${interval}`) ?? moment();
+
+  const fromDuration = moment.duration(intervalValue.diff(fromValue));
+  const fromHumanize = `${Math.floor(fromDuration.asHours())}h`;
+
+  if (fromDuration.asSeconds() < 60) {
+    return `${Math.floor(fromDuration.asSeconds())}s`;
+  } else if (fromDuration.asMinutes() < 60) {
+    return `${Math.floor(fromDuration.asMinutes())}m`;
+  }
+
+  return fromHumanize;
+};
+
+export const getAboutStepsData = (rule: Rule, detailsView: boolean): AboutStepRule => {
+  const { name, description, note } = determineDetailsValue(rule, detailsView);
+  const {
+    references,
+    severity,
+    false_positives: falsePositives,
+    risk_score: riskScore,
+    tags,
+    threat,
+  } = rule;
+
+  return {
+    isNew: false,
+    name,
+    description,
+    note: note!,
+    references,
+    severity,
+    tags,
+    riskScore,
+    falsePositives,
+    threat: threat as IMitreEnterpriseAttack[],
+  };
+};
+
+export const determineDetailsValue = (
+  rule: Rule,
+  detailsView: boolean
+): Pick<Rule, 'name' | 'description' | 'note'> => {
+  const { name, description, note } = rule;
+  if (detailsView) {
+    return { name: '', description: '', note: '' };
+  }
+
+  return { name, description, note: note ?? '' };
+};
+
+export const getModifiedAboutDetailsData = (rule: Rule): AboutStepRuleDetails => ({
+  note: rule.note ?? '',
+  description: rule.description,
+});
+
+export const useQuery = () => new URLSearchParams(useLocation().search);
+
+export type PrePackagedRuleStatus =
+  | 'ruleInstalled'
+  | 'ruleNotInstalled'
+  | 'ruleNeedUpdate'
+  | 'someRuleUninstall'
+  | 'unknown';
+
+export const getPrePackagedRuleStatus = (
+  rulesInstalled: number | null,
+  rulesNotInstalled: number | null,
+  rulesNotUpdated: number | null
+): PrePackagedRuleStatus => {
+  if (
+    rulesNotInstalled != null &&
+    rulesInstalled === 0 &&
+    rulesNotInstalled > 0 &&
+    rulesNotUpdated === 0
+  ) {
+    return 'ruleNotInstalled';
+  } else if (
+    rulesInstalled != null &&
+    rulesInstalled > 0 &&
+    rulesNotInstalled === 0 &&
+    rulesNotUpdated === 0
+  ) {
+    return 'ruleInstalled';
+  } else if (
+    rulesInstalled != null &&
+    rulesNotInstalled != null &&
+    rulesInstalled > 0 &&
+    rulesNotInstalled > 0 &&
+    rulesNotUpdated === 0
+  ) {
+    return 'someRuleUninstall';
+  } else if (
+    rulesInstalled != null &&
+    rulesNotInstalled != null &&
+    rulesNotUpdated != null &&
+    rulesInstalled > 0 &&
+    rulesNotInstalled >= 0 &&
+    rulesNotUpdated > 0
+  ) {
+    return 'ruleNeedUpdate';
+  }
+  return 'unknown';
+};
+export const setFieldValue = (
+  form: FormHook<FormData>,
+  schema: FormSchema<FormData>,
+  defaultValues: unknown
+) =>
+  Object.keys(schema).forEach(key => {
+    const val = get(key, defaultValues);
+    if (val != null) {
+      form.setFieldValue(key, val);
+    }
+  });
+
+export const redirectToDetections = (
+  isSignalIndexExists: boolean | null,
+  isAuthenticated: boolean | null,
+  hasEncryptionKey: boolean | null
+) =>
+  isSignalIndexExists != null &&
+  isAuthenticated != null &&
+  hasEncryptionKey != null &&
+  (!isSignalIndexExists || !isAuthenticated || !hasEncryptionKey);
+
+export const getActionMessageRuleParams = (ruleType: RuleType): string[] => {
+  const commonRuleParamsKeys = [
+    'id',
+    'name',
+    'description',
+    'false_positives',
+    'rule_id',
+    'max_signals',
+    'risk_score',
+    'output_index',
+    'references',
+    'severity',
+    'timeline_id',
+    'timeline_title',
+    'threat',
+    'type',
+    'version',
+    // 'lists',
+  ];
+
+  const ruleParamsKeys = [
+    ...commonRuleParamsKeys,
+    ...(isMlRule(ruleType)
+      ? ['anomaly_threshold', 'machine_learning_job_id']
+      : ['index', 'filters', 'language', 'query', 'saved_id']),
+  ].sort();
+
+  return ruleParamsKeys;
+};
+
+export const getActionMessageParams = memoizeOne((ruleType: RuleType | undefined): string[] => {
+  if (!ruleType) {
+    return [];
+  }
+  const actionMessageRuleParams = getActionMessageRuleParams(ruleType);
+
+  return [
+    'state.signals_count',
+    '{context.results_link}',
+    ...actionMessageRuleParams.map(param => `context.rule.${param}`),
+  ];
+});
+
+// typed as null not undefined as the initial state for this value is null.
+export const userHasNoPermissions = (canUserCRUD: boolean | null): boolean =>
+  canUserCRUD != null ? !canUserCRUD : false;
diff --git a/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/index.test.tsx b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/index.test.tsx
new file mode 100644
index 00000000000000..29f875d113a424
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/index.test.tsx
@@ -0,0 +1,27 @@
+/*
+ * 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 { RulesPage } from './index';
+import { useUserInfo } from '../../../components/user_info';
+import { usePrePackagedRules } from '../../../../alerts/containers/detection_engine/rules';
+
+jest.mock('../../../components/user_info');
+jest.mock('../../../../alerts/containers/detection_engine/rules');
+
+describe('RulesPage', () => {
+  beforeAll(() => {
+    (useUserInfo as jest.Mock).mockReturnValue({});
+    (usePrePackagedRules as jest.Mock).mockReturnValue({});
+  });
+  it('renders correctly', () => {
+    const wrapper = shallow(<RulesPage />);
+
+    expect(wrapper.find('AllRules')).toHaveLength(1);
+  });
+});
diff --git a/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/index.tsx b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/index.tsx
new file mode 100644
index 00000000000000..7a9620df3a7b37
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/index.tsx
@@ -0,0 +1,196 @@
+/*
+ * 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 { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import React, { useCallback, useRef, useState } from 'react';
+import { Redirect } from 'react-router-dom';
+
+import {
+  usePrePackagedRules,
+  importRules,
+} from '../../../../alerts/containers/detection_engine/rules';
+import {
+  DETECTION_ENGINE_PAGE_NAME,
+  getDetectionEngineUrl,
+  getCreateRuleUrl,
+} from '../../../../common/components/link_to/redirect_to_detection_engine';
+import { DetectionEngineHeaderPage } from '../../../components/detection_engine_header_page';
+import { WrapperPage } from '../../../../common/components/wrapper_page';
+import { SpyRoute } from '../../../../common/utils/route/spy_routes';
+
+import { useUserInfo } from '../../../components/user_info';
+import { AllRules } from './all';
+import { ImportDataModal } from '../../../../common/components/import_data_modal';
+import { ReadOnlyCallOut } from '../../../components/rules/read_only_callout';
+import { UpdatePrePackagedRulesCallOut } from '../../../components/rules/pre_packaged_rules/update_callout';
+import { getPrePackagedRuleStatus, redirectToDetections, userHasNoPermissions } from './helpers';
+import * as i18n from './translations';
+
+type Func = (refreshPrePackagedRule?: boolean) => void;
+
+const RulesPageComponent: React.FC = () => {
+  const [showImportModal, setShowImportModal] = useState(false);
+  const refreshRulesData = useRef<null | Func>(null);
+  const {
+    loading,
+    isSignalIndexExists,
+    isAuthenticated,
+    hasEncryptionKey,
+    canUserCRUD,
+    hasIndexWrite,
+  } = useUserInfo();
+  const {
+    createPrePackagedRules,
+    loading: prePackagedRuleLoading,
+    loadingCreatePrePackagedRules,
+    refetchPrePackagedRulesStatus,
+    rulesCustomInstalled,
+    rulesInstalled,
+    rulesNotInstalled,
+    rulesNotUpdated,
+  } = usePrePackagedRules({
+    canUserCRUD,
+    hasIndexWrite,
+    isSignalIndexExists,
+    isAuthenticated,
+    hasEncryptionKey,
+  });
+  const prePackagedRuleStatus = getPrePackagedRuleStatus(
+    rulesInstalled,
+    rulesNotInstalled,
+    rulesNotUpdated
+  );
+
+  const handleRefreshRules = useCallback(async () => {
+    if (refreshRulesData.current != null) {
+      refreshRulesData.current(true);
+    }
+  }, [refreshRulesData]);
+
+  const handleCreatePrePackagedRules = useCallback(async () => {
+    if (createPrePackagedRules != null) {
+      await createPrePackagedRules();
+      handleRefreshRules();
+    }
+  }, [createPrePackagedRules, handleRefreshRules]);
+
+  const handleRefetchPrePackagedRulesStatus = useCallback(() => {
+    if (refetchPrePackagedRulesStatus != null) {
+      refetchPrePackagedRulesStatus();
+    }
+  }, [refetchPrePackagedRulesStatus]);
+
+  const handleSetRefreshRulesData = useCallback((refreshRule: Func) => {
+    refreshRulesData.current = refreshRule;
+  }, []);
+
+  if (redirectToDetections(isSignalIndexExists, isAuthenticated, hasEncryptionKey)) {
+    return <Redirect to={`/${DETECTION_ENGINE_PAGE_NAME}`} />;
+  }
+
+  return (
+    <>
+      {userHasNoPermissions(canUserCRUD) && <ReadOnlyCallOut />}
+      <ImportDataModal
+        checkBoxLabel={i18n.OVERWRITE_WITH_SAME_NAME}
+        closeModal={() => setShowImportModal(false)}
+        description={i18n.SELECT_RULE}
+        errorMessage={i18n.IMPORT_FAILED}
+        failedDetailed={i18n.IMPORT_FAILED_DETAILED}
+        importComplete={handleRefreshRules}
+        importData={importRules}
+        successMessage={i18n.SUCCESSFULLY_IMPORTED_RULES}
+        showCheckBox={true}
+        showModal={showImportModal}
+        submitBtnText={i18n.IMPORT_RULE_BTN_TITLE}
+        subtitle={i18n.INITIAL_PROMPT_TEXT}
+        title={i18n.IMPORT_RULE}
+      />
+      <WrapperPage>
+        <DetectionEngineHeaderPage
+          backOptions={{
+            href: getDetectionEngineUrl(),
+            text: i18n.BACK_TO_DETECTION_ENGINE,
+          }}
+          title={i18n.PAGE_TITLE}
+        >
+          <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false} wrap={true}>
+            {prePackagedRuleStatus === 'ruleNotInstalled' && (
+              <EuiFlexItem grow={false}>
+                <EuiButton
+                  iconType="indexOpen"
+                  isLoading={loadingCreatePrePackagedRules}
+                  isDisabled={userHasNoPermissions(canUserCRUD) || loading}
+                  onClick={handleCreatePrePackagedRules}
+                >
+                  {i18n.LOAD_PREPACKAGED_RULES}
+                </EuiButton>
+              </EuiFlexItem>
+            )}
+            {prePackagedRuleStatus === 'someRuleUninstall' && (
+              <EuiFlexItem grow={false}>
+                <EuiButton
+                  data-test-subj="reloadPrebuiltRulesBtn"
+                  iconType="plusInCircle"
+                  isLoading={loadingCreatePrePackagedRules}
+                  isDisabled={userHasNoPermissions(canUserCRUD) || loading}
+                  onClick={handleCreatePrePackagedRules}
+                >
+                  {i18n.RELOAD_MISSING_PREPACKAGED_RULES(rulesNotInstalled ?? 0)}
+                </EuiButton>
+              </EuiFlexItem>
+            )}
+            <EuiFlexItem grow={false}>
+              <EuiButton
+                iconType="importAction"
+                isDisabled={userHasNoPermissions(canUserCRUD) || loading}
+                onClick={() => {
+                  setShowImportModal(true);
+                }}
+              >
+                {i18n.IMPORT_RULE}
+              </EuiButton>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButton
+                data-test-subj="create-new-rule"
+                fill
+                href={getCreateRuleUrl()}
+                iconType="plusInCircle"
+                isDisabled={userHasNoPermissions(canUserCRUD) || loading}
+              >
+                {i18n.ADD_NEW_RULE}
+              </EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </DetectionEngineHeaderPage>
+        {prePackagedRuleStatus === 'ruleNeedUpdate' && (
+          <UpdatePrePackagedRulesCallOut
+            loading={loadingCreatePrePackagedRules}
+            numberOfUpdatedRules={rulesNotUpdated ?? 0}
+            updateRules={handleCreatePrePackagedRules}
+          />
+        )}
+        <AllRules
+          createPrePackagedRules={createPrePackagedRules}
+          loading={loading || prePackagedRuleLoading}
+          loadingCreatePrePackagedRules={loadingCreatePrePackagedRules}
+          hasNoPermissions={userHasNoPermissions(canUserCRUD)}
+          refetchPrePackagedRulesStatus={handleRefetchPrePackagedRulesStatus}
+          rulesCustomInstalled={rulesCustomInstalled}
+          rulesInstalled={rulesInstalled}
+          rulesNotInstalled={rulesNotInstalled}
+          rulesNotUpdated={rulesNotUpdated}
+          setRefreshRulesData={handleSetRefreshRulesData}
+        />
+      </WrapperPage>
+
+      <SpyRoute />
+    </>
+  );
+};
+
+export const RulesPage = React.memo(RulesPageComponent);
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/translations.ts b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/translations.ts
rename to x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/translations.ts
diff --git a/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/types.ts b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/types.ts
new file mode 100644
index 00000000000000..92c9780a117221
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/types.ts
@@ -0,0 +1,141 @@
+/*
+ * 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 { RuleAlertAction, RuleType } from '../../../../../common/detection_engine/types';
+import { AlertAction } from '../../../../../../alerting/common';
+import { Filter } from '../../../../../../../../src/plugins/data/common';
+import { FormData, FormHook } from '../../../../shared_imports';
+import { FieldValueQueryBar } from '../../../components/rules/query_bar';
+import { FieldValueTimeline } from '../../../components/rules/pick_timeline';
+
+export interface EuiBasicTableSortTypes {
+  field: string;
+  direction: 'asc' | 'desc';
+}
+
+export interface EuiBasicTableOnChange {
+  page: {
+    index: number;
+    size: number;
+  };
+  sort?: EuiBasicTableSortTypes;
+}
+
+export enum RuleStep {
+  defineRule = 'define-rule',
+  aboutRule = 'about-rule',
+  scheduleRule = 'schedule-rule',
+  ruleActions = 'rule-actions',
+}
+export type RuleStatusType = 'passive' | 'active' | 'valid';
+
+export interface RuleStepData {
+  data: unknown;
+  isValid: boolean;
+}
+
+export interface RuleStepProps {
+  addPadding?: boolean;
+  descriptionColumns?: 'multi' | 'single' | 'singleSplit';
+  setStepData?: (step: RuleStep, data: unknown, isValid: boolean) => void;
+  isReadOnlyView: boolean;
+  isUpdateView?: boolean;
+  isLoading: boolean;
+  resizeParentContainer?: (height: number) => void;
+  setForm?: (step: RuleStep, form: FormHook<FormData>) => void;
+}
+
+interface StepRuleData {
+  isNew: boolean;
+}
+export interface AboutStepRule extends StepRuleData {
+  name: string;
+  description: string;
+  severity: string;
+  riskScore: number;
+  references: string[];
+  falsePositives: string[];
+  tags: string[];
+  threat: IMitreEnterpriseAttack[];
+  note: string;
+}
+
+export interface AboutStepRuleDetails {
+  note: string;
+  description: string;
+}
+
+export interface DefineStepRule extends StepRuleData {
+  anomalyThreshold: number;
+  index: string[];
+  machineLearningJobId: string;
+  queryBar: FieldValueQueryBar;
+  ruleType: RuleType;
+  timeline: FieldValueTimeline;
+}
+
+export interface ScheduleStepRule extends StepRuleData {
+  interval: string;
+  from: string;
+  to?: string;
+}
+
+export interface ActionsStepRule extends StepRuleData {
+  actions: AlertAction[];
+  enabled: boolean;
+  kibanaSiemAppUrl?: string;
+  throttle?: string | null;
+}
+
+export interface DefineStepRuleJson {
+  anomaly_threshold?: number;
+  index?: string[];
+  filters?: Filter[];
+  machine_learning_job_id?: string;
+  saved_id?: string;
+  query?: string;
+  language?: string;
+  timeline_id?: string;
+  timeline_title?: string;
+  type: RuleType;
+}
+
+export interface AboutStepRuleJson {
+  name: string;
+  description: string;
+  severity: string;
+  risk_score: number;
+  references: string[];
+  false_positives: string[];
+  tags: string[];
+  threat: IMitreEnterpriseAttack[];
+  note?: string;
+}
+
+export interface ScheduleStepRuleJson {
+  interval: string;
+  from: string;
+  to?: string;
+  meta?: unknown;
+}
+
+export interface ActionsStepRuleJson {
+  actions: RuleAlertAction[];
+  enabled: boolean;
+  throttle?: string | null;
+  meta?: unknown;
+}
+
+export interface IMitreAttack {
+  id: string;
+  name: string;
+  reference: string;
+}
+export interface IMitreEnterpriseAttack {
+  framework: string;
+  tactic: IMitreAttack;
+  technique: IMitreAttack[];
+}
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/utils.test.ts b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/utils.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/rules/utils.test.ts
rename to x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/utils.test.ts
diff --git a/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/utils.ts b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/utils.ts
new file mode 100644
index 00000000000000..159301a07de787
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/pages/detection_engine/rules/utils.ts
@@ -0,0 +1,99 @@
+/*
+ * 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 { isEmpty } from 'lodash/fp';
+
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { ChromeBreadcrumb } from '../../../../../../../../src/core/public';
+import {
+  getDetectionEngineUrl,
+  getDetectionEngineTabUrl,
+  getRulesUrl,
+  getRuleDetailsUrl,
+  getCreateRuleUrl,
+  getEditRuleUrl,
+} from '../../../../common/components/link_to/redirect_to_detection_engine';
+import * as i18nDetections from '../translations';
+import * as i18nRules from './translations';
+import { RouteSpyState } from '../../../../common/utils/route/types';
+
+const getTabBreadcrumb = (pathname: string, search: string[]) => {
+  const tabPath = pathname.split('/')[2];
+
+  if (tabPath === 'alerts') {
+    return {
+      text: i18nDetections.ALERT,
+      href: `${getDetectionEngineTabUrl(tabPath)}${!isEmpty(search[0]) ? search[0] : ''}`,
+    };
+  }
+
+  if (tabPath === 'signals') {
+    return {
+      text: i18nDetections.SIGNAL,
+      href: `${getDetectionEngineTabUrl(tabPath)}${!isEmpty(search[0]) ? search[0] : ''}`,
+    };
+  }
+
+  if (tabPath === 'rules') {
+    return {
+      text: i18nRules.PAGE_TITLE,
+      href: `${getRulesUrl()}${!isEmpty(search[0]) ? search[0] : ''}`,
+    };
+  }
+};
+
+const isRuleCreatePage = (pathname: string) =>
+  pathname.includes('/rules') && pathname.includes('/create');
+
+const isRuleEditPage = (pathname: string) =>
+  pathname.includes('/rules') && pathname.includes('/edit');
+
+export const getBreadcrumbs = (params: RouteSpyState, search: string[]): ChromeBreadcrumb[] => {
+  let breadcrumb = [
+    {
+      text: i18nDetections.PAGE_TITLE,
+      href: `${getDetectionEngineUrl()}${!isEmpty(search[0]) ? search[0] : ''}`,
+    },
+  ];
+
+  const tabBreadcrumb = getTabBreadcrumb(params.pathName, search);
+
+  if (tabBreadcrumb) {
+    breadcrumb = [...breadcrumb, tabBreadcrumb];
+  }
+
+  if (params.detailName && params.state?.ruleName) {
+    breadcrumb = [
+      ...breadcrumb,
+      {
+        text: params.state.ruleName,
+        href: `${getRuleDetailsUrl(params.detailName)}${!isEmpty(search[1]) ? search[1] : ''}`,
+      },
+    ];
+  }
+
+  if (isRuleCreatePage(params.pathName)) {
+    breadcrumb = [
+      ...breadcrumb,
+      {
+        text: i18nRules.ADD_PAGE_TITLE,
+        href: `${getCreateRuleUrl()}${!isEmpty(search[1]) ? search[1] : ''}`,
+      },
+    ];
+  }
+
+  if (isRuleEditPage(params.pathName) && params.detailName && params.state?.ruleName) {
+    breadcrumb = [
+      ...breadcrumb,
+      {
+        text: i18nRules.EDIT_PAGE_TITLE,
+        href: `${getEditRuleUrl(params.detailName)}${!isEmpty(search[1]) ? search[1] : ''}`,
+      },
+    ];
+  }
+
+  return breadcrumb;
+};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/translations.ts b/x-pack/plugins/siem/public/alerts/pages/detection_engine/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/translations.ts
rename to x-pack/plugins/siem/public/alerts/pages/detection_engine/translations.ts
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/types.ts b/x-pack/plugins/siem/public/alerts/pages/detection_engine/types.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/detection_engine/types.ts
rename to x-pack/plugins/siem/public/alerts/pages/detection_engine/types.ts
diff --git a/x-pack/plugins/siem/public/alerts/routes.tsx b/x-pack/plugins/siem/public/alerts/routes.tsx
new file mode 100644
index 00000000000000..897ba3269546fc
--- /dev/null
+++ b/x-pack/plugins/siem/public/alerts/routes.tsx
@@ -0,0 +1,20 @@
+/*
+ * 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 { Route } from 'react-router-dom';
+
+import { DetectionEngineContainer } from './pages/detection_engine';
+import { SiemPageName } from '../app/types';
+
+export const getAlertsRoutes = () => [
+  <Route
+    path={`/:pageName(${SiemPageName.detections})`}
+    render={({ location, match }) => (
+      <DetectionEngineContainer location={location} url={match.url} />
+    )}
+  />,
+];
diff --git a/x-pack/plugins/siem/public/pages/404.tsx b/x-pack/plugins/siem/public/app/404.tsx
similarity index 90%
rename from x-pack/plugins/siem/public/pages/404.tsx
rename to x-pack/plugins/siem/public/app/404.tsx
index ba1cb4f40cbed6..6a1b5c56dc853a 100644
--- a/x-pack/plugins/siem/public/pages/404.tsx
+++ b/x-pack/plugins/siem/public/app/404.tsx
@@ -7,7 +7,7 @@
 import React from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { WrapperPage } from '../components/wrapper_page';
+import { WrapperPage } from '../common/components/wrapper_page';
 
 export const NotFoundPage = React.memo(() => (
   <WrapperPage>
diff --git a/x-pack/plugins/siem/public/app/app.tsx b/x-pack/plugins/siem/public/app/app.tsx
index 6e2a4642f99a46..7aef91380b5225 100644
--- a/x-pack/plugins/siem/public/app/app.tsx
+++ b/x-pack/plugins/siem/public/app/app.tsx
@@ -17,32 +17,35 @@ import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
 import { BehaviorSubject } from 'rxjs';
 import { pluck } from 'rxjs/operators';
 
-import { KibanaContextProvider, useKibana, useUiSetting$ } from '../lib/kibana';
+import { KibanaContextProvider, useKibana, useUiSetting$ } from '../common/lib/kibana';
 import { Storage } from '../../../../../src/plugins/kibana_utils/public';
 
 import { DEFAULT_DARK_MODE } from '../../common/constants';
-import { ErrorToastDispatcher } from '../components/error_toast_dispatcher';
-import { compose } from '../lib/compose/kibana_compose';
-import { AppFrontendLibs, AppApolloClient } from '../lib/lib';
+import { ErrorToastDispatcher } from '../common/components/error_toast_dispatcher';
+import { compose } from '../common/lib/compose/kibana_compose';
+import { AppFrontendLibs, AppApolloClient } from '../common/lib/lib';
 import { StartServices } from '../plugin';
-import { PageRouter } from '../routes';
-import { createStore, createInitialState } from '../store';
-import { GlobalToaster, ManageGlobalToaster } from '../components/toasters';
-import { MlCapabilitiesProvider } from '../components/ml/permissions/ml_capabilities_provider';
+import { PageRouter } from './routes';
+import { createStore, createInitialState } from '../common/store';
+import { GlobalToaster, ManageGlobalToaster } from '../common/components/toasters';
+import { MlCapabilitiesProvider } from '../common/components/ml/permissions/ml_capabilities_provider';
 
-import { ApolloClientContext } from '../utils/apollo_context';
+import { ApolloClientContext } from '../common/utils/apollo_context';
+import { SecuritySubPlugins } from './types';
 
 interface AppPluginRootComponentProps {
   apolloClient: AppApolloClient;
   history: History;
   store: Store;
+  subPluginRoutes: React.ReactElement[];
   theme: any; // eslint-disable-line @typescript-eslint/no-explicit-any
 }
 
 const AppPluginRootComponent: React.FC<AppPluginRootComponentProps> = ({
+  apolloClient,
   theme,
   store,
-  apolloClient,
+  subPluginRoutes,
   history,
 }) => (
   <ManageGlobalToaster>
@@ -51,7 +54,7 @@ const AppPluginRootComponent: React.FC<AppPluginRootComponentProps> = ({
         <ApolloClientContext.Provider value={apolloClient}>
           <ThemeProvider theme={theme}>
             <MlCapabilitiesProvider>
-              <PageRouter history={history} />
+              <PageRouter history={history} subPluginRoutes={subPluginRoutes} />
             </MlCapabilitiesProvider>
           </ThemeProvider>
           <ErrorToastDispatcher />
@@ -64,11 +67,22 @@ const AppPluginRootComponent: React.FC<AppPluginRootComponentProps> = ({
 
 const AppPluginRoot = memo(AppPluginRootComponent);
 
-const StartAppComponent: FC<AppFrontendLibs> = libs => {
+interface StartAppComponent extends AppFrontendLibs {
+  subPlugins: SecuritySubPlugins;
+}
+
+const StartAppComponent: FC<StartAppComponent> = ({ subPlugins, ...libs }) => {
+  const { routes: subPluginRoutes, store: subPluginsStore } = subPlugins;
   const { i18n } = useKibana().services;
   const history = createHashHistory();
   const libs$ = new BehaviorSubject(libs);
-  const store = createStore(createInitialState(), libs$.pipe(pluck('apolloClient')));
+
+  const store = createStore(
+    createInitialState(subPluginsStore.initialState),
+    subPluginsStore.reducer,
+    libs$.pipe(pluck('apolloClient'))
+  );
+
   const [darkMode] = useUiSetting$<boolean>(DEFAULT_DARK_MODE);
   const theme = useMemo(
     () => ({
@@ -82,9 +96,10 @@ const StartAppComponent: FC<AppFrontendLibs> = libs => {
     <EuiErrorBoundary>
       <i18n.Context>
         <AppPluginRoot
-          store={store}
           apolloClient={libs.apolloClient}
           history={history}
+          store={store}
+          subPluginRoutes={subPluginRoutes}
           theme={theme}
         />
       </i18n.Context>
@@ -96,9 +111,10 @@ const StartApp = memo(StartAppComponent);
 
 interface SiemAppComponentProps {
   services: StartServices;
+  subPlugins: SecuritySubPlugins;
 }
 
-const SiemAppComponent: React.FC<SiemAppComponentProps> = ({ services }) => (
+const SiemAppComponent: React.FC<SiemAppComponentProps> = ({ services, subPlugins }) => (
   <KibanaContextProvider
     services={{
       appName: 'siem',
@@ -106,7 +122,7 @@ const SiemAppComponent: React.FC<SiemAppComponentProps> = ({ services }) => (
       ...services,
     }}
   >
-    <StartApp {...compose(services)} />
+    <StartApp subPlugins={subPlugins} {...compose(services)} />
   </KibanaContextProvider>
 );
 
diff --git a/x-pack/plugins/siem/public/pages/home/home_navigations.tsx b/x-pack/plugins/siem/public/app/home/home_navigations.tsx
similarity index 93%
rename from x-pack/plugins/siem/public/pages/home/home_navigations.tsx
rename to x-pack/plugins/siem/public/app/home/home_navigations.tsx
index 543469e2fddb7f..2eed64a2b26e55 100644
--- a/x-pack/plugins/siem/public/pages/home/home_navigations.tsx
+++ b/x-pack/plugins/siem/public/app/home/home_navigations.tsx
@@ -11,9 +11,9 @@ import {
   getTimelinesUrl,
   getHostsUrl,
   getCaseUrl,
-} from '../../components/link_to';
+} from '../../common/components/link_to';
 import * as i18n from './translations';
-import { SiemPageName, SiemNavTab } from './types';
+import { SiemPageName, SiemNavTab } from '../types';
 
 export const navTabs: SiemNavTab = {
   [SiemPageName.overview]: {
diff --git a/x-pack/plugins/siem/public/app/home/index.tsx b/x-pack/plugins/siem/public/app/home/index.tsx
new file mode 100644
index 00000000000000..b6116ad4f06664
--- /dev/null
+++ b/x-pack/plugins/siem/public/app/home/index.tsx
@@ -0,0 +1,121 @@
+/*
+ * 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, { useMemo } from 'react';
+import { Redirect, Route, Switch } from 'react-router-dom';
+import styled from 'styled-components';
+
+import { useThrottledResizeObserver } from '../../common/components/utils';
+import { DragDropContextWrapper } from '../../common/components/drag_and_drop/drag_drop_context_wrapper';
+import { Flyout } from '../../timelines/components/flyout';
+import { HeaderGlobal } from '../../common/components/header_global';
+import { HelpMenu } from '../../common/components/help_menu';
+import { LinkToPage } from '../../common/components/link_to';
+import { MlHostConditionalContainer } from '../../common/components/ml/conditional_links/ml_host_conditional_container';
+import { MlNetworkConditionalContainer } from '../../common/components/ml/conditional_links/ml_network_conditional_container';
+import { AutoSaveWarningMsg } from '../../timelines/components/timeline/auto_save_warning';
+import { UseUrlState } from '../../common/components/url_state';
+import {
+  WithSource,
+  indicesExistOrDataTemporarilyUnavailable,
+} from '../../common/containers/source';
+import { SpyRoute } from '../../common/utils/route/spy_routes';
+import { useShowTimeline } from '../../common/utils/timeline/use_show_timeline';
+import { NotFoundPage } from '../404';
+import { navTabs } from './home_navigations';
+import { SiemPageName } from '../types';
+
+const WrappedByAutoSizer = styled.div`
+  height: 100%;
+`;
+WrappedByAutoSizer.displayName = 'WrappedByAutoSizer';
+
+const Main = styled.main`
+  height: 100%;
+`;
+Main.displayName = 'Main';
+
+const usersViewing = ['elastic']; // TODO: get the users viewing this timeline from Elasticsearch (persistance)
+
+/** the global Kibana navigation at the top of every page */
+const globalHeaderHeightPx = 48;
+
+const calculateFlyoutHeight = ({
+  globalHeaderSize,
+  windowHeight,
+}: {
+  globalHeaderSize: number;
+  windowHeight: number;
+}): number => Math.max(0, windowHeight - globalHeaderSize);
+
+interface HomePageProps {
+  subPlugins: JSX.Element[];
+}
+
+export const HomePage: React.FC<HomePageProps> = ({ subPlugins }) => {
+  const { ref: measureRef, height: windowHeight = 0 } = useThrottledResizeObserver();
+  const flyoutHeight = useMemo(
+    () =>
+      calculateFlyoutHeight({
+        globalHeaderSize: globalHeaderHeightPx,
+        windowHeight,
+      }),
+    [windowHeight]
+  );
+
+  const [showTimeline] = useShowTimeline();
+
+  return (
+    <WrappedByAutoSizer data-test-subj="wrapped-by-auto-sizer" ref={measureRef}>
+      <HeaderGlobal />
+
+      <Main data-test-subj="pageContainer">
+        <WithSource sourceId="default">
+          {({ browserFields, indexPattern, indicesExist }) => (
+            <DragDropContextWrapper browserFields={browserFields}>
+              <UseUrlState indexPattern={indexPattern} navTabs={navTabs} />
+              {indicesExistOrDataTemporarilyUnavailable(indicesExist) && showTimeline && (
+                <>
+                  <AutoSaveWarningMsg />
+                  <Flyout
+                    flyoutHeight={flyoutHeight}
+                    timelineId="timeline-1"
+                    usersViewing={usersViewing}
+                  />
+                </>
+              )}
+
+              <Switch>
+                <Redirect exact from="/" to={`/${SiemPageName.overview}`} />
+                {subPlugins}
+                <Route path="/link-to" render={props => <LinkToPage {...props} />} />
+                <Route
+                  path="/ml-hosts"
+                  render={({ location, match }) => (
+                    <MlHostConditionalContainer location={location} url={match.url} />
+                  )}
+                />
+                <Route
+                  path="/ml-network"
+                  render={({ location, match }) => (
+                    <MlNetworkConditionalContainer location={location} url={match.url} />
+                  )}
+                />
+                <Route render={() => <NotFoundPage />} />
+              </Switch>
+            </DragDropContextWrapper>
+          )}
+        </WithSource>
+      </Main>
+
+      <HelpMenu />
+
+      <SpyRoute />
+    </WrappedByAutoSizer>
+  );
+};
+
+HomePage.displayName = 'HomePage';
diff --git a/x-pack/plugins/siem/public/pages/home/translations.ts b/x-pack/plugins/siem/public/app/home/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/home/translations.ts
rename to x-pack/plugins/siem/public/app/home/translations.ts
diff --git a/x-pack/plugins/siem/public/app/index.tsx b/x-pack/plugins/siem/public/app/index.tsx
index 7275a718564eff..d69be6e09e6149 100644
--- a/x-pack/plugins/siem/public/app/index.tsx
+++ b/x-pack/plugins/siem/public/app/index.tsx
@@ -7,11 +7,17 @@
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { AppMountParameters } from '../../../../../src/core/public';
 import { StartServices } from '../plugin';
 import { SiemApp } from './app';
+import { SecuritySubPlugins } from './types';
 
-export const renderApp = (services: StartServices, { element }: AppMountParameters) => {
-  render(<SiemApp services={services} />, element);
+export const renderApp = (
+  services: StartServices,
+  { element }: AppMountParameters,
+  subPlugins: SecuritySubPlugins
+) => {
+  render(<SiemApp services={services} subPlugins={subPlugins} />, element);
   return () => unmountComponentAtNode(element);
 };
diff --git a/x-pack/plugins/siem/public/app/routes.tsx b/x-pack/plugins/siem/public/app/routes.tsx
new file mode 100644
index 00000000000000..ed3565df5f507b
--- /dev/null
+++ b/x-pack/plugins/siem/public/app/routes.tsx
@@ -0,0 +1,35 @@
+/*
+ * 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 { History } from 'history';
+import React, { FC, memo } from 'react';
+import { Route, Router, Switch } from 'react-router-dom';
+
+import { NotFoundPage } from './404';
+import { HomePage } from './home';
+import { ManageRoutesSpy } from '../common/utils/route/manage_spy_routes';
+
+interface RouterProps {
+  history: History;
+  subPluginRoutes: JSX.Element[];
+}
+
+const PageRouterComponent: FC<RouterProps> = ({ history, subPluginRoutes }) => (
+  <ManageRoutesSpy>
+    <Router history={history}>
+      <Switch>
+        <Route path="/">
+          <HomePage subPlugins={subPluginRoutes} />
+        </Route>
+        <Route>
+          <NotFoundPage />
+        </Route>
+      </Switch>
+    </Router>
+  </ManageRoutesSpy>
+);
+
+export const PageRouter = memo(PageRouterComponent);
diff --git a/x-pack/plugins/siem/public/app/types.ts b/x-pack/plugins/siem/public/app/types.ts
new file mode 100644
index 00000000000000..5fe4b5a8d82271
--- /dev/null
+++ b/x-pack/plugins/siem/public/app/types.ts
@@ -0,0 +1,61 @@
+/*
+ * 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 { Reducer, AnyAction } from 'redux';
+
+import { NavTab } from '../common/components/navigation/types';
+import { HostsState } from '../hosts/store';
+import { NetworkState } from '../network/store';
+import { TimelineState } from '../timelines/store/timeline/types';
+
+export enum SiemPageName {
+  overview = 'overview',
+  hosts = 'hosts',
+  network = 'network',
+  detections = 'detections',
+  timelines = 'timelines',
+  case = 'case',
+}
+
+export type SiemNavTabKey =
+  | SiemPageName.overview
+  | SiemPageName.hosts
+  | SiemPageName.network
+  | SiemPageName.detections
+  | SiemPageName.timelines
+  | SiemPageName.case;
+
+export type SiemNavTab = Record<SiemNavTabKey, NavTab>;
+
+export interface SecuritySubPluginStore<K extends SecuritySubPluginKeyStore, T> {
+  initialState: Record<K, T>;
+  reducer: Record<K, Reducer<T, AnyAction>>;
+}
+
+export interface SecuritySubPlugin {
+  routes: React.ReactElement[];
+}
+
+type SecuritySubPluginKeyStore = 'hosts' | 'network' | 'timeline';
+export interface SecuritySubPluginWithStore<K extends SecuritySubPluginKeyStore, T>
+  extends SecuritySubPlugin {
+  store: SecuritySubPluginStore<K, T>;
+}
+
+export interface SecuritySubPlugins extends SecuritySubPlugin {
+  store: {
+    initialState: {
+      hosts: HostsState;
+      network: NetworkState;
+      timeline: TimelineState;
+    };
+    reducer: {
+      hosts: Reducer<HostsState, AnyAction>;
+      network: Reducer<NetworkState, AnyAction>;
+      timeline: Reducer<TimelineState, AnyAction>;
+    };
+  };
+}
diff --git a/x-pack/plugins/siem/public/pages/case/components/__mock__/form.ts b/x-pack/plugins/siem/public/cases/components/__mock__/form.ts
similarity index 84%
rename from x-pack/plugins/siem/public/pages/case/components/__mock__/form.ts
rename to x-pack/plugins/siem/public/cases/components/__mock__/form.ts
index 12946c3af06bdb..96c1217577ff25 100644
--- a/x-pack/plugins/siem/public/pages/case/components/__mock__/form.ts
+++ b/x-pack/plugins/siem/public/cases/components/__mock__/form.ts
@@ -3,9 +3,9 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { useForm } from '../../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks';
+import { useForm } from '../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form';
 jest.mock(
-  '../../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form'
+  '../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form'
 );
 export const mockFormHook = {
   isSubmitted: false,
diff --git a/x-pack/plugins/siem/public/pages/case/components/__mock__/router.ts b/x-pack/plugins/siem/public/cases/components/__mock__/router.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/case/components/__mock__/router.ts
rename to x-pack/plugins/siem/public/cases/components/__mock__/router.ts
diff --git a/x-pack/plugins/siem/public/cases/components/add_comment/index.test.tsx b/x-pack/plugins/siem/public/cases/components/add_comment/index.test.tsx
new file mode 100644
index 00000000000000..ab61930cd841b7
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/components/add_comment/index.test.tsx
@@ -0,0 +1,146 @@
+/*
+ * 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 { mount } from 'enzyme';
+
+import { AddComment } from '.';
+import { TestProviders } from '../../../common/mock';
+import { getFormMock } from '../__mock__/form';
+import { Router, routeData, mockHistory, mockLocation } from '../__mock__/router';
+
+import { useInsertTimeline } from '../../../timelines/components/timeline/insert_timeline_popover/use_insert_timeline';
+import { usePostComment } from '../../containers/use_post_comment';
+import { useForm } from '../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form';
+import { wait } from '../../../common/lib/helpers';
+
+jest.mock(
+  '../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form'
+);
+
+jest.mock('../../../timelines/components/timeline/insert_timeline_popover/use_insert_timeline');
+jest.mock('../../containers/use_post_comment');
+
+export const useFormMock = useForm as jest.Mock;
+
+const useInsertTimelineMock = useInsertTimeline as jest.Mock;
+const usePostCommentMock = usePostComment as jest.Mock;
+
+const onCommentSaving = jest.fn();
+const onCommentPosted = jest.fn();
+const postComment = jest.fn();
+const handleCursorChange = jest.fn();
+const handleOnTimelineChange = jest.fn();
+
+const addCommentProps = {
+  caseId: '1234',
+  disabled: false,
+  insertQuote: null,
+  onCommentSaving,
+  onCommentPosted,
+  showLoading: false,
+};
+
+const defaultInsertTimeline = {
+  cursorPosition: {
+    start: 0,
+    end: 0,
+  },
+  handleCursorChange,
+  handleOnTimelineChange,
+};
+
+const defaultPostCommment = {
+  isLoading: false,
+  isError: false,
+  postComment,
+};
+const sampleData = {
+  comment: 'what a cool comment',
+};
+describe('AddComment ', () => {
+  const formHookMock = getFormMock(sampleData);
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+    useInsertTimelineMock.mockImplementation(() => defaultInsertTimeline);
+    usePostCommentMock.mockImplementation(() => defaultPostCommment);
+    useFormMock.mockImplementation(() => ({ form: formHookMock }));
+    jest.spyOn(routeData, 'useLocation').mockReturnValue(mockLocation);
+  });
+
+  it('should post comment on submit click', async () => {
+    const wrapper = mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <AddComment {...addCommentProps} />
+        </Router>
+      </TestProviders>
+    );
+    expect(wrapper.find(`[data-test-subj="add-comment"]`).exists()).toBeTruthy();
+    expect(wrapper.find(`[data-test-subj="loading-spinner"]`).exists()).toBeFalsy();
+
+    wrapper
+      .find(`[data-test-subj="submit-comment"]`)
+      .first()
+      .simulate('click');
+    await wait();
+    expect(onCommentSaving).toBeCalled();
+    expect(postComment).toBeCalledWith(sampleData, onCommentPosted);
+    expect(formHookMock.reset).toBeCalled();
+  });
+
+  it('should render spinner and disable submit when loading', () => {
+    usePostCommentMock.mockImplementation(() => ({ ...defaultPostCommment, isLoading: true }));
+    const wrapper = mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <AddComment {...{ ...addCommentProps, showLoading: true }} />
+        </Router>
+      </TestProviders>
+    );
+    expect(wrapper.find(`[data-test-subj="loading-spinner"]`).exists()).toBeTruthy();
+    expect(
+      wrapper
+        .find(`[data-test-subj="submit-comment"]`)
+        .first()
+        .prop('isDisabled')
+    ).toBeTruthy();
+  });
+
+  it('should disable submit button when disabled prop passed', () => {
+    usePostCommentMock.mockImplementation(() => ({ ...defaultPostCommment, isLoading: true }));
+    const wrapper = mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <AddComment {...{ ...addCommentProps, disabled: true }} />
+        </Router>
+      </TestProviders>
+    );
+    expect(
+      wrapper
+        .find(`[data-test-subj="submit-comment"]`)
+        .first()
+        .prop('isDisabled')
+    ).toBeTruthy();
+  });
+
+  it('should insert a quote if one is available', () => {
+    const sampleQuote = 'what a cool quote';
+    mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <AddComment {...{ ...addCommentProps, insertQuote: sampleQuote }} />
+        </Router>
+      </TestProviders>
+    );
+
+    expect(formHookMock.setFieldValue).toBeCalledWith(
+      'comment',
+      `${sampleData.comment}\n\n${sampleQuote}`
+    );
+  });
+});
diff --git a/x-pack/plugins/siem/public/cases/components/add_comment/index.tsx b/x-pack/plugins/siem/public/cases/components/add_comment/index.tsx
new file mode 100644
index 00000000000000..277352c39df65e
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/components/add_comment/index.tsx
@@ -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 { EuiButton, EuiLoadingSpinner } from '@elastic/eui';
+import React, { useCallback, useEffect } from 'react';
+import styled from 'styled-components';
+
+import { CommentRequest } from '../../../../../case/common/api';
+import { usePostComment } from '../../containers/use_post_comment';
+import { Case } from '../../containers/types';
+import { MarkdownEditorForm } from '../../../common/components/markdown_editor/form';
+import { InsertTimelinePopover } from '../../../timelines/components/timeline/insert_timeline_popover';
+import { useInsertTimeline } from '../../../timelines/components/timeline/insert_timeline_popover/use_insert_timeline';
+import { Form, useForm, UseField } from '../../../shared_imports';
+
+import * as i18n from './translations';
+import { schema } from './schema';
+
+const MySpinner = styled(EuiLoadingSpinner)`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+`;
+
+const initialCommentValue: CommentRequest = {
+  comment: '',
+};
+
+interface AddCommentProps {
+  caseId: string;
+  disabled?: boolean;
+  insertQuote: string | null;
+  onCommentSaving?: () => void;
+  onCommentPosted: (newCase: Case) => void;
+  showLoading?: boolean;
+}
+
+export const AddComment = React.memo<AddCommentProps>(
+  ({ caseId, disabled, insertQuote, showLoading = true, onCommentPosted, onCommentSaving }) => {
+    const { isLoading, postComment } = usePostComment(caseId);
+    const { form } = useForm<CommentRequest>({
+      defaultValue: initialCommentValue,
+      options: { stripEmptyFields: false },
+      schema,
+    });
+    const { handleCursorChange, handleOnTimelineChange } = useInsertTimeline<CommentRequest>(
+      form,
+      'comment'
+    );
+
+    useEffect(() => {
+      if (insertQuote !== null) {
+        const { comment } = form.getFormData();
+        form.setFieldValue(
+          'comment',
+          `${comment}${comment.length > 0 ? '\n\n' : ''}${insertQuote}`
+        );
+      }
+    }, [insertQuote]);
+
+    const onSubmit = useCallback(async () => {
+      const { isValid, data } = await form.submit();
+      if (isValid) {
+        if (onCommentSaving != null) {
+          onCommentSaving();
+        }
+        await postComment(data, onCommentPosted);
+        form.reset();
+      }
+    }, [form, onCommentPosted, onCommentSaving]);
+    return (
+      <span id="add-comment-permLink">
+        {isLoading && showLoading && <MySpinner data-test-subj="loading-spinner" size="xl" />}
+        <Form form={form}>
+          <UseField
+            path="comment"
+            component={MarkdownEditorForm}
+            componentProps={{
+              idAria: 'caseComment',
+              isDisabled: isLoading,
+              dataTestSubj: 'add-comment',
+              placeholder: i18n.ADD_COMMENT_HELP_TEXT,
+              onCursorPositionUpdate: handleCursorChange,
+              bottomRightContent: (
+                <EuiButton
+                  data-test-subj="submit-comment"
+                  iconType="plusInCircle"
+                  isDisabled={isLoading || disabled}
+                  isLoading={isLoading}
+                  onClick={onSubmit}
+                  size="s"
+                >
+                  {i18n.ADD_COMMENT}
+                </EuiButton>
+              ),
+              topRightContent: (
+                <InsertTimelinePopover
+                  hideUntitled={true}
+                  isDisabled={isLoading}
+                  onTimelineChange={handleOnTimelineChange}
+                />
+              ),
+            }}
+          />
+        </Form>
+      </span>
+    );
+  }
+);
+
+AddComment.displayName = 'AddComment';
diff --git a/x-pack/plugins/siem/public/cases/components/add_comment/schema.tsx b/x-pack/plugins/siem/public/cases/components/add_comment/schema.tsx
new file mode 100644
index 00000000000000..eb11357cd7ce94
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/components/add_comment/schema.tsx
@@ -0,0 +1,22 @@
+/*
+ * 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 { CommentRequest } from '../../../../../case/common/api';
+import { FIELD_TYPES, fieldValidators, FormSchema } from '../../../shared_imports';
+import * as i18n from './translations';
+
+const { emptyField } = fieldValidators;
+
+export const schema: FormSchema<CommentRequest> = {
+  comment: {
+    type: FIELD_TYPES.TEXTAREA,
+    validations: [
+      {
+        validator: emptyField(i18n.COMMENT_REQUIRED),
+      },
+    ],
+  },
+};
diff --git a/x-pack/plugins/siem/public/cases/components/add_comment/translations.ts b/x-pack/plugins/siem/public/cases/components/add_comment/translations.ts
new file mode 100644
index 00000000000000..704b8db48c1d3b
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/components/add_comment/translations.ts
@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export * from '../../translations';
diff --git a/x-pack/plugins/siem/public/cases/components/all_cases/actions.tsx b/x-pack/plugins/siem/public/cases/components/all_cases/actions.tsx
new file mode 100644
index 00000000000000..9f7e2e73c5bbcf
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/components/all_cases/actions.tsx
@@ -0,0 +1,61 @@
+/*
+ * 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 { DefaultItemIconButtonAction } from '@elastic/eui/src/components/basic_table/action_types';
+import { Dispatch } from 'react';
+import { Case } from '../../containers/types';
+
+import * as i18n from './translations';
+import { UpdateCase } from '../../containers/use_get_cases';
+
+interface GetActions {
+  caseStatus: string;
+  dispatchUpdate: Dispatch<Omit<UpdateCase, 'refetchCasesStatus'>>;
+  deleteCaseOnClick: (deleteCase: Case) => void;
+}
+
+export const getActions = ({
+  caseStatus,
+  dispatchUpdate,
+  deleteCaseOnClick,
+}: GetActions): Array<DefaultItemIconButtonAction<Case>> => [
+  {
+    description: i18n.DELETE_CASE,
+    icon: 'trash',
+    name: i18n.DELETE_CASE,
+    onClick: deleteCaseOnClick,
+    type: 'icon',
+    'data-test-subj': 'action-delete',
+  },
+  caseStatus === 'open'
+    ? {
+        description: i18n.CLOSE_CASE,
+        icon: 'folderCheck',
+        name: i18n.CLOSE_CASE,
+        onClick: (theCase: Case) =>
+          dispatchUpdate({
+            updateKey: 'status',
+            updateValue: 'closed',
+            caseId: theCase.id,
+            version: theCase.version,
+          }),
+        type: 'icon',
+        'data-test-subj': 'action-close',
+      }
+    : {
+        description: i18n.REOPEN_CASE,
+        icon: 'folderExclamation',
+        name: i18n.REOPEN_CASE,
+        onClick: (theCase: Case) =>
+          dispatchUpdate({
+            updateKey: 'status',
+            updateValue: 'open',
+            caseId: theCase.id,
+            version: theCase.version,
+          }),
+        type: 'icon',
+        'data-test-subj': 'action-open',
+      },
+];
diff --git a/x-pack/plugins/siem/public/pages/case/components/all_cases/columns.test.tsx b/x-pack/plugins/siem/public/cases/components/all_cases/columns.test.tsx
similarity index 94%
rename from x-pack/plugins/siem/public/pages/case/components/all_cases/columns.test.tsx
rename to x-pack/plugins/siem/public/cases/components/all_cases/columns.test.tsx
index 2a06fa6eb51acb..8316823591f3f9 100644
--- a/x-pack/plugins/siem/public/pages/case/components/all_cases/columns.test.tsx
+++ b/x-pack/plugins/siem/public/cases/components/all_cases/columns.test.tsx
@@ -9,7 +9,7 @@ import { mount } from 'enzyme';
 
 import { ExternalServiceColumn } from './columns';
 
-import { useGetCasesMockState } from '../../../../containers/case/mock';
+import { useGetCasesMockState } from '../../containers/mock';
 
 describe('ExternalServiceColumn ', () => {
   it('Not pushed render', () => {
diff --git a/x-pack/plugins/siem/public/cases/components/all_cases/columns.tsx b/x-pack/plugins/siem/public/cases/components/all_cases/columns.tsx
new file mode 100644
index 00000000000000..ddd860a8720c57
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/components/all_cases/columns.tsx
@@ -0,0 +1,215 @@
+/*
+ * 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, { useCallback } from 'react';
+import {
+  EuiBadge,
+  EuiTableFieldDataColumnType,
+  EuiTableComputedColumnType,
+  EuiTableActionsColumnType,
+  EuiAvatar,
+  EuiLink,
+} from '@elastic/eui';
+import styled from 'styled-components';
+import { DefaultItemIconButtonAction } from '@elastic/eui/src/components/basic_table/action_types';
+import { getEmptyTagValue } from '../../../common/components/empty_value';
+import { Case } from '../../containers/types';
+import { FormattedRelativePreferenceDate } from '../../../common/components/formatted_date';
+import { CaseDetailsLink } from '../../../common/components/links';
+import { TruncatableText } from '../../../common/components/truncatable_text';
+import * as i18n from './translations';
+
+export type CasesColumns =
+  | EuiTableFieldDataColumnType<Case>
+  | EuiTableComputedColumnType<Case>
+  | EuiTableActionsColumnType<Case>;
+
+const MediumShadeText = styled.p`
+  color: ${({ theme }) => theme.eui.euiColorMediumShade};
+`;
+
+const Spacer = styled.span`
+  margin-left: ${({ theme }) => theme.eui.paddingSizes.s};
+`;
+
+const renderStringField = (field: string, dataTestSubj: string) =>
+  field != null ? <span data-test-subj={dataTestSubj}>{field}</span> : getEmptyTagValue();
+
+export const getCasesColumns = (
+  actions: Array<DefaultItemIconButtonAction<Case>>,
+  filterStatus: string
+): CasesColumns[] => [
+  {
+    name: i18n.NAME,
+    render: (theCase: Case) => {
+      if (theCase.id != null && theCase.title != null) {
+        const caseDetailsLinkComponent = (
+          <CaseDetailsLink detailName={theCase.id} title={theCase.title}>
+            {theCase.title}
+          </CaseDetailsLink>
+        );
+        return theCase.status === 'open' ? (
+          caseDetailsLinkComponent
+        ) : (
+          <>
+            <MediumShadeText>
+              {caseDetailsLinkComponent}
+              <Spacer>{i18n.CLOSED}</Spacer>
+            </MediumShadeText>
+          </>
+        );
+      }
+      return getEmptyTagValue();
+    },
+  },
+  {
+    field: 'createdBy',
+    name: i18n.REPORTER,
+    render: (createdBy: Case['createdBy']) => {
+      if (createdBy != null) {
+        return (
+          <>
+            <EuiAvatar
+              className="userAction__circle"
+              name={createdBy.fullName ? createdBy.fullName : createdBy.username ?? ''}
+              size="s"
+            />
+            <Spacer data-test-subj="case-table-column-createdBy">
+              {createdBy.fullName ? createdBy.fullName : createdBy.username ?? ''}
+            </Spacer>
+          </>
+        );
+      }
+      return getEmptyTagValue();
+    },
+  },
+  {
+    field: 'tags',
+    name: i18n.TAGS,
+    render: (tags: Case['tags']) => {
+      if (tags != null && tags.length > 0) {
+        return (
+          <TruncatableText>
+            {tags.map((tag: string, i: number) => (
+              <EuiBadge
+                color="hollow"
+                key={`${tag}-${i}`}
+                data-test-subj={`case-table-column-tags-${i}`}
+              >
+                {tag}
+              </EuiBadge>
+            ))}
+          </TruncatableText>
+        );
+      }
+      return getEmptyTagValue();
+    },
+    truncateText: true,
+  },
+  {
+    align: 'right',
+    field: 'totalComment',
+    name: i18n.COMMENTS,
+    sortable: true,
+    render: (totalComment: Case['totalComment']) =>
+      totalComment != null
+        ? renderStringField(`${totalComment}`, `case-table-column-commentCount`)
+        : getEmptyTagValue(),
+  },
+  filterStatus === 'open'
+    ? {
+        field: 'createdAt',
+        name: i18n.OPENED_ON,
+        sortable: true,
+        render: (createdAt: Case['createdAt']) => {
+          if (createdAt != null) {
+            return (
+              <span data-test-subj={`case-table-column-createdAt`}>
+                <FormattedRelativePreferenceDate value={createdAt} />
+              </span>
+            );
+          }
+          return getEmptyTagValue();
+        },
+      }
+    : {
+        field: 'closedAt',
+        name: i18n.CLOSED_ON,
+        sortable: true,
+        render: (closedAt: Case['closedAt']) => {
+          if (closedAt != null) {
+            return (
+              <span data-test-subj={`case-table-column-closedAt`}>
+                <FormattedRelativePreferenceDate value={closedAt} />
+              </span>
+            );
+          }
+          return getEmptyTagValue();
+        },
+      },
+  {
+    name: i18n.EXTERNAL_INCIDENT,
+    render: (theCase: Case) => {
+      if (theCase.id != null) {
+        return <ExternalServiceColumn theCase={theCase} />;
+      }
+      return getEmptyTagValue();
+    },
+  },
+  {
+    name: i18n.INCIDENT_MANAGEMENT_SYSTEM,
+    render: (theCase: Case) => {
+      if (theCase.externalService != null) {
+        return renderStringField(
+          `${theCase.externalService.connectorName}`,
+          `case-table-column-connector`
+        );
+      }
+      return getEmptyTagValue();
+    },
+  },
+  {
+    name: i18n.ACTIONS,
+    actions,
+  },
+];
+
+interface Props {
+  theCase: Case;
+}
+
+export const ExternalServiceColumn: React.FC<Props> = ({ theCase }) => {
+  const handleRenderDataToPush = useCallback(() => {
+    const lastCaseUpdate = theCase.updatedAt != null ? new Date(theCase.updatedAt) : null;
+    const lastCasePush =
+      theCase.externalService?.pushedAt != null
+        ? new Date(theCase.externalService?.pushedAt)
+        : null;
+    const hasDataToPush =
+      lastCasePush === null ||
+      (lastCasePush != null &&
+        lastCaseUpdate != null &&
+        lastCasePush.getTime() < lastCaseUpdate?.getTime());
+    return (
+      <p>
+        <EuiLink
+          data-test-subj={`case-table-column-external`}
+          href={theCase.externalService?.externalUrl}
+          target="_blank"
+          aria-label={i18n.SERVICENOW_LINK_ARIA}
+        >
+          {theCase.externalService?.externalTitle}
+        </EuiLink>
+        {hasDataToPush
+          ? renderStringField(i18n.REQUIRES_UPDATE, `case-table-column-external-requiresUpdate`)
+          : renderStringField(i18n.UP_TO_DATE, `case-table-column-external-upToDate`)}
+      </p>
+    );
+  }, [theCase]);
+  if (theCase.externalService !== null) {
+    return handleRenderDataToPush();
+  }
+  return renderStringField(i18n.NOT_PUSHED, `case-table-column-external-notPushed`);
+};
diff --git a/x-pack/plugins/siem/public/cases/components/all_cases/index.test.tsx b/x-pack/plugins/siem/public/cases/components/all_cases/index.test.tsx
new file mode 100644
index 00000000000000..1dbd008277b347
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/components/all_cases/index.test.tsx
@@ -0,0 +1,349 @@
+/*
+ * 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 { mount } from 'enzyme';
+import moment from 'moment-timezone';
+import { AllCases } from '.';
+import { TestProviders } from '../../../common/mock';
+import { useGetCasesMockState } from '../../containers/mock';
+import * as i18n from './translations';
+
+import { getEmptyTagValue } from '../../../common/components/empty_value';
+import { useDeleteCases } from '../../containers/use_delete_cases';
+import { useGetCases } from '../../containers/use_get_cases';
+import { useGetCasesStatus } from '../../containers/use_get_cases_status';
+import { useUpdateCases } from '../../containers/use_bulk_update_case';
+import { getCasesColumns } from './columns';
+
+jest.mock('../../containers/use_bulk_update_case');
+jest.mock('../../containers/use_delete_cases');
+jest.mock('../../containers/use_get_cases');
+jest.mock('../../containers/use_get_cases_status');
+
+const useDeleteCasesMock = useDeleteCases as jest.Mock;
+const useGetCasesMock = useGetCases as jest.Mock;
+const useGetCasesStatusMock = useGetCasesStatus as jest.Mock;
+const useUpdateCasesMock = useUpdateCases as jest.Mock;
+
+describe('AllCases', () => {
+  const dispatchResetIsDeleted = jest.fn();
+  const dispatchResetIsUpdated = jest.fn();
+  const dispatchUpdateCaseProperty = jest.fn();
+  const handleOnDeleteConfirm = jest.fn();
+  const handleToggleModal = jest.fn();
+  const refetchCases = jest.fn();
+  const setFilters = jest.fn();
+  const setQueryParams = jest.fn();
+  const setSelectedCases = jest.fn();
+  const updateBulkStatus = jest.fn();
+  const fetchCasesStatus = jest.fn();
+  const emptyTag = getEmptyTagValue().props.children;
+
+  const defaultGetCases = {
+    ...useGetCasesMockState,
+    dispatchUpdateCaseProperty,
+    refetchCases,
+    setFilters,
+    setQueryParams,
+    setSelectedCases,
+  };
+  const defaultDeleteCases = {
+    dispatchResetIsDeleted,
+    handleOnDeleteConfirm,
+    handleToggleModal,
+    isDeleted: false,
+    isDisplayConfirmDeleteModal: false,
+    isLoading: false,
+  };
+  const defaultCasesStatus = {
+    countClosedCases: 0,
+    countOpenCases: 5,
+    fetchCasesStatus,
+    isError: false,
+    isLoading: true,
+  };
+  const defaultUpdateCases = {
+    isUpdated: false,
+    isLoading: false,
+    isError: false,
+    dispatchResetIsUpdated,
+    updateBulkStatus,
+  };
+  /* eslint-disable no-console */
+  // Silence until enzyme fixed to use ReactTestUtils.act()
+  const originalError = console.error;
+  beforeAll(() => {
+    console.error = jest.fn();
+  });
+  afterAll(() => {
+    console.error = originalError;
+  });
+  /* eslint-enable no-console */
+  beforeEach(() => {
+    jest.resetAllMocks();
+    useUpdateCasesMock.mockImplementation(() => defaultUpdateCases);
+    useGetCasesMock.mockImplementation(() => defaultGetCases);
+    useDeleteCasesMock.mockImplementation(() => defaultDeleteCases);
+    useGetCasesStatusMock.mockImplementation(() => defaultCasesStatus);
+    moment.tz.setDefault('UTC');
+  });
+  it('should render AllCases', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <AllCases userCanCrud={true} />
+      </TestProviders>
+    );
+    expect(
+      wrapper
+        .find(`a[data-test-subj="case-details-link"]`)
+        .first()
+        .prop('href')
+    ).toEqual(
+      `#/link-to/case/${useGetCasesMockState.data.cases[0].id}?timerange=(global:(linkTo:!(timeline),timerange:(from:0,fromStr:now-24h,kind:relative,to:1,toStr:now)),timeline:(linkTo:!(global),timerange:(from:0,fromStr:now-24h,kind:relative,to:1,toStr:now)))`
+    );
+    expect(
+      wrapper
+        .find(`a[data-test-subj="case-details-link"]`)
+        .first()
+        .text()
+    ).toEqual(useGetCasesMockState.data.cases[0].title);
+    expect(
+      wrapper
+        .find(`span[data-test-subj="case-table-column-tags-0"]`)
+        .first()
+        .prop('title')
+    ).toEqual(useGetCasesMockState.data.cases[0].tags[0]);
+    expect(
+      wrapper
+        .find(`[data-test-subj="case-table-column-createdBy"]`)
+        .first()
+        .text()
+    ).toEqual(useGetCasesMockState.data.cases[0].createdBy.fullName);
+    expect(
+      wrapper
+        .find(`[data-test-subj="case-table-column-createdAt"]`)
+        .first()
+        .childAt(0)
+        .prop('value')
+    ).toBe(useGetCasesMockState.data.cases[0].createdAt);
+    expect(
+      wrapper
+        .find(`[data-test-subj="case-table-case-count"]`)
+        .first()
+        .text()
+    ).toEqual('Showing 10 cases');
+  });
+  it('should render empty fields', () => {
+    useGetCasesMock.mockImplementation(() => ({
+      ...defaultGetCases,
+      data: {
+        ...defaultGetCases.data,
+        cases: [
+          {
+            ...defaultGetCases.data.cases[0],
+            id: null,
+            createdAt: null,
+            createdBy: null,
+            tags: null,
+            title: null,
+            totalComment: null,
+          },
+        ],
+      },
+    }));
+    const wrapper = mount(
+      <TestProviders>
+        <AllCases userCanCrud={true} />
+      </TestProviders>
+    );
+    const checkIt = (columnName: string, key: number) => {
+      const column = wrapper.find('[data-test-subj="cases-table"] tbody .euiTableRowCell').at(key);
+      if (columnName === i18n.ACTIONS) {
+        return;
+      }
+      expect(column.find('.euiTableRowCell--hideForDesktop').text()).toEqual(columnName);
+      expect(column.find('span').text()).toEqual(emptyTag);
+    };
+    getCasesColumns([], 'open').map((i, key) => i.name != null && checkIt(`${i.name}`, key));
+  });
+  it('should tableHeaderSortButton AllCases', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <AllCases userCanCrud={true} />
+      </TestProviders>
+    );
+    wrapper
+      .find('[data-test-subj="tableHeaderSortButton"]')
+      .first()
+      .simulate('click');
+    expect(setQueryParams).toBeCalledWith({
+      page: 1,
+      perPage: 5,
+      sortField: 'createdAt',
+      sortOrder: 'asc',
+    });
+  });
+  it('closes case when row action icon clicked', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <AllCases userCanCrud={true} />
+      </TestProviders>
+    );
+    wrapper
+      .find('[data-test-subj="action-close"]')
+      .first()
+      .simulate('click');
+    const firstCase = useGetCasesMockState.data.cases[0];
+    expect(dispatchUpdateCaseProperty).toBeCalledWith({
+      caseId: firstCase.id,
+      updateKey: 'status',
+      updateValue: 'closed',
+      refetchCasesStatus: fetchCasesStatus,
+      version: firstCase.version,
+    });
+  });
+  it('opens case when row action icon clicked', () => {
+    useGetCasesMock.mockImplementation(() => ({
+      ...defaultGetCases,
+      filterOptions: { ...defaultGetCases.filterOptions, status: 'closed' },
+    }));
+
+    const wrapper = mount(
+      <TestProviders>
+        <AllCases userCanCrud={true} />
+      </TestProviders>
+    );
+    wrapper
+      .find('[data-test-subj="action-open"]')
+      .first()
+      .simulate('click');
+    const firstCase = useGetCasesMockState.data.cases[0];
+    expect(dispatchUpdateCaseProperty).toBeCalledWith({
+      caseId: firstCase.id,
+      updateKey: 'status',
+      updateValue: 'open',
+      refetchCasesStatus: fetchCasesStatus,
+      version: firstCase.version,
+    });
+  });
+  it('Bulk delete', () => {
+    useGetCasesMock.mockImplementation(() => ({
+      ...defaultGetCases,
+      selectedCases: useGetCasesMockState.data.cases,
+    }));
+    useDeleteCasesMock
+      .mockReturnValueOnce({
+        ...defaultDeleteCases,
+        isDisplayConfirmDeleteModal: false,
+      })
+      .mockReturnValue({
+        ...defaultDeleteCases,
+        isDisplayConfirmDeleteModal: true,
+      });
+
+    const wrapper = mount(
+      <TestProviders>
+        <AllCases userCanCrud={true} />
+      </TestProviders>
+    );
+    wrapper
+      .find('[data-test-subj="case-table-bulk-actions"] button')
+      .first()
+      .simulate('click');
+    wrapper
+      .find('[data-test-subj="cases-bulk-delete-button"]')
+      .first()
+      .simulate('click');
+    expect(handleToggleModal).toBeCalled();
+
+    wrapper
+      .find(
+        '[data-test-subj="confirm-delete-case-modal"] [data-test-subj="confirmModalConfirmButton"]'
+      )
+      .last()
+      .simulate('click');
+    expect(handleOnDeleteConfirm.mock.calls[0][0]).toStrictEqual(
+      useGetCasesMockState.data.cases.map(({ id }) => ({ id }))
+    );
+  });
+  it('Bulk close status update', () => {
+    useGetCasesMock.mockImplementation(() => ({
+      ...defaultGetCases,
+      selectedCases: useGetCasesMockState.data.cases,
+    }));
+
+    const wrapper = mount(
+      <TestProviders>
+        <AllCases userCanCrud={true} />
+      </TestProviders>
+    );
+    wrapper
+      .find('[data-test-subj="case-table-bulk-actions"] button')
+      .first()
+      .simulate('click');
+    wrapper
+      .find('[data-test-subj="cases-bulk-close-button"]')
+      .first()
+      .simulate('click');
+    expect(updateBulkStatus).toBeCalledWith(useGetCasesMockState.data.cases, 'closed');
+  });
+  it('Bulk open status update', () => {
+    useGetCasesMock.mockImplementation(() => ({
+      ...defaultGetCases,
+      selectedCases: useGetCasesMockState.data.cases,
+      filterOptions: {
+        ...defaultGetCases.filterOptions,
+        status: 'closed',
+      },
+    }));
+
+    const wrapper = mount(
+      <TestProviders>
+        <AllCases userCanCrud={true} />
+      </TestProviders>
+    );
+    wrapper
+      .find('[data-test-subj="case-table-bulk-actions"] button')
+      .first()
+      .simulate('click');
+    wrapper
+      .find('[data-test-subj="cases-bulk-open-button"]')
+      .first()
+      .simulate('click');
+    expect(updateBulkStatus).toBeCalledWith(useGetCasesMockState.data.cases, 'open');
+  });
+  it('isDeleted is true, refetch', () => {
+    useDeleteCasesMock.mockImplementation(() => ({
+      ...defaultDeleteCases,
+      isDeleted: true,
+    }));
+
+    mount(
+      <TestProviders>
+        <AllCases userCanCrud={true} />
+      </TestProviders>
+    );
+    expect(refetchCases).toBeCalled();
+    expect(fetchCasesStatus).toBeCalled();
+    expect(dispatchResetIsDeleted).toBeCalled();
+  });
+  it('isUpdated is true, refetch', () => {
+    useUpdateCasesMock.mockImplementation(() => ({
+      ...defaultUpdateCases,
+      isUpdated: true,
+    }));
+
+    mount(
+      <TestProviders>
+        <AllCases userCanCrud={true} />
+      </TestProviders>
+    );
+    expect(refetchCases).toBeCalled();
+    expect(fetchCasesStatus).toBeCalled();
+    expect(dispatchResetIsUpdated).toBeCalled();
+  });
+});
diff --git a/x-pack/plugins/siem/public/cases/components/all_cases/index.tsx b/x-pack/plugins/siem/public/cases/components/all_cases/index.tsx
new file mode 100644
index 00000000000000..e86953c84336c8
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/components/all_cases/index.tsx
@@ -0,0 +1,439 @@
+/*
+ * 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, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  EuiBasicTable,
+  EuiButton,
+  EuiContextMenuPanel,
+  EuiEmptyPrompt,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLoadingContent,
+  EuiProgress,
+  EuiTableSortingType,
+} from '@elastic/eui';
+import { EuiTableSelectionType } from '@elastic/eui/src/components/basic_table/table_types';
+import { isEmpty } from 'lodash/fp';
+import styled, { css } from 'styled-components';
+import * as i18n from './translations';
+
+import { getCasesColumns } from './columns';
+import { Case, DeleteCase, FilterOptions, SortFieldCase } from '../../containers/types';
+import { useGetCases, UpdateCase } from '../../containers/use_get_cases';
+import { useGetCasesStatus } from '../../containers/use_get_cases_status';
+import { useDeleteCases } from '../../containers/use_delete_cases';
+import { EuiBasicTableOnChange } from '../../../alerts/pages/detection_engine/rules/types';
+import { useGetUrlSearch } from '../../../common/components/navigation/use_get_url_search';
+import { Panel } from '../../../common/components/panel';
+import {
+  UtilityBar,
+  UtilityBarAction,
+  UtilityBarGroup,
+  UtilityBarSection,
+  UtilityBarText,
+} from '../../../common/components/utility_bar';
+import { getCreateCaseUrl } from '../../../common/components/link_to';
+import { getBulkItems } from '../bulk_actions';
+import { CaseHeaderPage } from '../case_header_page';
+import { ConfirmDeleteCaseModal } from '../confirm_delete_case';
+import { OpenClosedStats } from '../open_closed_stats';
+import { navTabs } from '../../../app/home/home_navigations';
+
+import { getActions } from './actions';
+import { CasesTableFilters } from './table_filters';
+import { useUpdateCases } from '../../containers/use_bulk_update_case';
+import { useGetActionLicense } from '../../containers/use_get_action_license';
+import { getActionLicenseError } from '../use_push_to_service/helpers';
+import { CaseCallOut } from '../callout';
+import { ConfigureCaseButton } from '../configure_cases/button';
+import { ERROR_PUSH_SERVICE_CALLOUT_TITLE } from '../use_push_to_service/translations';
+
+const Div = styled.div`
+  margin-top: ${({ theme }) => theme.eui.paddingSizes.m};
+`;
+const FlexItemDivider = styled(EuiFlexItem)`
+  ${({ theme }) => css`
+    .euiFlexGroup--gutterMedium > &.euiFlexItem {
+      border-right: ${theme.eui.euiBorderThin};
+      padding-right: ${theme.eui.euiSize};
+      margin-right: ${theme.eui.euiSize};
+    }
+  `}
+`;
+
+const ProgressLoader = styled(EuiProgress)`
+  ${({ theme }) => css`
+    top: 2px;
+    border-radius: ${theme.eui.euiBorderRadius};
+    z-index: ${theme.eui.euiZHeader};
+  `}
+`;
+
+const getSortField = (field: string): SortFieldCase => {
+  if (field === SortFieldCase.createdAt) {
+    return SortFieldCase.createdAt;
+  } else if (field === SortFieldCase.closedAt) {
+    return SortFieldCase.closedAt;
+  }
+  return SortFieldCase.createdAt;
+};
+
+interface AllCasesProps {
+  userCanCrud: boolean;
+}
+export const AllCases = React.memo<AllCasesProps>(({ userCanCrud }) => {
+  const urlSearch = useGetUrlSearch(navTabs.case);
+  const { actionLicense } = useGetActionLicense();
+  const {
+    countClosedCases,
+    countOpenCases,
+    isLoading: isCasesStatusLoading,
+    fetchCasesStatus,
+  } = useGetCasesStatus();
+  const {
+    data,
+    dispatchUpdateCaseProperty,
+    filterOptions,
+    loading,
+    queryParams,
+    selectedCases,
+    refetchCases,
+    setFilters,
+    setQueryParams,
+    setSelectedCases,
+  } = useGetCases();
+
+  // Delete case
+  const {
+    dispatchResetIsDeleted,
+    handleOnDeleteConfirm,
+    handleToggleModal,
+    isLoading: isDeleting,
+    isDeleted,
+    isDisplayConfirmDeleteModal,
+  } = useDeleteCases();
+
+  // Update case
+  const {
+    dispatchResetIsUpdated,
+    isLoading: isUpdating,
+    isUpdated,
+    updateBulkStatus,
+  } = useUpdateCases();
+  const [deleteThisCase, setDeleteThisCase] = useState({
+    title: '',
+    id: '',
+  });
+  const [deleteBulk, setDeleteBulk] = useState<DeleteCase[]>([]);
+  const filterRefetch = useRef<() => void>();
+  const setFilterRefetch = useCallback(
+    (refetchFilter: () => void) => {
+      filterRefetch.current = refetchFilter;
+    },
+    [filterRefetch.current]
+  );
+  const refreshCases = useCallback(
+    (dataRefresh = true) => {
+      if (dataRefresh) refetchCases();
+      fetchCasesStatus();
+      setSelectedCases([]);
+      setDeleteBulk([]);
+      if (filterRefetch.current != null) {
+        filterRefetch.current();
+      }
+    },
+    [filterOptions, queryParams, filterRefetch.current]
+  );
+
+  useEffect(() => {
+    if (isDeleted) {
+      refreshCases();
+      dispatchResetIsDeleted();
+    }
+    if (isUpdated) {
+      refreshCases();
+      dispatchResetIsUpdated();
+    }
+  }, [isDeleted, isUpdated]);
+  const confirmDeleteModal = useMemo(
+    () => (
+      <ConfirmDeleteCaseModal
+        caseTitle={deleteThisCase.title}
+        isModalVisible={isDisplayConfirmDeleteModal}
+        isPlural={deleteBulk.length > 0}
+        onCancel={handleToggleModal}
+        onConfirm={handleOnDeleteConfirm.bind(
+          null,
+          deleteBulk.length > 0 ? deleteBulk : [deleteThisCase]
+        )}
+      />
+    ),
+    [deleteBulk, deleteThisCase, isDisplayConfirmDeleteModal]
+  );
+
+  const toggleDeleteModal = useCallback((deleteCase: Case) => {
+    handleToggleModal();
+    setDeleteThisCase(deleteCase);
+  }, []);
+
+  const toggleBulkDeleteModal = useCallback(
+    (caseIds: string[]) => {
+      handleToggleModal();
+      if (caseIds.length === 1) {
+        const singleCase = selectedCases.find(theCase => theCase.id === caseIds[0]);
+        if (singleCase) {
+          return setDeleteThisCase({ id: singleCase.id, title: singleCase.title });
+        }
+      }
+      const convertToDeleteCases: DeleteCase[] = caseIds.map(id => ({ id }));
+      setDeleteBulk(convertToDeleteCases);
+    },
+    [selectedCases]
+  );
+
+  const handleUpdateCaseStatus = useCallback(
+    (status: string) => {
+      updateBulkStatus(selectedCases, status);
+    },
+    [selectedCases]
+  );
+
+  const selectedCaseIds = useMemo(
+    (): string[] => selectedCases.map((caseObj: Case) => caseObj.id),
+    [selectedCases]
+  );
+
+  const getBulkItemsPopoverContent = useCallback(
+    (closePopover: () => void) => (
+      <EuiContextMenuPanel
+        data-test-subj="cases-bulk-actions"
+        items={getBulkItems({
+          caseStatus: filterOptions.status,
+          closePopover,
+          deleteCasesAction: toggleBulkDeleteModal,
+          selectedCaseIds,
+          updateCaseStatus: handleUpdateCaseStatus,
+        })}
+      />
+    ),
+    [selectedCaseIds, filterOptions.status, toggleBulkDeleteModal]
+  );
+  const handleDispatchUpdate = useCallback(
+    (args: Omit<UpdateCase, 'refetchCasesStatus'>) => {
+      dispatchUpdateCaseProperty({ ...args, refetchCasesStatus: fetchCasesStatus });
+    },
+    [dispatchUpdateCaseProperty, fetchCasesStatus]
+  );
+
+  const actions = useMemo(
+    () =>
+      getActions({
+        caseStatus: filterOptions.status,
+        deleteCaseOnClick: toggleDeleteModal,
+        dispatchUpdate: handleDispatchUpdate,
+      }),
+    [filterOptions.status, toggleDeleteModal, handleDispatchUpdate]
+  );
+
+  const actionsErrors = useMemo(() => getActionLicenseError(actionLicense), [actionLicense]);
+
+  const tableOnChangeCallback = useCallback(
+    ({ page, sort }: EuiBasicTableOnChange) => {
+      let newQueryParams = queryParams;
+      if (sort) {
+        newQueryParams = {
+          ...newQueryParams,
+          sortField: getSortField(sort.field),
+          sortOrder: sort.direction,
+        };
+      }
+      if (page) {
+        newQueryParams = {
+          ...newQueryParams,
+          page: page.index + 1,
+          perPage: page.size,
+        };
+      }
+      setQueryParams(newQueryParams);
+      refreshCases(false);
+    },
+    [queryParams]
+  );
+
+  const onFilterChangedCallback = useCallback(
+    (newFilterOptions: Partial<FilterOptions>) => {
+      if (newFilterOptions.status && newFilterOptions.status === 'closed') {
+        setQueryParams({ sortField: SortFieldCase.closedAt });
+      } else if (newFilterOptions.status && newFilterOptions.status === 'open') {
+        setQueryParams({ sortField: SortFieldCase.createdAt });
+      }
+      setFilters(newFilterOptions);
+      refreshCases(false);
+    },
+    [filterOptions, queryParams]
+  );
+
+  const memoizedGetCasesColumns = useMemo(
+    () => getCasesColumns(userCanCrud ? actions : [], filterOptions.status),
+    [actions, filterOptions.status, userCanCrud]
+  );
+  const memoizedPagination = useMemo(
+    () => ({
+      pageIndex: queryParams.page - 1,
+      pageSize: queryParams.perPage,
+      totalItemCount: data.total,
+      pageSizeOptions: [5, 10, 15, 20, 25],
+    }),
+    [data, queryParams]
+  );
+
+  const sorting: EuiTableSortingType<Case> = {
+    sort: { field: queryParams.sortField, direction: queryParams.sortOrder },
+  };
+  const euiBasicTableSelectionProps = useMemo<EuiTableSelectionType<Case>>(
+    () => ({ onSelectionChange: setSelectedCases }),
+    [selectedCases]
+  );
+  const isCasesLoading = useMemo(
+    () => loading.indexOf('cases') > -1 || loading.indexOf('caseUpdate') > -1,
+    [loading]
+  );
+  const isDataEmpty = useMemo(() => data.total === 0, [data]);
+
+  return (
+    <>
+      {!isEmpty(actionsErrors) && (
+        <CaseCallOut title={ERROR_PUSH_SERVICE_CALLOUT_TITLE} messages={actionsErrors} />
+      )}
+      <CaseHeaderPage title={i18n.PAGE_TITLE}>
+        <EuiFlexGroup alignItems="center" gutterSize="m" responsive={false} wrap={true}>
+          <EuiFlexItem grow={false}>
+            <OpenClosedStats
+              dataTestSubj="openStatsHeader"
+              caseCount={countOpenCases}
+              caseStatus={'open'}
+              isLoading={isCasesStatusLoading}
+            />
+          </EuiFlexItem>
+          <FlexItemDivider grow={false}>
+            <OpenClosedStats
+              dataTestSubj="closedStatsHeader"
+              caseCount={countClosedCases}
+              caseStatus={'closed'}
+              isLoading={isCasesStatusLoading}
+            />
+          </FlexItemDivider>
+          <EuiFlexItem grow={false}>
+            <ConfigureCaseButton
+              label={i18n.CONFIGURE_CASES_BUTTON}
+              isDisabled={!isEmpty(actionsErrors) || !userCanCrud}
+              showToolTip={!isEmpty(actionsErrors)}
+              msgTooltip={!isEmpty(actionsErrors) ? actionsErrors[0].description : <></>}
+              titleTooltip={!isEmpty(actionsErrors) ? actionsErrors[0].title : ''}
+              urlSearch={urlSearch}
+            />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButton
+              isDisabled={!userCanCrud}
+              fill
+              href={getCreateCaseUrl(urlSearch)}
+              iconType="plusInCircle"
+              data-test-subj="createNewCaseBtn"
+            >
+              {i18n.CREATE_TITLE}
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </CaseHeaderPage>
+      {(isCasesLoading || isDeleting || isUpdating) && !isDataEmpty && (
+        <ProgressLoader size="xs" color="accent" className="essentialAnimation" />
+      )}
+      <Panel loading={isCasesLoading}>
+        <CasesTableFilters
+          countClosedCases={data.countClosedCases}
+          countOpenCases={data.countOpenCases}
+          onFilterChanged={onFilterChangedCallback}
+          initial={{
+            search: filterOptions.search,
+            reporters: filterOptions.reporters,
+            tags: filterOptions.tags,
+            status: filterOptions.status,
+          }}
+          setFilterRefetch={setFilterRefetch}
+        />
+        {isCasesLoading && isDataEmpty ? (
+          <Div>
+            <EuiLoadingContent data-test-subj="initialLoadingPanelAllCases" lines={10} />
+          </Div>
+        ) : (
+          <Div>
+            <UtilityBar border>
+              <UtilityBarSection>
+                <UtilityBarGroup>
+                  <UtilityBarText data-test-subj="case-table-case-count">
+                    {i18n.SHOWING_CASES(data.total ?? 0)}
+                  </UtilityBarText>
+                </UtilityBarGroup>
+                <UtilityBarGroup>
+                  <UtilityBarText data-test-subj="case-table-selected-case-count">
+                    {i18n.SHOWING_SELECTED_CASES(selectedCases.length)}
+                  </UtilityBarText>
+                  {userCanCrud && (
+                    <UtilityBarAction
+                      data-test-subj="case-table-bulk-actions"
+                      iconSide="right"
+                      iconType="arrowDown"
+                      popoverContent={getBulkItemsPopoverContent}
+                    >
+                      {i18n.BULK_ACTIONS}
+                    </UtilityBarAction>
+                  )}
+                  <UtilityBarAction iconSide="left" iconType="refresh" onClick={refreshCases}>
+                    {i18n.REFRESH}
+                  </UtilityBarAction>
+                </UtilityBarGroup>
+              </UtilityBarSection>
+            </UtilityBar>
+            <EuiBasicTable
+              columns={memoizedGetCasesColumns}
+              data-test-subj="cases-table"
+              isSelectable={userCanCrud}
+              itemId="id"
+              items={data.cases}
+              noItemsMessage={
+                <EuiEmptyPrompt
+                  title={<h3>{i18n.NO_CASES}</h3>}
+                  titleSize="xs"
+                  body={i18n.NO_CASES_BODY}
+                  actions={
+                    <EuiButton
+                      isDisabled={!userCanCrud}
+                      fill
+                      size="s"
+                      href={getCreateCaseUrl(urlSearch)}
+                      iconType="plusInCircle"
+                    >
+                      {i18n.ADD_NEW_CASE}
+                    </EuiButton>
+                  }
+                />
+              }
+              onChange={tableOnChangeCallback}
+              pagination={memoizedPagination}
+              selection={userCanCrud ? euiBasicTableSelectionProps : {}}
+              sorting={sorting}
+            />
+          </Div>
+        )}
+      </Panel>
+      {confirmDeleteModal}
+    </>
+  );
+});
+
+AllCases.displayName = 'AllCases';
diff --git a/x-pack/plugins/siem/public/pages/case/components/all_cases/table_filters.test.tsx b/x-pack/plugins/siem/public/cases/components/all_cases/table_filters.test.tsx
similarity index 90%
rename from x-pack/plugins/siem/public/pages/case/components/all_cases/table_filters.test.tsx
rename to x-pack/plugins/siem/public/cases/components/all_cases/table_filters.test.tsx
index 21dcc9732440d3..05702e931fc253 100644
--- a/x-pack/plugins/siem/public/pages/case/components/all_cases/table_filters.test.tsx
+++ b/x-pack/plugins/siem/public/cases/components/all_cases/table_filters.test.tsx
@@ -8,14 +8,14 @@ import React from 'react';
 import { mount } from 'enzyme';
 
 import { CasesTableFilters } from './table_filters';
-import { TestProviders } from '../../../../mock';
+import { TestProviders } from '../../../common/mock';
 
-import { useGetTags } from '../../../../containers/case/use_get_tags';
-import { useGetReporters } from '../../../../containers/case/use_get_reporters';
-import { DEFAULT_FILTER_OPTIONS } from '../../../../containers/case/use_get_cases';
-jest.mock('../../../../components/timeline/insert_timeline_popover/use_insert_timeline');
-jest.mock('../../../../containers/case/use_get_reporters');
-jest.mock('../../../../containers/case/use_get_tags');
+import { useGetTags } from '../../containers/use_get_tags';
+import { useGetReporters } from '../../containers/use_get_reporters';
+import { DEFAULT_FILTER_OPTIONS } from '../../containers/use_get_cases';
+jest.mock('../../../timelines/components/timeline/insert_timeline_popover/use_insert_timeline');
+jest.mock('../../containers/use_get_reporters');
+jest.mock('../../containers/use_get_tags');
 
 const onFilterChanged = jest.fn();
 const fetchReporters = jest.fn();
diff --git a/x-pack/plugins/siem/public/pages/case/components/all_cases/table_filters.tsx b/x-pack/plugins/siem/public/cases/components/all_cases/table_filters.tsx
similarity index 94%
rename from x-pack/plugins/siem/public/pages/case/components/all_cases/table_filters.tsx
rename to x-pack/plugins/siem/public/cases/components/all_cases/table_filters.tsx
index 901fb133753e82..55713c201743a1 100644
--- a/x-pack/plugins/siem/public/pages/case/components/all_cases/table_filters.tsx
+++ b/x-pack/plugins/siem/public/cases/components/all_cases/table_filters.tsx
@@ -15,10 +15,10 @@ import {
 } from '@elastic/eui';
 import * as i18n from './translations';
 
-import { FilterOptions } from '../../../../containers/case/types';
-import { useGetTags } from '../../../../containers/case/use_get_tags';
-import { useGetReporters } from '../../../../containers/case/use_get_reporters';
-import { FilterPopover } from '../../../../components/filter_popover';
+import { FilterOptions } from '../../containers/types';
+import { useGetTags } from '../../containers/use_get_tags';
+import { useGetReporters } from '../../containers/use_get_reporters';
+import { FilterPopover } from '../filter_popover';
 
 interface CasesTableFiltersProps {
   countClosedCases: number | null;
diff --git a/x-pack/plugins/siem/public/pages/case/components/all_cases/translations.ts b/x-pack/plugins/siem/public/cases/components/all_cases/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/case/components/all_cases/translations.ts
rename to x-pack/plugins/siem/public/cases/components/all_cases/translations.ts
diff --git a/x-pack/plugins/siem/public/pages/case/components/bulk_actions/index.tsx b/x-pack/plugins/siem/public/cases/components/bulk_actions/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/case/components/bulk_actions/index.tsx
rename to x-pack/plugins/siem/public/cases/components/bulk_actions/index.tsx
diff --git a/x-pack/plugins/siem/public/pages/case/components/bulk_actions/translations.ts b/x-pack/plugins/siem/public/cases/components/bulk_actions/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/case/components/bulk_actions/translations.ts
rename to x-pack/plugins/siem/public/cases/components/bulk_actions/translations.ts
diff --git a/x-pack/plugins/siem/public/pages/case/components/callout/helpers.tsx b/x-pack/plugins/siem/public/cases/components/callout/helpers.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/case/components/callout/helpers.tsx
rename to x-pack/plugins/siem/public/cases/components/callout/helpers.tsx
diff --git a/x-pack/plugins/siem/public/cases/components/callout/index.test.tsx b/x-pack/plugins/siem/public/cases/components/callout/index.test.tsx
new file mode 100644
index 00000000000000..0ab90d8a731264
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/components/callout/index.test.tsx
@@ -0,0 +1,71 @@
+/*
+ * 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 { mount } from 'enzyme';
+
+import { CaseCallOut } from '.';
+
+const defaultProps = {
+  title: 'hey title',
+};
+
+describe('CaseCallOut ', () => {
+  it('Renders single message callout', () => {
+    const props = {
+      ...defaultProps,
+      message: 'we have one message',
+    };
+    const wrapper = mount(<CaseCallOut {...props} />);
+    expect(
+      wrapper
+        .find(`[data-test-subj="callout-message"]`)
+        .last()
+        .exists()
+    ).toBeTruthy();
+    expect(
+      wrapper
+        .find(`[data-test-subj="callout-messages"]`)
+        .last()
+        .exists()
+    ).toBeFalsy();
+  });
+  it('Renders multi message callout', () => {
+    const props = {
+      ...defaultProps,
+      messages: [
+        { ...defaultProps, description: <p>{'we have two messages'}</p> },
+        { ...defaultProps, description: <p>{'for real'}</p> },
+      ],
+    };
+    const wrapper = mount(<CaseCallOut {...props} />);
+    expect(
+      wrapper
+        .find(`[data-test-subj="callout-message"]`)
+        .last()
+        .exists()
+    ).toBeFalsy();
+    expect(
+      wrapper
+        .find(`[data-test-subj="callout-messages"]`)
+        .last()
+        .exists()
+    ).toBeTruthy();
+  });
+  it('Dismisses callout', () => {
+    const props = {
+      ...defaultProps,
+      message: 'we have one message',
+    };
+    const wrapper = mount(<CaseCallOut {...props} />);
+    expect(wrapper.find(`[data-test-subj="case-call-out"]`).exists()).toBeTruthy();
+    wrapper
+      .find(`[data-test-subj="callout-dismiss"]`)
+      .last()
+      .simulate('click');
+    expect(wrapper.find(`[data-test-subj="case-call-out"]`).exists()).toBeFalsy();
+  });
+});
diff --git a/x-pack/plugins/siem/public/pages/case/components/callout/index.tsx b/x-pack/plugins/siem/public/cases/components/callout/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/case/components/callout/index.tsx
rename to x-pack/plugins/siem/public/cases/components/callout/index.tsx
diff --git a/x-pack/plugins/siem/public/pages/case/components/callout/translations.ts b/x-pack/plugins/siem/public/cases/components/callout/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/case/components/callout/translations.ts
rename to x-pack/plugins/siem/public/cases/components/callout/translations.ts
diff --git a/x-pack/plugins/siem/public/cases/components/case_header_page/index.tsx b/x-pack/plugins/siem/public/cases/components/case_header_page/index.tsx
new file mode 100644
index 00000000000000..4c7cfabe757cf0
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/components/case_header_page/index.tsx
@@ -0,0 +1,22 @@
+/*
+ * 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 { HeaderPage, HeaderPageProps } from '../../../common/components/header_page';
+import * as i18n from './translations';
+
+const CaseHeaderPageComponent: React.FC<HeaderPageProps> = props => <HeaderPage {...props} />;
+
+CaseHeaderPageComponent.defaultProps = {
+  badgeOptions: {
+    beta: true,
+    text: i18n.PAGE_BADGE_LABEL,
+    tooltip: i18n.PAGE_BADGE_TOOLTIP,
+  },
+};
+
+export const CaseHeaderPage = React.memo(CaseHeaderPageComponent);
diff --git a/x-pack/plugins/siem/public/pages/case/components/case_header_page/translations.ts b/x-pack/plugins/siem/public/cases/components/case_header_page/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/case/components/case_header_page/translations.ts
rename to x-pack/plugins/siem/public/cases/components/case_header_page/translations.ts
diff --git a/x-pack/plugins/siem/public/cases/components/case_status/index.tsx b/x-pack/plugins/siem/public/cases/components/case_status/index.tsx
new file mode 100644
index 00000000000000..a37c9052c2ff38
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/components/case_status/index.tsx
@@ -0,0 +1,117 @@
+/*
+ * 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 styled, { css } from 'styled-components';
+import {
+  EuiBadge,
+  EuiButtonEmpty,
+  EuiButtonToggle,
+  EuiDescriptionList,
+  EuiDescriptionListDescription,
+  EuiDescriptionListTitle,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '@elastic/eui';
+import * as i18n from '../case_view/translations';
+import { FormattedRelativePreferenceDate } from '../../../common/components/formatted_date';
+import { CaseViewActions } from '../case_view/actions';
+import { Case } from '../../containers/types';
+import { CaseService } from '../../containers/use_get_case_user_actions';
+
+const MyDescriptionList = styled(EuiDescriptionList)`
+  ${({ theme }) => css`
+    & {
+      padding-right: ${theme.eui.euiSizeL};
+      border-right: ${theme.eui.euiBorderThin};
+    }
+  `}
+`;
+
+interface CaseStatusProps {
+  'data-test-subj': string;
+  badgeColor: string;
+  buttonLabel: string;
+  caseData: Case;
+  currentExternalIncident: CaseService | null;
+  disabled?: boolean;
+  icon: string;
+  isLoading: boolean;
+  isSelected: boolean;
+  onRefresh: () => void;
+  status: string;
+  title: string;
+  toggleStatusCase: (evt: unknown) => void;
+  value: string | null;
+}
+const CaseStatusComp: React.FC<CaseStatusProps> = ({
+  'data-test-subj': dataTestSubj,
+  badgeColor,
+  buttonLabel,
+  caseData,
+  currentExternalIncident,
+  disabled = false,
+  icon,
+  isLoading,
+  isSelected,
+  onRefresh,
+  status,
+  title,
+  toggleStatusCase,
+  value,
+}) => (
+  <EuiFlexGroup gutterSize="l" justifyContent="flexEnd">
+    <EuiFlexItem grow={false}>
+      <MyDescriptionList compressed>
+        <EuiFlexGroup>
+          <EuiFlexItem grow={false}>
+            <EuiDescriptionListTitle>{i18n.STATUS}</EuiDescriptionListTitle>
+            <EuiDescriptionListDescription>
+              <EuiBadge color={badgeColor} data-test-subj="case-view-status">
+                {status}
+              </EuiBadge>
+            </EuiDescriptionListDescription>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiDescriptionListTitle>{title}</EuiDescriptionListTitle>
+            <EuiDescriptionListDescription>
+              <FormattedRelativePreferenceDate data-test-subj={dataTestSubj} value={value} />
+            </EuiDescriptionListDescription>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </MyDescriptionList>
+    </EuiFlexItem>
+    <EuiFlexItem grow={false}>
+      <EuiFlexGroup gutterSize="l" alignItems="center">
+        <EuiFlexItem>
+          <EuiButtonEmpty data-test-subj="case-refresh" iconType="refresh" onClick={onRefresh}>
+            {i18n.CASE_REFRESH}
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiButtonToggle
+            data-test-subj="toggle-case-status"
+            isDisabled={disabled}
+            iconType={icon}
+            isLoading={isLoading}
+            isSelected={isSelected}
+            label={buttonLabel}
+            onChange={toggleStatusCase}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <CaseViewActions
+            caseData={caseData}
+            currentExternalIncident={currentExternalIncident}
+            disabled={disabled}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+);
+
+export const CaseStatus = React.memo(CaseStatusComp);
diff --git a/x-pack/plugins/siem/public/cases/components/case_view/actions.test.tsx b/x-pack/plugins/siem/public/cases/components/case_view/actions.test.tsx
new file mode 100644
index 00000000000000..1f8d3230f42a84
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/components/case_view/actions.test.tsx
@@ -0,0 +1,97 @@
+/*
+ * 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 { mount } from 'enzyme';
+
+import { useDeleteCases } from '../../containers/use_delete_cases';
+import { TestProviders } from '../../../common/mock';
+import { basicCase, basicPush } from '../../containers/mock';
+import { CaseViewActions } from './actions';
+import * as i18n from './translations';
+jest.mock('../../containers/use_delete_cases');
+const useDeleteCasesMock = useDeleteCases as jest.Mock;
+
+describe('CaseView actions', () => {
+  const handleOnDeleteConfirm = jest.fn();
+  const handleToggleModal = jest.fn();
+  const dispatchResetIsDeleted = jest.fn();
+  const defaultDeleteState = {
+    dispatchResetIsDeleted,
+    handleToggleModal,
+    handleOnDeleteConfirm,
+    isLoading: false,
+    isError: false,
+    isDeleted: false,
+    isDisplayConfirmDeleteModal: false,
+  };
+  beforeEach(() => {
+    jest.resetAllMocks();
+    useDeleteCasesMock.mockImplementation(() => defaultDeleteState);
+  });
+  it('clicking trash toggles modal', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <CaseViewActions caseData={basicCase} currentExternalIncident={null} />
+      </TestProviders>
+    );
+
+    expect(wrapper.find('[data-test-subj="confirm-delete-case-modal"]').exists()).toBeFalsy();
+
+    wrapper
+      .find('button[data-test-subj="property-actions-ellipses"]')
+      .first()
+      .simulate('click');
+    wrapper.find('button[data-test-subj="property-actions-trash"]').simulate('click');
+    expect(handleToggleModal).toHaveBeenCalled();
+  });
+  it('toggle delete modal and confirm', () => {
+    useDeleteCasesMock.mockImplementation(() => ({
+      ...defaultDeleteState,
+      isDisplayConfirmDeleteModal: true,
+    }));
+    const wrapper = mount(
+      <TestProviders>
+        <CaseViewActions caseData={basicCase} currentExternalIncident={null} />
+      </TestProviders>
+    );
+
+    expect(wrapper.find('[data-test-subj="confirm-delete-case-modal"]').exists()).toBeTruthy();
+    wrapper.find('button[data-test-subj="confirmModalConfirmButton"]').simulate('click');
+    expect(handleOnDeleteConfirm.mock.calls[0][0]).toEqual([
+      { id: basicCase.id, title: basicCase.title },
+    ]);
+  });
+  it('displays active incident link', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <CaseViewActions
+          caseData={basicCase}
+          currentExternalIncident={{
+            ...basicPush,
+            firstPushIndex: 5,
+            lastPushIndex: 5,
+            commentsToUpdate: [],
+            hasDataToPush: false,
+          }}
+        />
+      </TestProviders>
+    );
+
+    expect(wrapper.find('[data-test-subj="confirm-delete-case-modal"]').exists()).toBeFalsy();
+
+    wrapper
+      .find('button[data-test-subj="property-actions-ellipses"]')
+      .first()
+      .simulate('click');
+    expect(
+      wrapper
+        .find('[data-test-subj="property-actions-popout"]')
+        .first()
+        .prop('aria-label')
+    ).toEqual(i18n.VIEW_INCIDENT(basicPush.externalTitle));
+  });
+});
diff --git a/x-pack/plugins/siem/public/cases/components/case_view/actions.tsx b/x-pack/plugins/siem/public/cases/components/case_view/actions.tsx
new file mode 100644
index 00000000000000..cd9318a355e3c7
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/components/case_view/actions.tsx
@@ -0,0 +1,81 @@
+/*
+ * 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 { isEmpty } from 'lodash/fp';
+import React, { useMemo } from 'react';
+import { Redirect } from 'react-router-dom';
+import * as i18n from './translations';
+import { useDeleteCases } from '../../containers/use_delete_cases';
+import { ConfirmDeleteCaseModal } from '../confirm_delete_case';
+import { SiemPageName } from '../../../app/types';
+import { PropertyActions } from '../property_actions';
+import { Case } from '../../containers/types';
+import { CaseService } from '../../containers/use_get_case_user_actions';
+
+interface CaseViewActions {
+  caseData: Case;
+  currentExternalIncident: CaseService | null;
+  disabled?: boolean;
+}
+
+const CaseViewActionsComponent: React.FC<CaseViewActions> = ({
+  caseData,
+  currentExternalIncident,
+  disabled = false,
+}) => {
+  // Delete case
+  const {
+    handleToggleModal,
+    handleOnDeleteConfirm,
+    isDeleted,
+    isDisplayConfirmDeleteModal,
+  } = useDeleteCases();
+
+  const confirmDeleteModal = useMemo(
+    () => (
+      <ConfirmDeleteCaseModal
+        caseTitle={caseData.title}
+        isModalVisible={isDisplayConfirmDeleteModal}
+        isPlural={false}
+        onCancel={handleToggleModal}
+        onConfirm={handleOnDeleteConfirm.bind(null, [{ id: caseData.id, title: caseData.title }])}
+      />
+    ),
+    [isDisplayConfirmDeleteModal, caseData]
+  );
+  const propertyActions = useMemo(
+    () => [
+      {
+        disabled,
+        iconType: 'trash',
+        label: i18n.DELETE_CASE,
+        onClick: handleToggleModal,
+      },
+      ...(currentExternalIncident != null && !isEmpty(currentExternalIncident?.externalUrl)
+        ? [
+            {
+              iconType: 'popout',
+              label: i18n.VIEW_INCIDENT(currentExternalIncident?.externalTitle ?? ''),
+              onClick: () => window.open(currentExternalIncident?.externalUrl, '_blank'),
+            },
+          ]
+        : []),
+    ],
+    [disabled, handleToggleModal, currentExternalIncident]
+  );
+
+  if (isDeleted) {
+    return <Redirect to={`/${SiemPageName.case}`} />;
+  }
+  return (
+    <>
+      <PropertyActions propertyActions={propertyActions} />
+      {confirmDeleteModal}
+    </>
+  );
+};
+
+export const CaseViewActions = React.memo(CaseViewActionsComponent);
diff --git a/x-pack/plugins/siem/public/cases/components/case_view/index.test.tsx b/x-pack/plugins/siem/public/cases/components/case_view/index.test.tsx
new file mode 100644
index 00000000000000..70d2dc97f3f455
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/components/case_view/index.test.tsx
@@ -0,0 +1,432 @@
+/*
+ * 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 { mount } from 'enzyme';
+
+import { Router, routeData, mockHistory, mockLocation } from '../__mock__/router';
+import { CaseComponent, CaseProps, CaseView } from '.';
+import { basicCase, basicCaseClosed, caseUserActions } from '../../containers/mock';
+import { TestProviders } from '../../../common/mock';
+import { useUpdateCase } from '../../containers/use_update_case';
+import { useGetCase } from '../../containers/use_get_case';
+import { useGetCaseUserActions } from '../../containers/use_get_case_user_actions';
+import { wait } from '../../../common/lib/helpers';
+import { usePushToService } from '../use_push_to_service';
+jest.mock('../../containers/use_update_case');
+jest.mock('../../containers/use_get_case_user_actions');
+jest.mock('../../containers/use_get_case');
+jest.mock('../use_push_to_service');
+const useUpdateCaseMock = useUpdateCase as jest.Mock;
+const useGetCaseUserActionsMock = useGetCaseUserActions as jest.Mock;
+const usePushToServiceMock = usePushToService as jest.Mock;
+
+export const caseProps: CaseProps = {
+  caseId: basicCase.id,
+  userCanCrud: true,
+  caseData: basicCase,
+  fetchCase: jest.fn(),
+  updateCase: jest.fn(),
+};
+
+export const caseClosedProps: CaseProps = {
+  ...caseProps,
+  caseData: basicCaseClosed,
+};
+
+describe('CaseView ', () => {
+  const updateCaseProperty = jest.fn();
+  const fetchCaseUserActions = jest.fn();
+  const fetchCase = jest.fn();
+  const updateCase = jest.fn();
+  const data = caseProps.caseData;
+  const defaultGetCase = {
+    isLoading: false,
+    isError: false,
+    data,
+    updateCase,
+    fetchCase,
+  };
+  /* eslint-disable no-console */
+  // Silence until enzyme fixed to use ReactTestUtils.act()
+  const originalError = console.error;
+  beforeAll(() => {
+    console.error = jest.fn();
+  });
+  afterAll(() => {
+    console.error = originalError;
+  });
+  /* eslint-enable no-console */
+
+  const defaultUpdateCaseState = {
+    isLoading: false,
+    isError: false,
+    updateKey: null,
+    updateCaseProperty,
+  };
+
+  const defaultUseGetCaseUserActions = {
+    caseUserActions,
+    caseServices: {},
+    fetchCaseUserActions,
+    firstIndexPushToService: -1,
+    hasDataToPush: false,
+    isLoading: false,
+    isError: false,
+    lastIndexPushToService: -1,
+    participants: [data.createdBy],
+  };
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+    useUpdateCaseMock.mockImplementation(() => defaultUpdateCaseState);
+    jest.spyOn(routeData, 'useLocation').mockReturnValue(mockLocation);
+    useGetCaseUserActionsMock.mockImplementation(() => defaultUseGetCaseUserActions);
+    usePushToServiceMock.mockImplementation(({ updateCase: updateCaseMockCall }) => ({
+      pushButton: (
+        <button
+          data-test-subj="mock-button"
+          onClick={() => updateCaseMockCall(caseProps.caseData)}
+          type="button"
+        >
+          {'Hello Button'}
+        </button>
+      ),
+      pushCallouts: null,
+    }));
+  });
+
+  it('should render CaseComponent', async () => {
+    const wrapper = mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <CaseComponent {...caseProps} />
+        </Router>
+      </TestProviders>
+    );
+    await wait();
+    expect(
+      wrapper
+        .find(`[data-test-subj="case-view-title"]`)
+        .first()
+        .prop('title')
+    ).toEqual(data.title);
+    expect(
+      wrapper
+        .find(`[data-test-subj="case-view-status"]`)
+        .first()
+        .text()
+    ).toEqual(data.status);
+    expect(
+      wrapper
+        .find(`[data-test-subj="case-view-tag-list"] [data-test-subj="case-tag"]`)
+        .first()
+        .text()
+    ).toEqual(data.tags[0]);
+    expect(
+      wrapper
+        .find(`[data-test-subj="case-view-username"]`)
+        .first()
+        .text()
+    ).toEqual(data.createdBy.username);
+    expect(wrapper.contains(`[data-test-subj="case-view-closedAt"]`)).toBe(false);
+    expect(
+      wrapper
+        .find(`[data-test-subj="case-view-createdAt"]`)
+        .first()
+        .prop('value')
+    ).toEqual(data.createdAt);
+    expect(
+      wrapper
+        .find(`[data-test-subj="description-action"] [data-test-subj="user-action-markdown"]`)
+        .first()
+        .prop('raw')
+    ).toEqual(data.description);
+  });
+
+  it('should show closed indicators in header when case is closed', async () => {
+    useUpdateCaseMock.mockImplementation(() => ({
+      ...defaultUpdateCaseState,
+      caseData: basicCaseClosed,
+    }));
+    const wrapper = mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <CaseComponent {...caseClosedProps} />
+        </Router>
+      </TestProviders>
+    );
+    await wait();
+    expect(wrapper.contains(`[data-test-subj="case-view-createdAt"]`)).toBe(false);
+    expect(
+      wrapper
+        .find(`[data-test-subj="case-view-closedAt"]`)
+        .first()
+        .prop('value')
+    ).toEqual(basicCaseClosed.closedAt);
+    expect(
+      wrapper
+        .find(`[data-test-subj="case-view-status"]`)
+        .first()
+        .text()
+    ).toEqual(basicCaseClosed.status);
+  });
+
+  it('should dispatch update state when button is toggled', async () => {
+    const wrapper = mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <CaseComponent {...caseProps} />
+        </Router>
+      </TestProviders>
+    );
+    await wait();
+    wrapper
+      .find('input[data-test-subj="toggle-case-status"]')
+      .simulate('change', { target: { checked: true } });
+    expect(updateCaseProperty).toHaveBeenCalled();
+  });
+
+  it('should display EditableTitle isLoading', () => {
+    useUpdateCaseMock.mockImplementation(() => ({
+      ...defaultUpdateCaseState,
+      isLoading: true,
+      updateKey: 'title',
+    }));
+    const wrapper = mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <CaseComponent {...caseProps} />
+        </Router>
+      </TestProviders>
+    );
+    expect(
+      wrapper
+        .find('[data-test-subj="editable-title-loading"]')
+        .first()
+        .exists()
+    ).toBeTruthy();
+    expect(
+      wrapper
+        .find('[data-test-subj="editable-title-edit-icon"]')
+        .first()
+        .exists()
+    ).toBeFalsy();
+  });
+
+  it('should display Toggle Status isLoading', () => {
+    useUpdateCaseMock.mockImplementation(() => ({
+      ...defaultUpdateCaseState,
+      isLoading: true,
+      updateKey: 'status',
+    }));
+    const wrapper = mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <CaseComponent {...caseProps} />
+        </Router>
+      </TestProviders>
+    );
+    expect(
+      wrapper
+        .find('[data-test-subj="toggle-case-status"]')
+        .first()
+        .prop('isLoading')
+    ).toBeTruthy();
+  });
+
+  it('should display description isLoading', () => {
+    useUpdateCaseMock.mockImplementation(() => ({
+      ...defaultUpdateCaseState,
+      isLoading: true,
+      updateKey: 'description',
+    }));
+    const wrapper = mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <CaseComponent {...caseProps} />
+        </Router>
+      </TestProviders>
+    );
+    expect(
+      wrapper
+        .find('[data-test-subj="description-action"] [data-test-subj="user-action-title-loading"]')
+        .first()
+        .exists()
+    ).toBeTruthy();
+    expect(
+      wrapper
+        .find('[data-test-subj="description-action"] [data-test-subj="property-actions"]')
+        .first()
+        .exists()
+    ).toBeFalsy();
+  });
+
+  it('should display tags isLoading', () => {
+    useUpdateCaseMock.mockImplementation(() => ({
+      ...defaultUpdateCaseState,
+      isLoading: true,
+      updateKey: 'tags',
+    }));
+    const wrapper = mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <CaseComponent {...caseProps} />
+        </Router>
+      </TestProviders>
+    );
+    expect(
+      wrapper
+        .find('[data-test-subj="case-view-tag-list"] [data-test-subj="tag-list-loading"]')
+        .first()
+        .exists()
+    ).toBeTruthy();
+    expect(
+      wrapper
+        .find('[data-test-subj="tag-list-edit"]')
+        .first()
+        .exists()
+    ).toBeFalsy();
+  });
+
+  it('should update title', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <CaseComponent {...caseProps} />
+        </Router>
+      </TestProviders>
+    );
+    const newTitle = 'The new title';
+    wrapper
+      .find(`[data-test-subj="editable-title-edit-icon"]`)
+      .first()
+      .simulate('click');
+    wrapper.update();
+    wrapper
+      .find(`[data-test-subj="editable-title-input-field"]`)
+      .last()
+      .simulate('change', { target: { value: newTitle } });
+
+    wrapper.update();
+    wrapper
+      .find(`[data-test-subj="editable-title-submit-btn"]`)
+      .first()
+      .simulate('click');
+
+    wrapper.update();
+    const updateObject = updateCaseProperty.mock.calls[0][0];
+    expect(updateObject.updateKey).toEqual('title');
+    expect(updateObject.updateValue).toEqual(newTitle);
+  });
+
+  it('should push updates on button click', async () => {
+    useGetCaseUserActionsMock.mockImplementation(() => ({
+      ...defaultUseGetCaseUserActions,
+      hasDataToPush: true,
+    }));
+    const wrapper = mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <CaseComponent {...{ ...caseProps, updateCase }} />
+        </Router>
+      </TestProviders>
+    );
+    expect(
+      wrapper
+        .find('[data-test-subj="has-data-to-push-button"]')
+        .first()
+        .exists()
+    ).toBeTruthy();
+    wrapper
+      .find('[data-test-subj="mock-button"]')
+      .first()
+      .simulate('click');
+    wrapper.update();
+    await wait();
+    expect(updateCase).toBeCalledWith(caseProps.caseData);
+    expect(fetchCaseUserActions).toBeCalledWith(caseProps.caseData.id);
+  });
+
+  it('should return null if error', () => {
+    (useGetCase as jest.Mock).mockImplementation(() => ({
+      ...defaultGetCase,
+      isError: true,
+    }));
+    const wrapper = mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <CaseView
+            {...{
+              caseId: '1234',
+              userCanCrud: true,
+            }}
+          />
+        </Router>
+      </TestProviders>
+    );
+    expect(wrapper).toEqual({});
+  });
+
+  it('should return spinner if loading', () => {
+    (useGetCase as jest.Mock).mockImplementation(() => ({
+      ...defaultGetCase,
+      isLoading: true,
+    }));
+    const wrapper = mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <CaseView
+            {...{
+              caseId: '1234',
+              userCanCrud: true,
+            }}
+          />
+        </Router>
+      </TestProviders>
+    );
+    expect(wrapper.find('[data-test-subj="case-view-loading"]').exists()).toBeTruthy();
+  });
+
+  it('should return case view when data is there', () => {
+    (useGetCase as jest.Mock).mockImplementation(() => defaultGetCase);
+    const wrapper = mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <CaseView
+            {...{
+              caseId: '1234',
+              userCanCrud: true,
+            }}
+          />
+        </Router>
+      </TestProviders>
+    );
+    expect(wrapper.find('[data-test-subj="case-view-title"]').exists()).toBeTruthy();
+  });
+
+  it('should refresh data on refresh', () => {
+    (useGetCase as jest.Mock).mockImplementation(() => defaultGetCase);
+    const wrapper = mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <CaseView
+            {...{
+              caseId: '1234',
+              userCanCrud: true,
+            }}
+          />
+        </Router>
+      </TestProviders>
+    );
+    wrapper
+      .find('[data-test-subj="case-refresh"]')
+      .first()
+      .simulate('click');
+    expect(fetchCaseUserActions).toBeCalledWith(caseProps.caseData.id);
+    expect(fetchCase).toBeCalled();
+  });
+});
diff --git a/x-pack/plugins/siem/public/cases/components/case_view/index.tsx b/x-pack/plugins/siem/public/cases/components/case_view/index.tsx
new file mode 100644
index 00000000000000..d02119580a75ab
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/components/case_view/index.tsx
@@ -0,0 +1,382 @@
+/*
+ * 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 {
+  EuiButtonToggle,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLoadingContent,
+  EuiLoadingSpinner,
+  EuiHorizontalRule,
+} from '@elastic/eui';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import styled from 'styled-components';
+
+import * as i18n from './translations';
+import { Case } from '../../containers/types';
+import { getCaseUrl } from '../../../common/components/link_to';
+import { HeaderPage } from '../../../common/components/header_page';
+import { EditableTitle } from '../../../common/components/header_page/editable_title';
+import { TagList } from '../tag_list';
+import { useGetCase } from '../../containers/use_get_case';
+import { UserActionTree } from '../user_action_tree';
+import { UserList } from '../user_list';
+import { useUpdateCase } from '../../containers/use_update_case';
+import { useGetUrlSearch } from '../../../common/components/navigation/use_get_url_search';
+import { WrapperPage } from '../../../common/components/wrapper_page';
+import { getTypedPayload } from '../../containers/utils';
+import { WhitePageWrapper } from '../wrappers';
+import { useBasePath } from '../../../common/lib/kibana';
+import { CaseStatus } from '../case_status';
+import { navTabs } from '../../../app/home/home_navigations';
+import { SpyRoute } from '../../../common/utils/route/spy_routes';
+import { useGetCaseUserActions } from '../../containers/use_get_case_user_actions';
+import { usePushToService } from '../use_push_to_service';
+import { EditConnector } from '../edit_connector';
+import { useConnectors } from '../../containers/configure/use_connectors';
+
+interface Props {
+  caseId: string;
+  userCanCrud: boolean;
+}
+
+const MyWrapper = styled(WrapperPage)`
+  padding-bottom: 0;
+`;
+
+const MyEuiFlexGroup = styled(EuiFlexGroup)`
+  height: 100%;
+`;
+
+const MyEuiHorizontalRule = styled(EuiHorizontalRule)`
+  margin-left: 48px;
+  &.euiHorizontalRule--full {
+    width: calc(100% - 48px);
+  }
+`;
+
+export interface CaseProps extends Props {
+  fetchCase: () => void;
+  caseData: Case;
+  updateCase: (newCase: Case) => void;
+}
+
+export const CaseComponent = React.memo<CaseProps>(
+  ({ caseId, caseData, fetchCase, updateCase, userCanCrud }) => {
+    const basePath = window.location.origin + useBasePath();
+    const caseLink = `${basePath}/app/siem#/case/${caseId}`;
+    const search = useGetUrlSearch(navTabs.case);
+    const [initLoadingData, setInitLoadingData] = useState(true);
+    const {
+      caseUserActions,
+      fetchCaseUserActions,
+      caseServices,
+      hasDataToPush,
+      isLoading: isLoadingUserActions,
+      participants,
+    } = useGetCaseUserActions(caseId, caseData.connectorId);
+    const { isLoading, updateKey, updateCaseProperty } = useUpdateCase({
+      caseId,
+    });
+
+    // Update Fields
+    const onUpdateField = useCallback(
+      (newUpdateKey: keyof Case, updateValue: Case[keyof Case]) => {
+        const handleUpdateNewCase = (newCase: Case) =>
+          updateCase({ ...newCase, comments: caseData.comments });
+        switch (newUpdateKey) {
+          case 'title':
+            const titleUpdate = getTypedPayload<string>(updateValue);
+            if (titleUpdate.length > 0) {
+              updateCaseProperty({
+                fetchCaseUserActions,
+                updateKey: 'title',
+                updateValue: titleUpdate,
+                updateCase: handleUpdateNewCase,
+                version: caseData.version,
+              });
+            }
+            break;
+          case 'connectorId':
+            const connectorId = getTypedPayload<string>(updateValue);
+            if (connectorId.length > 0) {
+              updateCaseProperty({
+                fetchCaseUserActions,
+                updateKey: 'connector_id',
+                updateValue: connectorId,
+                updateCase: handleUpdateNewCase,
+                version: caseData.version,
+              });
+            }
+            break;
+          case 'description':
+            const descriptionUpdate = getTypedPayload<string>(updateValue);
+            if (descriptionUpdate.length > 0) {
+              updateCaseProperty({
+                fetchCaseUserActions,
+                updateKey: 'description',
+                updateValue: descriptionUpdate,
+                updateCase: handleUpdateNewCase,
+                version: caseData.version,
+              });
+            }
+            break;
+          case 'tags':
+            const tagsUpdate = getTypedPayload<string[]>(updateValue);
+            updateCaseProperty({
+              fetchCaseUserActions,
+              updateKey: 'tags',
+              updateValue: tagsUpdate,
+              updateCase: handleUpdateNewCase,
+              version: caseData.version,
+            });
+            break;
+          case 'status':
+            const statusUpdate = getTypedPayload<string>(updateValue);
+            if (caseData.status !== updateValue) {
+              updateCaseProperty({
+                fetchCaseUserActions,
+                updateKey: 'status',
+                updateValue: statusUpdate,
+                updateCase: handleUpdateNewCase,
+                version: caseData.version,
+              });
+            }
+          default:
+            return null;
+        }
+      },
+      [fetchCaseUserActions, updateCaseProperty, updateCase, caseData]
+    );
+    const handleUpdateCase = useCallback(
+      (newCase: Case) => {
+        updateCase(newCase);
+        fetchCaseUserActions(newCase.id);
+      },
+      [updateCase, fetchCaseUserActions]
+    );
+
+    const { loading: isLoadingConnectors, connectors } = useConnectors();
+    const caseConnectorName = useMemo(
+      () => connectors.find(c => c.id === caseData.connectorId)?.name ?? 'none',
+      [connectors, caseData.connectorId]
+    );
+
+    const currentExternalIncident = useMemo(
+      () =>
+        caseServices != null && caseServices[caseData.connectorId] != null
+          ? caseServices[caseData.connectorId]
+          : null,
+      [caseServices, caseData.connectorId]
+    );
+
+    const { pushButton, pushCallouts } = usePushToService({
+      caseConnectorId: caseData.connectorId,
+      caseConnectorName,
+      caseServices,
+      caseId: caseData.id,
+      caseStatus: caseData.status,
+      connectors,
+      updateCase: handleUpdateCase,
+      userCanCrud,
+    });
+
+    const onSubmitConnector = useCallback(
+      connectorId => onUpdateField('connectorId', connectorId),
+      [onUpdateField]
+    );
+    const onSubmitTags = useCallback(newTags => onUpdateField('tags', newTags), [onUpdateField]);
+    const onSubmitTitle = useCallback(newTitle => onUpdateField('title', newTitle), [
+      onUpdateField,
+    ]);
+    const toggleStatusCase = useCallback(
+      e => onUpdateField('status', e.target.checked ? 'closed' : 'open'),
+      [onUpdateField]
+    );
+    const handleRefresh = useCallback(() => {
+      fetchCaseUserActions(caseData.id);
+      fetchCase();
+    }, [caseData.id, fetchCase, fetchCaseUserActions]);
+
+    const spyState = useMemo(() => ({ caseTitle: caseData.title }), [caseData.title]);
+
+    const caseStatusData = useMemo(
+      () =>
+        caseData.status === 'open'
+          ? {
+              'data-test-subj': 'case-view-createdAt',
+              value: caseData.createdAt,
+              title: i18n.CASE_OPENED,
+              buttonLabel: i18n.CLOSE_CASE,
+              status: caseData.status,
+              icon: 'folderCheck',
+              badgeColor: 'secondary',
+              isSelected: false,
+            }
+          : {
+              'data-test-subj': 'case-view-closedAt',
+              value: caseData.closedAt ?? '',
+              title: i18n.CASE_CLOSED,
+              buttonLabel: i18n.REOPEN_CASE,
+              status: caseData.status,
+              icon: 'folderExclamation',
+              badgeColor: 'danger',
+              isSelected: true,
+            },
+      [caseData.closedAt, caseData.createdAt, caseData.status]
+    );
+    const emailContent = useMemo(
+      () => ({
+        subject: i18n.EMAIL_SUBJECT(caseData.title),
+        body: i18n.EMAIL_BODY(caseLink),
+      }),
+      [caseLink, caseData.title]
+    );
+
+    useEffect(() => {
+      if (initLoadingData && !isLoadingUserActions) {
+        setInitLoadingData(false);
+      }
+    }, [initLoadingData, isLoadingUserActions]);
+
+    return (
+      <>
+        <MyWrapper>
+          <HeaderPage
+            backOptions={{
+              href: getCaseUrl(search),
+              text: i18n.BACK_TO_ALL,
+              dataTestSubj: 'backToCases',
+            }}
+            data-test-subj="case-view-title"
+            titleNode={
+              <EditableTitle
+                disabled={!userCanCrud}
+                isLoading={isLoading && updateKey === 'title'}
+                title={caseData.title}
+                onSubmit={onSubmitTitle}
+              />
+            }
+            title={caseData.title}
+          >
+            <CaseStatus
+              currentExternalIncident={currentExternalIncident}
+              caseData={caseData}
+              disabled={!userCanCrud}
+              isLoading={isLoading && updateKey === 'status'}
+              onRefresh={handleRefresh}
+              toggleStatusCase={toggleStatusCase}
+              {...caseStatusData}
+            />
+          </HeaderPage>
+        </MyWrapper>
+        <WhitePageWrapper>
+          <MyWrapper>
+            {!initLoadingData && pushCallouts != null && pushCallouts}
+            <EuiFlexGroup>
+              <EuiFlexItem grow={6}>
+                {initLoadingData && <EuiLoadingContent lines={8} />}
+                {!initLoadingData && (
+                  <>
+                    <UserActionTree
+                      caseUserActions={caseUserActions}
+                      connectors={connectors}
+                      data={caseData}
+                      fetchUserActions={fetchCaseUserActions.bind(null, caseData.id)}
+                      caseServices={caseServices}
+                      isLoadingDescription={isLoading && updateKey === 'description'}
+                      isLoadingUserActions={isLoadingUserActions}
+                      onUpdateField={onUpdateField}
+                      updateCase={updateCase}
+                      userCanCrud={userCanCrud}
+                    />
+                    <MyEuiHorizontalRule margin="s" />
+                    <EuiFlexGroup alignItems="center" gutterSize="s" justifyContent="flexEnd">
+                      <EuiFlexItem grow={false}>
+                        <EuiButtonToggle
+                          data-test-subj={caseStatusData['data-test-subj']}
+                          iconType={caseStatusData.icon}
+                          isDisabled={!userCanCrud}
+                          isSelected={caseStatusData.isSelected}
+                          isLoading={isLoading && updateKey === 'status'}
+                          label={caseStatusData.buttonLabel}
+                          onChange={toggleStatusCase}
+                        />
+                      </EuiFlexItem>
+                      {hasDataToPush && (
+                        <EuiFlexItem data-test-subj="has-data-to-push-button" grow={false}>
+                          {pushButton}
+                        </EuiFlexItem>
+                      )}
+                    </EuiFlexGroup>
+                  </>
+                )}
+              </EuiFlexItem>
+              <EuiFlexItem grow={2}>
+                <UserList
+                  data-test-subj="case-view-user-list-reporter"
+                  email={emailContent}
+                  headline={i18n.REPORTER}
+                  users={[caseData.createdBy]}
+                />
+                <UserList
+                  data-test-subj="case-view-user-list-participants"
+                  email={emailContent}
+                  headline={i18n.PARTICIPANTS}
+                  loading={isLoadingUserActions}
+                  users={participants}
+                />
+                <TagList
+                  data-test-subj="case-view-tag-list"
+                  disabled={!userCanCrud}
+                  tags={caseData.tags}
+                  onSubmit={onSubmitTags}
+                  isLoading={isLoading && updateKey === 'tags'}
+                />
+                <EditConnector
+                  isLoading={isLoadingConnectors}
+                  onSubmit={onSubmitConnector}
+                  connectors={connectors}
+                  selectedConnector={caseData.connectorId}
+                />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </MyWrapper>
+        </WhitePageWrapper>
+        <SpyRoute state={spyState} />
+      </>
+    );
+  }
+);
+
+export const CaseView = React.memo(({ caseId, userCanCrud }: Props) => {
+  const { data, isLoading, isError, fetchCase, updateCase } = useGetCase(caseId);
+  if (isError) {
+    return null;
+  }
+  if (isLoading) {
+    return (
+      <MyEuiFlexGroup justifyContent="center" alignItems="center">
+        <EuiFlexItem grow={false}>
+          <EuiLoadingSpinner data-test-subj="case-view-loading" size="xl" />
+        </EuiFlexItem>
+      </MyEuiFlexGroup>
+    );
+  }
+
+  return (
+    <CaseComponent
+      caseId={caseId}
+      fetchCase={fetchCase}
+      caseData={data}
+      updateCase={updateCase}
+      userCanCrud={userCanCrud}
+    />
+  );
+});
+
+CaseComponent.displayName = 'CaseComponent';
+CaseView.displayName = 'CaseView';
diff --git a/x-pack/plugins/siem/public/pages/case/components/case_view/translations.ts b/x-pack/plugins/siem/public/cases/components/case_view/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/case/components/case_view/translations.ts
rename to x-pack/plugins/siem/public/cases/components/case_view/translations.ts
diff --git a/x-pack/plugins/siem/public/cases/components/configure_cases/__mock__/index.tsx b/x-pack/plugins/siem/public/cases/components/configure_cases/__mock__/index.tsx
new file mode 100644
index 00000000000000..23c76953a6a0f9
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/components/configure_cases/__mock__/index.tsx
@@ -0,0 +1,55 @@
+/*
+ * 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 { Connector } from '../../../containers/configure/types';
+import { ReturnConnectors } from '../../../containers/configure/use_connectors';
+import { connectorsMock } from '../../../containers/configure/mock';
+import { ReturnUseCaseConfigure } from '../../../containers/configure/use_configure';
+import { createUseKibanaMock } from '../../../../common/mock/kibana_react';
+export { mapping } from '../../../containers/configure/mock';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { actionTypeRegistryMock } from '../../../../../../triggers_actions_ui/public/application/action_type_registry.mock';
+
+export const connectors: Connector[] = connectorsMock;
+
+// x - pack / plugins / triggers_actions_ui;
+export const searchURL =
+  '?timerange=(global:(linkTo:!(),timerange:(from:1585487656371,fromStr:now-24h,kind:relative,to:1585574056371,toStr:now)),timeline:(linkTo:!(),timerange:(from:1585227005527,kind:absolute,to:1585313405527)))';
+
+export const useCaseConfigureResponse: ReturnUseCaseConfigure = {
+  closureType: 'close-by-user',
+  connectorId: 'none',
+  connectorName: 'none',
+  currentConfiguration: {
+    connectorId: 'none',
+    closureType: 'close-by-user',
+    connectorName: 'none',
+  },
+  firstLoad: false,
+  loading: false,
+  mapping: null,
+  persistCaseConfigure: jest.fn(),
+  persistLoading: false,
+  refetchCaseConfigure: jest.fn(),
+  setClosureType: jest.fn(),
+  setConnector: jest.fn(),
+  setCurrentConfiguration: jest.fn(),
+  setMapping: jest.fn(),
+  version: '',
+};
+
+export const useConnectorsResponse: ReturnConnectors = {
+  loading: false,
+  connectors,
+  refetchConnectors: jest.fn(),
+};
+
+export const kibanaMockImplementationArgs = {
+  services: {
+    ...createUseKibanaMock()().services,
+    triggers_actions_ui: { actionTypeRegistry: actionTypeRegistryMock.create() },
+  },
+};
diff --git a/x-pack/plugins/siem/public/pages/case/components/configure_cases/button.test.tsx b/x-pack/plugins/siem/public/cases/components/configure_cases/button.test.tsx
similarity index 98%
rename from x-pack/plugins/siem/public/pages/case/components/configure_cases/button.test.tsx
rename to x-pack/plugins/siem/public/cases/components/configure_cases/button.test.tsx
index cf52fef94ed17e..550b9bd9896a3b 100644
--- a/x-pack/plugins/siem/public/pages/case/components/configure_cases/button.test.tsx
+++ b/x-pack/plugins/siem/public/cases/components/configure_cases/button.test.tsx
@@ -9,7 +9,7 @@ import { ReactWrapper, mount } from 'enzyme';
 import { EuiText } from '@elastic/eui';
 
 import { ConfigureCaseButton, ConfigureCaseButtonProps } from './button';
-import { TestProviders } from '../../../../mock';
+import { TestProviders } from '../../../common/mock';
 import { searchURL } from './__mock__';
 
 describe('Configuration button', () => {
diff --git a/x-pack/plugins/siem/public/pages/case/components/configure_cases/button.tsx b/x-pack/plugins/siem/public/cases/components/configure_cases/button.tsx
similarity index 94%
rename from x-pack/plugins/siem/public/pages/case/components/configure_cases/button.tsx
rename to x-pack/plugins/siem/public/cases/components/configure_cases/button.tsx
index 844ffea28415f6..a6d78d4a2a6202 100644
--- a/x-pack/plugins/siem/public/pages/case/components/configure_cases/button.tsx
+++ b/x-pack/plugins/siem/public/cases/components/configure_cases/button.tsx
@@ -6,7 +6,7 @@
 
 import { EuiButton, EuiToolTip } from '@elastic/eui';
 import React, { memo, useMemo } from 'react';
-import { getConfigureCasesUrl } from '../../../../components/link_to';
+import { getConfigureCasesUrl } from '../../../common/components/link_to';
 
 export interface ConfigureCaseButtonProps {
   label: string;
diff --git a/x-pack/plugins/siem/public/pages/case/components/configure_cases/closure_options.test.tsx b/x-pack/plugins/siem/public/cases/components/configure_cases/closure_options.test.tsx
similarity index 97%
rename from x-pack/plugins/siem/public/pages/case/components/configure_cases/closure_options.test.tsx
rename to x-pack/plugins/siem/public/cases/components/configure_cases/closure_options.test.tsx
index eaef524b13da86..6192fd0ee9fff2 100644
--- a/x-pack/plugins/siem/public/pages/case/components/configure_cases/closure_options.test.tsx
+++ b/x-pack/plugins/siem/public/cases/components/configure_cases/closure_options.test.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 import { mount, ReactWrapper } from 'enzyme';
 
 import { ClosureOptions, ClosureOptionsProps } from './closure_options';
-import { TestProviders } from '../../../../mock';
+import { TestProviders } from '../../../common/mock';
 import { ClosureOptionsRadio } from './closure_options_radio';
 
 describe('ClosureOptions', () => {
diff --git a/x-pack/plugins/siem/public/pages/case/components/configure_cases/closure_options.tsx b/x-pack/plugins/siem/public/cases/components/configure_cases/closure_options.tsx
similarity index 95%
rename from x-pack/plugins/siem/public/pages/case/components/configure_cases/closure_options.tsx
rename to x-pack/plugins/siem/public/cases/components/configure_cases/closure_options.tsx
index 6fa97818dd0ce3..b845b423449ea2 100644
--- a/x-pack/plugins/siem/public/pages/case/components/configure_cases/closure_options.tsx
+++ b/x-pack/plugins/siem/public/cases/components/configure_cases/closure_options.tsx
@@ -7,7 +7,7 @@
 import React from 'react';
 import { EuiDescribedFormGroup, EuiFormRow } from '@elastic/eui';
 
-import { ClosureType } from '../../../../containers/case/configure/types';
+import { ClosureType } from '../../containers/configure/types';
 import { ClosureOptionsRadio } from './closure_options_radio';
 import * as i18n from './translations';
 
diff --git a/x-pack/plugins/siem/public/pages/case/components/configure_cases/closure_options_radio.test.tsx b/x-pack/plugins/siem/public/cases/components/configure_cases/closure_options_radio.test.tsx
similarity index 97%
rename from x-pack/plugins/siem/public/pages/case/components/configure_cases/closure_options_radio.test.tsx
rename to x-pack/plugins/siem/public/cases/components/configure_cases/closure_options_radio.test.tsx
index f2ef2c2d55c288..dae2204bc46653 100644
--- a/x-pack/plugins/siem/public/pages/case/components/configure_cases/closure_options_radio.test.tsx
+++ b/x-pack/plugins/siem/public/cases/components/configure_cases/closure_options_radio.test.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 import { ReactWrapper, mount } from 'enzyme';
 
 import { ClosureOptionsRadio, ClosureOptionsRadioComponentProps } from './closure_options_radio';
-import { TestProviders } from '../../../../mock';
+import { TestProviders } from '../../../common/mock';
 
 describe('ClosureOptionsRadio', () => {
   let wrapper: ReactWrapper;
diff --git a/x-pack/plugins/siem/public/pages/case/components/configure_cases/closure_options_radio.tsx b/x-pack/plugins/siem/public/cases/components/configure_cases/closure_options_radio.tsx
similarity index 95%
rename from x-pack/plugins/siem/public/pages/case/components/configure_cases/closure_options_radio.tsx
rename to x-pack/plugins/siem/public/cases/components/configure_cases/closure_options_radio.tsx
index d2cdb7ecda7ba4..673c8fbcc70d0f 100644
--- a/x-pack/plugins/siem/public/pages/case/components/configure_cases/closure_options_radio.tsx
+++ b/x-pack/plugins/siem/public/cases/components/configure_cases/closure_options_radio.tsx
@@ -7,7 +7,7 @@
 import React, { ReactNode, useCallback } from 'react';
 import { EuiRadioGroup } from '@elastic/eui';
 
-import { ClosureType } from '../../../../containers/case/configure/types';
+import { ClosureType } from '../../containers/configure/types';
 import * as i18n from './translations';
 
 interface ClosureRadios {
diff --git a/x-pack/plugins/siem/public/pages/case/components/configure_cases/connectors.test.tsx b/x-pack/plugins/siem/public/cases/components/configure_cases/connectors.test.tsx
similarity index 98%
rename from x-pack/plugins/siem/public/pages/case/components/configure_cases/connectors.test.tsx
rename to x-pack/plugins/siem/public/cases/components/configure_cases/connectors.test.tsx
index b0271f6849ac58..41cd3e549415d5 100644
--- a/x-pack/plugins/siem/public/pages/case/components/configure_cases/connectors.test.tsx
+++ b/x-pack/plugins/siem/public/cases/components/configure_cases/connectors.test.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 import { mount, ReactWrapper } from 'enzyme';
 
 import { Connectors, Props } from './connectors';
-import { TestProviders } from '../../../../mock';
+import { TestProviders } from '../../../common/mock';
 import { ConnectorsDropdown } from './connectors_dropdown';
 import { connectors } from './__mock__';
 
diff --git a/x-pack/plugins/siem/public/pages/case/components/configure_cases/connectors.tsx b/x-pack/plugins/siem/public/cases/components/configure_cases/connectors.tsx
similarity index 97%
rename from x-pack/plugins/siem/public/pages/case/components/configure_cases/connectors.tsx
rename to x-pack/plugins/siem/public/cases/components/configure_cases/connectors.tsx
index 1b1439d3bac438..3916ce297a0a47 100644
--- a/x-pack/plugins/siem/public/pages/case/components/configure_cases/connectors.tsx
+++ b/x-pack/plugins/siem/public/cases/components/configure_cases/connectors.tsx
@@ -19,7 +19,7 @@ import styled from 'styled-components';
 import { ConnectorsDropdown } from './connectors_dropdown';
 import * as i18n from './translations';
 
-import { Connector } from '../../../../containers/case/configure/types';
+import { Connector } from '../../containers/configure/types';
 
 const EuiFormRowExtended = styled(EuiFormRow)`
   .euiFormRow__labelWrapper {
diff --git a/x-pack/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.test.tsx b/x-pack/plugins/siem/public/cases/components/configure_cases/connectors_dropdown.test.tsx
similarity index 97%
rename from x-pack/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.test.tsx
rename to x-pack/plugins/siem/public/cases/components/configure_cases/connectors_dropdown.test.tsx
index 6abe4f1ac00adb..da20078dde0d01 100644
--- a/x-pack/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.test.tsx
+++ b/x-pack/plugins/siem/public/cases/components/configure_cases/connectors_dropdown.test.tsx
@@ -9,7 +9,7 @@ import { mount, ReactWrapper } from 'enzyme';
 import { EuiSuperSelect } from '@elastic/eui';
 
 import { ConnectorsDropdown, Props } from './connectors_dropdown';
-import { TestProviders } from '../../../../mock';
+import { TestProviders } from '../../../common/mock';
 import { connectors } from './__mock__';
 
 describe('ConnectorsDropdown', () => {
diff --git a/x-pack/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.tsx b/x-pack/plugins/siem/public/cases/components/configure_cases/connectors_dropdown.tsx
similarity index 94%
rename from x-pack/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.tsx
rename to x-pack/plugins/siem/public/cases/components/configure_cases/connectors_dropdown.tsx
index 2f73c8c5dba058..b2b2edb04bd296 100644
--- a/x-pack/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.tsx
+++ b/x-pack/plugins/siem/public/cases/components/configure_cases/connectors_dropdown.tsx
@@ -8,8 +8,8 @@ import React, { useMemo } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiSuperSelect } from '@elastic/eui';
 import styled from 'styled-components';
 
-import { Connector } from '../../../../containers/case/configure/types';
-import { connectorsConfiguration } from '../../../../lib/connectors/config';
+import { Connector } from '../../containers/configure/types';
+import { connectorsConfiguration } from '../../../common/lib/connectors/config';
 import * as i18n from './translations';
 
 export interface Props {
diff --git a/x-pack/plugins/siem/public/pages/case/components/configure_cases/field_mapping.test.tsx b/x-pack/plugins/siem/public/cases/components/configure_cases/field_mapping.test.tsx
similarity index 93%
rename from x-pack/plugins/siem/public/pages/case/components/configure_cases/field_mapping.test.tsx
rename to x-pack/plugins/siem/public/cases/components/configure_cases/field_mapping.test.tsx
index 498757a34b78d2..7f9ad877066939 100644
--- a/x-pack/plugins/siem/public/pages/case/components/configure_cases/field_mapping.test.tsx
+++ b/x-pack/plugins/siem/public/cases/components/configure_cases/field_mapping.test.tsx
@@ -7,13 +7,13 @@
 import React from 'react';
 import { mount, ReactWrapper } from 'enzyme';
 
-import { connectorsConfiguration } from '../../../../lib/connectors/config';
-import { createDefaultMapping } from '../../../../lib/connectors/utils';
+import { connectorsConfiguration } from '../../../common/lib/connectors/config';
+import { createDefaultMapping } from '../../../common/lib/connectors/utils';
 
 import { FieldMapping, FieldMappingProps } from './field_mapping';
 import { mapping } from './__mock__';
 import { FieldMappingRow } from './field_mapping_row';
-import { TestProviders } from '../../../../mock';
+import { TestProviders } from '../../../common/mock';
 
 describe('FieldMappingRow', () => {
   let wrapper: ReactWrapper;
diff --git a/x-pack/plugins/siem/public/pages/case/components/configure_cases/field_mapping.tsx b/x-pack/plugins/siem/public/cases/components/configure_cases/field_mapping.tsx
similarity index 94%
rename from x-pack/plugins/siem/public/pages/case/components/configure_cases/field_mapping.tsx
rename to x-pack/plugins/siem/public/cases/components/configure_cases/field_mapping.tsx
index 41a6fbca3c0072..0eab690915f40a 100644
--- a/x-pack/plugins/siem/public/pages/case/components/configure_cases/field_mapping.tsx
+++ b/x-pack/plugins/siem/public/cases/components/configure_cases/field_mapping.tsx
@@ -13,17 +13,17 @@ import {
   CaseField,
   ActionType,
   ThirdPartyField,
-} from '../../../../containers/case/configure/types';
+} from '../../containers/configure/types';
 import { FieldMappingRow } from './field_mapping_row';
 import * as i18n from './translations';
 
-import { connectorsConfiguration } from '../../../../lib/connectors/config';
+import { connectorsConfiguration } from '../../../common/lib/connectors/config';
 import { setActionTypeToMapping, setThirdPartyToMapping } from './utils';
 import {
   ThirdPartyField as ConnectorConfigurationThirdPartyField,
   AllThirdPartyFields,
-} from '../../../../lib/connectors/types';
-import { createDefaultMapping } from '../../../../lib/connectors/utils';
+} from '../../../common/lib/connectors/types';
+import { createDefaultMapping } from '../../../common/lib/connectors/utils';
 
 const FieldRowWrapper = styled.div`
   margin-top: 8px;
diff --git a/x-pack/plugins/siem/public/pages/case/components/configure_cases/field_mapping_row.test.tsx b/x-pack/plugins/siem/public/cases/components/configure_cases/field_mapping_row.test.tsx
similarity index 95%
rename from x-pack/plugins/siem/public/pages/case/components/configure_cases/field_mapping_row.test.tsx
rename to x-pack/plugins/siem/public/cases/components/configure_cases/field_mapping_row.test.tsx
index e30096cc7eb62a..4d0401fdf1bfd7 100644
--- a/x-pack/plugins/siem/public/pages/case/components/configure_cases/field_mapping_row.test.tsx
+++ b/x-pack/plugins/siem/public/cases/components/configure_cases/field_mapping_row.test.tsx
@@ -9,8 +9,8 @@ import { mount, ReactWrapper } from 'enzyme';
 import { EuiSuperSelectOption, EuiSuperSelect } from '@elastic/eui';
 
 import { FieldMappingRow, RowProps } from './field_mapping_row';
-import { TestProviders } from '../../../../mock';
-import { ThirdPartyField, ActionType } from '../../../../containers/case/configure/types';
+import { TestProviders } from '../../../common/mock';
+import { ThirdPartyField, ActionType } from '../../containers/configure/types';
 
 const thirdPartyOptions: Array<EuiSuperSelectOption<ThirdPartyField>> = [
   {
diff --git a/x-pack/plugins/siem/public/pages/case/components/configure_cases/field_mapping_row.tsx b/x-pack/plugins/siem/public/cases/components/configure_cases/field_mapping_row.tsx
similarity index 92%
rename from x-pack/plugins/siem/public/pages/case/components/configure_cases/field_mapping_row.tsx
rename to x-pack/plugins/siem/public/cases/components/configure_cases/field_mapping_row.tsx
index 687b0517326eb0..922ea7222efce3 100644
--- a/x-pack/plugins/siem/public/pages/case/components/configure_cases/field_mapping_row.tsx
+++ b/x-pack/plugins/siem/public/cases/components/configure_cases/field_mapping_row.tsx
@@ -14,13 +14,8 @@ import {
 } from '@elastic/eui';
 
 import { capitalize } from 'lodash/fp';
-
-import {
-  CaseField,
-  ActionType,
-  ThirdPartyField,
-} from '../../../../containers/case/configure/types';
-import { AllThirdPartyFields } from '../../../../lib/connectors/types';
+import { CaseField, ActionType, ThirdPartyField } from '../../containers/configure/types';
+import { AllThirdPartyFields } from '../../../common/lib/connectors/types';
 
 export interface RowProps {
   id: string;
diff --git a/x-pack/plugins/siem/public/cases/components/configure_cases/index.test.tsx b/x-pack/plugins/siem/public/cases/components/configure_cases/index.test.tsx
new file mode 100644
index 00000000000000..fcacb6dedff7d1
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/components/configure_cases/index.test.tsx
@@ -0,0 +1,860 @@
+/*
+ * 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 { ReactWrapper, mount } from 'enzyme';
+
+import { ConfigureCases } from '.';
+import { TestProviders } from '../../../common/mock';
+import { Connectors } from './connectors';
+import { ClosureOptions } from './closure_options';
+import {
+  ActionsConnectorsContextProvider,
+  ConnectorAddFlyout,
+  ConnectorEditFlyout,
+} from '../../../../../triggers_actions_ui/public';
+
+import { useKibana } from '../../../common/lib/kibana';
+import { useConnectors } from '../../containers/configure/use_connectors';
+import { useCaseConfigure } from '../../containers/configure/use_configure';
+import { useGetUrlSearch } from '../../../common/components/navigation/use_get_url_search';
+
+import {
+  connectors,
+  searchURL,
+  useCaseConfigureResponse,
+  useConnectorsResponse,
+  kibanaMockImplementationArgs,
+} from './__mock__';
+
+jest.mock('../../../common/lib/kibana');
+jest.mock('../../containers/configure/use_connectors');
+jest.mock('../../containers/configure/use_configure');
+jest.mock('../../../common/components/navigation/use_get_url_search');
+
+const useKibanaMock = useKibana as jest.Mock;
+const useConnectorsMock = useConnectors as jest.Mock;
+const useCaseConfigureMock = useCaseConfigure as jest.Mock;
+const useGetUrlSearchMock = useGetUrlSearch as jest.Mock;
+describe('ConfigureCases', () => {
+  describe('rendering', () => {
+    let wrapper: ReactWrapper;
+    beforeEach(() => {
+      jest.resetAllMocks();
+      useCaseConfigureMock.mockImplementation(() => useCaseConfigureResponse);
+      useConnectorsMock.mockImplementation(() => ({ ...useConnectorsResponse, connectors: [] }));
+      useKibanaMock.mockImplementation(() => kibanaMockImplementationArgs);
+      useGetUrlSearchMock.mockImplementation(() => searchURL);
+
+      wrapper = mount(<ConfigureCases userCanCrud />, { wrappingComponent: TestProviders });
+    });
+
+    test('it renders the Connectors', () => {
+      expect(wrapper.find('[data-test-subj="dropdown-connectors"]').exists()).toBeTruthy();
+    });
+
+    test('it renders the ClosureType', () => {
+      expect(wrapper.find('[data-test-subj="closure-options-radio-group"]').exists()).toBeTruthy();
+    });
+
+    test('it renders the ActionsConnectorsContextProvider', () => {
+      // Components from triggers_actions_ui do not have a data-test-subj
+      expect(wrapper.find(ActionsConnectorsContextProvider).exists()).toBeTruthy();
+    });
+
+    test('it renders the ConnectorAddFlyout', () => {
+      // Components from triggers_actions_ui do not have a data-test-subj
+      expect(wrapper.find(ConnectorAddFlyout).exists()).toBeTruthy();
+    });
+
+    test('it does NOT render the ConnectorEditFlyout', () => {
+      // Components from triggers_actions_ui do not have a data-test-subj
+      expect(wrapper.find(ConnectorEditFlyout).exists()).toBeFalsy();
+    });
+
+    test('it does NOT render the EuiCallOut', () => {
+      expect(
+        wrapper.find('[data-test-subj="configure-cases-warning-callout"]').exists()
+      ).toBeFalsy();
+    });
+
+    test('it does NOT render the EuiBottomBar', () => {
+      expect(
+        wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists()
+      ).toBeFalsy();
+    });
+
+    test('it disables correctly ClosureOptions when the connector is set to none', () => {
+      expect(wrapper.find(ClosureOptions).prop('disabled')).toBe(true);
+    });
+  });
+
+  describe('Unhappy path', () => {
+    let wrapper: ReactWrapper;
+    beforeEach(() => {
+      jest.resetAllMocks();
+      useCaseConfigureMock.mockImplementation(() => ({
+        ...useCaseConfigureResponse,
+        closureType: 'close-by-user',
+        connectorId: 'not-id',
+        connectorName: 'unchanged',
+        currentConfiguration: {
+          connectorName: 'unchanged',
+          connectorId: 'not-id',
+          closureType: 'close-by-user',
+        },
+      }));
+      useConnectorsMock.mockImplementation(() => ({ ...useConnectorsResponse, connectors: [] }));
+      useKibanaMock.mockImplementation(() => kibanaMockImplementationArgs);
+      useGetUrlSearchMock.mockImplementation(() => searchURL);
+      wrapper = mount(<ConfigureCases userCanCrud />, { wrappingComponent: TestProviders });
+    });
+
+    test('it shows the warning callout when configuration is invalid', () => {
+      expect(
+        wrapper.find('[data-test-subj="configure-cases-warning-callout"]').exists()
+      ).toBeTruthy();
+    });
+
+    test('it hides the update connector button when the connectorId is invalid', () => {
+      expect(
+        wrapper
+          .find('button[data-test-subj="case-configure-update-selected-connector-button"]')
+          .exists()
+      ).toBeFalsy();
+    });
+  });
+
+  describe('Happy path', () => {
+    let wrapper: ReactWrapper;
+
+    beforeEach(() => {
+      jest.resetAllMocks();
+      useCaseConfigureMock.mockImplementation(() => ({
+        ...useCaseConfigureResponse,
+        mapping: connectors[0].config.casesConfiguration.mapping,
+        closureType: 'close-by-user',
+        connectorId: 'servicenow-1',
+        connectorName: 'unchanged',
+        currentConfiguration: {
+          connectorName: 'unchanged',
+          connectorId: 'servicenow-1',
+          closureType: 'close-by-user',
+        },
+      }));
+      useConnectorsMock.mockImplementation(() => useConnectorsResponse);
+      useKibanaMock.mockImplementation(() => kibanaMockImplementationArgs);
+      useGetUrlSearchMock.mockImplementation(() => searchURL);
+
+      wrapper = mount(<ConfigureCases userCanCrud />, { wrappingComponent: TestProviders });
+    });
+
+    test('it renders the ConnectorEditFlyout', () => {
+      expect(wrapper.find(ConnectorEditFlyout).exists()).toBeTruthy();
+    });
+
+    test('it renders with correct props', () => {
+      // Connector
+      expect(wrapper.find(Connectors).prop('connectors')).toEqual(connectors);
+      expect(wrapper.find(Connectors).prop('disabled')).toBe(false);
+      expect(wrapper.find(Connectors).prop('isLoading')).toBe(false);
+      expect(wrapper.find(Connectors).prop('selectedConnector')).toBe('servicenow-1');
+
+      // ClosureOptions
+      expect(wrapper.find(ClosureOptions).prop('disabled')).toBe(false);
+      expect(wrapper.find(ClosureOptions).prop('closureTypeSelected')).toBe('close-by-user');
+
+      // Flyouts
+      expect(wrapper.find(ConnectorAddFlyout).prop('addFlyoutVisible')).toBe(false);
+      expect(wrapper.find(ConnectorAddFlyout).prop('actionTypes')).toEqual([
+        expect.objectContaining({
+          id: '.servicenow',
+        }),
+        expect.objectContaining({
+          id: '.jira',
+        }),
+      ]);
+
+      expect(wrapper.find(ConnectorEditFlyout).prop('editFlyoutVisible')).toBe(false);
+      expect(wrapper.find(ConnectorEditFlyout).prop('initialConnector')).toEqual(connectors[0]);
+    });
+
+    test('it does not shows the action bar when there is no change', () => {
+      expect(
+        wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists()
+      ).toBeFalsy();
+    });
+
+    test('it disables correctly when the user cannot crud', () => {
+      const newWrapper = mount(<ConfigureCases userCanCrud={false} />, {
+        wrappingComponent: TestProviders,
+      });
+
+      expect(newWrapper.find('button[data-test-subj="dropdown-connectors"]').prop('disabled')).toBe(
+        true
+      );
+
+      expect(
+        newWrapper
+          .find('button[data-test-subj="case-configure-add-connector-button"]')
+          .prop('disabled')
+      ).toBe(true);
+
+      expect(
+        newWrapper
+          .find('button[data-test-subj="case-configure-update-selected-connector-button"]')
+          .prop('disabled')
+      ).toBe(true);
+
+      // Two closure options
+      expect(
+        newWrapper
+          .find('[data-test-subj="closure-options-radio-group"] input')
+          .first()
+          .prop('disabled')
+      ).toBe(true);
+
+      expect(
+        newWrapper
+          .find('[data-test-subj="closure-options-radio-group"] input')
+          .at(1)
+          .prop('disabled')
+      ).toBe(true);
+    });
+  });
+
+  describe('loading connectors', () => {
+    let wrapper: ReactWrapper;
+
+    beforeEach(() => {
+      jest.resetAllMocks();
+      jest.restoreAllMocks();
+      jest.clearAllMocks();
+      useCaseConfigureMock.mockImplementation(() => ({
+        ...useCaseConfigureResponse,
+        mapping: connectors[1].config.casesConfiguration.mapping,
+        closureType: 'close-by-user',
+        connectorId: 'servicenow-2',
+        connectorName: 'unchanged',
+        currentConfiguration: {
+          connectorName: 'unchanged',
+          connectorId: 'servicenow-1',
+          closureType: 'close-by-user',
+        },
+      }));
+      useConnectorsMock.mockImplementation(() => ({
+        ...useConnectorsResponse,
+        loading: true,
+      }));
+      useKibanaMock.mockImplementation(() => kibanaMockImplementationArgs);
+      useGetUrlSearchMock.mockImplementation(() => searchURL);
+      wrapper = mount(<ConfigureCases userCanCrud />, { wrappingComponent: TestProviders });
+    });
+
+    test('it disables correctly Connector when loading connectors', () => {
+      expect(
+        wrapper.find('button[data-test-subj="dropdown-connectors"]').prop('disabled')
+      ).toBeTruthy();
+    });
+
+    test('it pass the correct value to isLoading attribute on Connector', () => {
+      expect(wrapper.find(Connectors).prop('isLoading')).toBe(true);
+    });
+
+    test('it disables correctly ClosureOptions when loading connectors', () => {
+      expect(wrapper.find(ClosureOptions).prop('disabled')).toBe(true);
+    });
+
+    test('it hides the update connector button when loading the connectors', () => {
+      expect(
+        wrapper
+          .find('button[data-test-subj="case-configure-update-selected-connector-button"]')
+          .prop('disabled')
+      ).toBe(true);
+    });
+
+    test('it disables the buttons of action bar when loading connectors', () => {
+      const newWrapper = mount(<ConfigureCases userCanCrud />, {
+        wrappingComponent: TestProviders,
+      });
+
+      expect(
+        newWrapper
+          .find('button[data-test-subj="case-configure-action-bottom-bar-cancel-button"]')
+          .first()
+          .prop('disabled')
+      ).toBe(true);
+
+      expect(
+        newWrapper
+          .find('button[data-test-subj="case-configure-action-bottom-bar-save-button"]')
+          .first()
+          .prop('disabled')
+      ).toBe(true);
+    });
+  });
+
+  describe('saving configuration', () => {
+    let wrapper: ReactWrapper;
+
+    beforeEach(() => {
+      jest.resetAllMocks();
+      useCaseConfigureMock.mockImplementation(() => ({
+        ...useCaseConfigureResponse,
+        connectorId: 'servicenow-1',
+        persistLoading: true,
+      }));
+
+      useConnectorsMock.mockImplementation(() => useConnectorsResponse);
+      useKibanaMock.mockImplementation(() => kibanaMockImplementationArgs);
+      useGetUrlSearchMock.mockImplementation(() => searchURL);
+      wrapper = mount(<ConfigureCases userCanCrud />, { wrappingComponent: TestProviders });
+    });
+
+    test('it disables correctly Connector when saving configuration', () => {
+      expect(wrapper.find(Connectors).prop('disabled')).toBe(true);
+    });
+
+    test('it disables correctly ClosureOptions when saving configuration', () => {
+      expect(
+        wrapper
+          .find('[data-test-subj="closure-options-radio-group"] input')
+          .first()
+          .prop('disabled')
+      ).toBe(true);
+
+      expect(
+        wrapper
+          .find('[data-test-subj="closure-options-radio-group"] input')
+          .at(1)
+          .prop('disabled')
+      ).toBe(true);
+    });
+
+    test('it disables the update connector button when saving the configuration', () => {
+      expect(
+        wrapper
+          .find('button[data-test-subj="case-configure-update-selected-connector-button"]')
+          .prop('disabled')
+      ).toBe(true);
+    });
+
+    test('it disables the buttons of action bar when saving configuration', () => {
+      useCaseConfigureMock.mockImplementation(() => ({
+        ...useCaseConfigureResponse,
+        mapping: connectors[1].config.casesConfiguration.mapping,
+        closureType: 'close-by-user',
+        connectorId: 'servicenow-2',
+        connectorName: 'unchanged',
+        currentConfiguration: {
+          connectorName: 'unchanged',
+          connectorId: 'servicenow-1',
+          closureType: 'close-by-user',
+        },
+        persistLoading: true,
+      }));
+
+      const newWrapper = mount(<ConfigureCases userCanCrud />, {
+        wrappingComponent: TestProviders,
+      });
+
+      expect(
+        newWrapper
+          .find('[data-test-subj="case-configure-action-bottom-bar-cancel-button"]')
+          .first()
+          .prop('isDisabled')
+      ).toBe(true);
+
+      expect(
+        newWrapper
+          .find('[data-test-subj="case-configure-action-bottom-bar-save-button"]')
+          .first()
+          .prop('isDisabled')
+      ).toBe(true);
+    });
+
+    test('it shows the loading spinner when saving configuration', () => {
+      useCaseConfigureMock.mockImplementation(() => ({
+        ...useCaseConfigureResponse,
+        mapping: connectors[1].config.casesConfiguration.mapping,
+        closureType: 'close-by-user',
+        connectorId: 'servicenow-2',
+        connectorName: 'unchanged',
+        currentConfiguration: {
+          connectorName: 'unchanged',
+          connectorId: 'servicenow-1',
+          closureType: 'close-by-user',
+        },
+        persistLoading: true,
+      }));
+
+      const newWrapper = mount(<ConfigureCases userCanCrud />, {
+        wrappingComponent: TestProviders,
+      });
+
+      expect(
+        newWrapper
+          .find('[data-test-subj="case-configure-action-bottom-bar-cancel-button"]')
+          .first()
+          .prop('isLoading')
+      ).toBe(true);
+
+      expect(
+        newWrapper
+          .find('[data-test-subj="case-configure-action-bottom-bar-save-button"]')
+          .first()
+          .prop('isLoading')
+      ).toBe(true);
+    });
+  });
+
+  describe('loading configuration', () => {
+    let wrapper: ReactWrapper;
+
+    beforeEach(() => {
+      jest.resetAllMocks();
+      useCaseConfigureMock.mockImplementation(() => ({
+        ...useCaseConfigureResponse,
+        loading: true,
+      }));
+      useConnectorsMock.mockImplementation(() => ({
+        ...useConnectorsResponse,
+      }));
+      useKibanaMock.mockImplementation(() => kibanaMockImplementationArgs);
+      useGetUrlSearchMock.mockImplementation(() => searchURL);
+      wrapper = mount(<ConfigureCases userCanCrud />, { wrappingComponent: TestProviders });
+    });
+
+    test('it hides the update connector button when loading the configuration', () => {
+      expect(
+        wrapper
+          .find('button[data-test-subj="case-configure-update-selected-connector-button"]')
+          .exists()
+      ).toBeFalsy();
+    });
+  });
+
+  describe('update connector', () => {
+    let wrapper: ReactWrapper;
+    const persistCaseConfigure = jest.fn();
+
+    beforeEach(() => {
+      jest.resetAllMocks();
+      useCaseConfigureMock.mockImplementation(() => ({
+        ...useCaseConfigureResponse,
+        mapping: connectors[1].config.casesConfiguration.mapping,
+        closureType: 'close-by-user',
+        connectorId: 'servicenow-2',
+        connectorName: 'unchanged',
+        currentConfiguration: {
+          connectorName: 'unchanged',
+          connectorId: 'servicenow-1',
+          closureType: 'close-by-user',
+        },
+        persistCaseConfigure,
+      }));
+      useConnectorsMock.mockImplementation(() => useConnectorsResponse);
+      useKibanaMock.mockImplementation(() => kibanaMockImplementationArgs);
+      useGetUrlSearchMock.mockImplementation(() => searchURL);
+
+      wrapper = mount(<ConfigureCases userCanCrud />, { wrappingComponent: TestProviders });
+    });
+
+    test('it submits the configuration correctly', () => {
+      wrapper
+        .find('[data-test-subj="case-configure-action-bottom-bar-save-button"]')
+        .first()
+        .simulate('click');
+
+      wrapper.update();
+
+      expect(persistCaseConfigure).toHaveBeenCalled();
+      expect(persistCaseConfigure).toHaveBeenCalledWith({
+        connectorId: 'servicenow-2',
+        connectorName: 'My Connector 2',
+        closureType: 'close-by-user',
+      });
+    });
+
+    test('it has the correct url on cancel button', () => {
+      expect(
+        wrapper
+          .find('[data-test-subj="case-configure-action-bottom-bar-cancel-button"]')
+          .first()
+          .prop('href')
+      ).toBe(`#/link-to/case${searchURL}`);
+    });
+
+    test('it disables the buttons of action bar when loading configuration', () => {
+      useCaseConfigureMock.mockImplementation(() => ({
+        ...useCaseConfigureResponse,
+        mapping: connectors[1].config.casesConfiguration.mapping,
+        closureType: 'close-by-user',
+        connectorId: 'servicenow-2',
+        connectorName: 'unchanged',
+        currentConfiguration: {
+          connectorName: 'unchanged',
+          connectorId: 'servicenow-1',
+          closureType: 'close-by-user',
+        },
+        loading: true,
+      }));
+      const newWrapper = mount(<ConfigureCases userCanCrud />, {
+        wrappingComponent: TestProviders,
+      });
+
+      expect(
+        newWrapper
+          .find('[data-test-subj="case-configure-action-bottom-bar-cancel-button"]')
+          .first()
+          .prop('isDisabled')
+      ).toBe(true);
+
+      expect(
+        newWrapper
+          .find('[data-test-subj="case-configure-action-bottom-bar-save-button"]')
+          .first()
+          .prop('isDisabled')
+      ).toBe(true);
+    });
+  });
+
+  describe('user interactions', () => {
+    beforeEach(() => {
+      jest.resetAllMocks();
+      useCaseConfigureMock.mockImplementation(() => ({
+        ...useCaseConfigureResponse,
+        mapping: connectors[1].config.casesConfiguration.mapping,
+        closureType: 'close-by-user',
+        connectorId: 'servicenow-2',
+        connectorName: 'unchanged',
+        currentConfiguration: {
+          connectorName: 'unchanged',
+          connectorId: 'servicenow-2',
+          closureType: 'close-by-user',
+        },
+      }));
+      useConnectorsMock.mockImplementation(() => useConnectorsResponse);
+      useKibanaMock.mockImplementation(() => kibanaMockImplementationArgs);
+      useGetUrlSearchMock.mockImplementation(() => searchURL);
+    });
+
+    test('it show the add flyout when pressing the add connector button', () => {
+      const wrapper = mount(<ConfigureCases userCanCrud />, { wrappingComponent: TestProviders });
+      wrapper
+        .find('button[data-test-subj="case-configure-add-connector-button"]')
+        .simulate('click');
+      wrapper.update();
+
+      expect(wrapper.find(ConnectorAddFlyout).prop('addFlyoutVisible')).toBe(true);
+      expect(
+        wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists()
+      ).toBeFalsy();
+    });
+
+    test('it show the edit flyout when pressing the update connector button', () => {
+      const wrapper = mount(<ConfigureCases userCanCrud />, { wrappingComponent: TestProviders });
+      wrapper
+        .find('button[data-test-subj="case-configure-update-selected-connector-button"]')
+        .simulate('click');
+      wrapper.update();
+
+      expect(wrapper.find(ConnectorEditFlyout).prop('editFlyoutVisible')).toBe(true);
+      expect(
+        wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists()
+      ).toBeFalsy();
+    });
+
+    test('it tracks the changes successfully', () => {
+      useCaseConfigureMock.mockImplementation(() => ({
+        ...useCaseConfigureResponse,
+        mapping: connectors[1].config.casesConfiguration.mapping,
+        closureType: 'close-by-user',
+        connectorId: 'servicenow-2',
+        connectorName: 'unchanged',
+        currentConfiguration: {
+          connectorName: 'unchanged',
+          connectorId: 'servicenow-1',
+          closureType: 'close-by-pushing',
+        },
+      }));
+      const wrapper = mount(<ConfigureCases userCanCrud />, { wrappingComponent: TestProviders });
+      wrapper.find('button[data-test-subj="dropdown-connectors"]').simulate('click');
+      wrapper.update();
+      wrapper.find('button[data-test-subj="dropdown-connector-servicenow-2"]').simulate('click');
+      wrapper.update();
+      wrapper.find('input[id="close-by-pushing"]').simulate('change');
+      wrapper.update();
+
+      expect(
+        wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists()
+      ).toBeTruthy();
+      expect(
+        wrapper
+          .find('[data-test-subj="case-configure-action-bottom-bar-total-changes"]')
+          .first()
+          .text()
+      ).toBe('2 unsaved changes');
+    });
+
+    test('it tracks the changes successfully when name changes', () => {
+      useCaseConfigureMock.mockImplementation(() => ({
+        ...useCaseConfigureResponse,
+        mapping: connectors[1].config.casesConfiguration.mapping,
+        closureType: 'close-by-user',
+        connectorId: 'servicenow-2',
+        connectorName: 'nameChange',
+        currentConfiguration: {
+          connectorId: 'servicenow-1',
+          closureType: 'close-by-pushing',
+          connectorName: 'before',
+        },
+      }));
+
+      const wrapper = mount(<ConfigureCases userCanCrud />, { wrappingComponent: TestProviders });
+      wrapper.find('button[data-test-subj="dropdown-connectors"]').simulate('click');
+      wrapper.update();
+      wrapper.find('button[data-test-subj="dropdown-connector-servicenow-2"]').simulate('click');
+      wrapper.update();
+      wrapper.find('input[id="close-by-pushing"]').simulate('change');
+      wrapper.update();
+
+      expect(
+        wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists()
+      ).toBeTruthy();
+      expect(
+        wrapper
+          .find('[data-test-subj="case-configure-action-bottom-bar-total-changes"]')
+          .first()
+          .text()
+      ).toBe('2 unsaved changes');
+    });
+
+    test('it tracks and reverts the changes successfully ', () => {
+      const wrapper = mount(<ConfigureCases userCanCrud />, { wrappingComponent: TestProviders });
+      // change settings
+      wrapper.find('button[data-test-subj="dropdown-connectors"]').simulate('click');
+      wrapper.update();
+      wrapper.find('button[data-test-subj="dropdown-connector-servicenow-2"]').simulate('click');
+      wrapper.update();
+      wrapper.find('input[id="close-by-pushing"]').simulate('change');
+      wrapper.update();
+
+      // revert back to initial settings
+      wrapper.find('button[data-test-subj="dropdown-connectors"]').simulate('click');
+      wrapper.update();
+      wrapper.find('button[data-test-subj="dropdown-connector-servicenow-1"]').simulate('click');
+      wrapper.update();
+      wrapper.find('input[id="close-by-user"]').simulate('change');
+      wrapper.update();
+
+      expect(
+        wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists()
+      ).toBeFalsy();
+    });
+
+    test('it close and restores the action bar when the add connector button is pressed', () => {
+      useCaseConfigureMock
+        .mockImplementationOnce(() => ({
+          ...useCaseConfigureResponse,
+          mapping: connectors[1].config.casesConfiguration.mapping,
+          closureType: 'close-by-user',
+          connectorId: 'servicenow-2',
+          currentConfiguration: { connectorId: 'servicenow-2', closureType: 'close-by-user' },
+        }))
+        .mockImplementation(() => ({
+          ...useCaseConfigureResponse,
+          mapping: connectors[1].config.casesConfiguration.mapping,
+          closureType: 'close-by-pushing',
+          connectorId: 'servicenow-2',
+          currentConfiguration: { connectorId: 'servicenow-2', closureType: 'close-by-user' },
+        }));
+      const wrapper = mount(<ConfigureCases userCanCrud />, { wrappingComponent: TestProviders });
+      // Change closure type
+      wrapper.find('input[id="close-by-pushing"]').simulate('change');
+      wrapper.update();
+
+      expect(
+        wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists()
+      ).toBeTruthy();
+
+      // Press add connector button
+      wrapper
+        .find('button[data-test-subj="case-configure-add-connector-button"]')
+        .simulate('click');
+      wrapper.update();
+
+      expect(
+        wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists()
+      ).toBeFalsy();
+
+      expect(wrapper.find(ConnectorAddFlyout).prop('addFlyoutVisible')).toBe(true);
+
+      // Close the add flyout
+      wrapper.find('button[data-test-subj="euiFlyoutCloseButton"]').simulate('click');
+      wrapper.update();
+
+      expect(
+        wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists()
+      ).toBeTruthy();
+
+      expect(wrapper.find(ConnectorAddFlyout).prop('addFlyoutVisible')).toBe(false);
+
+      expect(
+        wrapper
+          .find('[data-test-subj="case-configure-action-bottom-bar-total-changes"]')
+          .first()
+          .text()
+      ).toBe('1 unsaved changes');
+    });
+
+    test('it close and restores the action bar when the update connector button is pressed', () => {
+      useCaseConfigureMock
+        .mockImplementationOnce(() => ({
+          ...useCaseConfigureResponse,
+          mapping: connectors[1].config.casesConfiguration.mapping,
+          closureType: 'close-by-user',
+          connectorId: 'servicenow-2',
+          currentConfiguration: { connectorId: 'servicenow-2', closureType: 'close-by-user' },
+        }))
+        .mockImplementation(() => ({
+          ...useCaseConfigureResponse,
+          mapping: connectors[1].config.casesConfiguration.mapping,
+          closureType: 'close-by-pushing',
+          connectorId: 'servicenow-2',
+          currentConfiguration: { connectorId: 'servicenow-2', closureType: 'close-by-user' },
+        }));
+      const wrapper = mount(<ConfigureCases userCanCrud />, { wrappingComponent: TestProviders });
+
+      // Change closure type
+      wrapper.find('input[id="close-by-pushing"]').simulate('change');
+      wrapper.update();
+
+      // Press update connector button
+      wrapper
+        .find('button[data-test-subj="case-configure-update-selected-connector-button"]')
+        .simulate('click');
+      wrapper.update();
+
+      expect(
+        wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists()
+      ).toBeFalsy();
+
+      expect(wrapper.find(ConnectorEditFlyout).prop('editFlyoutVisible')).toBe(true);
+
+      // Close the edit flyout
+      wrapper.find('button[data-test-subj="euiFlyoutCloseButton"]').simulate('click');
+      wrapper.update();
+
+      expect(
+        wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists()
+      ).toBeTruthy();
+
+      expect(wrapper.find(ConnectorEditFlyout).prop('editFlyoutVisible')).toBe(false);
+
+      expect(
+        wrapper
+          .find('[data-test-subj="case-configure-action-bottom-bar-total-changes"]')
+          .first()
+          .text()
+      ).toBe('1 unsaved changes');
+    });
+
+    test('it shows the action bar when the connector is changed', () => {
+      useCaseConfigureMock
+        .mockImplementationOnce(() => ({
+          ...useCaseConfigureResponse,
+          mapping: connectors[0].config.casesConfiguration.mapping,
+          closureType: 'close-by-user',
+          connectorId: 'servicenow-1',
+          currentConfiguration: { connectorId: 'servicenow-1', closureType: 'close-by-user' },
+        }))
+        .mockImplementation(() => ({
+          ...useCaseConfigureResponse,
+          mapping: connectors[1].config.casesConfiguration.mapping,
+          closureType: 'close-by-user',
+          connectorId: 'servicenow-2',
+          currentConfiguration: { connectorId: 'servicenow-1', closureType: 'close-by-user' },
+        }));
+      const wrapper = mount(<ConfigureCases userCanCrud />, { wrappingComponent: TestProviders });
+      wrapper.find('button[data-test-subj="dropdown-connectors"]').simulate('click');
+      wrapper.update();
+      wrapper.find('button[data-test-subj="dropdown-connector-servicenow-2"]').simulate('click');
+      wrapper.update();
+
+      expect(
+        wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists()
+      ).toBeTruthy();
+      expect(
+        wrapper
+          .find('[data-test-subj="case-configure-action-bottom-bar-total-changes"]')
+          .first()
+          .text()
+      ).toBe('1 unsaved changes');
+    });
+
+    test('it closes the action bar when pressing save', () => {
+      useCaseConfigureMock
+        .mockImplementationOnce(() => ({
+          ...useCaseConfigureResponse,
+          mapping: connectors[1].config.casesConfiguration.mapping,
+          closureType: 'close-by-user',
+          connectorId: 'servicenow-2',
+          currentConfiguration: { connectorId: 'servicenow-2', closureType: 'close-by-user' },
+        }))
+        .mockImplementation(() => ({
+          ...useCaseConfigureResponse,
+          mapping: connectors[1].config.casesConfiguration.mapping,
+          closureType: 'close-by-pushing',
+          connectorId: 'servicenow-2',
+          currentConfiguration: { connectorId: 'servicenow-2', closureType: 'close-by-user' },
+        }));
+      const wrapper = mount(<ConfigureCases userCanCrud />, { wrappingComponent: TestProviders });
+      wrapper.find('input[id="close-by-pushing"]').simulate('change');
+      wrapper.update();
+
+      expect(
+        wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists()
+      ).toBeTruthy();
+
+      wrapper
+        .find('[data-test-subj="case-configure-action-bottom-bar-save-button"]')
+        .first()
+        .simulate('click');
+
+      wrapper.update();
+
+      expect(
+        wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists()
+      ).toBeFalsy();
+    });
+
+    test('the text of the update button is changed successfully', () => {
+      useCaseConfigureMock
+        .mockImplementationOnce(() => ({
+          ...useCaseConfigureResponse,
+          connectorId: 'servicenow-1',
+        }))
+        .mockImplementation(() => ({
+          ...useCaseConfigureResponse,
+          connectorId: 'servicenow-2',
+        }));
+
+      const wrapper = mount(<ConfigureCases userCanCrud />, { wrappingComponent: TestProviders });
+
+      wrapper.find('button[data-test-subj="dropdown-connectors"]').simulate('click');
+      wrapper.update();
+      wrapper.find('button[data-test-subj="dropdown-connector-servicenow-2"]').simulate('click');
+      wrapper.update();
+
+      expect(
+        wrapper
+          .find('button[data-test-subj="case-configure-update-selected-connector-button"]')
+          .text()
+      ).toBe('Update My Connector 2');
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/cases/components/configure_cases/index.tsx b/x-pack/plugins/siem/public/cases/components/configure_cases/index.tsx
new file mode 100644
index 00000000000000..d5c6cc671433bf
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/components/configure_cases/index.tsx
@@ -0,0 +1,288 @@
+/*
+ * 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, { useCallback, useEffect, useState, Dispatch, SetStateAction } from 'react';
+import styled, { css } from 'styled-components';
+
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButton,
+  EuiCallOut,
+  EuiBottomBar,
+  EuiButtonEmpty,
+  EuiText,
+} from '@elastic/eui';
+import { difference } from 'lodash/fp';
+import { useKibana } from '../../../common/lib/kibana';
+import { useConnectors } from '../../containers/configure/use_connectors';
+import { useCaseConfigure } from '../../containers/configure/use_configure';
+import {
+  ActionsConnectorsContextProvider,
+  ActionType,
+  ConnectorAddFlyout,
+  ConnectorEditFlyout,
+} from '../../../../../triggers_actions_ui/public';
+
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { ActionConnectorTableItem } from '../../../../../triggers_actions_ui/public/types';
+import { getCaseUrl } from '../../../common/components/link_to';
+import { useGetUrlSearch } from '../../../common/components/navigation/use_get_url_search';
+import { connectorsConfiguration } from '../../../common/lib/connectors/config';
+
+import { Connectors } from './connectors';
+import { ClosureOptions } from './closure_options';
+import { SectionWrapper } from '../wrappers';
+import { navTabs } from '../../../app/home/home_navigations';
+import * as i18n from './translations';
+
+const FormWrapper = styled.div`
+  ${({ theme }) => css`
+    & > * {
+      margin-top 40px;
+    }
+
+    & > :first-child {
+      margin-top: 0;
+    }
+
+    padding-top: ${theme.eui.paddingSizes.xl};
+    padding-bottom: ${theme.eui.paddingSizes.xl};
+  `}
+`;
+
+const actionTypes: ActionType[] = Object.values(connectorsConfiguration);
+
+interface ConfigureCasesComponentProps {
+  userCanCrud: boolean;
+}
+
+const ConfigureCasesComponent: React.FC<ConfigureCasesComponentProps> = ({ userCanCrud }) => {
+  const search = useGetUrlSearch(navTabs.case);
+  const { http, triggers_actions_ui, notifications, application, docLinks } = useKibana().services;
+
+  const [connectorIsValid, setConnectorIsValid] = useState(true);
+  const [addFlyoutVisible, setAddFlyoutVisibility] = useState<boolean>(false);
+  const [editFlyoutVisible, setEditFlyoutVisibility] = useState<boolean>(false);
+  const [editedConnectorItem, setEditedConnectorItem] = useState<ActionConnectorTableItem | null>(
+    null
+  );
+
+  const [actionBarVisible, setActionBarVisible] = useState(false);
+  const [totalConfigurationChanges, setTotalConfigurationChanges] = useState(0);
+
+  const {
+    connectorId,
+    closureType,
+    currentConfiguration,
+    loading: loadingCaseConfigure,
+    persistLoading,
+    persistCaseConfigure,
+    setConnector,
+    setClosureType,
+  } = useCaseConfigure();
+
+  const { loading: isLoadingConnectors, connectors, refetchConnectors } = useConnectors();
+
+  // ActionsConnectorsContextProvider reloadConnectors prop expects a Promise<void>.
+  // TODO: Fix it if reloadConnectors type change.
+  const reloadConnectors = useCallback(async () => refetchConnectors(), []);
+  const isLoadingAny = isLoadingConnectors || persistLoading || loadingCaseConfigure;
+  const updateConnectorDisabled = isLoadingAny || !connectorIsValid || connectorId === 'none';
+
+  const handleSubmit = useCallback(
+    // TO DO give a warning/error to user when field are not mapped so they have chance to do it
+    () => {
+      setActionBarVisible(false);
+      persistCaseConfigure({
+        connectorId,
+        connectorName: connectors.find(c => c.id === connectorId)?.name ?? '',
+        closureType,
+      });
+    },
+    [connectorId, connectors, closureType]
+  );
+
+  const onClickAddConnector = useCallback(() => {
+    setActionBarVisible(false);
+    setAddFlyoutVisibility(true);
+  }, []);
+
+  const onClickUpdateConnector = useCallback(() => {
+    setActionBarVisible(false);
+    setEditFlyoutVisibility(true);
+  }, []);
+
+  const handleActionBar = useCallback(() => {
+    const currentConfigurationMinusName = {
+      connectorId: currentConfiguration.connectorId,
+      closureType: currentConfiguration.closureType,
+    };
+    const unsavedChanges = difference(Object.values(currentConfigurationMinusName), [
+      connectorId,
+      closureType,
+    ]).length;
+    setActionBarVisible(!(unsavedChanges === 0));
+    setTotalConfigurationChanges(unsavedChanges);
+  }, [currentConfiguration, connectorId, closureType]);
+
+  const handleSetAddFlyoutVisibility = useCallback(
+    (isVisible: boolean) => {
+      handleActionBar();
+      setAddFlyoutVisibility(isVisible);
+    },
+    [currentConfiguration, connectorId, closureType]
+  );
+
+  const handleSetEditFlyoutVisibility = useCallback(
+    (isVisible: boolean) => {
+      handleActionBar();
+      setEditFlyoutVisibility(isVisible);
+    },
+    [currentConfiguration, connectorId, closureType]
+  );
+
+  useEffect(() => {
+    if (
+      !isLoadingConnectors &&
+      connectorId !== 'none' &&
+      !connectors.some(c => c.id === connectorId)
+    ) {
+      setConnectorIsValid(false);
+    } else if (
+      !isLoadingConnectors &&
+      (connectorId === 'none' || connectors.some(c => c.id === connectorId))
+    ) {
+      setConnectorIsValid(true);
+    }
+  }, [connectors, connectorId]);
+
+  useEffect(() => {
+    if (!isLoadingConnectors && connectorId !== 'none') {
+      setEditedConnectorItem(
+        connectors.find(c => c.id === connectorId) as ActionConnectorTableItem
+      );
+    }
+  }, [connectors, connectorId]);
+
+  useEffect(() => {
+    handleActionBar();
+  }, [
+    connectors,
+    connectorId,
+    closureType,
+    currentConfiguration.connectorId,
+    currentConfiguration.closureType,
+  ]);
+
+  return (
+    <FormWrapper>
+      {!connectorIsValid && (
+        <SectionWrapper style={{ marginTop: 0 }}>
+          <EuiCallOut
+            title={i18n.WARNING_NO_CONNECTOR_TITLE}
+            color="warning"
+            iconType="help"
+            data-test-subj="configure-cases-warning-callout"
+          >
+            {i18n.WARNING_NO_CONNECTOR_MESSAGE}
+          </EuiCallOut>
+        </SectionWrapper>
+      )}
+      <SectionWrapper>
+        <ClosureOptions
+          closureTypeSelected={closureType}
+          disabled={persistLoading || isLoadingConnectors || connectorId === 'none' || !userCanCrud}
+          onChangeClosureType={setClosureType}
+        />
+      </SectionWrapper>
+      <SectionWrapper>
+        <Connectors
+          connectors={connectors ?? []}
+          disabled={persistLoading || isLoadingConnectors || !userCanCrud}
+          isLoading={isLoadingConnectors}
+          onChangeConnector={setConnector}
+          updateConnectorDisabled={updateConnectorDisabled || !userCanCrud}
+          handleShowAddFlyout={onClickAddConnector}
+          handleShowEditFlyout={onClickUpdateConnector}
+          selectedConnector={connectorId}
+        />
+      </SectionWrapper>
+      {actionBarVisible && (
+        <EuiBottomBar data-test-subj="case-configure-action-bottom-bar">
+          <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+            <EuiFlexItem grow={false}>
+              <EuiFlexGroup gutterSize="s">
+                <EuiText data-test-subj="case-configure-action-bottom-bar-total-changes">
+                  {i18n.UNSAVED_CHANGES(totalConfigurationChanges)}
+                </EuiText>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiFlexGroup gutterSize="s">
+                <EuiFlexItem grow={false}>
+                  <EuiButtonEmpty
+                    color="ghost"
+                    iconType="cross"
+                    isDisabled={isLoadingAny}
+                    isLoading={persistLoading}
+                    aria-label={i18n.CANCEL}
+                    href={getCaseUrl(search)}
+                    data-test-subj="case-configure-action-bottom-bar-cancel-button"
+                  >
+                    {i18n.CANCEL}
+                  </EuiButtonEmpty>
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiButton
+                    fill
+                    color="secondary"
+                    iconType="save"
+                    aria-label={i18n.SAVE_CHANGES}
+                    isDisabled={isLoadingAny}
+                    isLoading={persistLoading}
+                    onClick={handleSubmit}
+                    data-test-subj="case-configure-action-bottom-bar-save-button"
+                  >
+                    {i18n.SAVE_CHANGES}
+                  </EuiButton>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiBottomBar>
+      )}
+      <ActionsConnectorsContextProvider
+        value={{
+          http,
+          actionTypeRegistry: triggers_actions_ui.actionTypeRegistry,
+          toastNotifications: notifications.toasts,
+          capabilities: application.capabilities,
+          reloadConnectors,
+          docLinks,
+        }}
+      >
+        <ConnectorAddFlyout
+          addFlyoutVisible={addFlyoutVisible}
+          setAddFlyoutVisibility={handleSetAddFlyoutVisibility as Dispatch<SetStateAction<boolean>>}
+          actionTypes={actionTypes}
+        />
+        {editedConnectorItem && (
+          <ConnectorEditFlyout
+            key={editedConnectorItem.id}
+            initialConnector={editedConnectorItem}
+            editFlyoutVisible={editFlyoutVisible}
+            setEditFlyoutVisibility={
+              handleSetEditFlyoutVisibility as Dispatch<SetStateAction<boolean>>
+            }
+          />
+        )}
+      </ActionsConnectorsContextProvider>
+    </FormWrapper>
+  );
+};
+
+export const ConfigureCases = React.memo(ConfigureCasesComponent);
diff --git a/x-pack/plugins/siem/public/pages/case/components/configure_cases/mapping.test.tsx b/x-pack/plugins/siem/public/cases/components/configure_cases/mapping.test.tsx
similarity index 99%
rename from x-pack/plugins/siem/public/pages/case/components/configure_cases/mapping.test.tsx
rename to x-pack/plugins/siem/public/cases/components/configure_cases/mapping.test.tsx
index 083904d303490f..68a35987ecaf60 100644
--- a/x-pack/plugins/siem/public/pages/case/components/configure_cases/mapping.test.tsx
+++ b/x-pack/plugins/siem/public/cases/components/configure_cases/mapping.test.tsx
@@ -7,7 +7,7 @@
 import React from 'react';
 import { mount, ReactWrapper } from 'enzyme';
 
-import { TestProviders } from '../../../../mock';
+import { TestProviders } from '../../../common/mock';
 import { Mapping, MappingProps } from './mapping';
 import { mapping } from './__mock__';
 
diff --git a/x-pack/plugins/siem/public/pages/case/components/configure_cases/mapping.tsx b/x-pack/plugins/siem/public/cases/components/configure_cases/mapping.tsx
similarity index 95%
rename from x-pack/plugins/siem/public/pages/case/components/configure_cases/mapping.tsx
rename to x-pack/plugins/siem/public/cases/components/configure_cases/mapping.tsx
index acbcdac68a1340..2c3172a30f159f 100644
--- a/x-pack/plugins/siem/public/pages/case/components/configure_cases/mapping.tsx
+++ b/x-pack/plugins/siem/public/cases/components/configure_cases/mapping.tsx
@@ -18,7 +18,7 @@ import {
 import * as i18n from './translations';
 
 import { FieldMapping } from './field_mapping';
-import { CasesConfigurationMapping } from '../../../../containers/case/configure/types';
+import { CasesConfigurationMapping } from '../../containers/configure/types';
 
 export interface MappingProps {
   disabled: boolean;
diff --git a/x-pack/plugins/siem/public/pages/case/components/configure_cases/translations.ts b/x-pack/plugins/siem/public/cases/components/configure_cases/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/case/components/configure_cases/translations.ts
rename to x-pack/plugins/siem/public/cases/components/configure_cases/translations.ts
diff --git a/x-pack/plugins/siem/public/pages/case/components/configure_cases/utils.test.tsx b/x-pack/plugins/siem/public/cases/components/configure_cases/utils.test.tsx
similarity index 96%
rename from x-pack/plugins/siem/public/pages/case/components/configure_cases/utils.test.tsx
rename to x-pack/plugins/siem/public/cases/components/configure_cases/utils.test.tsx
index 1c6fc9b2d405f9..d6755f687100f7 100644
--- a/x-pack/plugins/siem/public/pages/case/components/configure_cases/utils.test.tsx
+++ b/x-pack/plugins/siem/public/cases/components/configure_cases/utils.test.tsx
@@ -6,7 +6,7 @@
 
 import { mapping } from './__mock__';
 import { setActionTypeToMapping, setThirdPartyToMapping } from './utils';
-import { CasesConfigurationMapping } from '../../../../containers/case/configure/types';
+import { CasesConfigurationMapping } from '../../containers/configure/types';
 
 describe('FieldMappingRow', () => {
   test('it should change the action type', () => {
diff --git a/x-pack/plugins/siem/public/cases/components/configure_cases/utils.ts b/x-pack/plugins/siem/public/cases/components/configure_cases/utils.ts
new file mode 100644
index 00000000000000..95851ec294e0bc
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/components/configure_cases/utils.ts
@@ -0,0 +1,43 @@
+/*
+ * 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 {
+  CaseField,
+  ActionType,
+  CasesConfigurationMapping,
+  ThirdPartyField,
+} from '../../containers/configure/types';
+
+export const setActionTypeToMapping = (
+  caseField: CaseField,
+  newActionType: ActionType,
+  mapping: CasesConfigurationMapping[]
+): CasesConfigurationMapping[] => {
+  const findItemIndex = mapping.findIndex(item => item.source === caseField);
+
+  if (findItemIndex >= 0) {
+    return [
+      ...mapping.slice(0, findItemIndex),
+      { ...mapping[findItemIndex], actionType: newActionType },
+      ...mapping.slice(findItemIndex + 1),
+    ];
+  }
+
+  return [...mapping];
+};
+
+export const setThirdPartyToMapping = (
+  caseField: CaseField,
+  newThirdPartyField: ThirdPartyField,
+  mapping: CasesConfigurationMapping[]
+): CasesConfigurationMapping[] =>
+  mapping.map(item => {
+    if (item.source !== caseField && item.target === newThirdPartyField) {
+      return { ...item, target: 'not_mapped' };
+    } else if (item.source === caseField) {
+      return { ...item, target: newThirdPartyField };
+    }
+    return item;
+  });
diff --git a/x-pack/plugins/siem/public/pages/case/components/confirm_delete_case/index.tsx b/x-pack/plugins/siem/public/cases/components/confirm_delete_case/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/case/components/confirm_delete_case/index.tsx
rename to x-pack/plugins/siem/public/cases/components/confirm_delete_case/index.tsx
diff --git a/x-pack/plugins/siem/public/pages/case/components/confirm_delete_case/translations.ts b/x-pack/plugins/siem/public/cases/components/confirm_delete_case/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/case/components/confirm_delete_case/translations.ts
rename to x-pack/plugins/siem/public/cases/components/confirm_delete_case/translations.ts
diff --git a/x-pack/plugins/siem/public/cases/components/connector_selector/form.tsx b/x-pack/plugins/siem/public/cases/components/connector_selector/form.tsx
new file mode 100644
index 00000000000000..9e058ee5cf09e1
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/components/connector_selector/form.tsx
@@ -0,0 +1,65 @@
+/*
+ * 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 { EuiFormRow } from '@elastic/eui';
+import React, { useCallback, useEffect } from 'react';
+
+import { FieldHook, getFieldValidityAndErrorMessage } from '../../../shared_imports';
+import { ConnectorsDropdown } from '../configure_cases/connectors_dropdown';
+import { Connector } from '../../../../../case/common/api/cases';
+
+interface ConnectorSelectorProps {
+  connectors: Connector[];
+  dataTestSubj: string;
+  field: FieldHook;
+  idAria: string;
+  defaultValue?: string;
+  disabled: boolean;
+  isLoading: boolean;
+}
+export const ConnectorSelector = ({
+  connectors,
+  dataTestSubj,
+  defaultValue,
+  field,
+  idAria,
+  disabled = false,
+  isLoading = false,
+}: ConnectorSelectorProps) => {
+  const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
+
+  useEffect(() => {
+    field.setValue(defaultValue);
+  }, [defaultValue]);
+
+  const handleContentChange = useCallback(
+    (newContent: string) => {
+      field.setValue(newContent);
+    },
+    [field]
+  );
+
+  return (
+    <EuiFormRow
+      data-test-subj={dataTestSubj}
+      describedByIds={idAria ? [idAria] : undefined}
+      error={errorMessage}
+      fullWidth
+      helpText={field.helpText}
+      isInvalid={isInvalid}
+      label={field.label}
+      labelAppend={field.labelAppend}
+    >
+      <ConnectorsDropdown
+        connectors={connectors}
+        selectedConnector={field.value as string}
+        disabled={disabled}
+        isLoading={isLoading}
+        onChange={handleContentChange}
+      />
+    </EuiFormRow>
+  );
+};
diff --git a/x-pack/plugins/siem/public/cases/components/create/index.test.tsx b/x-pack/plugins/siem/public/cases/components/create/index.test.tsx
new file mode 100644
index 00000000000000..647a0d32472591
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/components/create/index.test.tsx
@@ -0,0 +1,162 @@
+/*
+ * 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 { mount } from 'enzyme';
+
+import { Create } from '.';
+import { TestProviders } from '../../../common/mock';
+import { getFormMock } from '../__mock__/form';
+import { Router, routeData, mockHistory, mockLocation } from '../__mock__/router';
+
+import { useInsertTimeline } from '../../../timelines/components/timeline/insert_timeline_popover/use_insert_timeline';
+import { usePostCase } from '../../containers/use_post_case';
+import { useGetTags } from '../../containers/use_get_tags';
+
+jest.mock('../../../timelines/components/timeline/insert_timeline_popover/use_insert_timeline');
+jest.mock('../../containers/use_post_case');
+import { useForm } from '../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form';
+import { wait } from '../../../common/lib/helpers';
+import { SiemPageName } from '../../../app/types';
+jest.mock(
+  '../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form'
+);
+jest.mock('../../containers/use_get_tags');
+jest.mock(
+  '../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/components/form_data_provider',
+  () => ({
+    FormDataProvider: ({ children }: { children: ({ tags }: { tags: string[] }) => void }) =>
+      children({ tags: ['rad', 'dude'] }),
+  })
+);
+
+export const useFormMock = useForm as jest.Mock;
+
+const useInsertTimelineMock = useInsertTimeline as jest.Mock;
+const usePostCaseMock = usePostCase as jest.Mock;
+
+const postCase = jest.fn();
+const handleCursorChange = jest.fn();
+const handleOnTimelineChange = jest.fn();
+
+const defaultInsertTimeline = {
+  cursorPosition: {
+    start: 0,
+    end: 0,
+  },
+  handleCursorChange,
+  handleOnTimelineChange,
+};
+
+const sampleTags = ['coke', 'pepsi'];
+const sampleData = {
+  description: 'what a great description',
+  tags: sampleTags,
+  title: 'what a cool title',
+};
+const defaultPostCase = {
+  isLoading: false,
+  isError: false,
+  caseData: null,
+  postCase,
+};
+describe('Create case', () => {
+  // Suppress warnings about "noSuggestions" prop
+  /* eslint-disable no-console */
+  const originalError = console.error;
+  beforeAll(() => {
+    console.error = jest.fn();
+  });
+  afterAll(() => {
+    console.error = originalError;
+  });
+  /* eslint-enable no-console */
+  const fetchTags = jest.fn();
+  const formHookMock = getFormMock(sampleData);
+  beforeEach(() => {
+    jest.resetAllMocks();
+    useInsertTimelineMock.mockImplementation(() => defaultInsertTimeline);
+    usePostCaseMock.mockImplementation(() => defaultPostCase);
+    useFormMock.mockImplementation(() => ({ form: formHookMock }));
+    jest.spyOn(routeData, 'useLocation').mockReturnValue(mockLocation);
+    (useGetTags as jest.Mock).mockImplementation(() => ({
+      tags: sampleTags,
+      fetchTags,
+    }));
+  });
+
+  it('should post case on submit click', async () => {
+    const wrapper = mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <Create />
+        </Router>
+      </TestProviders>
+    );
+    wrapper
+      .find(`[data-test-subj="create-case-submit"]`)
+      .first()
+      .simulate('click');
+    await wait();
+    expect(postCase).toBeCalledWith(sampleData);
+  });
+
+  it('should redirect to all cases on cancel click', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <Create />
+        </Router>
+      </TestProviders>
+    );
+    wrapper
+      .find(`[data-test-subj="create-case-cancel"]`)
+      .first()
+      .simulate('click');
+    expect(mockHistory.replace.mock.calls[0][0].pathname).toEqual(`/${SiemPageName.case}`);
+  });
+  it('should redirect to new case when caseData is there', () => {
+    const sampleId = '777777';
+    usePostCaseMock.mockImplementation(() => ({ ...defaultPostCase, caseData: { id: sampleId } }));
+    mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <Create />
+        </Router>
+      </TestProviders>
+    );
+    expect(mockHistory.replace.mock.calls[0][0].pathname).toEqual(
+      `/${SiemPageName.case}/${sampleId}`
+    );
+  });
+
+  it('should render spinner when loading', () => {
+    usePostCaseMock.mockImplementation(() => ({ ...defaultPostCase, isLoading: true }));
+    const wrapper = mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <Create />
+        </Router>
+      </TestProviders>
+    );
+    expect(wrapper.find(`[data-test-subj="create-case-loading-spinner"]`).exists()).toBeTruthy();
+  });
+  it('Tag options render with new tags added', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <Create />
+        </Router>
+      </TestProviders>
+    );
+    expect(
+      wrapper
+        .find(`[data-test-subj="caseTags"] [data-test-subj="input"]`)
+        .first()
+        .prop('options')
+    ).toEqual([{ label: 'coke' }, { label: 'pepsi' }, { label: 'rad' }, { label: 'dude' }]);
+  });
+});
diff --git a/x-pack/plugins/siem/public/cases/components/create/index.tsx b/x-pack/plugins/siem/public/cases/components/create/index.tsx
new file mode 100644
index 00000000000000..655536faa171db
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/components/create/index.tsx
@@ -0,0 +1,215 @@
+/*
+ * 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, { useCallback, useEffect, useState } from 'react';
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLoadingSpinner,
+  EuiPanel,
+} from '@elastic/eui';
+import styled, { css } from 'styled-components';
+import { Redirect } from 'react-router-dom';
+
+import { isEqual } from 'lodash/fp';
+import { CasePostRequest } from '../../../../../case/common/api';
+import {
+  Field,
+  Form,
+  getUseField,
+  useForm,
+  UseField,
+  FormDataProvider,
+} from '../../../shared_imports';
+import { usePostCase } from '../../containers/use_post_case';
+import { schema } from './schema';
+import { InsertTimelinePopover } from '../../../timelines/components/timeline/insert_timeline_popover';
+import { useInsertTimeline } from '../../../timelines/components/timeline/insert_timeline_popover/use_insert_timeline';
+import * as i18n from '../../translations';
+import { SiemPageName } from '../../../app/types';
+import { MarkdownEditorForm } from '../../../common/components//markdown_editor/form';
+import { useGetTags } from '../../containers/use_get_tags';
+
+export const CommonUseField = getUseField({ component: Field });
+
+const ContainerBig = styled.div`
+  ${({ theme }) => css`
+    margin-top: ${theme.eui.euiSizeXL};
+  `}
+`;
+
+const Container = styled.div`
+  ${({ theme }) => css`
+    margin-top: ${theme.eui.euiSize};
+  `}
+`;
+const MySpinner = styled(EuiLoadingSpinner)`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 99;
+`;
+
+const initialCaseValue: CasePostRequest = {
+  description: '',
+  tags: [],
+  title: '',
+};
+
+export const Create = React.memo(() => {
+  const { caseData, isLoading, postCase } = usePostCase();
+  const [isCancel, setIsCancel] = useState(false);
+  const { form } = useForm<CasePostRequest>({
+    defaultValue: initialCaseValue,
+    options: { stripEmptyFields: false },
+    schema,
+  });
+  const { tags: tagOptions } = useGetTags();
+  const [options, setOptions] = useState(
+    tagOptions.map(label => ({
+      label,
+    }))
+  );
+  useEffect(
+    () =>
+      setOptions(
+        tagOptions.map(label => ({
+          label,
+        }))
+      ),
+    [tagOptions]
+  );
+  const { handleCursorChange, handleOnTimelineChange } = useInsertTimeline<CasePostRequest>(
+    form,
+    'description'
+  );
+
+  const onSubmit = useCallback(async () => {
+    const { isValid, data } = await form.submit();
+    if (isValid) {
+      await postCase(data);
+    }
+  }, [form]);
+
+  const handleSetIsCancel = useCallback(() => {
+    setIsCancel(true);
+  }, []);
+
+  if (caseData != null && caseData.id) {
+    return <Redirect to={`/${SiemPageName.case}/${caseData.id}`} />;
+  }
+
+  if (isCancel) {
+    return <Redirect to={`/${SiemPageName.case}`} />;
+  }
+
+  return (
+    <EuiPanel>
+      {isLoading && <MySpinner data-test-subj="create-case-loading-spinner" size="xl" />}
+      <Form form={form}>
+        <CommonUseField
+          path="title"
+          componentProps={{
+            idAria: 'caseTitle',
+            'data-test-subj': 'caseTitle',
+            euiFieldProps: {
+              fullWidth: false,
+              disabled: isLoading,
+            },
+          }}
+        />
+        <Container>
+          <CommonUseField
+            path="tags"
+            componentProps={{
+              idAria: 'caseTags',
+              'data-test-subj': 'caseTags',
+              euiFieldProps: {
+                fullWidth: true,
+                placeholder: '',
+                disabled: isLoading,
+                options,
+                noSuggestions: false,
+              },
+            }}
+          />
+        </Container>
+        <ContainerBig>
+          <UseField
+            path="description"
+            component={MarkdownEditorForm}
+            componentProps={{
+              dataTestSubj: 'caseDescription',
+              idAria: 'caseDescription',
+              isDisabled: isLoading,
+              onCursorPositionUpdate: handleCursorChange,
+              topRightContent: (
+                <InsertTimelinePopover
+                  hideUntitled={true}
+                  isDisabled={isLoading}
+                  onTimelineChange={handleOnTimelineChange}
+                />
+              ),
+            }}
+          />
+        </ContainerBig>
+        <FormDataProvider pathsToWatch="tags">
+          {({ tags: anotherTags }) => {
+            const current: string[] = options.map(opt => opt.label);
+            const newOptions = anotherTags.reduce((acc: string[], item: string) => {
+              if (!acc.includes(item)) {
+                return [...acc, item];
+              }
+              return acc;
+            }, current);
+            if (!isEqual(current, newOptions)) {
+              setOptions(
+                newOptions.map((label: string) => ({
+                  label,
+                }))
+              );
+            }
+            return null;
+          }}
+        </FormDataProvider>
+      </Form>
+      <Container>
+        <EuiFlexGroup
+          alignItems="center"
+          justifyContent="flexEnd"
+          gutterSize="xs"
+          responsive={false}
+        >
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty
+              data-test-subj="create-case-cancel"
+              size="s"
+              onClick={handleSetIsCancel}
+              iconType="cross"
+            >
+              {i18n.CANCEL}
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButton
+              data-test-subj="create-case-submit"
+              fill
+              iconType="plusInCircle"
+              isDisabled={isLoading}
+              isLoading={isLoading}
+              onClick={onSubmit}
+            >
+              {i18n.CREATE_CASE}
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </Container>
+    </EuiPanel>
+  );
+});
+
+Create.displayName = 'Create';
diff --git a/x-pack/plugins/siem/public/pages/case/components/create/optional_field_label/index.tsx b/x-pack/plugins/siem/public/cases/components/create/optional_field_label/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/case/components/create/optional_field_label/index.tsx
rename to x-pack/plugins/siem/public/cases/components/create/optional_field_label/index.tsx
diff --git a/x-pack/plugins/siem/public/cases/components/create/schema.tsx b/x-pack/plugins/siem/public/cases/components/create/schema.tsx
new file mode 100644
index 00000000000000..ce38033271d043
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/components/create/schema.tsx
@@ -0,0 +1,40 @@
+/*
+ * 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 { CasePostRequest } from '../../../../../case/common/api';
+import { FIELD_TYPES, fieldValidators, FormSchema } from '../../../shared_imports';
+import * as i18n from '../../translations';
+
+import { OptionalFieldLabel } from './optional_field_label';
+const { emptyField } = fieldValidators;
+
+export const schemaTags = {
+  type: FIELD_TYPES.COMBO_BOX,
+  label: i18n.TAGS,
+  helpText: i18n.TAGS_HELP,
+  labelAppend: OptionalFieldLabel,
+};
+
+export const schema: FormSchema<CasePostRequest> = {
+  title: {
+    type: FIELD_TYPES.TEXT,
+    label: i18n.NAME,
+    validations: [
+      {
+        validator: emptyField(i18n.TITLE_REQUIRED),
+      },
+    ],
+  },
+  description: {
+    label: i18n.DESCRIPTION,
+    validations: [
+      {
+        validator: emptyField(i18n.DESCRIPTION_REQUIRED),
+      },
+    ],
+  },
+  tags: schemaTags,
+};
diff --git a/x-pack/plugins/siem/public/cases/components/edit_connector/index.test.tsx b/x-pack/plugins/siem/public/cases/components/edit_connector/index.test.tsx
new file mode 100644
index 00000000000000..5dfed80baa8edb
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/components/edit_connector/index.test.tsx
@@ -0,0 +1,154 @@
+/*
+ * 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 { mount } from 'enzyme';
+
+import { EditConnector } from './index';
+import { getFormMock, useFormMock } from '../__mock__/form';
+import { TestProviders } from '../../../common/mock';
+import { connectorsMock } from '../../containers/configure/mock';
+import { wait } from '../../../common/lib/helpers';
+import { act } from 'react-dom/test-utils';
+jest.mock(
+  '../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form'
+);
+const onSubmit = jest.fn();
+const defaultProps = {
+  connectors: connectorsMock,
+  disabled: false,
+  isLoading: false,
+  onSubmit,
+  selectedConnector: 'none',
+};
+
+describe('EditConnector ', () => {
+  const sampleConnector = '123';
+  const formHookMock = getFormMock({ connector: sampleConnector });
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.resetAllMocks();
+    useFormMock.mockImplementation(() => ({ form: formHookMock }));
+  });
+  it('Renders no connector, and then edit', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <EditConnector {...defaultProps} />
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find(`[data-test-subj="dropdown-connectors"]`)
+        .last()
+        .prop('disabled')
+    ).toBeTruthy();
+
+    expect(
+      wrapper
+        .find(`span[data-test-subj="dropdown-connector-no-connector"]`)
+        .last()
+        .exists()
+    ).toBeTruthy();
+    wrapper
+      .find(`[data-test-subj="connector-edit-button"]`)
+      .last()
+      .simulate('click');
+
+    expect(
+      wrapper
+        .find(`[data-test-subj="edit-connectors-submit"]`)
+        .last()
+        .exists()
+    ).toBeTruthy();
+
+    expect(
+      wrapper
+        .find(`[data-test-subj="dropdown-connectors"]`)
+        .last()
+        .prop('disabled')
+    ).toBeFalsy();
+  });
+  it('Edit external service on submit', async () => {
+    const wrapper = mount(
+      <TestProviders>
+        <EditConnector {...defaultProps} />
+      </TestProviders>
+    );
+    wrapper
+      .find(`[data-test-subj="connector-edit-button"]`)
+      .last()
+      .simulate('click');
+    expect(
+      wrapper
+        .find(`[data-test-subj="edit-connectors-submit"]`)
+        .last()
+        .exists()
+    ).toBeTruthy();
+    await act(async () => {
+      wrapper
+        .find(`[data-test-subj="edit-connectors-submit"]`)
+        .last()
+        .simulate('click');
+      await wait();
+      expect(onSubmit).toBeCalledWith(sampleConnector);
+    });
+  });
+  it('Resets selector on cancel', async () => {
+    const props = {
+      ...defaultProps,
+    };
+    const wrapper = mount(
+      <TestProviders>
+        <EditConnector {...props} />
+      </TestProviders>
+    );
+    wrapper
+      .find(`[data-test-subj="connector-edit-button"]`)
+      .last()
+      .simulate('click');
+    await act(async () => {
+      wrapper
+        .find(`[data-test-subj="edit-connectors-cancel"]`)
+        .last()
+        .simulate('click');
+      await wait();
+      wrapper.update();
+      expect(formHookMock.setFieldValue).toBeCalledWith(
+        'connector',
+        defaultProps.selectedConnector
+      );
+    });
+  });
+  it('Renders disabled button', () => {
+    const props = { ...defaultProps, disabled: true };
+    const wrapper = mount(
+      <TestProviders>
+        <EditConnector {...props} />
+      </TestProviders>
+    );
+    expect(
+      wrapper
+        .find(`[data-test-subj="connector-edit-button"]`)
+        .last()
+        .prop('disabled')
+    ).toBeTruthy();
+  });
+  it('Renders loading spinner', () => {
+    const props = { ...defaultProps, isLoading: true };
+    const wrapper = mount(
+      <TestProviders>
+        <EditConnector {...props} />
+      </TestProviders>
+    );
+    expect(
+      wrapper
+        .find(`[data-test-subj="connector-loading"]`)
+        .last()
+        .exists()
+    ).toBeTruthy();
+  });
+});
diff --git a/x-pack/plugins/siem/public/cases/components/edit_connector/index.tsx b/x-pack/plugins/siem/public/cases/components/edit_connector/index.tsx
new file mode 100644
index 00000000000000..29f06532a4ab4a
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/components/edit_connector/index.tsx
@@ -0,0 +1,149 @@
+/*
+ * 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, { useCallback, useState } from 'react';
+import {
+  EuiText,
+  EuiHorizontalRule,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiButtonIcon,
+  EuiLoadingSpinner,
+} from '@elastic/eui';
+import styled, { css } from 'styled-components';
+import * as i18n from '../../translations';
+import { Form, UseField, useForm } from '../../../shared_imports';
+import { schema } from './schema';
+import { ConnectorSelector } from '../connector_selector/form';
+import { Connector } from '../../../../../case/common/api/cases';
+
+interface EditConnectorProps {
+  connectors: Connector[];
+  disabled?: boolean;
+  isLoading: boolean;
+  onSubmit: (a: string[]) => void;
+  selectedConnector: string;
+}
+
+const MyFlexGroup = styled(EuiFlexGroup)`
+  ${({ theme }) => css`
+    margin-top: ${theme.eui.euiSizeM};
+    p {
+      font-size: ${theme.eui.euiSizeM};
+    }
+  `}
+`;
+
+export const EditConnector = React.memo(
+  ({
+    connectors,
+    disabled = false,
+    isLoading,
+    onSubmit,
+    selectedConnector,
+  }: EditConnectorProps) => {
+    const { form } = useForm({
+      defaultValue: { connectors },
+      options: { stripEmptyFields: false },
+      schema,
+    });
+    const [isEditConnector, setIsEditConnector] = useState(false);
+    const handleOnClick = useCallback(() => {
+      setIsEditConnector(true);
+    }, []);
+
+    const onCancelConnector = useCallback(() => {
+      form.setFieldValue('connector', selectedConnector);
+      setIsEditConnector(false);
+    }, [form, selectedConnector]);
+
+    const onSubmitConnector = useCallback(async () => {
+      const { isValid, data: newData } = await form.submit();
+      if (isValid && newData.connector) {
+        onSubmit(newData.connector);
+        setIsEditConnector(false);
+      }
+    }, [form, onSubmit]);
+    return (
+      <EuiText>
+        <MyFlexGroup alignItems="center" gutterSize="xs" justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
+            <h4>{i18n.CONNECTORS}</h4>
+          </EuiFlexItem>
+          {isLoading && <EuiLoadingSpinner data-test-subj="connector-loading" />}
+          {!isLoading && (
+            <EuiFlexItem data-test-subj="connector-edit" grow={false}>
+              <EuiButtonIcon
+                data-test-subj="connector-edit-button"
+                isDisabled={disabled}
+                aria-label={i18n.EDIT_CONNECTOR}
+                iconType={'pencil'}
+                onClick={handleOnClick}
+              />
+            </EuiFlexItem>
+          )}
+        </MyFlexGroup>
+        <EuiHorizontalRule margin="xs" />
+        <MyFlexGroup gutterSize="xs">
+          <EuiFlexGroup data-test-subj="edit-connectors" direction="column">
+            <EuiFlexItem>
+              <Form form={form}>
+                <EuiFlexGroup gutterSize="none" direction="row">
+                  <EuiFlexItem>
+                    <UseField
+                      path="connector"
+                      component={ConnectorSelector}
+                      componentProps={{
+                        connectors,
+                        dataTestSubj: 'caseConnectors',
+                        idAria: 'caseConnectors',
+                        isLoading,
+                        disabled: !isEditConnector,
+                        defaultValue: selectedConnector,
+                      }}
+                    />
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </Form>
+            </EuiFlexItem>
+            {isEditConnector && (
+              <EuiFlexItem>
+                <EuiFlexGroup gutterSize="s" alignItems="center">
+                  <EuiFlexItem grow={false}>
+                    <EuiButton
+                      color="secondary"
+                      data-test-subj="edit-connectors-submit"
+                      fill
+                      iconType="save"
+                      onClick={onSubmitConnector}
+                      size="s"
+                    >
+                      {i18n.SAVE}
+                    </EuiButton>
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={false}>
+                    <EuiButtonEmpty
+                      data-test-subj="edit-connectors-cancel"
+                      iconType="cross"
+                      onClick={onCancelConnector}
+                      size="s"
+                    >
+                      {i18n.CANCEL}
+                    </EuiButtonEmpty>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiFlexItem>
+            )}
+          </EuiFlexGroup>
+        </MyFlexGroup>
+      </EuiText>
+    );
+  }
+);
+
+EditConnector.displayName = 'EditConnector';
diff --git a/x-pack/plugins/siem/public/cases/components/edit_connector/schema.tsx b/x-pack/plugins/siem/public/cases/components/edit_connector/schema.tsx
new file mode 100644
index 00000000000000..cdc50c7d28e4f1
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/components/edit_connector/schema.tsx
@@ -0,0 +1,12 @@
+/*
+ * 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 { FormSchema } from '../../../shared_imports';
+
+export const schema: FormSchema = {
+  connector: {
+    defaultValue: 'none',
+  },
+};
diff --git a/x-pack/plugins/siem/public/components/filter_popover/index.tsx b/x-pack/plugins/siem/public/cases/components/filter_popover/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/filter_popover/index.tsx
rename to x-pack/plugins/siem/public/cases/components/filter_popover/index.tsx
diff --git a/x-pack/plugins/siem/public/pages/case/components/open_closed_stats/index.tsx b/x-pack/plugins/siem/public/cases/components/open_closed_stats/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/case/components/open_closed_stats/index.tsx
rename to x-pack/plugins/siem/public/cases/components/open_closed_stats/index.tsx
diff --git a/x-pack/plugins/siem/public/pages/case/components/property_actions/constants.ts b/x-pack/plugins/siem/public/cases/components/property_actions/constants.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/case/components/property_actions/constants.ts
rename to x-pack/plugins/siem/public/cases/components/property_actions/constants.ts
diff --git a/x-pack/plugins/siem/public/pages/case/components/property_actions/index.tsx b/x-pack/plugins/siem/public/cases/components/property_actions/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/case/components/property_actions/index.tsx
rename to x-pack/plugins/siem/public/cases/components/property_actions/index.tsx
diff --git a/x-pack/plugins/siem/public/pages/case/components/property_actions/translations.ts b/x-pack/plugins/siem/public/cases/components/property_actions/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/case/components/property_actions/translations.ts
rename to x-pack/plugins/siem/public/cases/components/property_actions/translations.ts
diff --git a/x-pack/plugins/siem/public/cases/components/tag_list/index.test.tsx b/x-pack/plugins/siem/public/cases/components/tag_list/index.test.tsx
new file mode 100644
index 00000000000000..0b7b4211f6a3b5
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/components/tag_list/index.test.tsx
@@ -0,0 +1,180 @@
+/*
+ * 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 { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
+
+import { TagList } from '.';
+import { getFormMock } from '../__mock__/form';
+import { TestProviders } from '../../../common/mock';
+import { wait } from '../../../common/lib/helpers';
+import { useForm } from '../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form';
+import { useGetTags } from '../../containers/use_get_tags';
+
+jest.mock(
+  '../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form'
+);
+jest.mock('../../containers/use_get_tags');
+jest.mock(
+  '../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/components/form_data_provider',
+  () => ({
+    FormDataProvider: ({ children }: { children: ({ tags }: { tags: string[] }) => void }) =>
+      children({ tags: ['rad', 'dude'] }),
+  })
+);
+const onSubmit = jest.fn();
+const defaultProps = {
+  disabled: false,
+  isLoading: false,
+  onSubmit,
+  tags: [],
+};
+
+describe('TagList ', () => {
+  // Suppress warnings about "noSuggestions" prop
+  /* eslint-disable no-console */
+  const originalError = console.error;
+  beforeAll(() => {
+    console.error = jest.fn();
+  });
+  afterAll(() => {
+    console.error = originalError;
+  });
+  /* eslint-enable no-console */
+  const sampleTags = ['coke', 'pepsi'];
+  const fetchTags = jest.fn();
+  const formHookMock = getFormMock({ tags: sampleTags });
+  beforeEach(() => {
+    jest.resetAllMocks();
+    (useForm as jest.Mock).mockImplementation(() => ({ form: formHookMock }));
+
+    (useGetTags as jest.Mock).mockImplementation(() => ({
+      tags: sampleTags,
+      fetchTags,
+    }));
+  });
+  it('Renders no tags, and then edit', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <TagList {...defaultProps} />
+      </TestProviders>
+    );
+    expect(
+      wrapper
+        .find(`[data-test-subj="no-tags"]`)
+        .last()
+        .exists()
+    ).toBeTruthy();
+    wrapper
+      .find(`[data-test-subj="tag-list-edit-button"]`)
+      .last()
+      .simulate('click');
+    expect(
+      wrapper
+        .find(`[data-test-subj="no-tags"]`)
+        .last()
+        .exists()
+    ).toBeFalsy();
+    expect(
+      wrapper
+        .find(`[data-test-subj="edit-tags"]`)
+        .last()
+        .exists()
+    ).toBeTruthy();
+  });
+  it('Edit tag on submit', async () => {
+    const wrapper = mount(
+      <TestProviders>
+        <TagList {...defaultProps} />
+      </TestProviders>
+    );
+    wrapper
+      .find(`[data-test-subj="tag-list-edit-button"]`)
+      .last()
+      .simulate('click');
+    await act(async () => {
+      wrapper
+        .find(`[data-test-subj="edit-tags-submit"]`)
+        .last()
+        .simulate('click');
+      await wait();
+      expect(onSubmit).toBeCalledWith(sampleTags);
+    });
+  });
+  it('Tag options render with new tags added', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <TagList {...defaultProps} />
+      </TestProviders>
+    );
+    wrapper
+      .find(`[data-test-subj="tag-list-edit-button"]`)
+      .last()
+      .simulate('click');
+    expect(
+      wrapper
+        .find(`[data-test-subj="caseTags"] [data-test-subj="input"]`)
+        .first()
+        .prop('options')
+    ).toEqual([{ label: 'coke' }, { label: 'pepsi' }, { label: 'rad' }, { label: 'dude' }]);
+  });
+  it('Cancels on cancel', async () => {
+    const props = {
+      ...defaultProps,
+      tags: ['pepsi'],
+    };
+    const wrapper = mount(
+      <TestProviders>
+        <TagList {...props} />
+      </TestProviders>
+    );
+    expect(
+      wrapper
+        .find(`[data-test-subj="case-tag"]`)
+        .last()
+        .exists()
+    ).toBeTruthy();
+    wrapper
+      .find(`[data-test-subj="tag-list-edit-button"]`)
+      .last()
+      .simulate('click');
+    await act(async () => {
+      expect(
+        wrapper
+          .find(`[data-test-subj="case-tag"]`)
+          .last()
+          .exists()
+      ).toBeFalsy();
+      wrapper
+        .find(`[data-test-subj="edit-tags-cancel"]`)
+        .last()
+        .simulate('click');
+      await wait();
+      wrapper.update();
+      expect(
+        wrapper
+          .find(`[data-test-subj="case-tag"]`)
+          .last()
+          .exists()
+      ).toBeTruthy();
+    });
+  });
+  it('Renders disabled button', () => {
+    const props = { ...defaultProps, disabled: true };
+    const wrapper = mount(
+      <TestProviders>
+        <TagList {...props} />
+      </TestProviders>
+    );
+    expect(
+      wrapper
+        .find(`[data-test-subj="tag-list-edit-button"]`)
+        .last()
+        .prop('disabled')
+    ).toBeTruthy();
+  });
+});
diff --git a/x-pack/plugins/siem/public/cases/components/tag_list/index.tsx b/x-pack/plugins/siem/public/cases/components/tag_list/index.tsx
new file mode 100644
index 00000000000000..259028d9c6363a
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/components/tag_list/index.tsx
@@ -0,0 +1,179 @@
+/*
+ * 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, { useCallback, useEffect, useState } from 'react';
+import {
+  EuiText,
+  EuiHorizontalRule,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiBadge,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiButtonIcon,
+  EuiLoadingSpinner,
+} from '@elastic/eui';
+import styled, { css } from 'styled-components';
+import { isEqual } from 'lodash/fp';
+import * as i18n from './translations';
+import { Form, FormDataProvider, useForm } from '../../../shared_imports';
+import { schema } from './schema';
+import { CommonUseField } from '../create';
+import { useGetTags } from '../../containers/use_get_tags';
+
+interface TagListProps {
+  disabled?: boolean;
+  isLoading: boolean;
+  onSubmit: (a: string[]) => void;
+  tags: string[];
+}
+
+const MyFlexGroup = styled(EuiFlexGroup)`
+  ${({ theme }) => css`
+    margin-top: ${theme.eui.euiSizeM};
+    p {
+      font-size: ${theme.eui.euiSizeM};
+    }
+  `}
+`;
+
+export const TagList = React.memo(
+  ({ disabled = false, isLoading, onSubmit, tags }: TagListProps) => {
+    const { form } = useForm({
+      defaultValue: { tags },
+      options: { stripEmptyFields: false },
+      schema,
+    });
+    const [isEditTags, setIsEditTags] = useState(false);
+
+    const onSubmitTags = useCallback(async () => {
+      const { isValid, data: newData } = await form.submit();
+      if (isValid && newData.tags) {
+        onSubmit(newData.tags);
+        setIsEditTags(false);
+      }
+    }, [form, onSubmit]);
+    const { tags: tagOptions } = useGetTags();
+    const [options, setOptions] = useState(
+      tagOptions.map(label => ({
+        label,
+      }))
+    );
+
+    useEffect(
+      () =>
+        setOptions(
+          tagOptions.map(label => ({
+            label,
+          }))
+        ),
+      [tagOptions]
+    );
+
+    return (
+      <EuiText>
+        <EuiFlexGroup alignItems="center" gutterSize="xs" justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
+            <h4>{i18n.TAGS}</h4>
+          </EuiFlexItem>
+          {isLoading && <EuiLoadingSpinner data-test-subj="tag-list-loading" />}
+          {!isLoading && (
+            <EuiFlexItem data-test-subj="tag-list-edit" grow={false}>
+              <EuiButtonIcon
+                data-test-subj="tag-list-edit-button"
+                isDisabled={disabled}
+                aria-label={i18n.EDIT_TAGS_ARIA}
+                iconType={'pencil'}
+                onClick={setIsEditTags.bind(null, true)}
+              />
+            </EuiFlexItem>
+          )}
+        </EuiFlexGroup>
+        <EuiHorizontalRule margin="xs" />
+        <MyFlexGroup gutterSize="xs" data-test-subj="case-tags">
+          {tags.length === 0 && !isEditTags && <p data-test-subj="no-tags">{i18n.NO_TAGS}</p>}
+          {tags.length > 0 &&
+            !isEditTags &&
+            tags.map((tag, key) => (
+              <EuiFlexItem grow={false} key={`${tag}${key}`}>
+                <EuiBadge data-test-subj="case-tag" color="hollow">
+                  {tag}
+                </EuiBadge>
+              </EuiFlexItem>
+            ))}
+          {isEditTags && (
+            <EuiFlexGroup data-test-subj="edit-tags" direction="column">
+              <EuiFlexItem>
+                <Form form={form}>
+                  <CommonUseField
+                    path="tags"
+                    componentProps={{
+                      idAria: 'caseTags',
+                      'data-test-subj': 'caseTags',
+                      euiFieldProps: {
+                        fullWidth: true,
+                        placeholder: '',
+                        options,
+                        noSuggestions: false,
+                      },
+                    }}
+                  />
+                  <FormDataProvider pathsToWatch="tags">
+                    {({ tags: anotherTags }) => {
+                      const current: string[] = options.map(opt => opt.label);
+                      const newOptions = anotherTags.reduce((acc: string[], item: string) => {
+                        if (!acc.includes(item)) {
+                          return [...acc, item];
+                        }
+                        return acc;
+                      }, current);
+                      if (!isEqual(current, newOptions)) {
+                        setOptions(
+                          newOptions.map((label: string) => ({
+                            label,
+                          }))
+                        );
+                      }
+                      return null;
+                    }}
+                  </FormDataProvider>
+                </Form>
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <EuiFlexGroup gutterSize="s" alignItems="center">
+                  <EuiFlexItem grow={false}>
+                    <EuiButton
+                      color="secondary"
+                      data-test-subj="edit-tags-submit"
+                      fill
+                      iconType="save"
+                      onClick={onSubmitTags}
+                      size="s"
+                    >
+                      {i18n.SAVE}
+                    </EuiButton>
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={false}>
+                    <EuiButtonEmpty
+                      data-test-subj="edit-tags-cancel"
+                      iconType="cross"
+                      onClick={setIsEditTags.bind(null, false)}
+                      size="s"
+                    >
+                      {i18n.CANCEL}
+                    </EuiButtonEmpty>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          )}
+        </MyFlexGroup>
+      </EuiText>
+    );
+  }
+);
+
+TagList.displayName = 'TagList';
diff --git a/x-pack/plugins/siem/public/cases/components/tag_list/schema.tsx b/x-pack/plugins/siem/public/cases/components/tag_list/schema.tsx
new file mode 100644
index 00000000000000..335a0785ecb046
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/components/tag_list/schema.tsx
@@ -0,0 +1,11 @@
+/*
+ * 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 { FormSchema } from '../../../shared_imports';
+import { schemaTags } from '../create/schema';
+
+export const schema: FormSchema = {
+  tags: schemaTags,
+};
diff --git a/x-pack/plugins/siem/public/pages/case/components/tag_list/translations.ts b/x-pack/plugins/siem/public/cases/components/tag_list/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/case/components/tag_list/translations.ts
rename to x-pack/plugins/siem/public/cases/components/tag_list/translations.ts
diff --git a/x-pack/plugins/siem/public/cases/components/use_push_to_service/helpers.tsx b/x-pack/plugins/siem/public/cases/components/use_push_to_service/helpers.tsx
new file mode 100644
index 00000000000000..f0ded815fce434
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/components/use_push_to_service/helpers.tsx
@@ -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 { EuiLink } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import React from 'react';
+
+import * as i18n from './translations';
+import { ActionLicense } from '../../containers/types';
+
+export const getLicenseError = () => ({
+  title: i18n.PUSH_DISABLE_BY_LICENSE_TITLE,
+  description: (
+    <FormattedMessage
+      defaultMessage="To open cases in external systems, you must update your license to Platinum, start a free 30-day trial, or spin up a {link} on AWS, GCP, or Azure."
+      id="xpack.siem.case.caseView.pushToServiceDisableByLicenseDescription"
+      values={{
+        link: (
+          <EuiLink href="https://www.elastic.co/cloud/" target="_blank">
+            {i18n.LINK_CLOUD_DEPLOYMENT}
+          </EuiLink>
+        ),
+      }}
+    />
+  ),
+});
+
+export const getKibanaConfigError = () => ({
+  title: i18n.PUSH_DISABLE_BY_KIBANA_CONFIG_TITLE,
+  description: (
+    <FormattedMessage
+      defaultMessage="The kibana.yml file is configured to only allow specific connectors. To enable opening a case in external systems, add .[actionTypeId] (ex: .servicenow | .jira)  to the xpack.actions.enabledActiontypes setting. For more information, see {link}."
+      id="xpack.siem.case.caseView.pushToServiceDisableByConfigDescription"
+      values={{
+        link: (
+          <EuiLink href="#" target="_blank">
+            {'coming soon...'}
+          </EuiLink>
+        ),
+      }}
+    />
+  ),
+});
+
+export const getActionLicenseError = (
+  actionLicense: ActionLicense | null
+): Array<{ title: string; description: JSX.Element }> => {
+  let errors: Array<{ title: string; description: JSX.Element }> = [];
+  if (actionLicense != null && !actionLicense.enabledInLicense) {
+    errors = [...errors, getLicenseError()];
+  }
+  if (actionLicense != null && !actionLicense.enabledInConfig) {
+    errors = [...errors, getKibanaConfigError()];
+  }
+  return errors;
+};
diff --git a/x-pack/plugins/siem/public/cases/components/use_push_to_service/index.test.tsx b/x-pack/plugins/siem/public/cases/components/use_push_to_service/index.test.tsx
new file mode 100644
index 00000000000000..cb002019423127
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/components/use_push_to_service/index.test.tsx
@@ -0,0 +1,156 @@
+/*
+ * 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.
+ */
+/* eslint-disable react/display-name */
+import React from 'react';
+import { renderHook, act } from '@testing-library/react-hooks';
+import { usePushToService, ReturnUsePushToService, UsePushToService } from '.';
+import { TestProviders } from '../../../common/mock';
+import { usePostPushToService } from '../../containers/use_post_push_to_service';
+import { basicPush, actionLicenses } from '../../containers/mock';
+import * as i18n from './translations';
+import { useGetActionLicense } from '../../containers/use_get_action_license';
+import { getKibanaConfigError, getLicenseError } from './helpers';
+import { connectorsMock } from '../../containers/configure/mock';
+jest.mock('../../containers/use_get_action_license');
+jest.mock('../../containers/use_post_push_to_service');
+jest.mock('../../containers/configure/api');
+
+describe('usePushToService', () => {
+  const caseId = '12345';
+  const updateCase = jest.fn();
+  const postPushToService = jest.fn();
+  const mockPostPush = {
+    isLoading: false,
+    postPushToService,
+  };
+  const mockConnector = connectorsMock[0];
+  const actionLicense = actionLicenses[0];
+  const caseServices = {
+    '123': {
+      ...basicPush,
+      firstPushIndex: 0,
+      lastPushIndex: 0,
+      commentsToUpdate: [],
+      hasDataToPush: true,
+    },
+  };
+  const defaultArgs = {
+    caseConnectorId: mockConnector.id,
+    caseConnectorName: mockConnector.name,
+    caseId,
+    caseServices,
+    caseStatus: 'open',
+    connectors: connectorsMock,
+    updateCase,
+    userCanCrud: true,
+  };
+  beforeEach(() => {
+    jest.resetAllMocks();
+    (usePostPushToService as jest.Mock).mockImplementation(() => mockPostPush);
+    (useGetActionLicense as jest.Mock).mockImplementation(() => ({
+      isLoading: false,
+      actionLicense,
+    }));
+  });
+  it('push case button posts the push with correct args', async () => {
+    await act(async () => {
+      const { result, waitForNextUpdate } = renderHook<UsePushToService, ReturnUsePushToService>(
+        () => usePushToService(defaultArgs),
+        {
+          wrapper: ({ children }) => <TestProviders> {children}</TestProviders>,
+        }
+      );
+      await waitForNextUpdate();
+      result.current.pushButton.props.children.props.onClick();
+      expect(postPushToService).toBeCalledWith({
+        caseId,
+        caseServices,
+        connectorId: mockConnector.id,
+        connectorName: mockConnector.name,
+        updateCase,
+      });
+      expect(result.current.pushCallouts).toBeNull();
+    });
+  });
+  it('Displays message when user does not have premium license', async () => {
+    (useGetActionLicense as jest.Mock).mockImplementation(() => ({
+      isLoading: false,
+      actionLicense: {
+        ...actionLicense,
+        enabledInLicense: false,
+      },
+    }));
+    await act(async () => {
+      const { result, waitForNextUpdate } = renderHook<UsePushToService, ReturnUsePushToService>(
+        () => usePushToService(defaultArgs),
+        {
+          wrapper: ({ children }) => <TestProviders> {children}</TestProviders>,
+        }
+      );
+      await waitForNextUpdate();
+      const errorsMsg = result.current.pushCallouts?.props.messages;
+      expect(errorsMsg).toHaveLength(1);
+      expect(errorsMsg[0].title).toEqual(getLicenseError().title);
+    });
+  });
+  it('Displays message when user does not have case enabled in config', async () => {
+    (useGetActionLicense as jest.Mock).mockImplementation(() => ({
+      isLoading: false,
+      actionLicense: {
+        ...actionLicense,
+        enabledInConfig: false,
+      },
+    }));
+    await act(async () => {
+      const { result, waitForNextUpdate } = renderHook<UsePushToService, ReturnUsePushToService>(
+        () => usePushToService(defaultArgs),
+        {
+          wrapper: ({ children }) => <TestProviders> {children}</TestProviders>,
+        }
+      );
+      await waitForNextUpdate();
+      const errorsMsg = result.current.pushCallouts?.props.messages;
+      expect(errorsMsg).toHaveLength(1);
+      expect(errorsMsg[0].title).toEqual(getKibanaConfigError().title);
+    });
+  });
+  it('Displays message when user does not have a connector configured', async () => {
+    await act(async () => {
+      const { result, waitForNextUpdate } = renderHook<UsePushToService, ReturnUsePushToService>(
+        () =>
+          usePushToService({
+            ...defaultArgs,
+            caseConnectorId: 'none',
+          }),
+        {
+          wrapper: ({ children }) => <TestProviders> {children}</TestProviders>,
+        }
+      );
+      await waitForNextUpdate();
+      const errorsMsg = result.current.pushCallouts?.props.messages;
+      expect(errorsMsg).toHaveLength(1);
+      expect(errorsMsg[0].title).toEqual(i18n.PUSH_DISABLE_BY_NO_CASE_CONFIG_TITLE);
+    });
+  });
+  it('Displays message when case is closed', async () => {
+    await act(async () => {
+      const { result, waitForNextUpdate } = renderHook<UsePushToService, ReturnUsePushToService>(
+        () =>
+          usePushToService({
+            ...defaultArgs,
+            caseStatus: 'closed',
+          }),
+        {
+          wrapper: ({ children }) => <TestProviders> {children}</TestProviders>,
+        }
+      );
+      await waitForNextUpdate();
+      const errorsMsg = result.current.pushCallouts?.props.messages;
+      expect(errorsMsg).toHaveLength(1);
+      expect(errorsMsg[0].title).toEqual(i18n.PUSH_DISABLE_BECAUSE_CASE_CLOSED_TITLE);
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/cases/components/use_push_to_service/index.tsx b/x-pack/plugins/siem/public/cases/components/use_push_to_service/index.tsx
new file mode 100644
index 00000000000000..157639f011fef8
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/components/use_push_to_service/index.tsx
@@ -0,0 +1,174 @@
+/*
+ * 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 { EuiButton, EuiLink, EuiToolTip } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import React, { useCallback, useMemo } from 'react';
+
+import { Case } from '../../containers/types';
+import { useGetActionLicense } from '../../containers/use_get_action_license';
+import { usePostPushToService } from '../../containers/use_post_push_to_service';
+import { getConfigureCasesUrl } from '../../../common/components/link_to';
+import { useGetUrlSearch } from '../../../common/components/navigation/use_get_url_search';
+import { navTabs } from '../../../app/home/home_navigations';
+import { CaseCallOut } from '../callout';
+import { getLicenseError, getKibanaConfigError } from './helpers';
+import * as i18n from './translations';
+import { Connector } from '../../../../../case/common/api/cases';
+import { CaseServices } from '../../containers/use_get_case_user_actions';
+
+export interface UsePushToService {
+  caseId: string;
+  caseStatus: string;
+  caseConnectorId: string;
+  caseConnectorName: string;
+  caseServices: CaseServices;
+  connectors: Connector[];
+  updateCase: (newCase: Case) => void;
+  userCanCrud: boolean;
+}
+
+export interface ReturnUsePushToService {
+  pushButton: JSX.Element;
+  pushCallouts: JSX.Element | null;
+}
+
+export const usePushToService = ({
+  caseConnectorId,
+  caseConnectorName,
+  caseId,
+  caseServices,
+  caseStatus,
+  connectors,
+  updateCase,
+  userCanCrud,
+}: UsePushToService): ReturnUsePushToService => {
+  const urlSearch = useGetUrlSearch(navTabs.case);
+
+  const { isLoading, postPushToService } = usePostPushToService();
+
+  const { isLoading: loadingLicense, actionLicense } = useGetActionLicense();
+
+  const handlePushToService = useCallback(() => {
+    if (caseConnectorId != null && caseConnectorId !== 'none') {
+      postPushToService({
+        caseId,
+        caseServices,
+        connectorId: caseConnectorId,
+        connectorName: caseConnectorName,
+        updateCase,
+      });
+    }
+  }, [caseId, caseServices, caseConnectorId, caseConnectorName, postPushToService, updateCase]);
+
+  const errorsMsg = useMemo(() => {
+    let errors: Array<{ title: string; description: JSX.Element }> = [];
+    if (actionLicense != null && !actionLicense.enabledInLicense) {
+      errors = [...errors, getLicenseError()];
+    }
+    if (connectors.length === 0 && !loadingLicense) {
+      errors = [
+        ...errors,
+        {
+          title: i18n.PUSH_DISABLE_BY_NO_CONFIG_TITLE,
+          description: (
+            <FormattedMessage
+              defaultMessage="To open and update cases in external systems, you must configure a {link}."
+              id="xpack.siem.case.caseView.pushToServiceDisableByNoCaseConfigDescription"
+              values={{
+                link: (
+                  <EuiLink href={getConfigureCasesUrl(urlSearch)} target="_blank">
+                    {i18n.LINK_CONNECTOR_CONFIGURE}
+                  </EuiLink>
+                ),
+              }}
+            />
+          ),
+        },
+      ];
+    } else if (caseConnectorId === 'none' && !loadingLicense) {
+      errors = [
+        ...errors,
+        {
+          title: i18n.PUSH_DISABLE_BY_NO_CASE_CONFIG_TITLE,
+          description: (
+            <FormattedMessage
+              defaultMessage="To open and update cases in external systems, you must select an external incident management system for this case."
+              id="xpack.siem.case.caseView.pushToServiceDisableByNoCaseConfigDesc"
+            />
+          ),
+        },
+      ];
+    }
+    if (caseStatus === 'closed') {
+      errors = [
+        ...errors,
+        {
+          title: i18n.PUSH_DISABLE_BECAUSE_CASE_CLOSED_TITLE,
+          description: (
+            <FormattedMessage
+              defaultMessage="Closed cases cannot be sent to external systems. Reopen the case if you want to open or update it in an external system."
+              id="xpack.siem.case.caseView.pushToServiceDisableBecauseCaseClosedDescription"
+            />
+          ),
+        },
+      ];
+    }
+    if (actionLicense != null && !actionLicense.enabledInConfig) {
+      errors = [...errors, getKibanaConfigError()];
+    }
+    return errors;
+  }, [actionLicense, caseStatus, connectors.length, caseConnectorId, loadingLicense, urlSearch]);
+
+  const pushToServiceButton = useMemo(() => {
+    return (
+      <EuiButton
+        data-test-subj="push-to-external-service"
+        fill
+        iconType="importAction"
+        onClick={handlePushToService}
+        disabled={isLoading || loadingLicense || errorsMsg.length > 0 || !userCanCrud}
+        isLoading={isLoading}
+      >
+        {caseServices[caseConnectorId]
+          ? i18n.UPDATE_THIRD(caseConnectorName)
+          : i18n.PUSH_THIRD(caseConnectorName)}
+      </EuiButton>
+    );
+  }, [
+    caseConnectorId,
+    caseConnectorName,
+    connectors,
+    errorsMsg,
+    handlePushToService,
+    isLoading,
+    loadingLicense,
+    userCanCrud,
+  ]);
+
+  const objToReturn = useMemo(() => {
+    return {
+      pushButton:
+        errorsMsg.length > 0 ? (
+          <EuiToolTip
+            position="top"
+            title={errorsMsg[0].title}
+            content={<p>{errorsMsg[0].description}</p>}
+          >
+            {pushToServiceButton}
+          </EuiToolTip>
+        ) : (
+          <>{pushToServiceButton}</>
+        ),
+      pushCallouts:
+        errorsMsg.length > 0 ? (
+          <CaseCallOut title={i18n.ERROR_PUSH_SERVICE_CALLOUT_TITLE} messages={errorsMsg} />
+        ) : null,
+    };
+  }, [errorsMsg, pushToServiceButton]);
+
+  return objToReturn;
+};
diff --git a/x-pack/plugins/siem/public/pages/case/components/use_push_to_service/translations.ts b/x-pack/plugins/siem/public/cases/components/use_push_to_service/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/case/components/use_push_to_service/translations.ts
rename to x-pack/plugins/siem/public/cases/components/use_push_to_service/translations.ts
diff --git a/x-pack/plugins/siem/public/cases/components/user_action_tree/helpers.test.tsx b/x-pack/plugins/siem/public/cases/components/user_action_tree/helpers.test.tsx
new file mode 100644
index 00000000000000..678bd54975144b
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/components/user_action_tree/helpers.test.tsx
@@ -0,0 +1,169 @@
+/*
+ * 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 { basicPush, getUserAction } from '../../containers/mock';
+import { getLabelTitle } from './helpers';
+import * as i18n from '../case_view/translations';
+import { mount } from 'enzyme';
+import { connectorsMock } from '../../containers/configure/mock';
+
+describe('User action tree helpers', () => {
+  const connectors = connectorsMock;
+  it('label title generated for update tags', () => {
+    const action = getUserAction(['title'], 'update');
+    const result: string | JSX.Element = getLabelTitle({
+      action,
+      connectors,
+      field: 'tags',
+      firstPush: false,
+    });
+
+    const wrapper = mount(<>{result}</>);
+    expect(
+      wrapper
+        .find(`[data-test-subj="ua-tags-label"]`)
+        .first()
+        .text()
+    ).toEqual(` ${i18n.TAGS.toLowerCase()}`);
+
+    expect(
+      wrapper
+        .find(`[data-test-subj="ua-tag"]`)
+        .first()
+        .text()
+    ).toEqual(action.newValue);
+  });
+  it('label title generated for update title', () => {
+    const action = getUserAction(['title'], 'update');
+    const result: string | JSX.Element = getLabelTitle({
+      action,
+      connectors,
+      field: 'title',
+      firstPush: false,
+    });
+
+    expect(result).toEqual(
+      `${i18n.CHANGED_FIELD.toLowerCase()} ${i18n.CASE_NAME.toLowerCase()}  ${i18n.TO} "${
+        action.newValue
+      }"`
+    );
+  });
+  it('label title generated for update description', () => {
+    const action = getUserAction(['description'], 'update');
+    const result: string | JSX.Element = getLabelTitle({
+      action,
+      connectors,
+      field: 'description',
+      firstPush: false,
+    });
+
+    expect(result).toEqual(`${i18n.EDITED_FIELD} ${i18n.DESCRIPTION.toLowerCase()}`);
+  });
+  it('label title generated for update status to open', () => {
+    const action = { ...getUserAction(['status'], 'update'), newValue: 'open' };
+    const result: string | JSX.Element = getLabelTitle({
+      action,
+      connectors,
+      field: 'status',
+      firstPush: false,
+    });
+
+    expect(result).toEqual(`${i18n.REOPENED_CASE.toLowerCase()} ${i18n.CASE}`);
+  });
+  it('label title generated for update status to closed', () => {
+    const action = { ...getUserAction(['status'], 'update'), newValue: 'closed' };
+    const result: string | JSX.Element = getLabelTitle({
+      action,
+      connectors,
+      field: 'status',
+      firstPush: false,
+    });
+
+    expect(result).toEqual(`${i18n.CLOSED_CASE.toLowerCase()} ${i18n.CASE}`);
+  });
+  it('label title generated for update comment', () => {
+    const action = getUserAction(['comment'], 'update');
+    const result: string | JSX.Element = getLabelTitle({
+      action,
+      connectors,
+      field: 'comment',
+      firstPush: false,
+    });
+
+    expect(result).toEqual(`${i18n.EDITED_FIELD} ${i18n.COMMENT.toLowerCase()}`);
+  });
+  it('label title generated for pushed incident', () => {
+    const action = getUserAction(['pushed'], 'push-to-service');
+    const result: string | JSX.Element = getLabelTitle({
+      action,
+      connectors,
+      field: 'pushed',
+      firstPush: true,
+    });
+
+    const wrapper = mount(<>{result}</>);
+    expect(
+      wrapper
+        .find(`[data-test-subj="pushed-label"]`)
+        .first()
+        .text()
+    ).toEqual(`${i18n.PUSHED_NEW_INCIDENT} ${basicPush.connectorName}`);
+    expect(
+      wrapper
+        .find(`[data-test-subj="pushed-value"]`)
+        .first()
+        .prop('href')
+    ).toEqual(JSON.parse(action.newValue).external_url);
+  });
+  it('label title generated for needs update incident', () => {
+    const action = getUserAction(['pushed'], 'push-to-service');
+    const result: string | JSX.Element = getLabelTitle({
+      action,
+      connectors,
+      field: 'pushed',
+      firstPush: false,
+    });
+
+    const wrapper = mount(<>{result}</>);
+    expect(
+      wrapper
+        .find(`[data-test-subj="pushed-label"]`)
+        .first()
+        .text()
+    ).toEqual(`${i18n.UPDATE_INCIDENT} ${basicPush.connectorName}`);
+    expect(
+      wrapper
+        .find(`[data-test-subj="pushed-value"]`)
+        .first()
+        .prop('href')
+    ).toEqual(JSON.parse(action.newValue).external_url);
+  });
+  it('label title generated for update connector', () => {
+    const action = getUserAction(['connector_id'], 'update');
+    const result: string | JSX.Element = getLabelTitle({
+      action,
+      connectors,
+      field: 'tags',
+      firstPush: false,
+    });
+
+    const wrapper = mount(<>{result}</>);
+    expect(
+      wrapper
+        .find(`[data-test-subj="ua-tags-label"]`)
+        .first()
+        .text()
+    ).toEqual(` ${i18n.TAGS.toLowerCase()}`);
+
+    expect(
+      wrapper
+        .find(`[data-test-subj="ua-tag"]`)
+        .first()
+        .text()
+    ).toEqual(action.newValue);
+  });
+});
diff --git a/x-pack/plugins/siem/public/cases/components/user_action_tree/helpers.tsx b/x-pack/plugins/siem/public/cases/components/user_action_tree/helpers.tsx
new file mode 100644
index 00000000000000..58c176ed96b5d2
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/components/user_action_tree/helpers.tsx
@@ -0,0 +1,80 @@
+/*
+ * 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 { EuiFlexGroup, EuiFlexItem, EuiBadge, EuiLink } from '@elastic/eui';
+import React from 'react';
+
+import { CaseFullExternalService, Connector } from '../../../../../case/common/api';
+import { CaseUserActions } from '../../containers/types';
+import * as i18n from '../case_view/translations';
+
+interface LabelTitle {
+  action: CaseUserActions;
+  connectors: Connector[];
+  field: string;
+  firstPush: boolean;
+}
+
+export const getLabelTitle = ({ action, connectors, field, firstPush }: LabelTitle) => {
+  if (field === 'tags') {
+    return getTagsLabelTitle(action);
+  } else if (field === 'title' && action.action === 'update') {
+    return `${i18n.CHANGED_FIELD.toLowerCase()} ${i18n.CASE_NAME.toLowerCase()}  ${i18n.TO} "${
+      action.newValue
+    }"`;
+  } else if (field === 'connector_id' && action.action === 'update') {
+    const newConnector = connectors.find(c => c.id === action.newValue);
+    return action.newValue != null && action.newValue !== 'none' && newConnector != null
+      ? i18n.SELECTED_THIRD_PARTY(newConnector.name)
+      : i18n.REMOVED_THIRD_PARTY;
+  } else if (field === 'description' && action.action === 'update') {
+    return `${i18n.EDITED_FIELD} ${i18n.DESCRIPTION.toLowerCase()}`;
+  } else if (field === 'status' && action.action === 'update') {
+    return `${
+      action.newValue === 'open' ? i18n.REOPENED_CASE.toLowerCase() : i18n.CLOSED_CASE.toLowerCase()
+    } ${i18n.CASE}`;
+  } else if (field === 'comment' && action.action === 'update') {
+    return `${i18n.EDITED_FIELD} ${i18n.COMMENT.toLowerCase()}`;
+  } else if (field === 'pushed' && action.action === 'push-to-service' && action.newValue != null) {
+    return getPushedServiceLabelTitle(action, firstPush);
+  }
+  return '';
+};
+
+const getTagsLabelTitle = (action: CaseUserActions) => (
+  <EuiFlexGroup alignItems="baseline" gutterSize="xs" component="span">
+    <EuiFlexItem data-test-subj="ua-tags-label">
+      {action.action === 'add' && i18n.ADDED_FIELD}
+      {action.action === 'delete' && i18n.REMOVED_FIELD} {i18n.TAGS.toLowerCase()}
+    </EuiFlexItem>
+    {action.newValue != null &&
+      action.newValue.split(',').map(tag => (
+        <EuiFlexItem grow={false} key={tag}>
+          <EuiBadge data-test-subj={`ua-tag`} color="default">
+            {tag}
+          </EuiBadge>
+        </EuiFlexItem>
+      ))}
+  </EuiFlexGroup>
+);
+
+const getPushedServiceLabelTitle = (action: CaseUserActions, firstPush: boolean) => {
+  const pushedVal = JSON.parse(action.newValue ?? '') as CaseFullExternalService;
+  return (
+    <EuiFlexGroup alignItems="baseline" gutterSize="xs" data-test-subj="pushed-service-label-title">
+      <EuiFlexItem data-test-subj="pushed-label">
+        {`${firstPush ? i18n.PUSHED_NEW_INCIDENT : i18n.UPDATE_INCIDENT} ${
+          pushedVal?.connector_name
+        }`}
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiLink data-test-subj="pushed-value" href={pushedVal?.external_url} target="_blank">
+          {pushedVal?.external_title}
+        </EuiLink>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
diff --git a/x-pack/plugins/siem/public/cases/components/user_action_tree/index.test.tsx b/x-pack/plugins/siem/public/cases/components/user_action_tree/index.test.tsx
new file mode 100644
index 00000000000000..d3e8ea6563b2c5
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/components/user_action_tree/index.test.tsx
@@ -0,0 +1,343 @@
+/*
+ * 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 { mount } from 'enzyme';
+
+import { Router, routeData, mockHistory, mockLocation } from '../__mock__/router';
+import { getFormMock, useFormMock } from '../__mock__/form';
+import { useUpdateComment } from '../../containers/use_update_comment';
+import { basicCase, basicPush, getUserAction } from '../../containers/mock';
+import { UserActionTree } from '.';
+import { TestProviders } from '../../../common/mock';
+import { wait } from '../../../common/lib/helpers';
+import { act } from 'react-dom/test-utils';
+
+const fetchUserActions = jest.fn();
+const onUpdateField = jest.fn();
+const updateCase = jest.fn();
+const defaultProps = {
+  caseServices: {},
+  caseUserActions: [],
+  connectors: [],
+  data: basicCase,
+  fetchUserActions,
+  isLoadingDescription: false,
+  isLoadingUserActions: false,
+  onUpdateField,
+  updateCase,
+  userCanCrud: true,
+};
+const useUpdateCommentMock = useUpdateComment as jest.Mock;
+jest.mock('../../containers/use_update_comment');
+
+const patchComment = jest.fn();
+describe('UserActionTree ', () => {
+  const sampleData = {
+    content: 'what a great comment update',
+  };
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.resetAllMocks();
+    useUpdateCommentMock.mockImplementation(() => ({
+      isLoadingIds: [],
+      patchComment,
+    }));
+    const formHookMock = getFormMock(sampleData);
+    useFormMock.mockImplementation(() => ({ form: formHookMock }));
+    jest.spyOn(routeData, 'useLocation').mockReturnValue(mockLocation);
+  });
+
+  it('Loading spinner when user actions loading and displays fullName/username', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <UserActionTree {...{ ...defaultProps, isLoadingUserActions: true }} />
+        </Router>
+      </TestProviders>
+    );
+    expect(wrapper.find(`[data-test-subj="user-actions-loading"]`).exists()).toBeTruthy();
+
+    expect(
+      wrapper
+        .find(`[data-test-subj="user-action-avatar"]`)
+        .first()
+        .prop('name')
+    ).toEqual(defaultProps.data.createdBy.fullName);
+    expect(
+      wrapper
+        .find(`[data-test-subj="user-action-title"] strong`)
+        .first()
+        .text()
+    ).toEqual(defaultProps.data.createdBy.username);
+  });
+  it('Renders service now update line with top and bottom when push is required', () => {
+    const ourActions = [
+      getUserAction(['pushed'], 'push-to-service'),
+      getUserAction(['comment'], 'update'),
+    ];
+    const props = {
+      ...defaultProps,
+      caseServices: {
+        '123': {
+          ...basicPush,
+          firstPushIndex: 0,
+          lastPushIndex: 0,
+          commentsToUpdate: [`${ourActions[ourActions.length - 1].commentId}`],
+          hasDataToPush: true,
+        },
+      },
+      caseUserActions: ourActions,
+    };
+    const wrapper = mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <UserActionTree {...props} />
+        </Router>
+      </TestProviders>
+    );
+    expect(wrapper.find(`[data-test-subj="show-top-footer"]`).exists()).toBeTruthy();
+    expect(wrapper.find(`[data-test-subj="show-bottom-footer"]`).exists()).toBeTruthy();
+  });
+  it('Renders service now update line with top only when push is up to date', () => {
+    const ourActions = [getUserAction(['pushed'], 'push-to-service')];
+    const props = {
+      ...defaultProps,
+      caseUserActions: ourActions,
+      caseServices: {
+        '123': {
+          ...basicPush,
+          firstPushIndex: 0,
+          lastPushIndex: 0,
+          commentsToUpdate: [],
+          hasDataToPush: false,
+        },
+      },
+    };
+    const wrapper = mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <UserActionTree {...props} />
+        </Router>
+      </TestProviders>
+    );
+    expect(wrapper.find(`[data-test-subj="show-top-footer"]`).exists()).toBeTruthy();
+    expect(wrapper.find(`[data-test-subj="show-bottom-footer"]`).exists()).toBeFalsy();
+  });
+
+  it('Outlines comment when update move to link is clicked', () => {
+    const ourActions = [getUserAction(['comment'], 'create'), getUserAction(['comment'], 'update')];
+    const props = {
+      ...defaultProps,
+      caseUserActions: ourActions,
+    };
+    const wrapper = mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <UserActionTree {...props} />
+        </Router>
+      </TestProviders>
+    );
+    expect(
+      wrapper
+        .find(`[data-test-subj="comment-create-action"]`)
+        .first()
+        .prop('idToOutline')
+    ).toEqual('');
+    wrapper
+      .find(`[data-test-subj="comment-update-action"] [data-test-subj="move-to-link"]`)
+      .first()
+      .simulate('click');
+    expect(
+      wrapper
+        .find(`[data-test-subj="comment-create-action"]`)
+        .first()
+        .prop('idToOutline')
+    ).toEqual(ourActions[0].commentId);
+  });
+
+  it('Switches to markdown when edit is clicked and back to panel when canceled', () => {
+    const ourActions = [getUserAction(['comment'], 'create')];
+    const props = {
+      ...defaultProps,
+      caseUserActions: ourActions,
+    };
+    const wrapper = mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <UserActionTree {...props} />
+        </Router>
+      </TestProviders>
+    );
+    expect(
+      wrapper
+        .find(
+          `[data-test-subj="user-action-${props.data.comments[0].id}"] [data-test-subj="user-action-markdown-form"]`
+        )
+        .exists()
+    ).toEqual(false);
+    wrapper
+      .find(`[data-test-subj="comment-create-action"] [data-test-subj="property-actions-ellipses"]`)
+      .first()
+      .simulate('click');
+    wrapper
+      .find(`[data-test-subj="comment-create-action"] [data-test-subj="property-actions-pencil"]`)
+      .first()
+      .simulate('click');
+    expect(
+      wrapper
+        .find(
+          `[data-test-subj="user-action-${props.data.comments[0].id}"] [data-test-subj="user-action-markdown-form"]`
+        )
+        .exists()
+    ).toEqual(true);
+    wrapper
+      .find(
+        `[data-test-subj="user-action-${props.data.comments[0].id}"] [data-test-subj="user-action-cancel-markdown"]`
+      )
+      .first()
+      .simulate('click');
+    expect(
+      wrapper
+        .find(
+          `[data-test-subj="user-action-${props.data.comments[0].id}"] [data-test-subj="user-action-markdown-form"]`
+        )
+        .exists()
+    ).toEqual(false);
+  });
+
+  it('calls update comment when comment markdown is saved', async () => {
+    const ourActions = [getUserAction(['comment'], 'create')];
+    const props = {
+      ...defaultProps,
+      caseUserActions: ourActions,
+    };
+    const wrapper = mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <UserActionTree {...props} />
+        </Router>
+      </TestProviders>
+    );
+    wrapper
+      .find(`[data-test-subj="comment-create-action"] [data-test-subj="property-actions-ellipses"]`)
+      .first()
+      .simulate('click');
+    wrapper
+      .find(`[data-test-subj="comment-create-action"] [data-test-subj="property-actions-pencil"]`)
+      .first()
+      .simulate('click');
+    wrapper
+      .find(
+        `[data-test-subj="user-action-${props.data.comments[0].id}"] [data-test-subj="user-action-save-markdown"]`
+      )
+      .first()
+      .simulate('click');
+    await act(async () => {
+      await wait();
+      wrapper.update();
+      expect(
+        wrapper
+          .find(
+            `[data-test-subj="user-action-${props.data.comments[0].id}"] [data-test-subj="user-action-markdown-form"]`
+          )
+          .exists()
+      ).toEqual(false);
+      expect(patchComment).toBeCalledWith({
+        commentUpdate: sampleData.content,
+        caseId: props.data.id,
+        commentId: props.data.comments[0].id,
+        fetchUserActions,
+        updateCase,
+        version: props.data.comments[0].version,
+      });
+    });
+  });
+
+  it('calls update description when description markdown is saved', async () => {
+    const props = defaultProps;
+    const wrapper = mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <UserActionTree {...props} />
+        </Router>
+      </TestProviders>
+    );
+    wrapper
+      .find(`[data-test-subj="description-action"] [data-test-subj="property-actions-ellipses"]`)
+      .first()
+      .simulate('click');
+    wrapper
+      .find(`[data-test-subj="description-action"] [data-test-subj="property-actions-pencil"]`)
+      .first()
+      .simulate('click');
+    wrapper
+      .find(
+        `[data-test-subj="user-action-description"] [data-test-subj="user-action-save-markdown"]`
+      )
+      .first()
+      .simulate('click');
+    await act(async () => {
+      await wait();
+      expect(
+        wrapper
+          .find(
+            `[data-test-subj="user-action-${props.data.id}"] [data-test-subj="user-action-markdown-form"]`
+          )
+          .exists()
+      ).toEqual(false);
+      expect(onUpdateField).toBeCalledWith('description', sampleData.content);
+    });
+  });
+
+  it('quotes', async () => {
+    const commentData = {
+      comment: '',
+    };
+    const formHookMock = getFormMock(commentData);
+    const setFieldValue = jest.fn();
+    useFormMock.mockImplementation(() => ({ form: { ...formHookMock, setFieldValue } }));
+    const props = defaultProps;
+    const wrapper = mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <UserActionTree {...props} />
+        </Router>
+      </TestProviders>
+    );
+    wrapper
+      .find(`[data-test-subj="description-action"] [data-test-subj="property-actions-ellipses"]`)
+      .first()
+      .simulate('click');
+    wrapper
+      .find(`[data-test-subj="description-action"] [data-test-subj="property-actions-quote"]`)
+      .first()
+      .simulate('click');
+    expect(setFieldValue).toBeCalledWith('comment', `> ${props.data.description} \n`);
+  });
+  it('Outlines comment when url param is provided', () => {
+    const commentId = 'neat-comment-id';
+    const ourActions = [getUserAction(['comment'], 'create')];
+    const props = {
+      ...defaultProps,
+      caseUserActions: ourActions,
+    };
+    jest.spyOn(routeData, 'useParams').mockReturnValue({ commentId });
+    const wrapper = mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <UserActionTree {...props} />
+        </Router>
+      </TestProviders>
+    );
+    expect(
+      wrapper
+        .find(`[data-test-subj="comment-create-action"]`)
+        .first()
+        .prop('idToOutline')
+    ).toEqual(commentId);
+  });
+});
diff --git a/x-pack/plugins/siem/public/cases/components/user_action_tree/index.tsx b/x-pack/plugins/siem/public/cases/components/user_action_tree/index.tsx
new file mode 100644
index 00000000000000..3a909636bc0484
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/components/user_action_tree/index.tsx
@@ -0,0 +1,303 @@
+/*
+ * 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 { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
+import React, { useCallback, useMemo, useRef, useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import styled from 'styled-components';
+
+import * as i18n from '../case_view/translations';
+
+import { Case, CaseUserActions } from '../../containers/types';
+import { useUpdateComment } from '../../containers/use_update_comment';
+import { useCurrentUser } from '../../../common/lib/kibana';
+import { AddComment } from '../add_comment';
+import { getLabelTitle } from './helpers';
+import { UserActionItem } from './user_action_item';
+import { UserActionMarkdown } from './user_action_markdown';
+import { Connector } from '../../../../../case/common/api/cases';
+import { CaseServices } from '../../containers/use_get_case_user_actions';
+import { parseString } from '../../containers/utils';
+
+export interface UserActionTreeProps {
+  caseServices: CaseServices;
+  caseUserActions: CaseUserActions[];
+  connectors: Connector[];
+  data: Case;
+  fetchUserActions: () => void;
+  isLoadingDescription: boolean;
+  isLoadingUserActions: boolean;
+  onUpdateField: (updateKey: keyof Case, updateValue: string | string[]) => void;
+  updateCase: (newCase: Case) => void;
+  userCanCrud: boolean;
+}
+
+const MyEuiFlexGroup = styled(EuiFlexGroup)`
+  margin-bottom: 8px;
+`;
+
+const DESCRIPTION_ID = 'description';
+const NEW_ID = 'newComment';
+
+export const UserActionTree = React.memo(
+  ({
+    data: caseData,
+    caseServices,
+    caseUserActions,
+    connectors,
+    fetchUserActions,
+    isLoadingDescription,
+    isLoadingUserActions,
+    onUpdateField,
+    updateCase,
+    userCanCrud,
+  }: UserActionTreeProps) => {
+    const { commentId } = useParams();
+    const handlerTimeoutId = useRef(0);
+    const [initLoading, setInitLoading] = useState(true);
+    const [selectedOutlineCommentId, setSelectedOutlineCommentId] = useState('');
+    const { isLoadingIds, patchComment } = useUpdateComment();
+    const currentUser = useCurrentUser();
+    const [manageMarkdownEditIds, setManangeMardownEditIds] = useState<string[]>([]);
+    const [insertQuote, setInsertQuote] = useState<string | null>(null);
+    const handleManageMarkdownEditId = useCallback(
+      (id: string) => {
+        if (!manageMarkdownEditIds.includes(id)) {
+          setManangeMardownEditIds([...manageMarkdownEditIds, id]);
+        } else {
+          setManangeMardownEditIds(manageMarkdownEditIds.filter(myId => id !== myId));
+        }
+      },
+      [manageMarkdownEditIds]
+    );
+
+    const handleSaveComment = useCallback(
+      ({ id, version }: { id: string; version: string }, content: string) => {
+        patchComment({
+          caseId: caseData.id,
+          commentId: id,
+          commentUpdate: content,
+          fetchUserActions,
+          version,
+          updateCase,
+        });
+      },
+      [caseData, handleManageMarkdownEditId, patchComment, updateCase]
+    );
+
+    const handleOutlineComment = useCallback(
+      (id: string) => {
+        const moveToTarget = document.getElementById(`${id}-permLink`);
+        if (moveToTarget != null) {
+          const yOffset = -60;
+          const y = moveToTarget.getBoundingClientRect().top + window.pageYOffset + yOffset;
+          window.scrollTo({
+            top: y,
+            behavior: 'smooth',
+          });
+          if (id === 'add-comment') {
+            moveToTarget.getElementsByTagName('textarea')[0].focus();
+          }
+        }
+        window.clearTimeout(handlerTimeoutId.current);
+        setSelectedOutlineCommentId(id);
+        handlerTimeoutId.current = window.setTimeout(() => {
+          setSelectedOutlineCommentId('');
+          window.clearTimeout(handlerTimeoutId.current);
+        }, 2400);
+      },
+      [handlerTimeoutId.current]
+    );
+
+    const handleManageQuote = useCallback(
+      (quote: string) => {
+        const addCarrots = quote.replace(new RegExp('\r?\n', 'g'), '  \n> ');
+        setInsertQuote(`> ${addCarrots} \n`);
+        handleOutlineComment('add-comment');
+      },
+      [handleOutlineComment]
+    );
+
+    const handleUpdate = useCallback(
+      (newCase: Case) => {
+        updateCase(newCase);
+        fetchUserActions();
+      },
+      [fetchUserActions, updateCase]
+    );
+
+    const MarkdownDescription = useMemo(
+      () => (
+        <UserActionMarkdown
+          id={DESCRIPTION_ID}
+          content={caseData.description}
+          isEditable={manageMarkdownEditIds.includes(DESCRIPTION_ID)}
+          onSaveContent={(content: string) => {
+            onUpdateField(DESCRIPTION_ID, content);
+          }}
+          onChangeEditable={handleManageMarkdownEditId}
+        />
+      ),
+      [caseData.description, handleManageMarkdownEditId, manageMarkdownEditIds, onUpdateField]
+    );
+
+    const MarkdownNewComment = useMemo(
+      () => (
+        <AddComment
+          caseId={caseData.id}
+          disabled={!userCanCrud}
+          insertQuote={insertQuote}
+          onCommentPosted={handleUpdate}
+          onCommentSaving={handleManageMarkdownEditId.bind(null, NEW_ID)}
+          showLoading={false}
+        />
+      ),
+      [caseData.id, handleUpdate, insertQuote, userCanCrud]
+    );
+
+    useEffect(() => {
+      if (initLoading && !isLoadingUserActions && isLoadingIds.length === 0) {
+        setInitLoading(false);
+        if (commentId != null) {
+          handleOutlineComment(commentId);
+        }
+      }
+    }, [commentId, initLoading, isLoadingUserActions, isLoadingIds]);
+    return (
+      <>
+        <UserActionItem
+          createdAt={caseData.createdAt}
+          data-test-subj="description-action"
+          disabled={!userCanCrud}
+          id={DESCRIPTION_ID}
+          isEditable={manageMarkdownEditIds.includes(DESCRIPTION_ID)}
+          isLoading={isLoadingDescription}
+          labelEditAction={i18n.EDIT_DESCRIPTION}
+          labelQuoteAction={i18n.QUOTE}
+          labelTitle={<>{i18n.ADDED_DESCRIPTION}</>}
+          fullName={caseData.createdBy.fullName ?? caseData.createdBy.username ?? ''}
+          markdown={MarkdownDescription}
+          onEdit={handleManageMarkdownEditId.bind(null, DESCRIPTION_ID)}
+          onQuote={handleManageQuote.bind(null, caseData.description)}
+          username={caseData.createdBy.username ?? i18n.UNKNOWN}
+        />
+
+        {caseUserActions.map((action, index) => {
+          if (action.commentId != null && action.action === 'create') {
+            const comment = caseData.comments.find(c => c.id === action.commentId);
+            if (comment != null) {
+              return (
+                <UserActionItem
+                  key={action.actionId}
+                  createdAt={comment.createdAt}
+                  data-test-subj={`comment-create-action`}
+                  disabled={!userCanCrud}
+                  id={comment.id}
+                  idToOutline={selectedOutlineCommentId}
+                  isEditable={manageMarkdownEditIds.includes(comment.id)}
+                  isLoading={isLoadingIds.includes(comment.id)}
+                  labelEditAction={i18n.EDIT_COMMENT}
+                  labelQuoteAction={i18n.QUOTE}
+                  labelTitle={<>{i18n.ADDED_COMMENT}</>}
+                  fullName={comment.createdBy.fullName ?? comment.createdBy.username ?? ''}
+                  markdown={
+                    <UserActionMarkdown
+                      id={comment.id}
+                      content={comment.comment}
+                      isEditable={manageMarkdownEditIds.includes(comment.id)}
+                      onChangeEditable={handleManageMarkdownEditId}
+                      onSaveContent={handleSaveComment.bind(null, {
+                        id: comment.id,
+                        version: comment.version,
+                      })}
+                    />
+                  }
+                  onEdit={handleManageMarkdownEditId.bind(null, comment.id)}
+                  onQuote={handleManageQuote.bind(null, comment.comment)}
+                  outlineComment={handleOutlineComment}
+                  username={comment.createdBy.username ?? ''}
+                  updatedAt={comment.updatedAt}
+                />
+              );
+            }
+          }
+          if (action.actionField.length === 1) {
+            const myField = action.actionField[0];
+            const parsedValue = parseString(`${action.newValue}`);
+            const { firstPush, parsedConnectorId, parsedConnectorName } =
+              parsedValue != null
+                ? {
+                    firstPush: caseServices[parsedValue.connector_id].firstPushIndex === index,
+                    parsedConnectorId: parsedValue.connector_id,
+                    parsedConnectorName: parsedValue.connector_name,
+                  }
+                : {
+                    firstPush: false,
+                    parsedConnectorId: 'none',
+                    parsedConnectorName: 'none',
+                  };
+            const labelTitle: string | JSX.Element = getLabelTitle({
+              action,
+              field: myField,
+              firstPush,
+              connectors,
+            });
+
+            return (
+              <UserActionItem
+                key={action.actionId}
+                caseConnectorName={parsedConnectorName}
+                createdAt={action.actionAt}
+                data-test-subj={`${action.actionField[0]}-${action.action}-action`}
+                disabled={!userCanCrud}
+                id={action.actionId}
+                isEditable={false}
+                isLoading={false}
+                labelTitle={<>{labelTitle}</>}
+                linkId={
+                  action.action === 'update' && action.commentId != null ? action.commentId : null
+                }
+                fullName={action.actionBy.fullName ?? action.actionBy.username ?? ''}
+                outlineComment={handleOutlineComment}
+                showTopFooter={
+                  action.action === 'push-to-service' &&
+                  index === caseServices[parsedConnectorId].lastPushIndex
+                }
+                showBottomFooter={
+                  action.action === 'push-to-service' &&
+                  index === caseServices[parsedConnectorId].lastPushIndex &&
+                  caseServices[parsedConnectorId].hasDataToPush
+                }
+                username={action.actionBy.username ?? ''}
+              />
+            );
+          }
+          return null;
+        })}
+        {(isLoadingUserActions || isLoadingIds.includes(NEW_ID)) && (
+          <MyEuiFlexGroup justifyContent="center" alignItems="center">
+            <EuiFlexItem grow={false}>
+              <EuiLoadingSpinner data-test-subj="user-actions-loading" size="l" />
+            </EuiFlexItem>
+          </MyEuiFlexGroup>
+        )}
+        <UserActionItem
+          data-test-subj={`add-comment`}
+          createdAt={new Date().toISOString()}
+          disabled={!userCanCrud}
+          id={NEW_ID}
+          isEditable={true}
+          isLoading={isLoadingIds.includes(NEW_ID)}
+          fullName={currentUser != null ? currentUser.fullName ?? '' : ''}
+          markdown={MarkdownNewComment}
+          username={currentUser != null ? currentUser.username ?? '' : ''}
+        />
+      </>
+    );
+  }
+);
+
+UserActionTree.displayName = 'UserActionTree';
diff --git a/x-pack/plugins/siem/public/pages/case/components/user_action_tree/schema.ts b/x-pack/plugins/siem/public/cases/components/user_action_tree/schema.ts
similarity index 96%
rename from x-pack/plugins/siem/public/pages/case/components/user_action_tree/schema.ts
rename to x-pack/plugins/siem/public/cases/components/user_action_tree/schema.ts
index a9e6bf84a1a1e0..7a2777037023ad 100644
--- a/x-pack/plugins/siem/public/pages/case/components/user_action_tree/schema.ts
+++ b/x-pack/plugins/siem/public/cases/components/user_action_tree/schema.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { FIELD_TYPES, fieldValidators, FormSchema } from '../../../../shared_imports';
+import { FIELD_TYPES, fieldValidators, FormSchema } from '../../../shared_imports';
 import * as i18n from '../../translations';
 
 const { emptyField } = fieldValidators;
diff --git a/x-pack/plugins/siem/public/pages/case/components/user_action_tree/translations.ts b/x-pack/plugins/siem/public/cases/components/user_action_tree/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/case/components/user_action_tree/translations.ts
rename to x-pack/plugins/siem/public/cases/components/user_action_tree/translations.ts
diff --git a/x-pack/plugins/siem/public/pages/case/components/user_action_tree/user_action_avatar.tsx b/x-pack/plugins/siem/public/cases/components/user_action_tree/user_action_avatar.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/case/components/user_action_tree/user_action_avatar.tsx
rename to x-pack/plugins/siem/public/cases/components/user_action_tree/user_action_avatar.tsx
diff --git a/x-pack/plugins/siem/public/pages/case/components/user_action_tree/user_action_item.tsx b/x-pack/plugins/siem/public/cases/components/user_action_tree/user_action_item.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/case/components/user_action_tree/user_action_item.tsx
rename to x-pack/plugins/siem/public/cases/components/user_action_tree/user_action_item.tsx
diff --git a/x-pack/plugins/siem/public/pages/case/components/user_action_tree/user_action_markdown.tsx b/x-pack/plugins/siem/public/cases/components/user_action_tree/user_action_markdown.tsx
similarity index 87%
rename from x-pack/plugins/siem/public/pages/case/components/user_action_tree/user_action_markdown.tsx
rename to x-pack/plugins/siem/public/cases/components/user_action_tree/user_action_markdown.tsx
index 827fe2df120abd..23d8d8f1a7e680 100644
--- a/x-pack/plugins/siem/public/pages/case/components/user_action_tree/user_action_markdown.tsx
+++ b/x-pack/plugins/siem/public/cases/components/user_action_tree/user_action_markdown.tsx
@@ -9,12 +9,12 @@ import React, { useCallback } from 'react';
 import styled, { css } from 'styled-components';
 
 import * as i18n from '../case_view/translations';
-import { Markdown } from '../../../../components/markdown';
-import { Form, useForm, UseField } from '../../../../shared_imports';
+import { Markdown } from '../../../common/components/markdown';
+import { Form, useForm, UseField } from '../../../shared_imports';
 import { schema, Content } from './schema';
-import { InsertTimelinePopover } from '../../../../components/timeline/insert_timeline_popover';
-import { useInsertTimeline } from '../../../../components/timeline/insert_timeline_popover/use_insert_timeline';
-import { MarkdownEditorForm } from '../../../../components/markdown_editor/form';
+import { InsertTimelinePopover } from '../../../timelines/components/timeline/insert_timeline_popover';
+import { useInsertTimeline } from '../../../timelines/components/timeline/insert_timeline_popover/use_insert_timeline';
+import { MarkdownEditorForm } from '../../../common/components//markdown_editor/form';
 
 const ContentWrapper = styled.div`
   ${({ theme }) => css`
diff --git a/x-pack/plugins/siem/public/pages/case/components/user_action_tree/user_action_title.test.tsx b/x-pack/plugins/siem/public/cases/components/user_action_tree/user_action_title.test.tsx
similarity index 92%
rename from x-pack/plugins/siem/public/pages/case/components/user_action_tree/user_action_title.test.tsx
rename to x-pack/plugins/siem/public/cases/components/user_action_tree/user_action_title.test.tsx
index 8a1e8a80f664de..cf29fa061e4192 100644
--- a/x-pack/plugins/siem/public/pages/case/components/user_action_tree/user_action_title.test.tsx
+++ b/x-pack/plugins/siem/public/cases/components/user_action_tree/user_action_title.test.tsx
@@ -8,9 +8,9 @@ import React from 'react';
 import { mount } from 'enzyme';
 import copy from 'copy-to-clipboard';
 import { Router, routeData, mockHistory } from '../__mock__/router';
-import { caseUserActions as basicUserActions } from '../../../../containers/case/mock';
+import { caseUserActions as basicUserActions } from '../../containers/mock';
 import { UserActionTitle } from './user_action_title';
-import { TestProviders } from '../../../../mock';
+import { TestProviders } from '../../../common/mock';
 
 const outlineComment = jest.fn();
 const onEdit = jest.fn();
diff --git a/x-pack/plugins/siem/public/pages/case/components/user_action_tree/user_action_title.tsx b/x-pack/plugins/siem/public/cases/components/user_action_tree/user_action_title.tsx
similarity index 95%
rename from x-pack/plugins/siem/public/pages/case/components/user_action_tree/user_action_title.tsx
rename to x-pack/plugins/siem/public/cases/components/user_action_tree/user_action_title.tsx
index fc2a74466dedc6..307790194421d3 100644
--- a/x-pack/plugins/siem/public/pages/case/components/user_action_tree/user_action_title.tsx
+++ b/x-pack/plugins/siem/public/cases/components/user_action_tree/user_action_title.tsx
@@ -19,11 +19,11 @@ import React, { useMemo, useCallback } from 'react';
 import styled from 'styled-components';
 import { useParams } from 'react-router-dom';
 
-import { LocalizedDateTooltip } from '../../../../components/localized_date_tooltip';
-import { useGetUrlSearch } from '../../../../components/navigation/use_get_url_search';
-import { navTabs } from '../../../home/home_navigations';
+import { LocalizedDateTooltip } from '../../../common/components/localized_date_tooltip';
+import { useGetUrlSearch } from '../../../common/components/navigation/use_get_url_search';
+import { navTabs } from '../../../app/home/home_navigations';
 import { PropertyActions } from '../property_actions';
-import { SiemPageName } from '../../../home/types';
+import { SiemPageName } from '../../../app/types';
 import * as i18n from './translations';
 
 const MySpinner = styled(EuiLoadingSpinner)`
diff --git a/x-pack/plugins/siem/public/cases/components/user_list/index.test.tsx b/x-pack/plugins/siem/public/cases/components/user_list/index.test.tsx
new file mode 100644
index 00000000000000..7916a72d591ad3
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/components/user_list/index.test.tsx
@@ -0,0 +1,40 @@
+/*
+ * 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 { UserList } from '.';
+import * as i18n from '../case_view/translations';
+
+describe('UserList ', () => {
+  const title = 'Case Title';
+  const caseLink = 'http://reddit.com';
+  const user = { username: 'username', fullName: 'Full Name', email: 'testemail@elastic.co' };
+  const open = jest.fn();
+  beforeAll(() => {
+    window.open = open;
+  });
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+  it('triggers mailto when email icon clicked', () => {
+    const wrapper = shallow(
+      <UserList
+        email={{
+          subject: i18n.EMAIL_SUBJECT(title),
+          body: i18n.EMAIL_BODY(caseLink),
+        }}
+        headline={i18n.REPORTER}
+        users={[user]}
+      />
+    );
+    wrapper.find('[data-test-subj="user-list-email-button"]').simulate('click');
+    expect(open).toBeCalledWith(
+      `mailto:${user.email}?subject=${i18n.EMAIL_SUBJECT(title)}&body=${i18n.EMAIL_BODY(caseLink)}`,
+      '_blank'
+    );
+  });
+});
diff --git a/x-pack/plugins/siem/public/cases/components/user_list/index.tsx b/x-pack/plugins/siem/public/cases/components/user_list/index.tsx
new file mode 100644
index 00000000000000..0606da371d16ab
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/components/user_list/index.tsx
@@ -0,0 +1,108 @@
+/*
+ * 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, { useCallback } from 'react';
+import { isEmpty } from 'lodash/fp';
+
+import {
+  EuiButtonIcon,
+  EuiText,
+  EuiHorizontalRule,
+  EuiAvatar,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLoadingSpinner,
+  EuiToolTip,
+} from '@elastic/eui';
+
+import styled, { css } from 'styled-components';
+
+import { ElasticUser } from '../../containers/types';
+import * as i18n from './translations';
+
+interface UserListProps {
+  email: {
+    subject: string;
+    body: string;
+  };
+  headline: string;
+  loading?: boolean;
+  users: ElasticUser[];
+}
+
+const MyAvatar = styled(EuiAvatar)`
+  top: -4px;
+`;
+
+const MyFlexGroup = styled(EuiFlexGroup)`
+  ${({ theme }) => css`
+    margin-top: ${theme.eui.euiSizeM};
+  `}
+`;
+
+const renderUsers = (
+  users: ElasticUser[],
+  handleSendEmail: (emailAddress: string | undefined | null) => void
+) =>
+  users.map(({ fullName, username, email }, key) => (
+    <MyFlexGroup key={key} justifyContent="spaceBetween">
+      <EuiFlexItem grow={false}>
+        <EuiFlexGroup gutterSize="xs">
+          <EuiFlexItem>
+            <MyAvatar name={fullName ? fullName : username ?? ''} />
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiToolTip position="top" content={<p>{fullName ? fullName : username ?? ''}</p>}>
+              <p>
+                <strong>
+                  <small data-test-subj="case-view-username">{username}</small>
+                </strong>
+              </p>
+            </EuiToolTip>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon
+          data-test-subj="user-list-email-button"
+          onClick={handleSendEmail.bind(null, email)}
+          iconType="email"
+          aria-label={i18n.SEND_EMAIL_ARIA(fullName ? fullName : username ?? '')}
+          isDisabled={isEmpty(email)}
+        />
+      </EuiFlexItem>
+    </MyFlexGroup>
+  ));
+
+export const UserList = React.memo(({ email, headline, loading, users }: UserListProps) => {
+  const handleSendEmail = useCallback(
+    (emailAddress: string | undefined | null) => {
+      if (emailAddress && emailAddress != null) {
+        window.open(`mailto:${emailAddress}?subject=${email.subject}&body=${email.body}`, '_blank');
+      }
+    },
+    [email.subject]
+  );
+  return users.filter(({ username }) => username != null && username !== '').length > 0 ? (
+    <EuiText>
+      <h4>{headline}</h4>
+      <EuiHorizontalRule margin="xs" />
+      {loading && (
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiLoadingSpinner />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      )}
+      {renderUsers(
+        users.filter(({ username }) => username != null && username !== ''),
+        handleSendEmail
+      )}
+    </EuiText>
+  ) : null;
+});
+
+UserList.displayName = 'UserList';
diff --git a/x-pack/plugins/siem/public/pages/case/components/user_list/translations.ts b/x-pack/plugins/siem/public/cases/components/user_list/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/case/components/user_list/translations.ts
rename to x-pack/plugins/siem/public/cases/components/user_list/translations.ts
diff --git a/x-pack/plugins/siem/public/pages/case/components/wrappers/index.tsx b/x-pack/plugins/siem/public/cases/components/wrappers/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/case/components/wrappers/index.tsx
rename to x-pack/plugins/siem/public/cases/components/wrappers/index.tsx
diff --git a/x-pack/plugins/siem/public/containers/case/__mocks__/api.ts b/x-pack/plugins/siem/public/cases/containers/__mocks__/api.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/case/__mocks__/api.ts
rename to x-pack/plugins/siem/public/cases/containers/__mocks__/api.ts
diff --git a/x-pack/plugins/siem/public/containers/case/api.test.tsx b/x-pack/plugins/siem/public/cases/containers/api.test.tsx
similarity index 99%
rename from x-pack/plugins/siem/public/containers/case/api.test.tsx
rename to x-pack/plugins/siem/public/cases/containers/api.test.tsx
index 174738098fa107..b4f0c2198b4588 100644
--- a/x-pack/plugins/siem/public/containers/case/api.test.tsx
+++ b/x-pack/plugins/siem/public/cases/containers/api.test.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { KibanaServices } from '../../lib/kibana';
+import { KibanaServices } from '../../common/lib/kibana';
 
 import { CASES_URL } from '../../../../case/common/constants';
 
@@ -54,7 +54,7 @@ import * as i18n from './translations';
 
 const abortCtrl = new AbortController();
 const mockKibanaServices = KibanaServices.get as jest.Mock;
-jest.mock('../../lib/kibana');
+jest.mock('../../common/lib/kibana');
 
 const fetchMock = jest.fn();
 mockKibanaServices.mockReturnValue({ http: { fetch: fetchMock } });
diff --git a/x-pack/plugins/siem/public/cases/containers/api.ts b/x-pack/plugins/siem/public/cases/containers/api.ts
new file mode 100644
index 00000000000000..678286c0634d4c
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/containers/api.ts
@@ -0,0 +1,268 @@
+/*
+ * 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 {
+  CaseResponse,
+  CasesResponse,
+  CasesFindResponse,
+  CasePatchRequest,
+  CasePostRequest,
+  CasesStatusResponse,
+  CommentRequest,
+  User,
+  CaseUserActionsResponse,
+  CaseExternalServiceRequest,
+  ServiceConnectorCaseParams,
+  ServiceConnectorCaseResponse,
+  ActionTypeExecutorResult,
+} from '../../../../case/common/api';
+
+import {
+  CASE_STATUS_URL,
+  CASES_URL,
+  CASE_TAGS_URL,
+  CASE_REPORTERS_URL,
+  ACTION_TYPES_URL,
+  ACTION_URL,
+} from '../../../../case/common/constants';
+
+import {
+  getCaseDetailsUrl,
+  getCaseUserActionUrl,
+  getCaseCommentsUrl,
+} from '../../../../case/common/api/helpers';
+
+import { KibanaServices } from '../../common/lib/kibana';
+
+import {
+  ActionLicense,
+  AllCases,
+  BulkUpdateStatus,
+  Case,
+  CasesStatus,
+  FetchCasesProps,
+  SortFieldCase,
+  CaseUserActions,
+} from './types';
+
+import {
+  convertToCamelCase,
+  convertAllCasesToCamel,
+  convertArrayToCamelCase,
+  decodeCaseResponse,
+  decodeCasesResponse,
+  decodeCasesFindResponse,
+  decodeCasesStatusResponse,
+  decodeCaseUserActionsResponse,
+  decodeServiceConnectorCaseResponse,
+} from './utils';
+
+import * as i18n from './translations';
+
+export const getCase = async (
+  caseId: string,
+  includeComments: boolean = true,
+  signal: AbortSignal
+): Promise<Case> => {
+  const response = await KibanaServices.get().http.fetch<CaseResponse>(getCaseDetailsUrl(caseId), {
+    method: 'GET',
+    query: {
+      includeComments,
+    },
+    signal,
+  });
+  return convertToCamelCase<CaseResponse, Case>(decodeCaseResponse(response));
+};
+
+export const getCasesStatus = async (signal: AbortSignal): Promise<CasesStatus> => {
+  const response = await KibanaServices.get().http.fetch<CasesStatusResponse>(CASE_STATUS_URL, {
+    method: 'GET',
+    signal,
+  });
+  return convertToCamelCase<CasesStatusResponse, CasesStatus>(decodeCasesStatusResponse(response));
+};
+
+export const getTags = async (signal: AbortSignal): Promise<string[]> => {
+  const response = await KibanaServices.get().http.fetch<string[]>(CASE_TAGS_URL, {
+    method: 'GET',
+    signal,
+  });
+  return response ?? [];
+};
+
+export const getReporters = async (signal: AbortSignal): Promise<User[]> => {
+  const response = await KibanaServices.get().http.fetch<User[]>(CASE_REPORTERS_URL, {
+    method: 'GET',
+    signal,
+  });
+  return response ?? [];
+};
+
+export const getCaseUserActions = async (
+  caseId: string,
+  signal: AbortSignal
+): Promise<CaseUserActions[]> => {
+  const response = await KibanaServices.get().http.fetch<CaseUserActionsResponse>(
+    getCaseUserActionUrl(caseId),
+    {
+      method: 'GET',
+      signal,
+    }
+  );
+  return convertArrayToCamelCase(decodeCaseUserActionsResponse(response)) as CaseUserActions[];
+};
+
+export const getCases = async ({
+  filterOptions = {
+    search: '',
+    reporters: [],
+    status: 'open',
+    tags: [],
+  },
+  queryParams = {
+    page: 1,
+    perPage: 20,
+    sortField: SortFieldCase.createdAt,
+    sortOrder: 'desc',
+  },
+  signal,
+}: FetchCasesProps): Promise<AllCases> => {
+  const query = {
+    reporters: filterOptions.reporters.map(r => r.username ?? '').filter(r => r !== ''),
+    tags: filterOptions.tags,
+    ...(filterOptions.status !== '' ? { status: filterOptions.status } : {}),
+    ...(filterOptions.search.length > 0 ? { search: filterOptions.search } : {}),
+    ...queryParams,
+  };
+  const response = await KibanaServices.get().http.fetch<CasesFindResponse>(`${CASES_URL}/_find`, {
+    method: 'GET',
+    query,
+    signal,
+  });
+  return convertAllCasesToCamel(decodeCasesFindResponse(response));
+};
+
+export const postCase = async (newCase: CasePostRequest, signal: AbortSignal): Promise<Case> => {
+  const response = await KibanaServices.get().http.fetch<CaseResponse>(CASES_URL, {
+    method: 'POST',
+    body: JSON.stringify(newCase),
+    signal,
+  });
+  return convertToCamelCase<CaseResponse, Case>(decodeCaseResponse(response));
+};
+
+export const patchCase = async (
+  caseId: string,
+  updatedCase: Pick<CasePatchRequest, 'description' | 'status' | 'tags' | 'title'>,
+  version: string,
+  signal: AbortSignal
+): Promise<Case[]> => {
+  const response = await KibanaServices.get().http.fetch<CasesResponse>(CASES_URL, {
+    method: 'PATCH',
+    body: JSON.stringify({ cases: [{ ...updatedCase, id: caseId, version }] }),
+    signal,
+  });
+  return convertToCamelCase<CasesResponse, Case[]>(decodeCasesResponse(response));
+};
+
+export const patchCasesStatus = async (
+  cases: BulkUpdateStatus[],
+  signal: AbortSignal
+): Promise<Case[]> => {
+  const response = await KibanaServices.get().http.fetch<CasesResponse>(CASES_URL, {
+    method: 'PATCH',
+    body: JSON.stringify({ cases }),
+    signal,
+  });
+  return convertToCamelCase<CasesResponse, Case[]>(decodeCasesResponse(response));
+};
+
+export const postComment = async (
+  newComment: CommentRequest,
+  caseId: string,
+  signal: AbortSignal
+): Promise<Case> => {
+  const response = await KibanaServices.get().http.fetch<CaseResponse>(
+    `${CASES_URL}/${caseId}/comments`,
+    {
+      method: 'POST',
+      body: JSON.stringify(newComment),
+      signal,
+    }
+  );
+  return convertToCamelCase<CaseResponse, Case>(decodeCaseResponse(response));
+};
+
+export const patchComment = async (
+  caseId: string,
+  commentId: string,
+  commentUpdate: string,
+  version: string,
+  signal: AbortSignal
+): Promise<Case> => {
+  const response = await KibanaServices.get().http.fetch<CaseResponse>(getCaseCommentsUrl(caseId), {
+    method: 'PATCH',
+    body: JSON.stringify({ comment: commentUpdate, id: commentId, version }),
+    signal,
+  });
+  return convertToCamelCase<CaseResponse, Case>(decodeCaseResponse(response));
+};
+
+export const deleteCases = async (caseIds: string[], signal: AbortSignal): Promise<string> => {
+  const response = await KibanaServices.get().http.fetch<string>(CASES_URL, {
+    method: 'DELETE',
+    query: { ids: JSON.stringify(caseIds) },
+    signal,
+  });
+  return response;
+};
+
+export const pushCase = async (
+  caseId: string,
+  push: CaseExternalServiceRequest,
+  signal: AbortSignal
+): Promise<Case> => {
+  const response = await KibanaServices.get().http.fetch<CaseResponse>(
+    `${getCaseDetailsUrl(caseId)}/_push`,
+    {
+      method: 'POST',
+      body: JSON.stringify(push),
+      signal,
+    }
+  );
+  return convertToCamelCase<CaseResponse, Case>(decodeCaseResponse(response));
+};
+
+export const pushToService = async (
+  connectorId: string,
+  casePushParams: ServiceConnectorCaseParams,
+  signal: AbortSignal
+): Promise<ServiceConnectorCaseResponse> => {
+  const response = await KibanaServices.get().http.fetch<ActionTypeExecutorResult>(
+    `${ACTION_URL}/${connectorId}/_execute`,
+    {
+      method: 'POST',
+      body: JSON.stringify({
+        params: { subAction: 'pushToService', subActionParams: casePushParams },
+      }),
+      signal,
+    }
+  );
+
+  if (response.status === 'error') {
+    throw new Error(response.serviceMessage ?? response.message ?? i18n.ERROR_PUSH_TO_SERVICE);
+  }
+
+  return decodeServiceConnectorCaseResponse(response.data);
+};
+
+export const getActionLicense = async (signal: AbortSignal): Promise<ActionLicense[]> => {
+  const response = await KibanaServices.get().http.fetch<ActionLicense[]>(ACTION_TYPES_URL, {
+    method: 'GET',
+    signal,
+  });
+  return response;
+};
diff --git a/x-pack/plugins/siem/public/containers/case/configure/__mocks__/api.ts b/x-pack/plugins/siem/public/cases/containers/configure/__mocks__/api.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/case/configure/__mocks__/api.ts
rename to x-pack/plugins/siem/public/cases/containers/configure/__mocks__/api.ts
diff --git a/x-pack/plugins/siem/public/cases/containers/configure/api.test.ts b/x-pack/plugins/siem/public/cases/containers/configure/api.test.ts
new file mode 100644
index 00000000000000..11a293ef437fae
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/containers/configure/api.test.ts
@@ -0,0 +1,115 @@
+/*
+ * 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 { KibanaServices } from '../../../common/lib/kibana';
+import { fetchConnectors, getCaseConfigure, postCaseConfigure, patchCaseConfigure } from './api';
+import {
+  connectorsMock,
+  caseConfigurationMock,
+  caseConfigurationResposeMock,
+  caseConfigurationCamelCaseResponseMock,
+} from './mock';
+
+const abortCtrl = new AbortController();
+const mockKibanaServices = KibanaServices.get as jest.Mock;
+jest.mock('../../../common/lib/kibana');
+
+const fetchMock = jest.fn();
+mockKibanaServices.mockReturnValue({ http: { fetch: fetchMock } });
+
+describe('Case Configuration API', () => {
+  describe('fetch connectors', () => {
+    beforeEach(() => {
+      fetchMock.mockClear();
+      fetchMock.mockResolvedValue(connectorsMock);
+    });
+
+    test('check url, method, signal', async () => {
+      await fetchConnectors({ signal: abortCtrl.signal });
+      expect(fetchMock).toHaveBeenCalledWith('/api/cases/configure/connectors/_find', {
+        method: 'GET',
+        signal: abortCtrl.signal,
+      });
+    });
+
+    test('happy path', async () => {
+      const resp = await fetchConnectors({ signal: abortCtrl.signal });
+      expect(resp).toEqual(connectorsMock);
+    });
+  });
+
+  describe('fetch configuration', () => {
+    beforeEach(() => {
+      fetchMock.mockClear();
+      fetchMock.mockResolvedValue(caseConfigurationResposeMock);
+    });
+
+    test('check url, method, signal', async () => {
+      await getCaseConfigure({ signal: abortCtrl.signal });
+      expect(fetchMock).toHaveBeenCalledWith('/api/cases/configure', {
+        method: 'GET',
+        signal: abortCtrl.signal,
+      });
+    });
+
+    test('happy path', async () => {
+      const resp = await getCaseConfigure({ signal: abortCtrl.signal });
+      expect(resp).toEqual(caseConfigurationCamelCaseResponseMock);
+    });
+
+    test('return null on empty response', async () => {
+      fetchMock.mockResolvedValue({});
+      const resp = await getCaseConfigure({ signal: abortCtrl.signal });
+      expect(resp).toBe(null);
+    });
+  });
+
+  describe('create configuration', () => {
+    beforeEach(() => {
+      fetchMock.mockClear();
+      fetchMock.mockResolvedValue(caseConfigurationResposeMock);
+    });
+
+    test('check url, body, method, signal', async () => {
+      await postCaseConfigure(caseConfigurationMock, abortCtrl.signal);
+      expect(fetchMock).toHaveBeenCalledWith('/api/cases/configure', {
+        body:
+          '{"connector_id":"123","connector_name":"My Connector","closure_type":"close-by-user"}',
+        method: 'POST',
+        signal: abortCtrl.signal,
+      });
+    });
+
+    test('happy path', async () => {
+      const resp = await postCaseConfigure(caseConfigurationMock, abortCtrl.signal);
+      expect(resp).toEqual(caseConfigurationCamelCaseResponseMock);
+    });
+  });
+
+  describe('update configuration', () => {
+    beforeEach(() => {
+      fetchMock.mockClear();
+      fetchMock.mockResolvedValue(caseConfigurationResposeMock);
+    });
+
+    test('check url, body, method, signal', async () => {
+      await patchCaseConfigure({ connector_id: '456', version: 'WzHJ12' }, abortCtrl.signal);
+      expect(fetchMock).toHaveBeenCalledWith('/api/cases/configure', {
+        body: '{"connector_id":"456","version":"WzHJ12"}',
+        method: 'PATCH',
+        signal: abortCtrl.signal,
+      });
+    });
+
+    test('happy path', async () => {
+      const resp = await patchCaseConfigure(
+        { connector_id: '456', version: 'WzHJ12' },
+        abortCtrl.signal
+      );
+      expect(resp).toEqual(caseConfigurationCamelCaseResponseMock);
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/cases/containers/configure/api.ts b/x-pack/plugins/siem/public/cases/containers/configure/api.ts
new file mode 100644
index 00000000000000..4b4b81460ebc2a
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/containers/configure/api.ts
@@ -0,0 +1,82 @@
+/*
+ * 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 { isEmpty } from 'lodash/fp';
+import {
+  Connector,
+  CasesConfigurePatch,
+  CasesConfigureResponse,
+  CasesConfigureRequest,
+} from '../../../../../case/common/api';
+import { KibanaServices } from '../../../common/lib/kibana';
+
+import {
+  CASE_CONFIGURE_CONNECTORS_URL,
+  CASE_CONFIGURE_URL,
+} from '../../../../../case/common/constants';
+
+import { ApiProps } from '../types';
+import { convertToCamelCase, decodeCaseConfigureResponse } from '../utils';
+import { CaseConfigure } from './types';
+
+export const fetchConnectors = async ({ signal }: ApiProps): Promise<Connector[]> => {
+  const response = await KibanaServices.get().http.fetch(`${CASE_CONFIGURE_CONNECTORS_URL}/_find`, {
+    method: 'GET',
+    signal,
+  });
+
+  return response;
+};
+
+export const getCaseConfigure = async ({ signal }: ApiProps): Promise<CaseConfigure | null> => {
+  const response = await KibanaServices.get().http.fetch<CasesConfigureResponse>(
+    CASE_CONFIGURE_URL,
+    {
+      method: 'GET',
+      signal,
+    }
+  );
+
+  return !isEmpty(response)
+    ? convertToCamelCase<CasesConfigureResponse, CaseConfigure>(
+        decodeCaseConfigureResponse(response)
+      )
+    : null;
+};
+
+export const postCaseConfigure = async (
+  caseConfiguration: CasesConfigureRequest,
+  signal: AbortSignal
+): Promise<CaseConfigure> => {
+  const response = await KibanaServices.get().http.fetch<CasesConfigureResponse>(
+    CASE_CONFIGURE_URL,
+    {
+      method: 'POST',
+      body: JSON.stringify(caseConfiguration),
+      signal,
+    }
+  );
+  return convertToCamelCase<CasesConfigureResponse, CaseConfigure>(
+    decodeCaseConfigureResponse(response)
+  );
+};
+
+export const patchCaseConfigure = async (
+  caseConfiguration: CasesConfigurePatch,
+  signal: AbortSignal
+): Promise<CaseConfigure> => {
+  const response = await KibanaServices.get().http.fetch<CasesConfigureResponse>(
+    CASE_CONFIGURE_URL,
+    {
+      method: 'PATCH',
+      body: JSON.stringify(caseConfiguration),
+      signal,
+    }
+  );
+  return convertToCamelCase<CasesConfigureResponse, CaseConfigure>(
+    decodeCaseConfigureResponse(response)
+  );
+};
diff --git a/x-pack/plugins/siem/public/containers/case/configure/mock.ts b/x-pack/plugins/siem/public/cases/containers/configure/mock.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/case/configure/mock.ts
rename to x-pack/plugins/siem/public/cases/containers/configure/mock.ts
diff --git a/x-pack/plugins/siem/public/containers/case/configure/translations.ts b/x-pack/plugins/siem/public/cases/containers/configure/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/case/configure/translations.ts
rename to x-pack/plugins/siem/public/cases/containers/configure/translations.ts
diff --git a/x-pack/plugins/siem/public/containers/case/configure/types.ts b/x-pack/plugins/siem/public/cases/containers/configure/types.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/case/configure/types.ts
rename to x-pack/plugins/siem/public/cases/containers/configure/types.ts
diff --git a/x-pack/plugins/siem/public/containers/case/configure/use_configure.test.tsx b/x-pack/plugins/siem/public/cases/containers/configure/use_configure.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/containers/case/configure/use_configure.test.tsx
rename to x-pack/plugins/siem/public/cases/containers/configure/use_configure.test.tsx
diff --git a/x-pack/plugins/siem/public/containers/case/configure/use_configure.tsx b/x-pack/plugins/siem/public/cases/containers/configure/use_configure.tsx
similarity index 98%
rename from x-pack/plugins/siem/public/containers/case/configure/use_configure.tsx
rename to x-pack/plugins/siem/public/cases/containers/configure/use_configure.tsx
index a185d435f71651..5a85a3a0633bc8 100644
--- a/x-pack/plugins/siem/public/containers/case/configure/use_configure.tsx
+++ b/x-pack/plugins/siem/public/cases/containers/configure/use_configure.tsx
@@ -7,7 +7,11 @@
 import { useEffect, useCallback, useReducer } from 'react';
 import { getCaseConfigure, patchCaseConfigure, postCaseConfigure } from './api';
 
-import { useStateToaster, errorToToaster, displaySuccessToast } from '../../../components/toasters';
+import {
+  useStateToaster,
+  errorToToaster,
+  displaySuccessToast,
+} from '../../../common/components/toasters';
 import * as i18n from './translations';
 import { CasesConfigurationMapping, ClosureType } from './types';
 
diff --git a/x-pack/plugins/siem/public/containers/case/configure/use_connectors.test.tsx b/x-pack/plugins/siem/public/cases/containers/configure/use_connectors.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/containers/case/configure/use_connectors.test.tsx
rename to x-pack/plugins/siem/public/cases/containers/configure/use_connectors.test.tsx
diff --git a/x-pack/plugins/siem/public/containers/case/configure/use_connectors.tsx b/x-pack/plugins/siem/public/cases/containers/configure/use_connectors.tsx
similarity index 95%
rename from x-pack/plugins/siem/public/containers/case/configure/use_connectors.tsx
rename to x-pack/plugins/siem/public/cases/containers/configure/use_connectors.tsx
index 30108ecf33874a..9cd755864d37b2 100644
--- a/x-pack/plugins/siem/public/containers/case/configure/use_connectors.tsx
+++ b/x-pack/plugins/siem/public/cases/containers/configure/use_connectors.tsx
@@ -6,7 +6,7 @@
 
 import { useState, useEffect, useCallback } from 'react';
 
-import { useStateToaster, errorToToaster } from '../../../components/toasters';
+import { useStateToaster, errorToToaster } from '../../../common/components/toasters';
 import * as i18n from '../translations';
 import { fetchConnectors } from './api';
 import { Connector } from './types';
diff --git a/x-pack/plugins/siem/public/containers/case/constants.ts b/x-pack/plugins/siem/public/cases/containers/constants.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/case/constants.ts
rename to x-pack/plugins/siem/public/cases/containers/constants.ts
diff --git a/x-pack/plugins/siem/public/containers/case/mock.ts b/x-pack/plugins/siem/public/cases/containers/mock.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/case/mock.ts
rename to x-pack/plugins/siem/public/cases/containers/mock.ts
diff --git a/x-pack/plugins/siem/public/containers/case/translations.ts b/x-pack/plugins/siem/public/cases/containers/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/case/translations.ts
rename to x-pack/plugins/siem/public/cases/containers/translations.ts
diff --git a/x-pack/plugins/siem/public/containers/case/types.ts b/x-pack/plugins/siem/public/cases/containers/types.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/case/types.ts
rename to x-pack/plugins/siem/public/cases/containers/types.ts
diff --git a/x-pack/plugins/siem/public/containers/case/use_bulk_update_case.test.tsx b/x-pack/plugins/siem/public/cases/containers/use_bulk_update_case.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/containers/case/use_bulk_update_case.test.tsx
rename to x-pack/plugins/siem/public/cases/containers/use_bulk_update_case.test.tsx
diff --git a/x-pack/plugins/siem/public/containers/case/use_bulk_update_case.tsx b/x-pack/plugins/siem/public/cases/containers/use_bulk_update_case.tsx
similarity index 96%
rename from x-pack/plugins/siem/public/containers/case/use_bulk_update_case.tsx
rename to x-pack/plugins/siem/public/cases/containers/use_bulk_update_case.tsx
index d0cc4d99f8f9f5..b9b64aa77493af 100644
--- a/x-pack/plugins/siem/public/containers/case/use_bulk_update_case.tsx
+++ b/x-pack/plugins/siem/public/cases/containers/use_bulk_update_case.tsx
@@ -5,7 +5,11 @@
  */
 
 import { useCallback, useReducer } from 'react';
-import { displaySuccessToast, errorToToaster, useStateToaster } from '../../components/toasters';
+import {
+  displaySuccessToast,
+  errorToToaster,
+  useStateToaster,
+} from '../../common/components/toasters';
 import * as i18n from './translations';
 import { patchCasesStatus } from './api';
 import { BulkUpdateStatus, Case } from './types';
diff --git a/x-pack/plugins/siem/public/containers/case/use_delete_cases.test.tsx b/x-pack/plugins/siem/public/cases/containers/use_delete_cases.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/containers/case/use_delete_cases.test.tsx
rename to x-pack/plugins/siem/public/cases/containers/use_delete_cases.test.tsx
diff --git a/x-pack/plugins/siem/public/containers/case/use_delete_cases.tsx b/x-pack/plugins/siem/public/cases/containers/use_delete_cases.tsx
similarity index 97%
rename from x-pack/plugins/siem/public/containers/case/use_delete_cases.tsx
rename to x-pack/plugins/siem/public/cases/containers/use_delete_cases.tsx
index 3c49be551c0640..31a73351de8f55 100644
--- a/x-pack/plugins/siem/public/containers/case/use_delete_cases.tsx
+++ b/x-pack/plugins/siem/public/cases/containers/use_delete_cases.tsx
@@ -5,7 +5,11 @@
  */
 
 import { useCallback, useReducer } from 'react';
-import { displaySuccessToast, errorToToaster, useStateToaster } from '../../components/toasters';
+import {
+  displaySuccessToast,
+  errorToToaster,
+  useStateToaster,
+} from '../../common/components/toasters';
 import * as i18n from './translations';
 import { deleteCases } from './api';
 import { DeleteCase } from './types';
diff --git a/x-pack/plugins/siem/public/containers/case/use_get_action_license.test.tsx b/x-pack/plugins/siem/public/cases/containers/use_get_action_license.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/containers/case/use_get_action_license.test.tsx
rename to x-pack/plugins/siem/public/cases/containers/use_get_action_license.test.tsx
diff --git a/x-pack/plugins/siem/public/containers/case/use_get_action_license.tsx b/x-pack/plugins/siem/public/cases/containers/use_get_action_license.tsx
similarity index 96%
rename from x-pack/plugins/siem/public/containers/case/use_get_action_license.tsx
rename to x-pack/plugins/siem/public/cases/containers/use_get_action_license.tsx
index 0d28a1b20c61f0..c09cc8dedd3799 100644
--- a/x-pack/plugins/siem/public/containers/case/use_get_action_license.tsx
+++ b/x-pack/plugins/siem/public/cases/containers/use_get_action_license.tsx
@@ -6,7 +6,7 @@
 
 import { useCallback, useEffect, useState } from 'react';
 
-import { errorToToaster, useStateToaster } from '../../components/toasters';
+import { errorToToaster, useStateToaster } from '../../common/components/toasters';
 import { getActionLicense } from './api';
 import * as i18n from './translations';
 import { ActionLicense } from './types';
diff --git a/x-pack/plugins/siem/public/containers/case/use_get_case.test.tsx b/x-pack/plugins/siem/public/cases/containers/use_get_case.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/containers/case/use_get_case.test.tsx
rename to x-pack/plugins/siem/public/cases/containers/use_get_case.test.tsx
diff --git a/x-pack/plugins/siem/public/containers/case/use_get_case.tsx b/x-pack/plugins/siem/public/cases/containers/use_get_case.tsx
similarity index 97%
rename from x-pack/plugins/siem/public/containers/case/use_get_case.tsx
rename to x-pack/plugins/siem/public/cases/containers/use_get_case.tsx
index 06d4c38ddda49a..01ada00ba9b72d 100644
--- a/x-pack/plugins/siem/public/containers/case/use_get_case.tsx
+++ b/x-pack/plugins/siem/public/cases/containers/use_get_case.tsx
@@ -8,7 +8,7 @@ import { useEffect, useReducer, useCallback } from 'react';
 
 import { Case } from './types';
 import * as i18n from './translations';
-import { errorToToaster, useStateToaster } from '../../components/toasters';
+import { errorToToaster, useStateToaster } from '../../common/components/toasters';
 import { getCase } from './api';
 
 interface CaseState {
diff --git a/x-pack/plugins/siem/public/containers/case/use_get_case_user_actions.test.tsx b/x-pack/plugins/siem/public/cases/containers/use_get_case_user_actions.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/containers/case/use_get_case_user_actions.test.tsx
rename to x-pack/plugins/siem/public/cases/containers/use_get_case_user_actions.test.tsx
diff --git a/x-pack/plugins/siem/public/containers/case/use_get_case_user_actions.tsx b/x-pack/plugins/siem/public/cases/containers/use_get_case_user_actions.tsx
similarity index 98%
rename from x-pack/plugins/siem/public/containers/case/use_get_case_user_actions.tsx
rename to x-pack/plugins/siem/public/cases/containers/use_get_case_user_actions.tsx
index 5afe06a9828e5f..2848d56378cd23 100644
--- a/x-pack/plugins/siem/public/containers/case/use_get_case_user_actions.tsx
+++ b/x-pack/plugins/siem/public/cases/containers/use_get_case_user_actions.tsx
@@ -7,7 +7,7 @@
 import { isEmpty, uniqBy } from 'lodash/fp';
 import { useCallback, useEffect, useState } from 'react';
 
-import { errorToToaster, useStateToaster } from '../../components/toasters';
+import { errorToToaster, useStateToaster } from '../../common/components/toasters';
 import { getCaseUserActions } from './api';
 import * as i18n from './translations';
 import { CaseExternalService, CaseUserActions, ElasticUser } from './types';
diff --git a/x-pack/plugins/siem/public/containers/case/use_get_cases.test.tsx b/x-pack/plugins/siem/public/cases/containers/use_get_cases.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/containers/case/use_get_cases.test.tsx
rename to x-pack/plugins/siem/public/cases/containers/use_get_cases.test.tsx
diff --git a/x-pack/plugins/siem/public/containers/case/use_get_cases.tsx b/x-pack/plugins/siem/public/cases/containers/use_get_cases.tsx
similarity index 98%
rename from x-pack/plugins/siem/public/containers/case/use_get_cases.tsx
rename to x-pack/plugins/siem/public/cases/containers/use_get_cases.tsx
index 465b50dbdc1bc6..b0701c71b857e2 100644
--- a/x-pack/plugins/siem/public/containers/case/use_get_cases.tsx
+++ b/x-pack/plugins/siem/public/cases/containers/use_get_cases.tsx
@@ -7,7 +7,7 @@
 import { useCallback, useEffect, useReducer } from 'react';
 import { DEFAULT_TABLE_ACTIVE_PAGE, DEFAULT_TABLE_LIMIT } from './constants';
 import { AllCases, SortFieldCase, FilterOptions, QueryParams, Case } from './types';
-import { errorToToaster, useStateToaster } from '../../components/toasters';
+import { errorToToaster, useStateToaster } from '../../common/components/toasters';
 import * as i18n from './translations';
 import { UpdateByKey } from './use_update_case';
 import { getCases, patchCase } from './api';
diff --git a/x-pack/plugins/siem/public/containers/case/use_get_cases_status.test.tsx b/x-pack/plugins/siem/public/cases/containers/use_get_cases_status.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/containers/case/use_get_cases_status.test.tsx
rename to x-pack/plugins/siem/public/cases/containers/use_get_cases_status.test.tsx
diff --git a/x-pack/plugins/siem/public/containers/case/use_get_cases_status.tsx b/x-pack/plugins/siem/public/cases/containers/use_get_cases_status.tsx
similarity index 96%
rename from x-pack/plugins/siem/public/containers/case/use_get_cases_status.tsx
rename to x-pack/plugins/siem/public/cases/containers/use_get_cases_status.tsx
index 07884646023570..476462b7e4c28f 100644
--- a/x-pack/plugins/siem/public/containers/case/use_get_cases_status.tsx
+++ b/x-pack/plugins/siem/public/cases/containers/use_get_cases_status.tsx
@@ -6,7 +6,7 @@
 
 import { useCallback, useEffect, useState } from 'react';
 
-import { errorToToaster, useStateToaster } from '../../components/toasters';
+import { errorToToaster, useStateToaster } from '../../common/components/toasters';
 import { getCasesStatus } from './api';
 import * as i18n from './translations';
 import { CasesStatus } from './types';
diff --git a/x-pack/plugins/siem/public/containers/case/use_get_reporters.test.tsx b/x-pack/plugins/siem/public/cases/containers/use_get_reporters.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/containers/case/use_get_reporters.test.tsx
rename to x-pack/plugins/siem/public/cases/containers/use_get_reporters.test.tsx
diff --git a/x-pack/plugins/siem/public/containers/case/use_get_reporters.tsx b/x-pack/plugins/siem/public/cases/containers/use_get_reporters.tsx
similarity index 96%
rename from x-pack/plugins/siem/public/containers/case/use_get_reporters.tsx
rename to x-pack/plugins/siem/public/cases/containers/use_get_reporters.tsx
index 01679ae4ccd82d..5bfc8c84d1ecc3 100644
--- a/x-pack/plugins/siem/public/containers/case/use_get_reporters.tsx
+++ b/x-pack/plugins/siem/public/cases/containers/use_get_reporters.tsx
@@ -8,7 +8,7 @@ import { useCallback, useEffect, useState } from 'react';
 
 import { isEmpty } from 'lodash/fp';
 import { User } from '../../../../case/common/api';
-import { errorToToaster, useStateToaster } from '../../components/toasters';
+import { errorToToaster, useStateToaster } from '../../common/components/toasters';
 import { getReporters } from './api';
 import * as i18n from './translations';
 
diff --git a/x-pack/plugins/siem/public/containers/case/use_get_tags.test.tsx b/x-pack/plugins/siem/public/cases/containers/use_get_tags.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/containers/case/use_get_tags.test.tsx
rename to x-pack/plugins/siem/public/cases/containers/use_get_tags.test.tsx
diff --git a/x-pack/plugins/siem/public/containers/case/use_get_tags.tsx b/x-pack/plugins/siem/public/cases/containers/use_get_tags.tsx
similarity index 96%
rename from x-pack/plugins/siem/public/containers/case/use_get_tags.tsx
rename to x-pack/plugins/siem/public/cases/containers/use_get_tags.tsx
index 99bb65fa160f7c..14f5e35bc4976e 100644
--- a/x-pack/plugins/siem/public/containers/case/use_get_tags.tsx
+++ b/x-pack/plugins/siem/public/cases/containers/use_get_tags.tsx
@@ -6,7 +6,7 @@
 
 import { useEffect, useReducer } from 'react';
 
-import { errorToToaster, useStateToaster } from '../../components/toasters';
+import { errorToToaster, useStateToaster } from '../../common/components/toasters';
 import { getTags } from './api';
 import * as i18n from './translations';
 
diff --git a/x-pack/plugins/siem/public/containers/case/use_post_case.test.tsx b/x-pack/plugins/siem/public/cases/containers/use_post_case.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/containers/case/use_post_case.test.tsx
rename to x-pack/plugins/siem/public/cases/containers/use_post_case.test.tsx
diff --git a/x-pack/plugins/siem/public/containers/case/use_post_case.tsx b/x-pack/plugins/siem/public/cases/containers/use_post_case.tsx
similarity index 96%
rename from x-pack/plugins/siem/public/containers/case/use_post_case.tsx
rename to x-pack/plugins/siem/public/cases/containers/use_post_case.tsx
index b33269f26e97dd..13cfc2738620fc 100644
--- a/x-pack/plugins/siem/public/containers/case/use_post_case.tsx
+++ b/x-pack/plugins/siem/public/cases/containers/use_post_case.tsx
@@ -7,7 +7,7 @@
 import { useReducer, useCallback } from 'react';
 
 import { CasePostRequest } from '../../../../case/common/api';
-import { errorToToaster, useStateToaster } from '../../components/toasters';
+import { errorToToaster, useStateToaster } from '../../common/components/toasters';
 import { postCase } from './api';
 import * as i18n from './translations';
 import { Case } from './types';
diff --git a/x-pack/plugins/siem/public/containers/case/use_post_comment.test.tsx b/x-pack/plugins/siem/public/cases/containers/use_post_comment.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/containers/case/use_post_comment.test.tsx
rename to x-pack/plugins/siem/public/cases/containers/use_post_comment.test.tsx
diff --git a/x-pack/plugins/siem/public/containers/case/use_post_comment.tsx b/x-pack/plugins/siem/public/cases/containers/use_post_comment.tsx
similarity index 96%
rename from x-pack/plugins/siem/public/containers/case/use_post_comment.tsx
rename to x-pack/plugins/siem/public/cases/containers/use_post_comment.tsx
index c7d3b4125aada8..9a52eaaf0db6b3 100644
--- a/x-pack/plugins/siem/public/containers/case/use_post_comment.tsx
+++ b/x-pack/plugins/siem/public/cases/containers/use_post_comment.tsx
@@ -7,7 +7,7 @@
 import { useReducer, useCallback } from 'react';
 
 import { CommentRequest } from '../../../../case/common/api';
-import { errorToToaster, useStateToaster } from '../../components/toasters';
+import { errorToToaster, useStateToaster } from '../../common/components/toasters';
 
 import { postComment } from './api';
 import * as i18n from './translations';
diff --git a/x-pack/plugins/siem/public/containers/case/use_post_push_to_service.test.tsx b/x-pack/plugins/siem/public/cases/containers/use_post_push_to_service.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/containers/case/use_post_push_to_service.test.tsx
rename to x-pack/plugins/siem/public/cases/containers/use_post_push_to_service.test.tsx
diff --git a/x-pack/plugins/siem/public/containers/case/use_post_push_to_service.tsx b/x-pack/plugins/siem/public/cases/containers/use_post_push_to_service.tsx
similarity index 98%
rename from x-pack/plugins/siem/public/containers/case/use_post_push_to_service.tsx
rename to x-pack/plugins/siem/public/cases/containers/use_post_push_to_service.tsx
index 7f4c4a42761721..def324dcf442e3 100644
--- a/x-pack/plugins/siem/public/containers/case/use_post_push_to_service.tsx
+++ b/x-pack/plugins/siem/public/cases/containers/use_post_push_to_service.tsx
@@ -10,7 +10,11 @@ import {
   ServiceConnectorCaseResponse,
   ServiceConnectorCaseParams,
 } from '../../../../case/common/api';
-import { errorToToaster, useStateToaster, displaySuccessToast } from '../../components/toasters';
+import {
+  errorToToaster,
+  useStateToaster,
+  displaySuccessToast,
+} from '../../common/components/toasters';
 
 import { getCase, pushToService, pushCase } from './api';
 import * as i18n from './translations';
diff --git a/x-pack/plugins/siem/public/containers/case/use_update_case.test.tsx b/x-pack/plugins/siem/public/cases/containers/use_update_case.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/containers/case/use_update_case.test.tsx
rename to x-pack/plugins/siem/public/cases/containers/use_update_case.test.tsx
diff --git a/x-pack/plugins/siem/public/containers/case/use_update_case.tsx b/x-pack/plugins/siem/public/cases/containers/use_update_case.tsx
similarity index 96%
rename from x-pack/plugins/siem/public/containers/case/use_update_case.tsx
rename to x-pack/plugins/siem/public/cases/containers/use_update_case.tsx
index af824674999b9a..77cf53165d9147 100644
--- a/x-pack/plugins/siem/public/containers/case/use_update_case.tsx
+++ b/x-pack/plugins/siem/public/cases/containers/use_update_case.tsx
@@ -5,7 +5,11 @@
  */
 
 import { useReducer, useCallback } from 'react';
-import { displaySuccessToast, errorToToaster, useStateToaster } from '../../components/toasters';
+import {
+  displaySuccessToast,
+  errorToToaster,
+  useStateToaster,
+} from '../../common/components/toasters';
 import { CasePatchRequest } from '../../../../case/common/api';
 
 import { patchCase } from './api';
diff --git a/x-pack/plugins/siem/public/containers/case/use_update_comment.test.tsx b/x-pack/plugins/siem/public/cases/containers/use_update_comment.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/containers/case/use_update_comment.test.tsx
rename to x-pack/plugins/siem/public/cases/containers/use_update_comment.test.tsx
diff --git a/x-pack/plugins/siem/public/containers/case/use_update_comment.tsx b/x-pack/plugins/siem/public/cases/containers/use_update_comment.tsx
similarity index 97%
rename from x-pack/plugins/siem/public/containers/case/use_update_comment.tsx
rename to x-pack/plugins/siem/public/cases/containers/use_update_comment.tsx
index ffc5cffee7a554..66064faea27d71 100644
--- a/x-pack/plugins/siem/public/containers/case/use_update_comment.tsx
+++ b/x-pack/plugins/siem/public/cases/containers/use_update_comment.tsx
@@ -6,7 +6,7 @@
 
 import { useReducer, useCallback } from 'react';
 
-import { errorToToaster, useStateToaster } from '../../components/toasters';
+import { errorToToaster, useStateToaster } from '../../common/components/toasters';
 
 import { patchComment } from './api';
 import * as i18n from './translations';
diff --git a/x-pack/plugins/siem/public/cases/containers/utils.ts b/x-pack/plugins/siem/public/cases/containers/utils.ts
new file mode 100644
index 00000000000000..ebaba0fe42f788
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/containers/utils.ts
@@ -0,0 +1,107 @@
+/*
+ * 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 { camelCase, isArray, isObject, set } from 'lodash';
+import { fold } from 'fp-ts/lib/Either';
+import { identity } from 'fp-ts/lib/function';
+import { pipe } from 'fp-ts/lib/pipeable';
+
+import {
+  CasesFindResponse,
+  CasesFindResponseRt,
+  CaseResponse,
+  CaseResponseRt,
+  CasesResponse,
+  CasesResponseRt,
+  CasesStatusResponseRt,
+  CasesStatusResponse,
+  throwErrors,
+  CasesConfigureResponse,
+  CaseConfigureResponseRt,
+  CaseUserActionsResponse,
+  CaseUserActionsResponseRt,
+  ServiceConnectorCaseResponseRt,
+  ServiceConnectorCaseResponse,
+} from '../../../../case/common/api';
+import { ToasterError } from '../../common/components/toasters';
+import { AllCases, Case } from './types';
+
+export const getTypedPayload = <T>(a: unknown): T => a as T;
+
+export const parseString = (params: string) => {
+  try {
+    return JSON.parse(params);
+  } catch {
+    return null;
+  }
+};
+
+export const convertArrayToCamelCase = (arrayOfSnakes: unknown[]): unknown[] =>
+  arrayOfSnakes.reduce((acc: unknown[], value) => {
+    if (isArray(value)) {
+      return [...acc, convertArrayToCamelCase(value)];
+    } else if (isObject(value)) {
+      return [...acc, convertToCamelCase(value)];
+    } else {
+      return [...acc, value];
+    }
+  }, []);
+
+export const convertToCamelCase = <T, U extends {}>(snakeCase: T): U =>
+  Object.entries(snakeCase).reduce((acc, [key, value]) => {
+    if (isArray(value)) {
+      set(acc, camelCase(key), convertArrayToCamelCase(value));
+    } else if (isObject(value)) {
+      set(acc, camelCase(key), convertToCamelCase(value));
+    } else {
+      set(acc, camelCase(key), value);
+    }
+    return acc;
+  }, {} as U);
+
+export const convertAllCasesToCamel = (snakeCases: CasesFindResponse): AllCases => ({
+  cases: snakeCases.cases.map(snakeCase => convertToCamelCase<CaseResponse, Case>(snakeCase)),
+  countClosedCases: snakeCases.count_closed_cases,
+  countOpenCases: snakeCases.count_open_cases,
+  page: snakeCases.page,
+  perPage: snakeCases.per_page,
+  total: snakeCases.total,
+});
+
+export const decodeCasesStatusResponse = (respCase?: CasesStatusResponse) =>
+  pipe(
+    CasesStatusResponseRt.decode(respCase),
+    fold(throwErrors(createToasterPlainError), identity)
+  );
+
+export const createToasterPlainError = (message: string) => new ToasterError([message]);
+
+export const decodeCaseResponse = (respCase?: CaseResponse) =>
+  pipe(CaseResponseRt.decode(respCase), fold(throwErrors(createToasterPlainError), identity));
+
+export const decodeCasesResponse = (respCase?: CasesResponse) =>
+  pipe(CasesResponseRt.decode(respCase), fold(throwErrors(createToasterPlainError), identity));
+
+export const decodeCasesFindResponse = (respCases?: CasesFindResponse) =>
+  pipe(CasesFindResponseRt.decode(respCases), fold(throwErrors(createToasterPlainError), identity));
+
+export const decodeCaseConfigureResponse = (respCase?: CasesConfigureResponse) =>
+  pipe(
+    CaseConfigureResponseRt.decode(respCase),
+    fold(throwErrors(createToasterPlainError), identity)
+  );
+
+export const decodeCaseUserActionsResponse = (respUserActions?: CaseUserActionsResponse) =>
+  pipe(
+    CaseUserActionsResponseRt.decode(respUserActions),
+    fold(throwErrors(createToasterPlainError), identity)
+  );
+
+export const decodeServiceConnectorCaseResponse = (respPushCase?: ServiceConnectorCaseResponse) =>
+  pipe(
+    ServiceConnectorCaseResponseRt.decode(respPushCase),
+    fold(throwErrors(createToasterPlainError), identity)
+  );
diff --git a/x-pack/plugins/siem/public/cases/index.ts b/x-pack/plugins/siem/public/cases/index.ts
new file mode 100644
index 00000000000000..1eb8c82532e217
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/index.ts
@@ -0,0 +1,18 @@
+/*
+ * 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 { SecuritySubPlugin } from '../app/types';
+import { getCasesRoutes } from './routes';
+
+export class Cases {
+  public setup() {}
+
+  public start(): SecuritySubPlugin {
+    return {
+      routes: getCasesRoutes(),
+    };
+  }
+}
diff --git a/x-pack/plugins/siem/public/cases/pages/case.tsx b/x-pack/plugins/siem/public/cases/pages/case.tsx
new file mode 100644
index 00000000000000..03ebec34c2cdd6
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/pages/case.tsx
@@ -0,0 +1,38 @@
+/*
+ * 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 { WrapperPage } from '../../common/components/wrapper_page';
+import { useGetUserSavedObjectPermissions } from '../../common/lib/kibana';
+import { SpyRoute } from '../../common/utils/route/spy_routes';
+import { AllCases } from '../components/all_cases';
+
+import { savedObjectReadOnly, CaseCallOut } from '../components/callout';
+import { CaseSavedObjectNoPermissions } from './saved_object_no_permissions';
+
+export const CasesPage = React.memo(() => {
+  const userPermissions = useGetUserSavedObjectPermissions();
+
+  return userPermissions == null || userPermissions?.read ? (
+    <>
+      <WrapperPage>
+        {userPermissions != null && !userPermissions?.crud && userPermissions?.read && (
+          <CaseCallOut
+            title={savedObjectReadOnly.title}
+            message={savedObjectReadOnly.description}
+          />
+        )}
+        <AllCases userCanCrud={userPermissions?.crud ?? false} />
+      </WrapperPage>
+      <SpyRoute />
+    </>
+  ) : (
+    <CaseSavedObjectNoPermissions />
+  );
+});
+
+CasesPage.displayName = 'CasesPage';
diff --git a/x-pack/plugins/siem/public/cases/pages/case_details.tsx b/x-pack/plugins/siem/public/cases/pages/case_details.tsx
new file mode 100644
index 00000000000000..5ea5e52951592a
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/pages/case_details.tsx
@@ -0,0 +1,38 @@
+/*
+ * 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 { useParams, Redirect } from 'react-router-dom';
+
+import { useGetUrlSearch } from '../../common/components/navigation/use_get_url_search';
+import { useGetUserSavedObjectPermissions } from '../../common/lib/kibana';
+import { SpyRoute } from '../../common/utils/route/spy_routes';
+import { getCaseUrl } from '../../common/components/link_to';
+import { navTabs } from '../../app/home/home_navigations';
+import { CaseView } from '../components/case_view';
+import { savedObjectReadOnly, CaseCallOut } from '../components/callout';
+
+export const CaseDetailsPage = React.memo(() => {
+  const userPermissions = useGetUserSavedObjectPermissions();
+  const { detailName: caseId } = useParams();
+  const search = useGetUrlSearch(navTabs.case);
+
+  if (userPermissions != null && !userPermissions.read) {
+    return <Redirect to={getCaseUrl(search)} />;
+  }
+
+  return caseId != null ? (
+    <>
+      {userPermissions != null && !userPermissions?.crud && userPermissions?.read && (
+        <CaseCallOut title={savedObjectReadOnly.title} message={savedObjectReadOnly.description} />
+      )}
+      <CaseView caseId={caseId} userCanCrud={userPermissions?.crud ?? false} />
+      <SpyRoute />
+    </>
+  ) : null;
+});
+
+CaseDetailsPage.displayName = 'CaseDetailsPage';
diff --git a/x-pack/plugins/siem/public/cases/pages/configure_cases.tsx b/x-pack/plugins/siem/public/cases/pages/configure_cases.tsx
new file mode 100644
index 00000000000000..bea3a9fb110ab0
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/pages/configure_cases.tsx
@@ -0,0 +1,58 @@
+/*
+ * 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, { useMemo } from 'react';
+import { Redirect } from 'react-router-dom';
+
+import { getCaseUrl } from '../../common/components/link_to';
+import { useGetUrlSearch } from '../../common/components/navigation/use_get_url_search';
+import { WrapperPage } from '../../common/components/wrapper_page';
+import { useGetUserSavedObjectPermissions } from '../../common/lib/kibana';
+import { SpyRoute } from '../../common/utils/route/spy_routes';
+import { navTabs } from '../../app/home/home_navigations';
+import { CaseHeaderPage } from '../components/case_header_page';
+import { ConfigureCases } from '../components/configure_cases';
+import { WhitePageWrapper, SectionWrapper } from '../components/wrappers';
+import * as i18n from './translations';
+
+const wrapperPageStyle: Record<string, string> = {
+  paddingLeft: '0',
+  paddingRight: '0',
+  paddingBottom: '0',
+};
+
+const ConfigureCasesPageComponent: React.FC = () => {
+  const userPermissions = useGetUserSavedObjectPermissions();
+  const search = useGetUrlSearch(navTabs.case);
+
+  const backOptions = useMemo(
+    () => ({
+      href: getCaseUrl(search),
+      text: i18n.BACK_TO_ALL,
+    }),
+    [search]
+  );
+
+  if (userPermissions != null && !userPermissions.read) {
+    return <Redirect to={getCaseUrl(search)} />;
+  }
+
+  return (
+    <>
+      <WrapperPage style={wrapperPageStyle}>
+        <SectionWrapper>
+          <CaseHeaderPage title={i18n.CONFIGURE_CASES_PAGE_TITLE} backOptions={backOptions} />
+        </SectionWrapper>
+        <WhitePageWrapper>
+          <ConfigureCases userCanCrud={userPermissions?.crud ?? false} />
+        </WhitePageWrapper>
+      </WrapperPage>
+      <SpyRoute />
+    </>
+  );
+};
+
+export const ConfigureCasesPage = React.memo(ConfigureCasesPageComponent);
diff --git a/x-pack/plugins/siem/public/cases/pages/create_case.tsx b/x-pack/plugins/siem/public/cases/pages/create_case.tsx
new file mode 100644
index 00000000000000..c586a90e5ef9c3
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/pages/create_case.tsx
@@ -0,0 +1,47 @@
+/*
+ * 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, { useMemo } from 'react';
+import { Redirect } from 'react-router-dom';
+
+import { getCaseUrl } from '../../common/components/link_to';
+import { useGetUrlSearch } from '../../common/components/navigation/use_get_url_search';
+import { WrapperPage } from '../../common/components/wrapper_page';
+import { useGetUserSavedObjectPermissions } from '../../common/lib/kibana';
+import { SpyRoute } from '../../common/utils/route/spy_routes';
+import { navTabs } from '../../app/home/home_navigations';
+import { CaseHeaderPage } from '../components/case_header_page';
+import { Create } from '../components/create';
+import * as i18n from './translations';
+
+export const CreateCasePage = React.memo(() => {
+  const userPermissions = useGetUserSavedObjectPermissions();
+  const search = useGetUrlSearch(navTabs.case);
+
+  const backOptions = useMemo(
+    () => ({
+      href: getCaseUrl(search),
+      text: i18n.BACK_TO_ALL,
+    }),
+    [search]
+  );
+
+  if (userPermissions != null && !userPermissions.crud) {
+    return <Redirect to={getCaseUrl(search)} />;
+  }
+
+  return (
+    <>
+      <WrapperPage>
+        <CaseHeaderPage backOptions={backOptions} title={i18n.CREATE_TITLE} />
+        <Create />
+      </WrapperPage>
+      <SpyRoute />
+    </>
+  );
+});
+
+CreateCasePage.displayName = 'CreateCasePage';
diff --git a/x-pack/plugins/siem/public/cases/pages/index.tsx b/x-pack/plugins/siem/public/cases/pages/index.tsx
new file mode 100644
index 00000000000000..32f64d2690cba0
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/pages/index.tsx
@@ -0,0 +1,42 @@
+/*
+ * 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 { Route, Switch } from 'react-router-dom';
+import { SiemPageName } from '../../app/types';
+import { CaseDetailsPage } from './case_details';
+import { CasesPage } from './case';
+import { CreateCasePage } from './create_case';
+import { ConfigureCasesPage } from './configure_cases';
+
+const casesPagePath = `/:pageName(${SiemPageName.case})`;
+const caseDetailsPagePath = `${casesPagePath}/:detailName`;
+const caseDetailsPagePathWithCommentId = `${casesPagePath}/:detailName/:commentId`;
+const createCasePagePath = `${casesPagePath}/create`;
+const configureCasesPagePath = `${casesPagePath}/configure`;
+
+const CaseContainerComponent: React.FC = () => (
+  <Switch>
+    <Route strict exact path={casesPagePath}>
+      <CasesPage />
+    </Route>
+    <Route strict exact path={createCasePagePath}>
+      <CreateCasePage />
+    </Route>
+    <Route strict exact path={configureCasesPagePath}>
+      <ConfigureCasesPage />
+    </Route>
+    <Route strict path={caseDetailsPagePathWithCommentId}>
+      <CaseDetailsPage />
+    </Route>
+    <Route strict path={caseDetailsPagePath}>
+      <CaseDetailsPage />
+    </Route>
+  </Switch>
+);
+
+export const Case = React.memo(CaseContainerComponent);
diff --git a/x-pack/plugins/siem/public/pages/case/saved_object_no_permissions.tsx b/x-pack/plugins/siem/public/cases/pages/saved_object_no_permissions.tsx
similarity index 88%
rename from x-pack/plugins/siem/public/pages/case/saved_object_no_permissions.tsx
rename to x-pack/plugins/siem/public/cases/pages/saved_object_no_permissions.tsx
index 689c290c910191..a560f697de415c 100644
--- a/x-pack/plugins/siem/public/pages/case/saved_object_no_permissions.tsx
+++ b/x-pack/plugins/siem/public/cases/pages/saved_object_no_permissions.tsx
@@ -6,9 +6,9 @@
 
 import React from 'react';
 
-import { EmptyPage } from '../../components/empty_page';
+import { EmptyPage } from '../../common/components/empty_page';
 import * as i18n from './translations';
-import { useKibana } from '../../lib/kibana';
+import { useKibana } from '../../common/lib/kibana';
 
 export const CaseSavedObjectNoPermissions = React.memo(() => {
   const docLinks = useKibana().services.docLinks;
diff --git a/x-pack/plugins/siem/public/pages/case/translations.ts b/x-pack/plugins/siem/public/cases/pages/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/case/translations.ts
rename to x-pack/plugins/siem/public/cases/pages/translations.ts
diff --git a/x-pack/plugins/siem/public/cases/pages/utils.ts b/x-pack/plugins/siem/public/cases/pages/utils.ts
new file mode 100644
index 00000000000000..0b60d66756d0c8
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/pages/utils.ts
@@ -0,0 +1,42 @@
+/*
+ * 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 { isEmpty } from 'lodash/fp';
+
+import { ChromeBreadcrumb } from 'src/core/public';
+
+import { getCaseDetailsUrl, getCaseUrl, getCreateCaseUrl } from '../../common/components/link_to';
+import { RouteSpyState } from '../../common/utils/route/types';
+import * as i18n from './translations';
+
+export const getBreadcrumbs = (params: RouteSpyState, search: string[]): ChromeBreadcrumb[] => {
+  const queryParameters = !isEmpty(search[0]) ? search[0] : null;
+
+  let breadcrumb = [
+    {
+      text: i18n.PAGE_TITLE,
+      href: getCaseUrl(queryParameters),
+    },
+  ];
+  if (params.detailName === 'create') {
+    breadcrumb = [
+      ...breadcrumb,
+      {
+        text: i18n.CREATE_BC_TITLE,
+        href: getCreateCaseUrl(queryParameters),
+      },
+    ];
+  } else if (params.detailName != null) {
+    breadcrumb = [
+      ...breadcrumb,
+      {
+        text: params.state?.caseTitle ?? '',
+        href: getCaseDetailsUrl({ id: params.detailName, search: queryParameters }),
+      },
+    ];
+  }
+  return breadcrumb;
+};
diff --git a/x-pack/plugins/siem/public/cases/routes.tsx b/x-pack/plugins/siem/public/cases/routes.tsx
new file mode 100644
index 00000000000000..698350e49bc3eb
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/routes.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 { Route } from 'react-router-dom';
+
+import { Case } from './pages';
+import { SiemPageName } from '../app/types';
+
+export const getCasesRoutes = () => [
+  <Route path={`/:pageName(${SiemPageName.case})`}>
+    <Case />
+  </Route>,
+];
diff --git a/x-pack/plugins/siem/public/cases/translations.ts b/x-pack/plugins/siem/public/cases/translations.ts
new file mode 100644
index 00000000000000..782ba9d9f32dbc
--- /dev/null
+++ b/x-pack/plugins/siem/public/cases/translations.ts
@@ -0,0 +1,205 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+export const SAVED_OBJECT_NO_PERMISSIONS_TITLE = i18n.translate(
+  'xpack.siem.case.caseSavedObjectNoPermissionsTitle',
+  {
+    defaultMessage: 'Kibana feature privileges required',
+  }
+);
+
+export const SAVED_OBJECT_NO_PERMISSIONS_MSG = i18n.translate(
+  'xpack.siem.case.caseSavedObjectNoPermissionsMessage',
+  {
+    defaultMessage:
+      'To view cases, you must have privileges for the Saved Object Management feature in the Kibana space. For more information, contact your Kibana administrator.',
+  }
+);
+
+export const BACK_TO_ALL = i18n.translate('xpack.siem.case.caseView.backLabel', {
+  defaultMessage: 'Back to cases',
+});
+
+export const CANCEL = i18n.translate('xpack.siem.case.caseView.cancel', {
+  defaultMessage: 'Cancel',
+});
+
+export const DELETE_CASE = i18n.translate('xpack.siem.case.confirmDeleteCase.deleteCase', {
+  defaultMessage: 'Delete case',
+});
+
+export const DELETE_CASES = i18n.translate('xpack.siem.case.confirmDeleteCase.deleteCases', {
+  defaultMessage: 'Delete cases',
+});
+
+export const NAME = i18n.translate('xpack.siem.case.caseView.name', {
+  defaultMessage: 'Name',
+});
+
+export const OPENED_ON = i18n.translate('xpack.siem.case.caseView.openedOn', {
+  defaultMessage: 'Opened on',
+});
+
+export const CLOSED_ON = i18n.translate('xpack.siem.case.caseView.closedOn', {
+  defaultMessage: 'Closed on',
+});
+
+export const REPORTER = i18n.translate('xpack.siem.case.caseView.reporterLabel', {
+  defaultMessage: 'Reporter',
+});
+
+export const PARTICIPANTS = i18n.translate('xpack.siem.case.caseView.particpantsLabel', {
+  defaultMessage: 'Participants',
+});
+
+export const CREATE_BC_TITLE = i18n.translate('xpack.siem.case.caseView.breadcrumb', {
+  defaultMessage: 'Create',
+});
+
+export const CREATE_TITLE = i18n.translate('xpack.siem.case.caseView.create', {
+  defaultMessage: 'Create new case',
+});
+
+export const DESCRIPTION = i18n.translate('xpack.siem.case.caseView.description', {
+  defaultMessage: 'Description',
+});
+
+export const DESCRIPTION_REQUIRED = i18n.translate(
+  'xpack.siem.case.createCase.descriptionFieldRequiredError',
+  {
+    defaultMessage: 'A description is required.',
+  }
+);
+
+export const COMMENT_REQUIRED = i18n.translate(
+  'xpack.siem.case.caseView.commentFieldRequiredError',
+  {
+    defaultMessage: 'A comment is required.',
+  }
+);
+
+export const REQUIRED_FIELD = i18n.translate('xpack.siem.case.caseView.fieldRequiredError', {
+  defaultMessage: 'Required field',
+});
+
+export const EDIT = i18n.translate('xpack.siem.case.caseView.edit', {
+  defaultMessage: 'Edit',
+});
+
+export const OPTIONAL = i18n.translate('xpack.siem.case.caseView.optional', {
+  defaultMessage: 'Optional',
+});
+
+export const PAGE_TITLE = i18n.translate('xpack.siem.case.pageTitle', {
+  defaultMessage: 'Cases',
+});
+
+export const CREATE_CASE = i18n.translate('xpack.siem.case.caseView.createCase', {
+  defaultMessage: 'Create case',
+});
+
+export const CLOSED_CASE = i18n.translate('xpack.siem.case.caseView.closedCase', {
+  defaultMessage: 'Closed case',
+});
+
+export const CLOSE_CASE = i18n.translate('xpack.siem.case.caseView.closeCase', {
+  defaultMessage: 'Close case',
+});
+
+export const REOPEN_CASE = i18n.translate('xpack.siem.case.caseView.reopenCase', {
+  defaultMessage: 'Reopen case',
+});
+
+export const REOPENED_CASE = i18n.translate('xpack.siem.case.caseView.reopenedCase', {
+  defaultMessage: 'Reopened case',
+});
+
+export const CASE_NAME = i18n.translate('xpack.siem.case.caseView.caseName', {
+  defaultMessage: 'Case name',
+});
+
+export const TO = i18n.translate('xpack.siem.case.caseView.to', {
+  defaultMessage: 'to',
+});
+
+export const TAGS = i18n.translate('xpack.siem.case.caseView.tags', {
+  defaultMessage: 'Tags',
+});
+
+export const ACTIONS = i18n.translate('xpack.siem.case.allCases.actions', {
+  defaultMessage: 'Actions',
+});
+
+export const NO_TAGS_AVAILABLE = i18n.translate('xpack.siem.case.allCases.noTagsAvailable', {
+  defaultMessage: 'No tags available',
+});
+
+export const NO_REPORTERS_AVAILABLE = i18n.translate(
+  'xpack.siem.case.caseView.noReportersAvailable',
+  {
+    defaultMessage: 'No reporters available.',
+  }
+);
+
+export const COMMENTS = i18n.translate('xpack.siem.case.allCases.comments', {
+  defaultMessage: 'Comments',
+});
+
+export const TAGS_HELP = i18n.translate('xpack.siem.case.createCase.fieldTagsHelpText', {
+  defaultMessage:
+    'Type one or more custom identifying tags for this case. Press enter after each tag to begin a new one.',
+});
+
+export const NO_TAGS = i18n.translate('xpack.siem.case.caseView.noTags', {
+  defaultMessage: 'No tags are currently assigned to this case.',
+});
+
+export const TITLE_REQUIRED = i18n.translate('xpack.siem.case.createCase.titleFieldRequiredError', {
+  defaultMessage: 'A title is required.',
+});
+
+export const CONFIGURE_CASES_PAGE_TITLE = i18n.translate(
+  'xpack.siem.case.configureCases.headerTitle',
+  {
+    defaultMessage: 'Configure cases',
+  }
+);
+
+export const CONFIGURE_CASES_BUTTON = i18n.translate('xpack.siem.case.configureCasesButton', {
+  defaultMessage: 'Edit external connection',
+});
+
+export const ADD_COMMENT = i18n.translate('xpack.siem.case.caseView.comment.addComment', {
+  defaultMessage: 'Add comment',
+});
+
+export const ADD_COMMENT_HELP_TEXT = i18n.translate(
+  'xpack.siem.case.caseView.comment.addCommentHelpText',
+  {
+    defaultMessage: 'Add a new comment...',
+  }
+);
+
+export const SAVE = i18n.translate('xpack.siem.case.caseView.description.save', {
+  defaultMessage: 'Save',
+});
+
+export const GO_TO_DOCUMENTATION = i18n.translate(
+  'xpack.siem.case.caseView.goToDocumentationButton',
+  {
+    defaultMessage: 'View documentation',
+  }
+);
+
+export const CONNECTORS = i18n.translate('xpack.siem.case.caseView.connectors', {
+  defaultMessage: 'External incident management system',
+});
+
+export const EDIT_CONNECTOR = i18n.translate('xpack.siem.case.caseView.editConnector', {
+  defaultMessage: 'Change external incident management system',
+});
diff --git a/x-pack/plugins/siem/public/components/page/add_filter_to_global_search_bar/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/common/components/add_filter_to_global_search_bar/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/add_filter_to_global_search_bar/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/add_filter_to_global_search_bar/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/page/add_filter_to_global_search_bar/helpers.test.tsx b/x-pack/plugins/siem/public/common/components/add_filter_to_global_search_bar/helpers.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/add_filter_to_global_search_bar/helpers.test.tsx
rename to x-pack/plugins/siem/public/common/components/add_filter_to_global_search_bar/helpers.test.tsx
diff --git a/x-pack/plugins/siem/public/components/page/add_filter_to_global_search_bar/helpers.ts b/x-pack/plugins/siem/public/common/components/add_filter_to_global_search_bar/helpers.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/add_filter_to_global_search_bar/helpers.ts
rename to x-pack/plugins/siem/public/common/components/add_filter_to_global_search_bar/helpers.ts
diff --git a/x-pack/plugins/siem/public/common/components/add_filter_to_global_search_bar/index.test.tsx b/x-pack/plugins/siem/public/common/components/add_filter_to_global_search_bar/index.test.tsx
new file mode 100644
index 00000000000000..18c0032f58c3c3
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/add_filter_to_global_search_bar/index.test.tsx
@@ -0,0 +1,175 @@
+/*
+ * 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 { mount, shallow } from 'enzyme';
+import React from 'react';
+
+import {
+  apolloClientObservable,
+  mockGlobalState,
+  TestProviders,
+  SUB_PLUGINS_REDUCER,
+} from '../../mock';
+import { createStore, State } from '../../store';
+import { AddFilterToGlobalSearchBar } from '.';
+
+const mockAddFilters = jest.fn();
+jest.mock('../../lib/kibana', () => ({
+  useKibana: () => ({
+    services: {
+      data: {
+        query: {
+          filterManager: {
+            addFilters: mockAddFilters,
+          },
+        },
+      },
+    },
+  }),
+}));
+
+describe('AddFilterToGlobalSearchBar Component', () => {
+  const state: State = mockGlobalState;
+  let store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable);
+
+  beforeEach(() => {
+    store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable);
+    mockAddFilters.mockClear();
+  });
+
+  test('Rendering', async () => {
+    const wrapper = shallow(
+      <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',
+              },
+            },
+          },
+        }}
+      >
+        <>{'siem-kibana'}</>
+      </AddFilterToGlobalSearchBar>
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('Rendering tooltip', 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',
+              },
+            },
+            query: {
+              match: {
+                'host.name': {
+                  query: 'siem-kibana',
+                  type: 'phrase',
+                },
+              },
+            },
+          }}
+        >
+          <>{'siem-kibana'}</>
+        </AddFilterToGlobalSearchBar>
+      </TestProviders>
+    );
+
+    wrapper.simulate('mouseenter');
+    wrapper.update();
+    expect(wrapper.find('[data-test-subj="hover-actions-container"] svg').first()).toBeTruthy();
+  });
+
+  test('Functionality with inputs state', async () => {
+    const onFilterAdded = jest.fn();
+
+    const wrapper = mount(
+      <TestProviders store={store}>
+        <AddFilterToGlobalSearchBar
+          onFilterAdded={onFilterAdded}
+          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',
+                },
+              },
+            },
+          }}
+        >
+          <>{'siem-kibana'}</>
+        </AddFilterToGlobalSearchBar>
+      </TestProviders>
+    );
+
+    wrapper
+      .simulate('mouseenter')
+      .find('[data-test-subj="hover-actions-container"] [data-euiicon-type]')
+      .first()
+      .simulate('click');
+    wrapper.update();
+
+    expect(mockAddFilters.mock.calls[0][0]).toEqual({
+      meta: {
+        alias: null,
+        disabled: false,
+        key: 'host.name',
+        negate: false,
+        params: {
+          query: 'siem-kibana',
+        },
+        type: 'phrase',
+        value: 'siem-kibana',
+      },
+      query: {
+        match: {
+          'host.name': {
+            query: 'siem-kibana',
+            type: 'phrase',
+          },
+        },
+      },
+    });
+    expect(onFilterAdded).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/x-pack/plugins/siem/public/common/components/add_filter_to_global_search_bar/index.tsx b/x-pack/plugins/siem/public/common/components/add_filter_to_global_search_bar/index.tsx
new file mode 100644
index 00000000000000..8a294ec1b71fdd
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/add_filter_to_global_search_bar/index.tsx
@@ -0,0 +1,81 @@
+/*
+ * 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 { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
+import React, { useCallback } from 'react';
+
+import { Filter } from '../../../../../../../src/plugins/data/public';
+import { WithHoverActions } from '../with_hover_actions';
+import { useKibana } from '../../lib/kibana';
+
+import * as i18n from './translations';
+
+export * from './helpers';
+
+interface OwnProps {
+  children: JSX.Element;
+  filter: Filter;
+  onFilterAdded?: () => void;
+}
+
+export const AddFilterToGlobalSearchBar = React.memo<OwnProps>(
+  ({ children, filter, onFilterAdded }) => {
+    const { filterManager } = useKibana().services.data.query;
+
+    const filterForValue = useCallback(() => {
+      filterManager.addFilters(filter);
+
+      if (onFilterAdded != null) {
+        onFilterAdded();
+      }
+    }, [filterManager, filter, onFilterAdded]);
+
+    const filterOutValue = useCallback(() => {
+      filterManager.addFilters({
+        ...filter,
+        meta: {
+          ...filter.meta,
+          negate: true,
+        },
+      });
+
+      if (onFilterAdded != null) {
+        onFilterAdded();
+      }
+    }, [filterManager, filter, onFilterAdded]);
+
+    return (
+      <WithHoverActions
+        hoverContent={
+          <div data-test-subj="hover-actions-container">
+            <EuiToolTip content={i18n.FILTER_FOR_VALUE}>
+              <EuiButtonIcon
+                aria-label={i18n.FILTER_FOR_VALUE}
+                color="text"
+                data-test-subj="add-to-filter"
+                iconType="magnifyWithPlus"
+                onClick={filterForValue}
+              />
+            </EuiToolTip>
+
+            <EuiToolTip content={i18n.FILTER_OUT_VALUE}>
+              <EuiButtonIcon
+                aria-label={i18n.FILTER_OUT_VALUE}
+                color="text"
+                data-test-subj="filter-out-value"
+                iconType="magnifyWithMinus"
+                onClick={filterOutValue}
+              />
+            </EuiToolTip>
+          </div>
+        }
+        render={() => children}
+      />
+    );
+  }
+);
+
+AddFilterToGlobalSearchBar.displayName = 'AddFilterToGlobalSearchBar';
diff --git a/x-pack/plugins/siem/public/components/page/add_filter_to_global_search_bar/translations.ts b/x-pack/plugins/siem/public/common/components/add_filter_to_global_search_bar/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/add_filter_to_global_search_bar/translations.ts
rename to x-pack/plugins/siem/public/common/components/add_filter_to_global_search_bar/translations.ts
diff --git a/x-pack/plugins/siem/public/components/alerts_viewer/alerts_table.tsx b/x-pack/plugins/siem/public/common/components/alerts_viewer/alerts_table.tsx
similarity index 96%
rename from x-pack/plugins/siem/public/components/alerts_viewer/alerts_table.tsx
rename to x-pack/plugins/siem/public/common/components/alerts_viewer/alerts_table.tsx
index d545a071c3ea68..dd608babef48fc 100644
--- a/x-pack/plugins/siem/public/components/alerts_viewer/alerts_table.tsx
+++ b/x-pack/plugins/siem/public/common/components/alerts_viewer/alerts_table.tsx
@@ -6,7 +6,7 @@
 
 import React, { useMemo } from 'react';
 
-import { Filter } from '../../../../../../src/plugins/data/public';
+import { Filter } from '../../../../../../../src/plugins/data/public';
 import { StatefulEventsViewer } from '../events_viewer';
 import * as i18n from './translations';
 import { alertsDefaultModel } from './default_headers';
diff --git a/x-pack/plugins/siem/public/components/alerts_viewer/default_headers.ts b/x-pack/plugins/siem/public/common/components/alerts_viewer/default_headers.ts
similarity index 85%
rename from x-pack/plugins/siem/public/components/alerts_viewer/default_headers.ts
rename to x-pack/plugins/siem/public/common/components/alerts_viewer/default_headers.ts
index b12bd1b6c2a516..cf5b565b99f673 100644
--- a/x-pack/plugins/siem/public/components/alerts_viewer/default_headers.ts
+++ b/x-pack/plugins/siem/public/common/components/alerts_viewer/default_headers.ts
@@ -4,13 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { defaultColumnHeaderType } from '../timeline/body/column_headers/default_headers';
+import { defaultColumnHeaderType } from '../../../timelines/components/timeline/body/column_headers/default_headers';
 import {
   DEFAULT_COLUMN_MIN_WIDTH,
   DEFAULT_DATE_COLUMN_MIN_WIDTH,
-} from '../timeline/body/constants';
-import { ColumnHeaderOptions, SubsetTimelineModel } from '../../store/timeline/model';
-import { timelineDefaults } from '../../store/timeline/defaults';
+} from '../../../timelines/components/timeline/body/constants';
+import { ColumnHeaderOptions, SubsetTimelineModel } from '../../../timelines/store/timeline/model';
+import { timelineDefaults } from '../../../timelines/store/timeline/defaults';
 
 export const alertsHeaders: ColumnHeaderOptions[] = [
   {
diff --git a/x-pack/plugins/siem/public/common/components/alerts_viewer/histogram_configs.ts b/x-pack/plugins/siem/public/common/components/alerts_viewer/histogram_configs.ts
new file mode 100644
index 00000000000000..5a00079bb056b1
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/alerts_viewer/histogram_configs.ts
@@ -0,0 +1,32 @@
+/*
+ * 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 * as i18n from './translations';
+import { MatrixHistogramOption, MatrixHisrogramConfigs } from '../matrix_histogram/types';
+import { HistogramType } from '../../../graphql/types';
+
+export const alertsStackByOptions: MatrixHistogramOption[] = [
+  {
+    text: 'event.category',
+    value: 'event.category',
+  },
+  {
+    text: 'event.module',
+    value: 'event.module',
+  },
+];
+
+const DEFAULT_STACK_BY = 'event.module';
+
+export const histogramConfigs: MatrixHisrogramConfigs = {
+  defaultStackByOption:
+    alertsStackByOptions.find(o => o.text === DEFAULT_STACK_BY) ?? alertsStackByOptions[1],
+  errorMessage: i18n.ERROR_FETCHING_ALERTS_DATA,
+  histogramType: HistogramType.alerts,
+  stackByOptions: alertsStackByOptions,
+  subtitle: undefined,
+  title: i18n.ALERTS_GRAPH_TITLE,
+};
diff --git a/x-pack/plugins/siem/public/common/components/alerts_viewer/index.tsx b/x-pack/plugins/siem/public/common/components/alerts_viewer/index.tsx
new file mode 100644
index 00000000000000..29f4bdff92ad60
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/alerts_viewer/index.tsx
@@ -0,0 +1,67 @@
+/*
+ * 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, { useEffect, useCallback, useMemo } from 'react';
+import numeral from '@elastic/numeral';
+
+import { DEFAULT_NUMBER_FORMAT } from '../../../../common/constants';
+import { AlertsComponentsQueryProps } from './types';
+import { AlertsTable } from './alerts_table';
+import * as i18n from './translations';
+import { useUiSetting$ } from '../../lib/kibana';
+import { MatrixHistogramContainer } from '../matrix_histogram';
+import { histogramConfigs } from './histogram_configs';
+import { MatrixHisrogramConfigs } from '../matrix_histogram/types';
+const ID = 'alertsOverTimeQuery';
+
+export const AlertsView = ({
+  deleteQuery,
+  endDate,
+  filterQuery,
+  pageFilters,
+  setQuery,
+  startDate,
+  type,
+}: AlertsComponentsQueryProps) => {
+  const [defaultNumberFormat] = useUiSetting$<string>(DEFAULT_NUMBER_FORMAT);
+  const getSubtitle = useCallback(
+    (totalCount: number) =>
+      `${i18n.SHOWING}: ${numeral(totalCount).format(defaultNumberFormat)} ${i18n.UNIT(
+        totalCount
+      )}`,
+    []
+  );
+  const alertsHistogramConfigs: MatrixHisrogramConfigs = useMemo(
+    () => ({
+      ...histogramConfigs,
+      subtitle: getSubtitle,
+    }),
+    [getSubtitle]
+  );
+  useEffect(() => {
+    return () => {
+      if (deleteQuery) {
+        deleteQuery({ id: ID });
+      }
+    };
+  }, [deleteQuery]);
+
+  return (
+    <>
+      <MatrixHistogramContainer
+        endDate={endDate}
+        filterQuery={filterQuery}
+        id={ID}
+        setQuery={setQuery}
+        sourceId="default"
+        startDate={startDate}
+        type={type}
+        {...alertsHistogramConfigs}
+      />
+      <AlertsTable endDate={endDate} startDate={startDate} pageFilters={pageFilters} />
+    </>
+  );
+};
+AlertsView.displayName = 'AlertsView';
diff --git a/x-pack/plugins/siem/public/components/alerts_viewer/translations.ts b/x-pack/plugins/siem/public/common/components/alerts_viewer/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/alerts_viewer/translations.ts
rename to x-pack/plugins/siem/public/common/components/alerts_viewer/translations.ts
diff --git a/x-pack/plugins/siem/public/common/components/alerts_viewer/types.ts b/x-pack/plugins/siem/public/common/components/alerts_viewer/types.ts
new file mode 100644
index 00000000000000..2bc33aaf1bae77
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/alerts_viewer/types.ts
@@ -0,0 +1,22 @@
+/*
+ * 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 { Filter } from '../../../../../../../src/plugins/data/public';
+import { HostsComponentsQueryProps } from '../../../hosts/pages/navigation/types';
+import { NetworkComponentQueryProps } from '../../../network/pages/navigation/types';
+import { MatrixHistogramOption } from '../matrix_histogram/types';
+
+type CommonQueryProps = HostsComponentsQueryProps | NetworkComponentQueryProps;
+export interface AlertsComponentsQueryProps
+  extends Pick<
+    CommonQueryProps,
+    'deleteQuery' | 'endDate' | 'filterQuery' | 'skip' | 'setQuery' | 'startDate' | 'type'
+  > {
+  pageFilters: Filter[];
+  stackByOptions?: MatrixHistogramOption[];
+  defaultFilters?: Filter[];
+  defaultStackByOption?: MatrixHistogramOption;
+}
diff --git a/x-pack/plugins/siem/public/components/autocomplete_field/__examples__/index.stories.tsx b/x-pack/plugins/siem/public/common/components/autocomplete_field/__examples__/index.stories.tsx
similarity index 94%
rename from x-pack/plugins/siem/public/components/autocomplete_field/__examples__/index.stories.tsx
rename to x-pack/plugins/siem/public/common/components/autocomplete_field/__examples__/index.stories.tsx
index dccc156ff6e447..8f261da629f949 100644
--- a/x-pack/plugins/siem/public/components/autocomplete_field/__examples__/index.stories.tsx
+++ b/x-pack/plugins/siem/public/common/components/autocomplete_field/__examples__/index.stories.tsx
@@ -11,7 +11,7 @@ import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
 import {
   QuerySuggestion,
   QuerySuggestionTypes,
-} from '../../../../../../../src/plugins/data/public';
+} from '../../../../../../../../src/plugins/data/public';
 import { SuggestionItem } from '../suggestion_item';
 
 const suggestion: QuerySuggestion = {
diff --git a/x-pack/plugins/siem/public/components/autocomplete_field/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/common/components/autocomplete_field/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/autocomplete_field/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/autocomplete_field/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/common/components/autocomplete_field/index.test.tsx b/x-pack/plugins/siem/public/common/components/autocomplete_field/index.test.tsx
new file mode 100644
index 00000000000000..55e114818ffea1
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/autocomplete_field/index.test.tsx
@@ -0,0 +1,388 @@
+/*
+ * 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 { EuiFieldSearch } from '@elastic/eui';
+import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
+import { mount, shallow } from 'enzyme';
+import { noop } from 'lodash/fp';
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import {
+  QuerySuggestion,
+  QuerySuggestionTypes,
+} from '../../../../../../../src/plugins/data/public';
+
+import { TestProviders } from '../../mock';
+
+import { AutocompleteField } from '.';
+
+const mockAutoCompleteData: QuerySuggestion[] = [
+  {
+    type: QuerySuggestionTypes.Field,
+    text: 'agent.ephemeral_id ',
+    description:
+      '<p>Filter results that contain <span class="suggestionItem__callout">agent.ephemeral_id</span></p>',
+    start: 0,
+    end: 1,
+  },
+  {
+    type: QuerySuggestionTypes.Field,
+    text: 'agent.hostname ',
+    description:
+      '<p>Filter results that contain <span class="suggestionItem__callout">agent.hostname</span></p>',
+    start: 0,
+    end: 1,
+  },
+  {
+    type: QuerySuggestionTypes.Field,
+    text: 'agent.id ',
+    description:
+      '<p>Filter results that contain <span class="suggestionItem__callout">agent.id</span></p>',
+    start: 0,
+    end: 1,
+  },
+  {
+    type: QuerySuggestionTypes.Field,
+    text: 'agent.name ',
+    description:
+      '<p>Filter results that contain <span class="suggestionItem__callout">agent.name</span></p>',
+    start: 0,
+    end: 1,
+  },
+  {
+    type: QuerySuggestionTypes.Field,
+    text: 'agent.type ',
+    description:
+      '<p>Filter results that contain <span class="suggestionItem__callout">agent.type</span></p>',
+    start: 0,
+    end: 1,
+  },
+  {
+    type: QuerySuggestionTypes.Field,
+    text: 'agent.version ',
+    description:
+      '<p>Filter results that contain <span class="suggestionItem__callout">agent.version</span></p>',
+    start: 0,
+    end: 1,
+  },
+  {
+    type: QuerySuggestionTypes.Field,
+    text: 'agent.test1 ',
+    description:
+      '<p>Filter results that contain <span class="suggestionItem__callout">agent.test1</span></p>',
+    start: 0,
+    end: 1,
+  },
+  {
+    type: QuerySuggestionTypes.Field,
+    text: 'agent.test2 ',
+    description:
+      '<p>Filter results that contain <span class="suggestionItem__callout">agent.test2</span></p>',
+    start: 0,
+    end: 1,
+  },
+  {
+    type: QuerySuggestionTypes.Field,
+    text: 'agent.test3 ',
+    description:
+      '<p>Filter results that contain <span class="suggestionItem__callout">agent.test3</span></p>',
+    start: 0,
+    end: 1,
+  },
+  {
+    type: QuerySuggestionTypes.Field,
+    text: 'agent.test4 ',
+    description:
+      '<p>Filter results that contain <span class="suggestionItem__callout">agent.test4</span></p>',
+    start: 0,
+    end: 1,
+  },
+];
+
+describe('Autocomplete', () => {
+  describe('rendering', () => {
+    test('it renders against snapshot', () => {
+      const placeholder = 'myPlaceholder';
+
+      const wrapper = shallow(
+        <AutocompleteField
+          isLoadingSuggestions={false}
+          isValid={false}
+          loadSuggestions={noop}
+          onChange={noop}
+          onSubmit={noop}
+          placeholder={placeholder}
+          suggestions={[]}
+          value={''}
+        />
+      );
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    test('it is rendering with placeholder', () => {
+      const placeholder = 'myPlaceholder';
+
+      const wrapper = mount(
+        <AutocompleteField
+          isLoadingSuggestions={false}
+          isValid={false}
+          loadSuggestions={noop}
+          onChange={noop}
+          onSubmit={noop}
+          placeholder={placeholder}
+          suggestions={[]}
+          value={''}
+        />
+      );
+      const input = wrapper.find('input[type="search"]');
+      expect(input.find('[placeholder]').props().placeholder).toEqual(placeholder);
+    });
+
+    test('Rendering suggested items', () => {
+      const wrapper = mount(
+        <ThemeProvider theme={() => ({ eui: euiDarkVars, darkMode: true })}>
+          <AutocompleteField
+            isLoadingSuggestions={false}
+            isValid={false}
+            loadSuggestions={noop}
+            onChange={noop}
+            onSubmit={noop}
+            placeholder=""
+            suggestions={mockAutoCompleteData}
+            value={''}
+          />
+        </ThemeProvider>
+      );
+      const wrapperAutocompleteField = wrapper.find(AutocompleteField);
+      wrapperAutocompleteField.setState({ areSuggestionsVisible: true });
+      wrapper.update();
+
+      expect(wrapper.find('.euiPanel div[data-test-subj="suggestion-item"]').length).toEqual(10);
+    });
+
+    test('Should Not render suggested items if loading new suggestions', () => {
+      const wrapper = mount(
+        <ThemeProvider theme={() => ({ eui: euiDarkVars, darkMode: true })}>
+          <AutocompleteField
+            isLoadingSuggestions={true}
+            isValid={false}
+            loadSuggestions={noop}
+            onChange={noop}
+            onSubmit={noop}
+            placeholder=""
+            suggestions={mockAutoCompleteData}
+            value={''}
+          />
+        </ThemeProvider>
+      );
+      const wrapperAutocompleteField = wrapper.find(AutocompleteField);
+      wrapperAutocompleteField.setState({ areSuggestionsVisible: true });
+      wrapper.update();
+
+      expect(wrapper.find('.euiPanel div[data-test-subj="suggestion-item"]').length).toEqual(0);
+    });
+  });
+
+  describe('events', () => {
+    test('OnChange should have been called', () => {
+      const onChange = jest.fn((value: string) => value);
+
+      const wrapper = mount(
+        <AutocompleteField
+          isLoadingSuggestions={false}
+          isValid={false}
+          loadSuggestions={noop}
+          onChange={onChange}
+          onSubmit={noop}
+          placeholder=""
+          suggestions={[]}
+          value={''}
+        />
+      );
+      const wrapperFixedEuiFieldSearch = wrapper.find('input');
+      wrapperFixedEuiFieldSearch.simulate('change', { target: { value: 'test' } });
+      expect(onChange).toHaveBeenCalled();
+    });
+  });
+
+  test('OnSubmit should have been called by keying enter on the search input', () => {
+    const onSubmit = jest.fn((value: string) => value);
+
+    const wrapper = mount(
+      <AutocompleteField
+        isLoadingSuggestions={false}
+        isValid={true}
+        loadSuggestions={noop}
+        onChange={noop}
+        onSubmit={onSubmit}
+        placeholder=""
+        suggestions={mockAutoCompleteData}
+        value={'filter: query'}
+      />
+    );
+    const wrapperAutocompleteField = wrapper.find(AutocompleteField);
+    wrapperAutocompleteField.setState({ selectedIndex: null });
+    const wrapperFixedEuiFieldSearch = wrapper.find('input');
+    wrapperFixedEuiFieldSearch.simulate('keydown', { key: 'Enter', preventDefault: noop });
+    expect(onSubmit).toHaveBeenCalled();
+  });
+
+  test('OnSubmit should have been called by onSearch event on the input', () => {
+    const onSubmit = jest.fn((value: string) => value);
+
+    const wrapper = mount(
+      <AutocompleteField
+        isLoadingSuggestions={false}
+        isValid={true}
+        loadSuggestions={noop}
+        onChange={noop}
+        onSubmit={onSubmit}
+        placeholder=""
+        suggestions={mockAutoCompleteData}
+        value={'filter: query'}
+      />
+    );
+    const wrapperAutocompleteField = wrapper.find(AutocompleteField);
+    wrapperAutocompleteField.setState({ selectedIndex: null });
+    const wrapperFixedEuiFieldSearch = wrapper.find(EuiFieldSearch);
+    // TODO: FixedEuiFieldSearch fails to import
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (wrapperFixedEuiFieldSearch as any).props().onSearch();
+    expect(onSubmit).toHaveBeenCalled();
+  });
+
+  test('OnChange should have been called if keying enter on a suggested item selected', () => {
+    const onChange = jest.fn((value: string) => value);
+
+    const wrapper = mount(
+      <AutocompleteField
+        isLoadingSuggestions={false}
+        isValid={false}
+        loadSuggestions={noop}
+        onChange={onChange}
+        onSubmit={noop}
+        placeholder=""
+        suggestions={mockAutoCompleteData}
+        value={''}
+      />
+    );
+    const wrapperAutocompleteField = wrapper.find(AutocompleteField);
+    wrapperAutocompleteField.setState({ selectedIndex: 1 });
+    const wrapperFixedEuiFieldSearch = wrapper.find('input');
+    wrapperFixedEuiFieldSearch.simulate('keydown', { key: 'Enter', preventDefault: noop });
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  test('OnChange should be called if tab is pressed when a suggested item is selected', () => {
+    const onChange = jest.fn((value: string) => value);
+
+    const wrapper = mount(
+      <AutocompleteField
+        isLoadingSuggestions={false}
+        isValid={false}
+        loadSuggestions={noop}
+        onChange={onChange}
+        onSubmit={noop}
+        placeholder=""
+        suggestions={mockAutoCompleteData}
+        value={''}
+      />
+    );
+    const wrapperAutocompleteField = wrapper.find(AutocompleteField);
+    wrapperAutocompleteField.setState({ selectedIndex: 1 });
+    const wrapperFixedEuiFieldSearch = wrapper.find('input');
+    wrapperFixedEuiFieldSearch.simulate('keydown', { key: 'Tab', preventDefault: noop });
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  test('OnChange should NOT be called if tab is pressed when more than one item is suggested, and no selection has been made', () => {
+    const onChange = jest.fn((value: string) => value);
+
+    const wrapper = mount(
+      <AutocompleteField
+        isLoadingSuggestions={false}
+        isValid={false}
+        loadSuggestions={noop}
+        onChange={onChange}
+        onSubmit={noop}
+        placeholder=""
+        suggestions={mockAutoCompleteData}
+        value={''}
+      />
+    );
+
+    const wrapperFixedEuiFieldSearch = wrapper.find('input');
+    wrapperFixedEuiFieldSearch.simulate('keydown', { key: 'Tab', preventDefault: noop });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  test('OnChange should be called if tab is pressed when only one item is suggested, even though that item is NOT selected', () => {
+    const onChange = jest.fn((value: string) => value);
+    const onlyOneSuggestion = [mockAutoCompleteData[0]];
+
+    const wrapper = mount(
+      <TestProviders>
+        <AutocompleteField
+          isLoadingSuggestions={false}
+          isValid={false}
+          loadSuggestions={noop}
+          onChange={onChange}
+          onSubmit={noop}
+          placeholder=""
+          suggestions={onlyOneSuggestion}
+          value={''}
+        />
+      </TestProviders>
+    );
+
+    const wrapperAutocompleteField = wrapper.find(AutocompleteField);
+    wrapperAutocompleteField.setState({ areSuggestionsVisible: true });
+    const wrapperFixedEuiFieldSearch = wrapper.find('input');
+    wrapperFixedEuiFieldSearch.simulate('keydown', { key: 'Tab', preventDefault: noop });
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  test('OnChange should NOT be called if tab is pressed when 0 items are suggested', () => {
+    const onChange = jest.fn((value: string) => value);
+
+    const wrapper = mount(
+      <AutocompleteField
+        isLoadingSuggestions={false}
+        isValid={false}
+        loadSuggestions={noop}
+        onChange={onChange}
+        onSubmit={noop}
+        placeholder=""
+        suggestions={[]}
+        value={''}
+      />
+    );
+
+    const wrapperFixedEuiFieldSearch = wrapper.find('input');
+    wrapperFixedEuiFieldSearch.simulate('keydown', { key: 'Tab', preventDefault: noop });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  test('Load more suggestions when arrowdown on the search bar', () => {
+    const loadSuggestions = jest.fn(noop);
+
+    const wrapper = mount(
+      <AutocompleteField
+        isLoadingSuggestions={false}
+        isValid={false}
+        loadSuggestions={loadSuggestions}
+        onChange={noop}
+        onSubmit={noop}
+        placeholder=""
+        suggestions={[]}
+        value={''}
+      />
+    );
+    const wrapperFixedEuiFieldSearch = wrapper.find('input');
+    wrapperFixedEuiFieldSearch.simulate('keydown', { key: 'ArrowDown', preventDefault: noop });
+    expect(loadSuggestions).toHaveBeenCalled();
+  });
+});
diff --git a/x-pack/plugins/siem/public/common/components/autocomplete_field/index.tsx b/x-pack/plugins/siem/public/common/components/autocomplete_field/index.tsx
new file mode 100644
index 00000000000000..0140a652ba1837
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/autocomplete_field/index.tsx
@@ -0,0 +1,333 @@
+/*
+ * 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 {
+  EuiFieldSearch,
+  EuiFieldSearchProps,
+  EuiOutsideClickDetector,
+  EuiPanel,
+} from '@elastic/eui';
+import React from 'react';
+import { QuerySuggestion } from '../../../../../../../src/plugins/data/public';
+
+import euiStyled from '../../../../../../legacy/common/eui_styled_components';
+
+import { SuggestionItem } from './suggestion_item';
+
+interface AutocompleteFieldProps {
+  'data-test-subj'?: string;
+  isLoadingSuggestions: boolean;
+  isValid: boolean;
+  loadSuggestions: (value: string, cursorPosition: number, maxCount?: number) => void;
+  onSubmit?: (value: string) => void;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  suggestions: QuerySuggestion[];
+  value: string;
+}
+
+interface AutocompleteFieldState {
+  areSuggestionsVisible: boolean;
+  isFocused: boolean;
+  selectedIndex: number | null;
+}
+
+export class AutocompleteField extends React.PureComponent<
+  AutocompleteFieldProps,
+  AutocompleteFieldState
+> {
+  public readonly state: AutocompleteFieldState = {
+    areSuggestionsVisible: false,
+    isFocused: false,
+    selectedIndex: null,
+  };
+
+  private inputElement: HTMLInputElement | null = null;
+
+  public render() {
+    const {
+      'data-test-subj': dataTestSubj,
+      suggestions,
+      isLoadingSuggestions,
+      isValid,
+      placeholder,
+      value,
+    } = this.props;
+    const { areSuggestionsVisible, selectedIndex } = this.state;
+    return (
+      <EuiOutsideClickDetector onOutsideClick={this.handleBlur}>
+        <AutocompleteContainer>
+          <FixedEuiFieldSearch
+            data-test-subj={dataTestSubj}
+            fullWidth
+            inputRef={this.handleChangeInputRef}
+            isLoading={isLoadingSuggestions}
+            isInvalid={!isValid}
+            onChange={this.handleChange}
+            onFocus={this.handleFocus}
+            onKeyDown={this.handleKeyDown}
+            onKeyUp={this.handleKeyUp}
+            onSearch={this.submit}
+            placeholder={placeholder}
+            value={value}
+          />
+          {areSuggestionsVisible && !isLoadingSuggestions && suggestions.length > 0 ? (
+            <SuggestionsPanel>
+              {suggestions.map((suggestion, suggestionIndex) => (
+                <SuggestionItem
+                  key={suggestion.text}
+                  suggestion={suggestion}
+                  isSelected={suggestionIndex === selectedIndex}
+                  onMouseEnter={this.selectSuggestionAt(suggestionIndex)}
+                  onClick={this.applySuggestionAt(suggestionIndex)}
+                />
+              ))}
+            </SuggestionsPanel>
+          ) : null}
+        </AutocompleteContainer>
+      </EuiOutsideClickDetector>
+    );
+  }
+
+  public componentDidUpdate(prevProps: AutocompleteFieldProps, prevState: AutocompleteFieldState) {
+    const hasNewValue = prevProps.value !== this.props.value;
+    const hasNewSuggestions = prevProps.suggestions !== this.props.suggestions;
+
+    if (hasNewValue) {
+      this.updateSuggestions();
+    }
+
+    if (hasNewSuggestions && this.state.isFocused) {
+      this.showSuggestions();
+    }
+  }
+
+  private handleChangeInputRef = (element: HTMLInputElement | null) => {
+    this.inputElement = element;
+  };
+
+  private handleChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
+    this.changeValue(evt.currentTarget.value);
+  };
+
+  private handleKeyDown = (evt: React.KeyboardEvent<HTMLInputElement>) => {
+    const { suggestions } = this.props;
+    switch (evt.key) {
+      case 'ArrowUp':
+        evt.preventDefault();
+        if (suggestions.length > 0) {
+          this.setState(
+            composeStateUpdaters(withSuggestionsVisible, withPreviousSuggestionSelected)
+          );
+        }
+        break;
+      case 'ArrowDown':
+        evt.preventDefault();
+        if (suggestions.length > 0) {
+          this.setState(composeStateUpdaters(withSuggestionsVisible, withNextSuggestionSelected));
+        } else {
+          this.updateSuggestions();
+        }
+        break;
+      case 'Enter':
+        evt.preventDefault();
+        if (this.state.selectedIndex !== null) {
+          this.applySelectedSuggestion();
+        } else {
+          this.submit();
+        }
+        break;
+      case 'Tab':
+        evt.preventDefault();
+        if (this.state.areSuggestionsVisible && this.props.suggestions.length === 1) {
+          this.applySuggestionAt(0)();
+        } else if (this.state.selectedIndex !== null) {
+          this.applySelectedSuggestion();
+        }
+        break;
+      case 'Escape':
+        evt.preventDefault();
+        evt.stopPropagation();
+        this.setState(withSuggestionsHidden);
+        break;
+    }
+  };
+
+  private handleKeyUp = (evt: React.KeyboardEvent<HTMLInputElement>) => {
+    switch (evt.key) {
+      case 'ArrowLeft':
+      case 'ArrowRight':
+      case 'Home':
+      case 'End':
+        this.updateSuggestions();
+        break;
+    }
+  };
+
+  private handleFocus = () => {
+    this.setState(composeStateUpdaters(withSuggestionsVisible, withFocused));
+  };
+
+  private handleBlur = () => {
+    this.setState(composeStateUpdaters(withSuggestionsHidden, withUnfocused));
+  };
+
+  private selectSuggestionAt = (index: number) => () => {
+    this.setState(withSuggestionAtIndexSelected(index));
+  };
+
+  private applySelectedSuggestion = () => {
+    if (this.state.selectedIndex !== null) {
+      this.applySuggestionAt(this.state.selectedIndex)();
+    }
+  };
+
+  private applySuggestionAt = (index: number) => () => {
+    const { value, suggestions } = this.props;
+    const selectedSuggestion = suggestions[index];
+
+    if (!selectedSuggestion) {
+      return;
+    }
+
+    const newValue =
+      value.substr(0, selectedSuggestion.start) +
+      selectedSuggestion.text +
+      value.substr(selectedSuggestion.end);
+
+    this.setState(withSuggestionsHidden);
+    this.changeValue(newValue);
+    this.focusInputElement();
+  };
+
+  private changeValue = (value: string) => {
+    const { onChange } = this.props;
+
+    if (onChange) {
+      onChange(value);
+    }
+  };
+
+  private focusInputElement = () => {
+    if (this.inputElement) {
+      this.inputElement.focus();
+    }
+  };
+
+  private showSuggestions = () => {
+    this.setState(withSuggestionsVisible);
+  };
+
+  private submit = () => {
+    const { isValid, onSubmit, value } = this.props;
+
+    if (isValid && onSubmit) {
+      onSubmit(value);
+    }
+
+    this.setState(withSuggestionsHidden);
+  };
+
+  private updateSuggestions = () => {
+    const inputCursorPosition = this.inputElement ? this.inputElement.selectionStart || 0 : 0;
+    this.props.loadSuggestions(this.props.value, inputCursorPosition, 10);
+  };
+}
+
+type StateUpdater<State, Props = {}> = (
+  prevState: Readonly<State>,
+  prevProps: Readonly<Props>
+) => State | null;
+
+function composeStateUpdaters<State, Props>(...updaters: Array<StateUpdater<State, Props>>) {
+  return (state: State, props: Props) =>
+    updaters.reduce((currentState, updater) => updater(currentState, props) || currentState, state);
+}
+
+const withPreviousSuggestionSelected = (
+  state: AutocompleteFieldState,
+  props: AutocompleteFieldProps
+): AutocompleteFieldState => ({
+  ...state,
+  selectedIndex:
+    props.suggestions.length === 0
+      ? null
+      : state.selectedIndex !== null
+      ? (state.selectedIndex + props.suggestions.length - 1) % props.suggestions.length
+      : Math.max(props.suggestions.length - 1, 0),
+});
+
+const withNextSuggestionSelected = (
+  state: AutocompleteFieldState,
+  props: AutocompleteFieldProps
+): AutocompleteFieldState => ({
+  ...state,
+  selectedIndex:
+    props.suggestions.length === 0
+      ? null
+      : state.selectedIndex !== null
+      ? (state.selectedIndex + 1) % props.suggestions.length
+      : 0,
+});
+
+const withSuggestionAtIndexSelected = (suggestionIndex: number) => (
+  state: AutocompleteFieldState,
+  props: AutocompleteFieldProps
+): AutocompleteFieldState => ({
+  ...state,
+  selectedIndex:
+    props.suggestions.length === 0
+      ? null
+      : suggestionIndex >= 0 && suggestionIndex < props.suggestions.length
+      ? suggestionIndex
+      : 0,
+});
+
+const withSuggestionsVisible = (state: AutocompleteFieldState) => ({
+  ...state,
+  areSuggestionsVisible: true,
+});
+
+const withSuggestionsHidden = (state: AutocompleteFieldState) => ({
+  ...state,
+  areSuggestionsVisible: false,
+  selectedIndex: null,
+});
+
+const withFocused = (state: AutocompleteFieldState) => ({
+  ...state,
+  isFocused: true,
+});
+
+const withUnfocused = (state: AutocompleteFieldState) => ({
+  ...state,
+  isFocused: false,
+});
+
+export const FixedEuiFieldSearch: React.FC<React.InputHTMLAttributes<HTMLInputElement> &
+  EuiFieldSearchProps & {
+    inputRef?: (element: HTMLInputElement | null) => void;
+    onSearch: (value: string) => void;
+  }> = EuiFieldSearch as any; // eslint-disable-line @typescript-eslint/no-explicit-any
+
+const AutocompleteContainer = euiStyled.div`
+  position: relative;
+`;
+
+AutocompleteContainer.displayName = 'AutocompleteContainer';
+
+const SuggestionsPanel = euiStyled(EuiPanel).attrs(() => ({
+  paddingSize: 'none',
+  hasShadow: true,
+}))`
+  position: absolute;
+  width: 100%;
+  margin-top: 2px;
+  overflow: hidden;
+  z-index: ${props => props.theme.eui.euiZLevel1};
+`;
+
+SuggestionsPanel.displayName = 'SuggestionsPanel';
diff --git a/x-pack/plugins/siem/public/components/autocomplete_field/suggestion_item.tsx b/x-pack/plugins/siem/public/common/components/autocomplete_field/suggestion_item.tsx
similarity index 96%
rename from x-pack/plugins/siem/public/components/autocomplete_field/suggestion_item.tsx
rename to x-pack/plugins/siem/public/common/components/autocomplete_field/suggestion_item.tsx
index be9a9817265b0a..b305663dd48be9 100644
--- a/x-pack/plugins/siem/public/components/autocomplete_field/suggestion_item.tsx
+++ b/x-pack/plugins/siem/public/common/components/autocomplete_field/suggestion_item.tsx
@@ -8,8 +8,8 @@ import { EuiIcon } from '@elastic/eui';
 import { transparentize } from 'polished';
 import React from 'react';
 import styled from 'styled-components';
-import euiStyled from '../../../../../legacy/common/eui_styled_components';
-import { QuerySuggestion } from '../../../../../../src/plugins/data/public';
+import euiStyled from '../../../../../../legacy/common/eui_styled_components';
+import { QuerySuggestion } from '../../../../../../../src/plugins/data/public';
 
 interface SuggestionItemProps {
   isSelected?: boolean;
diff --git a/x-pack/plugins/siem/public/components/charts/__snapshots__/areachart.test.tsx.snap b/x-pack/plugins/siem/public/common/components/charts/__snapshots__/areachart.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/charts/__snapshots__/areachart.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/charts/__snapshots__/areachart.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/charts/__snapshots__/barchart.test.tsx.snap b/x-pack/plugins/siem/public/common/components/charts/__snapshots__/barchart.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/charts/__snapshots__/barchart.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/charts/__snapshots__/barchart.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/charts/areachart.test.tsx b/x-pack/plugins/siem/public/common/components/charts/areachart.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/charts/areachart.test.tsx
rename to x-pack/plugins/siem/public/common/components/charts/areachart.test.tsx
diff --git a/x-pack/plugins/siem/public/components/charts/areachart.tsx b/x-pack/plugins/siem/public/common/components/charts/areachart.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/charts/areachart.tsx
rename to x-pack/plugins/siem/public/common/components/charts/areachart.tsx
diff --git a/x-pack/plugins/siem/public/components/charts/barchart.test.tsx b/x-pack/plugins/siem/public/common/components/charts/barchart.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/charts/barchart.test.tsx
rename to x-pack/plugins/siem/public/common/components/charts/barchart.test.tsx
diff --git a/x-pack/plugins/siem/public/components/charts/barchart.tsx b/x-pack/plugins/siem/public/common/components/charts/barchart.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/charts/barchart.tsx
rename to x-pack/plugins/siem/public/common/components/charts/barchart.tsx
diff --git a/x-pack/plugins/siem/public/components/charts/chart_place_holder.test.tsx b/x-pack/plugins/siem/public/common/components/charts/chart_place_holder.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/charts/chart_place_holder.test.tsx
rename to x-pack/plugins/siem/public/common/components/charts/chart_place_holder.test.tsx
diff --git a/x-pack/plugins/siem/public/components/charts/chart_place_holder.tsx b/x-pack/plugins/siem/public/common/components/charts/chart_place_holder.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/charts/chart_place_holder.tsx
rename to x-pack/plugins/siem/public/common/components/charts/chart_place_holder.tsx
diff --git a/x-pack/plugins/siem/public/components/charts/common.test.tsx b/x-pack/plugins/siem/public/common/components/charts/common.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/charts/common.test.tsx
rename to x-pack/plugins/siem/public/common/components/charts/common.test.tsx
diff --git a/x-pack/plugins/siem/public/components/charts/common.tsx b/x-pack/plugins/siem/public/common/components/charts/common.tsx
similarity index 98%
rename from x-pack/plugins/siem/public/components/charts/common.tsx
rename to x-pack/plugins/siem/public/common/components/charts/common.tsx
index 7e4b3079160421..1078040e9efd02 100644
--- a/x-pack/plugins/siem/public/components/charts/common.tsx
+++ b/x-pack/plugins/siem/public/common/components/charts/common.tsx
@@ -20,7 +20,7 @@ import {
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
 
-import { DEFAULT_DARK_MODE } from '../../../common/constants';
+import { DEFAULT_DARK_MODE } from '../../../../common/constants';
 import { useUiSetting } from '../../lib/kibana';
 
 export const defaultChartHeight = '100%';
diff --git a/x-pack/plugins/siem/public/components/charts/draggable_legend.test.tsx b/x-pack/plugins/siem/public/common/components/charts/draggable_legend.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/charts/draggable_legend.test.tsx
rename to x-pack/plugins/siem/public/common/components/charts/draggable_legend.test.tsx
diff --git a/x-pack/plugins/siem/public/components/charts/draggable_legend.tsx b/x-pack/plugins/siem/public/common/components/charts/draggable_legend.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/charts/draggable_legend.tsx
rename to x-pack/plugins/siem/public/common/components/charts/draggable_legend.tsx
diff --git a/x-pack/plugins/siem/public/components/charts/draggable_legend_item.test.tsx b/x-pack/plugins/siem/public/common/components/charts/draggable_legend_item.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/charts/draggable_legend_item.test.tsx
rename to x-pack/plugins/siem/public/common/components/charts/draggable_legend_item.test.tsx
diff --git a/x-pack/plugins/siem/public/components/charts/draggable_legend_item.tsx b/x-pack/plugins/siem/public/common/components/charts/draggable_legend_item.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/charts/draggable_legend_item.tsx
rename to x-pack/plugins/siem/public/common/components/charts/draggable_legend_item.tsx
diff --git a/x-pack/plugins/siem/public/components/charts/translation.ts b/x-pack/plugins/siem/public/common/components/charts/translation.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/charts/translation.ts
rename to x-pack/plugins/siem/public/common/components/charts/translation.ts
diff --git a/x-pack/plugins/siem/public/components/drag_and_drop/__snapshots__/drag_drop_context_wrapper.test.tsx.snap b/x-pack/plugins/siem/public/common/components/drag_and_drop/__snapshots__/drag_drop_context_wrapper.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/drag_and_drop/__snapshots__/drag_drop_context_wrapper.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/drag_and_drop/__snapshots__/drag_drop_context_wrapper.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/drag_and_drop/__snapshots__/draggable_wrapper.test.tsx.snap b/x-pack/plugins/siem/public/common/components/drag_and_drop/__snapshots__/draggable_wrapper.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/drag_and_drop/__snapshots__/draggable_wrapper.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/drag_and_drop/__snapshots__/draggable_wrapper.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/drag_and_drop/__snapshots__/droppable_wrapper.test.tsx.snap b/x-pack/plugins/siem/public/common/components/drag_and_drop/__snapshots__/droppable_wrapper.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/drag_and_drop/__snapshots__/droppable_wrapper.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/drag_and_drop/__snapshots__/droppable_wrapper.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/drag_and_drop/drag_drop_context.tsx b/x-pack/plugins/siem/public/common/components/drag_and_drop/drag_drop_context.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/drag_and_drop/drag_drop_context.tsx
rename to x-pack/plugins/siem/public/common/components/drag_and_drop/drag_drop_context.tsx
diff --git a/x-pack/plugins/siem/public/components/drag_and_drop/drag_drop_context_wrapper.test.tsx b/x-pack/plugins/siem/public/common/components/drag_and_drop/drag_drop_context_wrapper.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/drag_and_drop/drag_drop_context_wrapper.test.tsx
rename to x-pack/plugins/siem/public/common/components/drag_and_drop/drag_drop_context_wrapper.test.tsx
diff --git a/x-pack/plugins/siem/public/components/drag_and_drop/drag_drop_context_wrapper.tsx b/x-pack/plugins/siem/public/common/components/drag_and_drop/drag_drop_context_wrapper.tsx
similarity index 94%
rename from x-pack/plugins/siem/public/components/drag_and_drop/drag_drop_context_wrapper.tsx
rename to x-pack/plugins/siem/public/common/components/drag_and_drop/drag_drop_context_wrapper.tsx
index 8e6743ad8f92e6..3bd2a3da1c88b3 100644
--- a/x-pack/plugins/siem/public/components/drag_and_drop/drag_drop_context_wrapper.tsx
+++ b/x-pack/plugins/siem/public/common/components/drag_and_drop/drag_drop_context_wrapper.tsx
@@ -12,11 +12,12 @@ import { Dispatch } from 'redux';
 
 import { BeforeCapture } from './drag_drop_context';
 import { BrowserFields } from '../../containers/source';
-import { dragAndDropModel, dragAndDropSelectors, timelineSelectors } from '../../store';
+import { dragAndDropModel, dragAndDropSelectors } from '../../store';
+import { timelineSelectors } from '../../../timelines/store/timeline';
 import { IdToDataProvider } from '../../store/drag_and_drop/model';
 import { State } from '../../store/reducer';
-import { DataProvider } from '../timeline/data_providers/data_provider';
-import { reArrangeProviders } from '../timeline/data_providers/helpers';
+import { DataProvider } from '../../../timelines/components/timeline/data_providers/data_provider';
+import { reArrangeProviders } from '../../../timelines/components/timeline/data_providers/helpers';
 import { ACTIVE_TIMELINE_REDUX_ID } from '../top_n';
 import { ADDED_TO_TIMELINE_MESSAGE } from '../../hooks/translations';
 import { useAddToTimelineSensor } from '../../hooks/use_add_to_timeline';
diff --git a/x-pack/plugins/siem/public/components/drag_and_drop/draggable_wrapper.test.tsx b/x-pack/plugins/siem/public/common/components/drag_and_drop/draggable_wrapper.test.tsx
similarity index 98%
rename from x-pack/plugins/siem/public/components/drag_and_drop/draggable_wrapper.test.tsx
rename to x-pack/plugins/siem/public/common/components/drag_and_drop/draggable_wrapper.test.tsx
index cd9e1dc95ff01a..d1b3b671307d1c 100644
--- a/x-pack/plugins/siem/public/components/drag_and_drop/draggable_wrapper.test.tsx
+++ b/x-pack/plugins/siem/public/common/components/drag_and_drop/draggable_wrapper.test.tsx
@@ -11,7 +11,7 @@ import { DraggableStateSnapshot, DraggingStyle } from 'react-beautiful-dnd';
 
 import { mockBrowserFields, mocksSource } from '../../containers/source/mock';
 import { TestProviders } from '../../mock';
-import { mockDataProviders } from '../timeline/data_providers/mock/mock_data_providers';
+import { mockDataProviders } from '../../../timelines/components/timeline/data_providers/mock/mock_data_providers';
 import { DragDropContextWrapper } from './drag_drop_context_wrapper';
 import { ConditionalPortal, DraggableWrapper, getStyle } from './draggable_wrapper';
 import { useMountAppended } from '../../utils/use_mount_appended';
diff --git a/x-pack/plugins/siem/public/components/drag_and_drop/draggable_wrapper.tsx b/x-pack/plugins/siem/public/common/components/drag_and_drop/draggable_wrapper.tsx
similarity index 98%
rename from x-pack/plugins/siem/public/components/drag_and_drop/draggable_wrapper.tsx
rename to x-pack/plugins/siem/public/common/components/drag_and_drop/draggable_wrapper.tsx
index 5676c8fe5c30bd..f90a5c1410c344 100644
--- a/x-pack/plugins/siem/public/components/drag_and_drop/draggable_wrapper.tsx
+++ b/x-pack/plugins/siem/public/common/components/drag_and_drop/draggable_wrapper.tsx
@@ -18,7 +18,7 @@ import styled from 'styled-components';
 import deepEqual from 'fast-deep-equal';
 
 import { dragAndDropActions } from '../../store/drag_and_drop';
-import { DataProvider } from '../timeline/data_providers/data_provider';
+import { DataProvider } from '../../../timelines/components/timeline/data_providers/data_provider';
 import { TruncatableText } from '../truncatable_text';
 import { WithHoverActions } from '../with_hover_actions';
 
diff --git a/x-pack/plugins/siem/public/components/drag_and_drop/draggable_wrapper_hover_content.test.tsx b/x-pack/plugins/siem/public/common/components/drag_and_drop/draggable_wrapper_hover_content.test.tsx
similarity index 99%
rename from x-pack/plugins/siem/public/components/drag_and_drop/draggable_wrapper_hover_content.test.tsx
rename to x-pack/plugins/siem/public/common/components/drag_and_drop/draggable_wrapper_hover_content.test.tsx
index 1d9508fc28f3d9..a5fcdd9a943d89 100644
--- a/x-pack/plugins/siem/public/components/drag_and_drop/draggable_wrapper_hover_content.test.tsx
+++ b/x-pack/plugins/siem/public/common/components/drag_and_drop/draggable_wrapper_hover_content.test.tsx
@@ -13,8 +13,8 @@ import { wait } from '../../lib/helpers';
 import { useKibana } from '../../lib/kibana';
 import { TestProviders } from '../../mock';
 import { createKibanaCoreStartMock } from '../../mock/kibana_core';
-import { FilterManager } from '../../../../../../src/plugins/data/public';
-import { TimelineContext } from '../timeline/timeline_context';
+import { FilterManager } from '../../../../../../../src/plugins/data/public';
+import { TimelineContext } from '../../../timelines/components/timeline/timeline_context';
 
 import { DraggableWrapperHoverContent } from './draggable_wrapper_hover_content';
 
diff --git a/x-pack/plugins/siem/public/components/drag_and_drop/draggable_wrapper_hover_content.tsx b/x-pack/plugins/siem/public/common/components/drag_and_drop/draggable_wrapper_hover_content.tsx
similarity index 96%
rename from x-pack/plugins/siem/public/components/drag_and_drop/draggable_wrapper_hover_content.tsx
rename to x-pack/plugins/siem/public/common/components/drag_and_drop/draggable_wrapper_hover_content.tsx
index 6976714cbe324e..a0546dc64113cd 100644
--- a/x-pack/plugins/siem/public/components/drag_and_drop/draggable_wrapper_hover_content.tsx
+++ b/x-pack/plugins/siem/public/common/components/drag_and_drop/draggable_wrapper_hover_content.tsx
@@ -12,8 +12,8 @@ import { getAllFieldsByName, WithSource } from '../../containers/source';
 import { useAddToTimeline } from '../../hooks/use_add_to_timeline';
 import { WithCopyToClipboard } from '../../lib/clipboard/with_copy_to_clipboard';
 import { useKibana } from '../../lib/kibana';
-import { createFilter } from '../page/add_filter_to_global_search_bar';
-import { useTimelineContext } from '../timeline/timeline_context';
+import { createFilter } from '../add_filter_to_global_search_bar';
+import { useTimelineContext } from '../../../timelines/components/timeline/timeline_context';
 import { StatefulTopN } from '../top_n';
 
 import { allowTopN } from './helpers';
diff --git a/x-pack/plugins/siem/public/components/drag_and_drop/droppable_wrapper.test.tsx b/x-pack/plugins/siem/public/common/components/drag_and_drop/droppable_wrapper.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/drag_and_drop/droppable_wrapper.test.tsx
rename to x-pack/plugins/siem/public/common/components/drag_and_drop/droppable_wrapper.test.tsx
diff --git a/x-pack/plugins/siem/public/components/drag_and_drop/droppable_wrapper.tsx b/x-pack/plugins/siem/public/common/components/drag_and_drop/droppable_wrapper.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/drag_and_drop/droppable_wrapper.tsx
rename to x-pack/plugins/siem/public/common/components/drag_and_drop/droppable_wrapper.tsx
diff --git a/x-pack/plugins/siem/public/components/drag_and_drop/helpers.test.ts b/x-pack/plugins/siem/public/common/components/drag_and_drop/helpers.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/drag_and_drop/helpers.test.ts
rename to x-pack/plugins/siem/public/common/components/drag_and_drop/helpers.test.ts
diff --git a/x-pack/plugins/siem/public/common/components/drag_and_drop/helpers.ts b/x-pack/plugins/siem/public/common/components/drag_and_drop/helpers.ts
new file mode 100644
index 00000000000000..ad370f647738f3
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/drag_and_drop/helpers.ts
@@ -0,0 +1,334 @@
+/*
+ * 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 { isString } from 'lodash/fp';
+import { DropResult } from 'react-beautiful-dnd';
+import { Dispatch } from 'redux';
+import { ActionCreator } from 'typescript-fsa';
+
+import { BrowserField, BrowserFields, getAllFieldsByName } from '../../containers/source';
+import { dragAndDropActions } from '../../store/actions';
+import { IdToDataProvider } from '../../store/drag_and_drop/model';
+import { ColumnHeaderOptions } from '../../../timelines/store/timeline/model';
+import { timelineActions } from '../../../timelines/store/timeline';
+import { DEFAULT_COLUMN_MIN_WIDTH } from '../../../timelines/components/timeline/body/constants';
+import { addContentToTimeline } from '../../../timelines/components/timeline/data_providers/helpers';
+import { DataProvider } from '../../../timelines/components/timeline/data_providers/data_provider';
+
+export const draggableIdPrefix = 'draggableId';
+
+export const droppableIdPrefix = 'droppableId';
+
+export const draggableContentPrefix = `${draggableIdPrefix}.content.`;
+
+export const draggableTimelineProvidersPrefix = `${draggableIdPrefix}.timelineProviders.`;
+
+export const draggableFieldPrefix = `${draggableIdPrefix}.field.`;
+
+export const droppableContentPrefix = `${droppableIdPrefix}.content.`;
+
+export const droppableFieldPrefix = `${droppableIdPrefix}.field.`;
+
+export const droppableTimelineProvidersPrefix = `${droppableIdPrefix}.timelineProviders.`;
+
+export const droppableTimelineColumnsPrefix = `${droppableIdPrefix}.timelineColumns.`;
+
+export const droppableTimelineFlyoutButtonPrefix = `${droppableIdPrefix}.flyoutButton.`;
+
+export const getDraggableId = (dataProviderId: string): string =>
+  `${draggableContentPrefix}${dataProviderId}`;
+
+export const getDraggableFieldId = ({
+  contextId,
+  fieldId,
+}: {
+  contextId: string;
+  fieldId: string;
+}): string => `${draggableFieldPrefix}${escapeContextId(contextId)}.${escapeFieldId(fieldId)}`;
+
+export const getTimelineProviderDroppableId = ({
+  groupIndex,
+  timelineId,
+}: {
+  groupIndex: number;
+  timelineId: string;
+}): string => `${droppableTimelineProvidersPrefix}${timelineId}.group.${groupIndex}`;
+
+export const getTimelineProviderDraggableId = ({
+  dataProviderId,
+  groupIndex,
+  timelineId,
+}: {
+  dataProviderId: string;
+  groupIndex: number;
+  timelineId: string;
+}): string =>
+  `${draggableTimelineProvidersPrefix}${timelineId}.group.${groupIndex}.${dataProviderId}`;
+
+export const getDroppableId = (visualizationPlaceholderId: string): string =>
+  `${droppableContentPrefix}${visualizationPlaceholderId}`;
+
+export const sourceIsContent = (result: DropResult): boolean =>
+  result.source.droppableId.startsWith(droppableContentPrefix);
+
+export const sourceAndDestinationAreSameTimelineProviders = (result: DropResult): boolean => {
+  const regex = /^droppableId\.timelineProviders\.(\S+)\./;
+  const sourceMatches = result.source.droppableId.match(regex) ?? [];
+  const destinationMatches = result.destination?.droppableId.match(regex) ?? [];
+
+  return (
+    sourceMatches.length >= 2 &&
+    destinationMatches.length >= 2 &&
+    sourceMatches[1] === destinationMatches[1]
+  );
+};
+
+export const draggableIsContent = (result: DropResult | { draggableId: string }): boolean =>
+  result.draggableId.startsWith(draggableContentPrefix);
+
+export const draggableIsField = (result: DropResult | { draggableId: string }): boolean =>
+  result.draggableId.startsWith(draggableFieldPrefix);
+
+export const reasonIsDrop = (result: DropResult): boolean => result.reason === 'DROP';
+
+export const destinationIsTimelineProviders = (result: DropResult): boolean =>
+  result.destination != null &&
+  result.destination.droppableId.startsWith(droppableTimelineProvidersPrefix);
+
+export const destinationIsTimelineColumns = (result: DropResult): boolean =>
+  result.destination != null &&
+  result.destination.droppableId.startsWith(droppableTimelineColumnsPrefix);
+
+export const destinationIsTimelineButton = (result: DropResult): boolean =>
+  result.destination != null &&
+  result.destination.droppableId.startsWith(droppableTimelineFlyoutButtonPrefix);
+
+export const getProviderIdFromDraggable = (result: DropResult): string =>
+  result.draggableId.substring(result.draggableId.lastIndexOf('.') + 1);
+
+export const getFieldIdFromDraggable = (result: DropResult): string =>
+  unEscapeFieldId(result.draggableId.substring(result.draggableId.lastIndexOf('.') + 1));
+
+export const escapeDataProviderId = (path: string) => path.replace(/\./g, '_');
+
+export const escapeContextId = (path: string) => path.replace(/\./g, '_');
+
+export const escapeFieldId = (path: string) => path.replace(/\./g, '!!!DOT!!!');
+
+export const unEscapeFieldId = (path: string) => path.replace(/!!!DOT!!!/g, '.');
+
+export const providerWasDroppedOnTimeline = (result: DropResult): boolean =>
+  reasonIsDrop(result) &&
+  draggableIsContent(result) &&
+  sourceIsContent(result) &&
+  destinationIsTimelineProviders(result);
+
+export const userIsReArrangingProviders = (result: DropResult): boolean =>
+  reasonIsDrop(result) && sourceAndDestinationAreSameTimelineProviders(result);
+
+export const fieldWasDroppedOnTimelineColumns = (result: DropResult): boolean =>
+  reasonIsDrop(result) && draggableIsField(result) && destinationIsTimelineColumns(result);
+
+interface AddProviderToTimelineParams {
+  activeTimelineDataProviders: DataProvider[];
+  dataProviders: IdToDataProvider;
+  dispatch: Dispatch;
+  noProviderFound?: ActionCreator<{
+    id: string;
+  }>;
+  onAddedToTimeline: (fieldOrValue: string) => void;
+  result: DropResult;
+  timelineId: string;
+}
+
+interface AddFieldToTimelineColumnsParams {
+  upsertColumn?: ActionCreator<{
+    column: ColumnHeaderOptions;
+    id: string;
+    index: number;
+  }>;
+  browserFields: BrowserFields;
+  dispatch: Dispatch;
+  result: DropResult;
+  timelineId: string;
+}
+
+export const addProviderToTimeline = ({
+  activeTimelineDataProviders,
+  dataProviders,
+  dispatch,
+  result,
+  timelineId,
+  noProviderFound = dragAndDropActions.noProviderFound,
+  onAddedToTimeline,
+}: AddProviderToTimelineParams): void => {
+  const providerId = getProviderIdFromDraggable(result);
+  const providerToAdd = dataProviders[providerId];
+
+  if (providerToAdd) {
+    addContentToTimeline({
+      dataProviders: activeTimelineDataProviders,
+      destination: result.destination,
+      dispatch,
+      onAddedToTimeline,
+      providerToAdd,
+      timelineId,
+    });
+  } else {
+    dispatch(noProviderFound({ id: providerId }));
+  }
+};
+
+export const addFieldToTimelineColumns = ({
+  upsertColumn = timelineActions.upsertColumn,
+  browserFields,
+  dispatch,
+  result,
+  timelineId,
+}: AddFieldToTimelineColumnsParams): void => {
+  const fieldId = getFieldIdFromDraggable(result);
+  const allColumns = getAllFieldsByName(browserFields);
+  const column = allColumns[fieldId];
+
+  if (column != null) {
+    dispatch(
+      upsertColumn({
+        column: {
+          category: column.category,
+          columnHeaderType: 'not-filtered',
+          description: isString(column.description) ? column.description : undefined,
+          example: isString(column.example) ? column.example : undefined,
+          id: fieldId,
+          type: column.type,
+          aggregatable: column.aggregatable,
+          width: DEFAULT_COLUMN_MIN_WIDTH,
+        },
+        id: timelineId,
+        index: result.destination != null ? result.destination.index : 0,
+      })
+    );
+  } else {
+    // create a column definition, because it doesn't exist in the browserFields:
+    dispatch(
+      upsertColumn({
+        column: {
+          columnHeaderType: 'not-filtered',
+          id: fieldId,
+          width: DEFAULT_COLUMN_MIN_WIDTH,
+        },
+        id: timelineId,
+        index: result.destination != null ? result.destination.index : 0,
+      })
+    );
+  }
+};
+
+/**
+ * Prevents fields from being dragged or dropped to any area other than column
+ * header drop zone in the timeline
+ */
+export const DRAG_TYPE_FIELD = 'drag-type-field';
+
+/** This class is added to the document body while dragging */
+export const IS_DRAGGING_CLASS_NAME = 'is-dragging';
+
+/** This class is added to the document body while timeline field dragging */
+export const IS_TIMELINE_FIELD_DRAGGING_CLASS_NAME = 'is-timeline-field-dragging';
+
+export const allowTopN = ({
+  browserField,
+  fieldName,
+}: {
+  browserField: Partial<BrowserField> | undefined;
+  fieldName: string;
+}): boolean => {
+  const isAggregatable = browserField?.aggregatable ?? false;
+  const fieldType = browserField?.type ?? '';
+  const isAllowedType = [
+    'boolean',
+    'geo-point',
+    'geo-shape',
+    'ip',
+    'keyword',
+    'number',
+    'numeric',
+    'string',
+  ].includes(fieldType);
+
+  // TODO: remove this explicit whitelist when the ECS documentation includes signals
+  const isWhitelistedNonBrowserField = [
+    'signal.ancestors.depth',
+    'signal.ancestors.id',
+    'signal.ancestors.rule',
+    'signal.ancestors.type',
+    'signal.original_event.action',
+    'signal.original_event.category',
+    'signal.original_event.code',
+    'signal.original_event.created',
+    'signal.original_event.dataset',
+    'signal.original_event.duration',
+    'signal.original_event.end',
+    'signal.original_event.hash',
+    'signal.original_event.id',
+    'signal.original_event.kind',
+    'signal.original_event.module',
+    'signal.original_event.original',
+    'signal.original_event.outcome',
+    'signal.original_event.provider',
+    'signal.original_event.risk_score',
+    'signal.original_event.risk_score_norm',
+    'signal.original_event.sequence',
+    'signal.original_event.severity',
+    'signal.original_event.start',
+    'signal.original_event.timezone',
+    'signal.original_event.type',
+    'signal.original_time',
+    'signal.parent.depth',
+    'signal.parent.id',
+    'signal.parent.index',
+    'signal.parent.rule',
+    'signal.parent.type',
+    'signal.rule.created_by',
+    'signal.rule.description',
+    'signal.rule.enabled',
+    'signal.rule.false_positives',
+    'signal.rule.filters',
+    'signal.rule.from',
+    'signal.rule.id',
+    'signal.rule.immutable',
+    'signal.rule.index',
+    'signal.rule.interval',
+    'signal.rule.language',
+    'signal.rule.max_signals',
+    'signal.rule.name',
+    'signal.rule.note',
+    'signal.rule.output_index',
+    'signal.rule.query',
+    'signal.rule.references',
+    'signal.rule.risk_score',
+    'signal.rule.rule_id',
+    'signal.rule.saved_id',
+    'signal.rule.severity',
+    'signal.rule.size',
+    'signal.rule.tags',
+    'signal.rule.threat',
+    'signal.rule.threat.tactic.id',
+    'signal.rule.threat.tactic.name',
+    'signal.rule.threat.tactic.reference',
+    'signal.rule.threat.technique.id',
+    'signal.rule.threat.technique.name',
+    'signal.rule.threat.technique.reference',
+    'signal.rule.timeline_id',
+    'signal.rule.timeline_title',
+    'signal.rule.to',
+    'signal.rule.type',
+    'signal.rule.updated_by',
+    'signal.rule.version',
+    'signal.status',
+  ].includes(fieldName);
+
+  return isWhitelistedNonBrowserField || (isAggregatable && isAllowedType);
+};
diff --git a/x-pack/plugins/siem/public/components/drag_and_drop/provider_container.tsx b/x-pack/plugins/siem/public/common/components/drag_and_drop/provider_container.tsx
similarity index 97%
rename from x-pack/plugins/siem/public/components/drag_and_drop/provider_container.tsx
rename to x-pack/plugins/siem/public/common/components/drag_and_drop/provider_container.tsx
index c1f029086aa350..06cb8ee2e1a467 100644
--- a/x-pack/plugins/siem/public/components/drag_and_drop/provider_container.tsx
+++ b/x-pack/plugins/siem/public/common/components/drag_and_drop/provider_container.tsx
@@ -6,7 +6,7 @@
 
 import React from 'react';
 import styled, { css } from 'styled-components';
-import { STATEFUL_EVENT_CSS_CLASS_NAME } from '../timeline/helpers';
+import { STATEFUL_EVENT_CSS_CLASS_NAME } from '../../../timelines/components/timeline/helpers';
 
 interface ProviderContainerProps {
   isDragging: boolean;
diff --git a/x-pack/plugins/siem/public/components/drag_and_drop/translations.ts b/x-pack/plugins/siem/public/common/components/drag_and_drop/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/drag_and_drop/translations.ts
rename to x-pack/plugins/siem/public/common/components/drag_and_drop/translations.ts
diff --git a/x-pack/plugins/siem/public/components/draggables/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/common/components/draggables/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/draggables/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/draggables/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/draggables/field_badge/index.tsx b/x-pack/plugins/siem/public/common/components/draggables/field_badge/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/draggables/field_badge/index.tsx
rename to x-pack/plugins/siem/public/common/components/draggables/field_badge/index.tsx
diff --git a/x-pack/plugins/siem/public/components/draggables/field_badge/translations.ts b/x-pack/plugins/siem/public/common/components/draggables/field_badge/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/draggables/field_badge/translations.ts
rename to x-pack/plugins/siem/public/common/components/draggables/field_badge/translations.ts
diff --git a/x-pack/plugins/siem/public/components/draggables/index.test.tsx b/x-pack/plugins/siem/public/common/components/draggables/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/draggables/index.test.tsx
rename to x-pack/plugins/siem/public/common/components/draggables/index.test.tsx
diff --git a/x-pack/plugins/siem/public/common/components/draggables/index.tsx b/x-pack/plugins/siem/public/common/components/draggables/index.tsx
new file mode 100644
index 00000000000000..fcf007a4cf1bab
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/draggables/index.tsx
@@ -0,0 +1,176 @@
+/*
+ * 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 { EuiBadge, EuiToolTip, IconType } from '@elastic/eui';
+import React from 'react';
+import styled from 'styled-components';
+
+import { DragEffects, DraggableWrapper } from '../drag_and_drop/draggable_wrapper';
+import { escapeDataProviderId } from '../drag_and_drop/helpers';
+import { getEmptyStringTag } from '../empty_value';
+import { IS_OPERATOR } from '../../../timelines/components/timeline/data_providers/data_provider';
+import { Provider } from '../../../timelines/components/timeline/data_providers/provider';
+
+export interface DefaultDraggableType {
+  id: string;
+  field: string;
+  value?: string | null;
+  name?: string | null;
+  queryValue?: string | null;
+  children?: React.ReactNode;
+  tooltipContent?: React.ReactNode;
+}
+
+/**
+ * Only returns true if the specified tooltipContent is exactly `null`.
+ * Example input / output:
+ * `bob -> false`
+ * `undefined -> false`
+ * `<span>thing</span> -> false`
+ * `null -> true`
+ */
+export const tooltipContentIsExplicitlyNull = (tooltipContent?: React.ReactNode): boolean =>
+  tooltipContent === null; // an explicit / exact null check
+
+/**
+ * Derives the tooltip content from the field name if no tooltip was specified
+ */
+export const getDefaultWhenTooltipIsUnspecified = ({
+  field,
+  tooltipContent,
+}: {
+  field: string;
+  tooltipContent?: React.ReactNode;
+}): React.ReactNode => (tooltipContent != null ? tooltipContent : field);
+
+/**
+ * Renders the content of the draggable, wrapped in a tooltip
+ */
+const Content = React.memo<{
+  children?: React.ReactNode;
+  field: string;
+  tooltipContent?: React.ReactNode;
+  value?: string | null;
+}>(({ children, field, tooltipContent, value }) =>
+  !tooltipContentIsExplicitlyNull(tooltipContent) ? (
+    <EuiToolTip
+      data-test-subj={`${field}-tooltip`}
+      content={getDefaultWhenTooltipIsUnspecified({ tooltipContent, field })}
+    >
+      <>{children ? children : value}</>
+    </EuiToolTip>
+  ) : (
+    <>{children ? children : value}</>
+  )
+);
+
+Content.displayName = 'Content';
+
+/**
+ * Draggable text (or an arbitrary visualization specified by `children`)
+ * that's only displayed when the specified value is non-`null`.
+ *
+ * @param id - a unique draggable id, which typically follows the format `${contextId}-${eventId}-${field}-${value}`
+ * @param field - the name of the field, e.g. `network.transport`
+ * @param value - value of the field e.g. `tcp`
+ * @param name - defaulting to `field`, this optional human readable name is used by the `DataProvider` that represents the data
+ * @param children - defaults to displaying `value`, this allows an arbitrary visualization to be displayed in lieu of the default behavior
+ * @param tooltipContent - defaults to displaying `field`, pass `null` to
+ * 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 = React.memo<DefaultDraggableType>(
+  ({ id, field, value, name, children, tooltipContent, queryValue }) =>
+    value != null ? (
+      <DraggableWrapper
+        dataProvider={{
+          and: [],
+          enabled: true,
+          id: escapeDataProviderId(id),
+          name: name ? name : value,
+          excluded: false,
+          kqlQuery: '',
+          queryMatch: {
+            field,
+            value: queryValue ? queryValue : value,
+            operator: IS_OPERATOR,
+          },
+        }}
+        render={(dataProvider, _, snapshot) =>
+          snapshot.isDragging ? (
+            <DragEffects>
+              <Provider dataProvider={dataProvider} />
+            </DragEffects>
+          ) : (
+            <Content field={field} tooltipContent={tooltipContent} value={value}>
+              {children}
+            </Content>
+          )
+        }
+      />
+    ) : null
+);
+
+DefaultDraggable.displayName = 'DefaultDraggable';
+
+export const Badge = styled(EuiBadge)`
+  vertical-align: top;
+` as any; // eslint-disable-line @typescript-eslint/no-explicit-any
+
+Badge.displayName = 'Badge';
+
+export type BadgeDraggableType = Omit<DefaultDraggableType, 'id'> & {
+  contextId: string;
+  eventId: string;
+  iconType?: IconType;
+  color?: string;
+};
+
+/**
+ * A draggable badge that's only displayed when the specified value is non-`null`.
+ *
+ * @param contextId - used as part of the formula to derive a unique draggable id, this describes the context e.g. `event-fields-browser` in which the badge is displayed
+ * @param eventId - uniquely identifies an event, as specified in the `_id` field of the document
+ * @param field - the name of the field, e.g. `network.transport`
+ * @param value - value of the field e.g. `tcp`
+ * @param iconType -the (optional) type of icon e.g. `snowflake` to display on the badge
+ * @param name - defaulting to `field`, this optional human readable name is used by the `DataProvider` that represents the data
+ * @param color - defaults to `hollow`, optionally overwrite the color of the badge icon
+ * @param children - defaults to displaying `value`, this allows an arbitrary visualization to be displayed in lieu of the default behavior
+ * @param tooltipContent - defaults to displaying `field`, pass `null` to
+ * 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 = React.memo<BadgeDraggableType>(
+  ({
+    contextId,
+    eventId,
+    field,
+    value,
+    iconType,
+    name,
+    color = 'hollow',
+    children,
+    tooltipContent,
+    queryValue,
+  }) =>
+    value != null ? (
+      <DefaultDraggable
+        id={`draggable-badge-default-draggable-${contextId}-${eventId}-${field}-${value}`}
+        field={field}
+        name={name}
+        value={value}
+        tooltipContent={tooltipContent}
+        queryValue={queryValue}
+      >
+        <Badge iconType={iconType} color={color} title="">
+          {children ? children : value !== '' ? value : getEmptyStringTag()}
+        </Badge>
+      </DefaultDraggable>
+    ) : null
+);
+
+DraggableBadge.displayName = 'DraggableBadge';
diff --git a/x-pack/plugins/siem/public/components/empty_page/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/common/components/empty_page/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/empty_page/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/empty_page/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/empty_page/index.test.tsx b/x-pack/plugins/siem/public/common/components/empty_page/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/empty_page/index.test.tsx
rename to x-pack/plugins/siem/public/common/components/empty_page/index.test.tsx
diff --git a/x-pack/plugins/siem/public/components/empty_page/index.tsx b/x-pack/plugins/siem/public/common/components/empty_page/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/empty_page/index.tsx
rename to x-pack/plugins/siem/public/common/components/empty_page/index.tsx
diff --git a/x-pack/plugins/siem/public/components/empty_value/__snapshots__/empty_value.test.tsx.snap b/x-pack/plugins/siem/public/common/components/empty_value/__snapshots__/empty_value.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/empty_value/__snapshots__/empty_value.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/empty_value/__snapshots__/empty_value.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/empty_value/empty_value.test.tsx b/x-pack/plugins/siem/public/common/components/empty_value/empty_value.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/empty_value/empty_value.test.tsx
rename to x-pack/plugins/siem/public/common/components/empty_value/empty_value.test.tsx
diff --git a/x-pack/plugins/siem/public/components/empty_value/index.tsx b/x-pack/plugins/siem/public/common/components/empty_value/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/empty_value/index.tsx
rename to x-pack/plugins/siem/public/common/components/empty_value/index.tsx
diff --git a/x-pack/plugins/siem/public/components/empty_value/translations.ts b/x-pack/plugins/siem/public/common/components/empty_value/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/empty_value/translations.ts
rename to x-pack/plugins/siem/public/common/components/empty_value/translations.ts
diff --git a/x-pack/plugins/siem/public/components/error_toast_dispatcher/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/common/components/error_toast_dispatcher/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/error_toast_dispatcher/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/error_toast_dispatcher/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/common/components/error_toast_dispatcher/index.test.tsx b/x-pack/plugins/siem/public/common/components/error_toast_dispatcher/index.test.tsx
new file mode 100644
index 00000000000000..50b20099b17d07
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/error_toast_dispatcher/index.test.tsx
@@ -0,0 +1,35 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import React from 'react';
+import { Provider } from 'react-redux';
+
+import { apolloClientObservable, mockGlobalState, SUB_PLUGINS_REDUCER } from '../../mock';
+import { createStore } from '../../store/store';
+
+import { ErrorToastDispatcher } from '.';
+import { State } from '../../store/reducer';
+
+describe('Error Toast Dispatcher', () => {
+  const state: State = mockGlobalState;
+  let store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable);
+
+  beforeEach(() => {
+    store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable);
+  });
+
+  describe('rendering', () => {
+    test('it renders', () => {
+      const wrapper = shallow(
+        <Provider store={store}>
+          <ErrorToastDispatcher toastLifeTimeMs={9999999999} />
+        </Provider>
+      );
+      expect(wrapper.find('Connect(ErrorToastDispatcherComponent)')).toMatchSnapshot();
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/components/error_toast_dispatcher/index.tsx b/x-pack/plugins/siem/public/common/components/error_toast_dispatcher/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/error_toast_dispatcher/index.tsx
rename to x-pack/plugins/siem/public/common/components/error_toast_dispatcher/index.tsx
diff --git a/x-pack/plugins/siem/public/components/event_details/__snapshots__/event_details.test.tsx.snap b/x-pack/plugins/siem/public/common/components/event_details/__snapshots__/event_details.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/event_details/__snapshots__/event_details.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/event_details/__snapshots__/event_details.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/event_details/__snapshots__/json_view.test.tsx.snap b/x-pack/plugins/siem/public/common/components/event_details/__snapshots__/json_view.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/event_details/__snapshots__/json_view.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/event_details/__snapshots__/json_view.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/common/components/event_details/columns.tsx b/x-pack/plugins/siem/public/common/components/event_details/columns.tsx
new file mode 100644
index 00000000000000..4b5ce3b98e5e11
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/event_details/columns.tsx
@@ -0,0 +1,210 @@
+/*
+ * 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.
+ */
+
+/* eslint-disable react/display-name */
+
+import {
+  EuiCheckbox,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiPanel,
+  EuiText,
+  EuiToolTip,
+} from '@elastic/eui';
+import React from 'react';
+import { Draggable } from 'react-beautiful-dnd';
+import styled from 'styled-components';
+
+import { BrowserFields } from '../../containers/source';
+import { ToStringArray } from '../../../graphql/types';
+import { ColumnHeaderOptions } from '../../../timelines/store/timeline/model';
+import { DragEffects } from '../drag_and_drop/draggable_wrapper';
+import { DroppableWrapper } from '../drag_and_drop/droppable_wrapper';
+import { getDroppableId, getDraggableFieldId, DRAG_TYPE_FIELD } from '../drag_and_drop/helpers';
+import { DraggableFieldBadge } from '../draggables/field_badge';
+import { FieldName } from '../../../timelines/components/fields_browser/field_name';
+import { SelectableText } from '../selectable_text';
+import { OverflowField } from '../tables/helpers';
+import { defaultColumnHeaderType } from '../../../timelines/components/timeline/body/column_headers/default_headers';
+import { DEFAULT_COLUMN_MIN_WIDTH } from '../../../timelines/components/timeline/body/constants';
+import { MESSAGE_FIELD_NAME } from '../../../timelines/components/timeline/body/renderers/constants';
+import { FormattedFieldValue } from '../../../timelines/components/timeline/body/renderers/formatted_field';
+import { OnUpdateColumns } from '../../../timelines/components/timeline/events';
+import { getIconFromType, getExampleText, getColumnsWithTimestamp } from './helpers';
+import * as i18n from './translations';
+import { EventFieldsData } from './types';
+
+const HoverActionsContainer = styled(EuiPanel)`
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  height: 25px;
+  justify-content: center;
+  left: 5px;
+  position: absolute;
+  top: -10px;
+  width: 30px;
+`;
+
+HoverActionsContainer.displayName = 'HoverActionsContainer';
+
+export const getColumns = ({
+  browserFields,
+  columnHeaders,
+  eventId,
+  onUpdateColumns,
+  contextId,
+  toggleColumn,
+}: {
+  browserFields: BrowserFields;
+  columnHeaders: ColumnHeaderOptions[];
+  eventId: string;
+  onUpdateColumns: OnUpdateColumns;
+  contextId: string;
+  toggleColumn: (column: ColumnHeaderOptions) => void;
+}) => [
+  {
+    field: 'field',
+    name: '',
+    sortable: false,
+    truncateText: false,
+    width: '30px',
+    render: (field: string) => (
+      <EuiToolTip content={i18n.TOGGLE_COLUMN_TOOLTIP}>
+        <EuiCheckbox
+          checked={columnHeaders.findIndex(c => c.id === field) !== -1}
+          data-test-subj={`toggle-field-${field}`}
+          id={field}
+          onChange={() =>
+            toggleColumn({
+              columnHeaderType: defaultColumnHeaderType,
+              id: field,
+              width: DEFAULT_COLUMN_MIN_WIDTH,
+            })
+          }
+        />
+      </EuiToolTip>
+    ),
+  },
+  {
+    field: 'field',
+    name: i18n.FIELD,
+    sortable: true,
+    truncateText: false,
+    render: (field: string, data: EventFieldsData) => (
+      <EuiFlexGroup alignItems="center" gutterSize="none">
+        <EuiFlexItem grow={false}>
+          <EuiToolTip content={data.type}>
+            <EuiIcon data-test-subj="field-type-icon" type={getIconFromType(data.type)} />
+          </EuiToolTip>
+        </EuiFlexItem>
+
+        <EuiFlexItem grow={false}>
+          <DroppableWrapper
+            droppableId={getDroppableId(
+              `event-details-field-droppable-wrapper-${contextId}-${eventId}-${data.category}-${field}`
+            )}
+            key={getDroppableId(
+              `event-details-field-droppable-wrapper-${contextId}-${eventId}-${data.category}-${field}`
+            )}
+            isDropDisabled={true}
+            type={DRAG_TYPE_FIELD}
+            renderClone={provided => (
+              <div
+                {...provided.draggableProps}
+                {...provided.dragHandleProps}
+                ref={provided.innerRef}
+              >
+                <DragEffects>
+                  <DraggableFieldBadge fieldId={field} />
+                </DragEffects>
+              </div>
+            )}
+          >
+            <Draggable
+              draggableId={getDraggableFieldId({
+                contextId: `event-details-field-draggable-${contextId}-${eventId}-${data.category}-${field}`,
+                fieldId: field,
+              })}
+              index={0}
+            >
+              {provided => (
+                <div
+                  {...provided.draggableProps}
+                  {...provided.dragHandleProps}
+                  ref={provided.innerRef}
+                >
+                  <FieldName
+                    categoryId={data.category}
+                    categoryColumns={getColumnsWithTimestamp({
+                      browserFields,
+                      category: data.category,
+                    })}
+                    data-test-subj="field-name"
+                    fieldId={field}
+                    onUpdateColumns={onUpdateColumns}
+                  />
+                </div>
+              )}
+            </Draggable>
+          </DroppableWrapper>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    ),
+  },
+  {
+    field: 'values',
+    name: i18n.VALUE,
+    sortable: true,
+    truncateText: false,
+    render: (values: ToStringArray | null | undefined, data: EventFieldsData) => (
+      <EuiFlexGroup direction="column" alignItems="flexStart" component="span" gutterSize="none">
+        {values != null &&
+          values.map((value, i) => (
+            <EuiFlexItem
+              grow={false}
+              component="span"
+              key={`event-details-value-flex-item-${contextId}-${eventId}-${data.field}-${i}-${value}`}
+            >
+              {data.field === MESSAGE_FIELD_NAME ? (
+                <OverflowField value={value} />
+              ) : (
+                <FormattedFieldValue
+                  contextId={`event-details-value-formatted-field-value-${contextId}-${eventId}-${data.field}-${i}-${value}`}
+                  eventId={eventId}
+                  fieldFormat={data.format}
+                  fieldName={data.field}
+                  fieldType={data.type}
+                  value={value}
+                />
+              )}
+            </EuiFlexItem>
+          ))}
+      </EuiFlexGroup>
+    ),
+  },
+  {
+    field: 'description',
+    name: i18n.DESCRIPTION,
+    render: (description: string | null | undefined, data: EventFieldsData) => (
+      <SelectableText>
+        <EuiText size="xs">{`${description || ''} ${getExampleText(data.example)}`}</EuiText>
+      </SelectableText>
+    ),
+    sortable: true,
+    truncateText: true,
+    width: '50%',
+  },
+  {
+    field: 'valuesConcatenated',
+    name: i18n.BLANK,
+    render: () => null,
+    sortable: false,
+    truncateText: true,
+    width: '1px',
+  },
+];
diff --git a/x-pack/plugins/siem/public/components/event_details/event_details.test.tsx b/x-pack/plugins/siem/public/common/components/event_details/event_details.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/event_details/event_details.test.tsx
rename to x-pack/plugins/siem/public/common/components/event_details/event_details.test.tsx
diff --git a/x-pack/plugins/siem/public/components/event_details/event_details.tsx b/x-pack/plugins/siem/public/common/components/event_details/event_details.tsx
similarity index 90%
rename from x-pack/plugins/siem/public/components/event_details/event_details.tsx
rename to x-pack/plugins/siem/public/common/components/event_details/event_details.tsx
index 9234fe44320f06..c6a7a05bb26989 100644
--- a/x-pack/plugins/siem/public/components/event_details/event_details.tsx
+++ b/x-pack/plugins/siem/public/common/components/event_details/event_details.tsx
@@ -9,9 +9,9 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { BrowserFields } from '../../containers/source';
-import { DetailItem } from '../../graphql/types';
-import { ColumnHeaderOptions } from '../../store/timeline/model';
-import { OnUpdateColumns } from '../timeline/events';
+import { DetailItem } from '../../../graphql/types';
+import { ColumnHeaderOptions } from '../../../timelines/store/timeline/model';
+import { OnUpdateColumns } from '../../../timelines/components/timeline/events';
 import { EventFieldsBrowser } from './event_fields_browser';
 import { JsonView } from './json_view';
 import * as i18n from './translations';
diff --git a/x-pack/plugins/siem/public/components/event_details/event_fields_browser.test.tsx b/x-pack/plugins/siem/public/common/components/event_details/event_fields_browser.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/event_details/event_fields_browser.test.tsx
rename to x-pack/plugins/siem/public/common/components/event_details/event_fields_browser.test.tsx
diff --git a/x-pack/plugins/siem/public/components/event_details/event_fields_browser.tsx b/x-pack/plugins/siem/public/common/components/event_details/event_fields_browser.tsx
similarity index 90%
rename from x-pack/plugins/siem/public/components/event_details/event_fields_browser.tsx
rename to x-pack/plugins/siem/public/common/components/event_details/event_fields_browser.tsx
index 9a842339cb62ef..0428f3ec8a197b 100644
--- a/x-pack/plugins/siem/public/components/event_details/event_fields_browser.tsx
+++ b/x-pack/plugins/siem/public/common/components/event_details/event_fields_browser.tsx
@@ -8,10 +8,10 @@ import { sortBy } from 'lodash';
 import { EuiInMemoryTable } from '@elastic/eui';
 import React, { useMemo } from 'react';
 
-import { ColumnHeaderOptions } from '../../store/timeline/model';
+import { ColumnHeaderOptions } from '../../../timelines/store/timeline/model';
 import { BrowserFields, getAllFieldsByName } from '../../containers/source';
-import { DetailItem } from '../../graphql/types';
-import { OnUpdateColumns } from '../timeline/events';
+import { DetailItem } from '../../../graphql/types';
+import { OnUpdateColumns } from '../../../timelines/components/timeline/events';
 
 import { getColumns } from './columns';
 import { search } from './helpers';
diff --git a/x-pack/plugins/siem/public/components/event_details/event_id.ts b/x-pack/plugins/siem/public/common/components/event_details/event_id.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/event_details/event_id.ts
rename to x-pack/plugins/siem/public/common/components/event_details/event_id.ts
diff --git a/x-pack/plugins/siem/public/components/event_details/helpers.test.tsx b/x-pack/plugins/siem/public/common/components/event_details/helpers.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/event_details/helpers.test.tsx
rename to x-pack/plugins/siem/public/common/components/event_details/helpers.test.tsx
diff --git a/x-pack/plugins/siem/public/common/components/event_details/helpers.tsx b/x-pack/plugins/siem/public/common/components/event_details/helpers.tsx
new file mode 100644
index 00000000000000..aae7ca901c3d21
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/event_details/helpers.tsx
@@ -0,0 +1,115 @@
+/*
+ * 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 { get, getOr, isEmpty, uniqBy } from 'lodash/fp';
+
+import { BrowserField, BrowserFields } from '../../containers/source';
+import { ColumnHeaderOptions } from '../../../timelines/store/timeline/model';
+import {
+  DEFAULT_DATE_COLUMN_MIN_WIDTH,
+  DEFAULT_COLUMN_MIN_WIDTH,
+} from '../../../timelines/components/timeline/body/constants';
+import { ToStringArray } from '../../../graphql/types';
+
+import * as i18n from './translations';
+
+/**
+ * Defines the behavior of the search input that appears above the table of data
+ */
+export const search = {
+  box: {
+    incremental: true,
+    placeholder: i18n.PLACEHOLDER,
+    schema: true,
+  },
+};
+
+export interface ItemValues {
+  value: JSX.Element;
+  valueAsString: string;
+}
+
+/**
+ * An item rendered in the table
+ */
+export interface Item {
+  description: string;
+  field: JSX.Element;
+  fieldId: string;
+  type: string;
+  values: ToStringArray;
+}
+
+export const getColumnHeaderFromBrowserField = ({
+  browserField,
+  width = DEFAULT_COLUMN_MIN_WIDTH,
+}: {
+  browserField: Partial<BrowserField>;
+  width?: number;
+}): ColumnHeaderOptions => ({
+  category: browserField.category,
+  columnHeaderType: 'not-filtered',
+  description: browserField.description != null ? browserField.description : undefined,
+  example: browserField.example != null ? `${browserField.example}` : undefined,
+  id: browserField.name || '',
+  type: browserField.type,
+  aggregatable: browserField.aggregatable,
+  width,
+});
+
+/**
+ * Returns a collection of columns, where the first column in the collection
+ * is a timestamp, and the remaining columns are all the columns in the
+ * specified category
+ */
+export const getColumnsWithTimestamp = ({
+  browserFields,
+  category,
+}: {
+  browserFields: BrowserFields;
+  category: string;
+}): ColumnHeaderOptions[] => {
+  const emptyFields: Record<string, Partial<BrowserField>> = {};
+  const timestamp = get('base.fields.@timestamp', browserFields);
+  const categoryFields: Array<Partial<BrowserField>> = [
+    ...Object.values(getOr(emptyFields, `${category}.fields`, browserFields)),
+  ];
+
+  return timestamp != null && categoryFields.length
+    ? uniqBy('id', [
+        getColumnHeaderFromBrowserField({
+          browserField: timestamp,
+          width: DEFAULT_DATE_COLUMN_MIN_WIDTH,
+        }),
+        ...categoryFields.map(f => getColumnHeaderFromBrowserField({ browserField: f })),
+      ])
+    : [];
+};
+
+/** Returns example text, or an empty string if the field does not have an example */
+export const getExampleText = (example: string | number | null | undefined): string =>
+  !isEmpty(example) ? `Example: ${example}` : '';
+
+export const getIconFromType = (type: string | null) => {
+  switch (type) {
+    case 'string': // fall through
+    case 'keyword':
+      return 'string';
+    case 'number': // fall through
+    case 'long':
+      return 'number';
+    case 'date':
+      return 'clock';
+    case 'ip':
+      return 'globe';
+    case 'object':
+      return 'questionInCircle';
+    case 'float':
+      return 'number';
+    default:
+      return 'questionInCircle';
+  }
+};
diff --git a/x-pack/plugins/siem/public/components/event_details/json_view.test.tsx b/x-pack/plugins/siem/public/common/components/event_details/json_view.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/event_details/json_view.test.tsx
rename to x-pack/plugins/siem/public/common/components/event_details/json_view.test.tsx
diff --git a/x-pack/plugins/siem/public/components/event_details/json_view.tsx b/x-pack/plugins/siem/public/common/components/event_details/json_view.tsx
similarity index 88%
rename from x-pack/plugins/siem/public/components/event_details/json_view.tsx
rename to x-pack/plugins/siem/public/common/components/event_details/json_view.tsx
index 9897e319e0487b..788ca95e2022ea 100644
--- a/x-pack/plugins/siem/public/components/event_details/json_view.tsx
+++ b/x-pack/plugins/siem/public/common/components/event_details/json_view.tsx
@@ -9,8 +9,8 @@ import { set } from 'lodash/fp';
 import React from 'react';
 import styled from 'styled-components';
 
-import { DetailItem } from '../../graphql/types';
-import { omitTypenameAndEmpty } from '../timeline/body/helpers';
+import { DetailItem } from '../../../graphql/types';
+import { omitTypenameAndEmpty } from '../../../timelines/components/timeline/body/helpers';
 
 interface Props {
   data: DetailItem[];
diff --git a/x-pack/plugins/siem/public/components/event_details/stateful_event_details.tsx b/x-pack/plugins/siem/public/common/components/event_details/stateful_event_details.tsx
similarity index 86%
rename from x-pack/plugins/siem/public/components/event_details/stateful_event_details.tsx
rename to x-pack/plugins/siem/public/common/components/event_details/stateful_event_details.tsx
index c79f02740253a9..ec0e82c218a075 100644
--- a/x-pack/plugins/siem/public/components/event_details/stateful_event_details.tsx
+++ b/x-pack/plugins/siem/public/common/components/event_details/stateful_event_details.tsx
@@ -7,9 +7,9 @@
 import React, { useCallback, useState } from 'react';
 
 import { BrowserFields } from '../../containers/source';
-import { DetailItem } from '../../graphql/types';
-import { ColumnHeaderOptions } from '../../store/timeline/model';
-import { OnUpdateColumns } from '../timeline/events';
+import { DetailItem } from '../../../graphql/types';
+import { ColumnHeaderOptions } from '../../../timelines/store/timeline/model';
+import { OnUpdateColumns } from '../../../timelines/components/timeline/events';
 
 import { EventDetails, View } from './event_details';
 
diff --git a/x-pack/plugins/siem/public/components/event_details/translations.ts b/x-pack/plugins/siem/public/common/components/event_details/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/event_details/translations.ts
rename to x-pack/plugins/siem/public/common/components/event_details/translations.ts
diff --git a/x-pack/plugins/siem/public/common/components/event_details/types.ts b/x-pack/plugins/siem/public/common/components/event_details/types.ts
new file mode 100644
index 00000000000000..db53f411fa5183
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/event_details/types.ts
@@ -0,0 +1,10 @@
+/*
+ * 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 { BrowserField } from '../../containers/source';
+import { DetailItem } from '../../../graphql/types';
+
+export type EventFieldsData = BrowserField & DetailItem;
diff --git a/x-pack/plugins/siem/public/components/events_viewer/default_headers.tsx b/x-pack/plugins/siem/public/common/components/events_viewer/default_headers.tsx
similarity index 84%
rename from x-pack/plugins/siem/public/components/events_viewer/default_headers.tsx
rename to x-pack/plugins/siem/public/common/components/events_viewer/default_headers.tsx
index b97e0da5df078b..4660351e0d8f9a 100644
--- a/x-pack/plugins/siem/public/components/events_viewer/default_headers.tsx
+++ b/x-pack/plugins/siem/public/common/components/events_viewer/default_headers.tsx
@@ -4,12 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { ColumnHeaderOptions } from '../../store/timeline/model';
-import { defaultColumnHeaderType } from '../timeline/body/column_headers/default_headers';
+import { ColumnHeaderOptions } from '../../../timelines/store/timeline/model';
+import { defaultColumnHeaderType } from '../../../timelines/components/timeline/body/column_headers/default_headers';
 import {
   DEFAULT_COLUMN_MIN_WIDTH,
   DEFAULT_DATE_COLUMN_MIN_WIDTH,
-} from '../timeline/body/constants';
+} from '../../../timelines/components/timeline/body/constants';
 
 export const defaultHeaders: ColumnHeaderOptions[] = [
   {
diff --git a/x-pack/plugins/siem/public/common/components/events_viewer/default_model.tsx b/x-pack/plugins/siem/public/common/components/events_viewer/default_model.tsx
new file mode 100644
index 00000000000000..ecb76eb7ff93f2
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/events_viewer/default_model.tsx
@@ -0,0 +1,14 @@
+/*
+ * 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 { defaultHeaders } from './default_headers';
+import { SubsetTimelineModel } from '../../../timelines/store/timeline/model';
+import { timelineDefaults } from '../../../timelines/store/timeline/defaults';
+
+export const eventsDefaultModel: SubsetTimelineModel = {
+  ...timelineDefaults,
+  columns: defaultHeaders,
+};
diff --git a/x-pack/plugins/siem/public/components/events_viewer/event_details_width_context.tsx b/x-pack/plugins/siem/public/common/components/events_viewer/event_details_width_context.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/events_viewer/event_details_width_context.tsx
rename to x-pack/plugins/siem/public/common/components/events_viewer/event_details_width_context.tsx
diff --git a/x-pack/plugins/siem/public/components/events_viewer/events_viewer.test.tsx b/x-pack/plugins/siem/public/common/components/events_viewer/events_viewer.test.tsx
similarity index 95%
rename from x-pack/plugins/siem/public/components/events_viewer/events_viewer.test.tsx
rename to x-pack/plugins/siem/public/common/components/events_viewer/events_viewer.test.tsx
index d3cdf9886e4693..d2f0d47380dd27 100644
--- a/x-pack/plugins/siem/public/components/events_viewer/events_viewer.test.tsx
+++ b/x-pack/plugins/siem/public/common/components/events_viewer/events_viewer.test.tsx
@@ -14,13 +14,13 @@ import { wait } from '../../lib/helpers';
 import { mockEventViewerResponse } from './mock';
 import { StatefulEventsViewer } from '.';
 import { defaultHeaders } from './default_headers';
-import { useFetchIndexPatterns } from '../../containers/detection_engine/rules/fetch_index_patterns';
+import { useFetchIndexPatterns } from '../../../alerts/containers/detection_engine/rules/fetch_index_patterns';
 import { mockBrowserFields } from '../../containers/source/mock';
 import { eventsDefaultModel } from './default_model';
 import { useMountAppended } from '../../utils/use_mount_appended';
 
 const mockUseFetchIndexPatterns: jest.Mock = useFetchIndexPatterns as jest.Mock;
-jest.mock('../../containers/detection_engine/rules/fetch_index_patterns');
+jest.mock('../../../alerts/containers/detection_engine/rules/fetch_index_patterns');
 mockUseFetchIndexPatterns.mockImplementation(() => [
   {
     browserFields: mockBrowserFields,
diff --git a/x-pack/plugins/siem/public/components/events_viewer/events_viewer.tsx b/x-pack/plugins/siem/public/common/components/events_viewer/events_viewer.tsx
similarity index 86%
rename from x-pack/plugins/siem/public/components/events_viewer/events_viewer.tsx
rename to x-pack/plugins/siem/public/common/components/events_viewer/events_viewer.tsx
index aff66396af39d3..bec8c30ecdd384 100644
--- a/x-pack/plugins/siem/public/components/events_viewer/events_viewer.tsx
+++ b/x-pack/plugins/siem/public/common/components/events_viewer/events_viewer.tsx
@@ -11,23 +11,31 @@ import styled from 'styled-components';
 import deepEqual from 'fast-deep-equal';
 
 import { BrowserFields } from '../../containers/source';
-import { TimelineQuery } from '../../containers/timeline';
-import { Direction } from '../../graphql/types';
+import { TimelineQuery } from '../../../timelines/containers';
+import { Direction } from '../../../graphql/types';
 import { useKibana } from '../../lib/kibana';
-import { ColumnHeaderOptions, KqlMode } from '../../store/timeline/model';
+import { ColumnHeaderOptions, KqlMode } from '../../../timelines/store/timeline/model';
 import { HeaderSection } from '../header_section';
-import { defaultHeaders } from '../timeline/body/column_headers/default_headers';
-import { Sort } from '../timeline/body/sort';
-import { StatefulBody } from '../timeline/body/stateful_body';
-import { DataProvider } from '../timeline/data_providers/data_provider';
-import { OnChangeItemsPerPage } from '../timeline/events';
-import { Footer, footerHeight } from '../timeline/footer';
-import { combineQueries } from '../timeline/helpers';
-import { TimelineRefetch } from '../timeline/refetch_timeline';
-import { ManageTimelineContext, TimelineTypeContextProps } from '../timeline/timeline_context';
+import { defaultHeaders } from '../../../timelines/components/timeline/body/column_headers/default_headers';
+import { Sort } from '../../../timelines/components/timeline/body/sort';
+import { StatefulBody } from '../../../timelines/components/timeline/body/stateful_body';
+import { DataProvider } from '../../../timelines/components/timeline/data_providers/data_provider';
+import { OnChangeItemsPerPage } from '../../../timelines/components/timeline/events';
+import { Footer, footerHeight } from '../../../timelines/components/timeline/footer';
+import { combineQueries } from '../../../timelines/components/timeline/helpers';
+import { TimelineRefetch } from '../../../timelines/components/timeline/refetch_timeline';
+import {
+  ManageTimelineContext,
+  TimelineTypeContextProps,
+} from '../../../timelines/components/timeline/timeline_context';
 import { EventDetailsWidthProvider } from './event_details_width_context';
 import * as i18n from './translations';
-import { Filter, esQuery, IIndexPattern, Query } from '../../../../../../src/plugins/data/public';
+import {
+  Filter,
+  esQuery,
+  IIndexPattern,
+  Query,
+} from '../../../../../../../src/plugins/data/public';
 import { inputsModel } from '../../store';
 
 const DEFAULT_EVENTS_VIEWER_HEIGHT = 500;
diff --git a/x-pack/plugins/siem/public/common/components/events_viewer/index.test.tsx b/x-pack/plugins/siem/public/common/components/events_viewer/index.test.tsx
new file mode 100644
index 00000000000000..bdc0338450507a
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/events_viewer/index.test.tsx
@@ -0,0 +1,85 @@
+/*
+ * 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 { MockedProvider } from 'react-apollo/test-utils';
+import useResizeObserver from 'use-resize-observer/polyfilled';
+
+import { wait } from '../../lib/helpers';
+import { mockIndexPattern, TestProviders } from '../../mock';
+import { useMountAppended } from '../../utils/use_mount_appended';
+
+import { mockEventViewerResponse } from './mock';
+import { StatefulEventsViewer } from '.';
+import { useFetchIndexPatterns } from '../../../alerts/containers/detection_engine/rules/fetch_index_patterns';
+import { mockBrowserFields } from '../../containers/source/mock';
+import { eventsDefaultModel } from './default_model';
+
+const mockUseFetchIndexPatterns: jest.Mock = useFetchIndexPatterns as jest.Mock;
+jest.mock('../../../alerts/containers/detection_engine/rules/fetch_index_patterns');
+mockUseFetchIndexPatterns.mockImplementation(() => [
+  {
+    browserFields: mockBrowserFields,
+    indexPatterns: mockIndexPattern,
+  },
+]);
+
+const mockUseResizeObserver: jest.Mock = useResizeObserver as jest.Mock;
+jest.mock('use-resize-observer/polyfilled');
+mockUseResizeObserver.mockImplementation(() => ({}));
+
+const from = 1566943856794;
+const to = 1566857456791;
+
+describe('StatefulEventsViewer', () => {
+  const mount = useMountAppended();
+
+  test('it renders the events viewer', async () => {
+    const wrapper = mount(
+      <TestProviders>
+        <MockedProvider mocks={mockEventViewerResponse} addTypename={false}>
+          <StatefulEventsViewer
+            defaultModel={eventsDefaultModel}
+            end={to}
+            id={'test-stateful-events-viewer'}
+            start={from}
+          />
+        </MockedProvider>
+      </TestProviders>
+    );
+
+    await wait();
+    wrapper.update();
+
+    expect(
+      wrapper
+        .find('[data-test-subj="events-viewer-panel"]')
+        .first()
+        .exists()
+    ).toBe(true);
+  });
+
+  // InspectButtonContainer controls displaying InspectButton components
+  test('it renders InspectButtonContainer', async () => {
+    const wrapper = mount(
+      <TestProviders>
+        <MockedProvider mocks={mockEventViewerResponse} addTypename={false}>
+          <StatefulEventsViewer
+            defaultModel={eventsDefaultModel}
+            end={to}
+            id={'test-stateful-events-viewer'}
+            start={from}
+          />
+        </MockedProvider>
+      </TestProviders>
+    );
+
+    await wait();
+    wrapper.update();
+
+    expect(wrapper.find(`InspectButtonContainer`).exists()).toBe(true);
+  });
+});
diff --git a/x-pack/plugins/siem/public/common/components/events_viewer/index.tsx b/x-pack/plugins/siem/public/common/components/events_viewer/index.tsx
new file mode 100644
index 00000000000000..e7af69096179af
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/events_viewer/index.tsx
@@ -0,0 +1,219 @@
+/*
+ * 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, { useCallback, useMemo, useEffect } from 'react';
+import { connect, ConnectedProps } from 'react-redux';
+import deepEqual from 'fast-deep-equal';
+
+import { DEFAULT_INDEX_KEY } from '../../../../common/constants';
+import { inputsModel, inputsSelectors, State } from '../../store';
+import { inputsActions } from '../../store/actions';
+import { timelineSelectors, timelineActions } from '../../../timelines/store/timeline';
+import {
+  ColumnHeaderOptions,
+  SubsetTimelineModel,
+  TimelineModel,
+} from '../../../timelines/store/timeline/model';
+import { OnChangeItemsPerPage } from '../../../timelines/components/timeline/events';
+import { Filter } from '../../../../../../../src/plugins/data/public';
+import { useUiSetting } from '../../lib/kibana';
+import { EventsViewer } from './events_viewer';
+import { useFetchIndexPatterns } from '../../../alerts/containers/detection_engine/rules/fetch_index_patterns';
+import { TimelineTypeContextProps } from '../../../timelines/components/timeline/timeline_context';
+import { InspectButtonContainer } from '../inspect';
+import * as i18n from './translations';
+
+export interface OwnProps {
+  defaultIndices?: string[];
+  defaultModel: SubsetTimelineModel;
+  end: number;
+  id: string;
+  start: number;
+  headerFilterGroup?: React.ReactNode;
+  pageFilters?: Filter[];
+  timelineTypeContext?: TimelineTypeContextProps;
+  utilityBar?: (refetch: inputsModel.Refetch, totalCount: number) => React.ReactNode;
+}
+
+type Props = OwnProps & PropsFromRedux;
+
+const defaultTimelineTypeContext = {
+  loadingText: i18n.LOADING_EVENTS,
+};
+
+const StatefulEventsViewerComponent: React.FC<Props> = ({
+  createTimeline,
+  columns,
+  dataProviders,
+  deletedEventIds,
+  defaultIndices,
+  deleteEventQuery,
+  end,
+  filters,
+  headerFilterGroup,
+  id,
+  isLive,
+  itemsPerPage,
+  itemsPerPageOptions,
+  kqlMode,
+  pageFilters,
+  query,
+  removeColumn,
+  start,
+  showCheckboxes,
+  showRowRenderers,
+  sort,
+  timelineTypeContext = defaultTimelineTypeContext,
+  updateItemsPerPage,
+  upsertColumn,
+  utilityBar,
+}) => {
+  const [{ browserFields, indexPatterns }] = useFetchIndexPatterns(
+    defaultIndices ?? useUiSetting<string[]>(DEFAULT_INDEX_KEY)
+  );
+
+  useEffect(() => {
+    if (createTimeline != null) {
+      createTimeline({ id, columns, sort, itemsPerPage, showCheckboxes, showRowRenderers });
+    }
+    return () => {
+      deleteEventQuery({ id, inputId: 'global' });
+    };
+  }, []);
+
+  const onChangeItemsPerPage: OnChangeItemsPerPage = useCallback(
+    itemsChangedPerPage => updateItemsPerPage({ id, itemsPerPage: itemsChangedPerPage }),
+    [id, updateItemsPerPage]
+  );
+
+  const toggleColumn = useCallback(
+    (column: ColumnHeaderOptions) => {
+      const exists = columns.findIndex(c => c.id === column.id) !== -1;
+
+      if (!exists && upsertColumn != null) {
+        upsertColumn({
+          column,
+          id,
+          index: 1,
+        });
+      }
+
+      if (exists && removeColumn != null) {
+        removeColumn({
+          columnId: column.id,
+          id,
+        });
+      }
+    },
+    [columns, id, upsertColumn, removeColumn]
+  );
+
+  const globalFilters = useMemo(() => [...filters, ...(pageFilters ?? [])], [filters, pageFilters]);
+
+  return (
+    <InspectButtonContainer>
+      <EventsViewer
+        browserFields={browserFields}
+        columns={columns}
+        id={id}
+        dataProviders={dataProviders!}
+        deletedEventIds={deletedEventIds}
+        end={end}
+        filters={globalFilters}
+        headerFilterGroup={headerFilterGroup}
+        indexPattern={indexPatterns}
+        isLive={isLive}
+        itemsPerPage={itemsPerPage!}
+        itemsPerPageOptions={itemsPerPageOptions!}
+        kqlMode={kqlMode}
+        onChangeItemsPerPage={onChangeItemsPerPage}
+        query={query}
+        start={start}
+        sort={sort!}
+        timelineTypeContext={timelineTypeContext}
+        toggleColumn={toggleColumn}
+        utilityBar={utilityBar}
+      />
+    </InspectButtonContainer>
+  );
+};
+
+const makeMapStateToProps = () => {
+  const getInputsTimeline = inputsSelectors.getTimelineSelector();
+  const getGlobalQuerySelector = inputsSelectors.globalQuerySelector();
+  const getGlobalFiltersQuerySelector = inputsSelectors.globalFiltersQuerySelector();
+  const getEvents = timelineSelectors.getEventsByIdSelector();
+  const mapStateToProps = (state: State, { id, defaultModel }: OwnProps) => {
+    const input: inputsModel.InputsRange = getInputsTimeline(state);
+    const events: TimelineModel = getEvents(state, id) ?? defaultModel;
+    const {
+      columns,
+      dataProviders,
+      deletedEventIds,
+      itemsPerPage,
+      itemsPerPageOptions,
+      kqlMode,
+      sort,
+      showCheckboxes,
+      showRowRenderers,
+    } = events;
+
+    return {
+      columns,
+      dataProviders,
+      deletedEventIds,
+      filters: getGlobalFiltersQuerySelector(state),
+      id,
+      isLive: input.policy.kind === 'interval',
+      itemsPerPage,
+      itemsPerPageOptions,
+      kqlMode,
+      query: getGlobalQuerySelector(state),
+      sort,
+      showCheckboxes,
+      showRowRenderers,
+    };
+  };
+  return mapStateToProps;
+};
+
+const mapDispatchToProps = {
+  createTimeline: timelineActions.createTimeline,
+  deleteEventQuery: inputsActions.deleteOneQuery,
+  updateItemsPerPage: timelineActions.updateItemsPerPage,
+  removeColumn: timelineActions.removeColumn,
+  upsertColumn: timelineActions.upsertColumn,
+};
+
+const connector = connect(makeMapStateToProps, mapDispatchToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export const StatefulEventsViewer = connector(
+  React.memo(
+    StatefulEventsViewerComponent,
+    (prevProps, nextProps) =>
+      prevProps.id === nextProps.id &&
+      deepEqual(prevProps.columns, nextProps.columns) &&
+      deepEqual(prevProps.dataProviders, nextProps.dataProviders) &&
+      prevProps.deletedEventIds === nextProps.deletedEventIds &&
+      prevProps.end === nextProps.end &&
+      deepEqual(prevProps.filters, nextProps.filters) &&
+      prevProps.isLive === nextProps.isLive &&
+      prevProps.itemsPerPage === nextProps.itemsPerPage &&
+      deepEqual(prevProps.itemsPerPageOptions, nextProps.itemsPerPageOptions) &&
+      prevProps.kqlMode === nextProps.kqlMode &&
+      deepEqual(prevProps.query, nextProps.query) &&
+      deepEqual(prevProps.sort, nextProps.sort) &&
+      prevProps.start === nextProps.start &&
+      deepEqual(prevProps.pageFilters, nextProps.pageFilters) &&
+      prevProps.showCheckboxes === nextProps.showCheckboxes &&
+      prevProps.showRowRenderers === nextProps.showRowRenderers &&
+      prevProps.start === nextProps.start &&
+      deepEqual(prevProps.timelineTypeContext, nextProps.timelineTypeContext) &&
+      prevProps.utilityBar === nextProps.utilityBar
+  )
+);
diff --git a/x-pack/plugins/siem/public/common/components/events_viewer/mock.ts b/x-pack/plugins/siem/public/common/components/events_viewer/mock.ts
new file mode 100644
index 00000000000000..bf95a58aec9818
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/events_viewer/mock.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 { noop } from 'lodash/fp';
+import { timelineQuery } from '../../../timelines/containers/index.gql_query';
+
+export const mockEventViewerResponse = [
+  {
+    request: {
+      query: timelineQuery,
+      fetchPolicy: 'network-only',
+      notifyOnNetworkStatusChange: true,
+      variables: {
+        fieldRequested: [
+          '@timestamp',
+          'message',
+          'host.name',
+          'event.module',
+          'event.dataset',
+          'event.action',
+          'user.name',
+          'source.ip',
+          'destination.ip',
+        ],
+        filterQuery:
+          '{"bool":{"must":[],"filter":[{"bool":{"filter":[{"bool":{"should":[{"range":{"@timestamp":{"gte":1566943856794}}}],"minimum_should_match":1}},{"bool":{"should":[{"range":{"@timestamp":{"lte":1566857456791}}}],"minimum_should_match":1}}]}}],"should":[],"must_not":[]}}',
+        sourceId: 'default',
+        pagination: { limit: 25, cursor: null, tiebreaker: null },
+        sortField: { sortFieldId: '@timestamp', direction: 'desc' },
+        defaultIndex: ['filebeat-*', 'auditbeat-*', 'packetbeat-*'],
+        inspect: false,
+      },
+    },
+    result: {
+      loading: false,
+      fetchMore: noop,
+      refetch: noop,
+      data: {
+        source: {
+          id: 'default',
+          Timeline: {
+            totalCount: 12,
+            pageInfo: {
+              endCursor: null,
+              hasNextPage: true,
+              __typename: 'PageInfo',
+            },
+            edges: [],
+            __typename: 'TimelineData',
+          },
+          __typename: 'Source',
+        },
+      },
+    },
+  },
+];
diff --git a/x-pack/plugins/siem/public/components/events_viewer/translations.ts b/x-pack/plugins/siem/public/common/components/events_viewer/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/events_viewer/translations.ts
rename to x-pack/plugins/siem/public/common/components/events_viewer/translations.ts
diff --git a/x-pack/plugins/siem/public/components/external_link_icon/index.test.tsx b/x-pack/plugins/siem/public/common/components/external_link_icon/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/external_link_icon/index.test.tsx
rename to x-pack/plugins/siem/public/common/components/external_link_icon/index.test.tsx
diff --git a/x-pack/plugins/siem/public/components/external_link_icon/index.tsx b/x-pack/plugins/siem/public/common/components/external_link_icon/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/external_link_icon/index.tsx
rename to x-pack/plugins/siem/public/common/components/external_link_icon/index.tsx
diff --git a/x-pack/plugins/siem/public/components/filters_global/__snapshots__/filters_global.test.tsx.snap b/x-pack/plugins/siem/public/common/components/filters_global/__snapshots__/filters_global.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/filters_global/__snapshots__/filters_global.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/filters_global/__snapshots__/filters_global.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/filters_global/filters_global.test.tsx b/x-pack/plugins/siem/public/common/components/filters_global/filters_global.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/filters_global/filters_global.test.tsx
rename to x-pack/plugins/siem/public/common/components/filters_global/filters_global.test.tsx
diff --git a/x-pack/plugins/siem/public/components/filters_global/filters_global.tsx b/x-pack/plugins/siem/public/common/components/filters_global/filters_global.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/filters_global/filters_global.tsx
rename to x-pack/plugins/siem/public/common/components/filters_global/filters_global.tsx
diff --git a/x-pack/plugins/siem/public/components/filters_global/index.tsx b/x-pack/plugins/siem/public/common/components/filters_global/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/filters_global/index.tsx
rename to x-pack/plugins/siem/public/common/components/filters_global/index.tsx
diff --git a/x-pack/plugins/siem/public/components/formatted_bytes/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/common/components/formatted_bytes/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/formatted_bytes/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/formatted_bytes/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/formatted_bytes/index.test.tsx b/x-pack/plugins/siem/public/common/components/formatted_bytes/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/formatted_bytes/index.test.tsx
rename to x-pack/plugins/siem/public/common/components/formatted_bytes/index.test.tsx
diff --git a/x-pack/plugins/siem/public/common/components/formatted_bytes/index.tsx b/x-pack/plugins/siem/public/common/components/formatted_bytes/index.tsx
new file mode 100644
index 00000000000000..5664af2aa3f5b4
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/formatted_bytes/index.tsx
@@ -0,0 +1,33 @@
+/*
+ * 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 numeral from '@elastic/numeral';
+
+import { DEFAULT_BYTES_FORMAT } from '../../../../common/constants';
+import { useUiSetting$ } from '../../lib/kibana';
+
+type Bytes = string | number;
+
+export const formatBytes = (value: Bytes, format: string) => {
+  return numeral(value).format(format);
+};
+
+export const useFormatBytes = () => {
+  const [bytesFormat] = useUiSetting$<string>(DEFAULT_BYTES_FORMAT);
+
+  return (value: Bytes) => formatBytes(value, bytesFormat);
+};
+
+export const PreferenceFormattedBytesComponent = ({ value }: { value: Bytes }) => (
+  <>{useFormatBytes()(value)}</>
+);
+
+PreferenceFormattedBytesComponent.displayName = 'PreferenceFormattedBytesComponent';
+
+export const PreferenceFormattedBytes = React.memo(PreferenceFormattedBytesComponent);
+
+PreferenceFormattedBytes.displayName = 'PreferenceFormattedBytes';
diff --git a/x-pack/plugins/siem/public/components/formatted_date/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/common/components/formatted_date/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/formatted_date/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/formatted_date/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/formatted_date/index.test.tsx b/x-pack/plugins/siem/public/common/components/formatted_date/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/formatted_date/index.test.tsx
rename to x-pack/plugins/siem/public/common/components/formatted_date/index.test.tsx
diff --git a/x-pack/plugins/siem/public/components/formatted_date/index.tsx b/x-pack/plugins/siem/public/common/components/formatted_date/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/formatted_date/index.tsx
rename to x-pack/plugins/siem/public/common/components/formatted_date/index.tsx
diff --git a/x-pack/plugins/siem/public/components/formatted_date/maybe_date.test.ts b/x-pack/plugins/siem/public/common/components/formatted_date/maybe_date.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/formatted_date/maybe_date.test.ts
rename to x-pack/plugins/siem/public/common/components/formatted_date/maybe_date.test.ts
diff --git a/x-pack/plugins/siem/public/components/formatted_date/maybe_date.ts b/x-pack/plugins/siem/public/common/components/formatted_date/maybe_date.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/formatted_date/maybe_date.ts
rename to x-pack/plugins/siem/public/common/components/formatted_date/maybe_date.ts
diff --git a/x-pack/plugins/siem/public/components/generic_downloader/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/common/components/generic_downloader/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/generic_downloader/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/generic_downloader/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/generic_downloader/index.test.tsx b/x-pack/plugins/siem/public/common/components/generic_downloader/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/generic_downloader/index.test.tsx
rename to x-pack/plugins/siem/public/common/components/generic_downloader/index.test.tsx
diff --git a/x-pack/plugins/siem/public/common/components/generic_downloader/index.tsx b/x-pack/plugins/siem/public/common/components/generic_downloader/index.tsx
new file mode 100644
index 00000000000000..2f68da0c18727b
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/generic_downloader/index.tsx
@@ -0,0 +1,107 @@
+/*
+ * 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, { useEffect, useRef } from 'react';
+import styled from 'styled-components';
+import { isFunction } from 'lodash/fp';
+import * as i18n from './translations';
+
+import { ExportDocumentsProps } from '../../../alerts/containers/detection_engine/rules';
+import { useStateToaster, errorToToaster } from '../toasters';
+
+const InvisibleAnchor = styled.a`
+  display: none;
+`;
+
+export type ExportSelectedData = ({
+  excludeExportDetails,
+  filename,
+  ids,
+  signal,
+}: ExportDocumentsProps) => Promise<Blob>;
+
+export interface GenericDownloaderProps {
+  filename: string;
+  ids?: string[];
+  exportSelectedData: ExportSelectedData;
+  onExportSuccess?: (exportCount: number) => void;
+  onExportFailure?: () => void;
+}
+
+/**
+ * Component for downloading Rules as an exported .ndjson file. Download will occur on each update to `rules` param
+ *
+ * @param filename of file to be downloaded
+ * @param payload Rule[]
+ *
+ */
+
+export const GenericDownloaderComponent = ({
+  exportSelectedData,
+  filename,
+  ids,
+  onExportSuccess,
+  onExportFailure,
+}: GenericDownloaderProps) => {
+  const anchorRef = useRef<HTMLAnchorElement>(null);
+  const [, dispatchToaster] = useStateToaster();
+
+  useEffect(() => {
+    let isSubscribed = true;
+    const abortCtrl = new AbortController();
+
+    const exportData = async () => {
+      if (anchorRef && anchorRef.current && ids != null && ids.length > 0) {
+        try {
+          const exportResponse = await exportSelectedData({
+            ids,
+            signal: abortCtrl.signal,
+          });
+
+          if (isSubscribed) {
+            // this is for supporting IE
+            if (isFunction(window.navigator.msSaveOrOpenBlob)) {
+              window.navigator.msSaveBlob(exportResponse);
+            } else {
+              const objectURL = window.URL.createObjectURL(exportResponse);
+              // These are safe-assignments as writes to anchorRef are isolated to exportData
+              anchorRef.current.href = objectURL; // eslint-disable-line require-atomic-updates
+              anchorRef.current.download = filename; // eslint-disable-line require-atomic-updates
+              anchorRef.current.click();
+              window.URL.revokeObjectURL(objectURL);
+            }
+
+            if (onExportSuccess != null) {
+              onExportSuccess(ids.length);
+            }
+          }
+        } catch (error) {
+          if (isSubscribed) {
+            if (onExportFailure != null) {
+              onExportFailure();
+            }
+            errorToToaster({ title: i18n.EXPORT_FAILURE, error, dispatchToaster });
+          }
+        }
+      }
+    };
+
+    exportData();
+
+    return () => {
+      isSubscribed = false;
+      abortCtrl.abort();
+    };
+  }, [ids]);
+
+  return <InvisibleAnchor ref={anchorRef} />;
+};
+
+GenericDownloaderComponent.displayName = 'GenericDownloaderComponent';
+
+export const GenericDownloader = React.memo(GenericDownloaderComponent);
+
+GenericDownloader.displayName = 'GenericDownloader';
diff --git a/x-pack/plugins/siem/public/components/generic_downloader/translations.ts b/x-pack/plugins/siem/public/common/components/generic_downloader/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/generic_downloader/translations.ts
rename to x-pack/plugins/siem/public/common/components/generic_downloader/translations.ts
diff --git a/x-pack/plugins/siem/public/components/header_global/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/common/components/header_global/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/header_global/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/header_global/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/header_global/index.test.tsx b/x-pack/plugins/siem/public/common/components/header_global/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/header_global/index.test.tsx
rename to x-pack/plugins/siem/public/common/components/header_global/index.test.tsx
diff --git a/x-pack/plugins/siem/public/common/components/header_global/index.tsx b/x-pack/plugins/siem/public/common/components/header_global/index.tsx
new file mode 100644
index 00000000000000..bc4bb80d8874de
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/header_global/index.tsx
@@ -0,0 +1,104 @@
+/*
+ * 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 { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLink } from '@elastic/eui';
+import { pickBy } from 'lodash/fp';
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+import { useLocation } from 'react-router-dom';
+import { gutterTimeline } from '../../lib/helpers';
+import { navTabs } from '../../../app/home/home_navigations';
+import { SiemPageName } from '../../../app/types';
+import { getOverviewUrl } from '../link_to';
+import { MlPopover } from '../ml_popover/ml_popover';
+import { SiemNavigation } from '../navigation';
+import * as i18n from './translations';
+import { indicesExistOrDataTemporarilyUnavailable, WithSource } from '../../containers/source';
+
+const Wrapper = styled.header`
+  ${({ theme }) => css`
+    background: ${theme.eui.euiColorEmptyShade};
+    border-bottom: ${theme.eui.euiBorderThin};
+    padding: ${theme.eui.paddingSizes.m} ${gutterTimeline} ${theme.eui.paddingSizes.m}
+      ${theme.eui.paddingSizes.l};
+  `}
+`;
+Wrapper.displayName = 'Wrapper';
+
+const FlexItem = styled(EuiFlexItem)`
+  min-width: 0;
+`;
+FlexItem.displayName = 'FlexItem';
+
+interface HeaderGlobalProps {
+  hideDetectionEngine?: boolean;
+}
+export const HeaderGlobal = React.memo<HeaderGlobalProps>(({ hideDetectionEngine = false }) => {
+  const currentLocation = useLocation();
+
+  return (
+    <Wrapper className="siemHeaderGlobal">
+      <EuiFlexGroup alignItems="center" justifyContent="spaceBetween" wrap>
+        <WithSource sourceId="default">
+          {({ indicesExist }) => (
+            <>
+              <FlexItem>
+                <EuiFlexGroup alignItems="center" responsive={false}>
+                  <FlexItem grow={false}>
+                    <EuiLink href={getOverviewUrl()}>
+                      <EuiIcon aria-label={i18n.SIEM} type="securityAnalyticsApp" size="l" />
+                    </EuiLink>
+                  </FlexItem>
+
+                  <FlexItem component="nav">
+                    {indicesExistOrDataTemporarilyUnavailable(indicesExist) ? (
+                      <SiemNavigation
+                        display="condensed"
+                        navTabs={
+                          hideDetectionEngine
+                            ? pickBy((_, key) => key !== SiemPageName.detections, navTabs)
+                            : navTabs
+                        }
+                      />
+                    ) : (
+                      <SiemNavigation
+                        display="condensed"
+                        navTabs={pickBy((_, key) => key === SiemPageName.overview, navTabs)}
+                      />
+                    )}
+                  </FlexItem>
+                </EuiFlexGroup>
+              </FlexItem>
+
+              <FlexItem grow={false}>
+                <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false} wrap>
+                  {indicesExistOrDataTemporarilyUnavailable(indicesExist) &&
+                    currentLocation.pathname.includes(`/${SiemPageName.detections}/`) && (
+                      <FlexItem grow={false}>
+                        <MlPopover />
+                      </FlexItem>
+                    )}
+
+                  <FlexItem grow={false}>
+                    <EuiButtonEmpty
+                      data-test-subj="add-data"
+                      href="kibana#home/tutorial_directory/siem"
+                      iconType="plusInCircle"
+                    >
+                      {i18n.BUTTON_ADD_DATA}
+                    </EuiButtonEmpty>
+                  </FlexItem>
+                </EuiFlexGroup>
+              </FlexItem>
+            </>
+          )}
+        </WithSource>
+      </EuiFlexGroup>
+    </Wrapper>
+  );
+});
+HeaderGlobal.displayName = 'HeaderGlobal';
diff --git a/x-pack/plugins/siem/public/components/header_global/translations.ts b/x-pack/plugins/siem/public/common/components/header_global/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/header_global/translations.ts
rename to x-pack/plugins/siem/public/common/components/header_global/translations.ts
diff --git a/x-pack/plugins/siem/public/components/header_page/__snapshots__/editable_title.test.tsx.snap b/x-pack/plugins/siem/public/common/components/header_page/__snapshots__/editable_title.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/header_page/__snapshots__/editable_title.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/header_page/__snapshots__/editable_title.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/header_page/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/common/components/header_page/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/header_page/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/header_page/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/header_page/__snapshots__/title.test.tsx.snap b/x-pack/plugins/siem/public/common/components/header_page/__snapshots__/title.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/header_page/__snapshots__/title.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/header_page/__snapshots__/title.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/header_page/editable_title.test.tsx b/x-pack/plugins/siem/public/common/components/header_page/editable_title.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/header_page/editable_title.test.tsx
rename to x-pack/plugins/siem/public/common/components/header_page/editable_title.test.tsx
diff --git a/x-pack/plugins/siem/public/components/header_page/editable_title.tsx b/x-pack/plugins/siem/public/common/components/header_page/editable_title.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/header_page/editable_title.tsx
rename to x-pack/plugins/siem/public/common/components/header_page/editable_title.tsx
diff --git a/x-pack/plugins/siem/public/components/header_page/index.test.tsx b/x-pack/plugins/siem/public/common/components/header_page/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/header_page/index.test.tsx
rename to x-pack/plugins/siem/public/common/components/header_page/index.test.tsx
diff --git a/x-pack/plugins/siem/public/components/header_page/index.tsx b/x-pack/plugins/siem/public/common/components/header_page/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/header_page/index.tsx
rename to x-pack/plugins/siem/public/common/components/header_page/index.tsx
diff --git a/x-pack/plugins/siem/public/components/header_page/title.test.tsx b/x-pack/plugins/siem/public/common/components/header_page/title.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/header_page/title.test.tsx
rename to x-pack/plugins/siem/public/common/components/header_page/title.test.tsx
diff --git a/x-pack/plugins/siem/public/components/header_page/title.tsx b/x-pack/plugins/siem/public/common/components/header_page/title.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/header_page/title.tsx
rename to x-pack/plugins/siem/public/common/components/header_page/title.tsx
diff --git a/x-pack/plugins/siem/public/components/header_page/translations.ts b/x-pack/plugins/siem/public/common/components/header_page/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/header_page/translations.ts
rename to x-pack/plugins/siem/public/common/components/header_page/translations.ts
diff --git a/x-pack/plugins/siem/public/components/header_page/types.ts b/x-pack/plugins/siem/public/common/components/header_page/types.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/header_page/types.ts
rename to x-pack/plugins/siem/public/common/components/header_page/types.ts
diff --git a/x-pack/plugins/siem/public/components/header_section/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/common/components/header_section/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/header_section/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/header_section/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/header_section/index.test.tsx b/x-pack/plugins/siem/public/common/components/header_section/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/header_section/index.test.tsx
rename to x-pack/plugins/siem/public/common/components/header_section/index.test.tsx
diff --git a/x-pack/plugins/siem/public/components/header_section/index.tsx b/x-pack/plugins/siem/public/common/components/header_section/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/header_section/index.tsx
rename to x-pack/plugins/siem/public/common/components/header_section/index.tsx
diff --git a/x-pack/plugins/siem/public/components/help_menu/index.tsx b/x-pack/plugins/siem/public/common/components/help_menu/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/help_menu/index.tsx
rename to x-pack/plugins/siem/public/common/components/help_menu/index.tsx
diff --git a/x-pack/plugins/siem/public/components/import_data_modal/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/common/components/import_data_modal/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/import_data_modal/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/import_data_modal/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/import_data_modal/index.test.tsx b/x-pack/plugins/siem/public/common/components/import_data_modal/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/import_data_modal/index.test.tsx
rename to x-pack/plugins/siem/public/common/components/import_data_modal/index.test.tsx
diff --git a/x-pack/plugins/siem/public/common/components/import_data_modal/index.tsx b/x-pack/plugins/siem/public/common/components/import_data_modal/index.tsx
new file mode 100644
index 00000000000000..45368d1fefc539
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/import_data_modal/index.tsx
@@ -0,0 +1,176 @@
+/*
+ * 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 {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiCheckbox,
+  // @ts-ignore no-exported-member
+  EuiFilePicker,
+  EuiModal,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiOverlayMask,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+import React, { useCallback, useState } from 'react';
+
+import {
+  ImportDataResponse,
+  ImportDataProps,
+} from '../../../alerts/containers/detection_engine/rules';
+import {
+  displayErrorToast,
+  displaySuccessToast,
+  useStateToaster,
+  errorToToaster,
+} from '../toasters';
+import * as i18n from './translations';
+
+interface ImportDataModalProps {
+  checkBoxLabel: string;
+  closeModal: () => void;
+  description: string;
+  errorMessage: string;
+  failedDetailed: (id: string, statusCode: number, message: string) => string;
+  importComplete: () => void;
+  importData: (arg: ImportDataProps) => Promise<ImportDataResponse>;
+  showCheckBox: boolean;
+  showModal: boolean;
+  submitBtnText: string;
+  subtitle: string;
+  successMessage: (totalCount: number) => string;
+  title: string;
+}
+
+/**
+ * Modal component for importing Rules from a json file
+ */
+export const ImportDataModalComponent = ({
+  checkBoxLabel,
+  closeModal,
+  description,
+  errorMessage,
+  failedDetailed,
+  importComplete,
+  importData,
+  showCheckBox = true,
+  showModal,
+  submitBtnText,
+  subtitle,
+  successMessage,
+  title,
+}: ImportDataModalProps) => {
+  const [selectedFiles, setSelectedFiles] = useState<FileList | null>(null);
+  const [isImporting, setIsImporting] = useState(false);
+  const [overwrite, setOverwrite] = useState(false);
+  const [, dispatchToaster] = useStateToaster();
+
+  const cleanupAndCloseModal = useCallback(() => {
+    setIsImporting(false);
+    setSelectedFiles(null);
+    closeModal();
+  }, [setIsImporting, setSelectedFiles, closeModal]);
+
+  const importDataCallback = useCallback(async () => {
+    if (selectedFiles != null) {
+      setIsImporting(true);
+      const abortCtrl = new AbortController();
+
+      try {
+        const importResponse = await importData({
+          fileToImport: selectedFiles[0],
+          overwrite,
+          signal: abortCtrl.signal,
+        });
+
+        // TODO: Improve error toast details for better debugging failed imports
+        // e.g. When success == true && success_count === 0 that means no rules were overwritten, etc
+        if (importResponse.success) {
+          displaySuccessToast(successMessage(importResponse.success_count), dispatchToaster);
+        }
+        if (importResponse.errors.length > 0) {
+          const formattedErrors = importResponse.errors.map(e =>
+            failedDetailed(e.rule_id, e.error.status_code, e.error.message)
+          );
+          displayErrorToast(errorMessage, formattedErrors, dispatchToaster);
+        }
+
+        importComplete();
+        cleanupAndCloseModal();
+      } catch (error) {
+        cleanupAndCloseModal();
+        errorToToaster({ title: errorMessage, error, dispatchToaster });
+      }
+    }
+  }, [selectedFiles, overwrite]);
+
+  const handleCloseModal = useCallback(() => {
+    setSelectedFiles(null);
+    closeModal();
+  }, [closeModal]);
+
+  return (
+    <>
+      {showModal && (
+        <EuiOverlayMask>
+          <EuiModal onClose={closeModal} maxWidth={'750px'}>
+            <EuiModalHeader>
+              <EuiModalHeaderTitle>{title}</EuiModalHeaderTitle>
+            </EuiModalHeader>
+
+            <EuiModalBody>
+              <EuiText size="s">
+                <h4>{description}</h4>
+              </EuiText>
+
+              <EuiSpacer size="s" />
+              <EuiFilePicker
+                id="rule-file-picker"
+                initialPromptText={subtitle}
+                onChange={(files: FileList | null) => {
+                  setSelectedFiles(files && files.length > 0 ? files : null);
+                }}
+                display={'large'}
+                fullWidth={true}
+                isLoading={isImporting}
+              />
+              <EuiSpacer size="s" />
+              {showCheckBox && (
+                <EuiCheckbox
+                  id="import-data-modal-checkbox-label"
+                  label={checkBoxLabel}
+                  checked={overwrite}
+                  onChange={() => setOverwrite(!overwrite)}
+                />
+              )}
+            </EuiModalBody>
+
+            <EuiModalFooter>
+              <EuiButtonEmpty onClick={handleCloseModal}>{i18n.CANCEL_BUTTON}</EuiButtonEmpty>
+              <EuiButton
+                onClick={importDataCallback}
+                disabled={selectedFiles == null || isImporting}
+                fill
+              >
+                {submitBtnText}
+              </EuiButton>
+            </EuiModalFooter>
+          </EuiModal>
+        </EuiOverlayMask>
+      )}
+    </>
+  );
+};
+
+ImportDataModalComponent.displayName = 'ImportDataModalComponent';
+
+export const ImportDataModal = React.memo(ImportDataModalComponent);
+
+ImportDataModal.displayName = 'ImportDataModal';
diff --git a/x-pack/plugins/siem/public/components/import_data_modal/translations.ts b/x-pack/plugins/siem/public/common/components/import_data_modal/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/import_data_modal/translations.ts
rename to x-pack/plugins/siem/public/common/components/import_data_modal/translations.ts
diff --git a/x-pack/plugins/siem/public/common/components/inspect/index.test.tsx b/x-pack/plugins/siem/public/common/components/inspect/index.test.tsx
new file mode 100644
index 00000000000000..a4ef6f8c795709
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/inspect/index.test.tsx
@@ -0,0 +1,239 @@
+/*
+ * 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 euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
+import { mount } from 'enzyme';
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+
+import {
+  TestProviderWithoutDragAndDrop,
+  mockGlobalState,
+  apolloClientObservable,
+  SUB_PLUGINS_REDUCER,
+} from '../../mock';
+import { createStore, State } from '../../store';
+import { UpdateQueryParams, upsertQuery } from '../../store/inputs/helpers';
+
+import { InspectButton, InspectButtonContainer, BUTTON_CLASS } from '.';
+import { cloneDeep } from 'lodash/fp';
+
+describe('Inspect Button', () => {
+  const theme = () => ({ eui: euiDarkVars, darkMode: true });
+  const refetch = jest.fn();
+  const state: State = mockGlobalState;
+  const newQuery: UpdateQueryParams = {
+    inputId: 'global',
+    id: 'myQuery',
+    inspect: null,
+    loading: false,
+    refetch,
+    state: state.inputs,
+  };
+
+  let store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable);
+
+  describe('Render', () => {
+    beforeEach(() => {
+      const myState = cloneDeep(state);
+      myState.inputs = upsertQuery(newQuery);
+      store = createStore(myState, SUB_PLUGINS_REDUCER, apolloClientObservable);
+    });
+    test('Eui Empty Button', () => {
+      const wrapper = mount(
+        <TestProviderWithoutDragAndDrop store={store}>
+          <InspectButton queryId={newQuery.id} inputId="timeline" title="My title" />
+        </TestProviderWithoutDragAndDrop>
+      );
+      expect(
+        wrapper
+          .find('button[data-test-subj="inspect-empty-button"]')
+          .first()
+          .exists()
+      ).toBe(true);
+    });
+
+    test('it does NOT render the Eui Empty Button when timeline is timeline and compact is true', () => {
+      const wrapper = mount(
+        <TestProviderWithoutDragAndDrop store={store}>
+          <InspectButton compact={true} queryId={newQuery.id} inputId="timeline" title="My title" />
+        </TestProviderWithoutDragAndDrop>
+      );
+      expect(
+        wrapper
+          .find('button[data-test-subj="inspect-empty-button"]')
+          .first()
+          .exists()
+      ).toBe(false);
+    });
+
+    test('Eui Icon Button', () => {
+      const wrapper = mount(
+        <TestProviderWithoutDragAndDrop store={store}>
+          <InspectButton queryId={newQuery.id} title="My title" />
+        </TestProviderWithoutDragAndDrop>
+      );
+      expect(
+        wrapper
+          .find('button[data-test-subj="inspect-icon-button"]')
+          .first()
+          .exists()
+      ).toBe(true);
+    });
+
+    test('renders the Icon Button when inputId does NOT equal global, but compact is true', () => {
+      const wrapper = mount(
+        <TestProviderWithoutDragAndDrop store={store}>
+          <InspectButton compact={true} inputId="timeline" queryId={newQuery.id} title="My title" />
+        </TestProviderWithoutDragAndDrop>
+      );
+      expect(
+        wrapper
+          .find('button[data-test-subj="inspect-icon-button"]')
+          .first()
+          .exists()
+      ).toBe(true);
+    });
+
+    test('Eui Empty Button disabled', () => {
+      const wrapper = mount(
+        <TestProviderWithoutDragAndDrop store={store}>
+          <InspectButton isDisabled={true} queryId={newQuery.id} title="My title" />
+        </TestProviderWithoutDragAndDrop>
+      );
+      expect(wrapper.find('.euiButtonIcon').get(0).props.disabled).toBe(true);
+    });
+
+    test('Eui Icon Button disabled', () => {
+      const wrapper = mount(
+        <TestProviderWithoutDragAndDrop store={store}>
+          <InspectButton isDisabled={true} queryId={newQuery.id} title="My title" />
+        </TestProviderWithoutDragAndDrop>
+      );
+      expect(wrapper.find('.euiButtonIcon').get(0).props.disabled).toBe(true);
+    });
+
+    describe('InspectButtonContainer', () => {
+      test('it renders a transparent inspect button by default', async () => {
+        const wrapper = mount(
+          <TestProviderWithoutDragAndDrop store={store}>
+            <InspectButtonContainer>
+              <InspectButton queryId={newQuery.id} title="My title" />
+            </InspectButtonContainer>
+          </TestProviderWithoutDragAndDrop>
+        );
+
+        expect(wrapper.find(`InspectButtonContainer`)).toHaveStyleRule('opacity', '0', {
+          modifier: `.${BUTTON_CLASS}`,
+        });
+      });
+
+      test('it renders an opaque inspect button when it has mouse focus', async () => {
+        const wrapper = mount(
+          <TestProviderWithoutDragAndDrop store={store}>
+            <InspectButtonContainer>
+              <InspectButton queryId={newQuery.id} title="My title" />
+            </InspectButtonContainer>
+          </TestProviderWithoutDragAndDrop>
+        );
+
+        expect(wrapper.find(`InspectButtonContainer`)).toHaveStyleRule('opacity', '1', {
+          modifier: `:hover .${BUTTON_CLASS}`,
+        });
+      });
+    });
+  });
+
+  describe('Modal Inspect - happy path', () => {
+    beforeEach(() => {
+      const myState = cloneDeep(state);
+      const myQuery = cloneDeep(newQuery);
+      myQuery.inspect = {
+        dsl: ['my dsl'],
+        response: ['my response'],
+      };
+      myState.inputs = upsertQuery(myQuery);
+      store = createStore(myState, SUB_PLUGINS_REDUCER, apolloClientObservable);
+    });
+    test('Open Inspect Modal', () => {
+      const wrapper = mount(
+        <ThemeProvider theme={theme}>
+          <TestProviderWithoutDragAndDrop store={store}>
+            <InspectButton queryId={newQuery.id} title="My title" />
+          </TestProviderWithoutDragAndDrop>
+        </ThemeProvider>
+      );
+      wrapper
+        .find('button[data-test-subj="inspect-icon-button"]')
+        .first()
+        .simulate('click');
+
+      wrapper.update();
+
+      expect(store.getState().inputs.global.queries[0].isInspected).toBe(true);
+      expect(
+        wrapper
+          .find('button[data-test-subj="modal-inspect-close"]')
+          .first()
+          .exists()
+      ).toBe(true);
+    });
+
+    test('Close Inspect Modal', () => {
+      const wrapper = mount(
+        <ThemeProvider theme={theme}>
+          <TestProviderWithoutDragAndDrop store={store}>
+            <InspectButton queryId={newQuery.id} title="My title" />
+          </TestProviderWithoutDragAndDrop>
+        </ThemeProvider>
+      );
+      wrapper
+        .find('button[data-test-subj="inspect-icon-button"]')
+        .first()
+        .simulate('click');
+
+      wrapper.update();
+
+      wrapper
+        .find('button[data-test-subj="modal-inspect-close"]')
+        .first()
+        .simulate('click');
+
+      wrapper.update();
+
+      expect(store.getState().inputs.global.queries[0].isInspected).toBe(false);
+      expect(
+        wrapper
+          .find('button[data-test-subj="modal-inspect-close"]')
+          .first()
+          .exists()
+      ).toBe(false);
+    });
+
+    test('Do not Open Inspect Modal if it is loading', () => {
+      const wrapper = mount(
+        <TestProviderWithoutDragAndDrop store={store}>
+          <InspectButton queryId={newQuery.id} title="My title" />
+        </TestProviderWithoutDragAndDrop>
+      );
+      store.getState().inputs.global.queries[0].loading = true;
+      wrapper
+        .find('button[data-test-subj="inspect-icon-button"]')
+        .first()
+        .simulate('click');
+
+      wrapper.update();
+
+      expect(store.getState().inputs.global.queries[0].isInspected).toBe(true);
+      expect(
+        wrapper
+          .find('button[data-test-subj="modal-inspect-close"]')
+          .first()
+          .exists()
+      ).toBe(false);
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/components/inspect/index.tsx b/x-pack/plugins/siem/public/common/components/inspect/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/inspect/index.tsx
rename to x-pack/plugins/siem/public/common/components/inspect/index.tsx
diff --git a/x-pack/plugins/siem/public/components/inspect/modal.test.tsx b/x-pack/plugins/siem/public/common/components/inspect/modal.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/inspect/modal.test.tsx
rename to x-pack/plugins/siem/public/common/components/inspect/modal.test.tsx
diff --git a/x-pack/plugins/siem/public/components/inspect/modal.tsx b/x-pack/plugins/siem/public/common/components/inspect/modal.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/inspect/modal.tsx
rename to x-pack/plugins/siem/public/common/components/inspect/modal.tsx
diff --git a/x-pack/plugins/siem/public/components/inspect/translations.ts b/x-pack/plugins/siem/public/common/components/inspect/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/inspect/translations.ts
rename to x-pack/plugins/siem/public/common/components/inspect/translations.ts
diff --git a/x-pack/plugins/siem/public/common/components/last_event_time/index.test.tsx b/x-pack/plugins/siem/public/common/components/last_event_time/index.test.tsx
new file mode 100644
index 00000000000000..2f0060c91668bb
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/last_event_time/index.test.tsx
@@ -0,0 +1,86 @@
+/*
+ * 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 { getEmptyValue } from '../empty_value';
+import { LastEventIndexKey } from '../../../graphql/types';
+import { mockLastEventTimeQuery } from '../../containers/events/last_event_time/mock';
+
+import { useMountAppended } from '../../utils/use_mount_appended';
+import { useLastEventTimeQuery } from '../../containers/events/last_event_time';
+import { TestProviders } from '../../mock';
+
+import { LastEventTime } from '.';
+
+const mockUseLastEventTimeQuery: jest.Mock = useLastEventTimeQuery as jest.Mock;
+jest.mock('../../containers/events/last_event_time', () => ({
+  useLastEventTimeQuery: jest.fn(),
+}));
+
+describe('Last Event Time Stat', () => {
+  const mount = useMountAppended();
+
+  beforeEach(() => {
+    mockUseLastEventTimeQuery.mockReset();
+  });
+
+  test('Loading', async () => {
+    mockUseLastEventTimeQuery.mockImplementation(() => ({
+      loading: true,
+      lastSeen: null,
+      errorMessage: null,
+    }));
+    const wrapper = mount(
+      <TestProviders>
+        <LastEventTime indexKey={LastEventIndexKey.hosts} />
+      </TestProviders>
+    );
+    expect(wrapper.html()).toBe(
+      '<span class="euiLoadingSpinner euiLoadingSpinner--medium"></span>'
+    );
+  });
+  test('Last seen', async () => {
+    mockUseLastEventTimeQuery.mockImplementation(() => ({
+      loading: false,
+      lastSeen: mockLastEventTimeQuery[0].result.data!.source.LastEventTime.lastSeen,
+      errorMessage: mockLastEventTimeQuery[0].result.data!.source.LastEventTime.errorMessage,
+    }));
+    const wrapper = mount(
+      <TestProviders>
+        <LastEventTime indexKey={LastEventIndexKey.hosts} />
+      </TestProviders>
+    );
+    expect(wrapper.html()).toBe('Last event: <span class="euiToolTipAnchor">12 minutes ago</span>');
+  });
+  test('Bad date time string', async () => {
+    mockUseLastEventTimeQuery.mockImplementation(() => ({
+      loading: false,
+      lastSeen: 'something-invalid',
+      errorMessage: mockLastEventTimeQuery[0].result.data!.source.LastEventTime.errorMessage,
+    }));
+    const wrapper = mount(
+      <TestProviders>
+        <LastEventTime indexKey={LastEventIndexKey.hosts} />
+      </TestProviders>
+    );
+
+    expect(wrapper.html()).toBe('something-invalid');
+  });
+  test('Null time string', async () => {
+    mockUseLastEventTimeQuery.mockImplementation(() => ({
+      loading: false,
+      lastSeen: null,
+      errorMessage: mockLastEventTimeQuery[0].result.data!.source.LastEventTime.errorMessage,
+    }));
+    const wrapper = mount(
+      <TestProviders>
+        <LastEventTime indexKey={LastEventIndexKey.hosts} />
+      </TestProviders>
+    );
+    expect(wrapper.html()).toContain(getEmptyValue());
+  });
+});
diff --git a/x-pack/plugins/siem/public/common/components/last_event_time/index.tsx b/x-pack/plugins/siem/public/common/components/last_event_time/index.tsx
new file mode 100644
index 00000000000000..1c988ed989e86a
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/last_event_time/index.tsx
@@ -0,0 +1,63 @@
+/*
+ * 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 { EuiIcon, EuiLoadingSpinner, EuiToolTip } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import React, { memo } from 'react';
+
+import { LastEventIndexKey } from '../../../graphql/types';
+import { useLastEventTimeQuery } from '../../containers/events/last_event_time';
+import { getEmptyTagValue } from '../empty_value';
+import { FormattedRelativePreferenceDate } from '../formatted_date';
+
+export interface LastEventTimeProps {
+  hostName?: string;
+  indexKey: LastEventIndexKey;
+  ip?: string;
+}
+
+export const LastEventTime = memo<LastEventTimeProps>(({ hostName, indexKey, ip }) => {
+  const { loading, lastSeen, errorMessage } = useLastEventTimeQuery(
+    indexKey,
+    { hostName, ip },
+    'default'
+  );
+
+  if (errorMessage != null) {
+    return (
+      <EuiToolTip
+        position="top"
+        content={errorMessage}
+        data-test-subj="last_event_time_error"
+        aria-label="last_event_time_error"
+        id={`last_event_time_error-${indexKey}`}
+      >
+        <EuiIcon aria-describedby={`last_event_time_error-${indexKey}`} type="alert" />
+      </EuiToolTip>
+    );
+  }
+
+  return (
+    <>
+      {loading && <EuiLoadingSpinner size="m" />}
+      {!loading && lastSeen != null && new Date(lastSeen).toString() === 'Invalid Date'
+        ? lastSeen
+        : !loading &&
+          lastSeen != null && (
+            <FormattedMessage
+              id="xpack.siem.headerPage.pageSubtitle"
+              defaultMessage="Last event: {beat}"
+              values={{
+                beat: <FormattedRelativePreferenceDate value={lastSeen} />,
+              }}
+            />
+          )}
+      {!loading && lastSeen == null && getEmptyTagValue()}
+    </>
+  );
+});
+
+LastEventTime.displayName = 'LastEventTime';
diff --git a/x-pack/plugins/siem/public/components/link_icon/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/common/components/link_icon/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/link_icon/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/link_icon/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/link_icon/index.test.tsx b/x-pack/plugins/siem/public/common/components/link_icon/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/link_icon/index.test.tsx
rename to x-pack/plugins/siem/public/common/components/link_icon/index.test.tsx
diff --git a/x-pack/plugins/siem/public/components/link_icon/index.tsx b/x-pack/plugins/siem/public/common/components/link_icon/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/link_icon/index.tsx
rename to x-pack/plugins/siem/public/common/components/link_icon/index.tsx
diff --git a/x-pack/plugins/siem/public/components/link_to/helpers.test.ts b/x-pack/plugins/siem/public/common/components/link_to/helpers.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/link_to/helpers.test.ts
rename to x-pack/plugins/siem/public/common/components/link_to/helpers.test.ts
diff --git a/x-pack/plugins/siem/public/components/link_to/helpers.ts b/x-pack/plugins/siem/public/common/components/link_to/helpers.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/link_to/helpers.ts
rename to x-pack/plugins/siem/public/common/components/link_to/helpers.ts
diff --git a/x-pack/plugins/siem/public/components/link_to/index.ts b/x-pack/plugins/siem/public/common/components/link_to/index.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/link_to/index.ts
rename to x-pack/plugins/siem/public/common/components/link_to/index.ts
diff --git a/x-pack/plugins/siem/public/components/link_to/link_to.tsx b/x-pack/plugins/siem/public/common/components/link_to/link_to.tsx
similarity index 94%
rename from x-pack/plugins/siem/public/components/link_to/link_to.tsx
rename to x-pack/plugins/siem/public/common/components/link_to/link_to.tsx
index d3bf2e34b435b7..77636af8bc4a49 100644
--- a/x-pack/plugins/siem/public/components/link_to/link_to.tsx
+++ b/x-pack/plugins/siem/public/common/components/link_to/link_to.tsx
@@ -7,8 +7,8 @@
 import React from 'react';
 import { match as RouteMatch, Redirect, Route, Switch } from 'react-router-dom';
 
-import { SiemPageName } from '../../pages/home/types';
-import { HostsTableType } from '../../store/hosts/model';
+import { SiemPageName } from '../../../app/types';
+import { HostsTableType } from '../../../hosts/store/model';
 import {
   RedirectToCreateRulePage,
   RedirectToDetectionEnginePage,
@@ -25,8 +25,8 @@ import {
   RedirectToCreatePage,
   RedirectToConfigureCasesPage,
 } from './redirect_to_case';
-import { DetectionEngineTab } from '../../pages/detection_engine/types';
-import { TimelineType } from '../../../common/types/timeline';
+import { DetectionEngineTab } from '../../../alerts/pages/detection_engine/types';
+import { TimelineType } from '../../../../common/types/timeline';
 
 interface LinkToPageProps {
   match: RouteMatch<{}>;
diff --git a/x-pack/plugins/siem/public/components/link_to/redirect_to_case.tsx b/x-pack/plugins/siem/public/common/components/link_to/redirect_to_case.tsx
similarity index 96%
rename from x-pack/plugins/siem/public/components/link_to/redirect_to_case.tsx
rename to x-pack/plugins/siem/public/common/components/link_to/redirect_to_case.tsx
index 6ec15b55ba83dc..e0c03519c6cbea 100644
--- a/x-pack/plugins/siem/public/components/link_to/redirect_to_case.tsx
+++ b/x-pack/plugins/siem/public/common/components/link_to/redirect_to_case.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { appendSearch } from './helpers';
 import { RedirectWrapper } from './redirect_wrapper';
-import { SiemPageName } from '../../pages/home/types';
+import { SiemPageName } from '../../../app/types';
 
 export type CaseComponentProps = RouteComponentProps<{
   detailName: string;
diff --git a/x-pack/plugins/siem/public/components/link_to/redirect_to_detection_engine.tsx b/x-pack/plugins/siem/public/common/components/link_to/redirect_to_detection_engine.tsx
similarity index 97%
rename from x-pack/plugins/siem/public/components/link_to/redirect_to_detection_engine.tsx
rename to x-pack/plugins/siem/public/common/components/link_to/redirect_to_detection_engine.tsx
index 18111aa93a27a8..fc5aef966f228c 100644
--- a/x-pack/plugins/siem/public/components/link_to/redirect_to_detection_engine.tsx
+++ b/x-pack/plugins/siem/public/common/components/link_to/redirect_to_detection_engine.tsx
@@ -7,7 +7,7 @@
 import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 
-import { DetectionEngineTab } from '../../pages/detection_engine/types';
+import { DetectionEngineTab } from '../../../alerts/pages/detection_engine/types';
 import { appendSearch } from './helpers';
 import { RedirectWrapper } from './redirect_wrapper';
 
diff --git a/x-pack/plugins/siem/public/components/link_to/redirect_to_hosts.tsx b/x-pack/plugins/siem/public/common/components/link_to/redirect_to_hosts.tsx
similarity index 94%
rename from x-pack/plugins/siem/public/components/link_to/redirect_to_hosts.tsx
rename to x-pack/plugins/siem/public/common/components/link_to/redirect_to_hosts.tsx
index 746a959cc996a1..0cfe8e655e255d 100644
--- a/x-pack/plugins/siem/public/components/link_to/redirect_to_hosts.tsx
+++ b/x-pack/plugins/siem/public/common/components/link_to/redirect_to_hosts.tsx
@@ -7,8 +7,8 @@
 import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 
-import { HostsTableType } from '../../store/hosts/model';
-import { SiemPageName } from '../../pages/home/types';
+import { HostsTableType } from '../../../hosts/store/model';
+import { SiemPageName } from '../../../app/types';
 
 import { appendSearch } from './helpers';
 import { RedirectWrapper } from './redirect_wrapper';
diff --git a/x-pack/plugins/siem/public/components/link_to/redirect_to_network.tsx b/x-pack/plugins/siem/public/common/components/link_to/redirect_to_network.tsx
similarity index 90%
rename from x-pack/plugins/siem/public/components/link_to/redirect_to_network.tsx
rename to x-pack/plugins/siem/public/common/components/link_to/redirect_to_network.tsx
index 71925edd5c0864..d72bacf511faa9 100644
--- a/x-pack/plugins/siem/public/components/link_to/redirect_to_network.tsx
+++ b/x-pack/plugins/siem/public/common/components/link_to/redirect_to_network.tsx
@@ -7,8 +7,8 @@
 import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 
-import { SiemPageName } from '../../pages/home/types';
-import { FlowTarget, FlowTargetSourceDest } from '../../graphql/types';
+import { SiemPageName } from '../../../app/types';
+import { FlowTarget, FlowTargetSourceDest } from '../../../graphql/types';
 
 import { appendSearch } from './helpers';
 import { RedirectWrapper } from './redirect_wrapper';
diff --git a/x-pack/plugins/siem/public/components/link_to/redirect_to_overview.tsx b/x-pack/plugins/siem/public/common/components/link_to/redirect_to_overview.tsx
similarity index 92%
rename from x-pack/plugins/siem/public/components/link_to/redirect_to_overview.tsx
rename to x-pack/plugins/siem/public/common/components/link_to/redirect_to_overview.tsx
index e0789ac9e2558b..2043b820e6966c 100644
--- a/x-pack/plugins/siem/public/components/link_to/redirect_to_overview.tsx
+++ b/x-pack/plugins/siem/public/common/components/link_to/redirect_to_overview.tsx
@@ -7,7 +7,7 @@
 import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { RedirectWrapper } from './redirect_wrapper';
-import { SiemPageName } from '../../pages/home/types';
+import { SiemPageName } from '../../../app/types';
 
 export type OverviewComponentProps = RouteComponentProps<{
   search: string;
diff --git a/x-pack/plugins/siem/public/components/link_to/redirect_to_timelines.tsx b/x-pack/plugins/siem/public/common/components/link_to/redirect_to_timelines.tsx
similarity index 89%
rename from x-pack/plugins/siem/public/components/link_to/redirect_to_timelines.tsx
rename to x-pack/plugins/siem/public/common/components/link_to/redirect_to_timelines.tsx
index 9c704a7f70d293..3562153bea646e 100644
--- a/x-pack/plugins/siem/public/components/link_to/redirect_to_timelines.tsx
+++ b/x-pack/plugins/siem/public/common/components/link_to/redirect_to_timelines.tsx
@@ -7,11 +7,11 @@
 import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 
-import { SiemPageName } from '../../pages/home/types';
+import { SiemPageName } from '../../../app/types';
 
 import { appendSearch } from './helpers';
 import { RedirectWrapper } from './redirect_wrapper';
-import { TimelineTypeLiteral, TimelineType } from '../../../common/types/timeline';
+import { TimelineTypeLiteral, TimelineType } from '../../../../common/types/timeline';
 
 export type TimelineComponentProps = RouteComponentProps<{
   tabName: TimelineTypeLiteral;
diff --git a/x-pack/plugins/siem/public/components/link_to/redirect_wrapper.tsx b/x-pack/plugins/siem/public/common/components/link_to/redirect_wrapper.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/link_to/redirect_wrapper.tsx
rename to x-pack/plugins/siem/public/common/components/link_to/redirect_wrapper.tsx
diff --git a/x-pack/plugins/siem/public/common/components/links/index.test.tsx b/x-pack/plugins/siem/public/common/components/links/index.test.tsx
new file mode 100644
index 00000000000000..9eff86bffb369a
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/links/index.test.tsx
@@ -0,0 +1,563 @@
+/*
+ * 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 { mount, shallow, ShallowWrapper } from 'enzyme';
+import React from 'react';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
+
+import { encodeIpv6 } from '../../lib/helpers';
+import { useUiSetting$ } from '../../lib/kibana';
+
+import {
+  GoogleLink,
+  HostDetailsLink,
+  IPDetailsLink,
+  ReputationLink,
+  WhoIsLink,
+  CertificateFingerprintLink,
+  Ja3FingerprintLink,
+  PortOrServiceNameLink,
+  DEFAULT_NUMBER_OF_LINK,
+  ExternalLink,
+} from '.';
+
+jest.mock('../../../overview/components/events_by_dataset');
+
+jest.mock('../../lib/kibana', () => {
+  return {
+    useUiSetting$: jest.fn(),
+  };
+});
+
+describe('Custom Links', () => {
+  const hostName = 'Host Name';
+  const ipv4 = '192.0.2.255';
+  const ipv6 = '2001:db8:ffff:ffff:ffff:ffff:ffff:ffff';
+  const ipv6Encoded = encodeIpv6(ipv6);
+
+  describe('HostDetailsLink', () => {
+    test('should render valid link to Host Details with hostName as the display text', () => {
+      const wrapper = mount(<HostDetailsLink hostName={hostName} />);
+      expect(wrapper.find('EuiLink').prop('href')).toEqual(
+        `#/link-to/hosts/${encodeURIComponent(hostName)}`
+      );
+      expect(wrapper.text()).toEqual(hostName);
+    });
+
+    test('should render valid link to Host Details with child text as the display text', () => {
+      const wrapper = mount(<HostDetailsLink hostName={hostName}>{hostName}</HostDetailsLink>);
+      expect(wrapper.find('EuiLink').prop('href')).toEqual(
+        `#/link-to/hosts/${encodeURIComponent(hostName)}`
+      );
+      expect(wrapper.text()).toEqual(hostName);
+    });
+  });
+
+  describe('IPDetailsLink', () => {
+    test('should render valid link to IP Details with ipv4 as the display text', () => {
+      const wrapper = mount(<IPDetailsLink ip={ipv4} />);
+      expect(wrapper.find('EuiLink').prop('href')).toEqual(
+        `#/link-to/network/ip/${encodeURIComponent(ipv4)}/source`
+      );
+      expect(wrapper.text()).toEqual(ipv4);
+    });
+
+    test('should render valid link to IP Details with child text as the display text', () => {
+      const wrapper = mount(<IPDetailsLink ip={ipv4}>{hostName}</IPDetailsLink>);
+      expect(wrapper.find('EuiLink').prop('href')).toEqual(
+        `#/link-to/network/ip/${encodeURIComponent(ipv4)}/source`
+      );
+      expect(wrapper.text()).toEqual(hostName);
+    });
+
+    test('should render valid link to IP Details with ipv6 as the display text', () => {
+      const wrapper = mount(<IPDetailsLink ip={ipv6} />);
+      expect(wrapper.find('EuiLink').prop('href')).toEqual(
+        `#/link-to/network/ip/${encodeURIComponent(ipv6Encoded)}/source`
+      );
+      expect(wrapper.text()).toEqual(ipv6);
+    });
+  });
+
+  describe('GoogleLink', () => {
+    test('it renders text passed in as value', () => {
+      const wrapper = mountWithIntl(
+        <GoogleLink link={'http://example.com/'}>{'Example Link'}</GoogleLink>
+      );
+      expect(wrapper.text()).toEqual('Example Link');
+    });
+
+    test('it renders props passed in as link', () => {
+      const wrapper = mountWithIntl(
+        <GoogleLink link={'http://example.com/'}>{'Example Link'}</GoogleLink>
+      );
+      expect(wrapper.find('a').prop('href')).toEqual(
+        'https://www.google.com/search?q=http%3A%2F%2Fexample.com%2F'
+      );
+    });
+
+    test("it encodes <script>alert('XSS')</script>", () => {
+      const wrapper = mountWithIntl(
+        <GoogleLink link={"http://example.com?q=<script>alert('XSS')</script>"}>
+          {'Example Link'}
+        </GoogleLink>
+      );
+      expect(wrapper.find('a').prop('href')).toEqual(
+        "https://www.google.com/search?q=http%3A%2F%2Fexample.com%3Fq%3D%3Cscript%3Ealert('XSS')%3C%2Fscript%3E"
+      );
+    });
+  });
+
+  describe('External Link', () => {
+    const mockLink = 'https://www.virustotal.com/gui/search/';
+    const mockLinkName = 'Link';
+    let wrapper: ShallowWrapper;
+
+    describe('render', () => {
+      beforeAll(() => {
+        wrapper = shallow(
+          <ExternalLink url={mockLink} idx={0} allItemsLimit={5} overflowIndexStart={5}>
+            {mockLinkName}
+          </ExternalLink>
+        );
+      });
+
+      test('it renders tooltip', () => {
+        expect(wrapper.find('[data-test-subj="externalLinkTooltip"]').exists()).toBeTruthy();
+      });
+
+      test('it renders ExternalLinkIcon', () => {
+        expect(wrapper.find('[data-test-subj="externalLinkIcon"]').exists()).toBeTruthy();
+      });
+
+      test('it renders correct url', () => {
+        expect(wrapper.find('[data-test-subj="externalLink"]').prop('href')).toEqual(mockLink);
+      });
+
+      test('it renders comma if id is given', () => {
+        expect(wrapper.find('[data-test-subj="externalLinkComma"]').exists()).toBeTruthy();
+      });
+    });
+
+    describe('not render', () => {
+      test('it should not render if childen prop is not given', () => {
+        wrapper = shallow(
+          <ExternalLink url={mockLink} idx={4} allItemsLimit={5} overflowIndexStart={5} />
+        );
+        expect(wrapper.find('[data-test-subj="externalLinkTooltip"]').exists()).toBeFalsy();
+      });
+
+      test('it should not render if url prop is not given', () => {
+        wrapper = shallow(
+          <ExternalLink url={''} idx={4} allItemsLimit={5} overflowIndexStart={5} />
+        );
+        expect(wrapper.find('[data-test-subj="externalLinkTooltip"]').exists()).toBeFalsy();
+      });
+
+      test('it should not render if url prop is invalid', () => {
+        wrapper = shallow(
+          <ExternalLink url={'xxx'} idx={4} allItemsLimit={5} overflowIndexStart={5} />
+        );
+        expect(wrapper.find('[data-test-subj="externalLinkTooltip"]').exists()).toBeFalsy();
+      });
+
+      test('it should not render comma if id is not given', () => {
+        wrapper = shallow(
+          <ExternalLink url={mockLink} allItemsLimit={5} overflowIndexStart={5}>
+            {mockLinkName}
+          </ExternalLink>
+        );
+        expect(wrapper.find('[data-test-subj="externalLinkComma"]').exists()).toBeFalsy();
+      });
+
+      test('it should not render comma for the last item', () => {
+        wrapper = shallow(
+          <ExternalLink url={mockLink} idx={4} allItemsLimit={5} overflowIndexStart={5}>
+            {mockLinkName}
+          </ExternalLink>
+        );
+        expect(wrapper.find('[data-test-subj="externalLinkComma"]').exists()).toBeFalsy();
+      });
+    });
+
+    describe.each<[number, number, number, boolean]>([
+      [0, 2, 5, true],
+      [1, 2, 5, false],
+      [2, 2, 5, false],
+      [3, 2, 5, false],
+      [4, 2, 5, false],
+      [5, 2, 5, false],
+    ])(
+      'renders Comma when overflowIndex is smaller than allItems limit',
+      (idx, overflowIndexStart, allItemsLimit, showComma) => {
+        beforeAll(() => {
+          wrapper = shallow(
+            <ExternalLink
+              url={mockLink}
+              idx={idx}
+              allItemsLimit={allItemsLimit}
+              overflowIndexStart={overflowIndexStart}
+            >
+              {mockLinkName}
+            </ExternalLink>
+          );
+        });
+
+        test(`should render Comma if current id (${idx}) is smaller than the index of last visible item`, () => {
+          expect(wrapper.find('[data-test-subj="externalLinkComma"]').exists()).toEqual(showComma);
+        });
+      }
+    );
+
+    describe.each<[number, number, number, boolean]>([
+      [0, 5, 4, true],
+      [1, 5, 4, true],
+      [2, 5, 4, true],
+      [3, 5, 4, false],
+      [4, 5, 4, false],
+      [5, 5, 4, false],
+    ])(
+      'When overflowIndex is grater than allItems limit',
+      (idx, overflowIndexStart, allItemsLimit, showComma) => {
+        beforeAll(() => {
+          wrapper = shallow(
+            <ExternalLink
+              url={mockLink}
+              idx={idx}
+              allItemsLimit={allItemsLimit}
+              overflowIndexStart={overflowIndexStart}
+            >
+              {mockLinkName}
+            </ExternalLink>
+          );
+        });
+
+        test(`Current item (${idx}) should render Comma execpt the last item`, () => {
+          expect(wrapper.find('[data-test-subj="externalLinkComma"]').exists()).toEqual(showComma);
+        });
+      }
+    );
+
+    describe.each<[number, number, number, boolean]>([
+      [0, 5, 5, true],
+      [1, 5, 5, true],
+      [2, 5, 5, true],
+      [3, 5, 5, true],
+      [4, 5, 5, false],
+      [5, 5, 5, false],
+    ])(
+      'when overflowIndex equals to allItems limit',
+      (idx, overflowIndexStart, allItemsLimit, showComma) => {
+        beforeAll(() => {
+          wrapper = shallow(
+            <ExternalLink
+              url={mockLink}
+              idx={idx}
+              allItemsLimit={allItemsLimit}
+              overflowIndexStart={overflowIndexStart}
+            >
+              {mockLinkName}
+            </ExternalLink>
+          );
+        });
+
+        test(`Current item (${idx}) should render Comma correctly`, () => {
+          expect(wrapper.find('[data-test-subj="externalLinkComma"]').exists()).toEqual(showComma);
+        });
+      }
+    );
+  });
+
+  describe('ReputationLink', () => {
+    const mockCustomizedReputationLinks = [
+      { name: 'Link 1', url_template: 'https://www.virustotal.com/gui/search/{{ip}}' },
+      {
+        name: 'Link 2',
+        url_template: 'https://talosintelligence.com/reputation_center/lookup?search={{ip}}',
+      },
+      { name: 'Link 3', url_template: 'https://www.virustotal.com/gui/search/{{ip}}' },
+      {
+        name: 'Link 4',
+        url_template: 'https://talosintelligence.com/reputation_center/lookup?search={{ip}}',
+      },
+      { name: 'Link 5', url_template: 'https://www.virustotal.com/gui/search/{{ip}}' },
+      {
+        name: 'Link 6',
+        url_template: 'https://talosintelligence.com/reputation_center/lookup?search={{ip}}',
+      },
+    ];
+    const mockDefaultReputationLinks = mockCustomizedReputationLinks.slice(0, 2);
+
+    describe('links property', () => {
+      beforeEach(() => {
+        (useUiSetting$ as jest.Mock).mockReset();
+        (useUiSetting$ as jest.Mock).mockReturnValue([mockDefaultReputationLinks]);
+      });
+
+      test('it renders default link text', () => {
+        const wrapper = shallow(<ReputationLink domain={'192.0.2.0'} />);
+        wrapper.find('[data-test-subj="externalLink"]').forEach((node, idx) => {
+          expect(node.at(idx).text()).toEqual(mockDefaultReputationLinks[idx].name);
+        });
+      });
+
+      test('it renders customized link text', () => {
+        (useUiSetting$ as jest.Mock).mockReset();
+        (useUiSetting$ as jest.Mock).mockReturnValue([mockCustomizedReputationLinks]);
+        const wrapper = shallow(<ReputationLink domain={'192.0.2.0'} />);
+        wrapper.find('[data-test-subj="externalLink"]').forEach((node, idx) => {
+          expect(node.at(idx).text()).toEqual(mockCustomizedReputationLinks[idx].name);
+        });
+      });
+
+      test('it renders correct href', () => {
+        const wrapper = shallow(<ReputationLink domain={'192.0.2.0'} />);
+        wrapper.find('[data-test-subj="externalLink"]').forEach((node, idx) => {
+          expect(node.prop('href')).toEqual(
+            mockDefaultReputationLinks[idx].url_template.replace('{{ip}}', '192.0.2.0')
+          );
+        });
+      });
+    });
+
+    describe('number of links', () => {
+      beforeAll(() => {
+        (useUiSetting$ as jest.Mock).mockReset();
+        (useUiSetting$ as jest.Mock).mockReturnValue([mockCustomizedReputationLinks]);
+      });
+
+      afterEach(() => {
+        (useUiSetting$ as jest.Mock).mockClear();
+      });
+
+      test('it renders correct number of links by default', () => {
+        const wrapper = mountWithIntl(<ReputationLink domain={'192.0.2.0'} />);
+        expect(wrapper.find('[data-test-subj="externalLinkComponent"]')).toHaveLength(
+          DEFAULT_NUMBER_OF_LINK
+        );
+      });
+
+      test('it renders correct number of tooltips by default', () => {
+        const wrapper = mountWithIntl(<ReputationLink domain={'192.0.2.0'} />);
+        expect(wrapper.find('[data-test-subj="externalLinkTooltip"]')).toHaveLength(
+          DEFAULT_NUMBER_OF_LINK
+        );
+      });
+
+      test('it renders correct number of visible link', () => {
+        (useUiSetting$ as jest.Mock).mockReset();
+        (useUiSetting$ as jest.Mock).mockReturnValue([mockCustomizedReputationLinks]);
+
+        const wrapper = mountWithIntl(
+          <ReputationLink domain={'192.0.2.0'} overflowIndexStart={1} />
+        );
+        expect(wrapper.find('[data-test-subj="externalLinkComponent"]')).toHaveLength(1);
+      });
+
+      test('it renders correct number of tooltips for visible links', () => {
+        (useUiSetting$ as jest.Mock).mockReset();
+        (useUiSetting$ as jest.Mock).mockReturnValue([mockCustomizedReputationLinks]);
+
+        const wrapper = mountWithIntl(
+          <ReputationLink domain={'192.0.2.0'} overflowIndexStart={1} />
+        );
+        expect(wrapper.find('[data-test-subj="externalLinkTooltip"]')).toHaveLength(1);
+      });
+    });
+
+    describe('invalid customized links', () => {
+      const mockInvalidLinksEmptyObj = [{}];
+      const mockInvalidLinksNoName = [
+        { url_template: 'https://talosintelligence.com/reputation_center/lookup?search={{ip}}' },
+      ];
+      const mockInvalidLinksNoUrl = [{ name: 'Link 1' }];
+      const mockInvalidUrl = [{ name: 'Link 1', url_template: "<script>alert('XSS')</script>" }];
+      afterEach(() => {
+        (useUiSetting$ as jest.Mock).mockReset();
+      });
+
+      test('it filters empty object', () => {
+        (useUiSetting$ as jest.Mock).mockReturnValue([mockInvalidLinksEmptyObj]);
+
+        const wrapper = mountWithIntl(
+          <ReputationLink domain={'192.0.2.0'} overflowIndexStart={1} />
+        );
+        expect(wrapper.find('[data-test-subj="externalLink"]')).toHaveLength(0);
+      });
+
+      test('it filters object without name property', () => {
+        (useUiSetting$ as jest.Mock).mockReturnValue([mockInvalidLinksNoName]);
+
+        const wrapper = mountWithIntl(
+          <ReputationLink domain={'192.0.2.0'} overflowIndexStart={1} />
+        );
+        expect(wrapper.find('[data-test-subj="externalLink"]')).toHaveLength(0);
+      });
+
+      test('it filters object without url_template property', () => {
+        (useUiSetting$ as jest.Mock).mockReturnValue([mockInvalidLinksNoUrl]);
+
+        const wrapper = mountWithIntl(
+          <ReputationLink domain={'192.0.2.0'} overflowIndexStart={1} />
+        );
+        expect(wrapper.find('[data-test-subj="externalLink"]')).toHaveLength(0);
+      });
+
+      test('it filters object with invalid url', () => {
+        (useUiSetting$ as jest.Mock).mockReturnValue([mockInvalidUrl]);
+
+        const wrapper = mountWithIntl(
+          <ReputationLink domain={'192.0.2.0'} overflowIndexStart={1} />
+        );
+        expect(wrapper.find('[data-test-subj="externalLink"]')).toHaveLength(0);
+      });
+    });
+
+    describe('external icon', () => {
+      beforeAll(() => {
+        (useUiSetting$ as jest.Mock).mockReset();
+        (useUiSetting$ as jest.Mock).mockReturnValue([mockCustomizedReputationLinks]);
+      });
+
+      afterEach(() => {
+        (useUiSetting$ as jest.Mock).mockClear();
+      });
+
+      test('it renders correct number of external icons by default', () => {
+        const wrapper = mountWithIntl(<ReputationLink domain={'192.0.2.0'} />);
+        expect(wrapper.find('[data-test-subj="externalLinkIcon"]')).toHaveLength(5);
+      });
+
+      test('it renders correct number of external icons', () => {
+        const wrapper = mountWithIntl(
+          <ReputationLink domain={'192.0.2.0'} overflowIndexStart={1} />
+        );
+        expect(wrapper.find('[data-test-subj="externalLinkIcon"]')).toHaveLength(1);
+      });
+    });
+  });
+
+  describe('WhoisLink', () => {
+    test('it renders ip passed in as domain', () => {
+      const wrapper = mountWithIntl(<WhoIsLink domain={'192.0.2.0'}>{'Example Link'}</WhoIsLink>);
+      expect(wrapper.text()).toEqual('Example Link');
+    });
+
+    test('it renders correct href', () => {
+      const wrapper = mountWithIntl(<WhoIsLink domain={'192.0.2.0'}>{'Example Link'} </WhoIsLink>);
+      expect(wrapper.find('a').prop('href')).toEqual('https://www.iana.org/whois?q=192.0.2.0');
+    });
+
+    test("it encodes <script>alert('XSS')</script>", () => {
+      const wrapper = mountWithIntl(
+        <WhoIsLink domain={"<script>alert('XSS')</script>"}>{'Example Link'}</WhoIsLink>
+      );
+      expect(wrapper.find('a').prop('href')).toEqual(
+        "https://www.iana.org/whois?q=%3Cscript%3Ealert('XSS')%3C%2Fscript%3E"
+      );
+    });
+  });
+
+  describe('CertificateFingerprintLink', () => {
+    test('it renders link text', () => {
+      const wrapper = mountWithIntl(
+        <CertificateFingerprintLink certificateFingerprint={'abcd'}>
+          {'Example Link'}
+        </CertificateFingerprintLink>
+      );
+      expect(wrapper.text()).toEqual('Example Link');
+    });
+
+    test('it renders correct href', () => {
+      const wrapper = mountWithIntl(
+        <CertificateFingerprintLink certificateFingerprint={'abcd'}>
+          {'Example Link'}
+        </CertificateFingerprintLink>
+      );
+      expect(wrapper.find('a').prop('href')).toEqual(
+        'https://sslbl.abuse.ch/ssl-certificates/sha1/abcd'
+      );
+    });
+
+    test("it encodes <script>alert('XSS')</script>", () => {
+      const wrapper = mountWithIntl(
+        <CertificateFingerprintLink certificateFingerprint={"<script>alert('XSS')</script>"}>
+          {'Example Link'}
+        </CertificateFingerprintLink>
+      );
+      expect(wrapper.find('a').prop('href')).toEqual(
+        "https://sslbl.abuse.ch/ssl-certificates/sha1/%3Cscript%3Ealert('XSS')%3C%2Fscript%3E"
+      );
+    });
+  });
+
+  describe('Ja3FingerprintLink', () => {
+    test('it renders link text', () => {
+      const wrapper = mountWithIntl(
+        <Ja3FingerprintLink ja3Fingerprint={'abcd'}>{'Example Link'}</Ja3FingerprintLink>
+      );
+      expect(wrapper.text()).toEqual('Example Link');
+    });
+
+    test('it renders correct href', () => {
+      const wrapper = mountWithIntl(
+        <Ja3FingerprintLink ja3Fingerprint={'abcd'}>{'Example Link'}</Ja3FingerprintLink>
+      );
+      expect(wrapper.find('a').prop('href')).toEqual(
+        'https://sslbl.abuse.ch/ja3-fingerprints/abcd'
+      );
+    });
+
+    test("it encodes <script>alert('XSS')</script>", () => {
+      const wrapper = mountWithIntl(
+        <Ja3FingerprintLink ja3Fingerprint={"<script>alert('XSS')</script>"}>
+          {'Example Link'}
+        </Ja3FingerprintLink>
+      );
+      expect(wrapper.find('a').prop('href')).toEqual(
+        "https://sslbl.abuse.ch/ja3-fingerprints/%3Cscript%3Ealert('XSS')%3C%2Fscript%3E"
+      );
+    });
+  });
+
+  describe('PortOrServiceNameLink', () => {
+    test('it renders link text', () => {
+      const wrapper = mountWithIntl(
+        <PortOrServiceNameLink portOrServiceName={443}>{'Example Link'}</PortOrServiceNameLink>
+      );
+      expect(wrapper.text()).toEqual('Example Link');
+    });
+
+    test('it renders correct href when port is a number', () => {
+      const wrapper = mountWithIntl(
+        <PortOrServiceNameLink portOrServiceName={443}>{'Example Link'}</PortOrServiceNameLink>
+      );
+      expect(wrapper.find('a').prop('href')).toEqual(
+        'https://www.iana.org/assignments/service-names-port-numbers/service-names-port-numbers.xhtml?search=443'
+      );
+    });
+
+    test('it renders correct href when port is a string', () => {
+      const wrapper = mountWithIntl(
+        <PortOrServiceNameLink portOrServiceName={'80'}>{'Example Link'}</PortOrServiceNameLink>
+      );
+      expect(wrapper.find('a').prop('href')).toEqual(
+        'https://www.iana.org/assignments/service-names-port-numbers/service-names-port-numbers.xhtml?search=80'
+      );
+    });
+
+    test("it encodes <script>alert('XSS')</script>", () => {
+      const wrapper = mountWithIntl(
+        <PortOrServiceNameLink portOrServiceName={"<script>alert('XSS')</script>"}>
+          {'Example Link'}
+        </PortOrServiceNameLink>
+      );
+      expect(wrapper.find('a').prop('href')).toEqual(
+        "https://www.iana.org/assignments/service-names-port-numbers/service-names-port-numbers.xhtml?search=%3Cscript%3Ealert('XSS')%3C%2Fscript%3E"
+      );
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/common/components/links/index.tsx b/x-pack/plugins/siem/public/common/components/links/index.tsx
new file mode 100644
index 00000000000000..4d639ce2781b12
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/links/index.tsx
@@ -0,0 +1,312 @@
+/*
+ * 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 { EuiLink, EuiToolTip, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import React, { useMemo } from 'react';
+import { isNil } from 'lodash/fp';
+import styled from 'styled-components';
+
+import { IP_REPUTATION_LINKS_SETTING } from '../../../../common/constants';
+import {
+  DefaultFieldRendererOverflow,
+  DEFAULT_MORE_MAX_HEIGHT,
+} from '../../../timelines/components/field_renderers/field_renderers';
+import { encodeIpv6 } from '../../lib/helpers';
+import {
+  getCaseDetailsUrl,
+  getHostDetailsUrl,
+  getIPDetailsUrl,
+  getCreateCaseUrl,
+} from '../link_to';
+import { FlowTarget, FlowTargetSourceDest } from '../../../graphql/types';
+import { useUiSetting$ } from '../../lib/kibana';
+import { isUrlInvalid } from '../../../alerts/components/rules/step_about_rule/helpers';
+import { ExternalLinkIcon } from '../external_link_icon';
+import { navTabs } from '../../../app/home/home_navigations';
+import { useGetUrlSearch } from '../navigation/use_get_url_search';
+
+import * as i18n from './translations';
+
+export const DEFAULT_NUMBER_OF_LINK = 5;
+
+// Internal Links
+const HostDetailsLinkComponent: React.FC<{ children?: React.ReactNode; hostName: string }> = ({
+  children,
+  hostName,
+}) => (
+  <EuiLink href={getHostDetailsUrl(encodeURIComponent(hostName))}>
+    {children ? children : hostName}
+  </EuiLink>
+);
+
+const whitelistUrlSchemes = ['http://', 'https://'];
+export const ExternalLink = React.memo<{
+  url: string;
+  children?: React.ReactNode;
+  idx?: number;
+  overflowIndexStart?: number;
+  allItemsLimit?: number;
+}>(
+  ({
+    url,
+    children,
+    idx,
+    overflowIndexStart = DEFAULT_NUMBER_OF_LINK,
+    allItemsLimit = DEFAULT_NUMBER_OF_LINK,
+  }) => {
+    const lastVisibleItemIndex = overflowIndexStart - 1;
+    const lastItemIndex = allItemsLimit - 1;
+    const lastIndexToShow = Math.max(0, Math.min(lastVisibleItemIndex, lastItemIndex));
+    const inWhitelist = whitelistUrlSchemes.some(scheme => url.indexOf(scheme) === 0);
+    return url && inWhitelist && !isUrlInvalid(url) && children ? (
+      <EuiToolTip content={url} position="top" data-test-subj="externalLinkTooltip">
+        <EuiLink href={url} target="_blank" rel="noopener" data-test-subj="externalLink">
+          {children}
+          <ExternalLinkIcon data-test-subj="externalLinkIcon" />
+          {!isNil(idx) && idx < lastIndexToShow && <Comma data-test-subj="externalLinkComma" />}
+        </EuiLink>
+      </EuiToolTip>
+    ) : null;
+  }
+);
+
+ExternalLink.displayName = 'ExternalLink';
+
+export const HostDetailsLink = React.memo(HostDetailsLinkComponent);
+
+const IPDetailsLinkComponent: React.FC<{
+  children?: React.ReactNode;
+  ip: string;
+  flowTarget?: FlowTarget | FlowTargetSourceDest;
+}> = ({ children, ip, flowTarget = FlowTarget.source }) => (
+  <EuiLink href={`${getIPDetailsUrl(encodeURIComponent(encodeIpv6(ip)), flowTarget)}`}>
+    {children ? children : ip}
+  </EuiLink>
+);
+
+export const IPDetailsLink = React.memo(IPDetailsLinkComponent);
+
+const CaseDetailsLinkComponent: React.FC<{
+  children?: React.ReactNode;
+  detailName: string;
+  title?: string;
+}> = ({ children, detailName, title }) => {
+  const search = useGetUrlSearch(navTabs.case);
+
+  return (
+    <EuiLink
+      href={getCaseDetailsUrl({ id: detailName, search })}
+      data-test-subj="case-details-link"
+      aria-label={i18n.CASE_DETAILS_LINK_ARIA(title ?? detailName)}
+    >
+      {children ? children : detailName}
+    </EuiLink>
+  );
+};
+export const CaseDetailsLink = React.memo(CaseDetailsLinkComponent);
+CaseDetailsLink.displayName = 'CaseDetailsLink';
+
+export const CreateCaseLink = React.memo<{ children: React.ReactNode }>(({ children }) => {
+  const search = useGetUrlSearch(navTabs.case);
+  return <EuiLink href={getCreateCaseUrl(search)}>{children}</EuiLink>;
+});
+
+CreateCaseLink.displayName = 'CreateCaseLink';
+
+// External Links
+export const GoogleLink = React.memo<{ children?: React.ReactNode; link: string }>(
+  ({ children, link }) => (
+    <ExternalLink url={`https://www.google.com/search?q=${encodeURIComponent(link)}`}>
+      {children ? children : link}
+    </ExternalLink>
+  )
+);
+
+GoogleLink.displayName = 'GoogleLink';
+
+export const PortOrServiceNameLink = React.memo<{
+  children?: React.ReactNode;
+  portOrServiceName: number | string;
+}>(({ children, portOrServiceName }) => (
+  <EuiLink
+    data-test-subj="port-or-service-name-link"
+    href={`https://www.iana.org/assignments/service-names-port-numbers/service-names-port-numbers.xhtml?search=${encodeURIComponent(
+      String(portOrServiceName)
+    )}`}
+    target="_blank"
+  >
+    {children ? children : portOrServiceName}
+  </EuiLink>
+));
+
+PortOrServiceNameLink.displayName = 'PortOrServiceNameLink';
+
+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 = React.memo<{
+  children?: React.ReactNode;
+  certificateFingerprint: string;
+}>(({ children, certificateFingerprint }) => (
+  <EuiLink
+    data-test-subj="certificate-fingerprint-link"
+    href={`https://sslbl.abuse.ch/ssl-certificates/sha1/${encodeURIComponent(
+      certificateFingerprint
+    )}`}
+    target="_blank"
+  >
+    {children ? children : certificateFingerprint}
+  </EuiLink>
+));
+
+CertificateFingerprintLink.displayName = 'CertificateFingerprintLink';
+
+enum DefaultReputationLink {
+  'virustotal.com' = 'virustotal.com',
+  'talosIntelligence.com' = 'talosIntelligence.com',
+}
+
+export interface ReputationLinkSetting {
+  name: string;
+  url_template: string;
+}
+
+function isDefaultReputationLink(name: string): name is DefaultReputationLink {
+  return (
+    name === DefaultReputationLink['virustotal.com'] ||
+    name === DefaultReputationLink['talosIntelligence.com']
+  );
+}
+const isReputationLink = (
+  rowItem: string | ReputationLinkSetting
+): rowItem is ReputationLinkSetting =>
+  (rowItem as ReputationLinkSetting).url_template !== undefined &&
+  (rowItem as ReputationLinkSetting).name !== undefined;
+
+export const Comma = styled('span')`
+  margin-right: 5px;
+  margin-left: 5px;
+  &::after {
+    content: ' ,';
+  }
+`;
+
+Comma.displayName = 'Comma';
+
+const defaultNameMapping: Record<DefaultReputationLink, string> = {
+  [DefaultReputationLink['virustotal.com']]: i18n.VIEW_VIRUS_TOTAL,
+  [DefaultReputationLink['talosIntelligence.com']]: i18n.VIEW_TALOS_INTELLIGENCE,
+};
+
+const ReputationLinkComponent: React.FC<{
+  overflowIndexStart?: number;
+  allItemsLimit?: number;
+  showDomain?: boolean;
+  domain: string;
+  direction?: 'row' | 'column';
+}> = ({
+  overflowIndexStart = DEFAULT_NUMBER_OF_LINK,
+  allItemsLimit = DEFAULT_NUMBER_OF_LINK,
+  showDomain = false,
+  domain,
+  direction = 'row',
+}) => {
+  const [ipReputationLinksSetting] = useUiSetting$<ReputationLinkSetting[]>(
+    IP_REPUTATION_LINKS_SETTING
+  );
+
+  const ipReputationLinks: ReputationLinkSetting[] = useMemo(
+    () =>
+      ipReputationLinksSetting
+        ?.slice(0, allItemsLimit)
+        .filter(
+          ({ url_template, name }) =>
+            !isNil(url_template) && !isNil(name) && !isUrlInvalid(url_template)
+        )
+        .map(({ name, url_template }: { name: string; url_template: string }) => ({
+          name: isDefaultReputationLink(name) ? defaultNameMapping[name] : name,
+          url_template: url_template.replace(`{{ip}}`, encodeURIComponent(domain)),
+        })),
+    [ipReputationLinksSetting, domain, defaultNameMapping, allItemsLimit]
+  );
+
+  return ipReputationLinks?.length > 0 ? (
+    <section>
+      <EuiFlexGroup
+        gutterSize="none"
+        justifyContent="center"
+        direction={direction}
+        alignItems="center"
+        data-test-subj="reputationLinkGroup"
+      >
+        <EuiFlexItem grow={true}>
+          {ipReputationLinks
+            ?.slice(0, overflowIndexStart)
+            .map(({ name, url_template: urlTemplate }: ReputationLinkSetting, id) => (
+              <ExternalLink
+                allItemsLimit={ipReputationLinks.length}
+                idx={id}
+                overflowIndexStart={overflowIndexStart}
+                url={urlTemplate}
+                data-test-subj="externalLinkComponent"
+                key={`reputationLink-${id}`}
+              >
+                <>{showDomain ? domain : name ?? domain}</>
+              </ExternalLink>
+            ))}
+        </EuiFlexItem>
+
+        <EuiFlexItem grow={false}>
+          <DefaultFieldRendererOverflow
+            rowItems={ipReputationLinks}
+            idPrefix="moreReputationLink"
+            render={rowItem => {
+              return (
+                isReputationLink(rowItem) && (
+                  <ExternalLink
+                    url={rowItem.url_template}
+                    overflowIndexStart={overflowIndexStart}
+                    allItemsLimit={allItemsLimit}
+                  >
+                    <>{rowItem.name ?? domain}</>
+                  </ExternalLink>
+                )
+              );
+            }}
+            moreMaxHeight={DEFAULT_MORE_MAX_HEIGHT}
+            overflowIndexStart={overflowIndexStart}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </section>
+  ) : null;
+};
+
+ReputationLinkComponent.displayName = 'ReputationLinkComponent';
+
+export const ReputationLink = React.memo(ReputationLinkComponent);
+
+export const WhoIsLink = React.memo<{ children?: React.ReactNode; domain: string }>(
+  ({ children, domain }) => (
+    <ExternalLink url={`https://www.iana.org/whois?q=${encodeURIComponent(domain)}`}>
+      {children ? children : domain}
+    </ExternalLink>
+  )
+);
+
+WhoIsLink.displayName = 'WhoIsLink';
diff --git a/x-pack/plugins/siem/public/common/components/links/translations.ts b/x-pack/plugins/siem/public/common/components/links/translations.ts
new file mode 100644
index 00000000000000..fdc50361175776
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/links/translations.ts
@@ -0,0 +1,15 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+export * from '../../../network/components/ip_overview/translations';
+
+export const CASE_DETAILS_LINK_ARIA = (detailName: string) =>
+  i18n.translate('xpack.siem.case.caseTable.caseDetailsLinkAria', {
+    values: { detailName },
+    defaultMessage: 'click to visit case with title {detailName}',
+  });
diff --git a/x-pack/plugins/siem/public/components/loader/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/common/components/loader/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/loader/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/loader/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/loader/index.test.tsx b/x-pack/plugins/siem/public/common/components/loader/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/loader/index.test.tsx
rename to x-pack/plugins/siem/public/common/components/loader/index.test.tsx
diff --git a/x-pack/plugins/siem/public/components/loader/index.tsx b/x-pack/plugins/siem/public/common/components/loader/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/loader/index.tsx
rename to x-pack/plugins/siem/public/common/components/loader/index.tsx
diff --git a/x-pack/plugins/siem/public/components/localized_date_tooltip/index.test.tsx b/x-pack/plugins/siem/public/common/components/localized_date_tooltip/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/localized_date_tooltip/index.test.tsx
rename to x-pack/plugins/siem/public/common/components/localized_date_tooltip/index.test.tsx
diff --git a/x-pack/plugins/siem/public/components/localized_date_tooltip/index.tsx b/x-pack/plugins/siem/public/common/components/localized_date_tooltip/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/localized_date_tooltip/index.tsx
rename to x-pack/plugins/siem/public/common/components/localized_date_tooltip/index.tsx
diff --git a/x-pack/plugins/siem/public/components/markdown/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/common/components/markdown/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/markdown/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/markdown/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/markdown/__snapshots__/markdown_hint.test.tsx.snap b/x-pack/plugins/siem/public/common/components/markdown/__snapshots__/markdown_hint.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/markdown/__snapshots__/markdown_hint.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/markdown/__snapshots__/markdown_hint.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/markdown/index.test.tsx b/x-pack/plugins/siem/public/common/components/markdown/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/markdown/index.test.tsx
rename to x-pack/plugins/siem/public/common/components/markdown/index.test.tsx
diff --git a/x-pack/plugins/siem/public/components/markdown/index.tsx b/x-pack/plugins/siem/public/common/components/markdown/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/markdown/index.tsx
rename to x-pack/plugins/siem/public/common/components/markdown/index.tsx
diff --git a/x-pack/plugins/siem/public/components/markdown/markdown_hint.test.tsx b/x-pack/plugins/siem/public/common/components/markdown/markdown_hint.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/markdown/markdown_hint.test.tsx
rename to x-pack/plugins/siem/public/common/components/markdown/markdown_hint.test.tsx
diff --git a/x-pack/plugins/siem/public/components/markdown/markdown_hint.tsx b/x-pack/plugins/siem/public/common/components/markdown/markdown_hint.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/markdown/markdown_hint.tsx
rename to x-pack/plugins/siem/public/common/components/markdown/markdown_hint.tsx
diff --git a/x-pack/plugins/siem/public/components/markdown/translations.ts b/x-pack/plugins/siem/public/common/components/markdown/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/markdown/translations.ts
rename to x-pack/plugins/siem/public/common/components/markdown/translations.ts
diff --git a/x-pack/plugins/siem/public/components/markdown_editor/constants.ts b/x-pack/plugins/siem/public/common/components/markdown_editor/constants.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/markdown_editor/constants.ts
rename to x-pack/plugins/siem/public/common/components/markdown_editor/constants.ts
diff --git a/x-pack/plugins/siem/public/common/components/markdown_editor/form.tsx b/x-pack/plugins/siem/public/common/components/markdown_editor/form.tsx
new file mode 100644
index 00000000000000..2ed85b04fe3f6e
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/markdown_editor/form.tsx
@@ -0,0 +1,64 @@
+/*
+ * 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 { EuiFormRow } from '@elastic/eui';
+import React, { useCallback } from 'react';
+
+import { FieldHook, getFieldValidityAndErrorMessage } from '../../../shared_imports';
+import { CursorPosition, MarkdownEditor } from '.';
+
+interface IMarkdownEditorForm {
+  bottomRightContent?: React.ReactNode;
+  dataTestSubj: string;
+  field: FieldHook;
+  idAria: string;
+  isDisabled: boolean;
+  onCursorPositionUpdate?: (cursorPosition: CursorPosition) => void;
+  placeholder?: string;
+  topRightContent?: React.ReactNode;
+}
+export const MarkdownEditorForm = ({
+  bottomRightContent,
+  dataTestSubj,
+  field,
+  idAria,
+  isDisabled = false,
+  onCursorPositionUpdate,
+  placeholder,
+  topRightContent,
+}: IMarkdownEditorForm) => {
+  const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
+
+  const handleContentChange = useCallback(
+    (newContent: string) => {
+      field.setValue(newContent);
+    },
+    [field]
+  );
+
+  return (
+    <EuiFormRow
+      data-test-subj={dataTestSubj}
+      describedByIds={idAria ? [idAria] : undefined}
+      error={errorMessage}
+      fullWidth
+      helpText={field.helpText}
+      isInvalid={isInvalid}
+      label={field.label}
+      labelAppend={field.labelAppend}
+    >
+      <MarkdownEditor
+        bottomRightContent={bottomRightContent}
+        content={field.value as string}
+        isDisabled={isDisabled}
+        onChange={handleContentChange}
+        onCursorPositionUpdate={onCursorPositionUpdate}
+        placeholder={placeholder}
+        topRightContent={topRightContent}
+      />
+    </EuiFormRow>
+  );
+};
diff --git a/x-pack/plugins/siem/public/components/markdown_editor/index.tsx b/x-pack/plugins/siem/public/common/components/markdown_editor/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/markdown_editor/index.tsx
rename to x-pack/plugins/siem/public/common/components/markdown_editor/index.tsx
diff --git a/x-pack/plugins/siem/public/components/markdown_editor/translations.ts b/x-pack/plugins/siem/public/common/components/markdown_editor/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/markdown_editor/translations.ts
rename to x-pack/plugins/siem/public/common/components/markdown_editor/translations.ts
diff --git a/x-pack/plugins/siem/public/components/matrix_histogram/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/common/components/matrix_histogram/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/matrix_histogram/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/matrix_histogram/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/common/components/matrix_histogram/index.test.tsx b/x-pack/plugins/siem/public/common/components/matrix_histogram/index.test.tsx
new file mode 100644
index 00000000000000..b45207ab47c7ad
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/matrix_histogram/index.test.tsx
@@ -0,0 +1,134 @@
+/*
+ * 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.
+ */
+
+/* eslint-disable react/display-name */
+
+import { mount, ReactWrapper } from 'enzyme';
+import React from 'react';
+
+import { MatrixHistogram } from '.';
+import { useQuery } from '../../containers/matrix_histogram';
+import { HistogramType } from '../../../graphql/types';
+jest.mock('../../lib/kibana');
+
+jest.mock('./matrix_loader', () => {
+  return {
+    MatrixLoader: () => {
+      return <div className="matrixLoader" />;
+    },
+  };
+});
+
+jest.mock('../header_section', () => {
+  return {
+    HeaderSection: () => <div className="headerSection" />,
+  };
+});
+
+jest.mock('../charts/barchart', () => {
+  return {
+    BarChart: () => <div className="barchart" />,
+  };
+});
+
+jest.mock('../../containers/matrix_histogram', () => {
+  return {
+    useQuery: jest.fn(),
+  };
+});
+
+jest.mock('../../components/matrix_histogram/utils', () => {
+  return {
+    getBarchartConfigs: jest.fn(),
+    getCustomChartData: jest.fn().mockReturnValue(true),
+  };
+});
+
+describe('Matrix Histogram Component', () => {
+  let wrapper: ReactWrapper;
+
+  const mockMatrixOverTimeHistogramProps = {
+    defaultIndex: ['defaultIndex'],
+    defaultStackByOption: { text: 'text', value: 'value' },
+    endDate: new Date('2019-07-18T20:00:00.000Z').valueOf(),
+    errorMessage: 'error',
+    histogramType: HistogramType.alerts,
+    id: 'mockId',
+    isInspected: false,
+    isPtrIncluded: false,
+    setQuery: jest.fn(),
+    skip: false,
+    sourceId: 'default',
+    stackByField: 'mockStackByField',
+    stackByOptions: [{ text: 'text', value: 'value' }],
+    startDate: new Date('2019-07-18T19:00: 00.000Z').valueOf(),
+    subtitle: 'mockSubtitle',
+    totalCount: -1,
+    title: 'mockTitle',
+    dispatchSetAbsoluteRangeDatePicker: jest.fn(),
+  };
+
+  beforeAll(() => {
+    (useQuery as jest.Mock).mockReturnValue({
+      data: null,
+      loading: false,
+      inspect: false,
+      totalCount: null,
+    });
+    wrapper = mount(<MatrixHistogram {...mockMatrixOverTimeHistogramProps} />);
+  });
+  describe('on initial load', () => {
+    test('it renders MatrixLoader', () => {
+      expect(wrapper.html()).toMatchSnapshot();
+      expect(wrapper.find('MatrixLoader').exists()).toBe(true);
+    });
+  });
+
+  describe('spacer', () => {
+    test('it renders a spacer by default', () => {
+      expect(wrapper.find('[data-test-subj="spacer"]').exists()).toBe(true);
+    });
+
+    test('it does NOT render a spacer when showSpacer is false', () => {
+      wrapper = mount(<MatrixHistogram {...mockMatrixOverTimeHistogramProps} showSpacer={false} />);
+      expect(wrapper.find('[data-test-subj="spacer"]').exists()).toBe(false);
+    });
+  });
+
+  describe('not initial load', () => {
+    beforeAll(() => {
+      (useQuery as jest.Mock).mockReturnValue({
+        data: [
+          { x: 1, y: 2, g: 'g1' },
+          { x: 2, y: 4, g: 'g1' },
+          { x: 3, y: 6, g: 'g1' },
+          { x: 1, y: 1, g: 'g2' },
+          { x: 2, y: 3, g: 'g2' },
+          { x: 3, y: 5, g: 'g2' },
+        ],
+        loading: false,
+        inspect: false,
+        totalCount: 1,
+      });
+      wrapper.setProps({ endDate: 100 });
+      wrapper.update();
+    });
+    test('it renders no MatrixLoader', () => {
+      expect(wrapper.html()).toMatchSnapshot();
+      expect(wrapper.find(`MatrixLoader`).exists()).toBe(false);
+    });
+
+    test('it shows BarChart if data available', () => {
+      expect(wrapper.find(`.barchart`).exists()).toBe(true);
+    });
+  });
+
+  describe('select dropdown', () => {
+    test('should be hidden if only one option is provided', () => {
+      expect(wrapper.find('EuiSelect').exists()).toBe(false);
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/common/components/matrix_histogram/index.tsx b/x-pack/plugins/siem/public/common/components/matrix_histogram/index.tsx
new file mode 100644
index 00000000000000..b2a9f915005f15
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/matrix_histogram/index.tsx
@@ -0,0 +1,275 @@
+/*
+ * 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, { useState, useEffect, useCallback, useMemo } from 'react';
+import { Position } from '@elastic/charts';
+import styled from 'styled-components';
+
+import { EuiFlexGroup, EuiFlexItem, EuiProgress, EuiSelect, EuiSpacer } from '@elastic/eui';
+import { noop } from 'lodash/fp';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import * as i18n from './translations';
+import { BarChart } from '../charts/barchart';
+import { HeaderSection } from '../header_section';
+import { MatrixLoader } from './matrix_loader';
+import { Panel } from '../panel';
+import { getBarchartConfigs, getCustomChartData } from './utils';
+import { useQuery } from '../../containers/matrix_histogram';
+import {
+  MatrixHistogramProps,
+  MatrixHistogramOption,
+  HistogramAggregation,
+  MatrixHistogramQueryProps,
+} from './types';
+import { InspectButtonContainer } from '../inspect';
+
+import { State, inputsSelectors } from '../../store';
+import { hostsModel } from '../../../hosts/store';
+import { networkModel } from '../../../network/store';
+
+import {
+  MatrixHistogramMappingTypes,
+  GetTitle,
+  GetSubTitle,
+} from '../../components/matrix_histogram/types';
+import { SetQuery } from '../../../hosts/pages/navigation/types';
+import { QueryTemplateProps } from '../../containers/query_template';
+import { setAbsoluteRangeDatePicker } from '../../store/inputs/actions';
+import { InputsModelId } from '../../store/inputs/constants';
+import { HistogramType } from '../../../graphql/types';
+
+export interface OwnProps extends QueryTemplateProps {
+  defaultStackByOption: MatrixHistogramOption;
+  errorMessage: string;
+  headerChildren?: React.ReactNode;
+  hideHistogramIfEmpty?: boolean;
+  histogramType: HistogramType;
+  id: string;
+  indexToAdd?: string[] | null;
+  legendPosition?: Position;
+  mapping?: MatrixHistogramMappingTypes;
+  showSpacer?: boolean;
+  setQuery: SetQuery;
+  setAbsoluteRangeDatePickerTarget?: InputsModelId;
+  showLegend?: boolean;
+  stackByOptions: MatrixHistogramOption[];
+  subtitle?: string | GetSubTitle;
+  title: string | GetTitle;
+  type: hostsModel.HostsType | networkModel.NetworkType;
+}
+
+const DEFAULT_PANEL_HEIGHT = 300;
+
+const HeaderChildrenFlexItem = styled(EuiFlexItem)`
+  margin-left: 24px;
+`;
+
+// @ts-ignore - the EUI type definitions for Panel do no play nice with styled-components
+const HistogramPanel = styled(Panel)<{ height?: number }>`
+  display: flex;
+  flex-direction: column;
+  ${({ height }) => (height != null ? `height: ${height}px;` : '')}
+`;
+
+export const MatrixHistogramComponent: React.FC<MatrixHistogramProps &
+  MatrixHistogramQueryProps> = ({
+  chartHeight,
+  defaultStackByOption,
+  endDate,
+  errorMessage,
+  filterQuery,
+  headerChildren,
+  histogramType,
+  hideHistogramIfEmpty = false,
+  id,
+  indexToAdd,
+  isInspected,
+  legendPosition,
+  mapping,
+  panelHeight = DEFAULT_PANEL_HEIGHT,
+  setAbsoluteRangeDatePickerTarget = 'global',
+  setQuery,
+  showLegend,
+  showSpacer = true,
+  stackByOptions,
+  startDate,
+  subtitle,
+  title,
+  titleSize,
+  dispatchSetAbsoluteRangeDatePicker,
+  yTickFormatter,
+}) => {
+  const barchartConfigs = useMemo(
+    () =>
+      getBarchartConfigs({
+        chartHeight,
+        from: startDate,
+        legendPosition,
+        to: endDate,
+        onBrushEnd: ({ x }) => {
+          if (!x) {
+            return;
+          }
+          const [min, max] = x;
+          dispatchSetAbsoluteRangeDatePicker({
+            id: setAbsoluteRangeDatePickerTarget,
+            from: min,
+            to: max,
+          });
+        },
+        yTickFormatter,
+        showLegend,
+      }),
+    [
+      chartHeight,
+      startDate,
+      legendPosition,
+      endDate,
+      dispatchSetAbsoluteRangeDatePicker,
+      yTickFormatter,
+      showLegend,
+    ]
+  );
+  const [isInitialLoading, setIsInitialLoading] = useState(true);
+  const [selectedStackByOption, setSelectedStackByOption] = useState<MatrixHistogramOption>(
+    defaultStackByOption
+  );
+  const setSelectedChartOptionCallback = useCallback(
+    (event: React.ChangeEvent<HTMLSelectElement>) => {
+      setSelectedStackByOption(
+        stackByOptions.find(co => co.value === event.target.value) ?? defaultStackByOption
+      );
+    },
+    []
+  );
+
+  const { data, loading, inspect, totalCount, refetch = noop } = useQuery<{}, HistogramAggregation>(
+    {
+      endDate,
+      errorMessage,
+      filterQuery,
+      histogramType,
+      indexToAdd,
+      startDate,
+      isInspected,
+      stackByField: selectedStackByOption.value,
+    }
+  );
+
+  const titleWithStackByField = useMemo(
+    () => (title != null && typeof title === 'function' ? title(selectedStackByOption) : title),
+    [title, selectedStackByOption]
+  );
+  const subtitleWithCounts = useMemo(() => {
+    if (isInitialLoading) {
+      return null;
+    }
+
+    if (typeof subtitle === 'function') {
+      return totalCount >= 0 ? subtitle(totalCount) : null;
+    }
+
+    return subtitle;
+  }, [isInitialLoading, subtitle, totalCount]);
+  const hideHistogram = useMemo(() => (totalCount <= 0 && hideHistogramIfEmpty ? true : false), [
+    totalCount,
+    hideHistogramIfEmpty,
+  ]);
+  const barChartData = useMemo(() => getCustomChartData(data, mapping), [data, mapping]);
+
+  useEffect(() => {
+    if (!loading && !isInitialLoading) {
+      setQuery({ id, inspect, loading, refetch });
+    }
+
+    if (isInitialLoading && !!barChartData && data) {
+      setIsInitialLoading(false);
+    }
+  }, [
+    setQuery,
+    id,
+    inspect,
+    loading,
+    refetch,
+    isInitialLoading,
+    barChartData,
+    data,
+    setIsInitialLoading,
+  ]);
+
+  if (hideHistogram) {
+    return null;
+  }
+
+  return (
+    <>
+      <InspectButtonContainer show={!isInitialLoading}>
+        <HistogramPanel data-test-subj={`${id}Panel`} height={panelHeight}>
+          {loading && !isInitialLoading && (
+            <EuiProgress
+              data-test-subj="initialLoadingPanelMatrixOverTime"
+              size="xs"
+              position="absolute"
+              color="accent"
+            />
+          )}
+
+          <HeaderSection
+            id={id}
+            title={titleWithStackByField}
+            titleSize={titleSize}
+            subtitle={subtitleWithCounts}
+          >
+            <EuiFlexGroup alignItems="center" gutterSize="none">
+              <EuiFlexItem grow={false}>
+                {stackByOptions.length > 1 && (
+                  <EuiSelect
+                    onChange={setSelectedChartOptionCallback}
+                    options={stackByOptions}
+                    prepend={i18n.STACK_BY}
+                    value={selectedStackByOption?.value}
+                  />
+                )}
+              </EuiFlexItem>
+              <HeaderChildrenFlexItem grow={false}>{headerChildren}</HeaderChildrenFlexItem>
+            </EuiFlexGroup>
+          </HeaderSection>
+
+          {isInitialLoading ? (
+            <MatrixLoader />
+          ) : (
+            <BarChart
+              barChart={barChartData}
+              configs={barchartConfigs}
+              stackByField={selectedStackByOption.value}
+            />
+          )}
+        </HistogramPanel>
+      </InspectButtonContainer>
+      {showSpacer && <EuiSpacer data-test-subj="spacer" size="l" />}
+    </>
+  );
+};
+
+export const MatrixHistogram = React.memo(MatrixHistogramComponent);
+
+const makeMapStateToProps = () => {
+  const getQuery = inputsSelectors.globalQueryByIdSelector();
+  const mapStateToProps = (state: State, { type, id }: OwnProps) => {
+    const { isInspected } = getQuery(state, id);
+    return {
+      isInspected,
+    };
+  };
+  return mapStateToProps;
+};
+
+export const MatrixHistogramContainer = compose<React.ComponentClass<OwnProps>>(
+  connect(makeMapStateToProps, {
+    dispatchSetAbsoluteRangeDatePicker: setAbsoluteRangeDatePicker,
+  })
+)(MatrixHistogram);
diff --git a/x-pack/plugins/siem/public/components/matrix_histogram/matrix_loader.tsx b/x-pack/plugins/siem/public/common/components/matrix_histogram/matrix_loader.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/matrix_histogram/matrix_loader.tsx
rename to x-pack/plugins/siem/public/common/components/matrix_histogram/matrix_loader.tsx
diff --git a/x-pack/plugins/siem/public/components/matrix_histogram/translations.ts b/x-pack/plugins/siem/public/common/components/matrix_histogram/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/matrix_histogram/translations.ts
rename to x-pack/plugins/siem/public/common/components/matrix_histogram/translations.ts
diff --git a/x-pack/plugins/siem/public/common/components/matrix_histogram/types.ts b/x-pack/plugins/siem/public/common/components/matrix_histogram/types.ts
new file mode 100644
index 00000000000000..e30f1e9374c266
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/matrix_histogram/types.ts
@@ -0,0 +1,143 @@
+/*
+ * 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 { EuiTitleSize } from '@elastic/eui';
+import { ScaleType, Position, TickFormatter } from '@elastic/charts';
+import { ActionCreator } from 'redux';
+import { ESQuery } from '../../../../common/typed_json';
+import { SetQuery } from '../../../hosts/pages/navigation/types';
+import { InputsModelId } from '../../store/inputs/constants';
+import { HistogramType } from '../../../graphql/types';
+import { UpdateDateRange } from '../charts/common';
+
+export type MatrixHistogramMappingTypes = Record<
+  string,
+  { key: string; value: null; color?: string | undefined }
+>;
+export interface MatrixHistogramOption {
+  text: string;
+  value: string;
+}
+
+export type GetSubTitle = (count: number) => string;
+export type GetTitle = (matrixHistogramOption: MatrixHistogramOption) => string;
+
+export interface MatrixHisrogramConfigs {
+  defaultStackByOption: MatrixHistogramOption;
+  errorMessage: string;
+  hideHistogramIfEmpty?: boolean;
+  histogramType: HistogramType;
+  legendPosition?: Position;
+  mapping?: MatrixHistogramMappingTypes;
+  stackByOptions: MatrixHistogramOption[];
+  subtitle?: string | GetSubTitle;
+  title: string | GetTitle;
+  titleSize?: EuiTitleSize;
+}
+
+interface MatrixHistogramBasicProps {
+  chartHeight?: number;
+  defaultIndex: string[];
+  defaultStackByOption: MatrixHistogramOption;
+  dispatchSetAbsoluteRangeDatePicker: ActionCreator<{
+    id: InputsModelId;
+    from: number;
+    to: number;
+  }>;
+  endDate: number;
+  headerChildren?: React.ReactNode;
+  hideHistogramIfEmpty?: boolean;
+  id: string;
+  legendPosition?: Position;
+  mapping?: MatrixHistogramMappingTypes;
+  panelHeight?: number;
+  setQuery: SetQuery;
+  startDate: number;
+  stackByOptions: MatrixHistogramOption[];
+  subtitle?: string | GetSubTitle;
+  title?: string | GetTitle;
+  titleSize?: EuiTitleSize;
+}
+
+export interface MatrixHistogramQueryProps {
+  endDate: number;
+  errorMessage: string;
+  filterQuery?: ESQuery | string | undefined;
+  setAbsoluteRangeDatePicker?: ActionCreator<{
+    id: InputsModelId;
+    from: number;
+    to: number;
+  }>;
+  setAbsoluteRangeDatePickerTarget?: InputsModelId;
+  stackByField: string;
+  startDate: number;
+  indexToAdd?: string[] | null;
+  isInspected: boolean;
+  histogramType: HistogramType;
+}
+
+export interface MatrixHistogramProps extends MatrixHistogramBasicProps {
+  scaleType?: ScaleType;
+  yTickFormatter?: (value: number) => string;
+  showLegend?: boolean;
+  showSpacer?: boolean;
+  legendPosition?: Position;
+}
+
+export interface HistogramBucket {
+  key_as_string: string;
+  key: number;
+  doc_count: number;
+}
+export interface GroupBucket {
+  key: string;
+  signals: {
+    buckets: HistogramBucket[];
+  };
+}
+
+export interface HistogramAggregation {
+  histogramAgg: {
+    buckets: GroupBucket[];
+  };
+}
+
+export interface BarchartConfigs {
+  series: {
+    xScaleType: ScaleType;
+    yScaleType: ScaleType;
+    stackAccessors: string[];
+  };
+  axis: {
+    xTickFormatter: TickFormatter;
+    yTickFormatter: TickFormatter;
+    tickSize: number;
+  };
+  settings: {
+    legendPosition: Position;
+    onBrushEnd: UpdateDateRange;
+    showLegend: boolean;
+    showLegendExtra: boolean;
+    theme: {
+      scales: {
+        barsPadding: number;
+      };
+      chartMargins: {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+      };
+      chartPaddings: {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+      };
+    };
+  };
+  customHeight: number;
+}
diff --git a/x-pack/plugins/siem/public/components/matrix_histogram/utils.test.ts b/x-pack/plugins/siem/public/common/components/matrix_histogram/utils.test.ts
similarity index 98%
rename from x-pack/plugins/siem/public/components/matrix_histogram/utils.test.ts
rename to x-pack/plugins/siem/public/common/components/matrix_histogram/utils.test.ts
index 2c34a307bfdedd..9e3ddcc014c61b 100644
--- a/x-pack/plugins/siem/public/components/matrix_histogram/utils.test.ts
+++ b/x-pack/plugins/siem/public/common/components/matrix_histogram/utils.test.ts
@@ -13,7 +13,7 @@ import {
 } from './utils';
 import { UpdateDateRange } from '../charts/common';
 import { Position } from '@elastic/charts';
-import { MatrixOverTimeHistogramData } from '../../graphql/types';
+import { MatrixOverTimeHistogramData } from '../../../graphql/types';
 import { BarchartConfigs } from './types';
 
 describe('utils', () => {
diff --git a/x-pack/plugins/siem/public/common/components/matrix_histogram/utils.ts b/x-pack/plugins/siem/public/common/components/matrix_histogram/utils.ts
new file mode 100644
index 00000000000000..45e9c54b2eff87
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/matrix_histogram/utils.ts
@@ -0,0 +1,108 @@
+/*
+ * 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 { ScaleType, Position } from '@elastic/charts';
+import { get, groupBy, map, toPairs } from 'lodash/fp';
+
+import { UpdateDateRange, ChartSeriesData } from '../charts/common';
+import { MatrixHistogramMappingTypes, BarchartConfigs } from './types';
+import { MatrixOverTimeHistogramData } from '../../../graphql/types';
+import { histogramDateTimeFormatter } from '../utils';
+
+interface GetBarchartConfigsProps {
+  chartHeight?: number;
+  from: number;
+  legendPosition?: Position;
+  to: number;
+  onBrushEnd: UpdateDateRange;
+  yTickFormatter?: (value: number) => string;
+  showLegend?: boolean;
+}
+
+export const DEFAULT_CHART_HEIGHT = 174;
+export const DEFAULT_Y_TICK_FORMATTER = (value: string | number): string => value.toLocaleString();
+
+export const getBarchartConfigs = ({
+  chartHeight,
+  from,
+  legendPosition,
+  to,
+  onBrushEnd,
+  yTickFormatter,
+  showLegend,
+}: GetBarchartConfigsProps): BarchartConfigs => ({
+  series: {
+    xScaleType: ScaleType.Time,
+    yScaleType: ScaleType.Linear,
+    stackAccessors: ['g'],
+  },
+  axis: {
+    xTickFormatter: histogramDateTimeFormatter([from, to]),
+    yTickFormatter: yTickFormatter != null ? yTickFormatter : DEFAULT_Y_TICK_FORMATTER,
+    tickSize: 8,
+  },
+  settings: {
+    legendPosition: legendPosition ?? Position.Right,
+    onBrushEnd,
+    showLegend: showLegend ?? true,
+    showLegendExtra: true,
+    theme: {
+      scales: {
+        barsPadding: 0.08,
+      },
+      chartMargins: {
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+      },
+      chartPaddings: {
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+      },
+    },
+  },
+  customHeight: chartHeight ?? DEFAULT_CHART_HEIGHT,
+});
+
+export const defaultLegendColors = [
+  '#1EA593',
+  '#2B70F7',
+  '#CE0060',
+  '#38007E',
+  '#FCA5D3',
+  '#F37020',
+  '#E49E29',
+  '#B0916F',
+  '#7B000B',
+  '#34130C',
+];
+
+export const formatToChartDataItem = ([key, value]: [
+  string,
+  MatrixOverTimeHistogramData[]
+]): ChartSeriesData => ({
+  key,
+  value,
+});
+
+export const getCustomChartData = (
+  data: MatrixOverTimeHistogramData[] | null,
+  mapping?: MatrixHistogramMappingTypes
+): ChartSeriesData[] => {
+  if (!data) return [];
+  const dataGroupedByEvent = groupBy('g', data);
+  const dataGroupedEntries = toPairs(dataGroupedByEvent);
+  const formattedChartData = map(formatToChartDataItem, dataGroupedEntries);
+
+  if (mapping)
+    return map((item: ChartSeriesData) => {
+      const mapItem = get(item.key, mapping);
+      return { ...item, color: mapItem?.color };
+    }, formattedChartData);
+  else return formattedChartData;
+};
diff --git a/x-pack/plugins/siem/public/components/ml/__snapshots__/entity_draggable.test.tsx.snap b/x-pack/plugins/siem/public/common/components/ml/__snapshots__/entity_draggable.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/__snapshots__/entity_draggable.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/ml/__snapshots__/entity_draggable.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/ml/anomaly/anomaly_table_provider.tsx b/x-pack/plugins/siem/public/common/components/ml/anomaly/anomaly_table_provider.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/anomaly/anomaly_table_provider.tsx
rename to x-pack/plugins/siem/public/common/components/ml/anomaly/anomaly_table_provider.tsx
diff --git a/x-pack/plugins/siem/public/components/ml/anomaly/get_interval_from_anomalies.test.ts b/x-pack/plugins/siem/public/common/components/ml/anomaly/get_interval_from_anomalies.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/anomaly/get_interval_from_anomalies.test.ts
rename to x-pack/plugins/siem/public/common/components/ml/anomaly/get_interval_from_anomalies.test.ts
diff --git a/x-pack/plugins/siem/public/components/ml/anomaly/get_interval_from_anomalies.ts b/x-pack/plugins/siem/public/common/components/ml/anomaly/get_interval_from_anomalies.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/anomaly/get_interval_from_anomalies.ts
rename to x-pack/plugins/siem/public/common/components/ml/anomaly/get_interval_from_anomalies.ts
diff --git a/x-pack/plugins/siem/public/components/ml/anomaly/translations.ts b/x-pack/plugins/siem/public/common/components/ml/anomaly/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/anomaly/translations.ts
rename to x-pack/plugins/siem/public/common/components/ml/anomaly/translations.ts
diff --git a/x-pack/plugins/siem/public/components/ml/anomaly/use_anomalies_table_data.test.ts b/x-pack/plugins/siem/public/common/components/ml/anomaly/use_anomalies_table_data.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/anomaly/use_anomalies_table_data.test.ts
rename to x-pack/plugins/siem/public/common/components/ml/anomaly/use_anomalies_table_data.test.ts
diff --git a/x-pack/plugins/siem/public/components/ml/anomaly/use_anomalies_table_data.ts b/x-pack/plugins/siem/public/common/components/ml/anomaly/use_anomalies_table_data.ts
similarity index 95%
rename from x-pack/plugins/siem/public/components/ml/anomaly/use_anomalies_table_data.ts
rename to x-pack/plugins/siem/public/common/components/ml/anomaly/use_anomalies_table_data.ts
index 67efda67a20a32..51300d91450003 100644
--- a/x-pack/plugins/siem/public/components/ml/anomaly/use_anomalies_table_data.ts
+++ b/x-pack/plugins/siem/public/common/components/ml/anomaly/use_anomalies_table_data.ts
@@ -6,10 +6,10 @@
 
 import { useState, useEffect } from 'react';
 
-import { DEFAULT_ANOMALY_SCORE } from '../../../../common/constants';
+import { DEFAULT_ANOMALY_SCORE } from '../../../../../common/constants';
 import { anomaliesTableData } from '../api/anomalies_table_data';
 import { InfluencerInput, Anomalies, CriteriaFields } from '../types';
-import { hasMlUserPermissions } from '../../../../common/machine_learning/has_ml_user_permissions';
+import { hasMlUserPermissions } from '../../../../../common/machine_learning/has_ml_user_permissions';
 import { useSiemJobs } from '../../ml_popover/hooks/use_siem_jobs';
 import { useMlCapabilities } from '../../ml_popover/hooks/use_ml_capabilities';
 import { useStateToaster, errorToToaster } from '../../toasters';
diff --git a/x-pack/plugins/siem/public/components/ml/api/anomalies_table_data.ts b/x-pack/plugins/siem/public/common/components/ml/api/anomalies_table_data.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/api/anomalies_table_data.ts
rename to x-pack/plugins/siem/public/common/components/ml/api/anomalies_table_data.ts
diff --git a/x-pack/plugins/siem/public/components/ml/api/errors.ts b/x-pack/plugins/siem/public/common/components/ml/api/errors.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/api/errors.ts
rename to x-pack/plugins/siem/public/common/components/ml/api/errors.ts
diff --git a/x-pack/plugins/siem/public/components/ml/api/get_ml_capabilities.ts b/x-pack/plugins/siem/public/common/components/ml/api/get_ml_capabilities.ts
similarity index 92%
rename from x-pack/plugins/siem/public/components/ml/api/get_ml_capabilities.ts
rename to x-pack/plugins/siem/public/common/components/ml/api/get_ml_capabilities.ts
index e6a792e779b0cc..32f6f888ab8d71 100644
--- a/x-pack/plugins/siem/public/components/ml/api/get_ml_capabilities.ts
+++ b/x-pack/plugins/siem/public/common/components/ml/api/get_ml_capabilities.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { MlCapabilitiesResponse } from '../../../../../ml/public';
+import { MlCapabilitiesResponse } from '../../../../../../ml/public';
 import { KibanaServices } from '../../../lib/kibana';
 import { InfluencerInput } from '../types';
 
diff --git a/x-pack/plugins/siem/public/components/ml/api/throw_if_not_ok.test.ts b/x-pack/plugins/siem/public/common/components/ml/api/throw_if_not_ok.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/api/throw_if_not_ok.test.ts
rename to x-pack/plugins/siem/public/common/components/ml/api/throw_if_not_ok.test.ts
diff --git a/x-pack/plugins/siem/public/components/ml/api/throw_if_not_ok.ts b/x-pack/plugins/siem/public/common/components/ml/api/throw_if_not_ok.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/api/throw_if_not_ok.ts
rename to x-pack/plugins/siem/public/common/components/ml/api/throw_if_not_ok.ts
diff --git a/x-pack/plugins/siem/public/components/ml/api/translations.ts b/x-pack/plugins/siem/public/common/components/ml/api/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/api/translations.ts
rename to x-pack/plugins/siem/public/common/components/ml/api/translations.ts
diff --git a/x-pack/plugins/siem/public/components/ml/conditional_links/add_entities_to_kql.test.ts b/x-pack/plugins/siem/public/common/components/ml/conditional_links/add_entities_to_kql.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/conditional_links/add_entities_to_kql.test.ts
rename to x-pack/plugins/siem/public/common/components/ml/conditional_links/add_entities_to_kql.test.ts
diff --git a/x-pack/plugins/siem/public/components/ml/conditional_links/add_entities_to_kql.ts b/x-pack/plugins/siem/public/common/components/ml/conditional_links/add_entities_to_kql.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/conditional_links/add_entities_to_kql.ts
rename to x-pack/plugins/siem/public/common/components/ml/conditional_links/add_entities_to_kql.ts
diff --git a/x-pack/plugins/siem/public/components/ml/conditional_links/entity_helpers.test.ts b/x-pack/plugins/siem/public/common/components/ml/conditional_links/entity_helpers.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/conditional_links/entity_helpers.test.ts
rename to x-pack/plugins/siem/public/common/components/ml/conditional_links/entity_helpers.test.ts
diff --git a/x-pack/plugins/siem/public/components/ml/conditional_links/entity_helpers.ts b/x-pack/plugins/siem/public/common/components/ml/conditional_links/entity_helpers.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/conditional_links/entity_helpers.ts
rename to x-pack/plugins/siem/public/common/components/ml/conditional_links/entity_helpers.ts
diff --git a/x-pack/plugins/siem/public/components/ml/conditional_links/ml_host_conditional_container.tsx b/x-pack/plugins/siem/public/common/components/ml/conditional_links/ml_host_conditional_container.tsx
similarity index 94%
rename from x-pack/plugins/siem/public/components/ml/conditional_links/ml_host_conditional_container.tsx
rename to x-pack/plugins/siem/public/common/components/ml/conditional_links/ml_host_conditional_container.tsx
index b7c544273ae927..6ca723c50c6817 100644
--- a/x-pack/plugins/siem/public/components/ml/conditional_links/ml_host_conditional_container.tsx
+++ b/x-pack/plugins/siem/public/common/components/ml/conditional_links/ml_host_conditional_container.tsx
@@ -11,10 +11,10 @@ import { Redirect, Route, Switch, RouteComponentProps } from 'react-router-dom';
 import { addEntitiesToKql } from './add_entities_to_kql';
 import { replaceKQLParts } from './replace_kql_parts';
 import { emptyEntity, multipleEntities, getMultipleEntities } from './entity_helpers';
-import { SiemPageName } from '../../../pages/home/types';
-import { HostsTableType } from '../../../store/hosts/model';
+import { SiemPageName } from '../../../../app/types';
+import { HostsTableType } from '../../../../hosts/store/model';
 
-import { url as urlUtils } from '../../../../../../../src/plugins/kibana_utils/public';
+import { url as urlUtils } from '../../../../../../../../src/plugins/kibana_utils/public';
 
 interface QueryStringType {
   '?_g': string;
diff --git a/x-pack/plugins/siem/public/components/ml/conditional_links/ml_network_conditional_container.tsx b/x-pack/plugins/siem/public/common/components/ml/conditional_links/ml_network_conditional_container.tsx
similarity index 95%
rename from x-pack/plugins/siem/public/components/ml/conditional_links/ml_network_conditional_container.tsx
rename to x-pack/plugins/siem/public/common/components/ml/conditional_links/ml_network_conditional_container.tsx
index 54773e3ab6dda7..05049cd9b4ea5e 100644
--- a/x-pack/plugins/siem/public/components/ml/conditional_links/ml_network_conditional_container.tsx
+++ b/x-pack/plugins/siem/public/common/components/ml/conditional_links/ml_network_conditional_container.tsx
@@ -11,9 +11,9 @@ import { Redirect, Route, Switch, RouteComponentProps } from 'react-router-dom';
 import { addEntitiesToKql } from './add_entities_to_kql';
 import { replaceKQLParts } from './replace_kql_parts';
 import { emptyEntity, getMultipleEntities, multipleEntities } from './entity_helpers';
-import { SiemPageName } from '../../../pages/home/types';
+import { SiemPageName } from '../../../../app/types';
 
-import { url as urlUtils } from '../../../../../../../src/plugins/kibana_utils/public';
+import { url as urlUtils } from '../../../../../../../../src/plugins/kibana_utils/public';
 
 interface QueryStringType {
   '?_g': string;
diff --git a/x-pack/plugins/siem/public/components/ml/conditional_links/remove_kql_variables.test.ts b/x-pack/plugins/siem/public/common/components/ml/conditional_links/remove_kql_variables.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/conditional_links/remove_kql_variables.test.ts
rename to x-pack/plugins/siem/public/common/components/ml/conditional_links/remove_kql_variables.test.ts
diff --git a/x-pack/plugins/siem/public/components/ml/conditional_links/remove_kql_variables.ts b/x-pack/plugins/siem/public/common/components/ml/conditional_links/remove_kql_variables.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/conditional_links/remove_kql_variables.ts
rename to x-pack/plugins/siem/public/common/components/ml/conditional_links/remove_kql_variables.ts
diff --git a/x-pack/plugins/siem/public/components/ml/conditional_links/replace_kql_commas_with_or.test.ts b/x-pack/plugins/siem/public/common/components/ml/conditional_links/replace_kql_commas_with_or.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/conditional_links/replace_kql_commas_with_or.test.ts
rename to x-pack/plugins/siem/public/common/components/ml/conditional_links/replace_kql_commas_with_or.test.ts
diff --git a/x-pack/plugins/siem/public/components/ml/conditional_links/replace_kql_commas_with_or.ts b/x-pack/plugins/siem/public/common/components/ml/conditional_links/replace_kql_commas_with_or.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/conditional_links/replace_kql_commas_with_or.ts
rename to x-pack/plugins/siem/public/common/components/ml/conditional_links/replace_kql_commas_with_or.ts
diff --git a/x-pack/plugins/siem/public/components/ml/conditional_links/replace_kql_parts.test.ts b/x-pack/plugins/siem/public/common/components/ml/conditional_links/replace_kql_parts.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/conditional_links/replace_kql_parts.test.ts
rename to x-pack/plugins/siem/public/common/components/ml/conditional_links/replace_kql_parts.test.ts
diff --git a/x-pack/plugins/siem/public/components/ml/conditional_links/replace_kql_parts.ts b/x-pack/plugins/siem/public/common/components/ml/conditional_links/replace_kql_parts.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/conditional_links/replace_kql_parts.ts
rename to x-pack/plugins/siem/public/common/components/ml/conditional_links/replace_kql_parts.ts
diff --git a/x-pack/plugins/siem/public/components/ml/conditional_links/rison_helpers.test.ts b/x-pack/plugins/siem/public/common/components/ml/conditional_links/rison_helpers.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/conditional_links/rison_helpers.test.ts
rename to x-pack/plugins/siem/public/common/components/ml/conditional_links/rison_helpers.test.ts
diff --git a/x-pack/plugins/siem/public/components/ml/conditional_links/rison_helpers.ts b/x-pack/plugins/siem/public/common/components/ml/conditional_links/rison_helpers.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/conditional_links/rison_helpers.ts
rename to x-pack/plugins/siem/public/common/components/ml/conditional_links/rison_helpers.ts
diff --git a/x-pack/plugins/siem/public/components/ml/criteria/get_criteria_from_host_type.test.ts b/x-pack/plugins/siem/public/common/components/ml/criteria/get_criteria_from_host_type.test.ts
similarity index 94%
rename from x-pack/plugins/siem/public/components/ml/criteria/get_criteria_from_host_type.test.ts
rename to x-pack/plugins/siem/public/common/components/ml/criteria/get_criteria_from_host_type.test.ts
index d8e951adabbc9e..215df22f4a2558 100644
--- a/x-pack/plugins/siem/public/components/ml/criteria/get_criteria_from_host_type.test.ts
+++ b/x-pack/plugins/siem/public/common/components/ml/criteria/get_criteria_from_host_type.test.ts
@@ -5,7 +5,7 @@
  */
 
 import { getCriteriaFromHostType } from './get_criteria_from_host_type';
-import { HostsType } from '../../../store/hosts/model';
+import { HostsType } from '../../../../hosts/store/model';
 
 describe('get_criteria_from_host_type', () => {
   test('returns host names from criteria if the host type is details', () => {
diff --git a/x-pack/plugins/siem/public/components/ml/criteria/get_criteria_from_host_type.ts b/x-pack/plugins/siem/public/common/components/ml/criteria/get_criteria_from_host_type.ts
similarity index 90%
rename from x-pack/plugins/siem/public/components/ml/criteria/get_criteria_from_host_type.ts
rename to x-pack/plugins/siem/public/common/components/ml/criteria/get_criteria_from_host_type.ts
index 2667e3a089f41b..5988f0d1001b28 100644
--- a/x-pack/plugins/siem/public/components/ml/criteria/get_criteria_from_host_type.ts
+++ b/x-pack/plugins/siem/public/common/components/ml/criteria/get_criteria_from_host_type.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { HostsType } from '../../../store/hosts/model';
+import { HostsType } from '../../../../hosts/store/model';
 import { CriteriaFields } from '../types';
 
 export const getCriteriaFromHostType = (
diff --git a/x-pack/plugins/siem/public/components/ml/criteria/get_criteria_from_network_type.test.ts b/x-pack/plugins/siem/public/common/components/ml/criteria/get_criteria_from_network_type.test.ts
similarity index 92%
rename from x-pack/plugins/siem/public/components/ml/criteria/get_criteria_from_network_type.test.ts
rename to x-pack/plugins/siem/public/common/components/ml/criteria/get_criteria_from_network_type.test.ts
index fe1cd77a611955..07bdee140a0cdd 100644
--- a/x-pack/plugins/siem/public/components/ml/criteria/get_criteria_from_network_type.test.ts
+++ b/x-pack/plugins/siem/public/common/components/ml/criteria/get_criteria_from_network_type.test.ts
@@ -5,8 +5,8 @@
  */
 
 import { getCriteriaFromNetworkType } from './get_criteria_from_network_type';
-import { NetworkType } from '../../../store/network/model';
-import { FlowTarget } from '../../../graphql/types';
+import { NetworkType } from '../../../../network/store/model';
+import { FlowTarget } from '../../../../graphql/types';
 
 describe('get_criteria_from_network_type', () => {
   test('returns network names from criteria if the network type is details and it is source', () => {
diff --git a/x-pack/plugins/siem/public/components/ml/criteria/get_criteria_from_network_type.ts b/x-pack/plugins/siem/public/common/components/ml/criteria/get_criteria_from_network_type.ts
similarity index 86%
rename from x-pack/plugins/siem/public/components/ml/criteria/get_criteria_from_network_type.ts
rename to x-pack/plugins/siem/public/common/components/ml/criteria/get_criteria_from_network_type.ts
index 75c7e580f93c04..d717edea97cce1 100644
--- a/x-pack/plugins/siem/public/components/ml/criteria/get_criteria_from_network_type.ts
+++ b/x-pack/plugins/siem/public/common/components/ml/criteria/get_criteria_from_network_type.ts
@@ -5,8 +5,8 @@
  */
 
 import { CriteriaFields } from '../types';
-import { NetworkType } from '../../../store/network/model';
-import { FlowTarget } from '../../../graphql/types';
+import { NetworkType } from '../../../../network/store/model';
+import { FlowTarget } from '../../../../graphql/types';
 
 export const getCriteriaFromNetworkType = (
   type: NetworkType,
diff --git a/x-pack/plugins/siem/public/components/ml/criteria/host_to_criteria.test.ts b/x-pack/plugins/siem/public/common/components/ml/criteria/host_to_criteria.test.ts
similarity index 95%
rename from x-pack/plugins/siem/public/components/ml/criteria/host_to_criteria.test.ts
rename to x-pack/plugins/siem/public/common/components/ml/criteria/host_to_criteria.test.ts
index 8cc672ab4321cb..bdd107145516f3 100644
--- a/x-pack/plugins/siem/public/components/ml/criteria/host_to_criteria.test.ts
+++ b/x-pack/plugins/siem/public/common/components/ml/criteria/host_to_criteria.test.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { HostItem } from '../../../graphql/types';
+import { HostItem } from '../../../../graphql/types';
 import { CriteriaFields } from '../types';
 import { hostToCriteria } from './host_to_criteria';
 
diff --git a/x-pack/plugins/siem/public/components/ml/criteria/host_to_criteria.ts b/x-pack/plugins/siem/public/common/components/ml/criteria/host_to_criteria.ts
similarity index 91%
rename from x-pack/plugins/siem/public/components/ml/criteria/host_to_criteria.ts
rename to x-pack/plugins/siem/public/common/components/ml/criteria/host_to_criteria.ts
index aeb5fa2646822a..f708bd43b8c9bf 100644
--- a/x-pack/plugins/siem/public/components/ml/criteria/host_to_criteria.ts
+++ b/x-pack/plugins/siem/public/common/components/ml/criteria/host_to_criteria.ts
@@ -5,7 +5,7 @@
  */
 
 import { CriteriaFields } from '../types';
-import { HostItem } from '../../../graphql/types';
+import { HostItem } from '../../../../graphql/types';
 
 export const hostToCriteria = (hostItem: HostItem): CriteriaFields[] => {
   if (hostItem.host != null && hostItem.host.name != null) {
diff --git a/x-pack/plugins/siem/public/components/ml/criteria/network_to_criteria.test.ts b/x-pack/plugins/siem/public/common/components/ml/criteria/network_to_criteria.test.ts
similarity index 95%
rename from x-pack/plugins/siem/public/components/ml/criteria/network_to_criteria.test.ts
rename to x-pack/plugins/siem/public/common/components/ml/criteria/network_to_criteria.test.ts
index d6abb4a42e80f6..6c0d2fc60a6264 100644
--- a/x-pack/plugins/siem/public/components/ml/criteria/network_to_criteria.test.ts
+++ b/x-pack/plugins/siem/public/common/components/ml/criteria/network_to_criteria.test.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { FlowTarget } from '../../../graphql/types';
+import { FlowTarget } from '../../../../graphql/types';
 import { CriteriaFields } from '../types';
 import { networkToCriteria } from './network_to_criteria';
 
diff --git a/x-pack/plugins/siem/public/components/ml/criteria/network_to_criteria.ts b/x-pack/plugins/siem/public/common/components/ml/criteria/network_to_criteria.ts
similarity index 91%
rename from x-pack/plugins/siem/public/components/ml/criteria/network_to_criteria.ts
rename to x-pack/plugins/siem/public/common/components/ml/criteria/network_to_criteria.ts
index a859931d6e228f..de2cc35007e870 100644
--- a/x-pack/plugins/siem/public/components/ml/criteria/network_to_criteria.ts
+++ b/x-pack/plugins/siem/public/common/components/ml/criteria/network_to_criteria.ts
@@ -5,7 +5,7 @@
  */
 
 import { CriteriaFields } from '../types';
-import { FlowTarget } from '../../../graphql/types';
+import { FlowTarget } from '../../../../graphql/types';
 
 export const networkToCriteria = (ip: string, flowTarget: FlowTarget): CriteriaFields[] => {
   if (flowTarget === FlowTarget.source) {
diff --git a/x-pack/plugins/siem/public/components/ml/entity_draggable.test.tsx b/x-pack/plugins/siem/public/common/components/ml/entity_draggable.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/entity_draggable.test.tsx
rename to x-pack/plugins/siem/public/common/components/ml/entity_draggable.test.tsx
diff --git a/x-pack/plugins/siem/public/components/ml/entity_draggable.tsx b/x-pack/plugins/siem/public/common/components/ml/entity_draggable.tsx
similarity index 88%
rename from x-pack/plugins/siem/public/components/ml/entity_draggable.tsx
rename to x-pack/plugins/siem/public/common/components/ml/entity_draggable.tsx
index b0636b08a56346..9024aec17400c8 100644
--- a/x-pack/plugins/siem/public/components/ml/entity_draggable.tsx
+++ b/x-pack/plugins/siem/public/common/components/ml/entity_draggable.tsx
@@ -6,8 +6,8 @@
 
 import React from 'react';
 import { DraggableWrapper, DragEffects } from '../drag_and_drop/draggable_wrapper';
-import { IS_OPERATOR } from '../timeline/data_providers/data_provider';
-import { Provider } from '../timeline/data_providers/provider';
+import { IS_OPERATOR } from '../../../timelines/components/timeline/data_providers/data_provider';
+import { Provider } from '../../../timelines/components/timeline/data_providers/provider';
 import { escapeDataProviderId } from '../drag_and_drop/helpers';
 
 interface Props {
diff --git a/x-pack/plugins/siem/public/components/ml/get_entries.test.ts b/x-pack/plugins/siem/public/common/components/ml/get_entries.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/get_entries.test.ts
rename to x-pack/plugins/siem/public/common/components/ml/get_entries.test.ts
diff --git a/x-pack/plugins/siem/public/components/ml/get_entries.ts b/x-pack/plugins/siem/public/common/components/ml/get_entries.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/get_entries.ts
rename to x-pack/plugins/siem/public/common/components/ml/get_entries.ts
diff --git a/x-pack/plugins/siem/public/components/ml/influencers/__snapshots__/create_influencers.test.tsx.snap b/x-pack/plugins/siem/public/common/components/ml/influencers/__snapshots__/create_influencers.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/influencers/__snapshots__/create_influencers.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/ml/influencers/__snapshots__/create_influencers.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/ml/influencers/create_influencers.test.tsx b/x-pack/plugins/siem/public/common/components/ml/influencers/create_influencers.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/influencers/create_influencers.test.tsx
rename to x-pack/plugins/siem/public/common/components/ml/influencers/create_influencers.test.tsx
diff --git a/x-pack/plugins/siem/public/components/ml/influencers/create_influencers.tsx b/x-pack/plugins/siem/public/common/components/ml/influencers/create_influencers.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/influencers/create_influencers.tsx
rename to x-pack/plugins/siem/public/common/components/ml/influencers/create_influencers.tsx
diff --git a/x-pack/plugins/siem/public/components/ml/influencers/get_host_name_from_influencers.test.ts b/x-pack/plugins/siem/public/common/components/ml/influencers/get_host_name_from_influencers.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/influencers/get_host_name_from_influencers.test.ts
rename to x-pack/plugins/siem/public/common/components/ml/influencers/get_host_name_from_influencers.test.ts
diff --git a/x-pack/plugins/siem/public/components/ml/influencers/get_host_name_from_influencers.ts b/x-pack/plugins/siem/public/common/components/ml/influencers/get_host_name_from_influencers.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/influencers/get_host_name_from_influencers.ts
rename to x-pack/plugins/siem/public/common/components/ml/influencers/get_host_name_from_influencers.ts
diff --git a/x-pack/plugins/siem/public/components/ml/influencers/get_network_from_influencers.test.ts b/x-pack/plugins/siem/public/common/components/ml/influencers/get_network_from_influencers.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/influencers/get_network_from_influencers.test.ts
rename to x-pack/plugins/siem/public/common/components/ml/influencers/get_network_from_influencers.test.ts
diff --git a/x-pack/plugins/siem/public/components/ml/influencers/get_network_from_influencers.ts b/x-pack/plugins/siem/public/common/components/ml/influencers/get_network_from_influencers.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/influencers/get_network_from_influencers.ts
rename to x-pack/plugins/siem/public/common/components/ml/influencers/get_network_from_influencers.ts
diff --git a/x-pack/plugins/siem/public/components/ml/influencers/host_to_influencers.test.ts b/x-pack/plugins/siem/public/common/components/ml/influencers/host_to_influencers.test.ts
similarity index 95%
rename from x-pack/plugins/siem/public/components/ml/influencers/host_to_influencers.test.ts
rename to x-pack/plugins/siem/public/common/components/ml/influencers/host_to_influencers.test.ts
index 47a1fd52e947f9..8e67168b6acd46 100644
--- a/x-pack/plugins/siem/public/components/ml/influencers/host_to_influencers.test.ts
+++ b/x-pack/plugins/siem/public/common/components/ml/influencers/host_to_influencers.test.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { HostItem } from '../../../graphql/types';
+import { HostItem } from '../../../../graphql/types';
 import { InfluencerInput } from '../types';
 import { hostToInfluencers } from './host_to_influencers';
 
diff --git a/x-pack/plugins/siem/public/components/ml/influencers/host_to_influencers.ts b/x-pack/plugins/siem/public/common/components/ml/influencers/host_to_influencers.ts
similarity index 92%
rename from x-pack/plugins/siem/public/components/ml/influencers/host_to_influencers.ts
rename to x-pack/plugins/siem/public/common/components/ml/influencers/host_to_influencers.ts
index 69d1b6e26ac724..ae7698a1bac882 100644
--- a/x-pack/plugins/siem/public/components/ml/influencers/host_to_influencers.ts
+++ b/x-pack/plugins/siem/public/common/components/ml/influencers/host_to_influencers.ts
@@ -5,7 +5,7 @@
  */
 
 import { InfluencerInput } from '../types';
-import { HostItem } from '../../../graphql/types';
+import { HostItem } from '../../../../graphql/types';
 
 export const hostToInfluencers = (hostItem: HostItem): InfluencerInput[] | null => {
   if (hostItem.host != null && hostItem.host.name != null) {
diff --git a/x-pack/plugins/siem/public/components/ml/influencers/network_to_influencers.test.ts b/x-pack/plugins/siem/public/common/components/ml/influencers/network_to_influencers.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/influencers/network_to_influencers.test.ts
rename to x-pack/plugins/siem/public/common/components/ml/influencers/network_to_influencers.test.ts
diff --git a/x-pack/plugins/siem/public/components/ml/influencers/network_to_influencers.ts b/x-pack/plugins/siem/public/common/components/ml/influencers/network_to_influencers.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/influencers/network_to_influencers.ts
rename to x-pack/plugins/siem/public/common/components/ml/influencers/network_to_influencers.ts
diff --git a/x-pack/plugins/siem/public/components/ml/links/create_explorer_link.test.ts b/x-pack/plugins/siem/public/common/components/ml/links/create_explorer_link.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/links/create_explorer_link.test.ts
rename to x-pack/plugins/siem/public/common/components/ml/links/create_explorer_link.test.ts
diff --git a/x-pack/plugins/siem/public/components/ml/links/create_explorer_link.ts b/x-pack/plugins/siem/public/common/components/ml/links/create_explorer_link.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/links/create_explorer_link.ts
rename to x-pack/plugins/siem/public/common/components/ml/links/create_explorer_link.ts
diff --git a/x-pack/plugins/siem/public/components/ml/links/create_series_link.test.ts b/x-pack/plugins/siem/public/common/components/ml/links/create_series_link.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/links/create_series_link.test.ts
rename to x-pack/plugins/siem/public/common/components/ml/links/create_series_link.test.ts
diff --git a/x-pack/plugins/siem/public/components/ml/links/create_series_link.ts b/x-pack/plugins/siem/public/common/components/ml/links/create_series_link.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/links/create_series_link.ts
rename to x-pack/plugins/siem/public/common/components/ml/links/create_series_link.ts
diff --git a/x-pack/plugins/siem/public/components/ml/mock.ts b/x-pack/plugins/siem/public/common/components/ml/mock.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/mock.ts
rename to x-pack/plugins/siem/public/common/components/ml/mock.ts
diff --git a/x-pack/plugins/siem/public/components/ml/permissions/ml_capabilities_provider.tsx b/x-pack/plugins/siem/public/common/components/ml/permissions/ml_capabilities_provider.tsx
similarity index 92%
rename from x-pack/plugins/siem/public/components/ml/permissions/ml_capabilities_provider.tsx
rename to x-pack/plugins/siem/public/common/components/ml/permissions/ml_capabilities_provider.tsx
index 9326c53b6064da..1d5c1b36e22af2 100644
--- a/x-pack/plugins/siem/public/components/ml/permissions/ml_capabilities_provider.tsx
+++ b/x-pack/plugins/siem/public/common/components/ml/permissions/ml_capabilities_provider.tsx
@@ -6,8 +6,8 @@
 
 import React, { useState, useEffect } from 'react';
 
-import { MlCapabilitiesResponse } from '../../../../../ml/public';
-import { emptyMlCapabilities } from '../../../../common/machine_learning/empty_ml_capabilities';
+import { MlCapabilitiesResponse } from '../../../../../../ml/public';
+import { emptyMlCapabilities } from '../../../../../common/machine_learning/empty_ml_capabilities';
 import { getMlCapabilities } from '../api/get_ml_capabilities';
 import { errorToToaster, useStateToaster } from '../../toasters';
 
diff --git a/x-pack/plugins/siem/public/components/ml/permissions/translations.ts b/x-pack/plugins/siem/public/common/components/ml/permissions/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/permissions/translations.ts
rename to x-pack/plugins/siem/public/common/components/ml/permissions/translations.ts
diff --git a/x-pack/plugins/siem/public/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap b/x-pack/plugins/siem/public/common/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/ml/score/__snapshots__/anomaly_scores.test.tsx.snap b/x-pack/plugins/siem/public/common/components/ml/score/__snapshots__/anomaly_scores.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/score/__snapshots__/anomaly_scores.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/ml/score/__snapshots__/anomaly_scores.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/ml/score/__snapshots__/create_descriptions_list.test.tsx.snap b/x-pack/plugins/siem/public/common/components/ml/score/__snapshots__/create_descriptions_list.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/score/__snapshots__/create_descriptions_list.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/ml/score/__snapshots__/create_descriptions_list.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/ml/score/__snapshots__/draggable_score.test.tsx.snap b/x-pack/plugins/siem/public/common/components/ml/score/__snapshots__/draggable_score.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/score/__snapshots__/draggable_score.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/ml/score/__snapshots__/draggable_score.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/ml/score/anomaly_score.test.tsx b/x-pack/plugins/siem/public/common/components/ml/score/anomaly_score.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/score/anomaly_score.test.tsx
rename to x-pack/plugins/siem/public/common/components/ml/score/anomaly_score.test.tsx
diff --git a/x-pack/plugins/siem/public/components/ml/score/anomaly_score.tsx b/x-pack/plugins/siem/public/common/components/ml/score/anomaly_score.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/score/anomaly_score.tsx
rename to x-pack/plugins/siem/public/common/components/ml/score/anomaly_score.tsx
diff --git a/x-pack/plugins/siem/public/components/ml/score/anomaly_scores.test.tsx b/x-pack/plugins/siem/public/common/components/ml/score/anomaly_scores.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/score/anomaly_scores.test.tsx
rename to x-pack/plugins/siem/public/common/components/ml/score/anomaly_scores.test.tsx
diff --git a/x-pack/plugins/siem/public/components/ml/score/anomaly_scores.tsx b/x-pack/plugins/siem/public/common/components/ml/score/anomaly_scores.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/score/anomaly_scores.tsx
rename to x-pack/plugins/siem/public/common/components/ml/score/anomaly_scores.tsx
diff --git a/x-pack/plugins/siem/public/components/ml/score/create_description_list.tsx b/x-pack/plugins/siem/public/common/components/ml/score/create_description_list.tsx
similarity index 97%
rename from x-pack/plugins/siem/public/components/ml/score/create_description_list.tsx
rename to x-pack/plugins/siem/public/common/components/ml/score/create_description_list.tsx
index e7615bf3b89ba8..0651bc5874860b 100644
--- a/x-pack/plugins/siem/public/components/ml/score/create_description_list.tsx
+++ b/x-pack/plugins/siem/public/common/components/ml/score/create_description_list.tsx
@@ -8,7 +8,7 @@ import { EuiText, EuiSpacer, EuiFlexGroup, EuiFlexItem, EuiLink } from '@elastic
 import React from 'react';
 import styled from 'styled-components';
 
-import { DescriptionList } from '../../../../common/utility_types';
+import { DescriptionList } from '../../../../../common/utility_types';
 import { Anomaly, NarrowDateRange } from '../types';
 import { getScoreString } from './score_health';
 import { PreferenceFormattedDate } from '../../formatted_date';
diff --git a/x-pack/plugins/siem/public/components/ml/score/create_descriptions_list.test.tsx b/x-pack/plugins/siem/public/common/components/ml/score/create_descriptions_list.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/score/create_descriptions_list.test.tsx
rename to x-pack/plugins/siem/public/common/components/ml/score/create_descriptions_list.test.tsx
diff --git a/x-pack/plugins/siem/public/components/ml/score/create_entities_from_score.test.ts b/x-pack/plugins/siem/public/common/components/ml/score/create_entities_from_score.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/score/create_entities_from_score.test.ts
rename to x-pack/plugins/siem/public/common/components/ml/score/create_entities_from_score.test.ts
diff --git a/x-pack/plugins/siem/public/components/ml/score/create_entities_from_score.ts b/x-pack/plugins/siem/public/common/components/ml/score/create_entities_from_score.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/score/create_entities_from_score.ts
rename to x-pack/plugins/siem/public/common/components/ml/score/create_entities_from_score.ts
diff --git a/x-pack/plugins/siem/public/components/ml/score/draggable_score.test.tsx b/x-pack/plugins/siem/public/common/components/ml/score/draggable_score.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/score/draggable_score.test.tsx
rename to x-pack/plugins/siem/public/common/components/ml/score/draggable_score.test.tsx
diff --git a/x-pack/plugins/siem/public/components/ml/score/draggable_score.tsx b/x-pack/plugins/siem/public/common/components/ml/score/draggable_score.tsx
similarity index 89%
rename from x-pack/plugins/siem/public/components/ml/score/draggable_score.tsx
rename to x-pack/plugins/siem/public/common/components/ml/score/draggable_score.tsx
index 732eaf4bc5e788..c849476f0c3db7 100644
--- a/x-pack/plugins/siem/public/components/ml/score/draggable_score.tsx
+++ b/x-pack/plugins/siem/public/common/components/ml/score/draggable_score.tsx
@@ -7,8 +7,8 @@
 import React from 'react';
 import { DraggableWrapper, DragEffects } from '../../drag_and_drop/draggable_wrapper';
 import { Anomaly } from '../types';
-import { IS_OPERATOR } from '../../timeline/data_providers/data_provider';
-import { Provider } from '../../timeline/data_providers/provider';
+import { IS_OPERATOR } from '../../../../timelines/components/timeline/data_providers/data_provider';
+import { Provider } from '../../../../timelines/components/timeline/data_providers/provider';
 import { Spacer } from '../../page';
 import { getScoreString } from './score_health';
 
diff --git a/x-pack/plugins/siem/public/components/ml/score/get_score_string.test.ts b/x-pack/plugins/siem/public/common/components/ml/score/get_score_string.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/score/get_score_string.test.ts
rename to x-pack/plugins/siem/public/common/components/ml/score/get_score_string.test.ts
diff --git a/x-pack/plugins/siem/public/components/ml/score/get_top_severity.test.ts b/x-pack/plugins/siem/public/common/components/ml/score/get_top_severity.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/score/get_top_severity.test.ts
rename to x-pack/plugins/siem/public/common/components/ml/score/get_top_severity.test.ts
diff --git a/x-pack/plugins/siem/public/components/ml/score/get_top_severity.ts b/x-pack/plugins/siem/public/common/components/ml/score/get_top_severity.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/score/get_top_severity.ts
rename to x-pack/plugins/siem/public/common/components/ml/score/get_top_severity.ts
diff --git a/x-pack/plugins/siem/public/components/ml/score/score_health.tsx b/x-pack/plugins/siem/public/common/components/ml/score/score_health.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/score/score_health.tsx
rename to x-pack/plugins/siem/public/common/components/ml/score/score_health.tsx
diff --git a/x-pack/plugins/siem/public/components/ml/score/score_interval_to_datetime.test.ts b/x-pack/plugins/siem/public/common/components/ml/score/score_interval_to_datetime.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/score/score_interval_to_datetime.test.ts
rename to x-pack/plugins/siem/public/common/components/ml/score/score_interval_to_datetime.test.ts
diff --git a/x-pack/plugins/siem/public/components/ml/score/score_interval_to_datetime.ts b/x-pack/plugins/siem/public/common/components/ml/score/score_interval_to_datetime.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/score/score_interval_to_datetime.ts
rename to x-pack/plugins/siem/public/common/components/ml/score/score_interval_to_datetime.ts
diff --git a/x-pack/plugins/siem/public/components/ml/score/translations.ts b/x-pack/plugins/siem/public/common/components/ml/score/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/score/translations.ts
rename to x-pack/plugins/siem/public/common/components/ml/score/translations.ts
diff --git a/x-pack/plugins/siem/public/components/ml/tables/anomalies_host_table.tsx b/x-pack/plugins/siem/public/common/components/ml/tables/anomalies_host_table.tsx
similarity index 96%
rename from x-pack/plugins/siem/public/components/ml/tables/anomalies_host_table.tsx
rename to x-pack/plugins/siem/public/common/components/ml/tables/anomalies_host_table.tsx
index 3272042732dff5..d6e343265b6e74 100644
--- a/x-pack/plugins/siem/public/components/ml/tables/anomalies_host_table.tsx
+++ b/x-pack/plugins/siem/public/common/components/ml/tables/anomalies_host_table.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 import { useAnomaliesTableData } from '../anomaly/use_anomalies_table_data';
 import { HeaderSection } from '../../header_section';
 
-import { hasMlUserPermissions } from '../../../../common/machine_learning/has_ml_user_permissions';
+import { hasMlUserPermissions } from '../../../../../common/machine_learning/has_ml_user_permissions';
 import * as i18n from './translations';
 import { getAnomaliesHostTableColumnsCurated } from './get_anomalies_host_table_columns';
 import { convertAnomaliesToHosts } from './convert_anomalies_to_hosts';
diff --git a/x-pack/plugins/siem/public/components/ml/tables/anomalies_network_table.tsx b/x-pack/plugins/siem/public/common/components/ml/tables/anomalies_network_table.tsx
similarity index 96%
rename from x-pack/plugins/siem/public/components/ml/tables/anomalies_network_table.tsx
rename to x-pack/plugins/siem/public/common/components/ml/tables/anomalies_network_table.tsx
index cc3b1196f8432f..c7a49202bf239c 100644
--- a/x-pack/plugins/siem/public/components/ml/tables/anomalies_network_table.tsx
+++ b/x-pack/plugins/siem/public/common/components/ml/tables/anomalies_network_table.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 import { useAnomaliesTableData } from '../anomaly/use_anomalies_table_data';
 import { HeaderSection } from '../../header_section';
 
-import { hasMlUserPermissions } from '../../../../common/machine_learning/has_ml_user_permissions';
+import { hasMlUserPermissions } from '../../../../../common/machine_learning/has_ml_user_permissions';
 import * as i18n from './translations';
 import { convertAnomaliesToNetwork } from './convert_anomalies_to_network';
 import { Loader } from '../../loader';
diff --git a/x-pack/plugins/siem/public/components/ml/tables/basic_table.tsx b/x-pack/plugins/siem/public/common/components/ml/tables/basic_table.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/tables/basic_table.tsx
rename to x-pack/plugins/siem/public/common/components/ml/tables/basic_table.tsx
diff --git a/x-pack/plugins/siem/public/components/ml/tables/convert_anomalies_to_hosts.test.ts b/x-pack/plugins/siem/public/common/components/ml/tables/convert_anomalies_to_hosts.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/tables/convert_anomalies_to_hosts.test.ts
rename to x-pack/plugins/siem/public/common/components/ml/tables/convert_anomalies_to_hosts.test.ts
diff --git a/x-pack/plugins/siem/public/components/ml/tables/convert_anomalies_to_hosts.ts b/x-pack/plugins/siem/public/common/components/ml/tables/convert_anomalies_to_hosts.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/tables/convert_anomalies_to_hosts.ts
rename to x-pack/plugins/siem/public/common/components/ml/tables/convert_anomalies_to_hosts.ts
diff --git a/x-pack/plugins/siem/public/components/ml/tables/convert_anomalies_to_network.test.ts b/x-pack/plugins/siem/public/common/components/ml/tables/convert_anomalies_to_network.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/tables/convert_anomalies_to_network.test.ts
rename to x-pack/plugins/siem/public/common/components/ml/tables/convert_anomalies_to_network.test.ts
diff --git a/x-pack/plugins/siem/public/components/ml/tables/convert_anomalies_to_network.ts b/x-pack/plugins/siem/public/common/components/ml/tables/convert_anomalies_to_network.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/tables/convert_anomalies_to_network.ts
rename to x-pack/plugins/siem/public/common/components/ml/tables/convert_anomalies_to_network.ts
diff --git a/x-pack/plugins/siem/public/components/ml/tables/create_compound_key.test.ts b/x-pack/plugins/siem/public/common/components/ml/tables/create_compound_key.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/tables/create_compound_key.test.ts
rename to x-pack/plugins/siem/public/common/components/ml/tables/create_compound_key.test.ts
diff --git a/x-pack/plugins/siem/public/components/ml/tables/create_compound_key.ts b/x-pack/plugins/siem/public/common/components/ml/tables/create_compound_key.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/tables/create_compound_key.ts
rename to x-pack/plugins/siem/public/common/components/ml/tables/create_compound_key.ts
diff --git a/x-pack/plugins/siem/public/components/ml/tables/get_anomalies_host_table_columns.test.tsx b/x-pack/plugins/siem/public/common/components/ml/tables/get_anomalies_host_table_columns.test.tsx
similarity index 98%
rename from x-pack/plugins/siem/public/components/ml/tables/get_anomalies_host_table_columns.test.tsx
rename to x-pack/plugins/siem/public/common/components/ml/tables/get_anomalies_host_table_columns.test.tsx
index 80980756d21305..ae9133f23c0b29 100644
--- a/x-pack/plugins/siem/public/components/ml/tables/get_anomalies_host_table_columns.test.tsx
+++ b/x-pack/plugins/siem/public/common/components/ml/tables/get_anomalies_host_table_columns.test.tsx
@@ -5,7 +5,7 @@
  */
 
 import { getAnomaliesHostTableColumnsCurated } from './get_anomalies_host_table_columns';
-import { HostsType } from '../../../store/hosts/model';
+import { HostsType } from '../../../../hosts/store/model';
 import * as i18n from './translations';
 import { AnomaliesByHost, Anomaly } from '../types';
 import { Columns } from '../../paginated_table';
diff --git a/x-pack/plugins/siem/public/components/ml/tables/get_anomalies_host_table_columns.tsx b/x-pack/plugins/siem/public/common/components/ml/tables/get_anomalies_host_table_columns.tsx
similarity index 98%
rename from x-pack/plugins/siem/public/components/ml/tables/get_anomalies_host_table_columns.tsx
rename to x-pack/plugins/siem/public/common/components/ml/tables/get_anomalies_host_table_columns.tsx
index 4e6484c23613f1..4697eb1fbf86e0 100644
--- a/x-pack/plugins/siem/public/components/ml/tables/get_anomalies_host_table_columns.tsx
+++ b/x-pack/plugins/siem/public/common/components/ml/tables/get_anomalies_host_table_columns.tsx
@@ -19,7 +19,7 @@ import * as i18n from './translations';
 import { getEntries } from '../get_entries';
 import { DraggableScore } from '../score/draggable_score';
 import { createExplorerLink } from '../links/create_explorer_link';
-import { HostsType } from '../../../store/hosts/model';
+import { HostsType } from '../../../../hosts/store/model';
 import { escapeDataProviderId } from '../../drag_and_drop/helpers';
 import { FormattedRelativePreferenceDate } from '../../formatted_date';
 
diff --git a/x-pack/plugins/siem/public/components/ml/tables/get_anomalies_network_table_columns.test.tsx b/x-pack/plugins/siem/public/common/components/ml/tables/get_anomalies_network_table_columns.test.tsx
similarity index 98%
rename from x-pack/plugins/siem/public/components/ml/tables/get_anomalies_network_table_columns.test.tsx
rename to x-pack/plugins/siem/public/common/components/ml/tables/get_anomalies_network_table_columns.test.tsx
index 658444bfeda5c1..37cb99b33c793a 100644
--- a/x-pack/plugins/siem/public/components/ml/tables/get_anomalies_network_table_columns.test.tsx
+++ b/x-pack/plugins/siem/public/common/components/ml/tables/get_anomalies_network_table_columns.test.tsx
@@ -5,7 +5,7 @@
  */
 
 import { getAnomaliesNetworkTableColumnsCurated } from './get_anomalies_network_table_columns';
-import { NetworkType } from '../../../store/network/model';
+import { NetworkType } from '../../../../network/store/model';
 import * as i18n from './translations';
 import { AnomaliesByNetwork, Anomaly } from '../types';
 import { Columns } from '../../paginated_table';
diff --git a/x-pack/plugins/siem/public/components/ml/tables/get_anomalies_network_table_columns.tsx b/x-pack/plugins/siem/public/common/components/ml/tables/get_anomalies_network_table_columns.tsx
similarity index 97%
rename from x-pack/plugins/siem/public/components/ml/tables/get_anomalies_network_table_columns.tsx
rename to x-pack/plugins/siem/public/common/components/ml/tables/get_anomalies_network_table_columns.tsx
index f6a493f80eb78f..f09a4d0779ac7a 100644
--- a/x-pack/plugins/siem/public/components/ml/tables/get_anomalies_network_table_columns.tsx
+++ b/x-pack/plugins/siem/public/common/components/ml/tables/get_anomalies_network_table_columns.tsx
@@ -21,9 +21,9 @@ import { getEntries } from '../get_entries';
 import { DraggableScore } from '../score/draggable_score';
 import { createExplorerLink } from '../links/create_explorer_link';
 import { FormattedRelativePreferenceDate } from '../../formatted_date';
-import { NetworkType } from '../../../store/network/model';
+import { NetworkType } from '../../../../network/store/model';
 import { escapeDataProviderId } from '../../drag_and_drop/helpers';
-import { FlowTarget } from '../../../graphql/types';
+import { FlowTarget } from '../../../../graphql/types';
 
 export const getAnomaliesNetworkTableColumns = (
   startDate: number,
diff --git a/x-pack/plugins/siem/public/components/ml/tables/host_equality.test.ts b/x-pack/plugins/siem/public/common/components/ml/tables/host_equality.test.ts
similarity index 98%
rename from x-pack/plugins/siem/public/components/ml/tables/host_equality.test.ts
rename to x-pack/plugins/siem/public/common/components/ml/tables/host_equality.test.ts
index c5054d40f94ab0..89b87f95e5159d 100644
--- a/x-pack/plugins/siem/public/components/ml/tables/host_equality.test.ts
+++ b/x-pack/plugins/siem/public/common/components/ml/tables/host_equality.test.ts
@@ -6,7 +6,7 @@
 
 import { hostEquality } from './host_equality';
 import { AnomaliesHostTableProps } from '../types';
-import { HostsType } from '../../../store/hosts/model';
+import { HostsType } from '../../../../hosts/store/model';
 
 describe('host_equality', () => {
   test('it returns true if start and end date are equal', () => {
diff --git a/x-pack/plugins/siem/public/components/ml/tables/host_equality.ts b/x-pack/plugins/siem/public/common/components/ml/tables/host_equality.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/tables/host_equality.ts
rename to x-pack/plugins/siem/public/common/components/ml/tables/host_equality.ts
diff --git a/x-pack/plugins/siem/public/components/ml/tables/network_equality.test.ts b/x-pack/plugins/siem/public/common/components/ml/tables/network_equality.test.ts
similarity index 97%
rename from x-pack/plugins/siem/public/components/ml/tables/network_equality.test.ts
rename to x-pack/plugins/siem/public/common/components/ml/tables/network_equality.test.ts
index cb053d1a43d2f9..8b3e30c3290314 100644
--- a/x-pack/plugins/siem/public/components/ml/tables/network_equality.test.ts
+++ b/x-pack/plugins/siem/public/common/components/ml/tables/network_equality.test.ts
@@ -6,8 +6,8 @@
 
 import { networkEquality } from './network_equality';
 import { AnomaliesNetworkTableProps } from '../types';
-import { NetworkType } from '../../../store/network/model';
-import { FlowTarget } from '../../../graphql/types';
+import { NetworkType } from '../../../../network/store/model';
+import { FlowTarget } from '../../../../graphql/types';
 
 describe('network_equality', () => {
   test('it returns true if start and end date are equal', () => {
diff --git a/x-pack/plugins/siem/public/components/ml/tables/network_equality.ts b/x-pack/plugins/siem/public/common/components/ml/tables/network_equality.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/tables/network_equality.ts
rename to x-pack/plugins/siem/public/common/components/ml/tables/network_equality.ts
diff --git a/x-pack/plugins/siem/public/components/ml/tables/translations.ts b/x-pack/plugins/siem/public/common/components/ml/tables/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/tables/translations.ts
rename to x-pack/plugins/siem/public/common/components/ml/tables/translations.ts
diff --git a/x-pack/plugins/siem/public/components/ml/types.test.ts b/x-pack/plugins/siem/public/common/components/ml/types.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml/types.test.ts
rename to x-pack/plugins/siem/public/common/components/ml/types.test.ts
diff --git a/x-pack/plugins/siem/public/common/components/ml/types.ts b/x-pack/plugins/siem/public/common/components/ml/types.ts
new file mode 100644
index 00000000000000..13bceaa473a84f
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/ml/types.ts
@@ -0,0 +1,107 @@
+/*
+ * 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 { Influencer } from '../../../../../ml/public';
+
+import { HostsType } from '../../../hosts/store/model';
+import { NetworkType } from '../../../network/store/model';
+import { FlowTarget } from '../../../graphql/types';
+
+export interface Source {
+  job_id: string;
+  result_type: string;
+  probability: number;
+  multi_bucket_impact: number;
+  record_score: number;
+  initial_record_score: number;
+  bucket_span: number;
+  detector_index: number;
+  is_interim: boolean;
+  timestamp: number;
+  by_field_name: string;
+  by_field_value: string;
+  partition_field_name: string;
+  partition_field_value: string;
+  function: string;
+  function_description: string;
+  typical: number[];
+  actual: number[];
+  influencers: Influencer[];
+}
+
+export interface CriteriaFields {
+  fieldName: string;
+  fieldValue: string;
+}
+
+export interface InfluencerInput {
+  fieldName: string;
+  fieldValue: string;
+}
+
+export interface Anomaly {
+  detectorIndex: number;
+  entityName: string;
+  entityValue: string;
+  influencers?: Array<Record<string, string>>;
+  jobId: string;
+  rowId: string;
+  severity: number;
+  time: number;
+  source: Source;
+}
+
+export interface Anomalies {
+  anomalies: Anomaly[];
+  interval: string;
+}
+
+export type NarrowDateRange = (score: Anomaly, interval: string) => void;
+
+export interface AnomaliesByHost {
+  hostName: string;
+  anomaly: Anomaly;
+}
+
+export type DestinationOrSource = 'source.ip' | 'destination.ip';
+
+export interface AnomaliesByNetwork {
+  type: DestinationOrSource;
+  ip: string;
+  anomaly: Anomaly;
+}
+
+export interface HostOrNetworkProps {
+  startDate: number;
+  endDate: number;
+  narrowDateRange: NarrowDateRange;
+  skip: boolean;
+}
+
+export type AnomaliesHostTableProps = HostOrNetworkProps & {
+  hostName?: string;
+  type: HostsType;
+};
+
+export type AnomaliesNetworkTableProps = HostOrNetworkProps & {
+  ip?: string;
+  type: NetworkType;
+  flowTarget?: FlowTarget;
+};
+
+const sourceOrDestination = ['source.ip', 'destination.ip'];
+
+export const isDestinationOrSource = (value: string | null): value is DestinationOrSource =>
+  value != null && sourceOrDestination.includes(value);
+
+export interface MlError {
+  msg: string;
+  response: string;
+  statusCode: number;
+  path?: string;
+  query?: {};
+  body?: string;
+}
diff --git a/x-pack/plugins/siem/public/components/ml_popover/__mocks__/api.tsx b/x-pack/plugins/siem/public/common/components/ml_popover/__mocks__/api.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml_popover/__mocks__/api.tsx
rename to x-pack/plugins/siem/public/common/components/ml_popover/__mocks__/api.tsx
diff --git a/x-pack/plugins/siem/public/components/ml_popover/__snapshots__/popover_description.test.tsx.snap b/x-pack/plugins/siem/public/common/components/ml_popover/__snapshots__/popover_description.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml_popover/__snapshots__/popover_description.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/ml_popover/__snapshots__/popover_description.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/ml_popover/__snapshots__/upgrade_contents.test.tsx.snap b/x-pack/plugins/siem/public/common/components/ml_popover/__snapshots__/upgrade_contents.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml_popover/__snapshots__/upgrade_contents.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/ml_popover/__snapshots__/upgrade_contents.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/ml_popover/api.tsx b/x-pack/plugins/siem/public/common/components/ml_popover/api.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml_popover/api.tsx
rename to x-pack/plugins/siem/public/common/components/ml_popover/api.tsx
diff --git a/x-pack/plugins/siem/public/components/ml_popover/helpers.test.tsx b/x-pack/plugins/siem/public/common/components/ml_popover/helpers.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml_popover/helpers.test.tsx
rename to x-pack/plugins/siem/public/common/components/ml_popover/helpers.test.tsx
diff --git a/x-pack/plugins/siem/public/components/ml_popover/helpers.tsx b/x-pack/plugins/siem/public/common/components/ml_popover/helpers.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml_popover/helpers.tsx
rename to x-pack/plugins/siem/public/common/components/ml_popover/helpers.tsx
diff --git a/x-pack/plugins/siem/public/components/ml_popover/hooks/translations.ts b/x-pack/plugins/siem/public/common/components/ml_popover/hooks/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml_popover/hooks/translations.ts
rename to x-pack/plugins/siem/public/common/components/ml_popover/hooks/translations.ts
diff --git a/x-pack/plugins/siem/public/components/ml_popover/hooks/use_ml_capabilities.tsx b/x-pack/plugins/siem/public/common/components/ml_popover/hooks/use_ml_capabilities.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml_popover/hooks/use_ml_capabilities.tsx
rename to x-pack/plugins/siem/public/common/components/ml_popover/hooks/use_ml_capabilities.tsx
diff --git a/x-pack/plugins/siem/public/components/ml_popover/hooks/use_siem_jobs.tsx b/x-pack/plugins/siem/public/common/components/ml_popover/hooks/use_siem_jobs.tsx
similarity index 94%
rename from x-pack/plugins/siem/public/components/ml_popover/hooks/use_siem_jobs.tsx
rename to x-pack/plugins/siem/public/common/components/ml_popover/hooks/use_siem_jobs.tsx
index 98e74208b3dcc1..a84d88782926c3 100644
--- a/x-pack/plugins/siem/public/components/ml_popover/hooks/use_siem_jobs.tsx
+++ b/x-pack/plugins/siem/public/common/components/ml_popover/hooks/use_siem_jobs.tsx
@@ -6,10 +6,10 @@
 
 import { useEffect, useState } from 'react';
 
-import { DEFAULT_INDEX_KEY } from '../../../../common/constants';
+import { DEFAULT_INDEX_KEY } from '../../../../../common/constants';
 import { checkRecognizer, getJobsSummary, getModules } from '../api';
 import { SiemJob } from '../types';
-import { hasMlUserPermissions } from '../../../../common/machine_learning/has_ml_user_permissions';
+import { hasMlUserPermissions } from '../../../../../common/machine_learning/has_ml_user_permissions';
 import { errorToToaster, useStateToaster } from '../../toasters';
 import { useUiSetting$ } from '../../../lib/kibana';
 
diff --git a/x-pack/plugins/siem/public/components/ml_popover/hooks/use_siem_jobs_helpers.test.tsx b/x-pack/plugins/siem/public/common/components/ml_popover/hooks/use_siem_jobs_helpers.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml_popover/hooks/use_siem_jobs_helpers.test.tsx
rename to x-pack/plugins/siem/public/common/components/ml_popover/hooks/use_siem_jobs_helpers.test.tsx
diff --git a/x-pack/plugins/siem/public/components/ml_popover/hooks/use_siem_jobs_helpers.tsx b/x-pack/plugins/siem/public/common/components/ml_popover/hooks/use_siem_jobs_helpers.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml_popover/hooks/use_siem_jobs_helpers.tsx
rename to x-pack/plugins/siem/public/common/components/ml_popover/hooks/use_siem_jobs_helpers.tsx
diff --git a/x-pack/plugins/siem/public/components/ml_popover/jobs_table/__snapshots__/job_switch.test.tsx.snap b/x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/__snapshots__/job_switch.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml_popover/jobs_table/__snapshots__/job_switch.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/__snapshots__/job_switch.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/ml_popover/jobs_table/__snapshots__/jobs_table.test.tsx.snap b/x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/__snapshots__/jobs_table.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml_popover/jobs_table/__snapshots__/jobs_table.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/__snapshots__/jobs_table.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/ml_popover/jobs_table/__snapshots__/showing_count.test.tsx.snap b/x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/__snapshots__/showing_count.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml_popover/jobs_table/__snapshots__/showing_count.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/__snapshots__/showing_count.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/ml_popover/jobs_table/filters/__snapshots__/groups_filter_popover.test.tsx.snap b/x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/filters/__snapshots__/groups_filter_popover.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml_popover/jobs_table/filters/__snapshots__/groups_filter_popover.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/filters/__snapshots__/groups_filter_popover.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/ml_popover/jobs_table/filters/__snapshots__/jobs_table_filters.test.tsx.snap b/x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/filters/__snapshots__/jobs_table_filters.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml_popover/jobs_table/filters/__snapshots__/jobs_table_filters.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/filters/__snapshots__/jobs_table_filters.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/ml_popover/jobs_table/filters/groups_filter_popover.test.tsx b/x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/filters/groups_filter_popover.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml_popover/jobs_table/filters/groups_filter_popover.test.tsx
rename to x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/filters/groups_filter_popover.test.tsx
diff --git a/x-pack/plugins/siem/public/components/ml_popover/jobs_table/filters/groups_filter_popover.tsx b/x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/filters/groups_filter_popover.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml_popover/jobs_table/filters/groups_filter_popover.tsx
rename to x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/filters/groups_filter_popover.tsx
diff --git a/x-pack/plugins/siem/public/components/ml_popover/jobs_table/filters/jobs_table_filters.test.tsx b/x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/filters/jobs_table_filters.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml_popover/jobs_table/filters/jobs_table_filters.test.tsx
rename to x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/filters/jobs_table_filters.test.tsx
diff --git a/x-pack/plugins/siem/public/components/ml_popover/jobs_table/filters/jobs_table_filters.tsx b/x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/filters/jobs_table_filters.tsx
similarity index 97%
rename from x-pack/plugins/siem/public/components/ml_popover/jobs_table/filters/jobs_table_filters.tsx
rename to x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/filters/jobs_table_filters.tsx
index 551ed5f08bd76e..8cb35fc6891858 100644
--- a/x-pack/plugins/siem/public/components/ml_popover/jobs_table/filters/jobs_table_filters.tsx
+++ b/x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/filters/jobs_table_filters.tsx
@@ -14,7 +14,7 @@ import {
   // @ts-ignore no-exported-member
   EuiSearchBar,
 } from '@elastic/eui';
-import { EuiSearchBarQuery } from '../../../open_timeline/types';
+import { EuiSearchBarQuery } from '../../../../../timelines/components/open_timeline/types';
 import * as i18n from './translations';
 import { JobsFilters, SiemJob } from '../../types';
 import { GroupsFilterPopover } from './groups_filter_popover';
diff --git a/x-pack/plugins/siem/public/components/ml_popover/jobs_table/filters/toggle_selected_group.test.tsx b/x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/filters/toggle_selected_group.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml_popover/jobs_table/filters/toggle_selected_group.test.tsx
rename to x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/filters/toggle_selected_group.test.tsx
diff --git a/x-pack/plugins/siem/public/components/ml_popover/jobs_table/filters/toggle_selected_group.tsx b/x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/filters/toggle_selected_group.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml_popover/jobs_table/filters/toggle_selected_group.tsx
rename to x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/filters/toggle_selected_group.tsx
diff --git a/x-pack/plugins/siem/public/components/ml_popover/jobs_table/filters/translations.ts b/x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/filters/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml_popover/jobs_table/filters/translations.ts
rename to x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/filters/translations.ts
diff --git a/x-pack/plugins/siem/public/components/ml_popover/jobs_table/job_switch.test.tsx b/x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/job_switch.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml_popover/jobs_table/job_switch.test.tsx
rename to x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/job_switch.test.tsx
diff --git a/x-pack/plugins/siem/public/components/ml_popover/jobs_table/job_switch.tsx b/x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/job_switch.tsx
similarity index 97%
rename from x-pack/plugins/siem/public/components/ml_popover/jobs_table/job_switch.tsx
rename to x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/job_switch.tsx
index 7de2f0fbfbc544..732f5cc062bf14 100644
--- a/x-pack/plugins/siem/public/components/ml_popover/jobs_table/job_switch.tsx
+++ b/x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/job_switch.tsx
@@ -11,7 +11,7 @@ import {
   isJobLoading,
   isJobFailed,
   isJobStarted,
-} from '../../../../common/machine_learning/helpers';
+} from '../../../../../common/machine_learning/helpers';
 import { SiemJob } from '../types';
 
 const StaticSwitch = styled(EuiSwitch)`
diff --git a/x-pack/plugins/siem/public/components/ml_popover/jobs_table/jobs_table.test.tsx b/x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/jobs_table.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml_popover/jobs_table/jobs_table.test.tsx
rename to x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/jobs_table.test.tsx
diff --git a/x-pack/plugins/siem/public/components/ml_popover/jobs_table/jobs_table.tsx b/x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/jobs_table.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml_popover/jobs_table/jobs_table.tsx
rename to x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/jobs_table.tsx
diff --git a/x-pack/plugins/siem/public/components/ml_popover/jobs_table/showing_count.test.tsx b/x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/showing_count.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml_popover/jobs_table/showing_count.test.tsx
rename to x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/showing_count.test.tsx
diff --git a/x-pack/plugins/siem/public/components/ml_popover/jobs_table/showing_count.tsx b/x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/showing_count.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml_popover/jobs_table/showing_count.tsx
rename to x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/showing_count.tsx
diff --git a/x-pack/plugins/siem/public/components/ml_popover/jobs_table/translations.ts b/x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml_popover/jobs_table/translations.ts
rename to x-pack/plugins/siem/public/common/components/ml_popover/jobs_table/translations.ts
diff --git a/x-pack/plugins/siem/public/components/ml_popover/ml_modules.tsx b/x-pack/plugins/siem/public/common/components/ml_popover/ml_modules.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml_popover/ml_modules.tsx
rename to x-pack/plugins/siem/public/common/components/ml_popover/ml_modules.tsx
diff --git a/x-pack/plugins/siem/public/components/ml_popover/ml_popover.test.tsx b/x-pack/plugins/siem/public/common/components/ml_popover/ml_popover.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml_popover/ml_popover.test.tsx
rename to x-pack/plugins/siem/public/common/components/ml_popover/ml_popover.test.tsx
diff --git a/x-pack/plugins/siem/public/components/ml_popover/ml_popover.tsx b/x-pack/plugins/siem/public/common/components/ml_popover/ml_popover.tsx
similarity index 98%
rename from x-pack/plugins/siem/public/components/ml_popover/ml_popover.tsx
rename to x-pack/plugins/siem/public/common/components/ml_popover/ml_popover.tsx
index e7f7770ee87f80..292b5286e9f3e9 100644
--- a/x-pack/plugins/siem/public/components/ml_popover/ml_popover.tsx
+++ b/x-pack/plugins/siem/public/common/components/ml_popover/ml_popover.tsx
@@ -12,7 +12,7 @@ import styled from 'styled-components';
 
 import { useKibana } from '../../lib/kibana';
 import { METRIC_TYPE, TELEMETRY_EVENT, track } from '../../lib/telemetry';
-import { hasMlAdminPermissions } from '../../../common/machine_learning/has_ml_admin_permissions';
+import { hasMlAdminPermissions } from '../../../../common/machine_learning/has_ml_admin_permissions';
 import { errorToToaster, useStateToaster, ActionToaster } from '../toasters';
 import { setupMlJob, startDatafeeds, stopDatafeeds } from './api';
 import { filterJobs } from './helpers';
diff --git a/x-pack/plugins/siem/public/components/ml_popover/popover_description.test.tsx b/x-pack/plugins/siem/public/common/components/ml_popover/popover_description.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml_popover/popover_description.test.tsx
rename to x-pack/plugins/siem/public/common/components/ml_popover/popover_description.test.tsx
diff --git a/x-pack/plugins/siem/public/components/ml_popover/popover_description.tsx b/x-pack/plugins/siem/public/common/components/ml_popover/popover_description.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml_popover/popover_description.tsx
rename to x-pack/plugins/siem/public/common/components/ml_popover/popover_description.tsx
diff --git a/x-pack/plugins/siem/public/components/ml_popover/translations.ts b/x-pack/plugins/siem/public/common/components/ml_popover/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml_popover/translations.ts
rename to x-pack/plugins/siem/public/common/components/ml_popover/translations.ts
diff --git a/x-pack/plugins/siem/public/common/components/ml_popover/types.ts b/x-pack/plugins/siem/public/common/components/ml_popover/types.ts
new file mode 100644
index 00000000000000..f39daa0b9a7fbe
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/ml_popover/types.ts
@@ -0,0 +1,203 @@
+/*
+ * 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 { AuditMessageBase } from '../../../../../ml/public';
+import { MlError } from '../ml/types';
+
+export interface Group {
+  id: string;
+  jobIds: string[];
+  calendarIds: string[];
+}
+
+export interface CheckRecognizerProps {
+  indexPatternName: string[];
+  signal: AbortSignal;
+}
+
+export interface RecognizerModule {
+  id: string;
+  title: string;
+  query: Record<string, object>;
+  description: string;
+  logo: {
+    icon: string;
+  };
+}
+
+export interface GetModulesProps {
+  moduleId?: string;
+  signal: AbortSignal;
+}
+
+export interface Module {
+  id: string;
+  title: string;
+  description: string;
+  type: string;
+  logoFile: string;
+  defaultIndexPattern: string;
+  query: Record<string, object>;
+  jobs: ModuleJob[];
+  datafeeds: ModuleDatafeed[];
+  kibana: object;
+}
+
+/**
+ * Representation of an ML Job as returned from `the ml/modules/get_module` API
+ */
+export interface ModuleJob {
+  id: string;
+  config: {
+    groups: string[];
+    description: string;
+    analysis_config: {
+      bucket_span: string;
+      summary_count_field_name?: string;
+      detectors: Detector[];
+      influencers: string[];
+    };
+    analysis_limits: {
+      model_memory_limit: string;
+    };
+    data_description: {
+      time_field: string;
+      time_format?: string;
+    };
+    model_plot_config?: {
+      enabled: boolean;
+    };
+    custom_settings: {
+      created_by: string;
+      custom_urls: CustomURL[];
+    };
+    job_type: string;
+  };
+}
+
+// TODO: Speak to ML team about why the get_module API will sometimes return indexes and other times indices
+// See mockGetModuleResponse for examples
+export interface ModuleDatafeed {
+  id: string;
+  config: {
+    job_id: string;
+    indexes?: string[];
+    indices?: string[];
+    query: Record<string, object>;
+  };
+}
+
+export interface MlSetupArgs {
+  configTemplate: string;
+  indexPatternName: string;
+  jobIdErrorFilter: string[];
+  groups: string[];
+  prefix?: string;
+}
+
+/**
+ * Representation of an ML Job as returned from the `ml/jobs/jobs_summary` API
+ */
+export interface JobSummary {
+  auditMessage?: AuditMessageBase;
+  datafeedId: string;
+  datafeedIndices: string[];
+  datafeedState: string;
+  description: string;
+  earliestTimestampMs?: number;
+  latestResultsTimestampMs?: number;
+  groups: string[];
+  hasDatafeed: boolean;
+  id: string;
+  isSingleMetricViewerJob: boolean;
+  jobState: string;
+  latestTimestampMs?: number;
+  memory_status: string;
+  nodeName?: string;
+  processed_record_count: number;
+}
+
+export interface Detector {
+  detector_description: string;
+  function: string;
+  by_field_name: string;
+  partition_field_name?: string;
+}
+
+export interface CustomURL {
+  url_name: string;
+  url_value: string;
+}
+
+/**
+ * Representation of an ML Job as used by the SIEM App -- a composition of ModuleJob and JobSummary
+ * that includes necessary metadata like moduleName, defaultIndexPattern, etc.
+ */
+export interface SiemJob extends JobSummary {
+  moduleId: string;
+  defaultIndexPattern: string;
+  isCompatible: boolean;
+  isInstalled: boolean;
+  isElasticJob: boolean;
+}
+
+export interface AugmentedSiemJobFields {
+  moduleId: string;
+  defaultIndexPattern: string;
+  isCompatible: boolean;
+  isElasticJob: boolean;
+}
+
+export interface SetupMlResponseJob {
+  id: string;
+  success: boolean;
+  error?: MlError;
+}
+
+export interface SetupMlResponseDatafeed {
+  id: string;
+  success: boolean;
+  started: boolean;
+  error?: MlError;
+}
+
+export interface SetupMlResponse {
+  jobs: SetupMlResponseJob[];
+  datafeeds: SetupMlResponseDatafeed[];
+  kibana: {};
+}
+
+export interface StartDatafeedResponse {
+  [key: string]: {
+    started: boolean;
+    error?: string;
+  };
+}
+
+export interface ErrorResponse {
+  statusCode?: number;
+  error?: string;
+  message?: string;
+}
+
+export interface StopDatafeedResponse {
+  [key: string]: {
+    stopped: boolean;
+  };
+}
+
+export interface CloseJobsResponse {
+  [key: string]: {
+    closed: boolean;
+  };
+}
+
+export interface JobsFilters {
+  filterQuery: string;
+  showCustomJobs: boolean;
+  showElasticJobs: boolean;
+  selectedGroups: string[];
+}
diff --git a/x-pack/plugins/siem/public/components/ml_popover/upgrade_contents.test.tsx b/x-pack/plugins/siem/public/common/components/ml_popover/upgrade_contents.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml_popover/upgrade_contents.test.tsx
rename to x-pack/plugins/siem/public/common/components/ml_popover/upgrade_contents.test.tsx
diff --git a/x-pack/plugins/siem/public/components/ml_popover/upgrade_contents.tsx b/x-pack/plugins/siem/public/common/components/ml_popover/upgrade_contents.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/ml_popover/upgrade_contents.tsx
rename to x-pack/plugins/siem/public/common/components/ml_popover/upgrade_contents.tsx
diff --git a/x-pack/plugins/siem/public/components/navigation/breadcrumbs/index.test.ts b/x-pack/plugins/siem/public/common/components/navigation/breadcrumbs/index.test.ts
similarity index 98%
rename from x-pack/plugins/siem/public/components/navigation/breadcrumbs/index.test.ts
rename to x-pack/plugins/siem/public/common/components/navigation/breadcrumbs/index.test.ts
index 2acae92c390dde..9ec2542c52db23 100644
--- a/x-pack/plugins/siem/public/components/navigation/breadcrumbs/index.test.ts
+++ b/x-pack/plugins/siem/public/common/components/navigation/breadcrumbs/index.test.ts
@@ -7,10 +7,10 @@ import '../../../mock/match_media';
 import { encodeIpv6 } from '../../../lib/helpers';
 
 import { getBreadcrumbsForRoute, setBreadcrumbs } from '.';
-import { HostsTableType } from '../../../store/hosts/model';
+import { HostsTableType } from '../../../../hosts/store/model';
 import { RouteSpyState, SiemRouteType } from '../../../utils/route/types';
 import { TabNavigationProps } from '../tab_navigation/types';
-import { NetworkRouteType } from '../../../pages/network/navigation/types';
+import { NetworkRouteType } from '../../../../network/pages/navigation/types';
 
 const setBreadcrumbsMock = jest.fn();
 const chromeMock = {
diff --git a/x-pack/plugins/siem/public/common/components/navigation/breadcrumbs/index.ts b/x-pack/plugins/siem/public/common/components/navigation/breadcrumbs/index.ts
new file mode 100644
index 00000000000000..16ae1b1e096ca8
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/navigation/breadcrumbs/index.ts
@@ -0,0 +1,171 @@
+/*
+ * 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 { getOr, omit } from 'lodash/fp';
+
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { ChromeBreadcrumb } from '../../../../../../../../src/core/public';
+import { APP_NAME } from '../../../../../common/constants';
+import { StartServices } from '../../../../plugin';
+import { getBreadcrumbs as getHostDetailsBreadcrumbs } from '../../../../hosts/pages/details/utils';
+import { getBreadcrumbs as getIPDetailsBreadcrumbs } from '../../../../network/pages/ip_details';
+import { getBreadcrumbs as getCaseDetailsBreadcrumbs } from '../../../../cases/pages/utils';
+import { getBreadcrumbs as getDetectionRulesBreadcrumbs } from '../../../../alerts/pages/detection_engine/rules/utils';
+import { getBreadcrumbs as getTimelinesBreadcrumbs } from '../../../../timelines/pages';
+import { SiemPageName } from '../../../../app/types';
+import {
+  RouteSpyState,
+  HostRouteSpyState,
+  NetworkRouteSpyState,
+  TimelineRouteSpyState,
+} from '../../../utils/route/types';
+import { getOverviewUrl } from '../../link_to';
+
+import { TabNavigationProps } from '../tab_navigation/types';
+import { getSearch } from '../helpers';
+import { SearchNavTab } from '../types';
+
+export const setBreadcrumbs = (
+  spyState: RouteSpyState & TabNavigationProps,
+  chrome: StartServices['chrome']
+) => {
+  const breadcrumbs = getBreadcrumbsForRoute(spyState);
+  if (breadcrumbs) {
+    chrome.setBreadcrumbs(breadcrumbs);
+  }
+};
+
+export const siemRootBreadcrumb: ChromeBreadcrumb[] = [
+  {
+    text: APP_NAME,
+    href: getOverviewUrl(),
+  },
+];
+
+const isNetworkRoutes = (spyState: RouteSpyState): spyState is NetworkRouteSpyState =>
+  spyState != null && spyState.pageName === SiemPageName.network;
+
+const isHostsRoutes = (spyState: RouteSpyState): spyState is HostRouteSpyState =>
+  spyState != null && spyState.pageName === SiemPageName.hosts;
+
+const isTimelinesRoutes = (spyState: RouteSpyState): spyState is TimelineRouteSpyState =>
+  spyState != null && spyState.pageName === SiemPageName.timelines;
+
+const isCaseRoutes = (spyState: RouteSpyState): spyState is RouteSpyState =>
+  spyState != null && spyState.pageName === SiemPageName.case;
+
+const isDetectionsRoutes = (spyState: RouteSpyState) =>
+  spyState != null && spyState.pageName === SiemPageName.detections;
+
+export const getBreadcrumbsForRoute = (
+  object: RouteSpyState & TabNavigationProps
+): ChromeBreadcrumb[] | null => {
+  const spyState: RouteSpyState = omit('navTabs', object);
+  if (isHostsRoutes(spyState) && object.navTabs) {
+    const tempNav: SearchNavTab = { urlKey: 'host', isDetailPage: false };
+    let urlStateKeys = [getOr(tempNav, spyState.pageName, object.navTabs)];
+    if (spyState.tabName != null) {
+      urlStateKeys = [...urlStateKeys, getOr(tempNav, spyState.tabName, object.navTabs)];
+    }
+    return [
+      ...siemRootBreadcrumb,
+      ...getHostDetailsBreadcrumbs(
+        spyState,
+        urlStateKeys.reduce(
+          (acc: string[], item: SearchNavTab) => [...acc, getSearch(item, object)],
+          []
+        )
+      ),
+    ];
+  }
+  if (isNetworkRoutes(spyState) && object.navTabs) {
+    const tempNav: SearchNavTab = { urlKey: 'network', isDetailPage: false };
+    let urlStateKeys = [getOr(tempNav, spyState.pageName, object.navTabs)];
+    if (spyState.tabName != null) {
+      urlStateKeys = [...urlStateKeys, getOr(tempNav, spyState.tabName, object.navTabs)];
+    }
+    return [
+      ...siemRootBreadcrumb,
+      ...getIPDetailsBreadcrumbs(
+        spyState,
+        urlStateKeys.reduce(
+          (acc: string[], item: SearchNavTab) => [...acc, getSearch(item, object)],
+          []
+        )
+      ),
+    ];
+  }
+  if (isDetectionsRoutes(spyState) && object.navTabs) {
+    const tempNav: SearchNavTab = { urlKey: 'detections', isDetailPage: false };
+    let urlStateKeys = [getOr(tempNav, spyState.pageName, object.navTabs)];
+    if (spyState.tabName != null) {
+      urlStateKeys = [...urlStateKeys, getOr(tempNav, spyState.tabName, object.navTabs)];
+    }
+
+    return [
+      ...siemRootBreadcrumb,
+      ...getDetectionRulesBreadcrumbs(
+        spyState,
+        urlStateKeys.reduce(
+          (acc: string[], item: SearchNavTab) => [...acc, getSearch(item, object)],
+          []
+        )
+      ),
+    ];
+  }
+  if (isCaseRoutes(spyState) && object.navTabs) {
+    const tempNav: SearchNavTab = { urlKey: 'case', isDetailPage: false };
+    let urlStateKeys = [getOr(tempNav, spyState.pageName, object.navTabs)];
+    if (spyState.tabName != null) {
+      urlStateKeys = [...urlStateKeys, getOr(tempNav, spyState.tabName, object.navTabs)];
+    }
+
+    return [
+      ...siemRootBreadcrumb,
+      ...getCaseDetailsBreadcrumbs(
+        spyState,
+        urlStateKeys.reduce(
+          (acc: string[], item: SearchNavTab) => [...acc, getSearch(item, object)],
+          []
+        )
+      ),
+    ];
+  }
+  if (isTimelinesRoutes(spyState) && object.navTabs) {
+    const tempNav: SearchNavTab = { urlKey: 'timeline', isDetailPage: false };
+    let urlStateKeys = [getOr(tempNav, spyState.pageName, object.navTabs)];
+    if (spyState.tabName != null) {
+      urlStateKeys = [...urlStateKeys, getOr(tempNav, spyState.tabName, object.navTabs)];
+    }
+
+    return [
+      ...siemRootBreadcrumb,
+      ...getTimelinesBreadcrumbs(
+        spyState,
+        urlStateKeys.reduce(
+          (acc: string[], item: SearchNavTab) => [...acc, getSearch(item, object)],
+          []
+        )
+      ),
+    ];
+  }
+  if (
+    spyState != null &&
+    object.navTabs &&
+    spyState.pageName &&
+    object.navTabs[spyState.pageName]
+  ) {
+    return [
+      ...siemRootBreadcrumb,
+      {
+        text: object.navTabs[spyState.pageName].name,
+        href: '',
+      },
+    ];
+  }
+
+  return null;
+};
diff --git a/x-pack/plugins/siem/public/common/components/navigation/helpers.ts b/x-pack/plugins/siem/public/common/components/navigation/helpers.ts
new file mode 100644
index 00000000000000..8f5a3ac63fa1ad
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/navigation/helpers.ts
@@ -0,0 +1,68 @@
+/*
+ * 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 { isEmpty } from 'lodash/fp';
+import { Location } from 'history';
+
+import { UrlInputsModel } from '../../store/inputs/model';
+import { TimelineUrl } from '../../../timelines/store/timeline/model';
+import { CONSTANTS } from '../url_state/constants';
+import { URL_STATE_KEYS, KeyUrlState, UrlState } from '../url_state/types';
+import {
+  replaceQueryStringInLocation,
+  replaceStateKeyInQueryString,
+  getQueryStringFromLocation,
+} from '../url_state/helpers';
+import { Query, Filter } from '../../../../../../../src/plugins/data/public';
+
+import { SearchNavTab } from './types';
+
+export const getSearch = (tab: SearchNavTab, urlState: UrlState): string => {
+  if (tab && tab.urlKey != null && URL_STATE_KEYS[tab.urlKey] != null) {
+    return URL_STATE_KEYS[tab.urlKey].reduce<Location>(
+      (myLocation: Location, urlKey: KeyUrlState) => {
+        let urlStateToReplace: UrlInputsModel | Query | Filter[] | TimelineUrl | string = '';
+
+        if (urlKey === CONSTANTS.appQuery && urlState.query != null) {
+          if (urlState.query.query === '') {
+            urlStateToReplace = '';
+          } else {
+            urlStateToReplace = urlState.query;
+          }
+        } else if (urlKey === CONSTANTS.filters && urlState.filters != null) {
+          if (isEmpty(urlState.filters)) {
+            urlStateToReplace = '';
+          } else {
+            urlStateToReplace = urlState.filters;
+          }
+        } else if (urlKey === CONSTANTS.timerange) {
+          urlStateToReplace = urlState[CONSTANTS.timerange];
+        } else if (urlKey === CONSTANTS.timeline && urlState[CONSTANTS.timeline] != null) {
+          const timeline = urlState[CONSTANTS.timeline];
+          if (timeline.id === '') {
+            urlStateToReplace = '';
+          } else {
+            urlStateToReplace = timeline;
+          }
+        }
+        return replaceQueryStringInLocation(
+          myLocation,
+          replaceStateKeyInQueryString(
+            urlKey,
+            urlStateToReplace
+          )(getQueryStringFromLocation(myLocation.search))
+        );
+      },
+      {
+        pathname: '',
+        hash: '',
+        search: '',
+        state: '',
+      }
+    ).search;
+  }
+  return '';
+};
diff --git a/x-pack/plugins/siem/public/common/components/navigation/index.test.tsx b/x-pack/plugins/siem/public/common/components/navigation/index.test.tsx
new file mode 100644
index 00000000000000..ff3f9ba0694a9c
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/navigation/index.test.tsx
@@ -0,0 +1,238 @@
+/*
+ * 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 { mount } from 'enzyme';
+import React from 'react';
+
+import { CONSTANTS } from '../url_state/constants';
+import { SiemNavigationComponent } from './';
+import { setBreadcrumbs } from './breadcrumbs';
+import { navTabs } from '../../../app/home/home_navigations';
+import { HostsTableType } from '../../../hosts/store/model';
+import { RouteSpyState } from '../../utils/route/types';
+import { SiemNavigationProps, SiemNavigationComponentProps } from './types';
+
+jest.mock('./breadcrumbs', () => ({
+  setBreadcrumbs: jest.fn(),
+}));
+
+describe('SIEM Navigation', () => {
+  const mockProps: SiemNavigationComponentProps & SiemNavigationProps & RouteSpyState = {
+    pageName: 'hosts',
+    pathName: '/hosts',
+    detailName: undefined,
+    search: '',
+    tabName: HostsTableType.authentications,
+    navTabs,
+    urlState: {
+      [CONSTANTS.timerange]: {
+        global: {
+          [CONSTANTS.timerange]: {
+            from: 1558048243696,
+            fromStr: 'now-24h',
+            kind: 'relative',
+            to: 1558134643697,
+            toStr: 'now',
+          },
+          linkTo: ['timeline'],
+        },
+        timeline: {
+          [CONSTANTS.timerange]: {
+            from: 1558048243696,
+            fromStr: 'now-24h',
+            kind: 'relative',
+            to: 1558134643697,
+            toStr: 'now',
+          },
+          linkTo: ['global'],
+        },
+      },
+      [CONSTANTS.appQuery]: { query: '', language: 'kuery' },
+      [CONSTANTS.filters]: [],
+      [CONSTANTS.timeline]: {
+        id: '',
+        isOpen: false,
+      },
+    },
+  };
+  const wrapper = mount(<SiemNavigationComponent {...mockProps} />);
+  test('it calls setBreadcrumbs with correct path on mount', () => {
+    expect(setBreadcrumbs).toHaveBeenNthCalledWith(
+      1,
+      {
+        detailName: undefined,
+        navTabs: {
+          case: {
+            disabled: false,
+            href: '#/link-to/case',
+            id: 'case',
+            name: 'Cases',
+            urlKey: 'case',
+          },
+          detections: {
+            disabled: false,
+            href: '#/link-to/detections',
+            id: 'detections',
+            name: 'Detections',
+            urlKey: 'detections',
+          },
+          hosts: {
+            disabled: false,
+            href: '#/link-to/hosts',
+            id: 'hosts',
+            name: 'Hosts',
+            urlKey: 'host',
+          },
+          network: {
+            disabled: false,
+            href: '#/link-to/network',
+            id: 'network',
+            name: 'Network',
+            urlKey: 'network',
+          },
+          overview: {
+            disabled: false,
+            href: '#/link-to/overview',
+            id: 'overview',
+            name: 'Overview',
+            urlKey: 'overview',
+          },
+          timelines: {
+            disabled: false,
+            href: '#/link-to/timelines',
+            id: 'timelines',
+            name: 'Timelines',
+            urlKey: 'timeline',
+          },
+        },
+        pageName: 'hosts',
+        pathName: '/hosts',
+        search: '',
+        tabName: 'authentications',
+        query: { query: '', language: 'kuery' },
+        filters: [],
+        savedQuery: undefined,
+        timeline: {
+          id: '',
+          isOpen: false,
+        },
+        timerange: {
+          global: {
+            linkTo: ['timeline'],
+            timerange: {
+              from: 1558048243696,
+              fromStr: 'now-24h',
+              kind: 'relative',
+              to: 1558134643697,
+              toStr: 'now',
+            },
+          },
+          timeline: {
+            linkTo: ['global'],
+            timerange: {
+              from: 1558048243696,
+              fromStr: 'now-24h',
+              kind: 'relative',
+              to: 1558134643697,
+              toStr: 'now',
+            },
+          },
+        },
+      },
+      undefined
+    );
+  });
+  test('it calls setBreadcrumbs with correct path on update', () => {
+    wrapper.setProps({
+      pageName: 'network',
+      pathName: '/network',
+      tabName: undefined,
+    });
+    wrapper.update();
+    expect(setBreadcrumbs).toHaveBeenNthCalledWith(
+      1,
+      {
+        detailName: undefined,
+        filters: [],
+        navTabs: {
+          case: {
+            disabled: false,
+            href: '#/link-to/case',
+            id: 'case',
+            name: 'Cases',
+            urlKey: 'case',
+          },
+          detections: {
+            disabled: false,
+            href: '#/link-to/detections',
+            id: 'detections',
+            name: 'Detections',
+            urlKey: 'detections',
+          },
+          hosts: {
+            disabled: false,
+            href: '#/link-to/hosts',
+            id: 'hosts',
+            name: 'Hosts',
+            urlKey: 'host',
+          },
+          network: {
+            disabled: false,
+            href: '#/link-to/network',
+            id: 'network',
+            name: 'Network',
+            urlKey: 'network',
+          },
+          overview: {
+            disabled: false,
+            href: '#/link-to/overview',
+            id: 'overview',
+            name: 'Overview',
+            urlKey: 'overview',
+          },
+          timelines: {
+            disabled: false,
+            href: '#/link-to/timelines',
+            id: 'timelines',
+            name: 'Timelines',
+            urlKey: 'timeline',
+          },
+        },
+        pageName: 'hosts',
+        pathName: '/hosts',
+        query: { language: 'kuery', query: '' },
+        savedQuery: undefined,
+        search: '',
+        state: undefined,
+        tabName: 'authentications',
+        timeline: { id: '', isOpen: false },
+        timerange: {
+          global: {
+            linkTo: ['timeline'],
+            timerange: {
+              from: 1558048243696,
+              fromStr: 'now-24h',
+              kind: 'relative',
+              to: 1558134643697,
+              toStr: 'now',
+            },
+          },
+          timeline: {
+            linkTo: ['global'],
+            timerange: {
+              from: 1558048243696,
+              fromStr: 'now-24h',
+              kind: 'relative',
+              to: 1558134643697,
+              toStr: 'now',
+            },
+          },
+        },
+      },
+      undefined
+    );
+  });
+});
diff --git a/x-pack/plugins/siem/public/components/navigation/index.tsx b/x-pack/plugins/siem/public/common/components/navigation/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/navigation/index.tsx
rename to x-pack/plugins/siem/public/common/components/navigation/index.tsx
diff --git a/x-pack/plugins/siem/public/common/components/navigation/tab_navigation/index.test.tsx b/x-pack/plugins/siem/public/common/components/navigation/tab_navigation/index.test.tsx
new file mode 100644
index 00000000000000..b9572caece94fa
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/navigation/tab_navigation/index.test.tsx
@@ -0,0 +1,157 @@
+/*
+ * 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 { mount } from 'enzyme';
+import React from 'react';
+
+import { navTabs } from '../../../../app/home/home_navigations';
+import { SiemPageName } from '../../../../app/types';
+import { navTabsHostDetails } from '../../../../hosts/pages/details/nav_tabs';
+import { HostsTableType } from '../../../../hosts/store/model';
+import { RouteSpyState } from '../../../utils/route/types';
+import { CONSTANTS } from '../../url_state/constants';
+import { TabNavigationComponent } from './';
+import { TabNavigationProps } from './types';
+
+describe('Tab Navigation', () => {
+  const pageName = SiemPageName.hosts;
+  const hostName = 'siem-window';
+  const tabName = HostsTableType.authentications;
+  const pathName = `/${pageName}/${hostName}/${tabName}`;
+
+  describe('Page Navigation', () => {
+    const mockProps: TabNavigationProps & RouteSpyState = {
+      pageName,
+      pathName,
+      detailName: undefined,
+      search: '',
+      tabName,
+      navTabs,
+      [CONSTANTS.timerange]: {
+        global: {
+          [CONSTANTS.timerange]: {
+            from: 1558048243696,
+            fromStr: 'now-24h',
+            kind: 'relative',
+            to: 1558134643697,
+            toStr: 'now',
+          },
+          linkTo: ['timeline'],
+        },
+        timeline: {
+          [CONSTANTS.timerange]: {
+            from: 1558048243696,
+            fromStr: 'now-24h',
+            kind: 'relative',
+            to: 1558134643697,
+            toStr: 'now',
+          },
+          linkTo: ['global'],
+        },
+      },
+      [CONSTANTS.appQuery]: { query: 'host.name:"siem-es"', language: 'kuery' },
+      [CONSTANTS.filters]: [],
+      [CONSTANTS.timeline]: {
+        id: '',
+        isOpen: false,
+      },
+    };
+    test('it mounts with correct tab highlighted', () => {
+      const wrapper = mount(<TabNavigationComponent {...mockProps} />);
+      const hostsTab = wrapper.find('EuiTab[data-test-subj="navigation-hosts"]');
+      expect(hostsTab.prop('isSelected')).toBeTruthy();
+    });
+    test('it changes active tab when nav changes by props', () => {
+      const wrapper = mount(<TabNavigationComponent {...mockProps} />);
+      const networkTab = () => wrapper.find('EuiTab[data-test-subj="navigation-network"]').first();
+      expect(networkTab().prop('isSelected')).toBeFalsy();
+      wrapper.setProps({
+        pageName: 'network',
+        pathName: '/network',
+        tabName: undefined,
+      });
+      wrapper.update();
+      expect(networkTab().prop('isSelected')).toBeTruthy();
+    });
+    test('it carries the url state in the link', () => {
+      const wrapper = mount(<TabNavigationComponent {...mockProps} />);
+      const firstTab = wrapper.find('EuiTab[data-test-subj="navigation-network"]');
+      expect(firstTab.props().href).toBe(
+        "#/link-to/network?query=(language:kuery,query:'host.name:%22siem-es%22')&timerange=(global:(linkTo:!(timeline),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)),timeline:(linkTo:!(global),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)))"
+      );
+    });
+  });
+
+  describe('Table Navigation', () => {
+    const mockHasMlUserPermissions = true;
+    const mockProps: TabNavigationProps & RouteSpyState = {
+      pageName: 'hosts',
+      pathName: '/hosts',
+      detailName: undefined,
+      search: '',
+      tabName: HostsTableType.authentications,
+      navTabs: navTabsHostDetails(hostName, mockHasMlUserPermissions),
+      [CONSTANTS.timerange]: {
+        global: {
+          [CONSTANTS.timerange]: {
+            from: 1558048243696,
+            fromStr: 'now-24h',
+            kind: 'relative',
+            to: 1558134643697,
+            toStr: 'now',
+          },
+          linkTo: ['timeline'],
+        },
+        timeline: {
+          [CONSTANTS.timerange]: {
+            from: 1558048243696,
+            fromStr: 'now-24h',
+            kind: 'relative',
+            to: 1558134643697,
+            toStr: 'now',
+          },
+          linkTo: ['global'],
+        },
+      },
+      [CONSTANTS.appQuery]: { query: 'host.name:"siem-es"', language: 'kuery' },
+      [CONSTANTS.filters]: [],
+      [CONSTANTS.timeline]: {
+        id: '',
+        isOpen: false,
+      },
+    };
+    test('it mounts with correct tab highlighted', () => {
+      const wrapper = mount(<TabNavigationComponent {...mockProps} />);
+      const tableNavigationTab = wrapper.find(
+        `EuiTab[data-test-subj="navigation-${HostsTableType.authentications}"]`
+      );
+
+      expect(tableNavigationTab.prop('isSelected')).toBeTruthy();
+    });
+    test('it changes active tab when nav changes by props', () => {
+      const wrapper = mount(<TabNavigationComponent {...mockProps} />);
+      const tableNavigationTab = () =>
+        wrapper.find(`[data-test-subj="navigation-${HostsTableType.events}"]`).first();
+      expect(tableNavigationTab().prop('isSelected')).toBeFalsy();
+      wrapper.setProps({
+        pageName: SiemPageName.hosts,
+        pathName: `/${SiemPageName.hosts}`,
+        tabName: HostsTableType.events,
+      });
+      wrapper.update();
+      expect(tableNavigationTab().prop('isSelected')).toBeTruthy();
+    });
+    test('it carries the url state in the link', () => {
+      const wrapper = mount(<TabNavigationComponent {...mockProps} />);
+      const firstTab = wrapper.find(
+        `EuiTab[data-test-subj="navigation-${HostsTableType.authentications}"]`
+      );
+      expect(firstTab.props().href).toBe(
+        `#/${pageName}/${hostName}/${HostsTableType.authentications}?query=(language:kuery,query:'host.name:%22siem-es%22')&timerange=(global:(linkTo:!(timeline),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)),timeline:(linkTo:!(global),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)))`
+      );
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/components/navigation/tab_navigation/index.tsx b/x-pack/plugins/siem/public/common/components/navigation/tab_navigation/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/navigation/tab_navigation/index.tsx
rename to x-pack/plugins/siem/public/common/components/navigation/tab_navigation/index.tsx
diff --git a/x-pack/plugins/siem/public/common/components/navigation/tab_navigation/types.ts b/x-pack/plugins/siem/public/common/components/navigation/tab_navigation/types.ts
new file mode 100644
index 00000000000000..a283691cfe0df4
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/navigation/tab_navigation/types.ts
@@ -0,0 +1,33 @@
+/*
+ * 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 { UrlInputsModel } from '../../../store/inputs/model';
+import { CONSTANTS } from '../../url_state/constants';
+import { HostsTableType } from '../../../../hosts/store/model';
+import { TimelineUrl } from '../../../../timelines/store/timeline/model';
+import { Filter, Query } from '../../../../../../../../src/plugins/data/public';
+
+import { SiemNavigationProps } from '../types';
+
+export interface TabNavigationProps extends SiemNavigationProps {
+  pathName: string;
+  pageName: string;
+  tabName: HostsTableType | undefined;
+  [CONSTANTS.appQuery]?: Query;
+  [CONSTANTS.filters]?: Filter[];
+  [CONSTANTS.savedQuery]?: string;
+  [CONSTANTS.timerange]: UrlInputsModel;
+  [CONSTANTS.timeline]: TimelineUrl;
+}
+
+export interface TabNavigationItemProps {
+  href: string;
+  hrefWithSearch: string;
+  id: string;
+  disabled: boolean;
+  name: string;
+  isSelected: boolean;
+}
diff --git a/x-pack/plugins/siem/public/common/components/navigation/types.ts b/x-pack/plugins/siem/public/common/components/navigation/types.ts
new file mode 100644
index 00000000000000..f0256813c29e78
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/navigation/types.ts
@@ -0,0 +1,40 @@
+/*
+ * 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 { Filter, Query } from '../../../../../../../src/plugins/data/public';
+import { HostsTableType } from '../../../hosts/store/model';
+import { UrlInputsModel } from '../../store/inputs/model';
+import { TimelineUrl } from '../../../timelines/store/timeline/model';
+import { CONSTANTS, UrlStateType } from '../url_state/constants';
+
+export interface SiemNavigationProps {
+  display?: 'default' | 'condensed';
+  navTabs: Record<string, NavTab>;
+}
+
+export interface SiemNavigationComponentProps {
+  pathName: string;
+  pageName: string;
+  tabName: HostsTableType | undefined;
+  urlState: {
+    [CONSTANTS.appQuery]?: Query;
+    [CONSTANTS.filters]?: Filter[];
+    [CONSTANTS.savedQuery]?: string;
+    [CONSTANTS.timerange]: UrlInputsModel;
+    [CONSTANTS.timeline]: TimelineUrl;
+  };
+}
+
+export type SearchNavTab = NavTab | { urlKey: UrlStateType; isDetailPage: boolean };
+
+export interface NavTab {
+  id: string;
+  name: string;
+  href: string;
+  disabled: boolean;
+  urlKey: UrlStateType;
+  isDetailPage?: boolean;
+}
diff --git a/x-pack/plugins/siem/public/components/navigation/use_get_url_search.tsx b/x-pack/plugins/siem/public/common/components/navigation/use_get_url_search.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/navigation/use_get_url_search.tsx
rename to x-pack/plugins/siem/public/common/components/navigation/use_get_url_search.tsx
diff --git a/x-pack/plugins/siem/public/common/components/news_feed/helpers.test.ts b/x-pack/plugins/siem/public/common/components/news_feed/helpers.test.ts
new file mode 100644
index 00000000000000..cdd04b50a6d506
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/news_feed/helpers.test.ts
@@ -0,0 +1,492 @@
+/*
+ * 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 { NEWS_FEED_URL_SETTING_DEFAULT } from '../../../../common/constants';
+import { KibanaServices } from '../../lib/kibana';
+import { rawNewsApiResponse } from '../../mock/news';
+import { rawNewsJSON } from '../../mock/raw_news';
+
+import {
+  fetchNews,
+  getLocale,
+  getNewsFeedUrl,
+  getNewsItemsFromApiResponse,
+  removeSnapshotFromVersion,
+  showNewsItem,
+} from './helpers';
+import { NewsItem, RawNewsApiResponse } from './types';
+
+jest.mock('../../lib/kibana');
+
+describe('helpers', () => {
+  describe('removeSnapshotFromVersion', () => {
+    test('it should remove an all-caps `-SNAPSHOT`', () => {
+      const version = '8.0.0-SNAPSHOT';
+
+      expect(removeSnapshotFromVersion(version)).toEqual('8.0.0');
+    });
+
+    test('it should remove a mixed-case `-SnApShoT`', () => {
+      const version = '8.0.0-SnApShoT';
+
+      expect(removeSnapshotFromVersion(version)).toEqual('8.0.0');
+    });
+
+    test('it should remove all occurrences of `-SNAPSHOT`, regardless of where they appear in the version', () => {
+      const version = '-SNAPSHOT8.0.0-SNAPSHOT';
+
+      expect(removeSnapshotFromVersion(version)).toEqual('8.0.0');
+    });
+
+    test('it should NOT transform a version when it does not contain a `-SNAPSHOT`', () => {
+      const version = '8.0.0';
+
+      expect(removeSnapshotFromVersion(version)).toEqual('8.0.0');
+    });
+
+    test('it should NOT transform a version if it omits the dash in `SNAPSHOT`', () => {
+      const version = '8.0.0SNAPSHOT';
+
+      expect(removeSnapshotFromVersion(version)).toEqual('8.0.0SNAPSHOT');
+    });
+
+    test('it should NOT transform a version if has only a partial `-SNAPSHOT`', () => {
+      const version = '8.0.0-SNAP';
+
+      expect(removeSnapshotFromVersion(version)).toEqual('8.0.0-SNAP');
+    });
+
+    test('it should NOT transform an undefined version', () => {
+      const version = undefined;
+
+      expect(removeSnapshotFromVersion(version)).toBeUndefined();
+    });
+
+    test('it should NOT transform an empty version', () => {
+      const version = '';
+
+      expect(removeSnapshotFromVersion(version)).toEqual('');
+    });
+  });
+
+  describe('getNewsFeedUrl', () => {
+    const getKibanaVersion = () => '8.0.0';
+
+    test('it combines the (default) base URL from settings and the Kibana version to return the expected URL', () => {
+      expect(
+        getNewsFeedUrl({ newsFeedUrlSetting: NEWS_FEED_URL_SETTING_DEFAULT, getKibanaVersion })
+      ).toEqual('https://feeds.elastic.co/security-solution/v8.0.0.json');
+    });
+
+    test('it combines a URL with extra whitespace and the Kibana version to return the expected URL', () => {
+      const withExtraWhitespace = `   ${NEWS_FEED_URL_SETTING_DEFAULT}   `;
+
+      expect(getNewsFeedUrl({ newsFeedUrlSetting: withExtraWhitespace, getKibanaVersion })).toEqual(
+        'https://feeds.elastic.co/security-solution/v8.0.0.json'
+      );
+    });
+
+    test('it combines a URL with a trailing slash and the Kibana version to return the expected URL', () => {
+      const withTrailingSlash = `${NEWS_FEED_URL_SETTING_DEFAULT}/`;
+
+      expect(getNewsFeedUrl({ newsFeedUrlSetting: withTrailingSlash, getKibanaVersion })).toEqual(
+        'https://feeds.elastic.co/security-solution/v8.0.0.json'
+      );
+    });
+
+    test('it combines a URL with a trailing slash plus whitespace and the Kibana version to return the expected URL', () => {
+      const withTrailingSlashPlusWhitespace = `   ${NEWS_FEED_URL_SETTING_DEFAULT}/   `;
+
+      expect(
+        getNewsFeedUrl({ newsFeedUrlSetting: withTrailingSlashPlusWhitespace, getKibanaVersion })
+      ).toEqual('https://feeds.elastic.co/security-solution/v8.0.0.json');
+    });
+
+    test('it combines a URL and a Kibana version with a `-SNAPSHOT` to return the expected URL', () => {
+      const getKibanaVersionWithSnapshot = () => '8.0.0-SNAPSHOT';
+
+      expect(
+        getNewsFeedUrl({
+          newsFeedUrlSetting: NEWS_FEED_URL_SETTING_DEFAULT,
+          getKibanaVersion: getKibanaVersionWithSnapshot,
+        })
+      ).toEqual('https://feeds.elastic.co/security-solution/v8.0.0.json');
+    });
+  });
+
+  describe('getLocale', () => {
+    const fallback = 'wowzers';
+
+    test('it returns language specified in the document', () => {
+      const lang = 'ja';
+
+      document.documentElement.lang = lang;
+
+      expect(getLocale(fallback)).toEqual(lang);
+    });
+
+    test('it returns the fallback when the language in the document is an empty string', () => {
+      document.documentElement.lang = '';
+
+      expect(getLocale(fallback)).toEqual(fallback);
+    });
+  });
+
+  describe('getNewsItemsFromApiResponse', () => {
+    const expectedNewsItems: NewsItem[] = [
+      {
+        description:
+          "There's an awesome community of Elastic SIEM users out there. Join the discussion about configuring, learning, and using the Elastic SIEM app, and detecting threats!",
+        expireOn: expect.any(Date),
+        hash: '5a35c984a9cdc1c6a25913f3d0b99b1aefc7257bc3b936c39db9fa0435edeed0',
+        imageUrl:
+          'https://aws1.discourse-cdn.com/elastic/original/3X/f/8/f8c3d0b9971cfcd0be349d973aa5799f71d280cc.png?blade=securitysolutionfeed',
+        linkUrl: 'https://discuss.elastic.co/c/siem?blade=securitysolutionfeed',
+        publishOn: expect.any(Date),
+        title: 'Got SIEM Questions?',
+      },
+      {
+        description:
+          'Elastic Security combines the threat hunting and analytics of Elastic SIEM with the prevention and response provided by Elastic Endpoint Security.',
+        expireOn: expect.any(Date),
+        hash: 'edcb2d396ffdd80bfd5a97fbc0dc9f4b73477f9be556863fe0a1caf086679420',
+        imageUrl:
+          'https://static-www.elastic.co/v3/assets/bltefdd0b53724fa2ce/blt1caa35177420c61b/5d0d0394d8ff351753cbf2c5/illustrated-screenshot-hero-siem.png?blade=securitysolutionfeed',
+        linkUrl:
+          'https://www.elastic.co/blog/elastic-security-7-5-0-released?blade=securitysolutionfeed',
+        publishOn: expect.any(Date),
+        title: 'Elastic Security 7.5.0 released',
+      },
+      {
+        description:
+          'At Elastic, we’re bringing endpoint protection and SIEM together into the same experience to streamline how you secure your organization.',
+        expireOn: expect.any(Date),
+        hash: 'ec970adc85e9eede83f77e4cc6a6fea00cd7822cbe48a71dc2c5f1df10939196',
+        imageUrl:
+          'https://static-www.elastic.co/v3/assets/bltefdd0b53724fa2ce/bltd0eb8689eafe398a/5d970ecc1970e80e85277925/illustration-endpoint-hero.png?blade=securitysolutionfeed',
+        linkUrl:
+          'https://www.elastic.co/webinars/elastic-endpoint-security-overview-security-starts-at-the-endpoint?blade=securitysolutionfeed',
+        publishOn: expect.any(Date),
+        title: 'Elastic Endpoint Security Overview Webinar',
+      },
+      {
+        description:
+          'For small businesses and homes, having access to effective security analytics can come at a high cost of either time or money. Well, until now!',
+        expireOn: expect.any(Date),
+        hash: 'aa243fd5845356a5ccd54a7a11b208ed307e0d88158873b1fcf7d1164b739bac',
+        imageUrl:
+          'https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt024c26b7636cb24f/5daf4e293a326d6df6c0e025/home-siem-blog-1-map.jpg?blade=securitysolutionfeed',
+        linkUrl:
+          'https://www.elastic.co/blog/elastic-siem-for-small-business-and-home-1-getting-started?blade=securitysolutionfeed',
+        publishOn: expect.any(Date),
+        title: 'Trying Elastic SIEM at Home?',
+      },
+      {
+        description:
+          'Elastic is excited to announce the introduction of Elastic Endpoint Security, based on Elastic’s acquisition of Endgame, a pioneer and industry-recognized leader in endpoint threat prevention, detection, and response.',
+        expireOn: expect.any(Date),
+        hash: '3c64576c9749d33ff98726d641cdf2fb2bfde3dd9a6f99ff2573ac8d8c5b2c02',
+        imageUrl:
+          'https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt1f87637fb7870298/5d9fe27bf8ca980f8717f6f8/screenshot-resolver-trickbot-enrichments-showing-defender-shutdown-endgame-2-optimized.png?blade=securitysolutionfeed',
+        linkUrl:
+          'https://www.elastic.co/blog/introducing-elastic-endpoint-security?blade=securitysolutionfeed',
+        publishOn: expect.any(Date),
+        title: 'Introducing Elastic Endpoint Security',
+      },
+      {
+        description:
+          'Elastic SIEM is powered by Elastic Common Schema. With ECS, analytics content such as dashboards, rules, and machine learning jobs can be applied more broadly, searches can be crafted more narrowly, and field names are easier to remember.',
+        expireOn: expect.any(Date),
+        hash: 'b8a0d3d21e9638bde891ab5eb32594b3d7a3daacc7f0900c6dd506d5d7b42410',
+        imageUrl:
+          'https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt71256f06dc672546/5c98d595975fd58f4d12646d/ecs-intro-dashboard-1360.jpg?blade=securitysolutionfeed',
+        linkUrl:
+          'https://www.elastic.co/blog/introducing-the-elastic-common-schema?blade=securitysolutionfeed',
+        publishOn: expect.any(Date),
+        title: 'What is Elastic Common Schema (ECS)?',
+      },
+    ];
+
+    test('it returns an empty collection of news items when the response is undefined', () => {
+      expect(getNewsItemsFromApiResponse(undefined)).toEqual([]);
+    });
+
+    test('it returns an empty collection of news items when the response is null', () => {
+      expect(getNewsItemsFromApiResponse(null)).toEqual([]);
+    });
+
+    test('it returns an empty collection of news items when the response items are undefined', () => {
+      expect(getNewsItemsFromApiResponse({ items: undefined })).toEqual([]);
+    });
+
+    test('it returns an empty collection of news items when the response items are null', () => {
+      expect(getNewsItemsFromApiResponse({ items: null })).toEqual([]);
+    });
+
+    test('it returns the expected news items when the browser language matches the i18n values in the response', () => {
+      const lang = 'en';
+
+      document.documentElement.lang = lang;
+
+      expect(getNewsItemsFromApiResponse(rawNewsApiResponse)).toEqual(expectedNewsItems);
+    });
+
+    test('it returns the expected news items when an ALL CAPS the browser language matches the i18n values in the response', () => {
+      const allCapsLang = 'EN';
+
+      document.documentElement.lang = allCapsLang;
+
+      expect(getNewsItemsFromApiResponse(rawNewsApiResponse)).toEqual(expectedNewsItems);
+    });
+
+    test('it returns the expected news items when the browser language does NOT match the i18n values in the response', () => {
+      const nonMatchingLang = 'ja';
+
+      document.documentElement.lang = nonMatchingLang;
+
+      expect(getNewsItemsFromApiResponse(rawNewsApiResponse)).toEqual(expectedNewsItems);
+    });
+
+    test('it returns the expected news items when the browser language is an empty string', () => {
+      const emptyLang = '';
+
+      document.documentElement.lang = emptyLang;
+
+      expect(getNewsItemsFromApiResponse(rawNewsApiResponse)).toEqual(expectedNewsItems);
+    });
+
+    test('it returns the expected news item when parsing a raw JSON response', () => {
+      const lang = 'en';
+
+      document.documentElement.lang = lang;
+
+      expect(getNewsItemsFromApiResponse(JSON.parse(rawNewsJSON))).toEqual(expectedNewsItems);
+    });
+
+    describe('translated items', () => {
+      const translatedDescription =
+        'Elastic SIEMユーザーの素晴らしいコミュニティがそこにあります。 Elastic SIEMアプリの設定、学習、使用、および脅威の検出に関するディスカッションに参加してください！';
+      const translatedImageUrl = 'https://aws1.discourse-cdn.com/elastic/translated-image-url';
+      const translatedLinkUrl = 'https://discuss.elastic.co/translated-link-url';
+      const translatedTitle = 'SIEMに関する質問はありますか？';
+
+      const withNonDefaultTranslations: RawNewsApiResponse = {
+        items: [
+          {
+            title: { en: 'Got SIEM Questions?', ja: translatedTitle },
+            description: {
+              en:
+                "There's an awesome community of Elastic SIEM users out there. Join the discussion about configuring, learning, and using the Elastic SIEM app, and detecting threats!",
+              ja: translatedDescription,
+            },
+            link_text: null,
+            link_url: {
+              en: 'https://discuss.elastic.co/c/siem?blade=securitysolutionfeed',
+              ja: translatedLinkUrl,
+            },
+            languages: null,
+            badge: { en: '7.6' },
+            image_url: {
+              en:
+                'https://aws1.discourse-cdn.com/elastic/original/3X/f/8/f8c3d0b9971cfcd0be349d973aa5799f71d280cc.png?blade=securitysolutionfeed',
+              ja: translatedImageUrl,
+            },
+            publish_on: new Date('2020-01-01T00:00:00'),
+            expire_on: new Date('2020-12-31T00:00:00'),
+          },
+        ],
+      };
+
+      test('it returns a translated description when the browser language matches additional translated content', () => {
+        const lang = 'ja'; // an additional translation for this language is provided in the response
+
+        document.documentElement.lang = lang;
+
+        expect(getNewsItemsFromApiResponse(withNonDefaultTranslations)[0].description).toEqual(
+          translatedDescription
+        );
+      });
+
+      test('it returns a translated imageUrl when the browser language matches additional translated content', () => {
+        const lang = 'ja'; // a translation for this language is provided in the response
+
+        document.documentElement.lang = lang;
+
+        expect(getNewsItemsFromApiResponse(withNonDefaultTranslations)[0].imageUrl).toEqual(
+          translatedImageUrl
+        );
+      });
+
+      test('it returns a translated linkUrl when the browser language matches additional translated content', () => {
+        const lang = 'ja'; // a translation for this language is provided in the response
+
+        document.documentElement.lang = lang;
+
+        expect(getNewsItemsFromApiResponse(withNonDefaultTranslations)[0].linkUrl).toEqual(
+          translatedLinkUrl
+        );
+      });
+
+      test('it returns a translated title when the browser language matches additional translated content', () => {
+        const lang = 'ja'; // a translation for this language is provided in the response
+
+        document.documentElement.lang = lang;
+
+        expect(getNewsItemsFromApiResponse(withNonDefaultTranslations)[0].title).toEqual(
+          translatedTitle
+        );
+      });
+
+      test('it returns the default translated title when the browser language matches additional translated content', () => {
+        const lang = 'fr'; // no translation for this language
+
+        document.documentElement.lang = lang;
+
+        expect(getNewsItemsFromApiResponse(withNonDefaultTranslations)[0].title).toEqual(
+          'Got SIEM Questions?'
+        );
+      });
+
+      test('it returns the default translated title when the browser language is an empty string', () => {
+        const lang = ''; // just an empty string
+
+        document.documentElement.lang = lang;
+
+        expect(getNewsItemsFromApiResponse(withNonDefaultTranslations)[0].title).toEqual(
+          'Got SIEM Questions?'
+        );
+      });
+    });
+
+    test('it generates a news item hash when an item does NOT include it', () => {
+      const lang = 'en';
+
+      const itemHasNoHash: RawNewsApiResponse = {
+        items: [
+          {
+            title: { en: 'Got SIEM Questions?' },
+            description: {
+              en: 'some description',
+            },
+            link_text: null,
+            link_url: { en: 'https://example.com/link-url' },
+            languages: null,
+            badge: { en: '7.6' },
+            image_url: {
+              en: 'https://example.com/image-url',
+            },
+            publish_on: new Date('2020-01-01T00:00:00'),
+            expire_on: new Date('2020-12-31T00:00:00'),
+          },
+        ],
+      };
+
+      document.documentElement.lang = lang;
+
+      expect(getNewsItemsFromApiResponse(itemHasNoHash)[0].hash.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('fetchNews', () => {
+    const mockKibanaServices = KibanaServices.get as jest.Mock;
+    const fetchMock = jest.fn();
+    mockKibanaServices.mockReturnValue({ http: { fetch: fetchMock } });
+
+    beforeEach(() => {
+      fetchMock.mockClear();
+      fetchMock.mockResolvedValue(rawNewsApiResponse);
+    });
+
+    test('it returns the raw API response from the news feed', async () => {
+      const newsFeedUrl = 'https://feeds.elastic.co/security-solution/v8.0.0.json';
+      expect(await fetchNews({ newsFeedUrl })).toEqual(rawNewsApiResponse);
+    });
+  });
+
+  describe('showNewsItem', () => {
+    const MOCK_DATE_NOW = 1579848101395; // 2020-01-24T06:41:41.395Z
+
+    let dateNowSpy: { mockRestore: () => void };
+
+    beforeAll(() => {
+      dateNowSpy = jest.spyOn(Date, 'now').mockImplementation(() => MOCK_DATE_NOW);
+    });
+
+    afterAll(() => {
+      dateNowSpy.mockRestore();
+    });
+
+    test('it should return true when the article has already been published, and will expire in the future', () => {
+      const alreadyPublishedAndNotExpired: NewsItem = {
+        description: 'description',
+        expireOn: new Date(MOCK_DATE_NOW + 1000),
+        hash: '5a35c984a9cdc1c6a25913f3d0b99b1aefc7257bc3b936c39db9fa0435edeed0',
+        imageUrl: 'https://example.com',
+        linkUrl: 'https://example.com',
+        publishOn: new Date(MOCK_DATE_NOW - 1000),
+        title: 'Show this post',
+      };
+
+      expect(showNewsItem(alreadyPublishedAndNotExpired)).toEqual(true);
+    });
+
+    test('it should return false when the article was published exactly "now", and will expire in the future', () => {
+      const publishedJustNowAndNotExpired: NewsItem = {
+        description: 'description',
+        expireOn: new Date(MOCK_DATE_NOW + 1000),
+        hash: '5a35c984a9cdc1c6a25913f3d0b99b1aefc7257bc3b936c39db9fa0435edeed0',
+        imageUrl: 'https://example.com',
+        linkUrl: 'https://example.com',
+        publishOn: new Date(MOCK_DATE_NOW),
+        title: 'Do NOT show this post',
+      };
+
+      expect(showNewsItem(publishedJustNowAndNotExpired)).toEqual(false);
+    });
+
+    test('it should return false when the article has not been published yet, and has not expired yet', () => {
+      const notPublishedAndNotExpired: NewsItem = {
+        description: 'description',
+        expireOn: new Date(MOCK_DATE_NOW + 5000),
+        hash: '5a35c984a9cdc1c6a25913f3d0b99b1aefc7257bc3b936c39db9fa0435edeed0',
+        imageUrl: 'https://example.com',
+        linkUrl: 'https://example.com',
+        publishOn: new Date(MOCK_DATE_NOW + 1000),
+        title: 'Do NOT show this post',
+      };
+
+      expect(showNewsItem(notPublishedAndNotExpired)).toEqual(false);
+    });
+
+    test('it should return false when the article was published in the past, and will expire exactly now', () => {
+      const alreadyPublishedAndExpiredNow: NewsItem = {
+        description: 'description',
+        expireOn: new Date(MOCK_DATE_NOW),
+        hash: '5a35c984a9cdc1c6a25913f3d0b99b1aefc7257bc3b936c39db9fa0435edeed0',
+        imageUrl: 'https://example.com',
+        linkUrl: 'https://example.com',
+        publishOn: new Date(MOCK_DATE_NOW - 1000),
+        title: 'Do NOT show this post',
+      };
+
+      expect(showNewsItem(alreadyPublishedAndExpiredNow)).toEqual(false);
+    });
+
+    test('it should return false when the article was published in the past, and it already expired', () => {
+      const articleJustExpired: NewsItem = {
+        description: 'description',
+        expireOn: new Date(MOCK_DATE_NOW - 1000),
+        hash: '5a35c984a9cdc1c6a25913f3d0b99b1aefc7257bc3b936c39db9fa0435edeed0',
+        imageUrl: 'https://example.com',
+        linkUrl: 'https://example.com',
+        publishOn: new Date(MOCK_DATE_NOW - 5000),
+        title: 'Do NOT show this post',
+      };
+
+      expect(showNewsItem(articleJustExpired)).toEqual(false);
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/components/news_feed/helpers.ts b/x-pack/plugins/siem/public/common/components/news_feed/helpers.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/news_feed/helpers.ts
rename to x-pack/plugins/siem/public/common/components/news_feed/helpers.ts
diff --git a/x-pack/plugins/siem/public/components/news_feed/index.tsx b/x-pack/plugins/siem/public/common/components/news_feed/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/news_feed/index.tsx
rename to x-pack/plugins/siem/public/common/components/news_feed/index.tsx
diff --git a/x-pack/plugins/siem/public/components/news_feed/news_feed.tsx b/x-pack/plugins/siem/public/common/components/news_feed/news_feed.tsx
similarity index 86%
rename from x-pack/plugins/siem/public/components/news_feed/news_feed.tsx
rename to x-pack/plugins/siem/public/common/components/news_feed/news_feed.tsx
index cd356212b44006..523273d1caf2e7 100644
--- a/x-pack/plugins/siem/public/components/news_feed/news_feed.tsx
+++ b/x-pack/plugins/siem/public/common/components/news_feed/news_feed.tsx
@@ -6,8 +6,8 @@
 
 import React from 'react';
 
-import { LoadingPlaceholders } from '../page/overview/loading_placeholders';
-import { NEWS_FEED_TITLE } from '../../pages/overview/translations';
+import { LoadingPlaceholders } from '../../../overview/components/loading_placeholders';
+import { NEWS_FEED_TITLE } from '../../../overview/pages/translations';
 import { SidebarHeader } from '../sidebar_header';
 
 import { NoNews } from './no_news';
diff --git a/x-pack/plugins/siem/public/components/news_feed/news_link/index.tsx b/x-pack/plugins/siem/public/common/components/news_feed/news_link/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/news_feed/news_link/index.tsx
rename to x-pack/plugins/siem/public/common/components/news_feed/news_link/index.tsx
diff --git a/x-pack/plugins/siem/public/components/news_feed/no_news/index.tsx b/x-pack/plugins/siem/public/common/components/news_feed/no_news/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/news_feed/no_news/index.tsx
rename to x-pack/plugins/siem/public/common/components/news_feed/no_news/index.tsx
diff --git a/x-pack/plugins/siem/public/components/news_feed/post/index.tsx b/x-pack/plugins/siem/public/common/components/news_feed/post/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/news_feed/post/index.tsx
rename to x-pack/plugins/siem/public/common/components/news_feed/post/index.tsx
diff --git a/x-pack/plugins/siem/public/components/news_feed/translations.ts b/x-pack/plugins/siem/public/common/components/news_feed/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/news_feed/translations.ts
rename to x-pack/plugins/siem/public/common/components/news_feed/translations.ts
diff --git a/x-pack/plugins/siem/public/components/news_feed/types.ts b/x-pack/plugins/siem/public/common/components/news_feed/types.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/news_feed/types.ts
rename to x-pack/plugins/siem/public/common/components/news_feed/types.ts
diff --git a/x-pack/plugins/siem/public/components/page/index.tsx b/x-pack/plugins/siem/public/common/components/page/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/index.tsx
rename to x-pack/plugins/siem/public/common/components/page/index.tsx
diff --git a/x-pack/plugins/siem/public/components/page/manage_query.tsx b/x-pack/plugins/siem/public/common/components/page/manage_query.tsx
similarity index 95%
rename from x-pack/plugins/siem/public/components/page/manage_query.tsx
rename to x-pack/plugins/siem/public/common/components/page/manage_query.tsx
index 3b723c66f5af57..9e78f704b0f054 100644
--- a/x-pack/plugins/siem/public/components/page/manage_query.tsx
+++ b/x-pack/plugins/siem/public/common/components/page/manage_query.tsx
@@ -9,7 +9,7 @@ import { omit } from 'lodash/fp';
 import React from 'react';
 
 import { inputsModel } from '../../store';
-import { SetQuery } from '../../pages/hosts/navigation/types';
+import { SetQuery } from '../../../hosts/pages/navigation/types';
 
 interface OwnProps {
   deleteQuery?: ({ id }: { id: string }) => void;
diff --git a/x-pack/plugins/siem/public/components/page/translations.ts b/x-pack/plugins/siem/public/common/components/page/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/translations.ts
rename to x-pack/plugins/siem/public/common/components/page/translations.ts
diff --git a/x-pack/plugins/siem/public/components/page_route/index.tsx b/x-pack/plugins/siem/public/common/components/page_route/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/page_route/index.tsx
rename to x-pack/plugins/siem/public/common/components/page_route/index.tsx
diff --git a/x-pack/plugins/siem/public/components/page_route/pageroute.test.tsx b/x-pack/plugins/siem/public/common/components/page_route/pageroute.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/page_route/pageroute.test.tsx
rename to x-pack/plugins/siem/public/common/components/page_route/pageroute.test.tsx
diff --git a/x-pack/plugins/siem/public/components/page_route/pageroute.tsx b/x-pack/plugins/siem/public/common/components/page_route/pageroute.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/page_route/pageroute.tsx
rename to x-pack/plugins/siem/public/common/components/page_route/pageroute.tsx
diff --git a/x-pack/plugins/siem/public/components/paginated_table/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/common/components/paginated_table/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/paginated_table/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/paginated_table/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/paginated_table/helpers.test.ts b/x-pack/plugins/siem/public/common/components/paginated_table/helpers.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/paginated_table/helpers.test.ts
rename to x-pack/plugins/siem/public/common/components/paginated_table/helpers.test.ts
diff --git a/x-pack/plugins/siem/public/common/components/paginated_table/helpers.ts b/x-pack/plugins/siem/public/common/components/paginated_table/helpers.ts
new file mode 100644
index 00000000000000..8fde81adc922a7
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/paginated_table/helpers.ts
@@ -0,0 +1,20 @@
+/*
+ * 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 { PaginationInputPaginated } from '../../../graphql/types';
+
+export const generateTablePaginationOptions = (
+  activePage: number,
+  limit: number
+): PaginationInputPaginated => {
+  const cursorStart = activePage * limit;
+  return {
+    activePage,
+    cursorStart,
+    fakePossibleCount: 4 <= activePage && activePage > 0 ? limit * (activePage + 2) : limit * 5,
+    querySize: limit + cursorStart,
+  };
+};
diff --git a/x-pack/plugins/siem/public/components/paginated_table/index.mock.tsx b/x-pack/plugins/siem/public/common/components/paginated_table/index.mock.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/paginated_table/index.mock.tsx
rename to x-pack/plugins/siem/public/common/components/paginated_table/index.mock.tsx
diff --git a/x-pack/plugins/siem/public/common/components/paginated_table/index.test.tsx b/x-pack/plugins/siem/public/common/components/paginated_table/index.test.tsx
new file mode 100644
index 00000000000000..108ae19b5a2b47
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/paginated_table/index.test.tsx
@@ -0,0 +1,522 @@
+/*
+ * 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 { mount, shallow } from 'enzyme';
+import React from 'react';
+
+import { DEFAULT_MAX_TABLE_QUERY_SIZE } from '../../../../common/constants';
+import { Direction } from '../../../graphql/types';
+
+import { BasicTableProps, PaginatedTable } from './index';
+import { getHostsColumns, mockData, rowItems, sortedHosts } from './index.mock';
+import { ThemeProvider } from 'styled-components';
+import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
+
+jest.mock('react', () => {
+  const r = jest.requireActual('react');
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return { ...r, memo: (x: any) => x };
+});
+
+describe('Paginated Table Component', () => {
+  const theme = () => ({ eui: euiDarkVars, darkMode: true });
+  let loadPage: jest.Mock<number>;
+  let updateLimitPagination: jest.Mock<number>;
+  let updateActivePage: jest.Mock<number>;
+  beforeEach(() => {
+    loadPage = jest.fn();
+    updateLimitPagination = jest.fn();
+    updateActivePage = jest.fn();
+  });
+
+  describe('rendering', () => {
+    test('it renders the default load more table', () => {
+      const wrapper = shallow(
+        <ThemeProvider theme={theme}>
+          <PaginatedTable
+            activePage={0}
+            columns={getHostsColumns()}
+            headerCount={1}
+            headerSupplement={<p>{'My test supplement.'}</p>}
+            headerTitle="Hosts"
+            headerTooltip="My test tooltip"
+            headerUnit="Test Unit"
+            itemsPerRow={rowItems}
+            limit={1}
+            loading={false}
+            loadPage={loadPage}
+            pageOfItems={mockData.Hosts.edges}
+            showMorePagesIndicator={true}
+            totalCount={10}
+            updateActivePage={updateActivePage}
+            updateLimitPagination={limit => updateLimitPagination({ limit })}
+          />
+        </ThemeProvider>
+      );
+
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    test('it renders the loading panel at the beginning ', () => {
+      const wrapper = mount(
+        <ThemeProvider theme={theme}>
+          <PaginatedTable
+            activePage={0}
+            columns={getHostsColumns()}
+            headerCount={-1}
+            headerSupplement={<p>{'My test supplement.'}</p>}
+            headerTitle="Hosts"
+            headerTooltip="My test tooltip"
+            headerUnit="Test Unit"
+            itemsPerRow={rowItems}
+            limit={1}
+            loading={true}
+            loadPage={loadPage}
+            pageOfItems={[]}
+            showMorePagesIndicator={true}
+            totalCount={10}
+            updateActivePage={updateActivePage}
+            updateLimitPagination={limit => updateLimitPagination({ limit })}
+          />
+        </ThemeProvider>
+      );
+
+      expect(
+        wrapper.find('[data-test-subj="initialLoadingPanelPaginatedTable"]').exists()
+      ).toBeTruthy();
+    });
+
+    test('it renders the over loading panel after data has been in the table ', () => {
+      const wrapper = mount(
+        <ThemeProvider theme={theme}>
+          <PaginatedTable
+            activePage={0}
+            columns={getHostsColumns()}
+            headerCount={1}
+            headerSupplement={<p>{'My test supplement.'}</p>}
+            headerTitle="Hosts"
+            headerTooltip="My test tooltip"
+            headerUnit="Test Unit"
+            itemsPerRow={rowItems}
+            limit={1}
+            loading={true}
+            loadPage={loadPage}
+            pageOfItems={mockData.Hosts.edges}
+            showMorePagesIndicator={true}
+            totalCount={10}
+            updateActivePage={updateActivePage}
+            updateLimitPagination={limit => updateLimitPagination({ limit })}
+          />
+        </ThemeProvider>
+      );
+
+      expect(wrapper.find('[data-test-subj="loadingPanelPaginatedTable"]').exists()).toBeTruthy();
+    });
+
+    test('it renders the correct amount of pages and starts at activePage: 0', () => {
+      const wrapper = mount(
+        <ThemeProvider theme={theme}>
+          <PaginatedTable
+            activePage={0}
+            columns={getHostsColumns()}
+            headerCount={1}
+            headerSupplement={<p>{'My test supplement.'}</p>}
+            headerTitle="Hosts"
+            headerTooltip="My test tooltip"
+            headerUnit="Test Unit"
+            itemsPerRow={rowItems}
+            limit={1}
+            loading={false}
+            loadPage={loadPage}
+            pageOfItems={mockData.Hosts.edges}
+            showMorePagesIndicator={true}
+            totalCount={10}
+            updateActivePage={updateActivePage}
+            updateLimitPagination={limit => updateLimitPagination({ limit })}
+          />
+        </ThemeProvider>
+      );
+
+      const paginiationProps = wrapper
+        .find('[data-test-subj="numberedPagination"]')
+        .first()
+        .props();
+
+      const expectedPaginationProps = {
+        'data-test-subj': 'numberedPagination',
+        pageCount: 10,
+        activePage: 0,
+      };
+      expect(JSON.stringify(paginiationProps)).toEqual(JSON.stringify(expectedPaginationProps));
+    });
+
+    test('it render popover to select new limit in table', () => {
+      const wrapper = mount(
+        <ThemeProvider theme={theme}>
+          <PaginatedTable
+            activePage={0}
+            columns={getHostsColumns()}
+            headerCount={1}
+            headerSupplement={<p>{'My test supplement.'}</p>}
+            headerTitle="Hosts"
+            headerTooltip="My test tooltip"
+            headerUnit="Test Unit"
+            itemsPerRow={rowItems}
+            limit={2}
+            loading={false}
+            loadPage={loadPage}
+            pageOfItems={mockData.Hosts.edges}
+            showMorePagesIndicator={true}
+            totalCount={10}
+            updateActivePage={updateActivePage}
+            updateLimitPagination={limit => updateLimitPagination({ limit })}
+          />
+        </ThemeProvider>
+      );
+
+      wrapper
+        .find('[data-test-subj="loadingMoreSizeRowPopover"] button')
+        .first()
+        .simulate('click');
+      expect(wrapper.find('[data-test-subj="loadingMorePickSizeRow"]').exists()).toBeTruthy();
+    });
+
+    test('it will NOT render popover to select new limit in table if props itemsPerRow is empty', () => {
+      const wrapper = mount(
+        <ThemeProvider theme={theme}>
+          <PaginatedTable
+            activePage={0}
+            columns={getHostsColumns()}
+            headerCount={1}
+            headerSupplement={<p>{'My test supplement.'}</p>}
+            headerTitle="Hosts"
+            headerTooltip="My test tooltip"
+            headerUnit="Test Unit"
+            itemsPerRow={[]}
+            limit={2}
+            loading={false}
+            loadPage={loadPage}
+            pageOfItems={mockData.Hosts.edges}
+            showMorePagesIndicator={true}
+            totalCount={10}
+            updateActivePage={updateActivePage}
+            updateLimitPagination={limit => updateLimitPagination({ limit })}
+          />
+        </ThemeProvider>
+      );
+
+      expect(wrapper.find('[data-test-subj="loadingMoreSizeRowPopover"]').exists()).toBeFalsy();
+    });
+
+    test('It should render a sort icon if sorting is defined', () => {
+      const mockOnChange = jest.fn();
+      const wrapper = mount(
+        <ThemeProvider theme={theme}>
+          <PaginatedTable
+            activePage={0}
+            columns={sortedHosts}
+            headerCount={1}
+            headerSupplement={<p>{'My test supplement.'}</p>}
+            headerTitle="Hosts"
+            headerTooltip="My test tooltip"
+            headerUnit="Test Unit"
+            itemsPerRow={rowItems}
+            limit={2}
+            loading={false}
+            loadPage={jest.fn()}
+            onChange={mockOnChange}
+            pageOfItems={mockData.Hosts.edges}
+            showMorePagesIndicator={true}
+            sorting={{ direction: Direction.asc, field: 'node.host.name' }}
+            totalCount={10}
+            updateActivePage={updateActivePage}
+            updateLimitPagination={limit => updateLimitPagination({ limit })}
+          />
+        </ThemeProvider>
+      );
+
+      expect(wrapper.find('.euiTable thead tr th button svg')).toBeTruthy();
+    });
+
+    test('Should display toast when user reaches end of results max', () => {
+      const wrapper = mount(
+        <ThemeProvider theme={theme}>
+          <PaginatedTable
+            activePage={0}
+            columns={getHostsColumns()}
+            headerCount={1}
+            headerSupplement={<p>{'My test supplement.'}</p>}
+            headerTitle="Hosts"
+            headerTooltip="My test tooltip"
+            headerUnit="Test Unit"
+            itemsPerRow={rowItems}
+            limit={DEFAULT_MAX_TABLE_QUERY_SIZE}
+            loading={false}
+            loadPage={loadPage}
+            pageOfItems={mockData.Hosts.edges}
+            showMorePagesIndicator={true}
+            totalCount={DEFAULT_MAX_TABLE_QUERY_SIZE * 3}
+            updateActivePage={updateActivePage}
+            updateLimitPagination={limit => updateLimitPagination({ limit })}
+          />
+        </ThemeProvider>
+      );
+      wrapper
+        .find('[data-test-subj="pagination-button-next"]')
+        .first()
+        .simulate('click');
+      expect(updateActivePage.mock.calls.length).toEqual(0);
+    });
+
+    test('Should show items per row if totalCount is greater than items', () => {
+      const wrapper = mount(
+        <ThemeProvider theme={theme}>
+          <PaginatedTable
+            activePage={0}
+            columns={getHostsColumns()}
+            headerCount={1}
+            headerSupplement={<p>{'My test supplement.'}</p>}
+            headerTitle="Hosts"
+            headerTooltip="My test tooltip"
+            headerUnit="Test Unit"
+            itemsPerRow={rowItems}
+            limit={DEFAULT_MAX_TABLE_QUERY_SIZE}
+            loading={false}
+            loadPage={loadPage}
+            pageOfItems={mockData.Hosts.edges}
+            showMorePagesIndicator={true}
+            totalCount={30}
+            updateActivePage={updateActivePage}
+            updateLimitPagination={limit => updateLimitPagination({ limit })}
+          />
+        </ThemeProvider>
+      );
+      expect(wrapper.find('[data-test-subj="loadingMoreSizeRowPopover"]').exists()).toBeTruthy();
+    });
+
+    test('Should hide items per row if totalCount is less than items', () => {
+      const wrapper = mount(
+        <ThemeProvider theme={theme}>
+          <PaginatedTable
+            activePage={0}
+            columns={getHostsColumns()}
+            headerCount={1}
+            headerSupplement={<p>{'My test supplement.'}</p>}
+            headerTitle="Hosts"
+            headerTooltip="My test tooltip"
+            headerUnit="Test Unit"
+            itemsPerRow={rowItems}
+            limit={DEFAULT_MAX_TABLE_QUERY_SIZE}
+            loading={false}
+            loadPage={loadPage}
+            pageOfItems={mockData.Hosts.edges}
+            showMorePagesIndicator={true}
+            totalCount={1}
+            updateActivePage={updateActivePage}
+            updateLimitPagination={limit => updateLimitPagination({ limit })}
+          />
+        </ThemeProvider>
+      );
+      expect(wrapper.find('[data-test-subj="loadingMoreSizeRowPopover"]').exists()).toBeFalsy();
+    });
+  });
+
+  describe('Events', () => {
+    test('should call updateActivePage with 1 when clicking to the first page', () => {
+      const wrapper = mount(
+        <ThemeProvider theme={theme}>
+          <PaginatedTable
+            activePage={0}
+            columns={getHostsColumns()}
+            headerCount={1}
+            headerSupplement={<p>{'My test supplement.'}</p>}
+            headerTitle="Hosts"
+            headerTooltip="My test tooltip"
+            headerUnit="Test Unit"
+            itemsPerRow={rowItems}
+            limit={1}
+            loading={false}
+            loadPage={loadPage}
+            pageOfItems={mockData.Hosts.edges}
+            showMorePagesIndicator={true}
+            totalCount={10}
+            updateActivePage={updateActivePage}
+            updateLimitPagination={limit => updateLimitPagination({ limit })}
+          />
+        </ThemeProvider>
+      );
+      wrapper
+        .find('[data-test-subj="pagination-button-next"]')
+        .first()
+        .simulate('click');
+      expect(updateActivePage.mock.calls[0][0]).toEqual(1);
+    });
+
+    test('Should call updateActivePage with 0 when you pick a new limit', () => {
+      const wrapper = mount(
+        <ThemeProvider theme={theme}>
+          <PaginatedTable
+            activePage={0}
+            columns={getHostsColumns()}
+            headerCount={1}
+            headerSupplement={<p>{'My test supplement.'}</p>}
+            headerTitle="Hosts"
+            headerTooltip="My test tooltip"
+            headerUnit="Test Unit"
+            itemsPerRow={rowItems}
+            limit={2}
+            loading={false}
+            loadPage={loadPage}
+            pageOfItems={mockData.Hosts.edges}
+            showMorePagesIndicator={true}
+            totalCount={10}
+            updateActivePage={updateActivePage}
+            updateLimitPagination={limit => updateLimitPagination({ limit })}
+          />
+        </ThemeProvider>
+      );
+      wrapper
+        .find('[data-test-subj="pagination-button-next"]')
+        .first()
+        .simulate('click');
+
+      wrapper
+        .find('[data-test-subj="loadingMoreSizeRowPopover"] button')
+        .first()
+        .simulate('click');
+
+      wrapper
+        .find('[data-test-subj="loadingMorePickSizeRow"] button')
+        .first()
+        .simulate('click');
+      expect(updateActivePage.mock.calls[1][0]).toEqual(0);
+    });
+
+    test('should update the page when the activePage is changed from redux', () => {
+      const ourProps: BasicTableProps<unknown> = {
+        activePage: 3,
+        columns: getHostsColumns(),
+        headerCount: 1,
+        headerSupplement: <p>{'My test supplement.'}</p>,
+        headerTitle: 'Hosts',
+        headerTooltip: 'My test tooltip',
+        headerUnit: 'Test Unit',
+        itemsPerRow: rowItems,
+        limit: 1,
+        loading: false,
+        loadPage,
+        pageOfItems: mockData.Hosts.edges,
+        showMorePagesIndicator: true,
+        totalCount: 10,
+        updateActivePage,
+        updateLimitPagination: limit => updateLimitPagination({ limit }),
+      };
+
+      // enzyme does not allow us to pass props to child of HOC
+      // so we make a component to pass it the props context
+      // ComponentWithContext will pass the changed props to Component
+      // https://github.com/airbnb/enzyme/issues/1853#issuecomment-443475903
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const ComponentWithContext = (props: BasicTableProps<any>) => {
+        return (
+          <ThemeProvider theme={theme}>
+            <PaginatedTable {...props} />
+          </ThemeProvider>
+        );
+      };
+
+      const wrapper = mount(<ComponentWithContext {...ourProps} />);
+      expect(
+        wrapper
+          .find('[data-test-subj="numberedPagination"]')
+          .first()
+          .prop('activePage')
+      ).toEqual(3);
+      wrapper.setProps({ activePage: 0 });
+      wrapper.update();
+      expect(
+        wrapper
+          .find('[data-test-subj="numberedPagination"]')
+          .first()
+          .prop('activePage')
+      ).toEqual(0);
+    });
+
+    test('Should call updateLimitPagination when you pick a new limit', () => {
+      const wrapper = mount(
+        <ThemeProvider theme={theme}>
+          <PaginatedTable
+            activePage={0}
+            columns={getHostsColumns()}
+            headerCount={1}
+            headerSupplement={<p>{'My test supplement.'}</p>}
+            headerTitle="Hosts"
+            headerTooltip="My test tooltip"
+            headerUnit="Test Unit"
+            itemsPerRow={rowItems}
+            limit={2}
+            loading={false}
+            loadPage={loadPage}
+            pageOfItems={mockData.Hosts.edges}
+            showMorePagesIndicator={true}
+            totalCount={10}
+            updateActivePage={updateActivePage}
+            updateLimitPagination={limit => updateLimitPagination({ limit })}
+          />
+        </ThemeProvider>
+      );
+
+      wrapper
+        .find('[data-test-subj="loadingMoreSizeRowPopover"] button')
+        .first()
+        .simulate('click');
+
+      wrapper
+        .find('[data-test-subj="loadingMorePickSizeRow"] button')
+        .first()
+        .simulate('click');
+      expect(updateLimitPagination).toBeCalled();
+    });
+
+    test('Should call onChange when you choose a new sort in the table', () => {
+      const mockOnChange = jest.fn();
+      const wrapper = mount(
+        <ThemeProvider theme={theme}>
+          <PaginatedTable
+            activePage={0}
+            columns={sortedHosts}
+            headerCount={1}
+            headerSupplement={<p>{'My test supplement.'}</p>}
+            headerTitle="Hosts"
+            headerTooltip="My test tooltip"
+            headerUnit="Test Unit"
+            itemsPerRow={rowItems}
+            limit={2}
+            loading={false}
+            loadPage={jest.fn()}
+            onChange={mockOnChange}
+            pageOfItems={mockData.Hosts.edges}
+            showMorePagesIndicator={true}
+            sorting={{ direction: Direction.asc, field: 'node.host.name' }}
+            totalCount={10}
+            updateActivePage={updateActivePage}
+            updateLimitPagination={limit => updateLimitPagination({ limit })}
+          />
+        </ThemeProvider>
+      );
+
+      wrapper
+        .find('.euiTable thead tr th button')
+        .first()
+        .simulate('click');
+
+      expect(mockOnChange).toBeCalled();
+      expect(mockOnChange.mock.calls[0]).toEqual([
+        { page: undefined, sort: { direction: 'desc', field: 'node.host.name' } },
+      ]);
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/common/components/paginated_table/index.tsx b/x-pack/plugins/siem/public/common/components/paginated_table/index.tsx
new file mode 100644
index 00000000000000..3b3130af77cfd7
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/paginated_table/index.tsx
@@ -0,0 +1,350 @@
+/*
+ * 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 {
+  EuiBasicTable,
+  EuiBasicTableProps,
+  EuiButtonEmpty,
+  EuiContextMenuItem,
+  EuiContextMenuPanel,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiGlobalToastListToast as Toast,
+  EuiLoadingContent,
+  EuiPagination,
+  EuiPopover,
+  Direction,
+} from '@elastic/eui';
+import { noop } from 'lodash/fp';
+import React, { FC, memo, useState, useEffect, ComponentType } from 'react';
+import styled from 'styled-components';
+
+import { DEFAULT_MAX_TABLE_QUERY_SIZE } from '../../../../common/constants';
+import { AuthTableColumns } from '../../../hosts/components/authentications_table';
+import { HostsTableColumns } from '../../../hosts/components/hosts_table';
+import { NetworkDnsColumns } from '../../../network/components/network_dns_table/columns';
+import { NetworkHttpColumns } from '../../../network/components/network_http_table/columns';
+import {
+  NetworkTopNFlowColumns,
+  NetworkTopNFlowColumnsIpDetails,
+} from '../../../network/components/network_top_n_flow_table/columns';
+import {
+  NetworkTopCountriesColumns,
+  NetworkTopCountriesColumnsIpDetails,
+} from '../../../network/components/network_top_countries_table/columns';
+import { TlsColumns } from '../../../network/components/tls_table/columns';
+import { UncommonProcessTableColumns } from '../../../hosts/components/uncommon_process_table';
+import { UsersColumns } from '../../../network/components/users_table/columns';
+import { HeaderSection } from '../header_section';
+import { Loader } from '../loader';
+import { useStateToaster } from '../toasters';
+
+import * as i18n from './translations';
+import { Panel } from '../panel';
+import { InspectButtonContainer } from '../inspect';
+
+const DEFAULT_DATA_TEST_SUBJ = 'paginated-table';
+
+export interface ItemsPerRow {
+  text: string;
+  numberOfRow: number;
+}
+
+export interface SortingBasicTable {
+  field: string;
+  direction: Direction;
+  allowNeutralSort?: boolean;
+}
+
+export interface Criteria {
+  page?: { index: number; size: number };
+  sort?: SortingBasicTable;
+}
+
+declare type HostsTableColumnsTest = [
+  Columns<string>,
+  Columns<string>,
+  Columns<string>,
+  Columns<string>
+];
+
+declare type BasicTableColumns =
+  | AuthTableColumns
+  | HostsTableColumns
+  | HostsTableColumnsTest
+  | NetworkDnsColumns
+  | NetworkHttpColumns
+  | NetworkTopCountriesColumns
+  | NetworkTopCountriesColumnsIpDetails
+  | NetworkTopNFlowColumns
+  | NetworkTopNFlowColumnsIpDetails
+  | TlsColumns
+  | UncommonProcessTableColumns
+  | UsersColumns;
+
+declare type SiemTables = BasicTableProps<BasicTableColumns>;
+
+// Using telescoping templates to remove 'any' that was polluting downstream column type checks
+export interface BasicTableProps<T> {
+  activePage: number;
+  columns: T;
+  dataTestSubj?: string;
+  headerCount: number;
+  headerSupplement?: React.ReactElement;
+  headerTitle: string | React.ReactElement;
+  headerTooltip?: string;
+  headerUnit: string | React.ReactElement;
+  id?: string;
+  itemsPerRow?: ItemsPerRow[];
+  isInspect?: boolean;
+  limit: number;
+  loading: boolean;
+  loadPage: (activePage: number) => void;
+  onChange?: (criteria: Criteria) => void;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  pageOfItems: any[];
+  showMorePagesIndicator: boolean;
+  sorting?: SortingBasicTable;
+  totalCount: number;
+  updateActivePage: (activePage: number) => void;
+  updateLimitPagination: (limit: number) => void;
+}
+type Func<T> = (arg: T) => string | number;
+
+export interface Columns<T, U = T> {
+  align?: string;
+  field?: string;
+  hideForMobile?: boolean;
+  isMobileHeader?: boolean;
+  name: string | React.ReactNode;
+  render?: (item: T, node: U) => React.ReactNode;
+  sortable?: boolean | Func<T>;
+  truncateText?: boolean;
+  width?: string;
+}
+
+const PaginatedTableComponent: FC<SiemTables> = ({
+  activePage,
+  columns,
+  dataTestSubj = DEFAULT_DATA_TEST_SUBJ,
+  headerCount,
+  headerSupplement,
+  headerTitle,
+  headerTooltip,
+  headerUnit,
+  id,
+  isInspect,
+  itemsPerRow,
+  limit,
+  loading,
+  loadPage,
+  onChange = noop,
+  pageOfItems,
+  showMorePagesIndicator,
+  sorting = null,
+  totalCount,
+  updateActivePage,
+  updateLimitPagination,
+}) => {
+  const [myLoading, setMyLoading] = useState(loading);
+  const [myActivePage, setActivePage] = useState(activePage);
+  const [loadingInitial, setLoadingInitial] = useState(headerCount === -1);
+  const [isPopoverOpen, setPopoverOpen] = useState(false);
+
+  const pageCount = Math.ceil(totalCount / limit);
+  const dispatchToaster = useStateToaster()[1];
+
+  useEffect(() => {
+    setActivePage(activePage);
+  }, [activePage]);
+
+  useEffect(() => {
+    if (headerCount >= 0 && loadingInitial) {
+      setLoadingInitial(false);
+    }
+  }, [loadingInitial, headerCount]);
+
+  useEffect(() => {
+    setMyLoading(loading);
+  }, [loading]);
+
+  const onButtonClick = () => {
+    setPopoverOpen(!isPopoverOpen);
+  };
+
+  const closePopover = () => {
+    setPopoverOpen(false);
+  };
+
+  const goToPage = (newActivePage: number) => {
+    if ((newActivePage + 1) * limit >= DEFAULT_MAX_TABLE_QUERY_SIZE) {
+      const toast: Toast = {
+        id: 'PaginationWarningMsg',
+        title: headerTitle + i18n.TOAST_TITLE,
+        color: 'warning',
+        iconType: 'alert',
+        toastLifeTimeMs: 10000,
+        text: i18n.TOAST_TEXT,
+      };
+      return dispatchToaster({
+        type: 'addToaster',
+        toast,
+      });
+    }
+    setActivePage(newActivePage);
+    loadPage(newActivePage);
+    updateActivePage(newActivePage);
+  };
+
+  const button = (
+    <EuiButtonEmpty
+      size="xs"
+      color="text"
+      iconType="arrowDown"
+      iconSide="right"
+      onClick={onButtonClick}
+    >
+      {`${i18n.ROWS}: ${limit}`}
+    </EuiButtonEmpty>
+  );
+
+  const rowItems =
+    itemsPerRow &&
+    itemsPerRow.map((item: ItemsPerRow) => (
+      <EuiContextMenuItem
+        key={item.text}
+        icon={limit === item.numberOfRow ? 'check' : 'empty'}
+        onClick={() => {
+          closePopover();
+          updateLimitPagination(item.numberOfRow);
+          updateActivePage(0); // reset results to first page
+        }}
+      >
+        {item.text}
+      </EuiContextMenuItem>
+    ));
+  const PaginationWrapper = showMorePagesIndicator ? PaginationEuiFlexItem : EuiFlexItem;
+
+  return (
+    <InspectButtonContainer show={!loadingInitial}>
+      <Panel data-test-subj={`${dataTestSubj}-loading-${loading}`} loading={loading}>
+        <HeaderSection
+          id={id}
+          subtitle={
+            !loadingInitial &&
+            `${i18n.SHOWING}: ${headerCount >= 0 ? headerCount.toLocaleString() : 0} ${headerUnit}`
+          }
+          title={headerTitle}
+          tooltip={headerTooltip}
+        >
+          {!loadingInitial && headerSupplement}
+        </HeaderSection>
+
+        {loadingInitial ? (
+          <EuiLoadingContent data-test-subj="initialLoadingPanelPaginatedTable" lines={10} />
+        ) : (
+          <>
+            <BasicTable
+              columns={columns}
+              compressed
+              items={pageOfItems}
+              onChange={onChange}
+              sorting={
+                sorting
+                  ? {
+                      sort: {
+                        field: sorting.field,
+                        direction: sorting.direction,
+                      },
+                    }
+                  : undefined
+              }
+            />
+            <FooterAction>
+              <EuiFlexItem>
+                {itemsPerRow && itemsPerRow.length > 0 && totalCount >= itemsPerRow[0].numberOfRow && (
+                  <EuiPopover
+                    id="customizablePagination"
+                    data-test-subj="loadingMoreSizeRowPopover"
+                    button={button}
+                    isOpen={isPopoverOpen}
+                    closePopover={closePopover}
+                    panelPaddingSize="none"
+                  >
+                    <EuiContextMenuPanel items={rowItems} data-test-subj="loadingMorePickSizeRow" />
+                  </EuiPopover>
+                )}
+              </EuiFlexItem>
+
+              <PaginationWrapper grow={false}>
+                <EuiPagination
+                  data-test-subj="numberedPagination"
+                  pageCount={pageCount}
+                  activePage={myActivePage}
+                  onPageClick={goToPage}
+                />
+              </PaginationWrapper>
+            </FooterAction>
+            {(isInspect || myLoading) && (
+              <Loader data-test-subj="loadingPanelPaginatedTable" overlay size="xl" />
+            )}
+          </>
+        )}
+      </Panel>
+    </InspectButtonContainer>
+  );
+};
+
+export const PaginatedTable = memo(PaginatedTableComponent);
+
+type BasicTableType = ComponentType<EuiBasicTableProps<any>>; // eslint-disable-line @typescript-eslint/no-explicit-any
+const BasicTable = styled(EuiBasicTable as BasicTableType)`
+  tbody {
+    th,
+    td {
+      vertical-align: top;
+    }
+
+    .euiTableCellContent {
+      display: block;
+    }
+  }
+` as any; // eslint-disable-line @typescript-eslint/no-explicit-any
+
+BasicTable.displayName = 'BasicTable';
+
+const FooterAction = styled(EuiFlexGroup).attrs(() => ({
+  alignItems: 'center',
+  responsive: false,
+}))`
+  margin-top: ${({ theme }) => theme.eui.euiSizeXS};
+`;
+
+FooterAction.displayName = 'FooterAction';
+
+const PaginationEuiFlexItem = styled(EuiFlexItem)`
+  @media only screen and (min-width: ${({ theme }) => theme.eui.euiBreakpoints.m}) {
+    .euiButtonIcon:last-child {
+      margin-left: 28px;
+    }
+
+    .euiPagination {
+      position: relative;
+    }
+
+    .euiPagination::before {
+      bottom: 0;
+      color: ${({ theme }) => theme.eui.euiButtonColorDisabled};
+      content: '\\2026';
+      font-size: ${({ theme }) => theme.eui.euiFontSizeS};
+      padding: 5px ${({ theme }) => theme.eui.euiSizeS};
+      position: absolute;
+      right: ${({ theme }) => theme.eui.euiSizeL};
+    }
+  }
+`;
+
+PaginationEuiFlexItem.displayName = 'PaginationEuiFlexItem';
diff --git a/x-pack/plugins/siem/public/components/paginated_table/translations.ts b/x-pack/plugins/siem/public/common/components/paginated_table/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/paginated_table/translations.ts
rename to x-pack/plugins/siem/public/common/components/paginated_table/translations.ts
diff --git a/x-pack/plugins/siem/public/components/panel/index.test.tsx b/x-pack/plugins/siem/public/common/components/panel/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/panel/index.test.tsx
rename to x-pack/plugins/siem/public/common/components/panel/index.test.tsx
diff --git a/x-pack/plugins/siem/public/components/panel/index.tsx b/x-pack/plugins/siem/public/common/components/panel/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/panel/index.tsx
rename to x-pack/plugins/siem/public/common/components/panel/index.tsx
diff --git a/x-pack/plugins/siem/public/components/progress_inline/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/common/components/progress_inline/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/progress_inline/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/progress_inline/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/progress_inline/index.test.tsx b/x-pack/plugins/siem/public/common/components/progress_inline/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/progress_inline/index.test.tsx
rename to x-pack/plugins/siem/public/common/components/progress_inline/index.test.tsx
diff --git a/x-pack/plugins/siem/public/components/progress_inline/index.tsx b/x-pack/plugins/siem/public/common/components/progress_inline/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/progress_inline/index.tsx
rename to x-pack/plugins/siem/public/common/components/progress_inline/index.tsx
diff --git a/x-pack/plugins/siem/public/common/components/query_bar/index.test.tsx b/x-pack/plugins/siem/public/common/components/query_bar/index.test.tsx
new file mode 100644
index 00000000000000..74c07640b83286
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/query_bar/index.test.tsx
@@ -0,0 +1,338 @@
+/*
+ * 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 { mount } from 'enzyme';
+import React from 'react';
+
+import { DEFAULT_FROM, DEFAULT_TO } from '../../../../common/constants';
+import { TestProviders, mockIndexPattern } from '../../mock';
+import { createKibanaCoreStartMock } from '../../mock/kibana_core';
+import { FilterManager, SearchBar } from '../../../../../../../src/plugins/data/public';
+import { QueryBar, QueryBarComponentProps } from '.';
+import { createKibanaContextProviderMock } from '../../mock/kibana_react';
+
+const mockUiSettingsForFilterManager = createKibanaCoreStartMock().uiSettings;
+
+describe('QueryBar ', () => {
+  // We are doing that because we need to wrapped this component with redux
+  // and redux does not like to be updated and since we need to update our
+  // child component (BODY) and we do not want to scare anyone with this error
+  // we are hiding it!!!
+  // eslint-disable-next-line no-console
+  const originalError = console.error;
+  beforeAll(() => {
+    // eslint-disable-next-line no-console
+    console.error = (...args: string[]) => {
+      if (/<Provider> does not support changing `store` on the fly/.test(args[0])) {
+        return;
+      }
+      originalError.call(console, ...args);
+    };
+  });
+
+  const mockOnChangeQuery = jest.fn();
+  const mockOnSubmitQuery = jest.fn();
+  const mockOnSavedQuery = jest.fn();
+
+  beforeEach(() => {
+    mockOnChangeQuery.mockClear();
+    mockOnSubmitQuery.mockClear();
+    mockOnSavedQuery.mockClear();
+  });
+
+  test('check if we format the appropriate props to QueryBar', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <QueryBar
+          dateRangeFrom={DEFAULT_FROM}
+          dateRangeTo={DEFAULT_TO}
+          hideSavedQuery={false}
+          indexPattern={mockIndexPattern}
+          isRefreshPaused={true}
+          filterQuery={{ query: 'here: query', language: 'kuery' }}
+          filterManager={new FilterManager(mockUiSettingsForFilterManager)}
+          filters={[]}
+          onChangedQuery={mockOnChangeQuery}
+          onSubmitQuery={mockOnSubmitQuery}
+          onSavedQuery={mockOnSavedQuery}
+        />
+      </TestProviders>
+    );
+    const {
+      customSubmitButton,
+      timeHistory,
+      onClearSavedQuery,
+      onFiltersUpdated,
+      onQueryChange,
+      onQuerySubmit,
+      onSaved,
+      onSavedQueryUpdated,
+      ...searchBarProps
+    } = wrapper.find(SearchBar).props();
+
+    expect(searchBarProps).toEqual({
+      dataTestSubj: undefined,
+      dateRangeFrom: 'now-24h',
+      dateRangeTo: 'now',
+      filters: [],
+      indexPatterns: [
+        {
+          fields: [
+            {
+              aggregatable: true,
+              name: '@timestamp',
+              searchable: true,
+              type: 'date',
+            },
+            {
+              aggregatable: true,
+              name: '@version',
+              searchable: true,
+              type: 'string',
+            },
+            {
+              aggregatable: true,
+              name: 'agent.ephemeral_id',
+              searchable: true,
+              type: 'string',
+            },
+            {
+              aggregatable: true,
+              name: 'agent.hostname',
+              searchable: true,
+              type: 'string',
+            },
+            {
+              aggregatable: true,
+              name: 'agent.id',
+              searchable: true,
+              type: 'string',
+            },
+            {
+              aggregatable: true,
+              name: 'agent.test1',
+              searchable: true,
+              type: 'string',
+            },
+            {
+              aggregatable: true,
+              name: 'agent.test2',
+              searchable: true,
+              type: 'string',
+            },
+            {
+              aggregatable: true,
+              name: 'agent.test3',
+              searchable: true,
+              type: 'string',
+            },
+            {
+              aggregatable: true,
+              name: 'agent.test4',
+              searchable: true,
+              type: 'string',
+            },
+            {
+              aggregatable: true,
+              name: 'agent.test5',
+              searchable: true,
+              type: 'string',
+            },
+            {
+              aggregatable: true,
+              name: 'agent.test6',
+              searchable: true,
+              type: 'string',
+            },
+            {
+              aggregatable: true,
+              name: 'agent.test7',
+              searchable: true,
+              type: 'string',
+            },
+            {
+              aggregatable: true,
+              name: 'agent.test8',
+              searchable: true,
+              type: 'string',
+            },
+            {
+              aggregatable: true,
+              name: 'host.name',
+              searchable: true,
+              type: 'string',
+            },
+          ],
+          title: 'filebeat-*,auditbeat-*,packetbeat-*',
+        },
+      ],
+      isLoading: false,
+      isRefreshPaused: true,
+      query: {
+        language: 'kuery',
+        query: 'here: query',
+      },
+      refreshInterval: undefined,
+      showAutoRefreshOnly: false,
+      showDatePicker: false,
+      showFilterBar: true,
+      showQueryBar: true,
+      showQueryInput: true,
+      showSaveQuery: true,
+    });
+  });
+
+  describe('#onQueryChange', () => {
+    test(' is the only reference that changed when filterQueryDraft props get updated', () => {
+      const KibanaWithStorageProvider = createKibanaContextProviderMock();
+
+      const Proxy = (props: QueryBarComponentProps) => (
+        <TestProviders>
+          <KibanaWithStorageProvider services={{ storage: { get: jest.fn() } }}>
+            <QueryBar {...props} />
+          </KibanaWithStorageProvider>
+        </TestProviders>
+      );
+
+      const wrapper = mount(
+        <Proxy
+          dateRangeFrom={DEFAULT_FROM}
+          dateRangeTo={DEFAULT_TO}
+          hideSavedQuery={false}
+          indexPattern={mockIndexPattern}
+          isRefreshPaused={true}
+          filterQuery={{ query: 'here: query', language: 'kuery' }}
+          filterManager={new FilterManager(mockUiSettingsForFilterManager)}
+          filters={[]}
+          onChangedQuery={mockOnChangeQuery}
+          onSubmitQuery={mockOnSubmitQuery}
+          onSavedQuery={mockOnSavedQuery}
+        />
+      );
+      const searchBarProps = wrapper.find(SearchBar).props();
+      const onChangedQueryRef = searchBarProps.onQueryChange;
+      const onSubmitQueryRef = searchBarProps.onQuerySubmit;
+      const onSavedQueryRef = searchBarProps.onSavedQueryUpdated;
+
+      const queryInput = wrapper.find(QueryBar).find('input[data-test-subj="queryInput"]');
+      queryInput.simulate('change', { target: { value: 'hello: world' } });
+      wrapper.update();
+
+      expect(onChangedQueryRef).not.toEqual(wrapper.find(SearchBar).props().onQueryChange);
+      expect(onSubmitQueryRef).toEqual(wrapper.find(SearchBar).props().onQuerySubmit);
+      expect(onSavedQueryRef).toEqual(wrapper.find(SearchBar).props().onSavedQueryUpdated);
+    });
+  });
+
+  describe('#onQuerySubmit', () => {
+    test(' is the only reference that changed when filterQuery props get updated', () => {
+      const Proxy = (props: QueryBarComponentProps) => (
+        <TestProviders>
+          <QueryBar {...props} />
+        </TestProviders>
+      );
+
+      const wrapper = mount(
+        <Proxy
+          dateRangeFrom={DEFAULT_FROM}
+          dateRangeTo={DEFAULT_TO}
+          hideSavedQuery={false}
+          indexPattern={mockIndexPattern}
+          isRefreshPaused={true}
+          filterQuery={{ query: 'here: query', language: 'kuery' }}
+          filterManager={new FilterManager(mockUiSettingsForFilterManager)}
+          filters={[]}
+          onChangedQuery={mockOnChangeQuery}
+          onSubmitQuery={mockOnSubmitQuery}
+          onSavedQuery={mockOnSavedQuery}
+        />
+      );
+      const searchBarProps = wrapper.find(SearchBar).props();
+      const onChangedQueryRef = searchBarProps.onQueryChange;
+      const onSubmitQueryRef = searchBarProps.onQuerySubmit;
+      const onSavedQueryRef = searchBarProps.onSavedQueryUpdated;
+
+      wrapper.setProps({ filterQuery: { expression: 'new: one', kind: 'kuery' } });
+      wrapper.update();
+
+      expect(onSubmitQueryRef).not.toEqual(wrapper.find(SearchBar).props().onQuerySubmit);
+      expect(onChangedQueryRef).not.toEqual(wrapper.find(SearchBar).props().onQueryChange);
+      expect(onSavedQueryRef).toEqual(wrapper.find(SearchBar).props().onSavedQueryUpdated);
+    });
+
+    test(' is only reference that changed when timelineId props get updated', () => {
+      const Proxy = (props: QueryBarComponentProps) => (
+        <TestProviders>
+          <QueryBar {...props} />
+        </TestProviders>
+      );
+
+      const wrapper = mount(
+        <Proxy
+          dateRangeFrom={DEFAULT_FROM}
+          dateRangeTo={DEFAULT_TO}
+          hideSavedQuery={false}
+          indexPattern={mockIndexPattern}
+          isRefreshPaused={true}
+          filterQuery={{ query: 'here: query', language: 'kuery' }}
+          filterManager={new FilterManager(mockUiSettingsForFilterManager)}
+          filters={[]}
+          onChangedQuery={mockOnChangeQuery}
+          onSubmitQuery={mockOnSubmitQuery}
+          onSavedQuery={mockOnSavedQuery}
+        />
+      );
+      const searchBarProps = wrapper.find(SearchBar).props();
+      const onChangedQueryRef = searchBarProps.onQueryChange;
+      const onSubmitQueryRef = searchBarProps.onQuerySubmit;
+      const onSavedQueryRef = searchBarProps.onSavedQueryUpdated;
+
+      wrapper.setProps({ onSubmitQuery: jest.fn() });
+      wrapper.update();
+
+      expect(onSubmitQueryRef).not.toEqual(wrapper.find(SearchBar).props().onQuerySubmit);
+      expect(onChangedQueryRef).toEqual(wrapper.find(SearchBar).props().onQueryChange);
+      expect(onSavedQueryRef).not.toEqual(wrapper.find(SearchBar).props().onSavedQueryUpdated);
+    });
+  });
+
+  describe('#onSavedQueryUpdated', () => {
+    test('is only reference that changed when dataProviders props get updated', () => {
+      const Proxy = (props: QueryBarComponentProps) => (
+        <TestProviders>
+          <QueryBar {...props} />
+        </TestProviders>
+      );
+
+      const wrapper = mount(
+        <Proxy
+          dateRangeFrom={DEFAULT_FROM}
+          dateRangeTo={DEFAULT_TO}
+          hideSavedQuery={false}
+          indexPattern={mockIndexPattern}
+          isRefreshPaused={true}
+          filterQuery={{ query: 'here: query', language: 'kuery' }}
+          filterManager={new FilterManager(mockUiSettingsForFilterManager)}
+          filters={[]}
+          onChangedQuery={mockOnChangeQuery}
+          onSubmitQuery={mockOnSubmitQuery}
+          onSavedQuery={mockOnSavedQuery}
+        />
+      );
+      const searchBarProps = wrapper.find(SearchBar).props();
+      const onChangedQueryRef = searchBarProps.onQueryChange;
+      const onSubmitQueryRef = searchBarProps.onQuerySubmit;
+      const onSavedQueryRef = searchBarProps.onSavedQueryUpdated;
+
+      wrapper.setProps({ onSavedQuery: jest.fn() });
+      wrapper.update();
+
+      expect(onSavedQueryRef).not.toEqual(wrapper.find(SearchBar).props().onSavedQueryUpdated);
+      expect(onChangedQueryRef).toEqual(wrapper.find(SearchBar).props().onQueryChange);
+      expect(onSubmitQueryRef).toEqual(wrapper.find(SearchBar).props().onQuerySubmit);
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/common/components/query_bar/index.tsx b/x-pack/plugins/siem/public/common/components/query_bar/index.tsx
new file mode 100644
index 00000000000000..557d389aefee92
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/query_bar/index.tsx
@@ -0,0 +1,153 @@
+/*
+ * 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, { memo, useState, useEffect, useMemo, useCallback } from 'react';
+import deepEqual from 'fast-deep-equal';
+
+import {
+  Filter,
+  IIndexPattern,
+  FilterManager,
+  Query,
+  TimeHistory,
+  TimeRange,
+  SavedQuery,
+  SearchBar,
+  SavedQueryTimeFilter,
+} from '../../../../../../../src/plugins/data/public';
+import { Storage } from '../../../../../../../src/plugins/kibana_utils/public';
+
+export interface QueryBarComponentProps {
+  dataTestSubj?: string;
+  dateRangeFrom?: string;
+  dateRangeTo?: string;
+  hideSavedQuery?: boolean;
+  indexPattern: IIndexPattern;
+  isLoading?: boolean;
+  isRefreshPaused?: boolean;
+  filterQuery: Query;
+  filterManager: FilterManager;
+  filters: Filter[];
+  onChangedQuery: (query: Query) => void;
+  onSubmitQuery: (query: Query, timefilter?: SavedQueryTimeFilter) => void;
+  refreshInterval?: number;
+  savedQuery?: SavedQuery | null;
+  onSavedQuery: (savedQuery: SavedQuery | null) => void;
+}
+
+export const QueryBar = memo<QueryBarComponentProps>(
+  ({
+    dateRangeFrom,
+    dateRangeTo,
+    hideSavedQuery = false,
+    indexPattern,
+    isLoading = false,
+    isRefreshPaused,
+    filterQuery,
+    filterManager,
+    filters,
+    onChangedQuery,
+    onSubmitQuery,
+    refreshInterval,
+    savedQuery,
+    onSavedQuery,
+    dataTestSubj,
+  }) => {
+    const [draftQuery, setDraftQuery] = useState(filterQuery);
+
+    useEffect(() => {
+      setDraftQuery(filterQuery);
+    }, [filterQuery]);
+
+    const onQuerySubmit = useCallback(
+      (payload: { dateRange: TimeRange; query?: Query }) => {
+        if (payload.query != null && !deepEqual(payload.query, filterQuery)) {
+          onSubmitQuery(payload.query);
+        }
+      },
+      [filterQuery, onSubmitQuery]
+    );
+
+    const onQueryChange = useCallback(
+      (payload: { dateRange: TimeRange; query?: Query }) => {
+        if (payload.query != null && !deepEqual(payload.query, draftQuery)) {
+          setDraftQuery(payload.query);
+          onChangedQuery(payload.query);
+        }
+      },
+      [draftQuery, onChangedQuery, setDraftQuery]
+    );
+
+    const onSaved = useCallback(
+      (newSavedQuery: SavedQuery) => {
+        onSavedQuery(newSavedQuery);
+      },
+      [onSavedQuery]
+    );
+
+    const onSavedQueryUpdated = useCallback(
+      (savedQueryUpdated: SavedQuery) => {
+        const { query: newQuery, filters: newFilters, timefilter } = savedQueryUpdated.attributes;
+        onSubmitQuery(newQuery, timefilter);
+        filterManager.setFilters(newFilters || []);
+        onSavedQuery(savedQueryUpdated);
+      },
+      [filterManager, onSubmitQuery, onSavedQuery]
+    );
+
+    const onClearSavedQuery = useCallback(() => {
+      if (savedQuery != null) {
+        onSubmitQuery({
+          query: '',
+          language: savedQuery.attributes.query.language,
+        });
+        filterManager.setFilters([]);
+        onSavedQuery(null);
+      }
+    }, [filterManager, onSubmitQuery, onSavedQuery, savedQuery]);
+
+    const onFiltersUpdated = useCallback(
+      (newFilters: Filter[]) => {
+        filterManager.setFilters(newFilters);
+      },
+      [filterManager]
+    );
+
+    const CustomButton = <>{null}</>;
+    const indexPatterns = useMemo(() => [indexPattern], [indexPattern]);
+
+    const searchBarProps = savedQuery != null ? { savedQuery } : {};
+
+    return (
+      <SearchBar
+        customSubmitButton={CustomButton}
+        dateRangeFrom={dateRangeFrom}
+        dateRangeTo={dateRangeTo}
+        filters={filters}
+        indexPatterns={indexPatterns}
+        isLoading={isLoading}
+        isRefreshPaused={isRefreshPaused}
+        query={draftQuery}
+        onClearSavedQuery={onClearSavedQuery}
+        onFiltersUpdated={onFiltersUpdated}
+        onQueryChange={onQueryChange}
+        onQuerySubmit={onQuerySubmit}
+        onSaved={onSaved}
+        onSavedQueryUpdated={onSavedQueryUpdated}
+        refreshInterval={refreshInterval}
+        showAutoRefreshOnly={false}
+        showFilterBar={!hideSavedQuery}
+        showDatePicker={false}
+        showQueryBar={true}
+        showQueryInput={true}
+        showSaveQuery={true}
+        timeHistory={new TimeHistory(new Storage(localStorage))}
+        dataTestSubj={dataTestSubj}
+        {...searchBarProps}
+      />
+    );
+  }
+);
diff --git a/x-pack/plugins/siem/public/components/scroll_to_top/index.test.tsx b/x-pack/plugins/siem/public/common/components/scroll_to_top/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/scroll_to_top/index.test.tsx
rename to x-pack/plugins/siem/public/common/components/scroll_to_top/index.test.tsx
diff --git a/x-pack/plugins/siem/public/components/scroll_to_top/index.tsx b/x-pack/plugins/siem/public/common/components/scroll_to_top/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/scroll_to_top/index.tsx
rename to x-pack/plugins/siem/public/common/components/scroll_to_top/index.tsx
diff --git a/x-pack/plugins/siem/public/common/components/search_bar/index.tsx b/x-pack/plugins/siem/public/common/components/search_bar/index.tsx
new file mode 100644
index 00000000000000..995955cff54f57
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/search_bar/index.tsx
@@ -0,0 +1,387 @@
+/*
+ * 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 { getOr, set } from 'lodash/fp';
+import React, { memo, useEffect, useCallback, useMemo } from 'react';
+import { connect, ConnectedProps } from 'react-redux';
+import { Dispatch } from 'redux';
+import { Subscription } from 'rxjs';
+import styled from 'styled-components';
+import deepEqual from 'fast-deep-equal';
+import {
+  FilterManager,
+  IIndexPattern,
+  TimeRange,
+  Query,
+  Filter,
+  SavedQuery,
+} from 'src/plugins/data/public';
+
+import { OnTimeChangeProps } from '@elastic/eui';
+
+import { inputsActions } from '../../store/inputs';
+import { InputsRange } from '../../store/inputs/model';
+import { InputsModelId } from '../../store/inputs/constants';
+import { State, inputsModel } from '../../store';
+import { formatDate } from '../super_date_picker';
+import {
+  endSelector,
+  filterQuerySelector,
+  fromStrSelector,
+  isLoadingSelector,
+  kindSelector,
+  queriesSelector,
+  savedQuerySelector,
+  startSelector,
+  toStrSelector,
+} from './selectors';
+import { hostsActions } from '../../../hosts/store';
+import { networkActions } from '../../../network/store';
+import { timelineActions } from '../../../timelines/store/timeline';
+import { useKibana } from '../../lib/kibana';
+
+interface SiemSearchBarProps {
+  id: InputsModelId;
+  indexPattern: IIndexPattern;
+  timelineId?: string;
+  dataTestSubj?: string;
+}
+
+const SearchBarContainer = styled.div`
+  .globalQueryBar {
+    padding: 0px;
+  }
+`;
+
+const SearchBarComponent = memo<SiemSearchBarProps & PropsFromRedux>(
+  ({
+    end,
+    filterQuery,
+    fromStr,
+    id,
+    indexPattern,
+    isLoading = false,
+    queries,
+    savedQuery,
+    setSavedQuery,
+    setSearchBarFilter,
+    start,
+    toStr,
+    updateSearch,
+    dataTestSubj,
+  }) => {
+    const { data } = useKibana().services;
+    const {
+      timefilter: { timefilter },
+      filterManager,
+    } = data.query;
+
+    if (fromStr != null && toStr != null) {
+      timefilter.setTime({ from: fromStr, to: toStr });
+    } else if (start != null && end != null) {
+      timefilter.setTime({
+        from: new Date(start).toISOString(),
+        to: new Date(end).toISOString(),
+      });
+    }
+
+    const onQuerySubmit = useCallback(
+      (payload: { dateRange: TimeRange; query?: Query }) => {
+        const isQuickSelection =
+          payload.dateRange.from.includes('now') || payload.dateRange.to.includes('now');
+        let updateSearchBar: UpdateReduxSearchBar = {
+          id,
+          end: toStr != null ? toStr : new Date(end).toISOString(),
+          start: fromStr != null ? fromStr : new Date(start).toISOString(),
+          isInvalid: false,
+          isQuickSelection,
+          updateTime: false,
+          filterManager,
+        };
+        let isStateUpdated = false;
+
+        if (
+          (isQuickSelection &&
+            (fromStr !== payload.dateRange.from || toStr !== payload.dateRange.to)) ||
+          (!isQuickSelection &&
+            (start !== formatDate(payload.dateRange.from) ||
+              end !== formatDate(payload.dateRange.to)))
+        ) {
+          isStateUpdated = true;
+          updateSearchBar.updateTime = true;
+          updateSearchBar.end = payload.dateRange.to;
+          updateSearchBar.start = payload.dateRange.from;
+        }
+
+        if (payload.query != null && !deepEqual(payload.query, filterQuery)) {
+          isStateUpdated = true;
+          updateSearchBar = set('query', payload.query, updateSearchBar);
+        }
+
+        if (!isStateUpdated) {
+          // That mean we are doing a refresh!
+          if (isQuickSelection) {
+            updateSearchBar.updateTime = true;
+            updateSearchBar.end = payload.dateRange.to;
+            updateSearchBar.start = payload.dateRange.from;
+          } else {
+            queries.forEach(q => q.refetch && (q.refetch as inputsModel.Refetch)());
+          }
+        }
+
+        window.setTimeout(() => updateSearch(updateSearchBar), 0);
+      },
+      [id, end, filterQuery, fromStr, queries, start, toStr]
+    );
+
+    const onRefresh = useCallback(
+      (payload: { dateRange: TimeRange }) => {
+        if (payload.dateRange.from.includes('now') || payload.dateRange.to.includes('now')) {
+          updateSearch({
+            id,
+            end: payload.dateRange.to,
+            start: payload.dateRange.from,
+            isInvalid: false,
+            isQuickSelection: true,
+            updateTime: true,
+            filterManager,
+          });
+        } else {
+          queries.forEach(q => q.refetch && (q.refetch as inputsModel.Refetch)());
+        }
+      },
+      [id, queries, filterManager]
+    );
+
+    const onSaved = useCallback(
+      (newSavedQuery: SavedQuery) => {
+        setSavedQuery({ id, savedQuery: newSavedQuery });
+      },
+      [id]
+    );
+
+    const onSavedQueryUpdated = useCallback(
+      (savedQueryUpdated: SavedQuery) => {
+        const isQuickSelection = savedQueryUpdated.attributes.timefilter
+          ? savedQueryUpdated.attributes.timefilter.from.includes('now') ||
+            savedQueryUpdated.attributes.timefilter.to.includes('now')
+          : false;
+
+        let updateSearchBar: UpdateReduxSearchBar = {
+          id,
+          filters: savedQueryUpdated.attributes.filters || [],
+          end: toStr != null ? toStr : new Date(end).toISOString(),
+          start: fromStr != null ? fromStr : new Date(start).toISOString(),
+          isInvalid: false,
+          isQuickSelection,
+          updateTime: false,
+          filterManager,
+        };
+
+        if (savedQueryUpdated.attributes.timefilter) {
+          updateSearchBar.end = savedQueryUpdated.attributes.timefilter
+            ? savedQueryUpdated.attributes.timefilter.to
+            : updateSearchBar.end;
+          updateSearchBar.start = savedQueryUpdated.attributes.timefilter
+            ? savedQueryUpdated.attributes.timefilter.from
+            : updateSearchBar.start;
+          updateSearchBar.updateTime = true;
+        }
+
+        updateSearchBar = set('query', savedQueryUpdated.attributes.query, updateSearchBar);
+        updateSearchBar = set('savedQuery', savedQueryUpdated, updateSearchBar);
+
+        updateSearch(updateSearchBar);
+      },
+      [id, end, fromStr, start, toStr]
+    );
+
+    const onClearSavedQuery = useCallback(() => {
+      if (savedQuery != null) {
+        updateSearch({
+          id,
+          filters: [],
+          end: toStr != null ? toStr : new Date(end).toISOString(),
+          start: fromStr != null ? fromStr : new Date(start).toISOString(),
+          isInvalid: false,
+          isQuickSelection: false,
+          updateTime: false,
+          query: {
+            query: '',
+            language: savedQuery.attributes.query.language,
+          },
+          resetSavedQuery: true,
+          savedQuery: undefined,
+          filterManager,
+        });
+      }
+    }, [id, end, filterManager, fromStr, start, toStr, savedQuery]);
+
+    useEffect(() => {
+      let isSubscribed = true;
+      const subscriptions = new Subscription();
+
+      subscriptions.add(
+        filterManager.getUpdates$().subscribe({
+          next: () => {
+            if (isSubscribed) {
+              setSearchBarFilter({
+                id,
+                filters: filterManager.getFilters(),
+              });
+            }
+          },
+        })
+      );
+
+      return () => {
+        isSubscribed = false;
+        subscriptions.unsubscribe();
+      };
+    }, []);
+    const indexPatterns = useMemo(() => [indexPattern], [indexPattern]);
+    return (
+      <SearchBarContainer data-test-subj={`${id}DatePicker`}>
+        <data.ui.SearchBar
+          appName="siem"
+          isLoading={isLoading}
+          indexPatterns={indexPatterns}
+          query={filterQuery}
+          onClearSavedQuery={onClearSavedQuery}
+          onQuerySubmit={onQuerySubmit}
+          onRefresh={onRefresh}
+          onSaved={onSaved}
+          onSavedQueryUpdated={onSavedQueryUpdated}
+          savedQuery={savedQuery}
+          showFilterBar={true}
+          showDatePicker={true}
+          showQueryBar={true}
+          showQueryInput={true}
+          showSaveQuery={true}
+          dataTestSubj={dataTestSubj}
+        />
+      </SearchBarContainer>
+    );
+  }
+);
+
+const makeMapStateToProps = () => {
+  const getEndSelector = endSelector();
+  const getFromStrSelector = fromStrSelector();
+  const getIsLoadingSelector = isLoadingSelector();
+  const getKindSelector = kindSelector();
+  const getQueriesSelector = queriesSelector();
+  const getStartSelector = startSelector();
+  const getToStrSelector = toStrSelector();
+  const getFilterQuerySelector = filterQuerySelector();
+  const getSavedQuerySelector = savedQuerySelector();
+  return (state: State, { id }: SiemSearchBarProps) => {
+    const inputsRange: InputsRange = getOr({}, `inputs.${id}`, state);
+    return {
+      end: getEndSelector(inputsRange),
+      fromStr: getFromStrSelector(inputsRange),
+      filterQuery: getFilterQuerySelector(inputsRange),
+      isLoading: getIsLoadingSelector(inputsRange),
+      kind: getKindSelector(inputsRange),
+      queries: getQueriesSelector(inputsRange),
+      savedQuery: getSavedQuerySelector(inputsRange),
+      start: getStartSelector(inputsRange),
+      toStr: getToStrSelector(inputsRange),
+    };
+  };
+};
+
+SearchBarComponent.displayName = 'SiemSearchBar';
+
+interface UpdateReduxSearchBar extends OnTimeChangeProps {
+  id: InputsModelId;
+  filters?: Filter[];
+  filterManager: FilterManager;
+  query?: Query;
+  savedQuery?: SavedQuery;
+  resetSavedQuery?: boolean;
+  timelineId?: string;
+  updateTime: boolean;
+}
+
+export const dispatchUpdateSearch = (dispatch: Dispatch) => ({
+  end,
+  filters,
+  id,
+  isQuickSelection,
+  query,
+  resetSavedQuery,
+  savedQuery,
+  start,
+  timelineId,
+  filterManager,
+  updateTime = false,
+}: UpdateReduxSearchBar): void => {
+  if (updateTime) {
+    const fromDate = formatDate(start);
+    let toDate = formatDate(end, { roundUp: true });
+    if (isQuickSelection) {
+      dispatch(
+        inputsActions.setRelativeRangeDatePicker({
+          id,
+          fromStr: start,
+          toStr: end,
+          from: fromDate,
+          to: toDate,
+        })
+      );
+    } else {
+      toDate = formatDate(end);
+      dispatch(
+        inputsActions.setAbsoluteRangeDatePicker({
+          id,
+          from: formatDate(start),
+          to: formatDate(end),
+        })
+      );
+    }
+    if (timelineId != null) {
+      dispatch(
+        timelineActions.updateRange({
+          id: timelineId,
+          start: fromDate,
+          end: toDate,
+        })
+      );
+    }
+  }
+  if (query != null) {
+    dispatch(
+      inputsActions.setFilterQuery({
+        id,
+        ...query,
+      })
+    );
+  }
+  if (filters != null) {
+    filterManager.setFilters(filters);
+  }
+  if (savedQuery != null || resetSavedQuery) {
+    dispatch(inputsActions.setSavedQuery({ id, savedQuery }));
+  }
+
+  dispatch(hostsActions.setHostTablesActivePageToZero());
+  dispatch(networkActions.setNetworkTablesActivePageToZero());
+};
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  updateSearch: dispatchUpdateSearch(dispatch),
+  setSavedQuery: ({ id, savedQuery }: { id: InputsModelId; savedQuery: SavedQuery | undefined }) =>
+    dispatch(inputsActions.setSavedQuery({ id, savedQuery })),
+  setSearchBarFilter: ({ id, filters }: { id: InputsModelId; filters: Filter[] }) =>
+    dispatch(inputsActions.setSearchBarFilter({ id, filters })),
+});
+
+export const connector = connect(makeMapStateToProps, mapDispatchToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export const SiemSearchBar = connector(SearchBarComponent);
diff --git a/x-pack/plugins/siem/public/common/components/search_bar/selectors.ts b/x-pack/plugins/siem/public/common/components/search_bar/selectors.ts
new file mode 100644
index 00000000000000..793737a1ad754c
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/search_bar/selectors.ts
@@ -0,0 +1,28 @@
+/*
+ * 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 { createSelector } from 'reselect';
+import { InputsRange } from '../../store/inputs/model';
+import { Query, SavedQuery } from '../../../../../../../src/plugins/data/public';
+
+export {
+  endSelector,
+  fromStrSelector,
+  isLoadingSelector,
+  kindSelector,
+  queriesSelector,
+  startSelector,
+  toStrSelector,
+} from '../super_date_picker/selectors';
+
+export const getFilterQuery = (inputState: InputsRange): Query => inputState.query;
+
+export const getSavedQuery = (inputState: InputsRange): SavedQuery | undefined =>
+  inputState.savedQuery;
+
+export const filterQuerySelector = () => createSelector(getFilterQuery, filterQuery => filterQuery);
+
+export const savedQuerySelector = () => createSelector(getSavedQuery, savedQuery => savedQuery);
diff --git a/x-pack/plugins/siem/public/components/selectable_text/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/common/components/selectable_text/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/selectable_text/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/selectable_text/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/selectable_text/index.test.tsx b/x-pack/plugins/siem/public/common/components/selectable_text/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/selectable_text/index.test.tsx
rename to x-pack/plugins/siem/public/common/components/selectable_text/index.test.tsx
diff --git a/x-pack/plugins/siem/public/components/selectable_text/index.tsx b/x-pack/plugins/siem/public/common/components/selectable_text/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/selectable_text/index.tsx
rename to x-pack/plugins/siem/public/common/components/selectable_text/index.tsx
diff --git a/x-pack/plugins/siem/public/components/sidebar_header/index.tsx b/x-pack/plugins/siem/public/common/components/sidebar_header/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/sidebar_header/index.tsx
rename to x-pack/plugins/siem/public/common/components/sidebar_header/index.tsx
diff --git a/x-pack/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/common/components/stat_items/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/stat_items/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/common/components/stat_items/index.test.tsx b/x-pack/plugins/siem/public/common/components/stat_items/index.test.tsx
new file mode 100644
index 00000000000000..e0da50abf6b532
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/stat_items/index.test.tsx
@@ -0,0 +1,294 @@
+/*
+ * 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.
+ */
+
+/* eslint-disable react/display-name */
+
+import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
+import { mount, ReactWrapper } from 'enzyme';
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+
+import {
+  StatItemsComponent,
+  StatItemsProps,
+  addValueToFields,
+  addValueToAreaChart,
+  addValueToBarChart,
+  useKpiMatrixStatus,
+  StatItems,
+} from '.';
+import { BarChart } from '../charts/barchart';
+import { AreaChart } from '../charts/areachart';
+import { EuiHorizontalRule } from '@elastic/eui';
+import { fieldTitleChartMapping } from '../../../network/components/kpi_network';
+import {
+  mockData,
+  mockEnableChartsData,
+  mockNoChartMappings,
+  mockNarrowDateRange,
+} from '../../../network/components/kpi_network/mock';
+import { mockGlobalState, apolloClientObservable, SUB_PLUGINS_REDUCER } from '../../mock';
+import { State, createStore } from '../../store';
+import { Provider as ReduxStoreProvider } from 'react-redux';
+import { KpiNetworkData, KpiHostsData } from '../../../graphql/types';
+
+const from = new Date('2019-06-15T06:00:00.000Z').valueOf();
+const to = new Date('2019-06-18T06:00:00.000Z').valueOf();
+
+jest.mock('../charts/areachart', () => {
+  return { AreaChart: () => <div className="areachart" /> };
+});
+
+jest.mock('../charts/barchart', () => {
+  return { BarChart: () => <div className="barchart" /> };
+});
+
+describe('Stat Items Component', () => {
+  const theme = () => ({ eui: euiDarkVars, darkMode: true });
+  const state: State = mockGlobalState;
+  const store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable);
+
+  describe.each([
+    [
+      mount(
+        <ThemeProvider theme={theme}>
+          <ReduxStoreProvider store={store}>
+            <StatItemsComponent
+              description="HOSTS"
+              fields={[{ key: 'hosts', value: null, color: '#6092C0', icon: 'cross' }]}
+              from={from}
+              id="statItems"
+              index={0}
+              key="mock-keys"
+              to={to}
+              narrowDateRange={mockNarrowDateRange}
+            />
+          </ReduxStoreProvider>
+        </ThemeProvider>
+      ),
+    ],
+    [
+      mount(
+        <ThemeProvider theme={theme}>
+          <ReduxStoreProvider store={store}>
+            <StatItemsComponent
+              areaChart={[]}
+              barChart={[]}
+              description="HOSTS"
+              fields={[{ key: 'hosts', value: null, color: '#6092C0', icon: 'cross' }]}
+              from={from}
+              id="statItems"
+              index={0}
+              key="mock-keys"
+              to={to}
+              narrowDateRange={mockNarrowDateRange}
+            />
+          </ReduxStoreProvider>
+        </ThemeProvider>
+      ),
+    ],
+  ])('disable charts', wrapper => {
+    test('it renders the default widget', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    test('should render titles', () => {
+      expect(wrapper.find('[data-test-subj="stat-title"]')).toBeTruthy();
+    });
+
+    test('should not render icons', () => {
+      expect(wrapper.find('[data-test-subj="stat-icon"]').filter('EuiIcon')).toHaveLength(0);
+    });
+
+    test('should not render barChart', () => {
+      expect(wrapper.find(BarChart)).toHaveLength(0);
+    });
+
+    test('should not render areaChart', () => {
+      expect(wrapper.find(AreaChart)).toHaveLength(0);
+    });
+
+    test('should not render spliter', () => {
+      expect(wrapper.find(EuiHorizontalRule)).toHaveLength(0);
+    });
+  });
+
+  describe('rendering kpis with charts', () => {
+    const mockStatItemsData: StatItemsProps = {
+      areaChart: [
+        {
+          key: 'uniqueSourceIpsHistogram',
+          value: [
+            { x: new Date('2019-05-03T13:00:00.000Z').valueOf(), y: 565975 },
+            { x: new Date('2019-05-04T01:00:00.000Z').valueOf(), y: 1084366 },
+            { x: new Date('2019-05-04T13:00:00.000Z').valueOf(), y: 12280 },
+          ],
+          color: '#D36086',
+        },
+        {
+          key: 'uniqueDestinationIpsHistogram',
+          value: [
+            { x: new Date('2019-05-03T13:00:00.000Z').valueOf(), y: 565975 },
+            { x: new Date('2019-05-04T01:00:00.000Z').valueOf(), y: 1084366 },
+            { x: new Date('2019-05-04T13:00:00.000Z').valueOf(), y: 12280 },
+          ],
+          color: '#9170B8',
+        },
+      ],
+      barChart: [
+        { key: 'uniqueSourceIps', value: [{ x: 'uniqueSourceIps', y: '1714' }], color: '#D36086' },
+        {
+          key: 'uniqueDestinationIps',
+          value: [{ x: 'uniqueDestinationIps', y: 2354 }],
+          color: '#9170B8',
+        },
+      ],
+      description: 'UNIQUE_PRIVATE_IPS',
+      enableAreaChart: true,
+      enableBarChart: true,
+      fields: [
+        {
+          key: 'uniqueSourceIps',
+          description: 'Source',
+          value: 1714,
+          color: '#D36086',
+          icon: 'cross',
+        },
+        {
+          key: 'uniqueDestinationIps',
+          description: 'Dest.',
+          value: 2359,
+          color: '#9170B8',
+          icon: 'cross',
+        },
+      ],
+      from,
+      id: 'statItems',
+      index: 0,
+      key: 'mock-keys',
+      to,
+      narrowDateRange: mockNarrowDateRange,
+    };
+    let wrapper: ReactWrapper;
+    beforeAll(() => {
+      wrapper = mount(
+        <ReduxStoreProvider store={store}>
+          <StatItemsComponent {...mockStatItemsData} />
+        </ReduxStoreProvider>
+      );
+    });
+    test('it renders the default widget', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    test('should handle multiple titles', () => {
+      expect(wrapper.find('[data-test-subj="stat-title"]')).toHaveLength(2);
+    });
+
+    test('should render kpi icons', () => {
+      expect(wrapper.find('[data-test-subj="stat-icon"]').filter('EuiIcon')).toHaveLength(2);
+    });
+
+    test('should render barChart', () => {
+      expect(wrapper.find(BarChart)).toHaveLength(1);
+    });
+
+    test('should render areaChart', () => {
+      expect(wrapper.find(AreaChart)).toHaveLength(1);
+    });
+
+    test('should render separator', () => {
+      expect(wrapper.find(EuiHorizontalRule)).toHaveLength(1);
+    });
+  });
+});
+
+describe('addValueToFields', () => {
+  const mockNetworkMappings = fieldTitleChartMapping[0];
+  const mockKpiNetworkData = mockData.KpiNetwork;
+  test('should update value from data', () => {
+    const result = addValueToFields(mockNetworkMappings.fields, mockKpiNetworkData);
+    expect(result).toEqual(mockEnableChartsData.fields);
+  });
+});
+
+describe('addValueToAreaChart', () => {
+  const mockNetworkMappings = fieldTitleChartMapping[0];
+  const mockKpiNetworkData = mockData.KpiNetwork;
+  test('should add areaChart from data', () => {
+    const result = addValueToAreaChart(mockNetworkMappings.fields, mockKpiNetworkData);
+    expect(result).toEqual(mockEnableChartsData.areaChart);
+  });
+});
+
+describe('addValueToBarChart', () => {
+  const mockNetworkMappings = fieldTitleChartMapping[0];
+  const mockKpiNetworkData = mockData.KpiNetwork;
+  test('should add areaChart from data', () => {
+    const result = addValueToBarChart(mockNetworkMappings.fields, mockKpiNetworkData);
+    expect(result).toEqual(mockEnableChartsData.barChart);
+  });
+});
+
+describe('useKpiMatrixStatus', () => {
+  const mockNetworkMappings = fieldTitleChartMapping;
+  const mockKpiNetworkData = mockData.KpiNetwork;
+  const MockChildComponent = (mappedStatItemProps: StatItemsProps) => <span />;
+  const MockHookWrapperComponent = ({
+    fieldsMapping,
+    data,
+  }: {
+    fieldsMapping: Readonly<StatItems[]>;
+    data: KpiNetworkData | KpiHostsData;
+  }) => {
+    const statItemsProps: StatItemsProps[] = useKpiMatrixStatus(
+      fieldsMapping,
+      data,
+      'statItem',
+      from,
+      to,
+      mockNarrowDateRange
+    );
+
+    return (
+      <div>
+        {statItemsProps.map(mappedStatItemProps => {
+          return <MockChildComponent {...mappedStatItemProps} />;
+        })}
+      </div>
+    );
+  };
+
+  test('it updates status correctly', () => {
+    const wrapper = mount(
+      <>
+        <MockHookWrapperComponent fieldsMapping={mockNetworkMappings} data={mockKpiNetworkData} />
+      </>
+    );
+
+    expect(wrapper.find('MockChildComponent').get(0).props).toEqual(mockEnableChartsData);
+  });
+
+  test('it should not append areaChart if enableAreaChart is off', () => {
+    const wrapper = mount(
+      <>
+        <MockHookWrapperComponent fieldsMapping={mockNoChartMappings} data={mockKpiNetworkData} />
+      </>
+    );
+
+    expect(wrapper.find('MockChildComponent').get(0).props.areaChart).toBeUndefined();
+  });
+
+  test('it should not append barChart if enableBarChart is off', () => {
+    const wrapper = mount(
+      <>
+        <MockHookWrapperComponent fieldsMapping={mockNoChartMappings} data={mockKpiNetworkData} />
+      </>
+    );
+
+    expect(wrapper.find('MockChildComponent').get(0).props.barChart).toBeUndefined();
+  });
+});
diff --git a/x-pack/plugins/siem/public/common/components/stat_items/index.tsx b/x-pack/plugins/siem/public/common/components/stat_items/index.tsx
new file mode 100644
index 00000000000000..b2543f70e9401e
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/stat_items/index.tsx
@@ -0,0 +1,286 @@
+/*
+ * 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 { ScaleType, Rotation, BrushEndListener, ElementClickListener } from '@elastic/charts';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPanel,
+  EuiHorizontalRule,
+  EuiIcon,
+  EuiTitle,
+  IconType,
+} from '@elastic/eui';
+import { get, getOr } from 'lodash/fp';
+import React, { useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+import { KpiHostsData, KpiNetworkData } from '../../../graphql/types';
+import { AreaChart } from '../charts/areachart';
+import { BarChart } from '../charts/barchart';
+import { ChartSeriesData, ChartData, ChartSeriesConfigs, UpdateDateRange } from '../charts/common';
+import { histogramDateTimeFormatter } from '../utils';
+import { getEmptyTagValue } from '../empty_value';
+
+import { InspectButton, InspectButtonContainer } from '../inspect';
+
+const FlexItem = styled(EuiFlexItem)`
+  min-width: 0;
+`;
+
+FlexItem.displayName = 'FlexItem';
+
+const StatValue = styled(EuiTitle)`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+StatValue.displayName = 'StatValue';
+
+interface StatItem {
+  color?: string;
+  description?: string;
+  icon?: IconType;
+  key: string;
+  name?: string;
+  value: number | undefined | null;
+}
+
+export interface StatItems {
+  areachartConfigs?: ChartSeriesConfigs;
+  barchartConfigs?: ChartSeriesConfigs;
+  description?: string;
+  enableAreaChart?: boolean;
+  enableBarChart?: boolean;
+  fields: StatItem[];
+  grow?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | true | false | null;
+  index: number;
+  key: string;
+  statKey?: string;
+}
+
+export interface StatItemsProps extends StatItems {
+  areaChart?: ChartSeriesData[];
+  barChart?: ChartSeriesData[];
+  from: number;
+  id: string;
+  narrowDateRange: UpdateDateRange;
+  to: number;
+}
+
+export const numberFormatter = (value: string | number): string => value.toLocaleString();
+const statItemBarchartRotation: Rotation = 90;
+const statItemChartCustomHeight = 74;
+
+export const areachartConfigs = (config?: {
+  xTickFormatter: (value: number) => string;
+  onBrushEnd?: BrushEndListener;
+}) => ({
+  series: {
+    xScaleType: ScaleType.Time,
+    yScaleType: ScaleType.Linear,
+  },
+  axis: {
+    xTickFormatter: get('xTickFormatter', config),
+    yTickFormatter: numberFormatter,
+  },
+  settings: {
+    onBrushEnd: getOr(() => {}, 'onBrushEnd', config),
+  },
+  customHeight: statItemChartCustomHeight,
+});
+
+export const barchartConfigs = (config?: { onElementClick?: ElementClickListener }) => ({
+  series: {
+    xScaleType: ScaleType.Ordinal,
+    yScaleType: ScaleType.Linear,
+    stackAccessors: ['y0'],
+  },
+  axis: {
+    xTickFormatter: numberFormatter,
+  },
+  settings: {
+    onElementClick: getOr(() => {}, 'onElementClick', config),
+    rotation: statItemBarchartRotation,
+  },
+  customHeight: statItemChartCustomHeight,
+});
+
+export const addValueToFields = (
+  fields: StatItem[],
+  data: KpiHostsData | KpiNetworkData
+): StatItem[] => fields.map(field => ({ ...field, value: get(field.key, data) }));
+
+export const addValueToAreaChart = (
+  fields: StatItem[],
+  data: KpiHostsData | KpiNetworkData
+): ChartSeriesData[] =>
+  fields
+    .filter(field => get(`${field.key}Histogram`, data) != null)
+    .map(field => ({
+      ...field,
+      value: get(`${field.key}Histogram`, data),
+      key: `${field.key}Histogram`,
+    }));
+
+export const addValueToBarChart = (
+  fields: StatItem[],
+  data: KpiHostsData | KpiNetworkData
+): ChartSeriesData[] => {
+  if (fields.length === 0) return [];
+  return fields.reduce((acc: ChartSeriesData[], field: StatItem, idx: number) => {
+    const { key, color } = field;
+    const y: number | null = getOr(null, key, data);
+    const x: string = get(`${idx}.name`, fields) || getOr('', `${idx}.description`, fields);
+    const value: [ChartData] = [
+      {
+        x,
+        y,
+        g: key,
+        y0: 0,
+      },
+    ];
+
+    return [
+      ...acc,
+      {
+        key,
+        color,
+        value,
+      },
+    ];
+  }, []);
+};
+
+export const useKpiMatrixStatus = (
+  mappings: Readonly<StatItems[]>,
+  data: KpiHostsData | KpiNetworkData,
+  id: string,
+  from: number,
+  to: number,
+  narrowDateRange: UpdateDateRange
+): StatItemsProps[] => {
+  const [statItemsProps, setStatItemsProps] = useState(mappings as StatItemsProps[]);
+
+  useEffect(() => {
+    setStatItemsProps(
+      mappings.map(stat => {
+        return {
+          ...stat,
+          areaChart: stat.enableAreaChart ? addValueToAreaChart(stat.fields, data) : undefined,
+          barChart: stat.enableBarChart ? addValueToBarChart(stat.fields, data) : undefined,
+          fields: addValueToFields(stat.fields, data),
+          id,
+          key: `kpi-summary-${stat.key}`,
+          statKey: `${stat.key}`,
+          from,
+          to,
+          narrowDateRange,
+        };
+      })
+    );
+  }, [data]);
+
+  return statItemsProps;
+};
+
+export const StatItemsComponent = React.memo<StatItemsProps>(
+  ({
+    areaChart,
+    barChart,
+    description,
+    enableAreaChart,
+    enableBarChart,
+    fields,
+    from,
+    grow,
+    id,
+    index,
+    narrowDateRange,
+    statKey = 'item',
+    to,
+  }) => {
+    const isBarChartDataAvailable =
+      barChart &&
+      barChart.length &&
+      barChart.every(item => item.value != null && item.value.length > 0);
+    const isAreaChartDataAvailable =
+      areaChart &&
+      areaChart.length &&
+      areaChart.every(item => item.value != null && item.value.length > 0);
+
+    return (
+      <FlexItem grow={grow} data-test-subj={`stat-${statKey}`}>
+        <InspectButtonContainer>
+          <EuiPanel>
+            <EuiFlexGroup gutterSize={'none'}>
+              <EuiFlexItem>
+                <EuiTitle size="xxxs">
+                  <h6>{description}</h6>
+                </EuiTitle>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <InspectButton queryId={id} title={`KPI ${description}`} inspectIndex={index} />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+
+            <EuiFlexGroup>
+              {fields.map(field => (
+                <FlexItem key={`stat-items-field-${field.key}`}>
+                  <EuiFlexGroup alignItems="center" gutterSize="m" responsive={false}>
+                    {(isAreaChartDataAvailable || isBarChartDataAvailable) && field.icon && (
+                      <FlexItem grow={false}>
+                        <EuiIcon
+                          type={field.icon}
+                          color={field.color}
+                          size="l"
+                          data-test-subj="stat-icon"
+                        />
+                      </FlexItem>
+                    )}
+
+                    <FlexItem>
+                      <StatValue>
+                        <p data-test-subj="stat-title">
+                          {field.value != null ? field.value.toLocaleString() : getEmptyTagValue()}{' '}
+                          {field.description}
+                        </p>
+                      </StatValue>
+                    </FlexItem>
+                  </EuiFlexGroup>
+                </FlexItem>
+              ))}
+            </EuiFlexGroup>
+
+            {(enableAreaChart || enableBarChart) && <EuiHorizontalRule />}
+            <EuiFlexGroup>
+              {enableBarChart && (
+                <FlexItem>
+                  <BarChart barChart={barChart} configs={barchartConfigs()} />
+                </FlexItem>
+              )}
+
+              {enableAreaChart && from != null && to != null && (
+                <FlexItem>
+                  <AreaChart
+                    areaChart={areaChart}
+                    configs={areachartConfigs({
+                      xTickFormatter: histogramDateTimeFormatter([from, to]),
+                      onBrushEnd: narrowDateRange,
+                    })}
+                  />
+                </FlexItem>
+              )}
+            </EuiFlexGroup>
+          </EuiPanel>
+        </InspectButtonContainer>
+      </FlexItem>
+    );
+  }
+);
+
+StatItemsComponent.displayName = 'StatItemsComponent';
diff --git a/x-pack/plugins/siem/public/components/subtitle/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/common/components/subtitle/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/subtitle/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/subtitle/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/subtitle/index.test.tsx b/x-pack/plugins/siem/public/common/components/subtitle/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/subtitle/index.test.tsx
rename to x-pack/plugins/siem/public/common/components/subtitle/index.test.tsx
diff --git a/x-pack/plugins/siem/public/components/subtitle/index.tsx b/x-pack/plugins/siem/public/common/components/subtitle/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/subtitle/index.tsx
rename to x-pack/plugins/siem/public/common/components/subtitle/index.tsx
diff --git a/x-pack/plugins/siem/public/common/components/super_date_picker/index.test.tsx b/x-pack/plugins/siem/public/common/components/super_date_picker/index.test.tsx
new file mode 100644
index 00000000000000..ba4848923b2afa
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/super_date_picker/index.test.tsx
@@ -0,0 +1,443 @@
+/*
+ * 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 { mount } from 'enzyme';
+import React from 'react';
+import { Provider as ReduxStoreProvider } from 'react-redux';
+
+import { DEFAULT_TIMEPICKER_QUICK_RANGES } from '../../../../common/constants';
+import { useUiSetting$ } from '../../lib/kibana';
+import { apolloClientObservable, mockGlobalState, SUB_PLUGINS_REDUCER } from '../../mock';
+import { createUseUiSetting$Mock } from '../../mock/kibana_react';
+import { createStore, State } from '../../store';
+
+import { SuperDatePicker, makeMapStateToProps } from '.';
+import { cloneDeep } from 'lodash/fp';
+
+jest.mock('../../lib/kibana');
+const mockUseUiSetting$ = useUiSetting$ as jest.Mock;
+const timepickerRanges = [
+  {
+    from: 'now/d',
+    to: 'now/d',
+    display: 'Today',
+  },
+  {
+    from: 'now/w',
+    to: 'now/w',
+    display: 'This week',
+  },
+  {
+    from: 'now-15m',
+    to: 'now',
+    display: 'Last 15 minutes',
+  },
+  {
+    from: 'now-30m',
+    to: 'now',
+    display: 'Last 30 minutes',
+  },
+  {
+    from: 'now-1h',
+    to: 'now',
+    display: 'Last 1 hour',
+  },
+  {
+    from: 'now-24h',
+    to: 'now',
+    display: 'Last 24 hours',
+  },
+  {
+    from: 'now-7d',
+    to: 'now',
+    display: 'Last 7 days',
+  },
+  {
+    from: 'now-30d',
+    to: 'now',
+    display: 'Last 30 days',
+  },
+  {
+    from: 'now-90d',
+    to: 'now',
+    display: 'Last 90 days',
+  },
+  {
+    from: 'now-1y',
+    to: 'now',
+    display: 'Last 1 year',
+  },
+];
+
+describe('SIEM Super Date Picker', () => {
+  describe('#SuperDatePicker', () => {
+    const state: State = mockGlobalState;
+    let store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable);
+
+    beforeEach(() => {
+      jest.clearAllMocks();
+      store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable);
+      mockUseUiSetting$.mockImplementation((key, defaultValue) => {
+        const useUiSetting$Mock = createUseUiSetting$Mock();
+
+        return key === DEFAULT_TIMEPICKER_QUICK_RANGES
+          ? [timepickerRanges, jest.fn()]
+          : useUiSetting$Mock(key, defaultValue);
+      });
+    });
+
+    describe('Pick Relative Date', () => {
+      let wrapper = mount(
+        <ReduxStoreProvider store={store}>
+          <SuperDatePicker id="global" />
+        </ReduxStoreProvider>
+      );
+      beforeEach(() => {
+        wrapper = mount(
+          <ReduxStoreProvider store={store}>
+            <SuperDatePicker id="global" />
+          </ReduxStoreProvider>
+        );
+        wrapper
+          .find('[data-test-subj="superDatePickerToggleQuickMenuButton"]')
+          .first()
+          .simulate('click');
+        wrapper.update();
+
+        wrapper
+          .find('button.euiQuickSelect__applyButton')
+          .first()
+          .simulate('click');
+        wrapper.update();
+      });
+
+      test('Make Sure it is relative date', () => {
+        expect(store.getState().inputs.global.timerange.kind).toBe('relative');
+      });
+
+      test('Make Sure it is last 24 hours date', () => {
+        expect(store.getState().inputs.global.timerange.fromStr).toBe('now-24h');
+        expect(store.getState().inputs.global.timerange.toStr).toBe('now');
+      });
+
+      test('Make Sure it is Today date', () => {
+        wrapper
+          .find('[data-test-subj="superDatePickerToggleQuickMenuButton"]')
+          .first()
+          .simulate('click');
+        wrapper.update();
+
+        wrapper
+          .find('[data-test-subj="superDatePickerCommonlyUsed_Today"]')
+          .first()
+          .simulate('click');
+        wrapper.update();
+        expect(store.getState().inputs.global.timerange.fromStr).toBe('now/d');
+        expect(store.getState().inputs.global.timerange.toStr).toBe('now/d');
+      });
+
+      test('Make Sure to (end date) is superior than from (start date)', () => {
+        expect(store.getState().inputs.global.timerange.to).toBeGreaterThan(
+          store.getState().inputs.global.timerange.from
+        );
+      });
+    });
+
+    describe('Recently used date ranges', () => {
+      let wrapper = mount(
+        <ReduxStoreProvider store={store}>
+          <SuperDatePicker id="global" />
+        </ReduxStoreProvider>
+      );
+      beforeEach(() => {
+        wrapper = mount(
+          <ReduxStoreProvider store={store}>
+            <SuperDatePicker id="global" />
+          </ReduxStoreProvider>
+        );
+        wrapper
+          .find('[data-test-subj="superDatePickerToggleQuickMenuButton"]')
+          .first()
+          .simulate('click');
+        wrapper.update();
+
+        wrapper
+          .find('[data-test-subj="superDatePickerCommonlyUsed_Today"]')
+          .first()
+          .simulate('click');
+        wrapper.update();
+      });
+
+      test('Today is in Recently used date ranges', () => {
+        expect(
+          wrapper
+            .find('div.euiQuickSelectPopover__section')
+            .at(1)
+            .text()
+        ).toBe('Today');
+      });
+
+      test('Today and Last 24 hours are in Recently used date ranges', () => {
+        wrapper
+          .find('[data-test-subj="superDatePickerToggleQuickMenuButton"]')
+          .first()
+          .simulate('click');
+        wrapper.update();
+
+        wrapper
+          .find('button.euiQuickSelect__applyButton')
+          .first()
+          .simulate('click');
+        wrapper.update();
+
+        expect(
+          wrapper
+            .find('div.euiQuickSelectPopover__section')
+            .at(1)
+            .text()
+        ).toBe('Last 24 hoursToday');
+      });
+
+      test('Make sure that it does not add any duplicate if you click again on today', () => {
+        wrapper
+          .find('[data-test-subj="superDatePickerToggleQuickMenuButton"]')
+          .first()
+          .simulate('click');
+        wrapper.update();
+
+        wrapper
+          .find('[data-test-subj="superDatePickerCommonlyUsed_Today"]')
+          .first()
+          .simulate('click');
+        wrapper.update();
+
+        expect(
+          wrapper
+            .find('div.euiQuickSelectPopover__section')
+            .at(1)
+            .text()
+        ).toBe('Today');
+      });
+    });
+
+    describe('Refresh Every', () => {
+      let wrapper = mount(
+        <ReduxStoreProvider store={store}>
+          <SuperDatePicker id="global" />
+        </ReduxStoreProvider>
+      );
+      beforeEach(() => {
+        wrapper = mount(
+          <ReduxStoreProvider store={store}>
+            <SuperDatePicker id="global" />
+          </ReduxStoreProvider>
+        );
+        wrapper
+          .find('[data-test-subj="superDatePickerToggleQuickMenuButton"]')
+          .first()
+          .simulate('click');
+        wrapper.update();
+
+        const wrapperFixedEuiFieldSearch = wrapper.find(
+          'input[data-test-subj="superDatePickerRefreshIntervalInput"]'
+        );
+
+        wrapperFixedEuiFieldSearch.simulate('change', { target: { value: '2' } });
+        wrapper.update();
+
+        wrapper
+          .find('[data-test-subj="superDatePickerToggleRefreshButton"]')
+          .first()
+          .simulate('click');
+        wrapper.update();
+      });
+
+      test('Make sure the duration get updated to 2 minutes === 120000ms', () => {
+        expect(store.getState().inputs.global.policy.duration).toEqual(120000);
+      });
+
+      test('Make sure the stream live started', () => {
+        expect(store.getState().inputs.global.policy.kind).toBe('interval');
+      });
+
+      test('Make sure we can stop the stream live', () => {
+        wrapper
+          .find('[data-test-subj="superDatePickerToggleQuickMenuButton"]')
+          .first()
+          .simulate('click');
+        wrapper.update();
+
+        wrapper
+          .find('[data-test-subj="superDatePickerToggleRefreshButton"]')
+          .first()
+          .simulate('click');
+        wrapper.update();
+
+        expect(store.getState().inputs.global.policy.kind).toBe('manual');
+      });
+    });
+
+    describe('Pick Absolute Date', () => {
+      let wrapper = mount(
+        <ReduxStoreProvider store={store}>
+          <SuperDatePicker id="global" />
+        </ReduxStoreProvider>
+      );
+      beforeEach(() => {
+        wrapper = mount(
+          <ReduxStoreProvider store={store}>
+            <SuperDatePicker id="global" />
+          </ReduxStoreProvider>
+        );
+        wrapper
+          .find('[data-test-subj="superDatePickerShowDatesButton"]')
+          .first()
+          .simulate('click');
+        wrapper.update();
+
+        wrapper
+          .find('[data-test-subj="superDatePickerstartDatePopoverButton"]')
+          .first()
+          .simulate('click');
+        wrapper.update();
+
+        wrapper
+          .find('[data-test-subj="superDatePickerAbsoluteTab"]')
+          .first()
+          .simulate('click');
+        wrapper.update();
+
+        wrapper
+          .find('button.react-datepicker__navigation--previous')
+          .first()
+          .simulate('click');
+        wrapper.update();
+
+        wrapper
+          .find('div.react-datepicker__day')
+          .at(1)
+          .simulate('click');
+        wrapper.update();
+
+        wrapper
+          .find('button[data-test-subj="superDatePickerApplyTimeButton"]')
+          .first()
+          .simulate('click');
+        wrapper.update();
+      });
+    });
+
+    describe('#makeMapStateToProps', () => {
+      test('it should return the same shallow references given the same input twice', () => {
+        const mapStateToProps = makeMapStateToProps();
+        const props1 = mapStateToProps(state, { id: 'global' });
+        const props2 = mapStateToProps(state, { id: 'global' });
+        Object.keys(props1).forEach(key => {
+          expect((props1 as Record<string, {}>)[key]).toBe((props2 as Record<string, {}>)[key]);
+        });
+      });
+
+      test('it should not return the same reference if policy kind is different', () => {
+        const mapStateToProps = makeMapStateToProps();
+        const props1 = mapStateToProps(state, { id: 'global' });
+        const clone = cloneDeep(state);
+        clone.inputs.global.policy.kind = 'interval';
+        const props2 = mapStateToProps(clone, { id: 'global' });
+        expect(props1.policy).not.toBe(props2.policy);
+      });
+
+      test('it should not return the same reference if duration is different', () => {
+        const mapStateToProps = makeMapStateToProps();
+        const props1 = mapStateToProps(state, { id: 'global' });
+        const clone = cloneDeep(state);
+        clone.inputs.global.policy.duration = 99999;
+        const props2 = mapStateToProps(clone, { id: 'global' });
+        expect(props1.duration).not.toBe(props2.duration);
+      });
+
+      test('it should not return the same reference if timerange kind is different', () => {
+        const mapStateToProps = makeMapStateToProps();
+        const props1 = mapStateToProps(state, { id: 'global' });
+        const clone = cloneDeep(state);
+        clone.inputs.global.timerange.kind = 'absolute';
+        const props2 = mapStateToProps(clone, { id: 'global' });
+        expect(props1.kind).not.toBe(props2.kind);
+      });
+
+      test('it should not return the same reference if timerange from is different', () => {
+        const mapStateToProps = makeMapStateToProps();
+        const props1 = mapStateToProps(state, { id: 'global' });
+        const clone = cloneDeep(state);
+        clone.inputs.global.timerange.from = 999;
+        const props2 = mapStateToProps(clone, { id: 'global' });
+        expect(props1.start).not.toBe(props2.start);
+      });
+
+      test('it should not return the same reference if timerange to is different', () => {
+        const mapStateToProps = makeMapStateToProps();
+        const props1 = mapStateToProps(state, { id: 'global' });
+        const clone = cloneDeep(state);
+        clone.inputs.global.timerange.to = 999;
+        const props2 = mapStateToProps(clone, { id: 'global' });
+        expect(props1.end).not.toBe(props2.end);
+      });
+
+      test('it should not return the same reference of toStr if toStr different', () => {
+        const mapStateToProps = makeMapStateToProps();
+        const props1 = mapStateToProps(state, { id: 'global' });
+        const clone = cloneDeep(state);
+        clone.inputs.global.timerange.toStr = 'some other string';
+        const props2 = mapStateToProps(clone, { id: 'global' });
+        expect(props1.toStr).not.toBe(props2.toStr);
+      });
+
+      test('it should not return the same reference of fromStr if fromStr different', () => {
+        const mapStateToProps = makeMapStateToProps();
+        const props1 = mapStateToProps(state, { id: 'global' });
+        const clone = cloneDeep(state);
+        clone.inputs.global.timerange.fromStr = 'some other string';
+        const props2 = mapStateToProps(clone, { id: 'global' });
+        expect(props1.fromStr).not.toBe(props2.fromStr);
+      });
+
+      test('it should not return the same reference of isLoadingSelector if the query different', () => {
+        const mapStateToProps = makeMapStateToProps();
+        const props1 = mapStateToProps(state, { id: 'global' });
+        const clone = cloneDeep(state);
+        clone.inputs.global.queries = [
+          {
+            loading: true,
+            id: '1',
+            inspect: { dsl: [], response: [] },
+            isInspected: false,
+            refetch: null,
+            selectedInspectIndex: 0,
+          },
+        ];
+        const props2 = mapStateToProps(clone, { id: 'global' });
+        expect(props1.isLoading).not.toBe(props2.isLoading);
+      });
+
+      test('it should not return the same reference of refetchSelector if the query different', () => {
+        const mapStateToProps = makeMapStateToProps();
+        const props1 = mapStateToProps(state, { id: 'global' });
+        const clone = cloneDeep(state);
+        clone.inputs.global.queries = [
+          {
+            loading: true,
+            id: '1',
+            inspect: { dsl: [], response: [] },
+            isInspected: false,
+            refetch: null,
+            selectedInspectIndex: 0,
+          },
+        ];
+        const props2 = mapStateToProps(clone, { id: 'global' });
+        expect(props1.queries).not.toBe(props2.queries);
+      });
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/common/components/super_date_picker/index.tsx b/x-pack/plugins/siem/public/common/components/super_date_picker/index.tsx
new file mode 100644
index 00000000000000..d1936ac61e26b5
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/super_date_picker/index.tsx
@@ -0,0 +1,314 @@
+/*
+ * 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 dateMath from '@elastic/datemath';
+import {
+  EuiSuperDatePicker,
+  OnRefreshChangeProps,
+  EuiSuperDatePickerRecentRange,
+  OnRefreshProps,
+  OnTimeChangeProps,
+} from '@elastic/eui';
+import { getOr, take, isEmpty } from 'lodash/fp';
+import React, { useState, useCallback } from 'react';
+import { connect, ConnectedProps } from 'react-redux';
+import { Dispatch } from 'redux';
+
+import { DEFAULT_TIMEPICKER_QUICK_RANGES } from '../../../../common/constants';
+import { timelineActions } from '../../../timelines/store/timeline';
+import { useUiSetting$ } from '../../lib/kibana';
+import { inputsModel, State } from '../../store';
+import { inputsActions } from '../../store/actions';
+import { InputsModelId } from '../../store/inputs/constants';
+import {
+  policySelector,
+  durationSelector,
+  kindSelector,
+  startSelector,
+  endSelector,
+  fromStrSelector,
+  toStrSelector,
+  isLoadingSelector,
+  queriesSelector,
+  kqlQuerySelector,
+} from './selectors';
+import { InputsRange } from '../../store/inputs/model';
+
+const MAX_RECENTLY_USED_RANGES = 9;
+
+interface Range {
+  from: string;
+  to: string;
+  display: string;
+}
+
+interface UpdateReduxTime extends OnTimeChangeProps {
+  id: InputsModelId;
+  kql?: inputsModel.GlobalKqlQuery | undefined;
+  timelineId?: string;
+}
+
+interface ReturnUpdateReduxTime {
+  kqlHaveBeenUpdated: boolean;
+}
+
+export type DispatchUpdateReduxTime = ({
+  end,
+  id,
+  isQuickSelection,
+  kql,
+  start,
+  timelineId,
+}: UpdateReduxTime) => ReturnUpdateReduxTime;
+
+interface OwnProps {
+  disabled?: boolean;
+  id: InputsModelId;
+  timelineId?: string;
+}
+
+export type SuperDatePickerProps = OwnProps & PropsFromRedux;
+
+export const SuperDatePickerComponent = React.memo<SuperDatePickerProps>(
+  ({
+    duration,
+    end,
+    fromStr,
+    id,
+    isLoading,
+    kind,
+    kqlQuery,
+    policy,
+    queries,
+    setDuration,
+    start,
+    startAutoReload,
+    stopAutoReload,
+    timelineId,
+    toStr,
+    updateReduxTime,
+  }) => {
+    const [isQuickSelection, setIsQuickSelection] = useState(true);
+    const [recentlyUsedRanges, setRecentlyUsedRanges] = useState<EuiSuperDatePickerRecentRange[]>(
+      []
+    );
+    const onRefresh = useCallback(
+      ({ start: newStart, end: newEnd }: OnRefreshProps): void => {
+        const { kqlHaveBeenUpdated } = updateReduxTime({
+          end: newEnd,
+          id,
+          isInvalid: false,
+          isQuickSelection,
+          kql: kqlQuery,
+          start: newStart,
+          timelineId,
+        });
+        const currentStart = formatDate(newStart);
+        const currentEnd = isQuickSelection
+          ? formatDate(newEnd, { roundUp: true })
+          : formatDate(newEnd);
+        if (
+          !kqlHaveBeenUpdated &&
+          (!isQuickSelection || (start === currentStart && end === currentEnd))
+        ) {
+          refetchQuery(queries);
+        }
+      },
+      [end, id, isQuickSelection, kqlQuery, start, timelineId]
+    );
+
+    const onRefreshChange = useCallback(
+      ({ isPaused, refreshInterval }: OnRefreshChangeProps): void => {
+        if (duration !== refreshInterval) {
+          setDuration({ id, duration: refreshInterval });
+        }
+
+        if (isPaused && policy === 'interval') {
+          stopAutoReload({ id });
+        } else if (!isPaused && policy === 'manual') {
+          startAutoReload({ id });
+        }
+
+        if (!isPaused && (!isQuickSelection || (isQuickSelection && toStr !== 'now'))) {
+          refetchQuery(queries);
+        }
+      },
+      [id, isQuickSelection, duration, policy, toStr]
+    );
+
+    const refetchQuery = (newQueries: inputsModel.GlobalGraphqlQuery[]) => {
+      newQueries.forEach(q => q.refetch && (q.refetch as inputsModel.Refetch)());
+    };
+
+    const onTimeChange = useCallback(
+      ({
+        start: newStart,
+        end: newEnd,
+        isQuickSelection: newIsQuickSelection,
+        isInvalid,
+      }: OnTimeChangeProps) => {
+        if (!isInvalid) {
+          updateReduxTime({
+            end: newEnd,
+            id,
+            isInvalid,
+            isQuickSelection: newIsQuickSelection,
+            kql: kqlQuery,
+            start: newStart,
+            timelineId,
+          });
+          const newRecentlyUsedRanges = [
+            { start: newStart, end: newEnd },
+            ...take(
+              MAX_RECENTLY_USED_RANGES,
+              recentlyUsedRanges.filter(
+                recentlyUsedRange =>
+                  !(recentlyUsedRange.start === newStart && recentlyUsedRange.end === newEnd)
+              )
+            ),
+          ];
+
+          setRecentlyUsedRanges(newRecentlyUsedRanges);
+          setIsQuickSelection(newIsQuickSelection);
+        }
+      },
+      [recentlyUsedRanges, kqlQuery]
+    );
+
+    const endDate = kind === 'relative' ? toStr : new Date(end).toISOString();
+    const startDate = kind === 'relative' ? fromStr : new Date(start).toISOString();
+
+    const [quickRanges] = useUiSetting$<Range[]>(DEFAULT_TIMEPICKER_QUICK_RANGES);
+    const commonlyUsedRanges = isEmpty(quickRanges)
+      ? []
+      : quickRanges.map(({ from, to, display }) => ({
+          start: from,
+          end: to,
+          label: display,
+        }));
+
+    return (
+      <EuiSuperDatePicker
+        commonlyUsedRanges={commonlyUsedRanges}
+        end={endDate}
+        isLoading={isLoading}
+        isPaused={policy === 'manual'}
+        onRefresh={onRefresh}
+        onRefreshChange={onRefreshChange}
+        onTimeChange={onTimeChange}
+        recentlyUsedRanges={recentlyUsedRanges}
+        refreshInterval={duration}
+        showUpdateButton={true}
+        start={startDate}
+      />
+    );
+  }
+);
+
+export const formatDate = (
+  date: string,
+  options?: {
+    roundUp?: boolean;
+  }
+) => {
+  const momentDate = dateMath.parse(date, options);
+  return momentDate != null && momentDate.isValid() ? momentDate.valueOf() : 0;
+};
+
+export const dispatchUpdateReduxTime = (dispatch: Dispatch) => ({
+  end,
+  id,
+  isQuickSelection,
+  kql,
+  start,
+  timelineId,
+}: UpdateReduxTime): ReturnUpdateReduxTime => {
+  const fromDate = formatDate(start);
+  let toDate = formatDate(end, { roundUp: true });
+  if (isQuickSelection) {
+    dispatch(
+      inputsActions.setRelativeRangeDatePicker({
+        id,
+        fromStr: start,
+        toStr: end,
+        from: fromDate,
+        to: toDate,
+      })
+    );
+  } else {
+    toDate = formatDate(end);
+    dispatch(
+      inputsActions.setAbsoluteRangeDatePicker({
+        id,
+        from: formatDate(start),
+        to: formatDate(end),
+      })
+    );
+  }
+  if (timelineId != null) {
+    dispatch(
+      timelineActions.updateRange({
+        id: timelineId,
+        start: fromDate,
+        end: toDate,
+      })
+    );
+  }
+  if (kql) {
+    return {
+      kqlHaveBeenUpdated: kql.refetch(dispatch),
+    };
+  }
+
+  return {
+    kqlHaveBeenUpdated: false,
+  };
+};
+
+export const makeMapStateToProps = () => {
+  const getDurationSelector = durationSelector();
+  const getEndSelector = endSelector();
+  const getFromStrSelector = fromStrSelector();
+  const getIsLoadingSelector = isLoadingSelector();
+  const getKindSelector = kindSelector();
+  const getKqlQuerySelector = kqlQuerySelector();
+  const getPolicySelector = policySelector();
+  const getQueriesSelector = queriesSelector();
+  const getStartSelector = startSelector();
+  const getToStrSelector = toStrSelector();
+  return (state: State, { id }: OwnProps) => {
+    const inputsRange: InputsRange = getOr({}, `inputs.${id}`, state);
+    return {
+      duration: getDurationSelector(inputsRange),
+      end: getEndSelector(inputsRange),
+      fromStr: getFromStrSelector(inputsRange),
+      isLoading: getIsLoadingSelector(inputsRange),
+      kind: getKindSelector(inputsRange),
+      kqlQuery: getKqlQuerySelector(inputsRange) as inputsModel.GlobalKqlQuery,
+      policy: getPolicySelector(inputsRange),
+      queries: getQueriesSelector(inputsRange) as inputsModel.GlobalGraphqlQuery[],
+      start: getStartSelector(inputsRange),
+      toStr: getToStrSelector(inputsRange),
+    };
+  };
+};
+
+SuperDatePickerComponent.displayName = 'SuperDatePickerComponent';
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  startAutoReload: ({ id }: { id: InputsModelId }) =>
+    dispatch(inputsActions.startAutoReload({ id })),
+  stopAutoReload: ({ id }: { id: InputsModelId }) => dispatch(inputsActions.stopAutoReload({ id })),
+  setDuration: ({ id, duration }: { id: InputsModelId; duration: number }) =>
+    dispatch(inputsActions.setDuration({ id, duration })),
+  updateReduxTime: dispatchUpdateReduxTime(dispatch),
+});
+
+export const connector = connect(makeMapStateToProps, mapDispatchToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export const SuperDatePicker = connector(SuperDatePickerComponent);
diff --git a/x-pack/plugins/siem/public/components/super_date_picker/selectors.test.ts b/x-pack/plugins/siem/public/common/components/super_date_picker/selectors.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/super_date_picker/selectors.test.ts
rename to x-pack/plugins/siem/public/common/components/super_date_picker/selectors.test.ts
diff --git a/x-pack/plugins/siem/public/components/super_date_picker/selectors.ts b/x-pack/plugins/siem/public/common/components/super_date_picker/selectors.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/super_date_picker/selectors.ts
rename to x-pack/plugins/siem/public/common/components/super_date_picker/selectors.ts
diff --git a/x-pack/plugins/siem/public/components/tables/__snapshots__/helpers.test.tsx.snap b/x-pack/plugins/siem/public/common/components/tables/__snapshots__/helpers.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/tables/__snapshots__/helpers.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/tables/__snapshots__/helpers.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/tables/helpers.test.tsx b/x-pack/plugins/siem/public/common/components/tables/helpers.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/tables/helpers.test.tsx
rename to x-pack/plugins/siem/public/common/components/tables/helpers.test.tsx
diff --git a/x-pack/plugins/siem/public/common/components/tables/helpers.tsx b/x-pack/plugins/siem/public/common/components/tables/helpers.tsx
new file mode 100644
index 00000000000000..c9d90504c36dbd
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/tables/helpers.tsx
@@ -0,0 +1,240 @@
+/*
+ * 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 { EuiLink, EuiPopover, EuiToolTip, EuiText, EuiTextColor } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+import { DragEffects, DraggableWrapper } from '../drag_and_drop/draggable_wrapper';
+import { escapeDataProviderId } from '../drag_and_drop/helpers';
+import { defaultToEmptyTag, getEmptyTagValue } from '../empty_value';
+import { MoreRowItems, Spacer } from '../page';
+import { IS_OPERATOR } from '../../../timelines/components/timeline/data_providers/data_provider';
+import { Provider } from '../../../timelines/components/timeline/data_providers/provider';
+
+const Subtext = styled.div`
+  font-size: ${props => props.theme.eui.euiFontSizeXS};
+`;
+
+export const getRowItemDraggable = ({
+  rowItem,
+  attrName,
+  idPrefix,
+  render,
+  dragDisplayValue,
+}: {
+  rowItem: string | null | undefined;
+  attrName: string;
+  idPrefix: string;
+  render?: (item: string) => JSX.Element;
+  displayCount?: number;
+  dragDisplayValue?: string;
+  maxOverflow?: number;
+}): JSX.Element => {
+  if (rowItem != null) {
+    const id = escapeDataProviderId(`${idPrefix}-${attrName}-${rowItem}`);
+    return (
+      <DraggableWrapper
+        key={id}
+        dataProvider={{
+          and: [],
+          enabled: true,
+          id,
+          name: rowItem,
+          excluded: false,
+          kqlQuery: '',
+          queryMatch: {
+            field: attrName,
+            value: rowItem,
+            displayValue: dragDisplayValue || rowItem,
+            operator: IS_OPERATOR,
+          },
+        }}
+        render={(dataProvider, _, snapshot) =>
+          snapshot.isDragging ? (
+            <DragEffects>
+              <Provider dataProvider={dataProvider} />
+            </DragEffects>
+          ) : (
+            <>{render ? render(rowItem) : defaultToEmptyTag(rowItem)}</>
+          )
+        }
+      />
+    );
+  } else {
+    return getEmptyTagValue();
+  }
+};
+
+export const getRowItemDraggables = ({
+  rowItems,
+  attrName,
+  idPrefix,
+  render,
+  dragDisplayValue,
+  displayCount = 5,
+  maxOverflow = 5,
+}: {
+  rowItems: string[] | null | undefined;
+  attrName: string;
+  idPrefix: string;
+  render?: (item: string) => JSX.Element;
+  displayCount?: number;
+  dragDisplayValue?: string;
+  maxOverflow?: number;
+}): JSX.Element => {
+  if (rowItems != null && rowItems.length > 0) {
+    const draggables = rowItems.slice(0, displayCount).map((rowItem, index) => {
+      const id = escapeDataProviderId(`${idPrefix}-${attrName}-${rowItem}-${index}`);
+      return (
+        <React.Fragment key={id}>
+          {index !== 0 && (
+            <>
+              {','}
+              <Spacer />
+            </>
+          )}
+          <DraggableWrapper
+            key={id}
+            dataProvider={{
+              and: [],
+              enabled: true,
+              id,
+              name: rowItem,
+              excluded: false,
+              kqlQuery: '',
+              queryMatch: {
+                field: attrName,
+                value: rowItem,
+                displayValue: dragDisplayValue || rowItem,
+                operator: IS_OPERATOR,
+              },
+            }}
+            render={(dataProvider, _, snapshot) =>
+              snapshot.isDragging ? (
+                <DragEffects>
+                  <Provider dataProvider={dataProvider} />
+                </DragEffects>
+              ) : (
+                <>{render ? render(rowItem) : defaultToEmptyTag(rowItem)}</>
+              )
+            }
+          />
+        </React.Fragment>
+      );
+    });
+
+    return draggables.length > 0 ? (
+      <>
+        {draggables} {getRowItemOverflow(rowItems, idPrefix, displayCount, maxOverflow)}
+      </>
+    ) : (
+      getEmptyTagValue()
+    );
+  } else {
+    return getEmptyTagValue();
+  }
+};
+
+export const getRowItemOverflow = (
+  rowItems: string[],
+  idPrefix: string,
+  overflowIndexStart = 5,
+  maxOverflowItems = 5
+): JSX.Element => {
+  return (
+    <>
+      {rowItems.length > overflowIndexStart && (
+        <Popover count={rowItems.length - overflowIndexStart} idPrefix={idPrefix}>
+          <EuiText size="xs">
+            <ul>
+              {rowItems
+                .slice(overflowIndexStart, overflowIndexStart + maxOverflowItems)
+                .map(rowItem => (
+                  <li key={`${idPrefix}-${rowItem}`}>{defaultToEmptyTag(rowItem)}</li>
+                ))}
+            </ul>
+
+            {rowItems.length > overflowIndexStart + maxOverflowItems && (
+              <p data-test-subj="popover-additional-overflow">
+                <EuiTextColor color="subdued">
+                  {rowItems.length - overflowIndexStart - maxOverflowItems}{' '}
+                  <FormattedMessage
+                    id="xpack.siem.tables.rowItemHelper.moreDescription"
+                    defaultMessage="more not shown"
+                  />
+                </EuiTextColor>
+              </p>
+            )}
+          </EuiText>
+        </Popover>
+      )}
+    </>
+  );
+};
+
+export const PopoverComponent = ({
+  children,
+  count,
+  idPrefix,
+}: {
+  children: React.ReactNode;
+  count: number;
+  idPrefix: string;
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <Subtext>
+      <EuiPopover
+        button={<EuiLink onClick={() => setIsOpen(!isOpen)}>{`+${count} More`}</EuiLink>}
+        closePopover={() => setIsOpen(!isOpen)}
+        id={`${idPrefix}-popover`}
+        isOpen={isOpen}
+      >
+        {children}
+      </EuiPopover>
+    </Subtext>
+  );
+};
+
+PopoverComponent.displayName = 'PopoverComponent';
+
+export const Popover = React.memo(PopoverComponent);
+
+Popover.displayName = 'Popover';
+
+export const OverflowFieldComponent = ({
+  value,
+  showToolTip = true,
+  overflowLength = 50,
+}: {
+  value: string;
+  showToolTip?: boolean;
+  overflowLength?: number;
+}) => (
+  <span>
+    {showToolTip ? (
+      <EuiToolTip data-test-subj={'message-tooltip'} content={'message'}>
+        <>{value.substring(0, overflowLength)}</>
+      </EuiToolTip>
+    ) : (
+      <>{value.substring(0, overflowLength)}</>
+    )}
+    {value.length > overflowLength && (
+      <EuiToolTip content={value}>
+        <MoreRowItems type="boxesHorizontal" />
+      </EuiToolTip>
+    )}
+  </span>
+);
+
+OverflowFieldComponent.displayName = 'OverflowFieldComponent';
+
+export const OverflowField = React.memo(OverflowFieldComponent);
+
+OverflowField.displayName = 'OverflowField';
diff --git a/x-pack/plugins/siem/public/components/toasters/__snapshots__/modal_all_errors.test.tsx.snap b/x-pack/plugins/siem/public/common/components/toasters/__snapshots__/modal_all_errors.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/toasters/__snapshots__/modal_all_errors.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/toasters/__snapshots__/modal_all_errors.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/toasters/errors.ts b/x-pack/plugins/siem/public/common/components/toasters/errors.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/toasters/errors.ts
rename to x-pack/plugins/siem/public/common/components/toasters/errors.ts
diff --git a/x-pack/plugins/siem/public/components/toasters/index.test.tsx b/x-pack/plugins/siem/public/common/components/toasters/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/toasters/index.test.tsx
rename to x-pack/plugins/siem/public/common/components/toasters/index.test.tsx
diff --git a/x-pack/plugins/siem/public/components/toasters/index.tsx b/x-pack/plugins/siem/public/common/components/toasters/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/toasters/index.tsx
rename to x-pack/plugins/siem/public/common/components/toasters/index.tsx
diff --git a/x-pack/plugins/siem/public/components/toasters/modal_all_errors.test.tsx b/x-pack/plugins/siem/public/common/components/toasters/modal_all_errors.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/toasters/modal_all_errors.test.tsx
rename to x-pack/plugins/siem/public/common/components/toasters/modal_all_errors.test.tsx
diff --git a/x-pack/plugins/siem/public/components/toasters/modal_all_errors.tsx b/x-pack/plugins/siem/public/common/components/toasters/modal_all_errors.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/toasters/modal_all_errors.tsx
rename to x-pack/plugins/siem/public/common/components/toasters/modal_all_errors.tsx
diff --git a/x-pack/plugins/siem/public/components/toasters/translations.ts b/x-pack/plugins/siem/public/common/components/toasters/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/toasters/translations.ts
rename to x-pack/plugins/siem/public/common/components/toasters/translations.ts
diff --git a/x-pack/plugins/siem/public/components/toasters/utils.test.ts b/x-pack/plugins/siem/public/common/components/toasters/utils.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/toasters/utils.test.ts
rename to x-pack/plugins/siem/public/common/components/toasters/utils.test.ts
diff --git a/x-pack/plugins/siem/public/components/toasters/utils.ts b/x-pack/plugins/siem/public/common/components/toasters/utils.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/toasters/utils.ts
rename to x-pack/plugins/siem/public/common/components/toasters/utils.ts
diff --git a/x-pack/plugins/siem/public/components/top_n/helpers.test.tsx b/x-pack/plugins/siem/public/common/components/top_n/helpers.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/top_n/helpers.test.tsx
rename to x-pack/plugins/siem/public/common/components/top_n/helpers.test.tsx
diff --git a/x-pack/plugins/siem/public/common/components/top_n/helpers.ts b/x-pack/plugins/siem/public/common/components/top_n/helpers.ts
new file mode 100644
index 00000000000000..a4226cc58530aa
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/top_n/helpers.ts
@@ -0,0 +1,66 @@
+/*
+ * 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 { EventType } from '../../../timelines/store/timeline/model';
+
+import * as i18n from './translations';
+
+export interface TopNOption {
+  inputDisplay: string;
+  value: EventType;
+  'data-test-subj': string;
+}
+
+/** A (stable) array containing only the 'All events' option */
+export const allEvents: TopNOption[] = [
+  {
+    value: 'all',
+    inputDisplay: i18n.ALL_EVENTS,
+    'data-test-subj': 'option-all',
+  },
+];
+
+/** A (stable) array containing only the 'Raw events' option */
+export const rawEvents: TopNOption[] = [
+  {
+    value: 'raw',
+    inputDisplay: i18n.RAW_EVENTS,
+    'data-test-subj': 'option-raw',
+  },
+];
+
+/** A (stable) array containing only the 'Signal events' option */
+export const signalEvents: TopNOption[] = [
+  {
+    value: 'signal',
+    inputDisplay: i18n.SIGNAL_EVENTS,
+    'data-test-subj': 'option-signal',
+  },
+];
+
+/** A (stable) array containing the default Top N options */
+export const defaultOptions = [...rawEvents, ...signalEvents];
+
+/**
+ * Returns the options to be displayed in a Top N view select. When
+ * an `activeTimelineEventType` is provided, an array containing
+ * just one option (corresponding to `activeTimelineEventType`)
+ * will be returned, to ensure the data displayed in the Top N
+ * is always in sync with the `EventType` chosen by the user in
+ * the active timeline.
+ */
+export const getOptions = (activeTimelineEventType?: EventType): TopNOption[] => {
+  switch (activeTimelineEventType) {
+    case 'all':
+      return allEvents;
+    case 'raw':
+      return rawEvents;
+    case 'signal':
+      return signalEvents;
+    default:
+      return defaultOptions;
+  }
+};
diff --git a/x-pack/plugins/siem/public/common/components/top_n/index.test.tsx b/x-pack/plugins/siem/public/common/components/top_n/index.test.tsx
new file mode 100644
index 00000000000000..24d1939d9319d3
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/top_n/index.test.tsx
@@ -0,0 +1,387 @@
+/*
+ * 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 { mount, ReactWrapper } from 'enzyme';
+import React from 'react';
+
+import { mockBrowserFields } from '../../containers/source/mock';
+import {
+  apolloClientObservable,
+  mockGlobalState,
+  TestProviders,
+  SUB_PLUGINS_REDUCER,
+} from '../../mock';
+import { createKibanaCoreStartMock } from '../../mock/kibana_core';
+import { FilterManager } from '../../../../../../../src/plugins/data/public';
+import { createStore, State } from '../../store';
+import {
+  TimelineContext,
+  TimelineTypeContext,
+} from '../../../timelines/components/timeline/timeline_context';
+
+import { Props } from './top_n';
+import { ACTIVE_TIMELINE_REDUX_ID, StatefulTopN } from '.';
+
+jest.mock('../../lib/kibana');
+
+const mockUiSettingsForFilterManager = createKibanaCoreStartMock().uiSettings;
+
+const field = 'process.name';
+const value = 'nice';
+
+const state: State = {
+  ...mockGlobalState,
+  inputs: {
+    ...mockGlobalState.inputs,
+    global: {
+      ...mockGlobalState.inputs.global,
+      query: {
+        query: 'host.name : end*',
+        language: 'kuery',
+      },
+      filters: [
+        {
+          meta: {
+            alias: null,
+            negate: false,
+            disabled: false,
+            type: 'phrase',
+            key: 'host.os.name',
+            params: {
+              query: 'Linux',
+            },
+          },
+          query: {
+            match: {
+              'host.os.name': {
+                query: 'Linux',
+                type: 'phrase',
+              },
+            },
+          },
+        },
+      ],
+    },
+    timeline: {
+      ...mockGlobalState.inputs.timeline,
+      timerange: {
+        kind: 'relative',
+        fromStr: 'now-24h',
+        toStr: 'now',
+        from: 1586835969047,
+        to: 1586922369047,
+      },
+    },
+  },
+  timeline: {
+    ...mockGlobalState.timeline,
+    timelineById: {
+      [ACTIVE_TIMELINE_REDUX_ID]: {
+        ...mockGlobalState.timeline.timelineById.test,
+        id: ACTIVE_TIMELINE_REDUX_ID,
+        dataProviders: [
+          {
+            id:
+              'draggable-badge-default-draggable-netflow-renderer-timeline-1-_qpBe3EBD7k-aQQL7v7--_qpBe3EBD7k-aQQL7v7--network_transport-tcp',
+            name: 'tcp',
+            enabled: true,
+            excluded: false,
+            kqlQuery: '',
+            queryMatch: {
+              field: 'network.transport',
+              value: 'tcp',
+              operator: ':',
+            },
+            and: [],
+          },
+        ],
+        eventType: 'all',
+        filters: [
+          {
+            meta: {
+              alias: null,
+              disabled: false,
+              key: 'source.port',
+              negate: false,
+              params: {
+                query: '30045',
+              },
+              type: 'phrase',
+            },
+            query: {
+              match: {
+                'source.port': {
+                  query: '30045',
+                  type: 'phrase',
+                },
+              },
+            },
+          },
+        ],
+        kqlMode: 'filter',
+        kqlQuery: {
+          filterQuery: {
+            kuery: {
+              kind: 'kuery',
+              expression: 'host.name : *',
+            },
+            serializedQuery:
+              '{"bool":{"should":[{"exists":{"field":"host.name"}}],"minimum_should_match":1}}',
+          },
+          filterQueryDraft: {
+            kind: 'kuery',
+            expression: 'host.name : *',
+          },
+        },
+      },
+    },
+  },
+};
+const store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable);
+
+describe('StatefulTopN', () => {
+  // Suppress warnings about "react-beautiful-dnd"
+  /* eslint-disable no-console */
+  const originalError = console.error;
+  const originalWarn = console.warn;
+  beforeAll(() => {
+    console.warn = jest.fn();
+    console.error = jest.fn();
+  });
+  afterAll(() => {
+    console.error = originalError;
+    console.warn = originalWarn;
+  });
+
+  describe('rendering in a global NON-timeline context', () => {
+    let wrapper: ReactWrapper;
+
+    beforeEach(() => {
+      wrapper = mount(
+        <TestProviders store={store}>
+          <StatefulTopN
+            browserFields={mockBrowserFields}
+            field={field}
+            toggleTopN={jest.fn()}
+            onFilterAdded={jest.fn()}
+            value={value}
+          />
+        </TestProviders>
+      );
+    });
+
+    test('it has undefined combinedQueries when rendering in a global context', () => {
+      const props = wrapper
+        .find('[data-test-subj="top-n"]')
+        .first()
+        .props() as Props;
+
+      expect(props.combinedQueries).toBeUndefined();
+    });
+
+    test(`defaults to the 'Raw events' view when rendering in a global context`, () => {
+      const props = wrapper
+        .find('[data-test-subj="top-n"]')
+        .first()
+        .props() as Props;
+
+      expect(props.defaultView).toEqual('raw');
+    });
+
+    test(`provides a 'deleteQuery' when rendering in a global context`, () => {
+      const props = wrapper
+        .find('[data-test-subj="top-n"]')
+        .first()
+        .props() as Props;
+
+      expect(props.deleteQuery).toBeDefined();
+    });
+
+    test(`provides filters from Redux state (inputs > global > filters) when rendering in a global context`, () => {
+      const props = wrapper
+        .find('[data-test-subj="top-n"]')
+        .first()
+        .props() as Props;
+
+      expect(props.filters).toEqual([
+        {
+          meta: {
+            alias: null,
+            negate: false,
+            disabled: false,
+            type: 'phrase',
+            key: 'host.os.name',
+            params: { query: 'Linux' },
+          },
+          query: { match: { 'host.os.name': { query: 'Linux', type: 'phrase' } } },
+        },
+      ]);
+    });
+
+    test(`provides 'from' via GlobalTime when rendering in a global context`, () => {
+      const props = wrapper
+        .find('[data-test-subj="top-n"]')
+        .first()
+        .props() as Props;
+
+      expect(props.from).toEqual(0);
+    });
+
+    test('provides the global query from Redux state (inputs > global > query) when rendering in a global context', () => {
+      const props = wrapper
+        .find('[data-test-subj="top-n"]')
+        .first()
+        .props() as Props;
+
+      expect(props.query).toEqual({ query: 'host.name : end*', language: 'kuery' });
+    });
+
+    test(`provides a 'global' 'setAbsoluteRangeDatePickerTarget' when rendering in a global context`, () => {
+      const props = wrapper
+        .find('[data-test-subj="top-n"]')
+        .first()
+        .props() as Props;
+
+      expect(props.setAbsoluteRangeDatePickerTarget).toEqual('global');
+    });
+
+    test(`provides 'to' via GlobalTime when rendering in a global context`, () => {
+      const props = wrapper
+        .find('[data-test-subj="top-n"]')
+        .first()
+        .props() as Props;
+
+      expect(props.to).toEqual(1);
+    });
+  });
+
+  describe('rendering in a timeline context', () => {
+    let filterManager: FilterManager;
+    let wrapper: ReactWrapper;
+
+    beforeEach(() => {
+      filterManager = new FilterManager(mockUiSettingsForFilterManager);
+
+      wrapper = mount(
+        <TestProviders store={store}>
+          <TimelineContext.Provider value={{ filterManager, isLoading: false }}>
+            <TimelineTypeContext.Provider value={{ id: ACTIVE_TIMELINE_REDUX_ID }}>
+              <StatefulTopN
+                browserFields={mockBrowserFields}
+                field={field}
+                toggleTopN={jest.fn()}
+                onFilterAdded={jest.fn()}
+                value={value}
+              />
+            </TimelineTypeContext.Provider>
+          </TimelineContext.Provider>
+        </TestProviders>
+      );
+    });
+
+    test('it has a combinedQueries value from Redux state composed of the timeline [data providers + kql + filter-bar-filters] when rendering in a timeline context', () => {
+      const props = wrapper
+        .find('[data-test-subj="top-n"]')
+        .first()
+        .props() as Props;
+
+      expect(props.combinedQueries).toEqual(
+        '{"bool":{"must":[],"filter":[{"bool":{"filter":[{"bool":{"filter":[{"bool":{"should":[{"match_phrase":{"network.transport":"tcp"}}],"minimum_should_match":1}},{"bool":{"should":[{"exists":{"field":"host.name"}}],"minimum_should_match":1}}]}},{"bool":{"filter":[{"bool":{"should":[{"range":{"@timestamp":{"gte":1586835969047}}}],"minimum_should_match":1}},{"bool":{"should":[{"range":{"@timestamp":{"lte":1586922369047}}}],"minimum_should_match":1}}]}}]}},{"match_phrase":{"source.port":{"query":"30045"}}}],"should":[],"must_not":[]}}'
+      );
+    });
+
+    test('it provides only one view option that matches the `eventType` from redux when rendering in the context of the active timeline', () => {
+      const props = wrapper
+        .find('[data-test-subj="top-n"]')
+        .first()
+        .props() as Props;
+
+      expect(props.defaultView).toEqual('all');
+    });
+
+    test(`provides an undefined 'deleteQuery' when rendering in a timeline context`, () => {
+      const props = wrapper
+        .find('[data-test-subj="top-n"]')
+        .first()
+        .props() as Props;
+
+      expect(props.deleteQuery).toBeUndefined();
+    });
+
+    test(`provides empty filters when rendering in a timeline context`, () => {
+      const props = wrapper
+        .find('[data-test-subj="top-n"]')
+        .first()
+        .props() as Props;
+
+      expect(props.filters).toEqual([]);
+    });
+
+    test(`provides 'from' via redux state (inputs > timeline > timerange) when rendering in a timeline context`, () => {
+      const props = wrapper
+        .find('[data-test-subj="top-n"]')
+        .first()
+        .props() as Props;
+
+      expect(props.from).toEqual(1586835969047);
+    });
+
+    test('provides an empty query when rendering in a timeline context', () => {
+      const props = wrapper
+        .find('[data-test-subj="top-n"]')
+        .first()
+        .props() as Props;
+
+      expect(props.query).toEqual({ query: '', language: 'kuery' });
+    });
+
+    test(`provides a 'timeline' 'setAbsoluteRangeDatePickerTarget' when rendering in a timeline context`, () => {
+      const props = wrapper
+        .find('[data-test-subj="top-n"]')
+        .first()
+        .props() as Props;
+
+      expect(props.setAbsoluteRangeDatePickerTarget).toEqual('timeline');
+    });
+
+    test(`provides 'to' via redux state (inputs > timeline > timerange) when rendering in a timeline context`, () => {
+      const props = wrapper
+        .find('[data-test-subj="top-n"]')
+        .first()
+        .props() as Props;
+
+      expect(props.to).toEqual(1586922369047);
+    });
+  });
+
+  test(`defaults to the 'Signals events' option when rendering in a NON-active timeline context (e.g. the Signals table on the Detections page) when 'documentType' from 'useTimelineTypeContext()' is 'signals'`, () => {
+    const filterManager = new FilterManager(mockUiSettingsForFilterManager);
+    const wrapper = mount(
+      <TestProviders store={store}>
+        <TimelineContext.Provider value={{ filterManager, isLoading: false }}>
+          <TimelineTypeContext.Provider
+            value={{ documentType: 'signals', id: ACTIVE_TIMELINE_REDUX_ID }}
+          >
+            <StatefulTopN
+              browserFields={mockBrowserFields}
+              field={field}
+              toggleTopN={jest.fn()}
+              onFilterAdded={jest.fn()}
+              value={value}
+            />
+          </TimelineTypeContext.Provider>
+        </TimelineContext.Provider>
+      </TestProviders>
+    );
+
+    const props = wrapper
+      .find('[data-test-subj="top-n"]')
+      .first()
+      .props() as Props;
+
+    expect(props.defaultView).toEqual('signal');
+  });
+});
diff --git a/x-pack/plugins/siem/public/common/components/top_n/index.tsx b/x-pack/plugins/siem/public/common/components/top_n/index.tsx
new file mode 100644
index 00000000000000..a71b27e0bd9cb4
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/top_n/index.tsx
@@ -0,0 +1,167 @@
+/*
+ * 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 { connect, ConnectedProps } from 'react-redux';
+
+import { GlobalTime } from '../../containers/global_time';
+import { BrowserFields, WithSource } from '../../containers/source';
+import { useKibana } from '../../lib/kibana';
+import { esQuery, Filter, Query } from '../../../../../../../src/plugins/data/public';
+import { inputsModel, inputsSelectors, State } from '../../store';
+import { setAbsoluteRangeDatePicker as dispatchSetAbsoluteRangeDatePicker } from '../../store/inputs/actions';
+import { timelineDefaults } from '../../../timelines/store/timeline/defaults';
+import { timelineSelectors } from '../../../timelines/store/timeline';
+import { TimelineModel } from '../../../timelines/store/timeline/model';
+import { combineQueries } from '../../../timelines/components/timeline/helpers';
+import { useTimelineTypeContext } from '../../../timelines/components/timeline/timeline_context';
+
+import { getOptions } from './helpers';
+import { TopN } from './top_n';
+
+/** The currently active timeline always has this Redux ID */
+export const ACTIVE_TIMELINE_REDUX_ID = 'timeline-1';
+
+const EMPTY_FILTERS: Filter[] = [];
+const EMPTY_QUERY: Query = { query: '', language: 'kuery' };
+
+const makeMapStateToProps = () => {
+  const getGlobalQuerySelector = inputsSelectors.globalQuerySelector();
+  const getGlobalFiltersQuerySelector = inputsSelectors.globalFiltersQuerySelector();
+  const getTimeline = timelineSelectors.getTimelineByIdSelector();
+  const getInputsTimeline = inputsSelectors.getTimelineSelector();
+  const getKqlQueryTimeline = timelineSelectors.getKqlFilterQuerySelector();
+
+  // The mapped Redux state provided to this component includes the global
+  // filters that appear at the top of most views in the app, and all the
+  // filters in the active timeline:
+  const mapStateToProps = (state: State) => {
+    const activeTimeline: TimelineModel =
+      getTimeline(state, ACTIVE_TIMELINE_REDUX_ID) ?? timelineDefaults;
+    const activeTimelineFilters = activeTimeline.filters ?? EMPTY_FILTERS;
+    const activeTimelineInput: inputsModel.InputsRange = getInputsTimeline(state);
+
+    return {
+      activeTimelineEventType: activeTimeline.eventType,
+      activeTimelineFilters,
+      activeTimelineFrom: activeTimelineInput.timerange.from,
+      activeTimelineKqlQueryExpression: getKqlQueryTimeline(state, ACTIVE_TIMELINE_REDUX_ID),
+      activeTimelineTo: activeTimelineInput.timerange.to,
+      dataProviders: activeTimeline.dataProviders,
+      globalQuery: getGlobalQuerySelector(state),
+      globalFilters: getGlobalFiltersQuerySelector(state),
+      kqlMode: activeTimeline.kqlMode,
+    };
+  };
+
+  return mapStateToProps;
+};
+
+const mapDispatchToProps = { setAbsoluteRangeDatePicker: dispatchSetAbsoluteRangeDatePicker };
+
+const connector = connect(makeMapStateToProps, mapDispatchToProps);
+
+interface OwnProps {
+  browserFields: BrowserFields;
+  field: string;
+  toggleTopN: () => void;
+  onFilterAdded?: () => void;
+  value?: string[] | string | null;
+}
+type PropsFromRedux = ConnectedProps<typeof connector>;
+type Props = OwnProps & PropsFromRedux;
+
+const StatefulTopNComponent: React.FC<Props> = ({
+  activeTimelineEventType,
+  activeTimelineFilters,
+  activeTimelineFrom,
+  activeTimelineKqlQueryExpression,
+  activeTimelineTo,
+  browserFields,
+  dataProviders,
+  field,
+  globalFilters = EMPTY_FILTERS,
+  globalQuery = EMPTY_QUERY,
+  kqlMode,
+  onFilterAdded,
+  setAbsoluteRangeDatePicker,
+  toggleTopN,
+  value,
+}) => {
+  const kibana = useKibana();
+
+  //  Regarding data from useTimelineTypeContext:
+  //  * `documentType` (e.g. 'signals') may only be populated in some views,
+  //    e.g. the `Signals` view on the `Detections` page.
+  //  * `id` (`timelineId`) may only be populated when we are rendered in the
+  //    context of the active timeline.
+  //  * `indexToAdd`, which enables the signals index to be appended to
+  //    the `indexPattern` returned by `WithSource`, may only be populated when
+  //    this component is rendered in the context of the active timeline. This
+  //    behavior enables the 'All events' view by appending the signals index
+  //    to the index pattern.
+  const { documentType, id: timelineId, indexToAdd } = useTimelineTypeContext();
+
+  const options = getOptions(
+    timelineId === ACTIVE_TIMELINE_REDUX_ID ? activeTimelineEventType : undefined
+  );
+
+  return (
+    <GlobalTime>
+      {({ from, deleteQuery, setQuery, to }) => (
+        <WithSource sourceId="default" indexToAdd={indexToAdd}>
+          {({ indexPattern }) => (
+            <TopN
+              combinedQueries={
+                timelineId === ACTIVE_TIMELINE_REDUX_ID
+                  ? combineQueries({
+                      browserFields,
+                      config: esQuery.getEsQueryConfig(kibana.services.uiSettings),
+                      dataProviders,
+                      end: activeTimelineTo,
+                      filters: activeTimelineFilters,
+                      indexPattern,
+                      kqlMode,
+                      kqlQuery: {
+                        language: 'kuery',
+                        query: activeTimelineKqlQueryExpression ?? '',
+                      },
+                      start: activeTimelineFrom,
+                    })?.filterQuery
+                  : undefined
+              }
+              data-test-subj="top-n"
+              defaultView={
+                documentType?.toLocaleLowerCase() === 'signals' ? 'signal' : options[0].value
+              }
+              deleteQuery={timelineId === ACTIVE_TIMELINE_REDUX_ID ? undefined : deleteQuery}
+              field={field}
+              filters={timelineId === ACTIVE_TIMELINE_REDUX_ID ? EMPTY_FILTERS : globalFilters}
+              from={timelineId === ACTIVE_TIMELINE_REDUX_ID ? activeTimelineFrom : from}
+              indexPattern={indexPattern}
+              indexToAdd={indexToAdd}
+              options={options}
+              query={timelineId === ACTIVE_TIMELINE_REDUX_ID ? EMPTY_QUERY : globalQuery}
+              setAbsoluteRangeDatePicker={setAbsoluteRangeDatePicker}
+              setAbsoluteRangeDatePickerTarget={
+                timelineId === ACTIVE_TIMELINE_REDUX_ID ? 'timeline' : 'global'
+              }
+              setQuery={setQuery}
+              to={timelineId === ACTIVE_TIMELINE_REDUX_ID ? activeTimelineTo : to}
+              toggleTopN={toggleTopN}
+              onFilterAdded={onFilterAdded}
+              value={value}
+            />
+          )}
+        </WithSource>
+      )}
+    </GlobalTime>
+  );
+};
+
+StatefulTopNComponent.displayName = 'StatefulTopNComponent';
+
+export const StatefulTopN = connector(React.memo(StatefulTopNComponent));
diff --git a/x-pack/plugins/siem/public/components/top_n/top_n.test.tsx b/x-pack/plugins/siem/public/common/components/top_n/top_n.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/top_n/top_n.test.tsx
rename to x-pack/plugins/siem/public/common/components/top_n/top_n.test.tsx
diff --git a/x-pack/plugins/siem/public/components/top_n/top_n.tsx b/x-pack/plugins/siem/public/common/components/top_n/top_n.tsx
similarity index 93%
rename from x-pack/plugins/siem/public/components/top_n/top_n.tsx
rename to x-pack/plugins/siem/public/common/components/top_n/top_n.tsx
index d8dc63ef92ec60..0ccb7e1e72f1f5 100644
--- a/x-pack/plugins/siem/public/components/top_n/top_n.tsx
+++ b/x-pack/plugins/siem/public/common/components/top_n/top_n.tsx
@@ -9,12 +9,12 @@ import React, { useCallback, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { ActionCreator } from 'typescript-fsa';
 
-import { EventsByDataset } from '../../pages/overview/events_by_dataset';
-import { SignalsByCategory } from '../../pages/overview/signals_by_category';
-import { Filter, IIndexPattern, Query } from '../../../../../../src/plugins/data/public';
+import { EventsByDataset } from '../../../overview/components/events_by_dataset';
+import { SignalsByCategory } from '../../../overview/components/signals_by_category';
+import { Filter, IIndexPattern, Query } from '../../../../../../../src/plugins/data/public';
 import { inputsModel } from '../../store';
 import { InputsModelId } from '../../store/inputs/constants';
-import { EventType } from '../../store/timeline/model';
+import { EventType } from '../../../timelines/store/timeline/model';
 
 import { TopNOption } from './helpers';
 import * as i18n from './translations';
diff --git a/x-pack/plugins/siem/public/components/top_n/translations.ts b/x-pack/plugins/siem/public/common/components/top_n/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/top_n/translations.ts
rename to x-pack/plugins/siem/public/common/components/top_n/translations.ts
diff --git a/x-pack/plugins/siem/public/components/truncatable_text/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/common/components/truncatable_text/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/truncatable_text/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/truncatable_text/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/truncatable_text/index.test.tsx b/x-pack/plugins/siem/public/common/components/truncatable_text/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/truncatable_text/index.test.tsx
rename to x-pack/plugins/siem/public/common/components/truncatable_text/index.test.tsx
diff --git a/x-pack/plugins/siem/public/components/truncatable_text/index.tsx b/x-pack/plugins/siem/public/common/components/truncatable_text/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/truncatable_text/index.tsx
rename to x-pack/plugins/siem/public/common/components/truncatable_text/index.tsx
diff --git a/x-pack/plugins/siem/public/components/url_state/constants.ts b/x-pack/plugins/siem/public/common/components/url_state/constants.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/url_state/constants.ts
rename to x-pack/plugins/siem/public/common/components/url_state/constants.ts
diff --git a/x-pack/plugins/siem/public/common/components/url_state/helpers.test.ts b/x-pack/plugins/siem/public/common/components/url_state/helpers.test.ts
new file mode 100644
index 00000000000000..410bd62e3a708f
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/url_state/helpers.test.ts
@@ -0,0 +1,37 @@
+/*
+ * 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 { navTabs } from '../../../app/home/home_navigations';
+import { getTitle } from './helpers';
+import { HostsType } from '../../../hosts/store/model';
+
+describe('Helpers Url_State', () => {
+  describe('getTitle', () => {
+    test('host page name', () => {
+      const result = getTitle('hosts', undefined, navTabs);
+      expect(result).toEqual('Hosts');
+    });
+    test('network page name', () => {
+      const result = getTitle('network', undefined, navTabs);
+      expect(result).toEqual('Network');
+    });
+    test('overview page name', () => {
+      const result = getTitle('overview', undefined, navTabs);
+      expect(result).toEqual('Overview');
+    });
+    test('timelines page name', () => {
+      const result = getTitle('timelines', undefined, navTabs);
+      expect(result).toEqual('Timelines');
+    });
+    test('details page name', () => {
+      const result = getTitle('hosts', HostsType.details, navTabs);
+      expect(result).toEqual(HostsType.details);
+    });
+    test('Not existing', () => {
+      const result = getTitle('IamHereButNotReally', undefined, navTabs);
+      expect(result).toEqual('');
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/common/components/url_state/helpers.ts b/x-pack/plugins/siem/public/common/components/url_state/helpers.ts
new file mode 100644
index 00000000000000..8f13e4dd0cdcf7
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/url_state/helpers.ts
@@ -0,0 +1,261 @@
+/*
+ * 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 { isEmpty } from 'lodash/fp';
+import { parse, stringify } from 'query-string';
+import { decode, encode } from 'rison-node';
+import * as H from 'history';
+
+import { Query, Filter } from '../../../../../../../src/plugins/data/public';
+import { url } from '../../../../../../../src/plugins/kibana_utils/public';
+
+import { SiemPageName } from '../../../app/types';
+import { inputsSelectors, State } from '../../store';
+import { UrlInputsModel } from '../../store/inputs/model';
+import { TimelineUrl } from '../../../timelines/store/timeline/model';
+import { timelineSelectors } from '../../../timelines/store/timeline';
+import { formatDate } from '../super_date_picker';
+import { NavTab } from '../navigation/types';
+import { CONSTANTS, UrlStateType } from './constants';
+import { ReplaceStateInLocation, UpdateUrlStateString } from './types';
+
+export const decodeRisonUrlState = <T>(value: string | undefined): T | null => {
+  try {
+    return value ? ((decode(value) as unknown) as T) : null;
+  } catch (error) {
+    if (error instanceof Error && error.message.startsWith('rison decoder error')) {
+      return null;
+    }
+    throw error;
+  }
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const encodeRisonUrlState = (state: any) => encode(state);
+
+export const getQueryStringFromLocation = (search: string) => search.substring(1);
+
+export const getParamFromQueryString = (queryString: string, key: string) => {
+  const parsedQueryString = parse(queryString, { sort: false });
+  const queryParam = parsedQueryString[key];
+
+  return Array.isArray(queryParam) ? queryParam[0] : queryParam;
+};
+
+export const replaceStateKeyInQueryString = <T>(stateKey: string, urlState: T) => (
+  queryString: string
+): string => {
+  const previousQueryValues = parse(queryString, { sort: false });
+  if (urlState == null || (typeof urlState === 'string' && urlState === '')) {
+    delete previousQueryValues[stateKey];
+
+    return stringify(url.encodeQuery(previousQueryValues), { sort: false, encode: false });
+  }
+
+  // ಠ_ಠ Code was copied from x-pack/legacy/plugins/infra/public/utils/url_state.tsx ಠ_ಠ
+  // Remove this if these utilities are promoted to kibana core
+  const encodedUrlState =
+    typeof urlState !== 'undefined' ? encodeRisonUrlState(urlState) : undefined;
+
+  return stringify(
+    url.encodeQuery({
+      ...previousQueryValues,
+      [stateKey]: encodedUrlState,
+    }),
+    { sort: false, encode: false }
+  );
+};
+
+export const replaceQueryStringInLocation = (
+  location: H.Location,
+  queryString: string
+): H.Location => {
+  if (queryString === getQueryStringFromLocation(location.search)) {
+    return location;
+  } else {
+    return {
+      ...location,
+      search: `?${queryString}`,
+    };
+  }
+};
+
+export const getUrlType = (pageName: string): UrlStateType => {
+  if (pageName === SiemPageName.overview) {
+    return 'overview';
+  } else if (pageName === SiemPageName.hosts) {
+    return 'host';
+  } else if (pageName === SiemPageName.network) {
+    return 'network';
+  } else if (pageName === SiemPageName.detections) {
+    return 'detections';
+  } else if (pageName === SiemPageName.timelines) {
+    return 'timeline';
+  } else if (pageName === SiemPageName.case) {
+    return 'case';
+  }
+  return 'overview';
+};
+
+export const getTitle = (
+  pageName: string,
+  detailName: string | undefined,
+  navTabs: Record<string, NavTab>
+): string => {
+  if (detailName != null) return detailName;
+  return navTabs[pageName] != null ? navTabs[pageName].name : '';
+};
+
+export const makeMapStateToProps = () => {
+  const getInputsSelector = inputsSelectors.inputsSelector();
+  const getGlobalQuerySelector = inputsSelectors.globalQuerySelector();
+  const getGlobalFiltersQuerySelector = inputsSelectors.globalFiltersQuerySelector();
+  const getGlobalSavedQuerySelector = inputsSelectors.globalSavedQuerySelector();
+  const getTimelines = timelineSelectors.getTimelines();
+  const mapStateToProps = (state: State) => {
+    const inputState = getInputsSelector(state);
+    const { linkTo: globalLinkTo, timerange: globalTimerange } = inputState.global;
+    const { linkTo: timelineLinkTo, timerange: timelineTimerange } = inputState.timeline;
+
+    const timeline = Object.entries(getTimelines(state)).reduce(
+      (obj, [timelineId, timelineObj]) => ({
+        id: timelineObj.savedObjectId != null ? timelineObj.savedObjectId : '',
+        isOpen: timelineObj.show,
+      }),
+      { id: '', isOpen: false }
+    );
+
+    let searchAttr: {
+      [CONSTANTS.appQuery]?: Query;
+      [CONSTANTS.filters]?: Filter[];
+      [CONSTANTS.savedQuery]?: string;
+    } = {
+      [CONSTANTS.appQuery]: getGlobalQuerySelector(state),
+      [CONSTANTS.filters]: getGlobalFiltersQuerySelector(state),
+    };
+    const savedQuery = getGlobalSavedQuerySelector(state);
+    if (savedQuery != null && savedQuery.id !== '') {
+      searchAttr = {
+        [CONSTANTS.savedQuery]: savedQuery.id,
+      };
+    }
+
+    return {
+      urlState: {
+        ...searchAttr,
+        [CONSTANTS.timerange]: {
+          global: {
+            [CONSTANTS.timerange]: globalTimerange,
+            linkTo: globalLinkTo,
+          },
+          timeline: {
+            [CONSTANTS.timerange]: timelineTimerange,
+            linkTo: timelineLinkTo,
+          },
+        },
+        [CONSTANTS.timeline]: timeline,
+      },
+    };
+  };
+
+  return mapStateToProps;
+};
+
+export const updateTimerangeUrl = (
+  timeRange: UrlInputsModel,
+  isInitializing: boolean
+): UrlInputsModel => {
+  if (timeRange.global.timerange.kind === 'relative') {
+    timeRange.global.timerange.from = formatDate(timeRange.global.timerange.fromStr);
+    timeRange.global.timerange.to = formatDate(timeRange.global.timerange.toStr, { roundUp: true });
+  }
+  if (timeRange.timeline.timerange.kind === 'relative' && isInitializing) {
+    timeRange.timeline.timerange.from = formatDate(timeRange.timeline.timerange.fromStr);
+    timeRange.timeline.timerange.to = formatDate(timeRange.timeline.timerange.toStr, {
+      roundUp: true,
+    });
+  }
+  return timeRange;
+};
+
+export const updateUrlStateString = ({
+  isInitializing,
+  history,
+  newUrlStateString,
+  pathName,
+  search,
+  updateTimerange,
+  urlKey,
+}: UpdateUrlStateString): string => {
+  if (urlKey === CONSTANTS.appQuery) {
+    const queryState = decodeRisonUrlState<Query>(newUrlStateString);
+    if (queryState != null && queryState.query === '') {
+      return replaceStateInLocation({
+        history,
+        pathName,
+        search,
+        urlStateToReplace: '',
+        urlStateKey: urlKey,
+      });
+    }
+  } else if (urlKey === CONSTANTS.timerange && updateTimerange) {
+    const queryState = decodeRisonUrlState<UrlInputsModel>(newUrlStateString);
+    if (queryState != null && queryState.global != null) {
+      return replaceStateInLocation({
+        history,
+        pathName,
+        search,
+        urlStateToReplace: updateTimerangeUrl(queryState, isInitializing),
+        urlStateKey: urlKey,
+      });
+    }
+  } else if (urlKey === CONSTANTS.filters) {
+    const queryState = decodeRisonUrlState<Filter[]>(newUrlStateString);
+    if (isEmpty(queryState)) {
+      return replaceStateInLocation({
+        history,
+        pathName,
+        search,
+        urlStateToReplace: '',
+        urlStateKey: urlKey,
+      });
+    }
+  } else if (urlKey === CONSTANTS.timeline) {
+    const queryState = decodeRisonUrlState<TimelineUrl>(newUrlStateString);
+    if (queryState != null && queryState.id === '') {
+      return replaceStateInLocation({
+        history,
+        pathName,
+        search,
+        urlStateToReplace: '',
+        urlStateKey: urlKey,
+      });
+    }
+  }
+  return search;
+};
+
+export const replaceStateInLocation = <T>({
+  history,
+  urlStateToReplace,
+  urlStateKey,
+  pathName,
+  search,
+}: ReplaceStateInLocation<T>) => {
+  const newLocation = replaceQueryStringInLocation(
+    {
+      hash: '',
+      pathname: pathName,
+      search,
+      state: '',
+    },
+    replaceStateKeyInQueryString(urlStateKey, urlStateToReplace)(getQueryStringFromLocation(search))
+  );
+  if (history) {
+    history.replace(newLocation);
+  }
+  return newLocation.search;
+};
diff --git a/x-pack/plugins/siem/public/common/components/url_state/index.test.tsx b/x-pack/plugins/siem/public/common/components/url_state/index.test.tsx
new file mode 100644
index 00000000000000..b901bc2b820cce
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/url_state/index.test.tsx
@@ -0,0 +1,221 @@
+/*
+ * 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 { mount } from 'enzyme';
+import React from 'react';
+
+import { HookWrapper } from '../../mock';
+import { SiemPageName } from '../../../app/types';
+import { RouteSpyState } from '../../utils/route/types';
+import { CONSTANTS } from './constants';
+import {
+  getMockPropsObj,
+  mockHistory,
+  mockSetFilterQuery,
+  mockSetAbsoluteRangeDatePicker,
+  mockSetRelativeRangeDatePicker,
+  testCases,
+} from './test_dependencies';
+import { UrlStateContainerPropTypes } from './types';
+import { useUrlStateHooks } from './use_url_state';
+import { wait } from '../../lib/helpers';
+
+let mockProps: UrlStateContainerPropTypes;
+
+const mockRouteSpy: RouteSpyState = {
+  pageName: SiemPageName.network,
+  detailName: undefined,
+  tabName: undefined,
+  search: '',
+  pathName: '/network',
+};
+jest.mock('../../utils/route/use_route_spy', () => ({
+  useRouteSpy: () => [mockRouteSpy],
+}));
+
+jest.mock('../super_date_picker', () => ({
+  formatDate: (date: string) => {
+    return 11223344556677;
+  },
+}));
+
+jest.mock('../../lib/kibana', () => ({
+  useKibana: () => ({
+    services: {
+      data: {
+        query: {
+          filterManager: {},
+          savedQueries: {},
+        },
+      },
+    },
+  }),
+}));
+
+describe('UrlStateContainer', () => {
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+  describe('handleInitialize', () => {
+    describe('URL state updates redux', () => {
+      describe('relative timerange actions are called with correct data on component mount', () => {
+        test.each(testCases)(
+          '%o',
+          (page, namespaceLower, namespaceUpper, examplePath, type, pageName, detailName) => {
+            mockProps = getMockPropsObj({
+              page,
+              examplePath,
+              namespaceLower,
+              pageName,
+              detailName,
+            }).relativeTimeSearch.undefinedQuery;
+            mount(<HookWrapper hookProps={mockProps} hook={args => useUrlStateHooks(args)} />);
+
+            expect(mockSetRelativeRangeDatePicker.mock.calls[1][0]).toEqual({
+              from: 11223344556677,
+              fromStr: 'now-1d/d',
+              kind: 'relative',
+              to: 11223344556677,
+              toStr: 'now-1d/d',
+              id: 'global',
+            });
+
+            expect(mockSetRelativeRangeDatePicker.mock.calls[0][0]).toEqual({
+              from: 11223344556677,
+              fromStr: 'now-15m',
+              kind: 'relative',
+              to: 11223344556677,
+              toStr: 'now',
+              id: 'timeline',
+            });
+          }
+        );
+      });
+
+      describe('absolute timerange actions are called with correct data on component mount', () => {
+        test.each(testCases)(
+          '%o',
+          (page, namespaceLower, namespaceUpper, examplePath, type, pageName, detailName) => {
+            mockProps = getMockPropsObj({ page, examplePath, namespaceLower, pageName, detailName })
+              .absoluteTimeSearch.undefinedQuery;
+            mount(<HookWrapper hookProps={mockProps} hook={args => useUrlStateHooks(args)} />);
+
+            expect(mockSetAbsoluteRangeDatePicker.mock.calls[1][0]).toEqual({
+              from: 1556736012685,
+              kind: 'absolute',
+              to: 1556822416082,
+              id: 'global',
+            });
+
+            expect(mockSetAbsoluteRangeDatePicker.mock.calls[0][0]).toEqual({
+              from: 1556736012685,
+              kind: 'absolute',
+              to: 1556822416082,
+              id: 'timeline',
+            });
+          }
+        );
+      });
+
+      describe('appQuery action is called with correct data on component mount', () => {
+        test.each(testCases.slice(0, 4))(
+          ' %o',
+          (page, namespaceLower, namespaceUpper, examplePath, type, pageName, detailName) => {
+            mockProps = getMockPropsObj({ page, examplePath, namespaceLower, pageName, detailName })
+              .relativeTimeSearch.undefinedQuery;
+            mount(<HookWrapper hookProps={mockProps} hook={args => useUrlStateHooks(args)} />);
+
+            expect(mockSetFilterQuery.mock.calls[0][0]).toEqual({
+              id: 'global',
+              language: 'kuery',
+              query: 'host.name:"siem-es"',
+            });
+          }
+        );
+      });
+    });
+
+    describe('Redux updates URL state', () => {
+      describe('appQuery url state is set from redux data on component mount', () => {
+        test.each(testCases)(
+          '%o',
+          (page, namespaceLower, namespaceUpper, examplePath, type, pageName, detailName) => {
+            mockProps = getMockPropsObj({
+              page,
+              examplePath,
+              namespaceLower,
+              pageName,
+              detailName,
+            }).noSearch.definedQuery;
+            mount(<HookWrapper hookProps={mockProps} hook={args => useUrlStateHooks(args)} />);
+
+            expect(
+              mockHistory.replace.mock.calls[mockHistory.replace.mock.calls.length - 1][0]
+            ).toEqual({
+              hash: '',
+              pathname: examplePath,
+              search: `?query=(language:kuery,query:'host.name:%22siem-es%22')&timerange=(global:(linkTo:!(timeline),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)),timeline:(linkTo:!(global),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)))`,
+              state: '',
+            });
+          }
+        );
+      });
+    });
+  });
+
+  describe('After Initialization, keep Relative Date up to date for global only on detections page', () => {
+    test.each(testCases)(
+      '%o',
+      async (page, namespaceLower, namespaceUpper, examplePath, type, pageName, detailName) => {
+        mockProps = getMockPropsObj({
+          page,
+          examplePath,
+          namespaceLower,
+          pageName,
+          detailName,
+        }).relativeTimeSearch.undefinedQuery;
+        const wrapper = mount(
+          <HookWrapper hookProps={mockProps} hook={args => useUrlStateHooks(args)} />
+        );
+
+        wrapper.setProps({
+          hookProps: getMockPropsObj({
+            page: CONSTANTS.hostsPage,
+            examplePath: '/hosts',
+            namespaceLower: 'hosts',
+            pageName: SiemPageName.hosts,
+            detailName: undefined,
+          }).relativeTimeSearch.undefinedQuery,
+        });
+        wrapper.update();
+        await wait();
+
+        if (CONSTANTS.detectionsPage === page) {
+          expect(mockSetRelativeRangeDatePicker.mock.calls[3][0]).toEqual({
+            from: 11223344556677,
+            fromStr: 'now-1d/d',
+            kind: 'relative',
+            to: 11223344556677,
+            toStr: 'now-1d/d',
+            id: 'global',
+          });
+
+          expect(mockSetRelativeRangeDatePicker.mock.calls[2][0]).toEqual({
+            from: 1558732849370,
+            fromStr: 'now-15m',
+            kind: 'relative',
+            to: 1558733749370,
+            toStr: 'now',
+            id: 'timeline',
+          });
+        } else {
+          // There is no change in url state, so that's expected we only have two actions
+          expect(mockSetRelativeRangeDatePicker.mock.calls.length).toEqual(2);
+        }
+      }
+    );
+  });
+});
diff --git a/x-pack/plugins/siem/public/common/components/url_state/index.tsx b/x-pack/plugins/siem/public/common/components/url_state/index.tsx
new file mode 100644
index 00000000000000..f90e9cf62801b7
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/url_state/index.tsx
@@ -0,0 +1,55 @@
+/*
+ * 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 { compose, Dispatch } from 'redux';
+import { connect } from 'react-redux';
+import deepEqual from 'fast-deep-equal';
+
+import { timelineActions } from '../../../timelines/store/timeline';
+import { RouteSpyState } from '../../utils/route/types';
+import { useRouteSpy } from '../../utils/route/use_route_spy';
+
+import { UrlStateContainerPropTypes, UrlStateProps } from './types';
+import { useUrlStateHooks } from './use_url_state';
+import { dispatchUpdateTimeline } from '../../../timelines/components/open_timeline/helpers';
+import { dispatchSetInitialStateFromUrl } from './initialize_redux_by_url';
+import { makeMapStateToProps } from './helpers';
+
+export const UrlStateContainer: React.FC<UrlStateContainerPropTypes> = (
+  props: UrlStateContainerPropTypes
+) => {
+  useUrlStateHooks(props);
+  return null;
+};
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  setInitialStateFromUrl: dispatchSetInitialStateFromUrl(dispatch),
+  updateTimeline: dispatchUpdateTimeline(dispatch),
+  updateTimelineIsLoading: ({ id, isLoading }: { id: string; isLoading: boolean }) =>
+    dispatch(timelineActions.updateIsLoading({ id, isLoading })),
+});
+
+export const UrlStateRedux = compose<React.ComponentClass<UrlStateProps & RouteSpyState>>(
+  connect(makeMapStateToProps, mapDispatchToProps)
+)(
+  React.memo(
+    UrlStateContainer,
+    (prevProps, nextProps) =>
+      prevProps.pathName === nextProps.pathName && deepEqual(prevProps.urlState, nextProps.urlState)
+  )
+);
+
+const UseUrlStateComponent: React.FC<UrlStateProps> = props => {
+  const [routeProps] = useRouteSpy();
+  const urlStateReduxProps: RouteSpyState & UrlStateProps = {
+    ...routeProps,
+    ...props,
+  };
+  return <UrlStateRedux {...urlStateReduxProps} />;
+};
+
+export const UseUrlState = React.memo(UseUrlStateComponent);
diff --git a/x-pack/plugins/siem/public/components/url_state/index_mocked.test.tsx b/x-pack/plugins/siem/public/common/components/url_state/index_mocked.test.tsx
similarity index 99%
rename from x-pack/plugins/siem/public/components/url_state/index_mocked.test.tsx
rename to x-pack/plugins/siem/public/common/components/url_state/index_mocked.test.tsx
index 4adc17b32e1891..122f7f6fed57ed 100644
--- a/x-pack/plugins/siem/public/components/url_state/index_mocked.test.tsx
+++ b/x-pack/plugins/siem/public/common/components/url_state/index_mocked.test.tsx
@@ -8,7 +8,7 @@ import { mount } from 'enzyme';
 import React from 'react';
 
 import { HookWrapper } from '../../mock/hook_wrapper';
-import { SiemPageName } from '../../pages/home/types';
+import { SiemPageName } from '../../../app/types';
 
 import { CONSTANTS } from './constants';
 import { getFilterQuery, getMockPropsObj, mockHistory, testCases } from './test_dependencies';
diff --git a/x-pack/plugins/siem/public/components/url_state/initialize_redux_by_url.tsx b/x-pack/plugins/siem/public/common/components/url_state/initialize_redux_by_url.tsx
similarity index 95%
rename from x-pack/plugins/siem/public/components/url_state/initialize_redux_by_url.tsx
rename to x-pack/plugins/siem/public/common/components/url_state/initialize_redux_by_url.tsx
index 54a196d1b81617..441424faa48dcb 100644
--- a/x-pack/plugins/siem/public/components/url_state/initialize_redux_by_url.tsx
+++ b/x-pack/plugins/siem/public/common/components/url_state/initialize_redux_by_url.tsx
@@ -7,7 +7,7 @@
 import { get, isEmpty } from 'lodash/fp';
 import { Dispatch } from 'redux';
 
-import { Query, Filter } from '../../../../../../src/plugins/data/public';
+import { Query, Filter } from '../../../../../../../src/plugins/data/public';
 import { inputsActions } from '../../store/actions';
 import { InputsModelId, TimeRangeKinds } from '../../store/inputs/constants';
 import {
@@ -16,12 +16,12 @@ import {
   AbsoluteTimeRange,
   RelativeTimeRange,
 } from '../../store/inputs/model';
-import { TimelineUrl } from '../../store/timeline/model';
+import { TimelineUrl } from '../../../timelines/store/timeline/model';
 import { CONSTANTS } from './constants';
 import { decodeRisonUrlState } from './helpers';
 import { normalizeTimeRange } from './normalize_time_range';
 import { DispatchSetInitialStateFromUrl, SetInitialStateFromUrl } from './types';
-import { queryTimelineById } from '../open_timeline/helpers';
+import { queryTimelineById } from '../../../timelines/components/open_timeline/helpers';
 
 export const dispatchSetInitialStateFromUrl = (
   dispatch: Dispatch
diff --git a/x-pack/plugins/siem/public/components/url_state/normalize_time_range.test.ts b/x-pack/plugins/siem/public/common/components/url_state/normalize_time_range.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/url_state/normalize_time_range.test.ts
rename to x-pack/plugins/siem/public/common/components/url_state/normalize_time_range.test.ts
diff --git a/x-pack/plugins/siem/public/components/url_state/normalize_time_range.ts b/x-pack/plugins/siem/public/common/components/url_state/normalize_time_range.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/url_state/normalize_time_range.ts
rename to x-pack/plugins/siem/public/common/components/url_state/normalize_time_range.ts
diff --git a/x-pack/plugins/siem/public/components/url_state/test_dependencies.ts b/x-pack/plugins/siem/public/common/components/url_state/test_dependencies.ts
similarity index 95%
rename from x-pack/plugins/siem/public/components/url_state/test_dependencies.ts
rename to x-pack/plugins/siem/public/common/components/url_state/test_dependencies.ts
index 974bee53bc2ba0..de6a00bfadb80c 100644
--- a/x-pack/plugins/siem/public/components/url_state/test_dependencies.ts
+++ b/x-pack/plugins/siem/public/common/components/url_state/test_dependencies.ts
@@ -5,17 +5,18 @@
  */
 
 import { ActionCreator } from 'typescript-fsa';
-import { DispatchUpdateTimeline } from '../open_timeline/types';
-import { navTabs } from '../../pages/home/home_navigations';
-import { SiemPageName } from '../../pages/home/types';
-import { hostsModel, networkModel } from '../../store';
+import { DispatchUpdateTimeline } from '../../../timelines/components/open_timeline/types';
+import { navTabs } from '../../../app/home/home_navigations';
+import { SiemPageName } from '../../../app/types';
 import { inputsActions } from '../../store/actions';
-import { HostsTableType } from '../../store/hosts/model';
 
 import { CONSTANTS } from './constants';
 import { dispatchSetInitialStateFromUrl } from './initialize_redux_by_url';
 import { UrlStateContainerPropTypes, LocationTypes } from './types';
-import { Query } from '../../../../../../src/plugins/data/public';
+import { Query } from '../../../../../../../src/plugins/data/public';
+import { networkModel } from '../../../network/store';
+import { hostsModel } from '../../../hosts/store';
+import { HostsTableType } from '../../../hosts/store/model';
 
 type Action = 'PUSH' | 'POP' | 'REPLACE';
 const pop: Action = 'POP';
diff --git a/x-pack/plugins/siem/public/common/components/url_state/types.ts b/x-pack/plugins/siem/public/common/components/url_state/types.ts
new file mode 100644
index 00000000000000..56578d84e12e47
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/components/url_state/types.ts
@@ -0,0 +1,177 @@
+/*
+ * 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 ApolloClient from 'apollo-client';
+import * as H from 'history';
+import { ActionCreator } from 'typescript-fsa';
+import {
+  IIndexPattern,
+  Query,
+  Filter,
+  FilterManager,
+  SavedQueryService,
+} from 'src/plugins/data/public';
+
+import { UrlInputsModel } from '../../store/inputs/model';
+import { TimelineUrl } from '../../../timelines/store/timeline/model';
+import { RouteSpyState } from '../../utils/route/types';
+import { DispatchUpdateTimeline } from '../../../timelines/components/open_timeline/types';
+import { NavTab } from '../navigation/types';
+
+import { CONSTANTS, UrlStateType } from './constants';
+
+export const ALL_URL_STATE_KEYS: KeyUrlState[] = [
+  CONSTANTS.appQuery,
+  CONSTANTS.filters,
+  CONSTANTS.savedQuery,
+  CONSTANTS.timerange,
+  CONSTANTS.timeline,
+];
+
+export const URL_STATE_KEYS: Record<UrlStateType, KeyUrlState[]> = {
+  detections: [
+    CONSTANTS.appQuery,
+    CONSTANTS.filters,
+    CONSTANTS.savedQuery,
+    CONSTANTS.timerange,
+    CONSTANTS.timeline,
+  ],
+  host: [
+    CONSTANTS.appQuery,
+    CONSTANTS.filters,
+    CONSTANTS.savedQuery,
+    CONSTANTS.timerange,
+    CONSTANTS.timeline,
+  ],
+  network: [
+    CONSTANTS.appQuery,
+    CONSTANTS.filters,
+    CONSTANTS.savedQuery,
+    CONSTANTS.timerange,
+    CONSTANTS.timeline,
+  ],
+  overview: [
+    CONSTANTS.appQuery,
+    CONSTANTS.filters,
+    CONSTANTS.savedQuery,
+    CONSTANTS.timerange,
+    CONSTANTS.timeline,
+  ],
+  timeline: [
+    CONSTANTS.appQuery,
+    CONSTANTS.filters,
+    CONSTANTS.savedQuery,
+    CONSTANTS.timerange,
+    CONSTANTS.timeline,
+  ],
+  case: [
+    CONSTANTS.appQuery,
+    CONSTANTS.filters,
+    CONSTANTS.savedQuery,
+    CONSTANTS.timerange,
+    CONSTANTS.timeline,
+  ],
+};
+
+export type LocationTypes =
+  | CONSTANTS.caseDetails
+  | CONSTANTS.casePage
+  | CONSTANTS.detectionsPage
+  | CONSTANTS.hostsDetails
+  | CONSTANTS.hostsPage
+  | CONSTANTS.networkDetails
+  | CONSTANTS.networkPage
+  | CONSTANTS.overviewPage
+  | CONSTANTS.timelinePage
+  | CONSTANTS.unknown;
+
+export interface UrlState {
+  [CONSTANTS.appQuery]?: Query;
+  [CONSTANTS.filters]?: Filter[];
+  [CONSTANTS.savedQuery]?: string;
+  [CONSTANTS.timerange]: UrlInputsModel;
+  [CONSTANTS.timeline]: TimelineUrl;
+}
+export type KeyUrlState = keyof UrlState;
+
+export interface UrlStateProps {
+  navTabs: Record<string, NavTab>;
+  indexPattern?: IIndexPattern;
+  mapToUrlState?: (value: string) => UrlState;
+  onChange?: (urlState: UrlState, previousUrlState: UrlState) => void;
+  onInitialize?: (urlState: UrlState) => void;
+}
+
+export interface UrlStateStateToPropsType {
+  urlState: UrlState;
+}
+
+export interface UpdateTimelineIsLoading {
+  id: string;
+  isLoading: boolean;
+}
+
+export interface UrlStateDispatchToPropsType {
+  setInitialStateFromUrl: DispatchSetInitialStateFromUrl;
+  updateTimeline: DispatchUpdateTimeline;
+  updateTimelineIsLoading: ActionCreator<UpdateTimelineIsLoading>;
+}
+
+export type UrlStateContainerPropTypes = RouteSpyState &
+  UrlStateStateToPropsType &
+  UrlStateDispatchToPropsType &
+  UrlStateProps;
+
+export interface PreviousLocationUrlState {
+  pathName: string | undefined;
+  pageName: string | undefined;
+  urlState: UrlState;
+}
+
+export interface UrlStateToRedux {
+  urlKey: KeyUrlState;
+  newUrlStateString: string;
+}
+
+export interface SetInitialStateFromUrl<TCache> {
+  apolloClient: ApolloClient<TCache> | ApolloClient<{}> | undefined;
+  detailName: string | undefined;
+  filterManager: FilterManager;
+  indexPattern: IIndexPattern | undefined;
+  pageName: string;
+  savedQueries: SavedQueryService;
+  updateTimeline: DispatchUpdateTimeline;
+  updateTimelineIsLoading: ActionCreator<UpdateTimelineIsLoading>;
+  urlStateToUpdate: UrlStateToRedux[];
+}
+
+export type DispatchSetInitialStateFromUrl = <TCache>({
+  apolloClient,
+  detailName,
+  indexPattern,
+  pageName,
+  updateTimeline,
+  updateTimelineIsLoading,
+  urlStateToUpdate,
+}: SetInitialStateFromUrl<TCache>) => () => void;
+
+export interface ReplaceStateInLocation<T> {
+  history?: H.History;
+  urlStateToReplace: T;
+  urlStateKey: string;
+  pathName: string;
+  search: string;
+}
+
+export interface UpdateUrlStateString {
+  isInitializing: boolean;
+  history?: H.History;
+  newUrlStateString: string;
+  pathName: string;
+  search: string;
+  updateTimerange: boolean;
+  urlKey: KeyUrlState;
+}
diff --git a/x-pack/plugins/siem/public/components/url_state/use_url_state.tsx b/x-pack/plugins/siem/public/common/components/url_state/use_url_state.tsx
similarity index 99%
rename from x-pack/plugins/siem/public/components/url_state/use_url_state.tsx
rename to x-pack/plugins/siem/public/common/components/url_state/use_url_state.tsx
index a7704e0e86970a..b3436a7da82970 100644
--- a/x-pack/plugins/siem/public/components/url_state/use_url_state.tsx
+++ b/x-pack/plugins/siem/public/common/components/url_state/use_url_state.tsx
@@ -27,7 +27,7 @@ import {
   ALL_URL_STATE_KEYS,
   UrlStateToRedux,
 } from './types';
-import { SiemPageName } from '../../pages/home/types';
+import { SiemPageName } from '../../../app/types';
 
 function usePrevious(value: PreviousLocationUrlState) {
   const ref = useRef<PreviousLocationUrlState>(value);
diff --git a/x-pack/plugins/siem/public/components/utility_bar/__snapshots__/utility_bar.test.tsx.snap b/x-pack/plugins/siem/public/common/components/utility_bar/__snapshots__/utility_bar.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/utility_bar/__snapshots__/utility_bar.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/utility_bar/__snapshots__/utility_bar.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/utility_bar/__snapshots__/utility_bar_action.test.tsx.snap b/x-pack/plugins/siem/public/common/components/utility_bar/__snapshots__/utility_bar_action.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/utility_bar/__snapshots__/utility_bar_action.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/utility_bar/__snapshots__/utility_bar_action.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/utility_bar/__snapshots__/utility_bar_group.test.tsx.snap b/x-pack/plugins/siem/public/common/components/utility_bar/__snapshots__/utility_bar_group.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/utility_bar/__snapshots__/utility_bar_group.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/utility_bar/__snapshots__/utility_bar_group.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/utility_bar/__snapshots__/utility_bar_section.test.tsx.snap b/x-pack/plugins/siem/public/common/components/utility_bar/__snapshots__/utility_bar_section.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/utility_bar/__snapshots__/utility_bar_section.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/utility_bar/__snapshots__/utility_bar_section.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/utility_bar/__snapshots__/utility_bar_text.test.tsx.snap b/x-pack/plugins/siem/public/common/components/utility_bar/__snapshots__/utility_bar_text.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/utility_bar/__snapshots__/utility_bar_text.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/utility_bar/__snapshots__/utility_bar_text.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/utility_bar/index.ts b/x-pack/plugins/siem/public/common/components/utility_bar/index.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/utility_bar/index.ts
rename to x-pack/plugins/siem/public/common/components/utility_bar/index.ts
diff --git a/x-pack/plugins/siem/public/components/utility_bar/styles.tsx b/x-pack/plugins/siem/public/common/components/utility_bar/styles.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/utility_bar/styles.tsx
rename to x-pack/plugins/siem/public/common/components/utility_bar/styles.tsx
diff --git a/x-pack/plugins/siem/public/components/utility_bar/utility_bar.test.tsx b/x-pack/plugins/siem/public/common/components/utility_bar/utility_bar.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/utility_bar/utility_bar.test.tsx
rename to x-pack/plugins/siem/public/common/components/utility_bar/utility_bar.test.tsx
diff --git a/x-pack/plugins/siem/public/components/utility_bar/utility_bar.tsx b/x-pack/plugins/siem/public/common/components/utility_bar/utility_bar.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/utility_bar/utility_bar.tsx
rename to x-pack/plugins/siem/public/common/components/utility_bar/utility_bar.tsx
diff --git a/x-pack/plugins/siem/public/components/utility_bar/utility_bar_action.test.tsx b/x-pack/plugins/siem/public/common/components/utility_bar/utility_bar_action.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/utility_bar/utility_bar_action.test.tsx
rename to x-pack/plugins/siem/public/common/components/utility_bar/utility_bar_action.test.tsx
diff --git a/x-pack/plugins/siem/public/components/utility_bar/utility_bar_action.tsx b/x-pack/plugins/siem/public/common/components/utility_bar/utility_bar_action.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/utility_bar/utility_bar_action.tsx
rename to x-pack/plugins/siem/public/common/components/utility_bar/utility_bar_action.tsx
diff --git a/x-pack/plugins/siem/public/components/utility_bar/utility_bar_group.test.tsx b/x-pack/plugins/siem/public/common/components/utility_bar/utility_bar_group.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/utility_bar/utility_bar_group.test.tsx
rename to x-pack/plugins/siem/public/common/components/utility_bar/utility_bar_group.test.tsx
diff --git a/x-pack/plugins/siem/public/components/utility_bar/utility_bar_group.tsx b/x-pack/plugins/siem/public/common/components/utility_bar/utility_bar_group.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/utility_bar/utility_bar_group.tsx
rename to x-pack/plugins/siem/public/common/components/utility_bar/utility_bar_group.tsx
diff --git a/x-pack/plugins/siem/public/components/utility_bar/utility_bar_section.test.tsx b/x-pack/plugins/siem/public/common/components/utility_bar/utility_bar_section.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/utility_bar/utility_bar_section.test.tsx
rename to x-pack/plugins/siem/public/common/components/utility_bar/utility_bar_section.test.tsx
diff --git a/x-pack/plugins/siem/public/components/utility_bar/utility_bar_section.tsx b/x-pack/plugins/siem/public/common/components/utility_bar/utility_bar_section.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/utility_bar/utility_bar_section.tsx
rename to x-pack/plugins/siem/public/common/components/utility_bar/utility_bar_section.tsx
diff --git a/x-pack/plugins/siem/public/components/utility_bar/utility_bar_text.test.tsx b/x-pack/plugins/siem/public/common/components/utility_bar/utility_bar_text.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/utility_bar/utility_bar_text.test.tsx
rename to x-pack/plugins/siem/public/common/components/utility_bar/utility_bar_text.test.tsx
diff --git a/x-pack/plugins/siem/public/components/utility_bar/utility_bar_text.tsx b/x-pack/plugins/siem/public/common/components/utility_bar/utility_bar_text.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/utility_bar/utility_bar_text.tsx
rename to x-pack/plugins/siem/public/common/components/utility_bar/utility_bar_text.tsx
diff --git a/x-pack/plugins/siem/public/components/utils.ts b/x-pack/plugins/siem/public/common/components/utils.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/utils.ts
rename to x-pack/plugins/siem/public/common/components/utils.ts
diff --git a/x-pack/plugins/siem/public/components/with_hover_actions/index.tsx b/x-pack/plugins/siem/public/common/components/with_hover_actions/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/with_hover_actions/index.tsx
rename to x-pack/plugins/siem/public/common/components/with_hover_actions/index.tsx
diff --git a/x-pack/plugins/siem/public/components/wrapper_page/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/common/components/wrapper_page/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/wrapper_page/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/common/components/wrapper_page/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/wrapper_page/index.test.tsx b/x-pack/plugins/siem/public/common/components/wrapper_page/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/wrapper_page/index.test.tsx
rename to x-pack/plugins/siem/public/common/components/wrapper_page/index.test.tsx
diff --git a/x-pack/plugins/siem/public/components/wrapper_page/index.tsx b/x-pack/plugins/siem/public/common/components/wrapper_page/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/wrapper_page/index.tsx
rename to x-pack/plugins/siem/public/common/components/wrapper_page/index.tsx
diff --git a/x-pack/plugins/siem/public/common/containers/anomalies/anomalies_query_tab_body/histogram_configs.ts b/x-pack/plugins/siem/public/common/containers/anomalies/anomalies_query_tab_body/histogram_configs.ts
new file mode 100644
index 00000000000000..c3d470df11be77
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/containers/anomalies/anomalies_query_tab_body/histogram_configs.ts
@@ -0,0 +1,31 @@
+/*
+ * 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 * as i18n from './translations';
+import {
+  MatrixHistogramOption,
+  MatrixHisrogramConfigs,
+} from '../../../components/matrix_histogram/types';
+import { HistogramType } from '../../../../graphql/types';
+
+export const anomaliesStackByOptions: MatrixHistogramOption[] = [
+  {
+    text: i18n.ANOMALIES_STACK_BY_JOB_ID,
+    value: 'job_id',
+  },
+];
+
+const DEFAULT_STACK_BY = i18n.ANOMALIES_STACK_BY_JOB_ID;
+
+export const histogramConfigs: MatrixHisrogramConfigs = {
+  defaultStackByOption:
+    anomaliesStackByOptions.find(o => o.text === DEFAULT_STACK_BY) ?? anomaliesStackByOptions[0],
+  errorMessage: i18n.ERROR_FETCHING_ANOMALIES_DATA,
+  hideHistogramIfEmpty: true,
+  histogramType: HistogramType.anomalies,
+  stackByOptions: anomaliesStackByOptions,
+  subtitle: undefined,
+  title: i18n.ANOMALIES_TITLE,
+};
diff --git a/x-pack/plugins/siem/public/common/containers/anomalies/anomalies_query_tab_body/index.tsx b/x-pack/plugins/siem/public/common/containers/anomalies/anomalies_query_tab_body/index.tsx
new file mode 100644
index 00000000000000..a5574bd2a57c76
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/containers/anomalies/anomalies_query_tab_body/index.tsx
@@ -0,0 +1,77 @@
+/*
+ * 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, { useEffect } from 'react';
+
+import { DEFAULT_ANOMALY_SCORE } from '../../../../../common/constants';
+import { AnomaliesQueryTabBodyProps } from './types';
+import { getAnomaliesFilterQuery } from './utils';
+import { useSiemJobs } from '../../../components/ml_popover/hooks/use_siem_jobs';
+import { useUiSetting$ } from '../../../lib/kibana';
+import { MatrixHistogramContainer } from '../../../components/matrix_histogram';
+import { histogramConfigs } from './histogram_configs';
+const ID = 'anomaliesOverTimeQuery';
+
+export const AnomaliesQueryTabBody = ({
+  deleteQuery,
+  endDate,
+  setQuery,
+  skip,
+  startDate,
+  type,
+  narrowDateRange,
+  filterQuery,
+  anomaliesFilterQuery,
+  AnomaliesTableComponent,
+  flowTarget,
+  ip,
+}: AnomaliesQueryTabBodyProps) => {
+  useEffect(() => {
+    return () => {
+      if (deleteQuery) {
+        deleteQuery({ id: ID });
+      }
+    };
+  }, []);
+
+  const [, siemJobs] = useSiemJobs(true);
+  const [anomalyScore] = useUiSetting$<number>(DEFAULT_ANOMALY_SCORE);
+
+  const mergedFilterQuery = getAnomaliesFilterQuery(
+    filterQuery,
+    anomaliesFilterQuery,
+    siemJobs,
+    anomalyScore,
+    flowTarget,
+    ip
+  );
+
+  return (
+    <>
+      <MatrixHistogramContainer
+        endDate={endDate}
+        filterQuery={mergedFilterQuery}
+        id={ID}
+        setQuery={setQuery}
+        sourceId="default"
+        startDate={startDate}
+        type={type}
+        {...histogramConfigs}
+      />
+      <AnomaliesTableComponent
+        startDate={startDate}
+        endDate={endDate}
+        skip={skip}
+        type={type as never}
+        narrowDateRange={narrowDateRange}
+        flowTarget={flowTarget}
+        ip={ip}
+      />
+    </>
+  );
+};
+
+AnomaliesQueryTabBody.displayName = 'AnomaliesQueryTabBody';
diff --git a/x-pack/plugins/siem/public/containers/anomalies/anomalies_query_tab_body/translations.ts b/x-pack/plugins/siem/public/common/containers/anomalies/anomalies_query_tab_body/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/anomalies/anomalies_query_tab_body/translations.ts
rename to x-pack/plugins/siem/public/common/containers/anomalies/anomalies_query_tab_body/translations.ts
diff --git a/x-pack/plugins/siem/public/common/containers/anomalies/anomalies_query_tab_body/types.ts b/x-pack/plugins/siem/public/common/containers/anomalies/anomalies_query_tab_body/types.ts
new file mode 100644
index 00000000000000..ecf4c3590a42c2
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/containers/anomalies/anomalies_query_tab_body/types.ts
@@ -0,0 +1,35 @@
+/*
+ * 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 { ESTermQuery } from '../../../../../common/typed_json';
+import { NarrowDateRange } from '../../../components/ml/types';
+import { UpdateDateRange } from '../../../components/charts/common';
+import { SetQuery } from '../../../../hosts/pages/navigation/types';
+import { FlowTarget } from '../../../../graphql/types';
+import { HostsType } from '../../../../hosts/store/model';
+import { NetworkType } from '../../../../network/store//model';
+import { AnomaliesHostTable } from '../../../components/ml/tables/anomalies_host_table';
+import { AnomaliesNetworkTable } from '../../../components/ml/tables/anomalies_network_table';
+
+interface QueryTabBodyProps {
+  type: HostsType | NetworkType;
+  filterQuery?: string | ESTermQuery;
+}
+
+export type AnomaliesQueryTabBodyProps = QueryTabBodyProps & {
+  anomaliesFilterQuery?: object;
+  AnomaliesTableComponent: typeof AnomaliesHostTable | typeof AnomaliesNetworkTable;
+  deleteQuery?: ({ id }: { id: string }) => void;
+  endDate: number;
+  flowTarget?: FlowTarget;
+  narrowDateRange: NarrowDateRange;
+  setQuery: SetQuery;
+  startDate: number;
+  skip: boolean;
+  updateDateRange?: UpdateDateRange;
+  hideHistogramIfEmpty?: boolean;
+  ip?: string;
+};
diff --git a/x-pack/plugins/siem/public/common/containers/anomalies/anomalies_query_tab_body/utils.ts b/x-pack/plugins/siem/public/common/containers/anomalies/anomalies_query_tab_body/utils.ts
new file mode 100644
index 00000000000000..e815db68ebcdd0
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/containers/anomalies/anomalies_query_tab_body/utils.ts
@@ -0,0 +1,69 @@
+/*
+ * 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 deepmerge from 'deepmerge';
+
+import { ESTermQuery } from '../../../../../common/typed_json';
+import { createFilter } from '../../helpers';
+import { SiemJob } from '../../../components/ml_popover/types';
+import { FlowTarget } from '../../../../graphql/types';
+
+export const getAnomaliesFilterQuery = (
+  filterQuery: string | ESTermQuery | undefined,
+  anomaliesFilterQuery: object = {},
+  siemJobs: SiemJob[] = [],
+  anomalyScore: number,
+  flowTarget?: FlowTarget,
+  ip?: string
+): string => {
+  const siemJobIds = siemJobs
+    .filter(job => job.isInstalled)
+    .map(job => job.id)
+    .map(jobId => ({
+      match_phrase: {
+        job_id: jobId,
+      },
+    }));
+
+  const filterQueryString = createFilter(filterQuery);
+  const filterQueryObject = filterQueryString ? JSON.parse(filterQueryString) : {};
+  const mergedFilterQuery = deepmerge.all([
+    filterQueryObject,
+    anomaliesFilterQuery,
+    {
+      bool: {
+        filter: [
+          {
+            bool: {
+              should: siemJobIds,
+              minimum_should_match: 1,
+            },
+          },
+          {
+            match_phrase: {
+              result_type: 'record',
+            },
+          },
+          flowTarget &&
+            ip && {
+              match_phrase: {
+                [`${flowTarget}.ip`]: ip,
+              },
+            },
+          {
+            range: {
+              record_score: {
+                gte: anomalyScore,
+              },
+            },
+          },
+        ],
+      },
+    },
+  ]);
+
+  return JSON.stringify(mergedFilterQuery);
+};
diff --git a/x-pack/plugins/siem/public/containers/errors/index.test.tsx b/x-pack/plugins/siem/public/common/containers/errors/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/containers/errors/index.test.tsx
rename to x-pack/plugins/siem/public/common/containers/errors/index.test.tsx
diff --git a/x-pack/plugins/siem/public/containers/errors/index.tsx b/x-pack/plugins/siem/public/common/containers/errors/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/containers/errors/index.tsx
rename to x-pack/plugins/siem/public/common/containers/errors/index.tsx
diff --git a/x-pack/plugins/siem/public/containers/errors/translations.ts b/x-pack/plugins/siem/public/common/containers/errors/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/errors/translations.ts
rename to x-pack/plugins/siem/public/common/containers/errors/translations.ts
diff --git a/x-pack/plugins/siem/public/common/containers/events/last_event_time/index.ts b/x-pack/plugins/siem/public/common/containers/events/last_event_time/index.ts
new file mode 100644
index 00000000000000..17b2cb746e92b3
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/containers/events/last_event_time/index.ts
@@ -0,0 +1,90 @@
+/*
+ * 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 { get } from 'lodash/fp';
+import React, { useEffect, useState } from 'react';
+
+import { DEFAULT_INDEX_KEY } from '../../../../../common/constants';
+import {
+  GetLastEventTimeQuery,
+  LastEventIndexKey,
+  LastTimeDetails,
+} from '../../../../graphql/types';
+import { inputsModel } from '../../../store';
+import { QueryTemplateProps } from '../../query_template';
+import { useUiSetting$ } from '../../../lib/kibana';
+
+import { LastEventTimeGqlQuery } from './last_event_time.gql_query';
+import { useApolloClient } from '../../../utils/apollo_context';
+
+export interface LastEventTimeArgs {
+  id: string;
+  errorMessage: string;
+  lastSeen: Date;
+  loading: boolean;
+  refetch: inputsModel.Refetch;
+}
+
+export interface OwnProps extends QueryTemplateProps {
+  children: (args: LastEventTimeArgs) => React.ReactNode;
+  indexKey: LastEventIndexKey;
+}
+
+export function useLastEventTimeQuery<TCache = object>(
+  indexKey: LastEventIndexKey,
+  details: LastTimeDetails,
+  sourceId: string
+) {
+  const [loading, updateLoading] = useState(false);
+  const [lastSeen, updateLastSeen] = useState<number | null>(null);
+  const [errorMessage, updateErrorMessage] = useState<string | null>(null);
+  const [currentIndexKey, updateCurrentIndexKey] = useState<LastEventIndexKey | null>(null);
+  const [defaultIndex] = useUiSetting$<string[]>(DEFAULT_INDEX_KEY);
+  const apolloClient = useApolloClient();
+  async function fetchLastEventTime(signal: AbortSignal) {
+    updateLoading(true);
+    if (apolloClient) {
+      apolloClient
+        .query<GetLastEventTimeQuery.Query, GetLastEventTimeQuery.Variables>({
+          query: LastEventTimeGqlQuery,
+          fetchPolicy: 'cache-first',
+          variables: {
+            sourceId,
+            indexKey,
+            details,
+            defaultIndex,
+          },
+          context: {
+            fetchOptions: {
+              signal,
+            },
+          },
+        })
+        .then(
+          result => {
+            updateLoading(false);
+            updateLastSeen(get('data.source.LastEventTime.lastSeen', result));
+            updateErrorMessage(null);
+            updateCurrentIndexKey(currentIndexKey);
+          },
+          error => {
+            updateLoading(false);
+            updateLastSeen(null);
+            updateErrorMessage(error.message);
+          }
+        );
+    }
+  }
+
+  useEffect(() => {
+    const abortCtrl = new AbortController();
+    const signal = abortCtrl.signal;
+    fetchLastEventTime(signal);
+    return () => abortCtrl.abort();
+  }, [apolloClient, indexKey, details.hostName, details.ip]);
+
+  return { lastSeen, loading, errorMessage };
+}
diff --git a/x-pack/plugins/siem/public/containers/events/last_event_time/last_event_time.gql_query.ts b/x-pack/plugins/siem/public/common/containers/events/last_event_time/last_event_time.gql_query.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/events/last_event_time/last_event_time.gql_query.ts
rename to x-pack/plugins/siem/public/common/containers/events/last_event_time/last_event_time.gql_query.ts
diff --git a/x-pack/plugins/siem/public/common/containers/events/last_event_time/mock.ts b/x-pack/plugins/siem/public/common/containers/events/last_event_time/mock.ts
new file mode 100644
index 00000000000000..938473f92782a7
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/containers/events/last_event_time/mock.ts
@@ -0,0 +1,61 @@
+/*
+ * 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 { DEFAULT_INDEX_PATTERN } from '../../../../../common/constants';
+import { GetLastEventTimeQuery, LastEventIndexKey } from '../../../../graphql/types';
+
+import { LastEventTimeGqlQuery } from './last_event_time.gql_query';
+
+interface MockLastEventTimeQuery {
+  request: {
+    query: GetLastEventTimeQuery.Query;
+    variables: GetLastEventTimeQuery.Variables;
+  };
+  result: {
+    data?: {
+      source: {
+        id: string;
+        LastEventTime: {
+          lastSeen: string | null;
+          errorMessage: string | null;
+        };
+      };
+    };
+    errors?: [{ message: string }];
+  };
+}
+
+const getTimeTwelveMinutesAgo = () => {
+  const d = new Date();
+  const ts = d.getTime();
+  const twelveMinutes = ts - 12 * 60 * 1000;
+  return new Date(twelveMinutes).toISOString();
+};
+
+export const mockLastEventTimeQuery: MockLastEventTimeQuery[] = [
+  {
+    request: {
+      query: LastEventTimeGqlQuery,
+      variables: {
+        sourceId: 'default',
+        indexKey: LastEventIndexKey.hosts,
+        details: {},
+        defaultIndex: DEFAULT_INDEX_PATTERN,
+      },
+    },
+    result: {
+      data: {
+        source: {
+          id: 'default',
+          LastEventTime: {
+            lastSeen: getTimeTwelveMinutesAgo(),
+            errorMessage: null,
+          },
+        },
+      },
+    },
+  },
+];
diff --git a/x-pack/plugins/siem/public/containers/global_time/index.tsx b/x-pack/plugins/siem/public/common/containers/global_time/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/containers/global_time/index.tsx
rename to x-pack/plugins/siem/public/common/containers/global_time/index.tsx
diff --git a/x-pack/plugins/siem/public/common/containers/helpers.test.ts b/x-pack/plugins/siem/public/common/containers/helpers.test.ts
new file mode 100644
index 00000000000000..360ba28a746b07
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/containers/helpers.test.ts
@@ -0,0 +1,29 @@
+/*
+ * 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 { ESQuery } from '../../../common/typed_json';
+
+import { createFilter } from './helpers';
+
+describe('Helpers', () => {
+  describe('#createFilter', () => {
+    test('if it is a string it returns untouched', () => {
+      const filter = createFilter('even invalid strings return the same');
+      expect(filter).toBe('even invalid strings return the same');
+    });
+
+    test('if it is an ESQuery object it will be returned as a string', () => {
+      const query: ESQuery = { term: { 'host.id': 'host-value' } };
+      const filter = createFilter(query);
+      expect(filter).toBe(JSON.stringify(query));
+    });
+
+    test('if it is undefined, then undefined is returned', () => {
+      const filter = createFilter(undefined);
+      expect(filter).toBe(undefined);
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/common/containers/helpers.ts b/x-pack/plugins/siem/public/common/containers/helpers.ts
new file mode 100644
index 00000000000000..39fd1987218fa2
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/containers/helpers.ts
@@ -0,0 +1,15 @@
+/*
+ * 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 { FetchPolicy } from 'apollo-client';
+import { isString } from 'lodash/fp';
+
+import { ESQuery } from '../../../common/typed_json';
+
+export const createFilter = (filterQuery: ESQuery | string | undefined) =>
+  isString(filterQuery) ? filterQuery : JSON.stringify(filterQuery);
+
+export const getDefaultFetchPolicy = (): FetchPolicy => 'cache-and-network';
diff --git a/x-pack/plugins/siem/public/common/containers/kuery_autocompletion/index.tsx b/x-pack/plugins/siem/public/common/containers/kuery_autocompletion/index.tsx
new file mode 100644
index 00000000000000..af4eb1ff7a5e1f
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/containers/kuery_autocompletion/index.tsx
@@ -0,0 +1,84 @@
+/*
+ * 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, { useState } from 'react';
+import { QuerySuggestion, IIndexPattern } from '../../../../../../../src/plugins/data/public';
+import { useKibana } from '../../lib/kibana';
+
+type RendererResult = React.ReactElement<JSX.Element> | null;
+type RendererFunction<RenderArgs, Result = RendererResult> = (args: RenderArgs) => Result;
+
+interface KueryAutocompletionLifecycleProps {
+  children: RendererFunction<{
+    isLoadingSuggestions: boolean;
+    loadSuggestions: (expression: string, cursorPosition: number, maxSuggestions?: number) => void;
+    suggestions: QuerySuggestion[];
+  }>;
+  indexPattern: IIndexPattern;
+}
+
+interface KueryAutocompletionCurrentRequest {
+  expression: string;
+  cursorPosition: number;
+}
+
+export const KueryAutocompletion = React.memo<KueryAutocompletionLifecycleProps>(
+  ({ children, indexPattern }) => {
+    const [currentRequest, setCurrentRequest] = useState<KueryAutocompletionCurrentRequest | null>(
+      null
+    );
+    const [suggestions, setSuggestions] = useState<QuerySuggestion[]>([]);
+    const kibana = useKibana();
+    const loadSuggestions = async (
+      expression: string,
+      cursorPosition: number,
+      maxSuggestions?: number
+    ) => {
+      const language = 'kuery';
+
+      if (!kibana.services.data.autocomplete.hasQuerySuggestions(language)) {
+        return;
+      }
+
+      const futureRequest = {
+        expression,
+        cursorPosition,
+      };
+      setCurrentRequest({
+        expression,
+        cursorPosition,
+      });
+      setSuggestions([]);
+
+      if (
+        futureRequest &&
+        futureRequest.expression !== (currentRequest && currentRequest.expression) &&
+        futureRequest.cursorPosition !== (currentRequest && currentRequest.cursorPosition)
+      ) {
+        const newSuggestions =
+          (await kibana.services.data.autocomplete.getQuerySuggestions({
+            language: 'kuery',
+            indexPatterns: [indexPattern],
+            boolFilter: [],
+            query: expression,
+            selectionStart: cursorPosition,
+            selectionEnd: cursorPosition,
+          })) || [];
+
+        setCurrentRequest(null);
+        setSuggestions(maxSuggestions ? newSuggestions.slice(0, maxSuggestions) : newSuggestions);
+      }
+    };
+
+    return children({
+      isLoadingSuggestions: currentRequest !== null,
+      loadSuggestions,
+      suggestions,
+    });
+  }
+);
+
+KueryAutocompletion.displayName = 'KueryAutocompletion';
diff --git a/x-pack/plugins/siem/public/containers/matrix_histogram/index.gql_query.ts b/x-pack/plugins/siem/public/common/containers/matrix_histogram/index.gql_query.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/matrix_histogram/index.gql_query.ts
rename to x-pack/plugins/siem/public/common/containers/matrix_histogram/index.gql_query.ts
diff --git a/x-pack/plugins/siem/public/common/containers/matrix_histogram/index.test.tsx b/x-pack/plugins/siem/public/common/containers/matrix_histogram/index.test.tsx
new file mode 100644
index 00000000000000..cb988d7ebf1901
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/containers/matrix_histogram/index.test.tsx
@@ -0,0 +1,157 @@
+/*
+ * 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 { useQuery } from '.';
+import { mount } from 'enzyme';
+import React from 'react';
+import { useApolloClient } from '../../utils/apollo_context';
+import { errorToToaster } from '../../components/toasters';
+import { MatrixOverTimeHistogramData, HistogramType } from '../../../graphql/types';
+import { InspectQuery, Refetch } from '../../store/inputs/model';
+
+const mockQuery = jest.fn().mockResolvedValue({
+  data: {
+    source: {
+      MatrixHistogram: {
+        matrixHistogramData: [{}],
+        totalCount: 1,
+        inspect: false,
+      },
+    },
+  },
+});
+
+const mockRejectQuery = jest.fn().mockRejectedValue(new Error());
+jest.mock('../../utils/apollo_context', () => ({
+  useApolloClient: jest.fn(),
+}));
+
+jest.mock('../../lib/kibana', () => {
+  return {
+    useUiSetting$: jest.fn().mockReturnValue(['mockDefaultIndex']),
+  };
+});
+
+jest.mock('./index.gql_query', () => {
+  return {
+    MatrixHistogramGqlQuery: 'mockGqlQuery',
+  };
+});
+
+jest.mock('../../components/toasters/', () => ({
+  useStateToaster: () => [jest.fn(), jest.fn()],
+  errorToToaster: jest.fn(),
+}));
+
+describe('useQuery', () => {
+  let result: {
+    data: MatrixOverTimeHistogramData[] | null;
+    loading: boolean;
+    inspect: InspectQuery | null;
+    totalCount: number;
+    refetch: Refetch | undefined;
+  };
+  describe('happy path', () => {
+    beforeAll(() => {
+      (useApolloClient as jest.Mock).mockReturnValue({
+        query: mockQuery,
+      });
+      const TestComponent = () => {
+        result = useQuery({
+          endDate: 100,
+          errorMessage: 'fakeErrorMsg',
+          filterQuery: '',
+          histogramType: HistogramType.alerts,
+          isInspected: false,
+          stackByField: 'fakeField',
+          startDate: 0,
+        });
+
+        return <div />;
+      };
+
+      mount(<TestComponent />);
+    });
+
+    test('should set variables', () => {
+      expect(mockQuery).toBeCalledWith({
+        query: 'mockGqlQuery',
+        fetchPolicy: 'network-only',
+        variables: {
+          filterQuery: '',
+          sourceId: 'default',
+          timerange: {
+            interval: '12h',
+            from: 0,
+            to: 100,
+          },
+          defaultIndex: 'mockDefaultIndex',
+          inspect: false,
+          stackByField: 'fakeField',
+          histogramType: 'alerts',
+        },
+        context: {
+          fetchOptions: {
+            abortSignal: new AbortController().signal,
+          },
+        },
+      });
+    });
+
+    test('should setData', () => {
+      expect(result.data).toEqual([{}]);
+    });
+
+    test('should set total count', () => {
+      expect(result.totalCount).toEqual(1);
+    });
+
+    test('should set inspect', () => {
+      expect(result.inspect).toEqual(false);
+    });
+  });
+
+  describe('failure path', () => {
+    beforeAll(() => {
+      mockQuery.mockClear();
+      (useApolloClient as jest.Mock).mockReset();
+      (useApolloClient as jest.Mock).mockReturnValue({
+        query: mockRejectQuery,
+      });
+      const TestComponent = () => {
+        result = useQuery({
+          endDate: 100,
+          errorMessage: 'fakeErrorMsg',
+          filterQuery: '',
+          histogramType: HistogramType.alerts,
+          isInspected: false,
+          stackByField: 'fakeField',
+          startDate: 0,
+        });
+
+        return <div />;
+      };
+
+      mount(<TestComponent />);
+    });
+
+    test('should setData', () => {
+      expect(result.data).toEqual(null);
+    });
+
+    test('should set total count', () => {
+      expect(result.totalCount).toEqual(-1);
+    });
+
+    test('should set inspect', () => {
+      expect(result.inspect).toEqual(null);
+    });
+
+    test('should set error to toster', () => {
+      expect(errorToToaster).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/common/containers/matrix_histogram/index.ts b/x-pack/plugins/siem/public/common/containers/matrix_histogram/index.ts
new file mode 100644
index 00000000000000..649ca526c21025
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/containers/matrix_histogram/index.ts
@@ -0,0 +1,119 @@
+/*
+ * 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 { isEmpty } from 'lodash/fp';
+import { useEffect, useMemo, useState, useRef } from 'react';
+
+import { DEFAULT_INDEX_KEY } from '../../../../common/constants';
+import { MatrixHistogramQueryProps } from '../../components/matrix_histogram/types';
+import { errorToToaster, useStateToaster } from '../../components/toasters';
+import { useUiSetting$ } from '../../lib/kibana';
+import { createFilter } from '../helpers';
+import { useApolloClient } from '../../utils/apollo_context';
+import { inputsModel } from '../../store';
+import { MatrixHistogramGqlQuery } from './index.gql_query';
+import { GetMatrixHistogramQuery, MatrixOverTimeHistogramData } from '../../../graphql/types';
+
+export const useQuery = <Hit, Aggs, TCache = object>({
+  endDate,
+  errorMessage,
+  filterQuery,
+  histogramType,
+  indexToAdd,
+  isInspected,
+  stackByField,
+  startDate,
+}: MatrixHistogramQueryProps) => {
+  const [configIndex] = useUiSetting$<string[]>(DEFAULT_INDEX_KEY);
+  const defaultIndex = useMemo<string[]>(() => {
+    if (indexToAdd != null && !isEmpty(indexToAdd)) {
+      return [...configIndex, ...indexToAdd];
+    }
+    return configIndex;
+  }, [configIndex, indexToAdd]);
+
+  const [, dispatchToaster] = useStateToaster();
+  const refetch = useRef<inputsModel.Refetch>();
+  const [loading, setLoading] = useState<boolean>(false);
+  const [data, setData] = useState<MatrixOverTimeHistogramData[] | null>(null);
+  const [inspect, setInspect] = useState<inputsModel.InspectQuery | null>(null);
+  const [totalCount, setTotalCount] = useState<number>(-1);
+  const apolloClient = useApolloClient();
+
+  useEffect(() => {
+    const matrixHistogramVariables: GetMatrixHistogramQuery.Variables = {
+      filterQuery: createFilter(filterQuery),
+      sourceId: 'default',
+      timerange: {
+        interval: '12h',
+        from: startDate!,
+        to: endDate!,
+      },
+      defaultIndex,
+      inspect: isInspected,
+      stackByField,
+      histogramType,
+    };
+    let isSubscribed = true;
+    const abortCtrl = new AbortController();
+    const abortSignal = abortCtrl.signal;
+
+    async function fetchData() {
+      if (!apolloClient) return null;
+      setLoading(true);
+      return apolloClient
+        .query<GetMatrixHistogramQuery.Query, GetMatrixHistogramQuery.Variables>({
+          query: MatrixHistogramGqlQuery,
+          fetchPolicy: 'network-only',
+          variables: matrixHistogramVariables,
+          context: {
+            fetchOptions: {
+              abortSignal,
+            },
+          },
+        })
+        .then(
+          result => {
+            if (isSubscribed) {
+              const source = result?.data?.source?.MatrixHistogram ?? {};
+              setData(source?.matrixHistogramData ?? []);
+              setTotalCount(source?.totalCount ?? -1);
+              setInspect(source?.inspect ?? null);
+              setLoading(false);
+            }
+          },
+          error => {
+            if (isSubscribed) {
+              setData(null);
+              setTotalCount(-1);
+              setInspect(null);
+              setLoading(false);
+              errorToToaster({ title: errorMessage, error, dispatchToaster });
+            }
+          }
+        );
+    }
+    refetch.current = fetchData;
+    fetchData();
+    return () => {
+      isSubscribed = false;
+      abortCtrl.abort();
+    };
+  }, [
+    defaultIndex,
+    errorMessage,
+    filterQuery,
+    histogramType,
+    indexToAdd,
+    isInspected,
+    stackByField,
+    startDate,
+    endDate,
+    data,
+  ]);
+
+  return { data, loading, inspect, totalCount, refetch: refetch.current };
+};
diff --git a/x-pack/plugins/siem/public/containers/query_template.tsx b/x-pack/plugins/siem/public/common/containers/query_template.tsx
similarity index 98%
rename from x-pack/plugins/siem/public/containers/query_template.tsx
rename to x-pack/plugins/siem/public/common/containers/query_template.tsx
index dfb452c24b86e5..fdc95c1dadfe16 100644
--- a/x-pack/plugins/siem/public/containers/query_template.tsx
+++ b/x-pack/plugins/siem/public/common/containers/query_template.tsx
@@ -8,7 +8,7 @@ import { ApolloQueryResult } from 'apollo-client';
 import React from 'react';
 import { FetchMoreOptions, FetchMoreQueryOptions, OperationVariables } from 'react-apollo';
 
-import { ESQuery } from '../../common/typed_json';
+import { ESQuery } from '../../../common/typed_json';
 
 export interface QueryTemplateProps {
   id?: string;
diff --git a/x-pack/plugins/siem/public/containers/query_template_paginated.tsx b/x-pack/plugins/siem/public/common/containers/query_template_paginated.tsx
similarity index 98%
rename from x-pack/plugins/siem/public/containers/query_template_paginated.tsx
rename to x-pack/plugins/siem/public/common/containers/query_template_paginated.tsx
index db618f216d83e7..446e1125b2807e 100644
--- a/x-pack/plugins/siem/public/containers/query_template_paginated.tsx
+++ b/x-pack/plugins/siem/public/common/containers/query_template_paginated.tsx
@@ -10,7 +10,7 @@ import React from 'react';
 import { FetchMoreOptions, FetchMoreQueryOptions, OperationVariables } from 'react-apollo';
 import deepEqual from 'fast-deep-equal';
 
-import { ESQuery } from '../../common/typed_json';
+import { ESQuery } from '../../../common/typed_json';
 import { inputsModel } from '../store/model';
 import { generateTablePaginationOptions } from '../components/paginated_table/helpers';
 
diff --git a/x-pack/plugins/siem/public/containers/source/index.gql_query.ts b/x-pack/plugins/siem/public/common/containers/source/index.gql_query.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/source/index.gql_query.ts
rename to x-pack/plugins/siem/public/common/containers/source/index.gql_query.ts
diff --git a/x-pack/plugins/siem/public/containers/source/index.test.tsx b/x-pack/plugins/siem/public/common/containers/source/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/containers/source/index.test.tsx
rename to x-pack/plugins/siem/public/common/containers/source/index.test.tsx
diff --git a/x-pack/plugins/siem/public/common/containers/source/index.tsx b/x-pack/plugins/siem/public/common/containers/source/index.tsx
new file mode 100644
index 00000000000000..8c33c556c67674
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/containers/source/index.tsx
@@ -0,0 +1,177 @@
+/*
+ * 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 { isUndefined } from 'lodash';
+import { get, keyBy, pick, set, isEmpty } from 'lodash/fp';
+import { Query } from 'react-apollo';
+import React, { useEffect, useMemo, useState } from 'react';
+import memoizeOne from 'memoize-one';
+import { IIndexPattern } from 'src/plugins/data/public';
+
+import { DEFAULT_INDEX_KEY } from '../../../../common/constants';
+import { useUiSetting$ } from '../../lib/kibana';
+
+import { IndexField, SourceQuery } from '../../../graphql/types';
+
+import { sourceQuery } from './index.gql_query';
+import { useApolloClient } from '../../utils/apollo_context';
+
+export { sourceQuery };
+
+export interface BrowserField {
+  aggregatable: boolean;
+  category: string;
+  description: string | null;
+  example: string | number | null;
+  fields: Readonly<Record<string, Partial<BrowserField>>>;
+  format: string;
+  indexes: string[];
+  name: string;
+  searchable: boolean;
+  type: string;
+}
+
+export type BrowserFields = Readonly<Record<string, Partial<BrowserField>>>;
+
+export const getAllBrowserFields = (browserFields: BrowserFields): Array<Partial<BrowserField>> =>
+  Object.values(browserFields).reduce<Array<Partial<BrowserField>>>(
+    (acc, namespace) => [
+      ...acc,
+      ...Object.values(namespace.fields != null ? namespace.fields : {}),
+    ],
+    []
+  );
+
+export const getAllFieldsByName = (
+  browserFields: BrowserFields
+): { [fieldName: string]: Partial<BrowserField> } =>
+  keyBy('name', getAllBrowserFields(browserFields));
+
+interface WithSourceArgs {
+  indicesExist: boolean;
+  browserFields: BrowserFields;
+  indexPattern: IIndexPattern;
+}
+
+interface WithSourceProps {
+  children: (args: WithSourceArgs) => React.ReactNode;
+  indexToAdd?: string[] | null;
+  sourceId: string;
+}
+
+export const getIndexFields = memoizeOne(
+  (title: string, fields: IndexField[]): IIndexPattern =>
+    fields && fields.length > 0
+      ? {
+          fields: fields.map(field => pick(['name', 'searchable', 'type', 'aggregatable'], field)),
+          title,
+        }
+      : { fields: [], title }
+);
+
+export const getBrowserFields = memoizeOne(
+  (title: string, fields: IndexField[]): BrowserFields =>
+    fields && fields.length > 0
+      ? fields.reduce<BrowserFields>(
+          (accumulator: BrowserFields, field: IndexField) =>
+            set([field.category, 'fields', field.name], field, accumulator),
+          {}
+        )
+      : {}
+);
+
+export const WithSource = React.memo<WithSourceProps>(({ children, indexToAdd, sourceId }) => {
+  const [configIndex] = useUiSetting$<string[]>(DEFAULT_INDEX_KEY);
+  const defaultIndex = useMemo<string[]>(() => {
+    if (indexToAdd != null && !isEmpty(indexToAdd)) {
+      return [...configIndex, ...indexToAdd];
+    }
+    return configIndex;
+  }, [configIndex, indexToAdd]);
+
+  return (
+    <Query<SourceQuery.Query, SourceQuery.Variables>
+      query={sourceQuery}
+      fetchPolicy="cache-first"
+      notifyOnNetworkStatusChange
+      variables={{
+        sourceId,
+        defaultIndex,
+      }}
+    >
+      {({ data }) =>
+        children({
+          indicesExist: get('source.status.indicesExist', data),
+          browserFields: getBrowserFields(
+            defaultIndex.join(),
+            get('source.status.indexFields', data)
+          ),
+          indexPattern: getIndexFields(defaultIndex.join(), get('source.status.indexFields', data)),
+        })
+      }
+    </Query>
+  );
+});
+
+WithSource.displayName = 'WithSource';
+
+export const indicesExistOrDataTemporarilyUnavailable = (indicesExist: boolean | undefined) =>
+  indicesExist || isUndefined(indicesExist);
+
+export const useWithSource = (sourceId: string, indices: string[]) => {
+  const [loading, updateLoading] = useState(false);
+  const [indicesExist, setIndicesExist] = useState<boolean | undefined | null>(undefined);
+  const [browserFields, setBrowserFields] = useState<BrowserFields | null>(null);
+  const [indexPattern, setIndexPattern] = useState<IIndexPattern | null>(null);
+  const [errorMessage, updateErrorMessage] = useState<string | null>(null);
+
+  const apolloClient = useApolloClient();
+  async function fetchSource(signal: AbortSignal) {
+    updateLoading(true);
+    if (apolloClient) {
+      apolloClient
+        .query<SourceQuery.Query, SourceQuery.Variables>({
+          query: sourceQuery,
+          fetchPolicy: 'cache-first',
+          variables: {
+            sourceId,
+            defaultIndex: indices,
+          },
+          context: {
+            fetchOptions: {
+              signal,
+            },
+          },
+        })
+        .then(
+          result => {
+            updateLoading(false);
+            updateErrorMessage(null);
+            setIndicesExist(get('data.source.status.indicesExist', result));
+            setBrowserFields(
+              getBrowserFields(indices.join(), get('data.source.status.indexFields', result))
+            );
+            setIndexPattern(
+              getIndexFields(indices.join(), get('data.source.status.indexFields', result))
+            );
+          },
+          error => {
+            updateLoading(false);
+            updateErrorMessage(error.message);
+          }
+        );
+    }
+  }
+
+  useEffect(() => {
+    const abortCtrl = new AbortController();
+    const signal = abortCtrl.signal;
+    fetchSource(signal);
+    return () => abortCtrl.abort();
+  }, [apolloClient, sourceId, indices]);
+
+  return { indicesExist, browserFields, indexPattern, loading, errorMessage };
+};
diff --git a/x-pack/plugins/siem/public/common/containers/source/mock.ts b/x-pack/plugins/siem/public/common/containers/source/mock.ts
new file mode 100644
index 00000000000000..55e8b6ac02b128
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/containers/source/mock.ts
@@ -0,0 +1,699 @@
+/*
+ * 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 { DEFAULT_INDEX_PATTERN } from '../../../../common/constants';
+
+import { BrowserFields } from '.';
+import { sourceQuery } from './index.gql_query';
+
+export const mocksSource = [
+  {
+    request: {
+      query: sourceQuery,
+      variables: {
+        sourceId: 'default',
+        defaultIndex: DEFAULT_INDEX_PATTERN,
+      },
+    },
+    result: {
+      data: {
+        source: {
+          id: 'default',
+          configuration: {},
+          status: {
+            indicesExist: true,
+            winlogbeatIndices: [
+              'winlogbeat-7.0.0-2019.02.17',
+              'winlogbeat-7.0.0-2019.02.18',
+              'winlogbeat-7.0.0-2019.02.19',
+              'winlogbeat-7.0.0-2019.02.20',
+              'winlogbeat-7.0.0-2019.02.21',
+              'winlogbeat-7.0.0-2019.02.21-000001',
+              'winlogbeat-7.0.0-2019.02.22',
+              'winlogbeat-8.0.0-2019.02.19-000001',
+            ],
+            auditbeatIndices: [
+              'auditbeat-7.0.0-2019.02.17',
+              'auditbeat-7.0.0-2019.02.18',
+              'auditbeat-7.0.0-2019.02.19',
+              'auditbeat-7.0.0-2019.02.20',
+              'auditbeat-7.0.0-2019.02.21',
+              'auditbeat-7.0.0-2019.02.21-000001',
+              'auditbeat-7.0.0-2019.02.22',
+              'auditbeat-8.0.0-2019.02.19-000001',
+            ],
+            filebeatIndices: [
+              'filebeat-7.0.0-iot-2019.06',
+              'filebeat-7.0.0-iot-2019.07',
+              'filebeat-7.0.0-iot-2019.08',
+              'filebeat-7.0.0-iot-2019.09',
+              'filebeat-7.0.0-iot-2019.10',
+              'filebeat-8.0.0-2019.02.19-000001',
+            ],
+            indexFields: [
+              {
+                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: ['auditbeat', 'filebeat', 'packetbeat'],
+                name: '@timestamp',
+                searchable: true,
+                type: 'date',
+                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: ['auditbeat', 'filebeat', 'packetbeat'],
+                name: 'agent.ephemeral_id',
+                searchable: true,
+                type: 'string',
+                aggregatable: true,
+              },
+              {
+                category: 'agent',
+                description: null,
+                example: null,
+                format: '',
+                indexes: ['auditbeat', 'filebeat', 'packetbeat'],
+                name: 'agent.hostname',
+                searchable: true,
+                type: 'string',
+                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: ['auditbeat', 'filebeat', 'packetbeat'],
+                name: 'agent.id',
+                searchable: true,
+                type: 'string',
+                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: ['auditbeat', 'filebeat', 'packetbeat'],
+                name: 'agent.name',
+                searchable: true,
+                type: 'string',
+                aggregatable: true,
+              },
+              {
+                category: 'auditd',
+                description: null,
+                example: null,
+                format: '',
+                indexes: ['auditbeat'],
+                name: 'auditd.data.a0',
+                searchable: true,
+                type: 'string',
+                aggregatable: true,
+              },
+              {
+                category: 'auditd',
+                description: null,
+                example: null,
+                format: '',
+                indexes: ['auditbeat'],
+                name: 'auditd.data.a1',
+                searchable: true,
+                type: 'string',
+                aggregatable: true,
+              },
+              {
+                category: 'auditd',
+                description: null,
+                example: null,
+                format: '',
+                indexes: ['auditbeat'],
+                name: 'auditd.data.a2',
+                searchable: true,
+                type: 'string',
+                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: ['auditbeat', 'filebeat', 'packetbeat'],
+                name: 'client.address',
+                searchable: true,
+                type: 'string',
+                aggregatable: true,
+              },
+              {
+                category: 'client',
+                description: 'Bytes sent from the client to the server.',
+                example: '184',
+                format: '',
+                indexes: ['auditbeat', 'filebeat', 'packetbeat'],
+                name: 'client.bytes',
+                searchable: true,
+                type: 'number',
+                aggregatable: true,
+              },
+              {
+                category: 'client',
+                description: 'Client domain.',
+                example: null,
+                format: '',
+                indexes: ['auditbeat', 'filebeat', 'packetbeat'],
+                name: 'client.domain',
+                searchable: true,
+                type: 'string',
+                aggregatable: true,
+              },
+              {
+                category: 'client',
+                description: 'Country ISO code.',
+                example: 'CA',
+                format: '',
+                indexes: ['auditbeat', 'filebeat', 'packetbeat'],
+                name: 'client.geo.country_iso_code',
+                searchable: true,
+                type: 'string',
+                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: ['auditbeat', 'filebeat', 'packetbeat'],
+                name: 'cloud.account.id',
+                searchable: true,
+                type: 'string',
+                aggregatable: true,
+              },
+              {
+                category: 'cloud',
+                description: 'Availability zone in which this host is running.',
+                example: 'us-east-1c',
+                format: '',
+                indexes: ['auditbeat', 'filebeat', 'packetbeat'],
+                name: 'cloud.availability_zone',
+                searchable: true,
+                type: 'string',
+                aggregatable: true,
+              },
+              {
+                category: 'container',
+                description: 'Unique container id.',
+                example: null,
+                format: '',
+                indexes: ['auditbeat', 'filebeat', 'packetbeat'],
+                name: 'container.id',
+                searchable: true,
+                type: 'string',
+                aggregatable: true,
+              },
+              {
+                category: 'container',
+                description: 'Name of the image the container was built on.',
+                example: null,
+                format: '',
+                indexes: ['auditbeat', 'filebeat', 'packetbeat'],
+                name: 'container.image.name',
+                searchable: true,
+                type: 'string',
+                aggregatable: true,
+              },
+              {
+                category: 'container',
+                description: 'Container image tag.',
+                example: null,
+                format: '',
+                indexes: ['auditbeat', 'filebeat', 'packetbeat'],
+                name: 'container.image.tag',
+                searchable: true,
+                type: 'string',
+                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: ['auditbeat', 'filebeat', 'packetbeat'],
+                name: 'destination.address',
+                searchable: true,
+                type: 'string',
+                aggregatable: true,
+              },
+              {
+                category: 'destination',
+                description: 'Bytes sent from the destination to the source.',
+                example: '184',
+                format: '',
+                indexes: ['auditbeat', 'filebeat', 'packetbeat'],
+                name: 'destination.bytes',
+                searchable: true,
+                type: 'number',
+                aggregatable: true,
+              },
+              {
+                category: 'destination',
+                description: 'Destination domain.',
+                example: null,
+                format: '',
+                indexes: ['auditbeat', 'filebeat', 'packetbeat'],
+                name: 'destination.domain',
+                searchable: true,
+                type: 'string',
+                aggregatable: true,
+              },
+              {
+                aggregatable: true,
+                category: 'destination',
+                description:
+                  'IP address of the destination. Can be one or multiple IPv4 or IPv6 addresses.',
+                example: '',
+                format: '',
+                indexes: ['auditbeat', 'filebeat', 'packetbeat'],
+                name: 'destination.ip',
+                searchable: true,
+                type: 'ip',
+              },
+              {
+                aggregatable: true,
+                category: 'destination',
+                description: 'Port of the destination.',
+                example: '',
+                format: '',
+                indexes: ['auditbeat', 'filebeat', 'packetbeat'],
+                name: 'destination.port',
+                searchable: true,
+                type: 'long',
+              },
+              {
+                aggregatable: true,
+                category: 'source',
+                description:
+                  'IP address of the source. Can be one or multiple IPv4 or IPv6 addresses.',
+                example: '',
+                format: '',
+                indexes: ['auditbeat', 'filebeat', 'packetbeat'],
+                name: 'source.ip',
+                searchable: true,
+                type: 'ip',
+              },
+              {
+                aggregatable: true,
+                category: 'source',
+                description: 'Port of the source.',
+                example: '',
+                format: '',
+                indexes: ['auditbeat', 'filebeat', 'packetbeat'],
+                name: 'source.port',
+                searchable: true,
+                type: 'long',
+              },
+              {
+                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: DEFAULT_INDEX_PATTERN,
+                name: 'event.end',
+                searchable: true,
+                type: 'date',
+              },
+            ],
+          },
+        },
+      },
+    },
+  },
+];
+
+export const mockIndexFields = [
+  { aggregatable: true, name: '@timestamp', searchable: true, type: 'date' },
+  { aggregatable: true, name: 'agent.ephemeral_id', searchable: true, type: 'string' },
+  { aggregatable: true, name: 'agent.hostname', searchable: true, type: 'string' },
+  { aggregatable: true, name: 'agent.id', searchable: true, type: 'string' },
+  { aggregatable: true, name: 'agent.name', searchable: true, type: 'string' },
+  { aggregatable: true, name: 'auditd.data.a0', searchable: true, type: 'string' },
+  { aggregatable: true, name: 'auditd.data.a1', searchable: true, type: 'string' },
+  { aggregatable: true, name: 'auditd.data.a2', searchable: true, type: 'string' },
+  { aggregatable: true, name: 'client.address', searchable: true, type: 'string' },
+  { aggregatable: true, name: 'client.bytes', searchable: true, type: 'number' },
+  { aggregatable: true, name: 'client.domain', searchable: true, type: 'string' },
+  { aggregatable: true, name: 'client.geo.country_iso_code', searchable: true, type: 'string' },
+  { aggregatable: true, name: 'cloud.account.id', searchable: true, type: 'string' },
+  { aggregatable: true, name: 'cloud.availability_zone', searchable: true, type: 'string' },
+  { aggregatable: true, name: 'container.id', searchable: true, type: 'string' },
+  { aggregatable: true, name: 'container.image.name', searchable: true, type: 'string' },
+  { aggregatable: true, name: 'container.image.tag', searchable: true, type: 'string' },
+  { aggregatable: true, name: 'destination.address', searchable: true, type: 'string' },
+  { aggregatable: true, name: 'destination.bytes', searchable: true, type: 'number' },
+  { aggregatable: true, name: 'destination.domain', searchable: true, type: 'string' },
+  { aggregatable: true, name: 'destination.ip', searchable: true, type: 'ip' },
+  { aggregatable: true, name: 'destination.port', searchable: true, type: 'long' },
+  { aggregatable: true, name: 'source.ip', searchable: true, type: 'ip' },
+  { aggregatable: true, name: 'source.port', searchable: true, type: 'long' },
+  { aggregatable: true, name: 'event.end', searchable: true, type: 'date' },
+];
+
+export const mockBrowserFields: BrowserFields = {
+  agent: {
+    fields: {
+      'agent.ephemeral_id': {
+        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: ['auditbeat', 'filebeat', 'packetbeat'],
+        name: 'agent.ephemeral_id',
+        searchable: true,
+        type: 'string',
+      },
+      'agent.hostname': {
+        aggregatable: true,
+        category: 'agent',
+        description: null,
+        example: null,
+        format: '',
+        indexes: ['auditbeat', 'filebeat', 'packetbeat'],
+        name: 'agent.hostname',
+        searchable: true,
+        type: 'string',
+      },
+      'agent.id': {
+        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: ['auditbeat', 'filebeat', 'packetbeat'],
+        name: 'agent.id',
+        searchable: true,
+        type: 'string',
+      },
+      'agent.name': {
+        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: ['auditbeat', 'filebeat', 'packetbeat'],
+        name: 'agent.name',
+        searchable: true,
+        type: 'string',
+      },
+    },
+  },
+  auditd: {
+    fields: {
+      'auditd.data.a0': {
+        aggregatable: true,
+        category: 'auditd',
+        description: null,
+        example: null,
+        format: '',
+        indexes: ['auditbeat'],
+        name: 'auditd.data.a0',
+        searchable: true,
+        type: 'string',
+      },
+      'auditd.data.a1': {
+        aggregatable: true,
+        category: 'auditd',
+        description: null,
+        example: null,
+        format: '',
+        indexes: ['auditbeat'],
+        name: 'auditd.data.a1',
+        searchable: true,
+        type: 'string',
+      },
+      'auditd.data.a2': {
+        aggregatable: true,
+        category: 'auditd',
+        description: null,
+        example: null,
+        format: '',
+        indexes: ['auditbeat'],
+        name: 'auditd.data.a2',
+        searchable: true,
+        type: 'string',
+      },
+    },
+  },
+  base: {
+    fields: {
+      '@timestamp': {
+        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: ['auditbeat', 'filebeat', 'packetbeat'],
+        name: '@timestamp',
+        searchable: true,
+        type: 'date',
+      },
+    },
+  },
+  client: {
+    fields: {
+      'client.address': {
+        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: ['auditbeat', 'filebeat', 'packetbeat'],
+        name: 'client.address',
+        searchable: true,
+        type: 'string',
+      },
+      'client.bytes': {
+        aggregatable: true,
+        category: 'client',
+        description: 'Bytes sent from the client to the server.',
+        example: '184',
+        format: '',
+        indexes: ['auditbeat', 'filebeat', 'packetbeat'],
+        name: 'client.bytes',
+        searchable: true,
+        type: 'number',
+      },
+      'client.domain': {
+        aggregatable: true,
+        category: 'client',
+        description: 'Client domain.',
+        example: null,
+        format: '',
+        indexes: ['auditbeat', 'filebeat', 'packetbeat'],
+        name: 'client.domain',
+        searchable: true,
+        type: 'string',
+      },
+      'client.geo.country_iso_code': {
+        aggregatable: true,
+        category: 'client',
+        description: 'Country ISO code.',
+        example: 'CA',
+        format: '',
+        indexes: ['auditbeat', 'filebeat', 'packetbeat'],
+        name: 'client.geo.country_iso_code',
+        searchable: true,
+        type: 'string',
+      },
+    },
+  },
+  cloud: {
+    fields: {
+      'cloud.account.id': {
+        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: ['auditbeat', 'filebeat', 'packetbeat'],
+        name: 'cloud.account.id',
+        searchable: true,
+        type: 'string',
+      },
+      'cloud.availability_zone': {
+        aggregatable: true,
+        category: 'cloud',
+        description: 'Availability zone in which this host is running.',
+        example: 'us-east-1c',
+        format: '',
+        indexes: ['auditbeat', 'filebeat', 'packetbeat'],
+        name: 'cloud.availability_zone',
+        searchable: true,
+        type: 'string',
+      },
+    },
+  },
+  container: {
+    fields: {
+      'container.id': {
+        aggregatable: true,
+        category: 'container',
+        description: 'Unique container id.',
+        example: null,
+        format: '',
+        indexes: ['auditbeat', 'filebeat', 'packetbeat'],
+        name: 'container.id',
+        searchable: true,
+        type: 'string',
+      },
+      'container.image.name': {
+        aggregatable: true,
+        category: 'container',
+        description: 'Name of the image the container was built on.',
+        example: null,
+        format: '',
+        indexes: ['auditbeat', 'filebeat', 'packetbeat'],
+        name: 'container.image.name',
+        searchable: true,
+        type: 'string',
+      },
+      'container.image.tag': {
+        aggregatable: true,
+        category: 'container',
+        description: 'Container image tag.',
+        example: null,
+        format: '',
+        indexes: ['auditbeat', 'filebeat', 'packetbeat'],
+        name: 'container.image.tag',
+        searchable: true,
+        type: 'string',
+      },
+    },
+  },
+  destination: {
+    fields: {
+      'destination.address': {
+        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: ['auditbeat', 'filebeat', 'packetbeat'],
+        name: 'destination.address',
+        searchable: true,
+        type: 'string',
+      },
+      'destination.bytes': {
+        aggregatable: true,
+        category: 'destination',
+        description: 'Bytes sent from the destination to the source.',
+        example: '184',
+        format: '',
+        indexes: ['auditbeat', 'filebeat', 'packetbeat'],
+        name: 'destination.bytes',
+        searchable: true,
+        type: 'number',
+      },
+      'destination.domain': {
+        aggregatable: true,
+        category: 'destination',
+        description: 'Destination domain.',
+        example: null,
+        format: '',
+        indexes: ['auditbeat', 'filebeat', 'packetbeat'],
+        name: 'destination.domain',
+        searchable: true,
+        type: 'string',
+      },
+      'destination.ip': {
+        aggregatable: true,
+        category: 'destination',
+        description:
+          'IP address of the destination. Can be one or multiple IPv4 or IPv6 addresses.',
+        example: '',
+        format: '',
+        indexes: ['auditbeat', 'filebeat', 'packetbeat'],
+        name: 'destination.ip',
+        searchable: true,
+        type: 'ip',
+      },
+      'destination.port': {
+        aggregatable: true,
+        category: 'destination',
+        description: 'Port of the destination.',
+        example: '',
+        format: '',
+        indexes: ['auditbeat', 'filebeat', 'packetbeat'],
+        name: 'destination.port',
+        searchable: true,
+        type: 'long',
+      },
+    },
+  },
+  event: {
+    fields: {
+      'event.end': {
+        category: 'event',
+        description:
+          'event.end contains the date when the event ended or when the activity was last observed.',
+        example: null,
+        format: '',
+        indexes: DEFAULT_INDEX_PATTERN,
+        name: 'event.end',
+        searchable: true,
+        type: 'date',
+        aggregatable: true,
+      },
+    },
+  },
+  source: {
+    fields: {
+      'source.ip': {
+        aggregatable: true,
+        category: 'source',
+        description: 'IP address of the source. Can be one or multiple IPv4 or IPv6 addresses.',
+        example: '',
+        format: '',
+        indexes: ['auditbeat', 'filebeat', 'packetbeat'],
+        name: 'source.ip',
+        searchable: true,
+        type: 'ip',
+      },
+      'source.port': {
+        aggregatable: true,
+        category: 'source',
+        description: 'Port of the source.',
+        example: '',
+        format: '',
+        indexes: ['auditbeat', 'filebeat', 'packetbeat'],
+        name: 'source.port',
+        searchable: true,
+        type: 'long',
+      },
+    },
+  },
+};
diff --git a/x-pack/plugins/siem/public/hooks/api/__mock__/api.tsx b/x-pack/plugins/siem/public/common/hooks/api/__mock__/api.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/hooks/api/__mock__/api.tsx
rename to x-pack/plugins/siem/public/common/hooks/api/__mock__/api.tsx
diff --git a/x-pack/plugins/siem/public/hooks/api/api.tsx b/x-pack/plugins/siem/public/common/hooks/api/api.tsx
similarity index 94%
rename from x-pack/plugins/siem/public/hooks/api/api.tsx
rename to x-pack/plugins/siem/public/common/hooks/api/api.tsx
index 8120e3819d9a81..12863bffcf5150 100644
--- a/x-pack/plugins/siem/public/hooks/api/api.tsx
+++ b/x-pack/plugins/siem/public/common/hooks/api/api.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { StartServices } from '../../plugin';
+import { StartServices } from '../../../plugin';
 import { IndexPatternSavedObject, IndexPatternSavedObjectAttributes } from '../types';
 
 /**
diff --git a/x-pack/plugins/siem/public/hooks/api/helpers.test.tsx b/x-pack/plugins/siem/public/common/hooks/api/helpers.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/hooks/api/helpers.test.tsx
rename to x-pack/plugins/siem/public/common/hooks/api/helpers.test.tsx
diff --git a/x-pack/plugins/siem/public/hooks/api/helpers.tsx b/x-pack/plugins/siem/public/common/hooks/api/helpers.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/hooks/api/helpers.tsx
rename to x-pack/plugins/siem/public/common/hooks/api/helpers.tsx
diff --git a/x-pack/plugins/siem/public/hooks/translations.ts b/x-pack/plugins/siem/public/common/hooks/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/hooks/translations.ts
rename to x-pack/plugins/siem/public/common/hooks/translations.ts
diff --git a/x-pack/plugins/siem/public/common/hooks/types.ts b/x-pack/plugins/siem/public/common/hooks/types.ts
new file mode 100644
index 00000000000000..36b626b0ba9f1d
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/hooks/types.ts
@@ -0,0 +1,16 @@
+/*
+ * 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.
+ */
+
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { SimpleSavedObject } from '../../../../../../src/core/public';
+
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export type IndexPatternSavedObjectAttributes = { title: string };
+
+export type IndexPatternSavedObject = Pick<
+  SimpleSavedObject<IndexPatternSavedObjectAttributes>,
+  'type' | 'id' | 'attributes' | '_version'
+>;
diff --git a/x-pack/plugins/siem/public/hooks/use_add_to_timeline.tsx b/x-pack/plugins/siem/public/common/hooks/use_add_to_timeline.tsx
similarity index 95%
rename from x-pack/plugins/siem/public/hooks/use_add_to_timeline.tsx
rename to x-pack/plugins/siem/public/common/hooks/use_add_to_timeline.tsx
index be0ddb153457e9..9d3c1efbe34511 100644
--- a/x-pack/plugins/siem/public/hooks/use_add_to_timeline.tsx
+++ b/x-pack/plugins/siem/public/common/hooks/use_add_to_timeline.tsx
@@ -9,8 +9,8 @@ import { useCallback } from 'react';
 import { DraggableId, FluidDragActions, Position, SensorAPI } from 'react-beautiful-dnd';
 
 import { IS_DRAGGING_CLASS_NAME } from '../components/drag_and_drop/helpers';
-import { HIGHLIGHTED_DROP_TARGET_CLASS_NAME } from '../components/timeline/data_providers/empty';
-import { EMPTY_PROVIDERS_GROUP_CLASS_NAME } from '../components/timeline/data_providers/providers';
+import { HIGHLIGHTED_DROP_TARGET_CLASS_NAME } from '../../timelines/components/timeline/data_providers/empty';
+import { EMPTY_PROVIDERS_GROUP_CLASS_NAME } from '../../timelines/components/timeline/data_providers/providers';
 
 let _sensorApiSingleton: SensorAPI;
 
diff --git a/x-pack/plugins/siem/public/hooks/use_index_patterns.tsx b/x-pack/plugins/siem/public/common/hooks/use_index_patterns.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/hooks/use_index_patterns.tsx
rename to x-pack/plugins/siem/public/common/hooks/use_index_patterns.tsx
diff --git a/x-pack/plugins/siem/public/hooks/use_providers_portal.tsx b/x-pack/plugins/siem/public/common/hooks/use_providers_portal.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/hooks/use_providers_portal.tsx
rename to x-pack/plugins/siem/public/common/hooks/use_providers_portal.tsx
diff --git a/x-pack/plugins/siem/public/lib/clipboard/clipboard.tsx b/x-pack/plugins/siem/public/common/lib/clipboard/clipboard.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/lib/clipboard/clipboard.tsx
rename to x-pack/plugins/siem/public/common/lib/clipboard/clipboard.tsx
diff --git a/x-pack/plugins/siem/public/lib/clipboard/translations.ts b/x-pack/plugins/siem/public/common/lib/clipboard/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/lib/clipboard/translations.ts
rename to x-pack/plugins/siem/public/common/lib/clipboard/translations.ts
diff --git a/x-pack/plugins/siem/public/lib/clipboard/with_copy_to_clipboard.tsx b/x-pack/plugins/siem/public/common/lib/clipboard/with_copy_to_clipboard.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/lib/clipboard/with_copy_to_clipboard.tsx
rename to x-pack/plugins/siem/public/common/lib/clipboard/with_copy_to_clipboard.tsx
diff --git a/x-pack/plugins/siem/public/common/lib/compose/helpers.test.ts b/x-pack/plugins/siem/public/common/lib/compose/helpers.test.ts
new file mode 100644
index 00000000000000..4a3d734d0a6d45
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/lib/compose/helpers.test.ts
@@ -0,0 +1,40 @@
+/*
+ * 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 { InMemoryCache, IntrospectionFragmentMatcher } from 'apollo-cache-inmemory';
+import { errorLink, reTryOneTimeOnErrorLink } from '../../containers/errors';
+import { getLinks } from './helpers';
+import { withClientState } from 'apollo-link-state';
+import * as apolloLinkHttp from 'apollo-link-http';
+import introspectionQueryResultData from '../../../graphql/introspection.json';
+
+jest.mock('apollo-cache-inmemory');
+jest.mock('apollo-link-http');
+jest.mock('apollo-link-state');
+jest.mock('../../containers/errors');
+const mockWithClientState = 'mockWithClientState';
+const mockHttpLink = { mockHttpLink: 'mockHttpLink' };
+
+// @ts-ignore
+withClientState.mockReturnValue(mockWithClientState);
+// @ts-ignore
+apolloLinkHttp.createHttpLink.mockImplementation(() => mockHttpLink);
+
+describe('getLinks helper', () => {
+  test('It should return links in correct order', () => {
+    const mockCache = new InMemoryCache({
+      dataIdFromObject: () => null,
+      fragmentMatcher: new IntrospectionFragmentMatcher({
+        introspectionQueryResultData,
+      }),
+    });
+    const links = getLinks(mockCache, 'basePath');
+    expect(links[0]).toEqual(errorLink);
+    expect(links[1]).toEqual(reTryOneTimeOnErrorLink);
+    expect(links[2]).toEqual(mockWithClientState);
+    expect(links[3]).toEqual(mockHttpLink);
+  });
+});
diff --git a/x-pack/plugins/siem/public/lib/compose/helpers.ts b/x-pack/plugins/siem/public/common/lib/compose/helpers.ts
similarity index 100%
rename from x-pack/plugins/siem/public/lib/compose/helpers.ts
rename to x-pack/plugins/siem/public/common/lib/compose/helpers.ts
diff --git a/x-pack/plugins/siem/public/lib/compose/kibana_compose.tsx b/x-pack/plugins/siem/public/common/lib/compose/kibana_compose.tsx
similarity index 83%
rename from x-pack/plugins/siem/public/lib/compose/kibana_compose.tsx
rename to x-pack/plugins/siem/public/common/lib/compose/kibana_compose.tsx
index fb30c9a5411ed7..f7c7c65318482d 100644
--- a/x-pack/plugins/siem/public/lib/compose/kibana_compose.tsx
+++ b/x-pack/plugins/siem/public/common/lib/compose/kibana_compose.tsx
@@ -8,8 +8,9 @@ import { InMemoryCache, IntrospectionFragmentMatcher } from 'apollo-cache-inmemo
 import ApolloClient from 'apollo-client';
 import { ApolloLink } from 'apollo-link';
 
-import { CoreStart } from '../../../../../../src/core/public';
-import introspectionQueryResultData from '../../graphql/introspection.json';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { CoreStart } from '../../../../../../../src/core/public';
+import introspectionQueryResultData from '../../../graphql/introspection.json';
 import { AppFrontendLibs } from '../lib';
 import { getLinks } from './helpers';
 
diff --git a/x-pack/plugins/siem/public/common/lib/connectors/components/connector_flyout/index.tsx b/x-pack/plugins/siem/public/common/lib/connectors/components/connector_flyout/index.tsx
new file mode 100644
index 00000000000000..246a7cced37e5f
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/lib/connectors/components/connector_flyout/index.tsx
@@ -0,0 +1,151 @@
+/*
+ * 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, { useCallback, useEffect } from 'react';
+import { EuiFieldText, EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiSpacer } from '@elastic/eui';
+
+import { isEmpty, get } from 'lodash/fp';
+
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { ActionConnectorFieldsProps } from '../../../../../../../triggers_actions_ui/public/types';
+import { FieldMapping } from '../../../../../cases/components/configure_cases/field_mapping';
+
+import { CasesConfigurationMapping } from '../../../../../cases/containers/configure/types';
+
+import * as i18n from '../../translations';
+import { ActionConnector, ConnectorFlyoutHOCProps } from '../../types';
+import { createDefaultMapping } from '../../utils';
+import { connectorsConfiguration } from '../../config';
+
+export const withConnectorFlyout = <T extends ActionConnector>({
+  ConnectorFormComponent,
+  connectorActionTypeId,
+  secretKeys = [],
+  configKeys = [],
+}: ConnectorFlyoutHOCProps<T>) => {
+  const ConnectorFlyout: React.FC<ActionConnectorFieldsProps<T>> = ({
+    action,
+    editActionConfig,
+    editActionSecrets,
+    errors,
+  }) => {
+    /* We do not provide defaults values to the fields (like empty string for apiUrl) intentionally.
+   * If we do, errors will be shown the first time the flyout is open even though the user did not
+   * interact with the form. Also, we would like to show errors for empty fields provided by the user.
+  /*/
+    const { apiUrl, casesConfiguration: { mapping = [] } = {} } = action.config;
+    const configKeysWithDefault = [...configKeys, 'apiUrl'];
+
+    const isApiUrlInvalid: boolean = errors.apiUrl.length > 0 && apiUrl != null;
+
+    /**
+     * We need to distinguish between the add flyout and the edit flyout.
+     * useEffect will run only once on component mount.
+     * This guarantees that the function below will run only once.
+     * On the first render of the component the apiUrl can be either undefined or filled.
+     * If it is filled then we are on the edit flyout. Otherwise we are on the add flyout.
+     */
+
+    useEffect(() => {
+      if (!isEmpty(apiUrl)) {
+        secretKeys.forEach((key: string) => editActionSecrets(key, ''));
+      }
+    }, []);
+
+    if (isEmpty(mapping)) {
+      editActionConfig('casesConfiguration', {
+        ...action.config.casesConfiguration,
+        mapping: createDefaultMapping(connectorsConfiguration[connectorActionTypeId].fields),
+      });
+    }
+
+    const handleOnChangeActionConfig = useCallback(
+      (key: string, value: string) => editActionConfig(key, value),
+      []
+    );
+
+    const handleOnBlurActionConfig = useCallback(
+      (key: string) => {
+        if (configKeysWithDefault.includes(key) && get(key, action.config) == null) {
+          editActionConfig(key, '');
+        }
+      },
+      [action.config]
+    );
+
+    const handleOnChangeSecretConfig = useCallback(
+      (key: string, value: string) => editActionSecrets(key, value),
+      []
+    );
+
+    const handleOnBlurSecretConfig = useCallback(
+      (key: string) => {
+        if (secretKeys.includes(key) && get(key, action.secrets) == null) {
+          editActionSecrets(key, '');
+        }
+      },
+      [action.secrets]
+    );
+
+    const handleOnChangeMappingConfig = useCallback(
+      (newMapping: CasesConfigurationMapping[]) =>
+        editActionConfig('casesConfiguration', {
+          ...action.config.casesConfiguration,
+          mapping: newMapping,
+        }),
+      [action.config]
+    );
+
+    return (
+      <>
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiFormRow
+              id="apiUrl"
+              fullWidth
+              error={errors.apiUrl}
+              isInvalid={isApiUrlInvalid}
+              label={i18n.API_URL_LABEL}
+            >
+              <EuiFieldText
+                fullWidth
+                isInvalid={isApiUrlInvalid}
+                name="apiUrl"
+                value={apiUrl || ''} // Needed to prevent uncontrolled input error when value is undefined
+                data-test-subj="apiUrlFromInput"
+                placeholder="https://<site-url>"
+                onChange={evt => handleOnChangeActionConfig('apiUrl', evt.target.value)}
+                onBlur={handleOnBlurActionConfig.bind(null, 'apiUrl')}
+              />
+            </EuiFormRow>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiSpacer size="m" />
+        <ConnectorFormComponent
+          errors={errors}
+          action={action}
+          onChangeSecret={handleOnChangeSecretConfig}
+          onBlurSecret={handleOnBlurSecretConfig}
+          onChangeConfig={handleOnChangeActionConfig}
+          onBlurConfig={handleOnBlurActionConfig}
+        />
+        <EuiSpacer size="l" />
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <FieldMapping
+              disabled={true}
+              connectorActionTypeId={connectorActionTypeId}
+              mapping={mapping as CasesConfigurationMapping[]}
+              onChangeMapping={handleOnChangeMappingConfig}
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </>
+    );
+  };
+
+  return ConnectorFlyout;
+};
diff --git a/x-pack/plugins/siem/public/lib/connectors/config.ts b/x-pack/plugins/siem/public/common/lib/connectors/config.ts
similarity index 100%
rename from x-pack/plugins/siem/public/lib/connectors/config.ts
rename to x-pack/plugins/siem/public/common/lib/connectors/config.ts
diff --git a/x-pack/plugins/siem/public/lib/connectors/index.ts b/x-pack/plugins/siem/public/common/lib/connectors/index.ts
similarity index 100%
rename from x-pack/plugins/siem/public/lib/connectors/index.ts
rename to x-pack/plugins/siem/public/common/lib/connectors/index.ts
diff --git a/x-pack/plugins/siem/public/lib/connectors/jira/config.ts b/x-pack/plugins/siem/public/common/lib/connectors/jira/config.ts
similarity index 100%
rename from x-pack/plugins/siem/public/lib/connectors/jira/config.ts
rename to x-pack/plugins/siem/public/common/lib/connectors/jira/config.ts
diff --git a/x-pack/plugins/siem/public/lib/connectors/jira/flyout.tsx b/x-pack/plugins/siem/public/common/lib/connectors/jira/flyout.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/lib/connectors/jira/flyout.tsx
rename to x-pack/plugins/siem/public/common/lib/connectors/jira/flyout.tsx
diff --git a/x-pack/plugins/siem/public/common/lib/connectors/jira/index.tsx b/x-pack/plugins/siem/public/common/lib/connectors/jira/index.tsx
new file mode 100644
index 00000000000000..f7e293d9ad2f8e
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/lib/connectors/jira/index.tsx
@@ -0,0 +1,54 @@
+/*
+ * 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 { lazy } from 'react';
+import {
+  ValidationResult,
+  // eslint-disable-next-line @kbn/eslint/no-restricted-paths
+} from '../../../../../../triggers_actions_ui/public/types';
+
+import { connector } from './config';
+import { createActionType } from '../utils';
+import logo from './logo.svg';
+import { JiraActionConnector } from './types';
+import * as i18n from './translations';
+
+interface Errors {
+  projectKey: string[];
+  email: string[];
+  apiToken: string[];
+}
+
+const validateConnector = (action: JiraActionConnector): ValidationResult => {
+  const errors: Errors = {
+    projectKey: [],
+    email: [],
+    apiToken: [],
+  };
+
+  if (!action.config.projectKey) {
+    errors.projectKey = [...errors.projectKey, i18n.JIRA_PROJECT_KEY_REQUIRED];
+  }
+
+  if (!action.secrets.email) {
+    errors.email = [...errors.email, i18n.EMAIL_REQUIRED];
+  }
+
+  if (!action.secrets.apiToken) {
+    errors.apiToken = [...errors.apiToken, i18n.API_TOKEN_REQUIRED];
+  }
+
+  return { errors };
+};
+
+export const getActionType = createActionType({
+  id: connector.id,
+  iconClass: logo,
+  selectMessage: i18n.JIRA_DESC,
+  actionTypeTitle: connector.name,
+  validateConnector,
+  actionConnectorFields: lazy(() => import('./flyout')),
+});
diff --git a/x-pack/plugins/siem/public/lib/connectors/jira/logo.svg b/x-pack/plugins/siem/public/common/lib/connectors/jira/logo.svg
similarity index 100%
rename from x-pack/plugins/siem/public/lib/connectors/jira/logo.svg
rename to x-pack/plugins/siem/public/common/lib/connectors/jira/logo.svg
diff --git a/x-pack/plugins/siem/public/lib/connectors/jira/translations.ts b/x-pack/plugins/siem/public/common/lib/connectors/jira/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/lib/connectors/jira/translations.ts
rename to x-pack/plugins/siem/public/common/lib/connectors/jira/translations.ts
diff --git a/x-pack/plugins/siem/public/common/lib/connectors/jira/types.ts b/x-pack/plugins/siem/public/common/lib/connectors/jira/types.ts
new file mode 100644
index 00000000000000..fafb4a0d41fb3b
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/lib/connectors/jira/types.ts
@@ -0,0 +1,22 @@
+/*
+ * 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.
+ */
+
+/* eslint-disable no-restricted-imports */
+/* eslint-disable @kbn/eslint/no-restricted-paths */
+
+import {
+  JiraPublicConfigurationType,
+  JiraSecretConfigurationType,
+} from '../../../../../../actions/server/builtin_action_types/jira/types';
+
+export { JiraFieldsType } from '../../../../../../case/common/api/connectors';
+
+export * from '../types';
+
+export interface JiraActionConnector {
+  config: JiraPublicConfigurationType;
+  secrets: JiraSecretConfigurationType;
+}
diff --git a/x-pack/plugins/siem/public/lib/connectors/servicenow/config.ts b/x-pack/plugins/siem/public/common/lib/connectors/servicenow/config.ts
similarity index 100%
rename from x-pack/plugins/siem/public/lib/connectors/servicenow/config.ts
rename to x-pack/plugins/siem/public/common/lib/connectors/servicenow/config.ts
diff --git a/x-pack/plugins/siem/public/lib/connectors/servicenow/flyout.tsx b/x-pack/plugins/siem/public/common/lib/connectors/servicenow/flyout.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/lib/connectors/servicenow/flyout.tsx
rename to x-pack/plugins/siem/public/common/lib/connectors/servicenow/flyout.tsx
diff --git a/x-pack/plugins/siem/public/common/lib/connectors/servicenow/index.tsx b/x-pack/plugins/siem/public/common/lib/connectors/servicenow/index.tsx
new file mode 100644
index 00000000000000..c9c5298365e817
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/lib/connectors/servicenow/index.tsx
@@ -0,0 +1,47 @@
+/*
+ * 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 { lazy } from 'react';
+import {
+  ValidationResult,
+  // eslint-disable-next-line @kbn/eslint/no-restricted-paths
+} from '../../../../../../triggers_actions_ui/public/types';
+import { connector } from './config';
+import { createActionType } from '../utils';
+import logo from './logo.svg';
+import { ServiceNowActionConnector } from './types';
+import * as i18n from './translations';
+
+interface Errors {
+  username: string[];
+  password: string[];
+}
+
+const validateConnector = (action: ServiceNowActionConnector): ValidationResult => {
+  const errors: Errors = {
+    username: [],
+    password: [],
+  };
+
+  if (!action.secrets.username) {
+    errors.username = [...errors.username, i18n.USERNAME_REQUIRED];
+  }
+
+  if (!action.secrets.password) {
+    errors.password = [...errors.password, i18n.PASSWORD_REQUIRED];
+  }
+
+  return { errors };
+};
+
+export const getActionType = createActionType({
+  id: connector.id,
+  iconClass: logo,
+  selectMessage: i18n.SERVICENOW_DESC,
+  actionTypeTitle: connector.name,
+  validateConnector,
+  actionConnectorFields: lazy(() => import('./flyout')),
+});
diff --git a/x-pack/plugins/siem/public/lib/connectors/servicenow/logo.svg b/x-pack/plugins/siem/public/common/lib/connectors/servicenow/logo.svg
similarity index 100%
rename from x-pack/plugins/siem/public/lib/connectors/servicenow/logo.svg
rename to x-pack/plugins/siem/public/common/lib/connectors/servicenow/logo.svg
diff --git a/x-pack/plugins/siem/public/lib/connectors/servicenow/translations.ts b/x-pack/plugins/siem/public/common/lib/connectors/servicenow/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/lib/connectors/servicenow/translations.ts
rename to x-pack/plugins/siem/public/common/lib/connectors/servicenow/translations.ts
diff --git a/x-pack/plugins/siem/public/common/lib/connectors/servicenow/types.ts b/x-pack/plugins/siem/public/common/lib/connectors/servicenow/types.ts
new file mode 100644
index 00000000000000..b4a80e28c8d154
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/lib/connectors/servicenow/types.ts
@@ -0,0 +1,22 @@
+/*
+ * 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.
+ */
+
+/* eslint-disable no-restricted-imports */
+/* eslint-disable @kbn/eslint/no-restricted-paths */
+
+import {
+  ServiceNowPublicConfigurationType,
+  ServiceNowSecretConfigurationType,
+} from '../../../../../../actions/server/builtin_action_types/servicenow/types';
+
+export { ServiceNowFieldsType } from '../../../../../../case/common/api/connectors';
+
+export * from '../types';
+
+export interface ServiceNowActionConnector {
+  config: ServiceNowPublicConfigurationType;
+  secrets: ServiceNowSecretConfigurationType;
+}
diff --git a/x-pack/plugins/siem/public/lib/connectors/translations.ts b/x-pack/plugins/siem/public/common/lib/connectors/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/lib/connectors/translations.ts
rename to x-pack/plugins/siem/public/common/lib/connectors/translations.ts
diff --git a/x-pack/plugins/siem/public/common/lib/connectors/types.ts b/x-pack/plugins/siem/public/common/lib/connectors/types.ts
new file mode 100644
index 00000000000000..1d688ad9b1d6a9
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/lib/connectors/types.ts
@@ -0,0 +1,62 @@
+/*
+ * 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.
+ */
+
+/* eslint-disable no-restricted-imports */
+/* eslint-disable @kbn/eslint/no-restricted-paths */
+
+import { ActionType } from '../../../../../triggers_actions_ui/public';
+import { IErrorObject } from '../../../../../triggers_actions_ui/public/types';
+import { ExternalIncidentServiceConfiguration } from '../../../../../actions/server/builtin_action_types/case/types';
+
+import {
+  ActionType as ThirdPartySupportedActions,
+  CaseField,
+} from '../../../../../case/common/api';
+
+export { ThirdPartyField as AllThirdPartyFields } from '../../../../../case/common/api';
+
+export interface ThirdPartyField {
+  label: string;
+  validSourceFields: CaseField[];
+  defaultSourceField: CaseField;
+  defaultActionType: ThirdPartySupportedActions;
+}
+
+export interface ConnectorConfiguration extends ActionType {
+  logo: string;
+  fields: Record<string, ThirdPartyField>;
+}
+
+export interface ActionConnector {
+  config: ExternalIncidentServiceConfiguration;
+  secrets: {};
+}
+
+export interface ActionConnectorParams {
+  message: string;
+}
+
+export interface ActionConnectorValidationErrors {
+  apiUrl: string[];
+}
+
+export type Optional<T, K extends keyof T> = Omit<T, K> & Partial<T>;
+
+export interface ConnectorFlyoutFormProps<T> {
+  errors: IErrorObject;
+  action: T;
+  onChangeSecret: (key: string, value: string) => void;
+  onBlurSecret: (key: string) => void;
+  onChangeConfig: (key: string, value: string) => void;
+  onBlurConfig: (key: string) => void;
+}
+
+export interface ConnectorFlyoutHOCProps<T> {
+  ConnectorFormComponent: React.FC<ConnectorFlyoutFormProps<T>>;
+  connectorActionTypeId: string;
+  configKeys?: string[];
+  secretKeys?: string[];
+}
diff --git a/x-pack/plugins/siem/public/common/lib/connectors/utils.ts b/x-pack/plugins/siem/public/common/lib/connectors/utils.ts
new file mode 100644
index 00000000000000..b9c90a593b2020
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/lib/connectors/utils.ts
@@ -0,0 +1,75 @@
+/*
+ * 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 {
+  ActionTypeModel,
+  ValidationResult,
+  // eslint-disable-next-line @kbn/eslint/no-restricted-paths
+} from '../../../../../triggers_actions_ui/public/types';
+
+import {
+  ActionConnector,
+  ActionConnectorParams,
+  ActionConnectorValidationErrors,
+  Optional,
+  ThirdPartyField,
+} from './types';
+import { isUrlInvalid } from './validators';
+
+import * as i18n from './translations';
+import { CasesConfigurationMapping } from '../../../cases/containers/configure/types';
+
+export const createActionType = ({
+  id,
+  actionTypeTitle,
+  selectMessage,
+  iconClass,
+  validateConnector,
+  validateParams = connectorParamsValidator,
+  actionConnectorFields,
+  actionParamsFields = null,
+}: Optional<ActionTypeModel, 'validateParams' | 'actionParamsFields'>) => (): ActionTypeModel => {
+  return {
+    id,
+    iconClass,
+    selectMessage,
+    actionTypeTitle,
+    validateConnector: (action: ActionConnector): ValidationResult => {
+      const errors: ActionConnectorValidationErrors = {
+        apiUrl: [],
+      };
+
+      if (!action.config.apiUrl) {
+        errors.apiUrl = [...errors.apiUrl, i18n.API_URL_REQUIRED];
+      }
+
+      if (isUrlInvalid(action.config.apiUrl)) {
+        errors.apiUrl = [...errors.apiUrl, i18n.API_URL_INVALID];
+      }
+
+      return { errors: { ...errors, ...validateConnector(action).errors } };
+    },
+    validateParams,
+    actionConnectorFields,
+    actionParamsFields,
+  };
+};
+
+const connectorParamsValidator = (actionParams: ActionConnectorParams): ValidationResult => {
+  return { errors: {} };
+};
+
+export const createDefaultMapping = (
+  fields: Record<string, ThirdPartyField>
+): CasesConfigurationMapping[] =>
+  Object.keys(fields).map(
+    key =>
+      ({
+        source: fields[key].defaultSourceField,
+        target: key,
+        actionType: fields[key].defaultActionType,
+      } as CasesConfigurationMapping)
+  );
diff --git a/x-pack/plugins/siem/public/lib/connectors/validators.ts b/x-pack/plugins/siem/public/common/lib/connectors/validators.ts
similarity index 100%
rename from x-pack/plugins/siem/public/lib/connectors/validators.ts
rename to x-pack/plugins/siem/public/common/lib/connectors/validators.ts
diff --git a/x-pack/plugins/siem/public/lib/helpers/index.test.tsx b/x-pack/plugins/siem/public/common/lib/helpers/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/lib/helpers/index.test.tsx
rename to x-pack/plugins/siem/public/common/lib/helpers/index.test.tsx
diff --git a/x-pack/plugins/siem/public/lib/helpers/index.tsx b/x-pack/plugins/siem/public/common/lib/helpers/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/lib/helpers/index.tsx
rename to x-pack/plugins/siem/public/common/lib/helpers/index.tsx
diff --git a/x-pack/plugins/siem/public/lib/helpers/scheduler.ts b/x-pack/plugins/siem/public/common/lib/helpers/scheduler.ts
similarity index 100%
rename from x-pack/plugins/siem/public/lib/helpers/scheduler.ts
rename to x-pack/plugins/siem/public/common/lib/helpers/scheduler.ts
diff --git a/x-pack/plugins/siem/public/lib/history/index.ts b/x-pack/plugins/siem/public/common/lib/history/index.ts
similarity index 100%
rename from x-pack/plugins/siem/public/lib/history/index.ts
rename to x-pack/plugins/siem/public/common/lib/history/index.ts
diff --git a/x-pack/plugins/siem/public/lib/keury/index.test.ts b/x-pack/plugins/siem/public/common/lib/keury/index.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/lib/keury/index.test.ts
rename to x-pack/plugins/siem/public/common/lib/keury/index.test.ts
diff --git a/x-pack/plugins/siem/public/common/lib/keury/index.ts b/x-pack/plugins/siem/public/common/lib/keury/index.ts
new file mode 100644
index 00000000000000..53f845de48fb31
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/lib/keury/index.ts
@@ -0,0 +1,113 @@
+/*
+ * 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 { isEmpty, isString, flow } from 'lodash/fp';
+import {
+  EsQueryConfig,
+  Query,
+  Filter,
+  esQuery,
+  esKuery,
+  IIndexPattern,
+} from '../../../../../../../src/plugins/data/public';
+
+import { JsonObject } from '../../../../../../../src/plugins/kibana_utils/public';
+
+import { KueryFilterQuery } from '../../store';
+
+export const convertKueryToElasticSearchQuery = (
+  kueryExpression: string,
+  indexPattern?: IIndexPattern
+) => {
+  try {
+    return kueryExpression
+      ? JSON.stringify(
+          esKuery.toElasticsearchQuery(esKuery.fromKueryExpression(kueryExpression), indexPattern)
+        )
+      : '';
+  } catch (err) {
+    return '';
+  }
+};
+
+export const convertKueryToDslFilter = (
+  kueryExpression: string,
+  indexPattern: IIndexPattern
+): JsonObject => {
+  try {
+    return kueryExpression
+      ? esKuery.toElasticsearchQuery(esKuery.fromKueryExpression(kueryExpression), indexPattern)
+      : {};
+  } catch (err) {
+    return {};
+  }
+};
+
+export const escapeQueryValue = (val: number | string = ''): string | number => {
+  if (isString(val)) {
+    if (isEmpty(val)) {
+      return '""';
+    }
+    return `"${escapeKuery(val)}"`;
+  }
+
+  return val;
+};
+
+export const isFromKueryExpressionValid = (kqlFilterQuery: KueryFilterQuery | null): boolean => {
+  if (kqlFilterQuery && kqlFilterQuery.kind === 'kuery') {
+    try {
+      esKuery.fromKueryExpression(kqlFilterQuery.expression);
+    } catch (err) {
+      return false;
+    }
+  }
+  return true;
+};
+
+const escapeWhitespace = (val: string) =>
+  val
+    .replace(/\t/g, '\\t')
+    .replace(/\r/g, '\\r')
+    .replace(/\n/g, '\\n');
+
+// See the SpecialCharacter rule in kuery.peg
+const escapeSpecialCharacters = (val: string) => val.replace(/["]/g, '\\$&'); // $& means the whole matched string
+
+// See the Keyword rule in kuery.peg
+const escapeAndOr = (val: string) => val.replace(/(\s+)(and|or)(\s+)/gi, '$1\\$2$3');
+
+const escapeNot = (val: string) => val.replace(/not(\s+)/gi, '\\$&');
+
+export const escapeKuery = flow(escapeSpecialCharacters, escapeAndOr, escapeNot, escapeWhitespace);
+
+export const convertToBuildEsQuery = ({
+  config,
+  indexPattern,
+  queries,
+  filters,
+}: {
+  config: EsQueryConfig;
+  indexPattern: IIndexPattern;
+  queries: Query[];
+  filters: Filter[];
+}) => {
+  try {
+    return JSON.stringify(
+      esQuery.buildEsQuery(
+        indexPattern,
+        queries,
+        filters.filter(f => f.meta.disabled === false),
+        {
+          ...config,
+          dateFormatTZ: undefined,
+        }
+      )
+    );
+  } catch (exp) {
+    return '';
+  }
+};
diff --git a/x-pack/plugins/siem/public/lib/kibana/__mocks__/index.ts b/x-pack/plugins/siem/public/common/lib/kibana/__mocks__/index.ts
similarity index 100%
rename from x-pack/plugins/siem/public/lib/kibana/__mocks__/index.ts
rename to x-pack/plugins/siem/public/common/lib/kibana/__mocks__/index.ts
diff --git a/x-pack/plugins/siem/public/lib/kibana/hooks.ts b/x-pack/plugins/siem/public/common/lib/kibana/hooks.ts
similarity index 95%
rename from x-pack/plugins/siem/public/lib/kibana/hooks.ts
rename to x-pack/plugins/siem/public/common/lib/kibana/hooks.ts
index d62701fe5944ab..ebdefa66b0ef36 100644
--- a/x-pack/plugins/siem/public/lib/kibana/hooks.ts
+++ b/x-pack/plugins/siem/public/common/lib/kibana/hooks.ts
@@ -8,11 +8,11 @@ import moment from 'moment-timezone';
 
 import { useCallback, useEffect, useState } from 'react';
 import { i18n } from '@kbn/i18n';
-import { DEFAULT_DATE_FORMAT, DEFAULT_DATE_FORMAT_TZ } from '../../../common/constants';
+import { DEFAULT_DATE_FORMAT, DEFAULT_DATE_FORMAT_TZ } from '../../../../common/constants';
 import { useUiSetting, useKibana } from './kibana_react';
 import { errorToToaster, useStateToaster } from '../../components/toasters';
-import { AuthenticatedUser } from '../../../../security/common/model';
-import { convertToCamelCase } from '../../containers/case/utils';
+import { AuthenticatedUser } from '../../../../../security/common/model';
+import { convertToCamelCase } from '../../../cases/containers/utils';
 
 export const useDateFormat = (): string => useUiSetting<string>(DEFAULT_DATE_FORMAT);
 
diff --git a/x-pack/plugins/siem/public/lib/kibana/index.ts b/x-pack/plugins/siem/public/common/lib/kibana/index.ts
similarity index 100%
rename from x-pack/plugins/siem/public/lib/kibana/index.ts
rename to x-pack/plugins/siem/public/common/lib/kibana/index.ts
diff --git a/x-pack/plugins/siem/public/common/lib/kibana/kibana_react.ts b/x-pack/plugins/siem/public/common/lib/kibana/kibana_react.ts
new file mode 100644
index 00000000000000..42738c6bbe7d8f
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/lib/kibana/kibana_react.ts
@@ -0,0 +1,31 @@
+/*
+ * 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 {
+  KibanaContextProvider,
+  KibanaReactContextValue,
+  useKibana,
+  useUiSetting,
+  useUiSetting$,
+  withKibana,
+} from '../../../../../../../src/plugins/kibana_react/public';
+import { StartServices } from '../../../plugin';
+
+export type KibanaContext = KibanaReactContextValue<StartServices>;
+export interface WithKibanaProps {
+  kibana: KibanaContext;
+}
+
+// eslint-disable-next-line react-hooks/rules-of-hooks
+const typedUseKibana = () => useKibana<StartServices>();
+
+export {
+  KibanaContextProvider,
+  typedUseKibana as useKibana,
+  useUiSetting,
+  useUiSetting$,
+  withKibana,
+};
diff --git a/x-pack/plugins/siem/public/lib/kibana/services.ts b/x-pack/plugins/siem/public/common/lib/kibana/services.ts
similarity index 89%
rename from x-pack/plugins/siem/public/lib/kibana/services.ts
rename to x-pack/plugins/siem/public/common/lib/kibana/services.ts
index 4ab3e102f56ab5..8a8138691ba173 100644
--- a/x-pack/plugins/siem/public/lib/kibana/services.ts
+++ b/x-pack/plugins/siem/public/common/lib/kibana/services.ts
@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { CoreStart } from '../../../../../../src/core/public';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { CoreStart } from '../../../../../../../src/core/public';
 
 type GlobalServices = Pick<CoreStart, 'http' | 'uiSettings'>;
 
diff --git a/x-pack/plugins/siem/public/lib/lib.ts b/x-pack/plugins/siem/public/common/lib/lib.ts
similarity index 100%
rename from x-pack/plugins/siem/public/lib/lib.ts
rename to x-pack/plugins/siem/public/common/lib/lib.ts
diff --git a/x-pack/plugins/siem/public/lib/note/index.ts b/x-pack/plugins/siem/public/common/lib/note/index.ts
similarity index 100%
rename from x-pack/plugins/siem/public/lib/note/index.ts
rename to x-pack/plugins/siem/public/common/lib/note/index.ts
diff --git a/x-pack/plugins/siem/public/common/lib/telemetry/index.ts b/x-pack/plugins/siem/public/common/lib/telemetry/index.ts
new file mode 100644
index 00000000000000..0ed524c2ae5483
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/lib/telemetry/index.ts
@@ -0,0 +1,54 @@
+/*
+ * 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 { METRIC_TYPE, UiStatsMetricType } from '@kbn/analytics';
+
+import { SetupPlugins } from '../../../plugin';
+export { telemetryMiddleware } from './middleware';
+
+export { METRIC_TYPE };
+
+type TrackFn = (type: UiStatsMetricType, event: string | string[], count?: number) => void;
+
+const noop = () => {};
+
+let _track: TrackFn;
+
+export const track: TrackFn = (type, event, count) => {
+  try {
+    _track(type, event, count);
+  } catch (error) {
+    // ignore failed tracking call
+  }
+};
+
+export const initTelemetry = (usageCollection: SetupPlugins['usageCollection'], appId: string) => {
+  _track = usageCollection?.reportUiStats?.bind(null, appId) ?? noop;
+};
+
+export enum TELEMETRY_EVENT {
+  // Detections
+  SIEM_RULE_ENABLED = 'siem_rule_enabled',
+  SIEM_RULE_DISABLED = 'siem_rule_disabled',
+  CUSTOM_RULE_ENABLED = 'custom_rule_enabled',
+  CUSTOM_RULE_DISABLED = 'custom_rule_disabled',
+
+  // ML
+  SIEM_JOB_ENABLED = 'siem_job_enabled',
+  SIEM_JOB_DISABLED = 'siem_job_disabled',
+  CUSTOM_JOB_ENABLED = 'custom_job_enabled',
+  CUSTOM_JOB_DISABLED = 'custom_job_disabled',
+  JOB_ENABLE_FAILURE = 'job_enable_failure',
+  JOB_DISABLE_FAILURE = 'job_disable_failure',
+
+  // Timeline
+  TIMELINE_OPENED = 'open_timeline',
+  TIMELINE_SAVED = 'timeline_saved',
+  TIMELINE_NAMED = 'timeline_named',
+
+  // UI Interactions
+  TAB_CLICKED = 'tab_',
+}
diff --git a/x-pack/plugins/siem/public/lib/telemetry/middleware.ts b/x-pack/plugins/siem/public/common/lib/telemetry/middleware.ts
similarity index 91%
rename from x-pack/plugins/siem/public/lib/telemetry/middleware.ts
rename to x-pack/plugins/siem/public/common/lib/telemetry/middleware.ts
index ca889e20e695f3..87acdddf87ed7e 100644
--- a/x-pack/plugins/siem/public/lib/telemetry/middleware.ts
+++ b/x-pack/plugins/siem/public/common/lib/telemetry/middleware.ts
@@ -7,7 +7,7 @@
 import { Action, Dispatch, MiddlewareAPI } from 'redux';
 
 import { track, METRIC_TYPE, TELEMETRY_EVENT } from './';
-import * as timelineActions from '../../store/timeline/actions';
+import * as timelineActions from '../../../timelines/store/timeline/actions';
 
 export const telemetryMiddleware = (api: MiddlewareAPI) => (next: Dispatch) => (action: Action) => {
   if (timelineActions.endTimelineSaving.match(action)) {
diff --git a/x-pack/plugins/siem/public/lib/theme/use_eui_theme.tsx b/x-pack/plugins/siem/public/common/lib/theme/use_eui_theme.tsx
similarity index 89%
rename from x-pack/plugins/siem/public/lib/theme/use_eui_theme.tsx
rename to x-pack/plugins/siem/public/common/lib/theme/use_eui_theme.tsx
index 1696001203bc87..23dae0d019f300 100644
--- a/x-pack/plugins/siem/public/lib/theme/use_eui_theme.tsx
+++ b/x-pack/plugins/siem/public/common/lib/theme/use_eui_theme.tsx
@@ -7,7 +7,7 @@
 import darkTheme from '@elastic/eui/dist/eui_theme_dark.json';
 import lightTheme from '@elastic/eui/dist/eui_theme_light.json';
 
-import { DEFAULT_DARK_MODE } from '../../../common/constants';
+import { DEFAULT_DARK_MODE } from '../../../../common/constants';
 import { useUiSetting$ } from '../kibana';
 
 export const useEuiTheme = () => {
diff --git a/x-pack/plugins/siem/public/mock/global_state.ts b/x-pack/plugins/siem/public/common/mock/global_state.ts
similarity index 95%
rename from x-pack/plugins/siem/public/mock/global_state.ts
rename to x-pack/plugins/siem/public/common/mock/global_state.ts
index d0223b7834db00..e215aa7403ec9e 100644
--- a/x-pack/plugins/siem/public/mock/global_state.ts
+++ b/x-pack/plugins/siem/public/common/mock/global_state.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { DEFAULT_TIMELINE_WIDTH } from '../components/timeline/body/constants';
+import { DEFAULT_TIMELINE_WIDTH } from '../../timelines/components/timeline/body/constants';
 import {
   Direction,
   FlowTarget,
@@ -13,8 +13,8 @@ import {
   NetworkTopTablesFields,
   TlsFields,
   UsersFields,
-} from '../graphql/types';
-import { networkModel, State } from '../store';
+} from '../../graphql/types';
+import { State } from '../store';
 
 import { defaultHeaders } from './header';
 import {
@@ -22,8 +22,9 @@ import {
   DEFAULT_TO,
   DEFAULT_INTERVAL_TYPE,
   DEFAULT_INTERVAL_VALUE,
-} from '../../common/constants';
-import { TimelineType } from '../../common/types/timeline';
+} from '../../../common/constants';
+import { networkModel } from '../../network/store';
+import { TimelineType } from '../../../common/types/timeline';
 
 export const mockGlobalState: State = {
   app: {
diff --git a/x-pack/plugins/siem/public/mock/header.ts b/x-pack/plugins/siem/public/common/mock/header.ts
similarity index 94%
rename from x-pack/plugins/siem/public/mock/header.ts
rename to x-pack/plugins/siem/public/common/mock/header.ts
index 61af5a5f098b5d..51636e1efb254a 100644
--- a/x-pack/plugins/siem/public/mock/header.ts
+++ b/x-pack/plugins/siem/public/common/mock/header.ts
@@ -3,12 +3,12 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { ColumnHeaderOptions } from '../store/timeline/model';
-import { defaultColumnHeaderType } from '../components/timeline/body/column_headers/default_headers';
+import { ColumnHeaderOptions } from '../../timelines/store/timeline/model';
+import { defaultColumnHeaderType } from '../../timelines/components/timeline/body/column_headers/default_headers';
 import {
   DEFAULT_COLUMN_MIN_WIDTH,
   DEFAULT_DATE_COLUMN_MIN_WIDTH,
-} from '../components/timeline/body/constants';
+} from '../../timelines/components/timeline/body/constants';
 
 export const defaultHeaders: ColumnHeaderOptions[] = [
   {
diff --git a/x-pack/plugins/siem/public/mock/hook_wrapper.tsx b/x-pack/plugins/siem/public/common/mock/hook_wrapper.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/mock/hook_wrapper.tsx
rename to x-pack/plugins/siem/public/common/mock/hook_wrapper.tsx
diff --git a/x-pack/plugins/siem/public/mock/index.ts b/x-pack/plugins/siem/public/common/mock/index.ts
similarity index 100%
rename from x-pack/plugins/siem/public/mock/index.ts
rename to x-pack/plugins/siem/public/common/mock/index.ts
diff --git a/x-pack/plugins/siem/public/mock/index_pattern.ts b/x-pack/plugins/siem/public/common/mock/index_pattern.ts
similarity index 100%
rename from x-pack/plugins/siem/public/mock/index_pattern.ts
rename to x-pack/plugins/siem/public/common/mock/index_pattern.ts
diff --git a/x-pack/plugins/siem/public/common/mock/kibana_core.ts b/x-pack/plugins/siem/public/common/mock/kibana_core.ts
new file mode 100644
index 00000000000000..e82c37e3a5b663
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/mock/kibana_core.ts
@@ -0,0 +1,14 @@
+/*
+ * 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.
+ */
+
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { coreMock } from '../../../../../../src/core/public/mocks';
+import { dataPluginMock } from '../../../../../../src/plugins/data/public/mocks';
+
+export const createKibanaCoreStartMock = () => coreMock.createStart();
+export const createKibanaPluginsStartMock = () => ({
+  data: dataPluginMock.createStartContract(),
+});
diff --git a/x-pack/plugins/siem/public/common/mock/kibana_react.ts b/x-pack/plugins/siem/public/common/mock/kibana_react.ts
new file mode 100644
index 00000000000000..0c51d39257a979
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/mock/kibana_react.ts
@@ -0,0 +1,108 @@
+/*
+ * 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.
+ */
+
+/* eslint-disable react/display-name */
+
+import React from 'react';
+import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public';
+
+import {
+  DEFAULT_SIEM_TIME_RANGE,
+  DEFAULT_SIEM_REFRESH_INTERVAL,
+  DEFAULT_INDEX_KEY,
+  DEFAULT_DATE_FORMAT,
+  DEFAULT_DATE_FORMAT_TZ,
+  DEFAULT_DARK_MODE,
+  DEFAULT_TIME_RANGE,
+  DEFAULT_REFRESH_RATE_INTERVAL,
+  DEFAULT_FROM,
+  DEFAULT_TO,
+  DEFAULT_INTERVAL_PAUSE,
+  DEFAULT_INTERVAL_VALUE,
+  DEFAULT_BYTES_FORMAT,
+  DEFAULT_INDEX_PATTERN,
+} from '../../../common/constants';
+import { createKibanaCoreStartMock, createKibanaPluginsStartMock } from './kibana_core';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const mockUiSettings: Record<string, any> = {
+  [DEFAULT_TIME_RANGE]: { from: 'now-15m', to: 'now', mode: 'quick' },
+  [DEFAULT_REFRESH_RATE_INTERVAL]: { pause: false, value: 0 },
+  [DEFAULT_SIEM_TIME_RANGE]: {
+    from: DEFAULT_FROM,
+    to: DEFAULT_TO,
+  },
+  [DEFAULT_SIEM_REFRESH_INTERVAL]: {
+    pause: DEFAULT_INTERVAL_PAUSE,
+    value: DEFAULT_INTERVAL_VALUE,
+  },
+  [DEFAULT_INDEX_KEY]: DEFAULT_INDEX_PATTERN,
+  [DEFAULT_BYTES_FORMAT]: '0,0.[0]b',
+  [DEFAULT_DATE_FORMAT_TZ]: 'UTC',
+  [DEFAULT_DATE_FORMAT]: 'MMM D, YYYY @ HH:mm:ss.SSS',
+  [DEFAULT_DARK_MODE]: false,
+};
+
+export const createUseUiSettingMock = () => <T extends unknown = string>(
+  key: string,
+  defaultValue?: T
+): T => {
+  const result = mockUiSettings[key];
+
+  if (typeof result != null) return result;
+
+  if (defaultValue != null) {
+    return defaultValue;
+  }
+
+  throw new Error(`Unexpected config key: ${key}`);
+};
+
+export const createUseUiSetting$Mock = () => {
+  const useUiSettingMock = createUseUiSettingMock();
+
+  return <T extends unknown = string>(
+    key: string,
+    defaultValue?: T
+  ): [T, () => void] | undefined => [useUiSettingMock(key, defaultValue), jest.fn()];
+};
+
+export const createUseKibanaMock = () => {
+  const core = createKibanaCoreStartMock();
+  const plugins = createKibanaPluginsStartMock();
+  const useUiSetting = createUseUiSettingMock();
+
+  const services = {
+    ...core,
+    ...plugins,
+    uiSettings: {
+      ...core.uiSettings,
+      get: useUiSetting,
+    },
+  };
+
+  return () => ({ services });
+};
+
+export const createWithKibanaMock = () => {
+  const kibana = createUseKibanaMock()();
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return (Component: any) => (props: any) => {
+    return React.createElement(Component, { ...props, kibana });
+  };
+};
+
+export const createKibanaContextProviderMock = () => {
+  const kibana = createUseKibanaMock()();
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return ({ services, ...rest }: any) =>
+    React.createElement(KibanaContextProvider, {
+      ...rest,
+      services: { ...kibana.services, ...services },
+    });
+};
diff --git a/x-pack/plugins/siem/public/mock/match_media.ts b/x-pack/plugins/siem/public/common/mock/match_media.ts
similarity index 100%
rename from x-pack/plugins/siem/public/mock/match_media.ts
rename to x-pack/plugins/siem/public/common/mock/match_media.ts
diff --git a/x-pack/plugins/siem/public/mock/mock_detail_item.ts b/x-pack/plugins/siem/public/common/mock/mock_detail_item.ts
similarity index 98%
rename from x-pack/plugins/siem/public/mock/mock_detail_item.ts
rename to x-pack/plugins/siem/public/common/mock/mock_detail_item.ts
index c25428649d5630..2395010a0ba2e6 100644
--- a/x-pack/plugins/siem/public/mock/mock_detail_item.ts
+++ b/x-pack/plugins/siem/public/common/mock/mock_detail_item.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { DetailItem } from '../graphql/types';
+import { DetailItem } from '../../graphql/types';
 
 export const mockDetailItemDataId = 'Y-6TfmcB0WOhS6qyMv3s';
 
diff --git a/x-pack/plugins/siem/public/mock/mock_ecs.ts b/x-pack/plugins/siem/public/common/mock/mock_ecs.ts
similarity index 99%
rename from x-pack/plugins/siem/public/mock/mock_ecs.ts
rename to x-pack/plugins/siem/public/common/mock/mock_ecs.ts
index 59e26039e6bffc..7fbbabb29da1b3 100644
--- a/x-pack/plugins/siem/public/mock/mock_ecs.ts
+++ b/x-pack/plugins/siem/public/common/mock/mock_ecs.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { Ecs } from '../graphql/types';
+import { Ecs } from '../../graphql/types';
 
 export const mockEcsData: Ecs[] = [
   {
diff --git a/x-pack/plugins/siem/public/mock/mock_endgame_ecs_data.ts b/x-pack/plugins/siem/public/common/mock/mock_endgame_ecs_data.ts
similarity index 99%
rename from x-pack/plugins/siem/public/mock/mock_endgame_ecs_data.ts
rename to x-pack/plugins/siem/public/common/mock/mock_endgame_ecs_data.ts
index e6eee3d1c1cb1f..9b2cd14499db43 100644
--- a/x-pack/plugins/siem/public/mock/mock_endgame_ecs_data.ts
+++ b/x-pack/plugins/siem/public/common/mock/mock_endgame_ecs_data.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { Ecs } from '../graphql/types';
+import { Ecs } from '../../graphql/types';
 
 export const mockEndgameDnsRequest: Ecs = {
   _id: 'S8jPcG0BOpWiDweSou3g',
diff --git a/x-pack/plugins/siem/public/mock/mock_timeline_data.ts b/x-pack/plugins/siem/public/common/mock/mock_timeline_data.ts
similarity index 99%
rename from x-pack/plugins/siem/public/mock/mock_timeline_data.ts
rename to x-pack/plugins/siem/public/common/mock/mock_timeline_data.ts
index b300053d5f227d..7503062300d2d8 100644
--- a/x-pack/plugins/siem/public/mock/mock_timeline_data.ts
+++ b/x-pack/plugins/siem/public/common/mock/mock_timeline_data.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { Ecs, TimelineItem } from '../graphql/types';
+import { Ecs, TimelineItem } from '../../graphql/types';
 
 export const mockTimelineData: TimelineItem[] = [
   {
diff --git a/x-pack/plugins/siem/public/mock/netflow.ts b/x-pack/plugins/siem/public/common/mock/netflow.ts
similarity index 92%
rename from x-pack/plugins/siem/public/mock/netflow.ts
rename to x-pack/plugins/siem/public/common/mock/netflow.ts
index 333188cca4b7e9..4dad794533374a 100644
--- a/x-pack/plugins/siem/public/mock/netflow.ts
+++ b/x-pack/plugins/siem/public/common/mock/netflow.ts
@@ -4,8 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { ONE_MILLISECOND_AS_NANOSECONDS } from '../components/formatted_duration/helpers';
-import { Ecs } from '../graphql/types';
+import { ONE_MILLISECOND_AS_NANOSECONDS } from '../../timelines/components/formatted_duration/helpers';
+import { Ecs } from '../../graphql/types';
 
 /** Returns mock data for testing the Netflow component */
 export const getMockNetflowData = (): Ecs => ({
diff --git a/x-pack/plugins/siem/public/mock/news.ts b/x-pack/plugins/siem/public/common/mock/news.ts
similarity index 100%
rename from x-pack/plugins/siem/public/mock/news.ts
rename to x-pack/plugins/siem/public/common/mock/news.ts
diff --git a/x-pack/plugins/siem/public/mock/raw_news.ts b/x-pack/plugins/siem/public/common/mock/raw_news.ts
similarity index 100%
rename from x-pack/plugins/siem/public/mock/raw_news.ts
rename to x-pack/plugins/siem/public/common/mock/raw_news.ts
diff --git a/x-pack/plugins/siem/public/mock/test_providers.tsx b/x-pack/plugins/siem/public/common/mock/test_providers.tsx
similarity index 92%
rename from x-pack/plugins/siem/public/mock/test_providers.tsx
rename to x-pack/plugins/siem/public/common/mock/test_providers.tsx
index 59e3874c6d0a1b..679e0bdc14cd5a 100644
--- a/x-pack/plugins/siem/public/mock/test_providers.tsx
+++ b/x-pack/plugins/siem/public/common/mock/test_providers.tsx
@@ -20,7 +20,8 @@ import { ThemeProvider } from 'styled-components';
 import { createStore, State } from '../store';
 import { mockGlobalState } from './global_state';
 import { createKibanaContextProviderMock } from './kibana_react';
-import { FieldHook, useForm } from '../shared_imports';
+import { FieldHook, useForm } from '../../shared_imports';
+import { SUB_PLUGINS_REDUCER } from './utils';
 
 const state: State = mockGlobalState;
 
@@ -62,7 +63,7 @@ const MockKibanaContextProvider = createKibanaContextProviderMock();
 /** A utility for wrapping children in the providers required to run most tests */
 const TestProvidersComponent: React.FC<Props> = ({
   children,
-  store = createStore(state, apolloClientObservable),
+  store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable),
   onDragEnd = jest.fn(),
 }) => (
   <I18nProvider>
@@ -82,7 +83,7 @@ export const TestProviders = React.memo(TestProvidersComponent);
 
 const TestProviderWithoutDragAndDropComponent: React.FC<Props> = ({
   children,
-  store = createStore(state, apolloClientObservable),
+  store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable),
 }) => (
   <I18nProvider>
     <ReduxStoreProvider store={store}>{children}</ReduxStoreProvider>
diff --git a/x-pack/plugins/siem/public/mock/timeline_results.ts b/x-pack/plugins/siem/public/common/mock/timeline_results.ts
similarity index 99%
rename from x-pack/plugins/siem/public/mock/timeline_results.ts
rename to x-pack/plugins/siem/public/common/mock/timeline_results.ts
index 1af0f533a7ca95..b1a9b65874edc0 100644
--- a/x-pack/plugins/siem/public/mock/timeline_results.ts
+++ b/x-pack/plugins/siem/public/common/mock/timeline_results.ts
@@ -3,16 +3,16 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { FilterStateStore } from '../../../../../src/plugins/data/common/es_query/filters/meta_filter';
+import { FilterStateStore } from '../../../../../../src/plugins/data/common/es_query/filters/meta_filter';
 
-import { TimelineType } from '../../common/types/timeline';
+import { TimelineType } from '../../../common/types/timeline';
 
-import { OpenTimelineResult } from '../components/open_timeline/types';
-import { GetAllTimeline, SortFieldTimeline, TimelineResult, Direction } from '../graphql/types';
-import { allTimelinesQuery } from '../containers/timeline/all/index.gql_query';
-import { CreateTimelineProps } from '../pages/detection_engine/components/signals/types';
-import { TimelineModel } from '../store/timeline/model';
-import { timelineDefaults } from '../store/timeline/defaults';
+import { OpenTimelineResult } from '../../timelines/components/open_timeline/types';
+import { GetAllTimeline, SortFieldTimeline, TimelineResult, Direction } from '../../graphql/types';
+import { allTimelinesQuery } from '../../timelines/containers/all/index.gql_query';
+import { CreateTimelineProps } from '../../alerts/components/signals/types';
+import { TimelineModel } from '../../timelines/store/timeline/model';
+import { timelineDefaults } from '../../timelines/store/timeline/defaults';
 export interface MockedProvidedQuery {
   request: {
     query: GetAllTimeline.Query;
diff --git a/x-pack/plugins/siem/public/common/mock/utils.ts b/x-pack/plugins/siem/public/common/mock/utils.ts
new file mode 100644
index 00000000000000..2b54bf83c0a9b7
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/mock/utils.ts
@@ -0,0 +1,22 @@
+/*
+ * 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 { hostsReducer } from '../../hosts/store';
+import { networkReducer } from '../../network/store';
+import { timelineReducer } from '../../timelines/store/timeline/reducer';
+
+interface Global extends NodeJS.Global {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  window?: any;
+}
+
+export const globalNode: Global = global;
+
+export const SUB_PLUGINS_REDUCER = {
+  hosts: hostsReducer,
+  network: networkReducer,
+  timeline: timelineReducer,
+};
diff --git a/x-pack/plugins/siem/public/common/store/actions.ts b/x-pack/plugins/siem/public/common/store/actions.ts
new file mode 100644
index 00000000000000..8a6c292c4893a2
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/store/actions.ts
@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export { appActions } from './app';
+export { dragAndDropActions } from './drag_and_drop';
+export { inputsActions } from './inputs';
diff --git a/x-pack/plugins/siem/public/store/app/actions.ts b/x-pack/plugins/siem/public/common/store/app/actions.ts
similarity index 100%
rename from x-pack/plugins/siem/public/store/app/actions.ts
rename to x-pack/plugins/siem/public/common/store/app/actions.ts
diff --git a/x-pack/plugins/siem/public/store/app/index.ts b/x-pack/plugins/siem/public/common/store/app/index.ts
similarity index 100%
rename from x-pack/plugins/siem/public/store/app/index.ts
rename to x-pack/plugins/siem/public/common/store/app/index.ts
diff --git a/x-pack/plugins/siem/public/store/app/model.ts b/x-pack/plugins/siem/public/common/store/app/model.ts
similarity index 100%
rename from x-pack/plugins/siem/public/store/app/model.ts
rename to x-pack/plugins/siem/public/common/store/app/model.ts
diff --git a/x-pack/plugins/siem/public/store/app/reducer.ts b/x-pack/plugins/siem/public/common/store/app/reducer.ts
similarity index 100%
rename from x-pack/plugins/siem/public/store/app/reducer.ts
rename to x-pack/plugins/siem/public/common/store/app/reducer.ts
diff --git a/x-pack/plugins/siem/public/store/app/selectors.ts b/x-pack/plugins/siem/public/common/store/app/selectors.ts
similarity index 100%
rename from x-pack/plugins/siem/public/store/app/selectors.ts
rename to x-pack/plugins/siem/public/common/store/app/selectors.ts
diff --git a/x-pack/plugins/siem/public/store/constants.ts b/x-pack/plugins/siem/public/common/store/constants.ts
similarity index 100%
rename from x-pack/plugins/siem/public/store/constants.ts
rename to x-pack/plugins/siem/public/common/store/constants.ts
diff --git a/x-pack/plugins/siem/public/common/store/drag_and_drop/actions.ts b/x-pack/plugins/siem/public/common/store/drag_and_drop/actions.ts
new file mode 100644
index 00000000000000..82b544641adcb8
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/store/drag_and_drop/actions.ts
@@ -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 actionCreatorFactory from 'typescript-fsa';
+
+import { DataProvider } from '../../../timelines/components/timeline/data_providers/data_provider';
+
+const actionCreator = actionCreatorFactory('x-pack/siem/local/drag_and_drop');
+
+export const registerProvider = actionCreator<{ provider: DataProvider }>('REGISTER_PROVIDER');
+
+export const unRegisterProvider = actionCreator<{ id: string }>('UNREGISTER_PROVIDER');
+
+export const noProviderFound = actionCreator<{ id: string }>('NO_PROVIDER_FOUND');
diff --git a/x-pack/plugins/siem/public/store/drag_and_drop/index.ts b/x-pack/plugins/siem/public/common/store/drag_and_drop/index.ts
similarity index 100%
rename from x-pack/plugins/siem/public/store/drag_and_drop/index.ts
rename to x-pack/plugins/siem/public/common/store/drag_and_drop/index.ts
diff --git a/x-pack/plugins/siem/public/common/store/drag_and_drop/model.ts b/x-pack/plugins/siem/public/common/store/drag_and_drop/model.ts
new file mode 100644
index 00000000000000..e62bf05c042f8f
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/store/drag_and_drop/model.ts
@@ -0,0 +1,14 @@
+/*
+ * 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 { DataProvider } from '../../../timelines/components/timeline/data_providers/data_provider';
+
+export interface IdToDataProvider {
+  [id: string]: DataProvider;
+}
+
+export interface DragAndDropModel {
+  dataProviders: IdToDataProvider;
+}
diff --git a/x-pack/plugins/siem/public/common/store/drag_and_drop/reducer.test.ts b/x-pack/plugins/siem/public/common/store/drag_and_drop/reducer.test.ts
new file mode 100644
index 00000000000000..d89f7beb208d52
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/store/drag_and_drop/reducer.test.ts
@@ -0,0 +1,46 @@
+/*
+ * 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 { DataProvider } from '../../../timelines/components/timeline/data_providers/data_provider';
+import { mockDataProviders } from '../../../timelines/components/timeline/data_providers/mock/mock_data_providers';
+
+import { IdToDataProvider } from './model';
+import { registerProviderHandler, unRegisterProviderHandler } from './reducer';
+
+const dataProviders: IdToDataProvider = mockDataProviders.reduce(
+  (acc, provider) => ({
+    ...acc,
+    [provider.id]: provider,
+  }),
+  {}
+);
+
+describe('reducer', () => {
+  describe('#registerProviderHandler', () => {
+    test('it registers the data provider', () => {
+      const provider: DataProvider = {
+        ...mockDataProviders[0],
+        id: 'abcd',
+        name: 'Provider abcd',
+      };
+
+      expect(registerProviderHandler({ provider, dataProviders })).toEqual({
+        ...dataProviders,
+        [provider.id]: provider,
+      });
+    });
+  });
+
+  describe('#unRegisterProviderHandler', () => {
+    test('it un-registers the data provider', () => {
+      const id = mockDataProviders[0].id;
+
+      const expected = unRegisterProviderHandler({ id, dataProviders });
+
+      expect(Object.keys(expected)).not.toContain(id);
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/common/store/drag_and_drop/reducer.ts b/x-pack/plugins/siem/public/common/store/drag_and_drop/reducer.ts
new file mode 100644
index 00000000000000..d402da136a5961
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/store/drag_and_drop/reducer.ts
@@ -0,0 +1,51 @@
+/*
+ * 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 { omit } from 'lodash/fp';
+import { reducerWithInitialState } from 'typescript-fsa-reducers';
+
+import { DataProvider } from '../../../timelines/components/timeline/data_providers/data_provider';
+
+import { registerProvider, unRegisterProvider } from './actions';
+import { DragAndDropModel, IdToDataProvider } from './model';
+
+export type DragAndDropState = DragAndDropModel;
+
+export const initialDragAndDropState: DragAndDropState = { dataProviders: {} };
+
+interface RegisterProviderHandlerParams {
+  provider: DataProvider;
+  dataProviders: IdToDataProvider;
+}
+
+export const registerProviderHandler = ({
+  provider,
+  dataProviders,
+}: RegisterProviderHandlerParams): IdToDataProvider => ({
+  ...dataProviders,
+  [provider.id]: provider,
+});
+
+interface UnRegisterProviderHandlerParams {
+  id: string;
+  dataProviders: IdToDataProvider;
+}
+
+export const unRegisterProviderHandler = ({
+  id,
+  dataProviders,
+}: UnRegisterProviderHandlerParams): IdToDataProvider => omit(id, dataProviders);
+
+export const dragAndDropReducer = reducerWithInitialState(initialDragAndDropState)
+  .case(registerProvider, (state, { provider }) => ({
+    ...state,
+    dataProviders: registerProviderHandler({ provider, dataProviders: state.dataProviders }),
+  }))
+  .case(unRegisterProvider, (state, { id }) => ({
+    ...state,
+    dataProviders: unRegisterProviderHandler({ id, dataProviders: state.dataProviders }),
+  }))
+  .build();
diff --git a/x-pack/plugins/siem/public/store/drag_and_drop/selectors.ts b/x-pack/plugins/siem/public/common/store/drag_and_drop/selectors.ts
similarity index 100%
rename from x-pack/plugins/siem/public/store/drag_and_drop/selectors.ts
rename to x-pack/plugins/siem/public/common/store/drag_and_drop/selectors.ts
diff --git a/x-pack/plugins/siem/public/common/store/epic.ts b/x-pack/plugins/siem/public/common/store/epic.ts
new file mode 100644
index 00000000000000..b9e8e7d88c202a
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/store/epic.ts
@@ -0,0 +1,19 @@
+/*
+ * 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 { combineEpics } from 'redux-observable';
+import { createTimelineEpic } from '../../timelines/store/timeline/epic';
+import { createTimelineFavoriteEpic } from '../../timelines/store/timeline/epic_favorite';
+import { createTimelineNoteEpic } from '../../timelines/store/timeline/epic_note';
+import { createTimelinePinnedEventEpic } from '../../timelines/store/timeline/epic_pinned_event';
+
+export const createRootEpic = <State>() =>
+  combineEpics(
+    createTimelineEpic<State>(),
+    createTimelineFavoriteEpic<State>(),
+    createTimelineNoteEpic<State>(),
+    createTimelinePinnedEventEpic<State>()
+  );
diff --git a/x-pack/plugins/siem/public/store/index.ts b/x-pack/plugins/siem/public/common/store/index.ts
similarity index 100%
rename from x-pack/plugins/siem/public/store/index.ts
rename to x-pack/plugins/siem/public/common/store/index.ts
diff --git a/x-pack/plugins/siem/public/common/store/inputs/actions.ts b/x-pack/plugins/siem/public/common/store/inputs/actions.ts
new file mode 100644
index 00000000000000..5b26957843f082
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/store/inputs/actions.ts
@@ -0,0 +1,86 @@
+/*
+ * 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 actionCreatorFactory from 'typescript-fsa';
+
+import { InspectQuery, Refetch, RefetchKql } from './model';
+import { InputsModelId } from './constants';
+import { Filter, SavedQuery } from '../../../../../../../src/plugins/data/public';
+
+const actionCreator = actionCreatorFactory('x-pack/siem/local/inputs');
+
+export const setAbsoluteRangeDatePicker = actionCreator<{
+  id: InputsModelId;
+  from: number;
+  to: number;
+}>('SET_ABSOLUTE_RANGE_DATE_PICKER');
+
+export const setTimelineRangeDatePicker = actionCreator<{
+  from: number;
+  to: number;
+}>('SET_TIMELINE_RANGE_DATE_PICKER');
+
+export const setRelativeRangeDatePicker = actionCreator<{
+  id: InputsModelId;
+  fromStr: string;
+  toStr: string;
+  from: number;
+  to: number;
+}>('SET_RELATIVE_RANGE_DATE_PICKER');
+
+export const setDuration = actionCreator<{ id: InputsModelId; duration: number }>('SET_DURATION');
+
+export const startAutoReload = actionCreator<{ id: InputsModelId }>('START_KQL_AUTO_RELOAD');
+
+export const stopAutoReload = actionCreator<{ id: InputsModelId }>('STOP_KQL_AUTO_RELOAD');
+
+export const setQuery = actionCreator<{
+  inputId: InputsModelId;
+  id: string;
+  loading: boolean;
+  refetch: Refetch | RefetchKql;
+  inspect: InspectQuery | null;
+}>('SET_QUERY');
+
+export const deleteOneQuery = actionCreator<{
+  inputId: InputsModelId;
+  id: string;
+}>('DELETE_QUERY');
+
+export const setInspectionParameter = actionCreator<{
+  id: string;
+  inputId: InputsModelId;
+  isInspected: boolean;
+  selectedInspectIndex: number;
+}>('SET_INSPECTION_PARAMETER');
+
+export const deleteAllQuery = actionCreator<{ id: InputsModelId }>('DELETE_ALL_QUERY');
+
+export const toggleTimelineLinkTo = actionCreator<{ linkToId: InputsModelId }>(
+  'TOGGLE_TIMELINE_LINK_TO'
+);
+
+export const removeTimelineLinkTo = actionCreator('REMOVE_TIMELINE_LINK_TO');
+export const addTimelineLinkTo = actionCreator<{ linkToId: InputsModelId }>('ADD_TIMELINE_LINK_TO');
+
+export const removeGlobalLinkTo = actionCreator('REMOVE_GLOBAL_LINK_TO');
+export const addGlobalLinkTo = actionCreator<{ linkToId: InputsModelId }>('ADD_GLOBAL_LINK_TO');
+
+export const setFilterQuery = actionCreator<{
+  id: InputsModelId;
+  query: string | { [key: string]: unknown };
+  language: string;
+}>('SET_FILTER_QUERY');
+
+export const setSavedQuery = actionCreator<{
+  id: InputsModelId;
+  savedQuery: SavedQuery | undefined;
+}>('SET_SAVED_QUERY');
+
+export const setSearchBarFilter = actionCreator<{
+  id: InputsModelId;
+  filters: Filter[];
+}>('SET_SEARCH_BAR_FILTER');
diff --git a/x-pack/plugins/siem/public/store/inputs/constants.ts b/x-pack/plugins/siem/public/common/store/inputs/constants.ts
similarity index 100%
rename from x-pack/plugins/siem/public/store/inputs/constants.ts
rename to x-pack/plugins/siem/public/common/store/inputs/constants.ts
diff --git a/x-pack/plugins/siem/public/store/inputs/helpers.test.ts b/x-pack/plugins/siem/public/common/store/inputs/helpers.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/store/inputs/helpers.test.ts
rename to x-pack/plugins/siem/public/common/store/inputs/helpers.test.ts
diff --git a/x-pack/plugins/siem/public/store/inputs/helpers.ts b/x-pack/plugins/siem/public/common/store/inputs/helpers.ts
similarity index 100%
rename from x-pack/plugins/siem/public/store/inputs/helpers.ts
rename to x-pack/plugins/siem/public/common/store/inputs/helpers.ts
diff --git a/x-pack/plugins/siem/public/store/inputs/index.ts b/x-pack/plugins/siem/public/common/store/inputs/index.ts
similarity index 100%
rename from x-pack/plugins/siem/public/store/inputs/index.ts
rename to x-pack/plugins/siem/public/common/store/inputs/index.ts
diff --git a/x-pack/plugins/siem/public/common/store/inputs/model.ts b/x-pack/plugins/siem/public/common/store/inputs/model.ts
new file mode 100644
index 00000000000000..e851caf523eb4b
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/store/inputs/model.ts
@@ -0,0 +1,103 @@
+/*
+ * 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 { Dispatch } from 'redux';
+import { InputsModelId } from './constants';
+import { CONSTANTS } from '../../components/url_state/constants';
+import { Query, Filter, SavedQuery } from '../../../../../../../src/plugins/data/public';
+
+export interface AbsoluteTimeRange {
+  kind: 'absolute';
+  fromStr: undefined;
+  toStr: undefined;
+  from: number;
+  to: number;
+}
+
+export interface RelativeTimeRange {
+  kind: 'relative';
+  fromStr: string;
+  toStr: string;
+  from: number;
+  to: number;
+}
+
+export const isRelativeTimeRange = (
+  timeRange: RelativeTimeRange | AbsoluteTimeRange | URLTimeRange
+): timeRange is RelativeTimeRange => timeRange.kind === 'relative';
+
+export const isAbsoluteTimeRange = (
+  timeRange: RelativeTimeRange | AbsoluteTimeRange | URLTimeRange
+): timeRange is AbsoluteTimeRange => timeRange.kind === 'absolute';
+
+export type TimeRange = AbsoluteTimeRange | RelativeTimeRange;
+
+export type URLTimeRange = Omit<TimeRange, 'from' | 'to'> & {
+  from: string | TimeRange['from'];
+  to: string | TimeRange['to'];
+};
+
+export interface Policy {
+  kind: 'manual' | 'interval';
+  duration: number; // in ms
+}
+
+interface InspectVariables {
+  inspect: boolean;
+}
+export type RefetchWithParams = ({ inspect }: InspectVariables) => void;
+export type RefetchKql = (dispatch: Dispatch) => boolean;
+export type Refetch = () => void;
+
+export interface InspectQuery {
+  dsl: string[];
+  response: string[];
+}
+
+export interface GlobalGenericQuery {
+  inspect: InspectQuery | null;
+  isInspected: boolean;
+  loading: boolean;
+  selectedInspectIndex: number;
+}
+
+export interface GlobalGraphqlQuery extends GlobalGenericQuery {
+  id: string;
+  refetch: null | Refetch | RefetchWithParams;
+}
+export interface GlobalKqlQuery extends GlobalGenericQuery {
+  id: 'kql';
+  refetch: RefetchKql;
+}
+
+export type GlobalQuery = GlobalGraphqlQuery | GlobalKqlQuery;
+
+export interface InputsRange {
+  timerange: TimeRange;
+  policy: Policy;
+  queries: GlobalQuery[];
+  linkTo: InputsModelId[];
+  query: Query;
+  filters: Filter[];
+  savedQuery?: SavedQuery;
+}
+
+export interface LinkTo {
+  linkTo: InputsModelId[];
+}
+
+export interface InputsModel {
+  global: InputsRange;
+  timeline: InputsRange;
+}
+export interface UrlInputsModelInputs {
+  linkTo: InputsModelId[];
+  [CONSTANTS.timerange]: TimeRange;
+}
+export interface UrlInputsModel {
+  global: UrlInputsModelInputs;
+  timeline: UrlInputsModelInputs;
+}
diff --git a/x-pack/plugins/siem/public/store/inputs/reducer.ts b/x-pack/plugins/siem/public/common/store/inputs/reducer.ts
similarity index 100%
rename from x-pack/plugins/siem/public/store/inputs/reducer.ts
rename to x-pack/plugins/siem/public/common/store/inputs/reducer.ts
diff --git a/x-pack/plugins/siem/public/store/inputs/selectors.ts b/x-pack/plugins/siem/public/common/store/inputs/selectors.ts
similarity index 100%
rename from x-pack/plugins/siem/public/store/inputs/selectors.ts
rename to x-pack/plugins/siem/public/common/store/inputs/selectors.ts
diff --git a/x-pack/plugins/siem/public/common/store/model.ts b/x-pack/plugins/siem/public/common/store/model.ts
new file mode 100644
index 00000000000000..0032a95cce321a
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/store/model.ts
@@ -0,0 +1,10 @@
+/*
+ * 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.
+ */
+
+export { appModel } from './app';
+export { dragAndDropModel } from './drag_and_drop';
+export { inputsModel } from './inputs';
+export * from './types';
diff --git a/x-pack/plugins/siem/public/common/store/reducer.ts b/x-pack/plugins/siem/public/common/store/reducer.ts
new file mode 100644
index 00000000000000..da1dcd3ea9e730
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/store/reducer.ts
@@ -0,0 +1,46 @@
+/*
+ * 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 { combineReducers } from 'redux';
+
+import { appReducer, AppState, initialAppState } from './app';
+import { dragAndDropReducer, DragAndDropState, initialDragAndDropState } from './drag_and_drop';
+import { createInitialInputsState, initialInputsState, inputsReducer, InputsState } from './inputs';
+
+import { HostsPluginState, HostsPluginReducer } from '../../hosts/store';
+import { NetworkPluginState, NetworkPluginReducer } from '../../network/store';
+import { TimelinePluginState, TimelinePluginReducer } from '../../timelines/store/timeline';
+
+export interface State extends HostsPluginState, NetworkPluginState, TimelinePluginState {
+  app: AppState;
+  dragAndDrop: DragAndDropState;
+  inputs: InputsState;
+}
+
+export const initialState: Pick<State, 'app' | 'dragAndDrop' | 'inputs'> = {
+  app: initialAppState,
+  dragAndDrop: initialDragAndDropState,
+  inputs: initialInputsState,
+};
+
+type SubPluginsInitState = HostsPluginState & NetworkPluginState & TimelinePluginState;
+export type SubPluginsInitReducer = HostsPluginReducer &
+  NetworkPluginReducer &
+  TimelinePluginReducer;
+
+export const createInitialState = (pluginsInitState: SubPluginsInitState): State => ({
+  ...initialState,
+  ...pluginsInitState,
+  inputs: createInitialInputsState(),
+});
+
+export const createReducer = (pluginsReducer: SubPluginsInitReducer) =>
+  combineReducers<State>({
+    app: appReducer,
+    dragAndDrop: dragAndDropReducer,
+    inputs: inputsReducer,
+    ...pluginsReducer,
+  });
diff --git a/x-pack/plugins/siem/public/common/store/selectors.ts b/x-pack/plugins/siem/public/common/store/selectors.ts
new file mode 100644
index 00000000000000..b938bae39b634b
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/store/selectors.ts
@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export { appSelectors } from './app';
+export { dragAndDropSelectors } from './drag_and_drop';
+export { inputsSelectors } from './inputs';
diff --git a/x-pack/plugins/siem/public/store/store.ts b/x-pack/plugins/siem/public/common/store/store.ts
similarity index 87%
rename from x-pack/plugins/siem/public/store/store.ts
rename to x-pack/plugins/siem/public/common/store/store.ts
index 2af0f87b4494d9..ea7cb417fb24b2 100644
--- a/x-pack/plugins/siem/public/store/store.ts
+++ b/x-pack/plugins/siem/public/common/store/store.ts
@@ -9,13 +9,13 @@ import { Action, applyMiddleware, compose, createStore as createReduxStore, Stor
 import { createEpicMiddleware } from 'redux-observable';
 import { Observable } from 'rxjs';
 
-import { AppApolloClient } from '../lib/lib';
 import { telemetryMiddleware } from '../lib/telemetry';
 import { appSelectors } from './app';
-import { timelineSelectors } from './timeline';
+import { timelineSelectors } from '../../timelines/store/timeline';
 import { inputsSelectors } from './inputs';
-import { State, initialState, reducer } from './reducer';
+import { State, SubPluginsInitReducer, createReducer } from './reducer';
 import { createRootEpic } from './epic';
+import { AppApolloClient } from '../lib/lib';
 
 type ComposeType = typeof compose;
 declare global {
@@ -24,8 +24,10 @@ declare global {
   }
 }
 let store: Store<State, Action> | null = null;
+export { SubPluginsInitReducer };
 export const createStore = (
-  state: State = initialState,
+  state: State,
+  pluginsReducer: SubPluginsInitReducer,
   apolloClient: Observable<AppApolloClient>
 ): Store<State, Action> => {
   const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
@@ -45,7 +47,7 @@ export const createStore = (
   );
 
   store = createReduxStore(
-    reducer,
+    createReducer(pluginsReducer),
     state,
     composeEnhancers(applyMiddleware(epicMiddleware, telemetryMiddleware))
   );
diff --git a/x-pack/plugins/siem/public/store/types.ts b/x-pack/plugins/siem/public/common/store/types.ts
similarity index 100%
rename from x-pack/plugins/siem/public/store/types.ts
rename to x-pack/plugins/siem/public/common/store/types.ts
diff --git a/x-pack/plugins/siem/public/pages/common/translations.ts b/x-pack/plugins/siem/public/common/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/common/translations.ts
rename to x-pack/plugins/siem/public/common/translations.ts
diff --git a/x-pack/plugins/siem/public/utils/api/index.ts b/x-pack/plugins/siem/public/common/utils/api/index.ts
similarity index 100%
rename from x-pack/plugins/siem/public/utils/api/index.ts
rename to x-pack/plugins/siem/public/common/utils/api/index.ts
diff --git a/x-pack/plugins/siem/public/utils/apollo_context.ts b/x-pack/plugins/siem/public/common/utils/apollo_context.ts
similarity index 100%
rename from x-pack/plugins/siem/public/utils/apollo_context.ts
rename to x-pack/plugins/siem/public/common/utils/apollo_context.ts
diff --git a/x-pack/plugins/siem/public/utils/default_date_settings.test.ts b/x-pack/plugins/siem/public/common/utils/default_date_settings.test.ts
similarity index 99%
rename from x-pack/plugins/siem/public/utils/default_date_settings.test.ts
rename to x-pack/plugins/siem/public/common/utils/default_date_settings.test.ts
index 9dc179ba7a6e2d..3ae3ef2326ea2b 100644
--- a/x-pack/plugins/siem/public/utils/default_date_settings.test.ts
+++ b/x-pack/plugins/siem/public/common/utils/default_date_settings.test.ts
@@ -21,7 +21,7 @@ import {
   DEFAULT_INTERVAL_PAUSE,
   DEFAULT_INTERVAL_VALUE,
   DEFAULT_INTERVAL_TYPE,
-} from '../../common/constants';
+} from '../../../common/constants';
 import { KibanaServices } from '../lib/kibana';
 import { Policy } from '../store/inputs/model';
 
@@ -30,7 +30,7 @@ import { Policy } from '../store/inputs/model';
 // we have to repeat ourselves once
 const DEFAULT_FROM_DATE = '1983-05-31T13:03:54.234Z';
 const DEFAULT_TO_DATE = '1990-05-31T13:03:54.234Z';
-jest.mock('../../common/constants', () => ({
+jest.mock('../../../common/constants', () => ({
   DEFAULT_FROM: '1983-05-31T13:03:54.234Z',
   DEFAULT_TO: '1990-05-31T13:03:54.234Z',
   DEFAULT_INTERVAL_PAUSE: true,
diff --git a/x-pack/plugins/siem/public/utils/default_date_settings.ts b/x-pack/plugins/siem/public/common/utils/default_date_settings.ts
similarity index 98%
rename from x-pack/plugins/siem/public/utils/default_date_settings.ts
rename to x-pack/plugins/siem/public/common/utils/default_date_settings.ts
index c4869a4851ae50..3523a02ea44f50 100644
--- a/x-pack/plugins/siem/public/utils/default_date_settings.ts
+++ b/x-pack/plugins/siem/public/common/utils/default_date_settings.ts
@@ -15,7 +15,7 @@ import {
   DEFAULT_TO,
   DEFAULT_INTERVAL_TYPE,
   DEFAULT_INTERVAL_VALUE,
-} from '../../common/constants';
+} from '../../../common/constants';
 import { KibanaServices } from '../lib/kibana';
 import { Policy } from '../store/inputs/model';
 
diff --git a/x-pack/plugins/siem/public/utils/kql/use_update_kql.test.tsx b/x-pack/plugins/siem/public/common/utils/kql/use_update_kql.test.tsx
similarity index 92%
rename from x-pack/plugins/siem/public/utils/kql/use_update_kql.test.tsx
rename to x-pack/plugins/siem/public/common/utils/kql/use_update_kql.test.tsx
index b70a5432e47f84..9b1a397deb17fb 100644
--- a/x-pack/plugins/siem/public/utils/kql/use_update_kql.test.tsx
+++ b/x-pack/plugins/siem/public/common/utils/kql/use_update_kql.test.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { applyKqlFilterQuery as dispatchApplyTimelineFilterQuery } from '../../store/timeline/actions';
+import { applyKqlFilterQuery as dispatchApplyTimelineFilterQuery } from '../../../timelines/store/timeline/actions';
 
 import { mockIndexPattern } from '../../mock/index_pattern';
 import { useUpdateKql } from './use_update_kql';
@@ -14,7 +14,7 @@ mockDispatch.mockImplementation(fn => fn);
 
 const applyTimelineKqlMock: jest.Mock = (dispatchApplyTimelineFilterQuery as unknown) as jest.Mock;
 
-jest.mock('../../store/timeline/actions', () => ({
+jest.mock('../../../timelines/store/timeline/actions', () => ({
   applyKqlFilterQuery: jest.fn(),
 }));
 
diff --git a/x-pack/plugins/siem/public/utils/kql/use_update_kql.tsx b/x-pack/plugins/siem/public/common/utils/kql/use_update_kql.tsx
similarity index 96%
rename from x-pack/plugins/siem/public/utils/kql/use_update_kql.tsx
rename to x-pack/plugins/siem/public/common/utils/kql/use_update_kql.tsx
index af993588f7e0dc..d1f5b40086ceaa 100644
--- a/x-pack/plugins/siem/public/utils/kql/use_update_kql.tsx
+++ b/x-pack/plugins/siem/public/common/utils/kql/use_update_kql.tsx
@@ -9,7 +9,7 @@ import { IIndexPattern } from 'src/plugins/data/public';
 import deepEqual from 'fast-deep-equal';
 
 import { KueryFilterQuery } from '../../store';
-import { applyKqlFilterQuery as dispatchApplyTimelineFilterQuery } from '../../store/timeline/actions';
+import { applyKqlFilterQuery as dispatchApplyTimelineFilterQuery } from '../../../timelines/store/timeline/actions';
 import { convertKueryToElasticSearchQuery } from '../../lib/keury';
 import { RefetchKql } from '../../store/inputs/model';
 
diff --git a/x-pack/plugins/siem/public/utils/logo_endpoint/64_color.svg b/x-pack/plugins/siem/public/common/utils/logo_endpoint/64_color.svg
similarity index 100%
rename from x-pack/plugins/siem/public/utils/logo_endpoint/64_color.svg
rename to x-pack/plugins/siem/public/common/utils/logo_endpoint/64_color.svg
diff --git a/x-pack/plugins/siem/public/utils/route/helpers.ts b/x-pack/plugins/siem/public/common/utils/route/helpers.ts
similarity index 100%
rename from x-pack/plugins/siem/public/utils/route/helpers.ts
rename to x-pack/plugins/siem/public/common/utils/route/helpers.ts
diff --git a/x-pack/plugins/siem/public/common/utils/route/index.test.tsx b/x-pack/plugins/siem/public/common/utils/route/index.test.tsx
new file mode 100644
index 00000000000000..95e40b0f66301a
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/utils/route/index.test.tsx
@@ -0,0 +1,205 @@
+/*
+ * 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 { mount } from 'enzyme';
+import React from 'react';
+
+import { HostsTableType } from '../../../hosts/store/model';
+import { RouteSpyState } from './types';
+import { ManageRoutesSpy } from './manage_spy_routes';
+import { SpyRouteComponent } from './spy_routes';
+import { useRouteSpy } from './use_route_spy';
+
+type Action = 'PUSH' | 'POP' | 'REPLACE';
+const pop: Action = 'POP';
+
+const defaultLocation = {
+  hash: '',
+  pathname: '/hosts',
+  search: '',
+  state: '',
+};
+
+export const mockHistory = {
+  action: pop,
+  block: jest.fn(),
+  createHref: jest.fn(),
+  go: jest.fn(),
+  goBack: jest.fn(),
+  goForward: jest.fn(),
+  length: 2,
+  listen: jest.fn(),
+  location: defaultLocation,
+  push: jest.fn(),
+  replace: jest.fn(),
+};
+
+const dispatchMock = jest.fn();
+const mockRoutes: RouteSpyState = {
+  pageName: '',
+  detailName: undefined,
+  tabName: undefined,
+  search: '',
+  pathName: '/',
+  history: mockHistory,
+};
+
+const mockUseRouteSpy: jest.Mock = useRouteSpy as jest.Mock;
+jest.mock('./use_route_spy', () => ({
+  useRouteSpy: jest.fn(),
+}));
+
+describe('Spy Routes', () => {
+  describe('At Initialization of the app', () => {
+    beforeEach(() => {
+      dispatchMock.mockReset();
+      dispatchMock.mockClear();
+    });
+    test('Make sure we update search state first', () => {
+      const pathname = '/';
+      mockUseRouteSpy.mockImplementation(() => [mockRoutes, dispatchMock]);
+      mount(
+        <ManageRoutesSpy>
+          <SpyRouteComponent
+            location={{ hash: '', pathname, search: '?importantQueryString="really"', state: '' }}
+            history={mockHistory}
+            match={{
+              isExact: false,
+              path: pathname,
+              url: pathname,
+              params: {
+                pageName: undefined,
+                detailName: '',
+                tabName: HostsTableType.hosts,
+                search: '',
+                flowTarget: undefined,
+              },
+            }}
+          />
+        </ManageRoutesSpy>
+      );
+
+      expect(dispatchMock.mock.calls[0]).toEqual([
+        {
+          type: 'updateSearch',
+          search: '?importantQueryString="really"',
+        },
+      ]);
+    });
+
+    test('Make sure we update search state first and then update the route but keeping the initial search', () => {
+      const pathname = '/hosts/allHosts';
+      mockUseRouteSpy.mockImplementation(() => [mockRoutes, dispatchMock]);
+      mount(
+        <ManageRoutesSpy>
+          <SpyRouteComponent
+            location={{ hash: '', pathname, search: '?importantQueryString="really"', state: '' }}
+            history={mockHistory}
+            match={{
+              isExact: false,
+              path: pathname,
+              url: pathname,
+              params: {
+                pageName: 'hosts',
+                detailName: undefined,
+                tabName: HostsTableType.hosts,
+                search: '?IdoNotWantToSeeYou="true"',
+                flowTarget: undefined,
+              },
+            }}
+          />
+        </ManageRoutesSpy>
+      );
+
+      expect(dispatchMock.mock.calls[0]).toEqual([
+        {
+          type: 'updateSearch',
+          search: '?importantQueryString="really"',
+        },
+      ]);
+
+      expect(dispatchMock.mock.calls[1]).toEqual([
+        {
+          route: {
+            detailName: undefined,
+            history: mockHistory,
+            pageName: 'hosts',
+            pathName: pathname,
+            tabName: HostsTableType.hosts,
+          },
+          type: 'updateRouteWithOutSearch',
+        },
+      ]);
+    });
+  });
+
+  describe('When app is running', () => {
+    beforeEach(() => {
+      dispatchMock.mockReset();
+      dispatchMock.mockClear();
+    });
+    test('Update route should be updated when there is changed detected', () => {
+      const pathname = '/hosts/allHosts';
+      const newPathname = `hosts/${HostsTableType.authentications}`;
+      mockUseRouteSpy.mockImplementation(() => [mockRoutes, dispatchMock]);
+      const wrapper = mount(
+        <SpyRouteComponent
+          location={{ hash: '', pathname, search: '?importantQueryString="really"', state: '' }}
+          history={mockHistory}
+          match={{
+            isExact: false,
+            path: pathname,
+            url: pathname,
+            params: {
+              pageName: 'hosts',
+              detailName: undefined,
+              tabName: HostsTableType.hosts,
+              search: '?IdoNotWantToSeeYou="true"',
+              flowTarget: undefined,
+            },
+          }}
+        />
+      );
+
+      dispatchMock.mockReset();
+      dispatchMock.mockClear();
+
+      wrapper.setProps({
+        location: {
+          hash: '',
+          pathname: newPathname,
+          search: '?updated="true"',
+          state: '',
+        },
+        match: {
+          isExact: false,
+          path: newPathname,
+          url: newPathname,
+          params: {
+            pageName: 'hosts',
+            detailName: undefined,
+            tabName: HostsTableType.authentications,
+            search: '',
+          },
+        },
+      });
+      wrapper.update();
+      expect(dispatchMock.mock.calls[0]).toEqual([
+        {
+          route: {
+            detailName: undefined,
+            history: mockHistory,
+            pageName: 'hosts',
+            pathName: newPathname,
+            tabName: HostsTableType.authentications,
+            search: '?updated="true"',
+          },
+          type: 'updateRoute',
+        },
+      ]);
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/utils/route/manage_spy_routes.tsx b/x-pack/plugins/siem/public/common/utils/route/manage_spy_routes.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/utils/route/manage_spy_routes.tsx
rename to x-pack/plugins/siem/public/common/utils/route/manage_spy_routes.tsx
diff --git a/x-pack/plugins/siem/public/utils/route/spy_routes.tsx b/x-pack/plugins/siem/public/common/utils/route/spy_routes.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/utils/route/spy_routes.tsx
rename to x-pack/plugins/siem/public/common/utils/route/spy_routes.tsx
diff --git a/x-pack/plugins/siem/public/common/utils/route/types.ts b/x-pack/plugins/siem/public/common/utils/route/types.ts
new file mode 100644
index 00000000000000..912da545a66a3c
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/utils/route/types.ts
@@ -0,0 +1,70 @@
+/*
+ * 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 * as H from 'history';
+import React from 'react';
+import { RouteComponentProps } from 'react-router-dom';
+
+import { TimelineType } from '../../../../common/types/timeline';
+
+import { HostsTableType } from '../../../hosts/store/model';
+import { NetworkRouteType } from '../../../network/pages/navigation/types';
+import { FlowTarget } from '../../../graphql/types';
+
+export type SiemRouteType = HostsTableType | NetworkRouteType | TimelineType;
+export interface RouteSpyState {
+  pageName: string;
+  detailName: string | undefined;
+  tabName: SiemRouteType | undefined;
+  search: string;
+  pathName: string;
+  history?: H.History;
+  flowTarget?: FlowTarget;
+  state?: Record<string, string | undefined>;
+}
+
+export interface HostRouteSpyState extends RouteSpyState {
+  tabName: HostsTableType | undefined;
+}
+
+export interface NetworkRouteSpyState extends RouteSpyState {
+  tabName: NetworkRouteType | undefined;
+}
+
+export interface TimelineRouteSpyState extends RouteSpyState {
+  tabName: TimelineType | undefined;
+}
+
+export type RouteSpyAction =
+  | {
+      type: 'updateSearch';
+      search: string;
+    }
+  | {
+      type: 'updateRouteWithOutSearch';
+      route: Pick<
+        RouteSpyState,
+        'pageName' & 'detailName' & 'tabName' & 'pathName' & 'history' & 'state'
+      >;
+    }
+  | {
+      type: 'updateRoute';
+      route: RouteSpyState;
+    };
+
+export interface ManageRoutesSpyProps {
+  children: React.ReactNode;
+}
+
+export type SpyRouteProps = RouteComponentProps<{
+  pageName: string | undefined;
+  detailName: string | undefined;
+  tabName: HostsTableType | undefined;
+  search: string;
+  flowTarget: FlowTarget | undefined;
+}> & {
+  state?: Record<string, string | undefined>;
+};
diff --git a/x-pack/plugins/siem/public/utils/route/use_route_spy.tsx b/x-pack/plugins/siem/public/common/utils/route/use_route_spy.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/utils/route/use_route_spy.tsx
rename to x-pack/plugins/siem/public/common/utils/route/use_route_spy.tsx
diff --git a/x-pack/plugins/siem/public/common/utils/saved_query_services/index.tsx b/x-pack/plugins/siem/public/common/utils/saved_query_services/index.tsx
new file mode 100644
index 00000000000000..a8ee10ba2b8014
--- /dev/null
+++ b/x-pack/plugins/siem/public/common/utils/saved_query_services/index.tsx
@@ -0,0 +1,27 @@
+/*
+ * 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 { useState, useEffect } from 'react';
+import {
+  SavedQueryService,
+  createSavedQueryService,
+} from '../../../../../../../src/plugins/data/public';
+
+import { useKibana } from '../../lib/kibana';
+
+export const useSavedQueryServices = () => {
+  const kibana = useKibana();
+  const client = kibana.services.savedObjects.client;
+
+  const [savedQueryService, setSavedQueryService] = useState<SavedQueryService>(
+    createSavedQueryService(client)
+  );
+
+  useEffect(() => {
+    setSavedQueryService(createSavedQueryService(client));
+  }, [client]);
+  return savedQueryService;
+};
diff --git a/x-pack/plugins/siem/public/utils/timeline/use_show_timeline.tsx b/x-pack/plugins/siem/public/common/utils/timeline/use_show_timeline.tsx
similarity index 94%
rename from x-pack/plugins/siem/public/utils/timeline/use_show_timeline.tsx
rename to x-pack/plugins/siem/public/common/utils/timeline/use_show_timeline.tsx
index e969330b809ff1..78f22a86c1893f 100644
--- a/x-pack/plugins/siem/public/utils/timeline/use_show_timeline.tsx
+++ b/x-pack/plugins/siem/public/common/utils/timeline/use_show_timeline.tsx
@@ -7,7 +7,7 @@
 import { useLocation } from 'react-router-dom';
 
 import { useState, useEffect } from 'react';
-import { SiemPageName } from '../../pages/home/types';
+import { SiemPageName } from '../../../app/types';
 
 const hideTimelineForRoutes = [`/${SiemPageName.case}/configure`];
 
diff --git a/x-pack/plugins/siem/public/utils/use_mount_appended.ts b/x-pack/plugins/siem/public/common/utils/use_mount_appended.ts
similarity index 100%
rename from x-pack/plugins/siem/public/utils/use_mount_appended.ts
rename to x-pack/plugins/siem/public/common/utils/use_mount_appended.ts
diff --git a/x-pack/plugins/siem/public/utils/validators/index.ts b/x-pack/plugins/siem/public/common/utils/validators/index.ts
similarity index 100%
rename from x-pack/plugins/siem/public/utils/validators/index.ts
rename to x-pack/plugins/siem/public/common/utils/validators/index.ts
diff --git a/x-pack/plugins/siem/public/components/alerts_viewer/histogram_configs.ts b/x-pack/plugins/siem/public/components/alerts_viewer/histogram_configs.ts
deleted file mode 100644
index fbcf4c6ed039b6..00000000000000
--- a/x-pack/plugins/siem/public/components/alerts_viewer/histogram_configs.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * 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 * as i18n from './translations';
-import { MatrixHistogramOption, MatrixHisrogramConfigs } from '../matrix_histogram/types';
-import { HistogramType } from '../../graphql/types';
-
-export const alertsStackByOptions: MatrixHistogramOption[] = [
-  {
-    text: 'event.category',
-    value: 'event.category',
-  },
-  {
-    text: 'event.module',
-    value: 'event.module',
-  },
-];
-
-const DEFAULT_STACK_BY = 'event.module';
-
-export const histogramConfigs: MatrixHisrogramConfigs = {
-  defaultStackByOption:
-    alertsStackByOptions.find(o => o.text === DEFAULT_STACK_BY) ?? alertsStackByOptions[1],
-  errorMessage: i18n.ERROR_FETCHING_ALERTS_DATA,
-  histogramType: HistogramType.alerts,
-  stackByOptions: alertsStackByOptions,
-  subtitle: undefined,
-  title: i18n.ALERTS_GRAPH_TITLE,
-};
diff --git a/x-pack/plugins/siem/public/components/alerts_viewer/index.tsx b/x-pack/plugins/siem/public/components/alerts_viewer/index.tsx
deleted file mode 100644
index 957feb6244792a..00000000000000
--- a/x-pack/plugins/siem/public/components/alerts_viewer/index.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-/*
- * 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, { useEffect, useCallback, useMemo } from 'react';
-import numeral from '@elastic/numeral';
-
-import { DEFAULT_NUMBER_FORMAT } from '../../../common/constants';
-import { AlertsComponentsQueryProps } from './types';
-import { AlertsTable } from './alerts_table';
-import * as i18n from './translations';
-import { useUiSetting$ } from '../../lib/kibana';
-import { MatrixHistogramContainer } from '../matrix_histogram';
-import { histogramConfigs } from './histogram_configs';
-import { MatrixHisrogramConfigs } from '../matrix_histogram/types';
-const ID = 'alertsOverTimeQuery';
-
-export const AlertsView = ({
-  deleteQuery,
-  endDate,
-  filterQuery,
-  pageFilters,
-  setQuery,
-  startDate,
-  type,
-}: AlertsComponentsQueryProps) => {
-  const [defaultNumberFormat] = useUiSetting$<string>(DEFAULT_NUMBER_FORMAT);
-  const getSubtitle = useCallback(
-    (totalCount: number) =>
-      `${i18n.SHOWING}: ${numeral(totalCount).format(defaultNumberFormat)} ${i18n.UNIT(
-        totalCount
-      )}`,
-    []
-  );
-  const alertsHistogramConfigs: MatrixHisrogramConfigs = useMemo(
-    () => ({
-      ...histogramConfigs,
-      subtitle: getSubtitle,
-    }),
-    [getSubtitle]
-  );
-  useEffect(() => {
-    return () => {
-      if (deleteQuery) {
-        deleteQuery({ id: ID });
-      }
-    };
-  }, [deleteQuery]);
-
-  return (
-    <>
-      <MatrixHistogramContainer
-        endDate={endDate}
-        filterQuery={filterQuery}
-        id={ID}
-        setQuery={setQuery}
-        sourceId="default"
-        startDate={startDate}
-        type={type}
-        {...alertsHistogramConfigs}
-      />
-      <AlertsTable endDate={endDate} startDate={startDate} pageFilters={pageFilters} />
-    </>
-  );
-};
-AlertsView.displayName = 'AlertsView';
diff --git a/x-pack/plugins/siem/public/components/alerts_viewer/types.ts b/x-pack/plugins/siem/public/components/alerts_viewer/types.ts
deleted file mode 100644
index 321f7214c8fef9..00000000000000
--- a/x-pack/plugins/siem/public/components/alerts_viewer/types.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-/*
- * 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 { Filter } from '../../../../../../src/plugins/data/public';
-import { HostsComponentsQueryProps } from '../../pages/hosts/navigation/types';
-import { NetworkComponentQueryProps } from '../../pages/network/navigation/types';
-import { MatrixHistogramOption } from '../matrix_histogram/types';
-
-type CommonQueryProps = HostsComponentsQueryProps | NetworkComponentQueryProps;
-export interface AlertsComponentsQueryProps
-  extends Pick<
-    CommonQueryProps,
-    'deleteQuery' | 'endDate' | 'filterQuery' | 'skip' | 'setQuery' | 'startDate' | 'type'
-  > {
-  pageFilters: Filter[];
-  stackByOptions?: MatrixHistogramOption[];
-  defaultFilters?: Filter[];
-  defaultStackByOption?: MatrixHistogramOption;
-}
diff --git a/x-pack/plugins/siem/public/components/arrows/index.test.tsx b/x-pack/plugins/siem/public/components/arrows/index.test.tsx
deleted file mode 100644
index 5404a1ac43844f..00000000000000
--- a/x-pack/plugins/siem/public/components/arrows/index.test.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
- * 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 { mount } from 'enzyme';
-import React from 'react';
-
-import { TestProviders } from '../../mock';
-
-import { ArrowBody, ArrowHead } from '.';
-
-describe('arrows', () => {
-  describe('ArrowBody', () => {
-    test('renders correctly against snapshot', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <ArrowBody height={3} />
-        </TestProviders>
-      );
-      expect(wrapper.find('ArrowBody')).toMatchSnapshot();
-    });
-  });
-
-  describe('ArrowHead', () => {
-    test('it renders an arrow head icon', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <ArrowHead direction={'arrowLeft'} />
-        </TestProviders>
-      );
-
-      expect(
-        wrapper
-          .find('[data-test-subj="arrow-icon"]')
-          .first()
-          .exists()
-      ).toBe(true);
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/autocomplete_field/index.test.tsx b/x-pack/plugins/siem/public/components/autocomplete_field/index.test.tsx
deleted file mode 100644
index 72236d799f995c..00000000000000
--- a/x-pack/plugins/siem/public/components/autocomplete_field/index.test.tsx
+++ /dev/null
@@ -1,385 +0,0 @@
-/*
- * 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 { EuiFieldSearch } from '@elastic/eui';
-import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
-import { mount, shallow } from 'enzyme';
-import { noop } from 'lodash/fp';
-import React from 'react';
-import { ThemeProvider } from 'styled-components';
-import { QuerySuggestion, QuerySuggestionTypes } from '../../../../../../src/plugins/data/public';
-
-import { TestProviders } from '../../mock';
-
-import { AutocompleteField } from '.';
-
-const mockAutoCompleteData: QuerySuggestion[] = [
-  {
-    type: QuerySuggestionTypes.Field,
-    text: 'agent.ephemeral_id ',
-    description:
-      '<p>Filter results that contain <span class="suggestionItem__callout">agent.ephemeral_id</span></p>',
-    start: 0,
-    end: 1,
-  },
-  {
-    type: QuerySuggestionTypes.Field,
-    text: 'agent.hostname ',
-    description:
-      '<p>Filter results that contain <span class="suggestionItem__callout">agent.hostname</span></p>',
-    start: 0,
-    end: 1,
-  },
-  {
-    type: QuerySuggestionTypes.Field,
-    text: 'agent.id ',
-    description:
-      '<p>Filter results that contain <span class="suggestionItem__callout">agent.id</span></p>',
-    start: 0,
-    end: 1,
-  },
-  {
-    type: QuerySuggestionTypes.Field,
-    text: 'agent.name ',
-    description:
-      '<p>Filter results that contain <span class="suggestionItem__callout">agent.name</span></p>',
-    start: 0,
-    end: 1,
-  },
-  {
-    type: QuerySuggestionTypes.Field,
-    text: 'agent.type ',
-    description:
-      '<p>Filter results that contain <span class="suggestionItem__callout">agent.type</span></p>',
-    start: 0,
-    end: 1,
-  },
-  {
-    type: QuerySuggestionTypes.Field,
-    text: 'agent.version ',
-    description:
-      '<p>Filter results that contain <span class="suggestionItem__callout">agent.version</span></p>',
-    start: 0,
-    end: 1,
-  },
-  {
-    type: QuerySuggestionTypes.Field,
-    text: 'agent.test1 ',
-    description:
-      '<p>Filter results that contain <span class="suggestionItem__callout">agent.test1</span></p>',
-    start: 0,
-    end: 1,
-  },
-  {
-    type: QuerySuggestionTypes.Field,
-    text: 'agent.test2 ',
-    description:
-      '<p>Filter results that contain <span class="suggestionItem__callout">agent.test2</span></p>',
-    start: 0,
-    end: 1,
-  },
-  {
-    type: QuerySuggestionTypes.Field,
-    text: 'agent.test3 ',
-    description:
-      '<p>Filter results that contain <span class="suggestionItem__callout">agent.test3</span></p>',
-    start: 0,
-    end: 1,
-  },
-  {
-    type: QuerySuggestionTypes.Field,
-    text: 'agent.test4 ',
-    description:
-      '<p>Filter results that contain <span class="suggestionItem__callout">agent.test4</span></p>',
-    start: 0,
-    end: 1,
-  },
-];
-
-describe('Autocomplete', () => {
-  describe('rendering', () => {
-    test('it renders against snapshot', () => {
-      const placeholder = 'myPlaceholder';
-
-      const wrapper = shallow(
-        <AutocompleteField
-          isLoadingSuggestions={false}
-          isValid={false}
-          loadSuggestions={noop}
-          onChange={noop}
-          onSubmit={noop}
-          placeholder={placeholder}
-          suggestions={[]}
-          value={''}
-        />
-      );
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    test('it is rendering with placeholder', () => {
-      const placeholder = 'myPlaceholder';
-
-      const wrapper = mount(
-        <AutocompleteField
-          isLoadingSuggestions={false}
-          isValid={false}
-          loadSuggestions={noop}
-          onChange={noop}
-          onSubmit={noop}
-          placeholder={placeholder}
-          suggestions={[]}
-          value={''}
-        />
-      );
-      const input = wrapper.find('input[type="search"]');
-      expect(input.find('[placeholder]').props().placeholder).toEqual(placeholder);
-    });
-
-    test('Rendering suggested items', () => {
-      const wrapper = mount(
-        <ThemeProvider theme={() => ({ eui: euiDarkVars, darkMode: true })}>
-          <AutocompleteField
-            isLoadingSuggestions={false}
-            isValid={false}
-            loadSuggestions={noop}
-            onChange={noop}
-            onSubmit={noop}
-            placeholder=""
-            suggestions={mockAutoCompleteData}
-            value={''}
-          />
-        </ThemeProvider>
-      );
-      const wrapperAutocompleteField = wrapper.find(AutocompleteField);
-      wrapperAutocompleteField.setState({ areSuggestionsVisible: true });
-      wrapper.update();
-
-      expect(wrapper.find('.euiPanel div[data-test-subj="suggestion-item"]').length).toEqual(10);
-    });
-
-    test('Should Not render suggested items if loading new suggestions', () => {
-      const wrapper = mount(
-        <ThemeProvider theme={() => ({ eui: euiDarkVars, darkMode: true })}>
-          <AutocompleteField
-            isLoadingSuggestions={true}
-            isValid={false}
-            loadSuggestions={noop}
-            onChange={noop}
-            onSubmit={noop}
-            placeholder=""
-            suggestions={mockAutoCompleteData}
-            value={''}
-          />
-        </ThemeProvider>
-      );
-      const wrapperAutocompleteField = wrapper.find(AutocompleteField);
-      wrapperAutocompleteField.setState({ areSuggestionsVisible: true });
-      wrapper.update();
-
-      expect(wrapper.find('.euiPanel div[data-test-subj="suggestion-item"]').length).toEqual(0);
-    });
-  });
-
-  describe('events', () => {
-    test('OnChange should have been called', () => {
-      const onChange = jest.fn((value: string) => value);
-
-      const wrapper = mount(
-        <AutocompleteField
-          isLoadingSuggestions={false}
-          isValid={false}
-          loadSuggestions={noop}
-          onChange={onChange}
-          onSubmit={noop}
-          placeholder=""
-          suggestions={[]}
-          value={''}
-        />
-      );
-      const wrapperFixedEuiFieldSearch = wrapper.find('input');
-      wrapperFixedEuiFieldSearch.simulate('change', { target: { value: 'test' } });
-      expect(onChange).toHaveBeenCalled();
-    });
-  });
-
-  test('OnSubmit should have been called by keying enter on the search input', () => {
-    const onSubmit = jest.fn((value: string) => value);
-
-    const wrapper = mount(
-      <AutocompleteField
-        isLoadingSuggestions={false}
-        isValid={true}
-        loadSuggestions={noop}
-        onChange={noop}
-        onSubmit={onSubmit}
-        placeholder=""
-        suggestions={mockAutoCompleteData}
-        value={'filter: query'}
-      />
-    );
-    const wrapperAutocompleteField = wrapper.find(AutocompleteField);
-    wrapperAutocompleteField.setState({ selectedIndex: null });
-    const wrapperFixedEuiFieldSearch = wrapper.find('input');
-    wrapperFixedEuiFieldSearch.simulate('keydown', { key: 'Enter', preventDefault: noop });
-    expect(onSubmit).toHaveBeenCalled();
-  });
-
-  test('OnSubmit should have been called by onSearch event on the input', () => {
-    const onSubmit = jest.fn((value: string) => value);
-
-    const wrapper = mount(
-      <AutocompleteField
-        isLoadingSuggestions={false}
-        isValid={true}
-        loadSuggestions={noop}
-        onChange={noop}
-        onSubmit={onSubmit}
-        placeholder=""
-        suggestions={mockAutoCompleteData}
-        value={'filter: query'}
-      />
-    );
-    const wrapperAutocompleteField = wrapper.find(AutocompleteField);
-    wrapperAutocompleteField.setState({ selectedIndex: null });
-    const wrapperFixedEuiFieldSearch = wrapper.find(EuiFieldSearch);
-    // TODO: FixedEuiFieldSearch fails to import
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (wrapperFixedEuiFieldSearch as any).props().onSearch();
-    expect(onSubmit).toHaveBeenCalled();
-  });
-
-  test('OnChange should have been called if keying enter on a suggested item selected', () => {
-    const onChange = jest.fn((value: string) => value);
-
-    const wrapper = mount(
-      <AutocompleteField
-        isLoadingSuggestions={false}
-        isValid={false}
-        loadSuggestions={noop}
-        onChange={onChange}
-        onSubmit={noop}
-        placeholder=""
-        suggestions={mockAutoCompleteData}
-        value={''}
-      />
-    );
-    const wrapperAutocompleteField = wrapper.find(AutocompleteField);
-    wrapperAutocompleteField.setState({ selectedIndex: 1 });
-    const wrapperFixedEuiFieldSearch = wrapper.find('input');
-    wrapperFixedEuiFieldSearch.simulate('keydown', { key: 'Enter', preventDefault: noop });
-    expect(onChange).toHaveBeenCalled();
-  });
-
-  test('OnChange should be called if tab is pressed when a suggested item is selected', () => {
-    const onChange = jest.fn((value: string) => value);
-
-    const wrapper = mount(
-      <AutocompleteField
-        isLoadingSuggestions={false}
-        isValid={false}
-        loadSuggestions={noop}
-        onChange={onChange}
-        onSubmit={noop}
-        placeholder=""
-        suggestions={mockAutoCompleteData}
-        value={''}
-      />
-    );
-    const wrapperAutocompleteField = wrapper.find(AutocompleteField);
-    wrapperAutocompleteField.setState({ selectedIndex: 1 });
-    const wrapperFixedEuiFieldSearch = wrapper.find('input');
-    wrapperFixedEuiFieldSearch.simulate('keydown', { key: 'Tab', preventDefault: noop });
-    expect(onChange).toHaveBeenCalled();
-  });
-
-  test('OnChange should NOT be called if tab is pressed when more than one item is suggested, and no selection has been made', () => {
-    const onChange = jest.fn((value: string) => value);
-
-    const wrapper = mount(
-      <AutocompleteField
-        isLoadingSuggestions={false}
-        isValid={false}
-        loadSuggestions={noop}
-        onChange={onChange}
-        onSubmit={noop}
-        placeholder=""
-        suggestions={mockAutoCompleteData}
-        value={''}
-      />
-    );
-
-    const wrapperFixedEuiFieldSearch = wrapper.find('input');
-    wrapperFixedEuiFieldSearch.simulate('keydown', { key: 'Tab', preventDefault: noop });
-    expect(onChange).not.toHaveBeenCalled();
-  });
-
-  test('OnChange should be called if tab is pressed when only one item is suggested, even though that item is NOT selected', () => {
-    const onChange = jest.fn((value: string) => value);
-    const onlyOneSuggestion = [mockAutoCompleteData[0]];
-
-    const wrapper = mount(
-      <TestProviders>
-        <AutocompleteField
-          isLoadingSuggestions={false}
-          isValid={false}
-          loadSuggestions={noop}
-          onChange={onChange}
-          onSubmit={noop}
-          placeholder=""
-          suggestions={onlyOneSuggestion}
-          value={''}
-        />
-      </TestProviders>
-    );
-
-    const wrapperAutocompleteField = wrapper.find(AutocompleteField);
-    wrapperAutocompleteField.setState({ areSuggestionsVisible: true });
-    const wrapperFixedEuiFieldSearch = wrapper.find('input');
-    wrapperFixedEuiFieldSearch.simulate('keydown', { key: 'Tab', preventDefault: noop });
-    expect(onChange).toHaveBeenCalled();
-  });
-
-  test('OnChange should NOT be called if tab is pressed when 0 items are suggested', () => {
-    const onChange = jest.fn((value: string) => value);
-
-    const wrapper = mount(
-      <AutocompleteField
-        isLoadingSuggestions={false}
-        isValid={false}
-        loadSuggestions={noop}
-        onChange={onChange}
-        onSubmit={noop}
-        placeholder=""
-        suggestions={[]}
-        value={''}
-      />
-    );
-
-    const wrapperFixedEuiFieldSearch = wrapper.find('input');
-    wrapperFixedEuiFieldSearch.simulate('keydown', { key: 'Tab', preventDefault: noop });
-    expect(onChange).not.toHaveBeenCalled();
-  });
-
-  test('Load more suggestions when arrowdown on the search bar', () => {
-    const loadSuggestions = jest.fn(noop);
-
-    const wrapper = mount(
-      <AutocompleteField
-        isLoadingSuggestions={false}
-        isValid={false}
-        loadSuggestions={loadSuggestions}
-        onChange={noop}
-        onSubmit={noop}
-        placeholder=""
-        suggestions={[]}
-        value={''}
-      />
-    );
-    const wrapperFixedEuiFieldSearch = wrapper.find('input');
-    wrapperFixedEuiFieldSearch.simulate('keydown', { key: 'ArrowDown', preventDefault: noop });
-    expect(loadSuggestions).toHaveBeenCalled();
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/autocomplete_field/index.tsx b/x-pack/plugins/siem/public/components/autocomplete_field/index.tsx
deleted file mode 100644
index 9821bb6048b513..00000000000000
--- a/x-pack/plugins/siem/public/components/autocomplete_field/index.tsx
+++ /dev/null
@@ -1,333 +0,0 @@
-/*
- * 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 {
-  EuiFieldSearch,
-  EuiFieldSearchProps,
-  EuiOutsideClickDetector,
-  EuiPanel,
-} from '@elastic/eui';
-import React from 'react';
-import { QuerySuggestion } from '../../../../../../src/plugins/data/public';
-
-import euiStyled from '../../../../../legacy/common/eui_styled_components';
-
-import { SuggestionItem } from './suggestion_item';
-
-interface AutocompleteFieldProps {
-  'data-test-subj'?: string;
-  isLoadingSuggestions: boolean;
-  isValid: boolean;
-  loadSuggestions: (value: string, cursorPosition: number, maxCount?: number) => void;
-  onSubmit?: (value: string) => void;
-  onChange?: (value: string) => void;
-  placeholder?: string;
-  suggestions: QuerySuggestion[];
-  value: string;
-}
-
-interface AutocompleteFieldState {
-  areSuggestionsVisible: boolean;
-  isFocused: boolean;
-  selectedIndex: number | null;
-}
-
-export class AutocompleteField extends React.PureComponent<
-  AutocompleteFieldProps,
-  AutocompleteFieldState
-> {
-  public readonly state: AutocompleteFieldState = {
-    areSuggestionsVisible: false,
-    isFocused: false,
-    selectedIndex: null,
-  };
-
-  private inputElement: HTMLInputElement | null = null;
-
-  public render() {
-    const {
-      'data-test-subj': dataTestSubj,
-      suggestions,
-      isLoadingSuggestions,
-      isValid,
-      placeholder,
-      value,
-    } = this.props;
-    const { areSuggestionsVisible, selectedIndex } = this.state;
-    return (
-      <EuiOutsideClickDetector onOutsideClick={this.handleBlur}>
-        <AutocompleteContainer>
-          <FixedEuiFieldSearch
-            data-test-subj={dataTestSubj}
-            fullWidth
-            inputRef={this.handleChangeInputRef}
-            isLoading={isLoadingSuggestions}
-            isInvalid={!isValid}
-            onChange={this.handleChange}
-            onFocus={this.handleFocus}
-            onKeyDown={this.handleKeyDown}
-            onKeyUp={this.handleKeyUp}
-            onSearch={this.submit}
-            placeholder={placeholder}
-            value={value}
-          />
-          {areSuggestionsVisible && !isLoadingSuggestions && suggestions.length > 0 ? (
-            <SuggestionsPanel>
-              {suggestions.map((suggestion, suggestionIndex) => (
-                <SuggestionItem
-                  key={suggestion.text}
-                  suggestion={suggestion}
-                  isSelected={suggestionIndex === selectedIndex}
-                  onMouseEnter={this.selectSuggestionAt(suggestionIndex)}
-                  onClick={this.applySuggestionAt(suggestionIndex)}
-                />
-              ))}
-            </SuggestionsPanel>
-          ) : null}
-        </AutocompleteContainer>
-      </EuiOutsideClickDetector>
-    );
-  }
-
-  public componentDidUpdate(prevProps: AutocompleteFieldProps, prevState: AutocompleteFieldState) {
-    const hasNewValue = prevProps.value !== this.props.value;
-    const hasNewSuggestions = prevProps.suggestions !== this.props.suggestions;
-
-    if (hasNewValue) {
-      this.updateSuggestions();
-    }
-
-    if (hasNewSuggestions && this.state.isFocused) {
-      this.showSuggestions();
-    }
-  }
-
-  private handleChangeInputRef = (element: HTMLInputElement | null) => {
-    this.inputElement = element;
-  };
-
-  private handleChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
-    this.changeValue(evt.currentTarget.value);
-  };
-
-  private handleKeyDown = (evt: React.KeyboardEvent<HTMLInputElement>) => {
-    const { suggestions } = this.props;
-    switch (evt.key) {
-      case 'ArrowUp':
-        evt.preventDefault();
-        if (suggestions.length > 0) {
-          this.setState(
-            composeStateUpdaters(withSuggestionsVisible, withPreviousSuggestionSelected)
-          );
-        }
-        break;
-      case 'ArrowDown':
-        evt.preventDefault();
-        if (suggestions.length > 0) {
-          this.setState(composeStateUpdaters(withSuggestionsVisible, withNextSuggestionSelected));
-        } else {
-          this.updateSuggestions();
-        }
-        break;
-      case 'Enter':
-        evt.preventDefault();
-        if (this.state.selectedIndex !== null) {
-          this.applySelectedSuggestion();
-        } else {
-          this.submit();
-        }
-        break;
-      case 'Tab':
-        evt.preventDefault();
-        if (this.state.areSuggestionsVisible && this.props.suggestions.length === 1) {
-          this.applySuggestionAt(0)();
-        } else if (this.state.selectedIndex !== null) {
-          this.applySelectedSuggestion();
-        }
-        break;
-      case 'Escape':
-        evt.preventDefault();
-        evt.stopPropagation();
-        this.setState(withSuggestionsHidden);
-        break;
-    }
-  };
-
-  private handleKeyUp = (evt: React.KeyboardEvent<HTMLInputElement>) => {
-    switch (evt.key) {
-      case 'ArrowLeft':
-      case 'ArrowRight':
-      case 'Home':
-      case 'End':
-        this.updateSuggestions();
-        break;
-    }
-  };
-
-  private handleFocus = () => {
-    this.setState(composeStateUpdaters(withSuggestionsVisible, withFocused));
-  };
-
-  private handleBlur = () => {
-    this.setState(composeStateUpdaters(withSuggestionsHidden, withUnfocused));
-  };
-
-  private selectSuggestionAt = (index: number) => () => {
-    this.setState(withSuggestionAtIndexSelected(index));
-  };
-
-  private applySelectedSuggestion = () => {
-    if (this.state.selectedIndex !== null) {
-      this.applySuggestionAt(this.state.selectedIndex)();
-    }
-  };
-
-  private applySuggestionAt = (index: number) => () => {
-    const { value, suggestions } = this.props;
-    const selectedSuggestion = suggestions[index];
-
-    if (!selectedSuggestion) {
-      return;
-    }
-
-    const newValue =
-      value.substr(0, selectedSuggestion.start) +
-      selectedSuggestion.text +
-      value.substr(selectedSuggestion.end);
-
-    this.setState(withSuggestionsHidden);
-    this.changeValue(newValue);
-    this.focusInputElement();
-  };
-
-  private changeValue = (value: string) => {
-    const { onChange } = this.props;
-
-    if (onChange) {
-      onChange(value);
-    }
-  };
-
-  private focusInputElement = () => {
-    if (this.inputElement) {
-      this.inputElement.focus();
-    }
-  };
-
-  private showSuggestions = () => {
-    this.setState(withSuggestionsVisible);
-  };
-
-  private submit = () => {
-    const { isValid, onSubmit, value } = this.props;
-
-    if (isValid && onSubmit) {
-      onSubmit(value);
-    }
-
-    this.setState(withSuggestionsHidden);
-  };
-
-  private updateSuggestions = () => {
-    const inputCursorPosition = this.inputElement ? this.inputElement.selectionStart || 0 : 0;
-    this.props.loadSuggestions(this.props.value, inputCursorPosition, 10);
-  };
-}
-
-type StateUpdater<State, Props = {}> = (
-  prevState: Readonly<State>,
-  prevProps: Readonly<Props>
-) => State | null;
-
-function composeStateUpdaters<State, Props>(...updaters: Array<StateUpdater<State, Props>>) {
-  return (state: State, props: Props) =>
-    updaters.reduce((currentState, updater) => updater(currentState, props) || currentState, state);
-}
-
-const withPreviousSuggestionSelected = (
-  state: AutocompleteFieldState,
-  props: AutocompleteFieldProps
-): AutocompleteFieldState => ({
-  ...state,
-  selectedIndex:
-    props.suggestions.length === 0
-      ? null
-      : state.selectedIndex !== null
-      ? (state.selectedIndex + props.suggestions.length - 1) % props.suggestions.length
-      : Math.max(props.suggestions.length - 1, 0),
-});
-
-const withNextSuggestionSelected = (
-  state: AutocompleteFieldState,
-  props: AutocompleteFieldProps
-): AutocompleteFieldState => ({
-  ...state,
-  selectedIndex:
-    props.suggestions.length === 0
-      ? null
-      : state.selectedIndex !== null
-      ? (state.selectedIndex + 1) % props.suggestions.length
-      : 0,
-});
-
-const withSuggestionAtIndexSelected = (suggestionIndex: number) => (
-  state: AutocompleteFieldState,
-  props: AutocompleteFieldProps
-): AutocompleteFieldState => ({
-  ...state,
-  selectedIndex:
-    props.suggestions.length === 0
-      ? null
-      : suggestionIndex >= 0 && suggestionIndex < props.suggestions.length
-      ? suggestionIndex
-      : 0,
-});
-
-const withSuggestionsVisible = (state: AutocompleteFieldState) => ({
-  ...state,
-  areSuggestionsVisible: true,
-});
-
-const withSuggestionsHidden = (state: AutocompleteFieldState) => ({
-  ...state,
-  areSuggestionsVisible: false,
-  selectedIndex: null,
-});
-
-const withFocused = (state: AutocompleteFieldState) => ({
-  ...state,
-  isFocused: true,
-});
-
-const withUnfocused = (state: AutocompleteFieldState) => ({
-  ...state,
-  isFocused: false,
-});
-
-export const FixedEuiFieldSearch: React.FC<React.InputHTMLAttributes<HTMLInputElement> &
-  EuiFieldSearchProps & {
-    inputRef?: (element: HTMLInputElement | null) => void;
-    onSearch: (value: string) => void;
-  }> = EuiFieldSearch as any; // eslint-disable-line @typescript-eslint/no-explicit-any
-
-const AutocompleteContainer = euiStyled.div`
-  position: relative;
-`;
-
-AutocompleteContainer.displayName = 'AutocompleteContainer';
-
-const SuggestionsPanel = euiStyled(EuiPanel).attrs(() => ({
-  paddingSize: 'none',
-  hasShadow: true,
-}))`
-  position: absolute;
-  width: 100%;
-  margin-top: 2px;
-  overflow: hidden;
-  z-index: ${props => props.theme.eui.euiZLevel1};
-`;
-
-SuggestionsPanel.displayName = 'SuggestionsPanel';
diff --git a/x-pack/plugins/siem/public/components/bytes/index.test.tsx b/x-pack/plugins/siem/public/components/bytes/index.test.tsx
deleted file mode 100644
index d99a909efad102..00000000000000
--- a/x-pack/plugins/siem/public/components/bytes/index.test.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * 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 { TestProviders } from '../../mock';
-import { PreferenceFormattedBytes } from '../formatted_bytes';
-import { useMountAppended } from '../../utils/use_mount_appended';
-
-import { Bytes } from '.';
-
-describe('Bytes', () => {
-  const mount = useMountAppended();
-
-  test('it renders the expected formatted bytes', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <Bytes contextId="test" eventId="abc" fieldName="network.bytes" value={`1234567`} />
-      </TestProviders>
-    );
-    expect(
-      wrapper
-        .find(PreferenceFormattedBytes)
-        .first()
-        .text()
-    ).toEqual('1.2MB');
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/bytes/index.tsx b/x-pack/plugins/siem/public/components/bytes/index.tsx
deleted file mode 100644
index 94c6ecba68be52..00000000000000
--- a/x-pack/plugins/siem/public/components/bytes/index.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
- * 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 { DefaultDraggable } from '../draggables';
-import { PreferenceFormattedBytes } from '../formatted_bytes';
-
-export const BYTES_FORMAT = 'bytes';
-
-/**
- * Renders draggable text containing the value of a field representing a
- * duration of time, (e.g. `event.duration`)
- */
-export const Bytes = React.memo<{
-  contextId: string;
-  eventId: string;
-  fieldName: string;
-  value?: string | null;
-}>(({ contextId, eventId, fieldName, value }) => (
-  <DefaultDraggable
-    id={`bytes-default-draggable-${contextId}-${eventId}-${fieldName}-${value}`}
-    name={name}
-    field={fieldName}
-    tooltipContent={null}
-    value={value}
-  >
-    <PreferenceFormattedBytes value={`${value}`} />
-  </DefaultDraggable>
-));
-
-Bytes.displayName = 'Bytes';
diff --git a/x-pack/plugins/siem/public/components/certificate_fingerprint/index.test.tsx b/x-pack/plugins/siem/public/components/certificate_fingerprint/index.test.tsx
deleted file mode 100644
index 9cd0af062c54a6..00000000000000
--- a/x-pack/plugins/siem/public/components/certificate_fingerprint/index.test.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-/*
- * 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 { TestProviders } from '../../mock';
-import { useMountAppended } from '../../utils/use_mount_appended';
-
-import { CertificateFingerprint } from '.';
-
-describe('CertificateFingerprint', () => {
-  const mount = useMountAppended();
-  test('renders the expected label', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <CertificateFingerprint
-          eventId="Tgwnt2kBqd-n62SwPZDP"
-          certificateType="client"
-          contextId="test"
-          fieldName="tls.client_certificate.fingerprint.sha1"
-          value="3f4c57934e089f02ae7511200aee2d7e7aabd272"
-        />
-      </TestProviders>
-    );
-    expect(
-      wrapper
-        .find('[data-test-subj="fingerprint-label"]')
-        .first()
-        .text()
-    ).toEqual('client cert');
-  });
-
-  test('renders the fingerprint as text', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <CertificateFingerprint
-          eventId="Tgwnt2kBqd-n62SwPZDP"
-          certificateType="client"
-          contextId="test"
-          fieldName="tls.client_certificate.fingerprint.sha1"
-          value="3f4c57934e089f02ae7511200aee2d7e7aabd272"
-        />
-      </TestProviders>
-    );
-    expect(
-      wrapper
-        .find('[data-test-subj="certificate-fingerprint-link"]')
-        .first()
-        .text()
-    ).toEqual('3f4c57934e089f02ae7511200aee2d7e7aabd272');
-  });
-
-  test('it renders a hyperlink to an external site to compare the fingerprint against a known set of signatures', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <CertificateFingerprint
-          eventId="Tgwnt2kBqd-n62SwPZDP"
-          certificateType="client"
-          contextId="test"
-          fieldName="tls.client_certificate.fingerprint.sha1"
-          value="3f4c57934e089f02ae7511200aee2d7e7aabd272"
-        />
-      </TestProviders>
-    );
-
-    expect(
-      wrapper
-        .find('[data-test-subj="certificate-fingerprint-link"]')
-        .first()
-        .props().href
-    ).toEqual(
-      'https://sslbl.abuse.ch/ssl-certificates/sha1/3f4c57934e089f02ae7511200aee2d7e7aabd272'
-    );
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/certificate_fingerprint/index.tsx b/x-pack/plugins/siem/public/components/certificate_fingerprint/index.tsx
deleted file mode 100644
index 181d92dce06f99..00000000000000
--- a/x-pack/plugins/siem/public/components/certificate_fingerprint/index.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-/*
- * 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 { EuiText } from '@elastic/eui';
-import React from 'react';
-import styled from 'styled-components';
-
-import { DraggableBadge } from '../draggables';
-import { ExternalLinkIcon } from '../external_link_icon';
-import { CertificateFingerprintLink } from '../links';
-
-import * as i18n from './translations';
-
-export type CertificateType = 'client' | 'server';
-
-export const TLS_CLIENT_CERTIFICATE_FINGERPRINT_SHA1_FIELD_NAME =
-  'tls.client_certificate.fingerprint.sha1';
-export const TLS_SERVER_CERTIFICATE_FINGERPRINT_SHA1_FIELD_NAME =
-  'tls.server_certificate.fingerprint.sha1';
-
-const FingerprintLabel = styled.span`
-  margin-right: 5px;
-`;
-
-FingerprintLabel.displayName = 'FingerprintLabel';
-
-/**
- * Represents a field containing a certificate fingerprint (e.g. a sha1), with
- * a link to an external site, which in-turn compares the fingerprint against a
- * set of known fingerprints
- * Examples:
- * 'tls.client_certificate.fingerprint.sha1'
- * 'tls.server_certificate.fingerprint.sha1'
- */
-export const CertificateFingerprint = React.memo<{
-  eventId: string;
-  certificateType: CertificateType;
-  contextId: string;
-  fieldName: string;
-  value?: string | null;
-}>(({ eventId, certificateType, contextId, fieldName, value }) => {
-  return (
-    <DraggableBadge
-      contextId={contextId}
-      data-test-subj={`${certificateType}-certificate-fingerprint`}
-      eventId={eventId}
-      field={fieldName}
-      iconType="snowflake"
-      tooltipContent={
-        <EuiText size="xs">
-          <span>{fieldName}</span>
-        </EuiText>
-      }
-      value={value}
-    >
-      <FingerprintLabel data-test-subj="fingerprint-label">
-        {certificateType === 'client' ? i18n.CLIENT_CERT : i18n.SERVER_CERT}
-      </FingerprintLabel>
-      <CertificateFingerprintLink certificateFingerprint={value || ''} />
-      <ExternalLinkIcon />
-    </DraggableBadge>
-  );
-});
-
-CertificateFingerprint.displayName = 'CertificateFingerprint';
diff --git a/x-pack/plugins/siem/public/components/direction/index.tsx b/x-pack/plugins/siem/public/components/direction/index.tsx
deleted file mode 100644
index ad1e63dbd7e6a1..00000000000000
--- a/x-pack/plugins/siem/public/components/direction/index.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-/*
- * 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 { NetworkDirectionEcs } from '../../graphql/types';
-import { DraggableBadge } from '../draggables';
-import { NETWORK_DIRECTION_FIELD_NAME } from '../source_destination/field_names';
-
-export const INBOUND = 'inbound';
-export const OUTBOUND = 'outbound';
-
-export const EXTERNAL = 'external';
-export const INTERNAL = 'internal';
-
-export const INCOMING = 'incoming';
-export const OUTGOING = 'outgoing';
-
-export const LISTENING = 'listening';
-export const UNKNOWN = 'unknown';
-
-export const DEFAULT_ICON = 'questionInCircle';
-
-/** Returns an icon representing the value of `network.direction` */
-export const getDirectionIcon = (
-  networkDirection?: string | null
-): 'arrowUp' | 'arrowDown' | 'globe' | 'bullseye' | 'questionInCircle' => {
-  if (networkDirection == null) {
-    return DEFAULT_ICON;
-  }
-
-  const direction = `${networkDirection}`.toLowerCase();
-
-  switch (direction) {
-    case NetworkDirectionEcs.outbound:
-    case NetworkDirectionEcs.outgoing:
-      return 'arrowUp';
-    case NetworkDirectionEcs.inbound:
-    case NetworkDirectionEcs.incoming:
-    case NetworkDirectionEcs.listening:
-      return 'arrowDown';
-    case NetworkDirectionEcs.external:
-      return 'globe';
-    case NetworkDirectionEcs.internal:
-      return 'bullseye';
-    case NetworkDirectionEcs.unknown:
-    default:
-      return DEFAULT_ICON;
-  }
-};
-
-/**
- * Renders a badge containing the value of `network.direction`
- */
-export const DirectionBadge = React.memo<{
-  contextId: string;
-  direction?: string | null;
-  eventId: string;
-}>(({ contextId, eventId, direction }) => (
-  <DraggableBadge
-    contextId={contextId}
-    data-test-subj="network-direction"
-    eventId={eventId}
-    field={NETWORK_DIRECTION_FIELD_NAME}
-    iconType={getDirectionIcon(direction)}
-    value={direction}
-  />
-));
-
-DirectionBadge.displayName = 'DirectionBadge';
diff --git a/x-pack/plugins/siem/public/components/drag_and_drop/helpers.ts b/x-pack/plugins/siem/public/components/drag_and_drop/helpers.ts
deleted file mode 100644
index 9b37387ce076be..00000000000000
--- a/x-pack/plugins/siem/public/components/drag_and_drop/helpers.ts
+++ /dev/null
@@ -1,333 +0,0 @@
-/*
- * 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 { isString } from 'lodash/fp';
-import { DropResult } from 'react-beautiful-dnd';
-import { Dispatch } from 'redux';
-import { ActionCreator } from 'typescript-fsa';
-
-import { BrowserField, BrowserFields, getAllFieldsByName } from '../../containers/source';
-import { dragAndDropActions, timelineActions } from '../../store/actions';
-import { IdToDataProvider } from '../../store/drag_and_drop/model';
-import { ColumnHeaderOptions } from '../../store/timeline/model';
-import { DEFAULT_COLUMN_MIN_WIDTH } from '../timeline/body/constants';
-import { DataProvider } from '../timeline/data_providers/data_provider';
-import { addContentToTimeline } from '../timeline/data_providers/helpers';
-
-export const draggableIdPrefix = 'draggableId';
-
-export const droppableIdPrefix = 'droppableId';
-
-export const draggableContentPrefix = `${draggableIdPrefix}.content.`;
-
-export const draggableTimelineProvidersPrefix = `${draggableIdPrefix}.timelineProviders.`;
-
-export const draggableFieldPrefix = `${draggableIdPrefix}.field.`;
-
-export const droppableContentPrefix = `${droppableIdPrefix}.content.`;
-
-export const droppableFieldPrefix = `${droppableIdPrefix}.field.`;
-
-export const droppableTimelineProvidersPrefix = `${droppableIdPrefix}.timelineProviders.`;
-
-export const droppableTimelineColumnsPrefix = `${droppableIdPrefix}.timelineColumns.`;
-
-export const droppableTimelineFlyoutButtonPrefix = `${droppableIdPrefix}.flyoutButton.`;
-
-export const getDraggableId = (dataProviderId: string): string =>
-  `${draggableContentPrefix}${dataProviderId}`;
-
-export const getDraggableFieldId = ({
-  contextId,
-  fieldId,
-}: {
-  contextId: string;
-  fieldId: string;
-}): string => `${draggableFieldPrefix}${escapeContextId(contextId)}.${escapeFieldId(fieldId)}`;
-
-export const getTimelineProviderDroppableId = ({
-  groupIndex,
-  timelineId,
-}: {
-  groupIndex: number;
-  timelineId: string;
-}): string => `${droppableTimelineProvidersPrefix}${timelineId}.group.${groupIndex}`;
-
-export const getTimelineProviderDraggableId = ({
-  dataProviderId,
-  groupIndex,
-  timelineId,
-}: {
-  dataProviderId: string;
-  groupIndex: number;
-  timelineId: string;
-}): string =>
-  `${draggableTimelineProvidersPrefix}${timelineId}.group.${groupIndex}.${dataProviderId}`;
-
-export const getDroppableId = (visualizationPlaceholderId: string): string =>
-  `${droppableContentPrefix}${visualizationPlaceholderId}`;
-
-export const sourceIsContent = (result: DropResult): boolean =>
-  result.source.droppableId.startsWith(droppableContentPrefix);
-
-export const sourceAndDestinationAreSameTimelineProviders = (result: DropResult): boolean => {
-  const regex = /^droppableId\.timelineProviders\.(\S+)\./;
-  const sourceMatches = result.source.droppableId.match(regex) ?? [];
-  const destinationMatches = result.destination?.droppableId.match(regex) ?? [];
-
-  return (
-    sourceMatches.length >= 2 &&
-    destinationMatches.length >= 2 &&
-    sourceMatches[1] === destinationMatches[1]
-  );
-};
-
-export const draggableIsContent = (result: DropResult | { draggableId: string }): boolean =>
-  result.draggableId.startsWith(draggableContentPrefix);
-
-export const draggableIsField = (result: DropResult | { draggableId: string }): boolean =>
-  result.draggableId.startsWith(draggableFieldPrefix);
-
-export const reasonIsDrop = (result: DropResult): boolean => result.reason === 'DROP';
-
-export const destinationIsTimelineProviders = (result: DropResult): boolean =>
-  result.destination != null &&
-  result.destination.droppableId.startsWith(droppableTimelineProvidersPrefix);
-
-export const destinationIsTimelineColumns = (result: DropResult): boolean =>
-  result.destination != null &&
-  result.destination.droppableId.startsWith(droppableTimelineColumnsPrefix);
-
-export const destinationIsTimelineButton = (result: DropResult): boolean =>
-  result.destination != null &&
-  result.destination.droppableId.startsWith(droppableTimelineFlyoutButtonPrefix);
-
-export const getProviderIdFromDraggable = (result: DropResult): string =>
-  result.draggableId.substring(result.draggableId.lastIndexOf('.') + 1);
-
-export const getFieldIdFromDraggable = (result: DropResult): string =>
-  unEscapeFieldId(result.draggableId.substring(result.draggableId.lastIndexOf('.') + 1));
-
-export const escapeDataProviderId = (path: string) => path.replace(/\./g, '_');
-
-export const escapeContextId = (path: string) => path.replace(/\./g, '_');
-
-export const escapeFieldId = (path: string) => path.replace(/\./g, '!!!DOT!!!');
-
-export const unEscapeFieldId = (path: string) => path.replace(/!!!DOT!!!/g, '.');
-
-export const providerWasDroppedOnTimeline = (result: DropResult): boolean =>
-  reasonIsDrop(result) &&
-  draggableIsContent(result) &&
-  sourceIsContent(result) &&
-  destinationIsTimelineProviders(result);
-
-export const userIsReArrangingProviders = (result: DropResult): boolean =>
-  reasonIsDrop(result) && sourceAndDestinationAreSameTimelineProviders(result);
-
-export const fieldWasDroppedOnTimelineColumns = (result: DropResult): boolean =>
-  reasonIsDrop(result) && draggableIsField(result) && destinationIsTimelineColumns(result);
-
-interface AddProviderToTimelineParams {
-  activeTimelineDataProviders: DataProvider[];
-  dataProviders: IdToDataProvider;
-  dispatch: Dispatch;
-  noProviderFound?: ActionCreator<{
-    id: string;
-  }>;
-  onAddedToTimeline: (fieldOrValue: string) => void;
-  result: DropResult;
-  timelineId: string;
-}
-
-interface AddFieldToTimelineColumnsParams {
-  upsertColumn?: ActionCreator<{
-    column: ColumnHeaderOptions;
-    id: string;
-    index: number;
-  }>;
-  browserFields: BrowserFields;
-  dispatch: Dispatch;
-  result: DropResult;
-  timelineId: string;
-}
-
-export const addProviderToTimeline = ({
-  activeTimelineDataProviders,
-  dataProviders,
-  dispatch,
-  result,
-  timelineId,
-  noProviderFound = dragAndDropActions.noProviderFound,
-  onAddedToTimeline,
-}: AddProviderToTimelineParams): void => {
-  const providerId = getProviderIdFromDraggable(result);
-  const providerToAdd = dataProviders[providerId];
-
-  if (providerToAdd) {
-    addContentToTimeline({
-      dataProviders: activeTimelineDataProviders,
-      destination: result.destination,
-      dispatch,
-      onAddedToTimeline,
-      providerToAdd,
-      timelineId,
-    });
-  } else {
-    dispatch(noProviderFound({ id: providerId }));
-  }
-};
-
-export const addFieldToTimelineColumns = ({
-  upsertColumn = timelineActions.upsertColumn,
-  browserFields,
-  dispatch,
-  result,
-  timelineId,
-}: AddFieldToTimelineColumnsParams): void => {
-  const fieldId = getFieldIdFromDraggable(result);
-  const allColumns = getAllFieldsByName(browserFields);
-  const column = allColumns[fieldId];
-
-  if (column != null) {
-    dispatch(
-      upsertColumn({
-        column: {
-          category: column.category,
-          columnHeaderType: 'not-filtered',
-          description: isString(column.description) ? column.description : undefined,
-          example: isString(column.example) ? column.example : undefined,
-          id: fieldId,
-          type: column.type,
-          aggregatable: column.aggregatable,
-          width: DEFAULT_COLUMN_MIN_WIDTH,
-        },
-        id: timelineId,
-        index: result.destination != null ? result.destination.index : 0,
-      })
-    );
-  } else {
-    // create a column definition, because it doesn't exist in the browserFields:
-    dispatch(
-      upsertColumn({
-        column: {
-          columnHeaderType: 'not-filtered',
-          id: fieldId,
-          width: DEFAULT_COLUMN_MIN_WIDTH,
-        },
-        id: timelineId,
-        index: result.destination != null ? result.destination.index : 0,
-      })
-    );
-  }
-};
-
-/**
- * Prevents fields from being dragged or dropped to any area other than column
- * header drop zone in the timeline
- */
-export const DRAG_TYPE_FIELD = 'drag-type-field';
-
-/** This class is added to the document body while dragging */
-export const IS_DRAGGING_CLASS_NAME = 'is-dragging';
-
-/** This class is added to the document body while timeline field dragging */
-export const IS_TIMELINE_FIELD_DRAGGING_CLASS_NAME = 'is-timeline-field-dragging';
-
-export const allowTopN = ({
-  browserField,
-  fieldName,
-}: {
-  browserField: Partial<BrowserField> | undefined;
-  fieldName: string;
-}): boolean => {
-  const isAggregatable = browserField?.aggregatable ?? false;
-  const fieldType = browserField?.type ?? '';
-  const isAllowedType = [
-    'boolean',
-    'geo-point',
-    'geo-shape',
-    'ip',
-    'keyword',
-    'number',
-    'numeric',
-    'string',
-  ].includes(fieldType);
-
-  // TODO: remove this explicit whitelist when the ECS documentation includes signals
-  const isWhitelistedNonBrowserField = [
-    'signal.ancestors.depth',
-    'signal.ancestors.id',
-    'signal.ancestors.rule',
-    'signal.ancestors.type',
-    'signal.original_event.action',
-    'signal.original_event.category',
-    'signal.original_event.code',
-    'signal.original_event.created',
-    'signal.original_event.dataset',
-    'signal.original_event.duration',
-    'signal.original_event.end',
-    'signal.original_event.hash',
-    'signal.original_event.id',
-    'signal.original_event.kind',
-    'signal.original_event.module',
-    'signal.original_event.original',
-    'signal.original_event.outcome',
-    'signal.original_event.provider',
-    'signal.original_event.risk_score',
-    'signal.original_event.risk_score_norm',
-    'signal.original_event.sequence',
-    'signal.original_event.severity',
-    'signal.original_event.start',
-    'signal.original_event.timezone',
-    'signal.original_event.type',
-    'signal.original_time',
-    'signal.parent.depth',
-    'signal.parent.id',
-    'signal.parent.index',
-    'signal.parent.rule',
-    'signal.parent.type',
-    'signal.rule.created_by',
-    'signal.rule.description',
-    'signal.rule.enabled',
-    'signal.rule.false_positives',
-    'signal.rule.filters',
-    'signal.rule.from',
-    'signal.rule.id',
-    'signal.rule.immutable',
-    'signal.rule.index',
-    'signal.rule.interval',
-    'signal.rule.language',
-    'signal.rule.max_signals',
-    'signal.rule.name',
-    'signal.rule.note',
-    'signal.rule.output_index',
-    'signal.rule.query',
-    'signal.rule.references',
-    'signal.rule.risk_score',
-    'signal.rule.rule_id',
-    'signal.rule.saved_id',
-    'signal.rule.severity',
-    'signal.rule.size',
-    'signal.rule.tags',
-    'signal.rule.threat',
-    'signal.rule.threat.tactic.id',
-    'signal.rule.threat.tactic.name',
-    'signal.rule.threat.tactic.reference',
-    'signal.rule.threat.technique.id',
-    'signal.rule.threat.technique.name',
-    'signal.rule.threat.technique.reference',
-    'signal.rule.timeline_id',
-    'signal.rule.timeline_title',
-    'signal.rule.to',
-    'signal.rule.type',
-    'signal.rule.updated_by',
-    'signal.rule.version',
-    'signal.status',
-  ].includes(fieldName);
-
-  return isWhitelistedNonBrowserField || (isAggregatable && isAllowedType);
-};
diff --git a/x-pack/plugins/siem/public/components/draggables/index.tsx b/x-pack/plugins/siem/public/components/draggables/index.tsx
deleted file mode 100644
index cea900f7bccf96..00000000000000
--- a/x-pack/plugins/siem/public/components/draggables/index.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-/*
- * 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 { EuiBadge, EuiToolTip, IconType } from '@elastic/eui';
-import React from 'react';
-import styled from 'styled-components';
-
-import { DragEffects, DraggableWrapper } from '../drag_and_drop/draggable_wrapper';
-import { escapeDataProviderId } from '../drag_and_drop/helpers';
-import { getEmptyStringTag } from '../empty_value';
-import { IS_OPERATOR } from '../timeline/data_providers/data_provider';
-import { Provider } from '../timeline/data_providers/provider';
-
-export interface DefaultDraggableType {
-  id: string;
-  field: string;
-  value?: string | null;
-  name?: string | null;
-  queryValue?: string | null;
-  children?: React.ReactNode;
-  tooltipContent?: React.ReactNode;
-}
-
-/**
- * Only returns true if the specified tooltipContent is exactly `null`.
- * Example input / output:
- * `bob -> false`
- * `undefined -> false`
- * `<span>thing</span> -> false`
- * `null -> true`
- */
-export const tooltipContentIsExplicitlyNull = (tooltipContent?: React.ReactNode): boolean =>
-  tooltipContent === null; // an explicit / exact null check
-
-/**
- * Derives the tooltip content from the field name if no tooltip was specified
- */
-export const getDefaultWhenTooltipIsUnspecified = ({
-  field,
-  tooltipContent,
-}: {
-  field: string;
-  tooltipContent?: React.ReactNode;
-}): React.ReactNode => (tooltipContent != null ? tooltipContent : field);
-
-/**
- * Renders the content of the draggable, wrapped in a tooltip
- */
-const Content = React.memo<{
-  children?: React.ReactNode;
-  field: string;
-  tooltipContent?: React.ReactNode;
-  value?: string | null;
-}>(({ children, field, tooltipContent, value }) =>
-  !tooltipContentIsExplicitlyNull(tooltipContent) ? (
-    <EuiToolTip
-      data-test-subj={`${field}-tooltip`}
-      content={getDefaultWhenTooltipIsUnspecified({ tooltipContent, field })}
-    >
-      <>{children ? children : value}</>
-    </EuiToolTip>
-  ) : (
-    <>{children ? children : value}</>
-  )
-);
-
-Content.displayName = 'Content';
-
-/**
- * Draggable text (or an arbitrary visualization specified by `children`)
- * that's only displayed when the specified value is non-`null`.
- *
- * @param id - a unique draggable id, which typically follows the format `${contextId}-${eventId}-${field}-${value}`
- * @param field - the name of the field, e.g. `network.transport`
- * @param value - value of the field e.g. `tcp`
- * @param name - defaulting to `field`, this optional human readable name is used by the `DataProvider` that represents the data
- * @param children - defaults to displaying `value`, this allows an arbitrary visualization to be displayed in lieu of the default behavior
- * @param tooltipContent - defaults to displaying `field`, pass `null` to
- * 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 = React.memo<DefaultDraggableType>(
-  ({ id, field, value, name, children, tooltipContent, queryValue }) =>
-    value != null ? (
-      <DraggableWrapper
-        dataProvider={{
-          and: [],
-          enabled: true,
-          id: escapeDataProviderId(id),
-          name: name ? name : value,
-          excluded: false,
-          kqlQuery: '',
-          queryMatch: {
-            field,
-            value: queryValue ? queryValue : value,
-            operator: IS_OPERATOR,
-          },
-        }}
-        render={(dataProvider, _, snapshot) =>
-          snapshot.isDragging ? (
-            <DragEffects>
-              <Provider dataProvider={dataProvider} />
-            </DragEffects>
-          ) : (
-            <Content field={field} tooltipContent={tooltipContent} value={value}>
-              {children}
-            </Content>
-          )
-        }
-      />
-    ) : null
-);
-
-DefaultDraggable.displayName = 'DefaultDraggable';
-
-export const Badge = styled(EuiBadge)`
-  vertical-align: top;
-` as any; // eslint-disable-line @typescript-eslint/no-explicit-any
-
-Badge.displayName = 'Badge';
-
-export type BadgeDraggableType = Omit<DefaultDraggableType, 'id'> & {
-  contextId: string;
-  eventId: string;
-  iconType?: IconType;
-  color?: string;
-};
-
-/**
- * A draggable badge that's only displayed when the specified value is non-`null`.
- *
- * @param contextId - used as part of the formula to derive a unique draggable id, this describes the context e.g. `event-fields-browser` in which the badge is displayed
- * @param eventId - uniquely identifies an event, as specified in the `_id` field of the document
- * @param field - the name of the field, e.g. `network.transport`
- * @param value - value of the field e.g. `tcp`
- * @param iconType -the (optional) type of icon e.g. `snowflake` to display on the badge
- * @param name - defaulting to `field`, this optional human readable name is used by the `DataProvider` that represents the data
- * @param color - defaults to `hollow`, optionally overwrite the color of the badge icon
- * @param children - defaults to displaying `value`, this allows an arbitrary visualization to be displayed in lieu of the default behavior
- * @param tooltipContent - defaults to displaying `field`, pass `null` to
- * 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 = React.memo<BadgeDraggableType>(
-  ({
-    contextId,
-    eventId,
-    field,
-    value,
-    iconType,
-    name,
-    color = 'hollow',
-    children,
-    tooltipContent,
-    queryValue,
-  }) =>
-    value != null ? (
-      <DefaultDraggable
-        id={`draggable-badge-default-draggable-${contextId}-${eventId}-${field}-${value}`}
-        field={field}
-        name={name}
-        value={value}
-        tooltipContent={tooltipContent}
-        queryValue={queryValue}
-      >
-        <Badge iconType={iconType} color={color} title="">
-          {children ? children : value !== '' ? value : getEmptyStringTag()}
-        </Badge>
-      </DefaultDraggable>
-    ) : null
-);
-
-DraggableBadge.displayName = 'DraggableBadge';
diff --git a/x-pack/plugins/siem/public/components/duration/index.test.tsx b/x-pack/plugins/siem/public/components/duration/index.test.tsx
deleted file mode 100644
index 0dbc60ad9ae523..00000000000000
--- a/x-pack/plugins/siem/public/components/duration/index.test.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
- * 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 { TestProviders } from '../../mock';
-import { ONE_MILLISECOND_AS_NANOSECONDS } from '../formatted_duration/helpers';
-import { useMountAppended } from '../../utils/use_mount_appended';
-
-import { Duration } from '.';
-
-describe('Duration', () => {
-  const mount = useMountAppended();
-
-  test('it renders the expected formatted duration', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <Duration
-          contextId="test"
-          eventId="abc"
-          fieldName="event.duration"
-          value={`${ONE_MILLISECOND_AS_NANOSECONDS}`}
-        />
-      </TestProviders>
-    );
-    expect(
-      wrapper
-        .find('[data-test-subj="formatted-duration"]')
-        .first()
-        .text()
-    ).toEqual('1ms');
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/duration/index.tsx b/x-pack/plugins/siem/public/components/duration/index.tsx
deleted file mode 100644
index 76712b789ffbe5..00000000000000
--- a/x-pack/plugins/siem/public/components/duration/index.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
- * 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 { DefaultDraggable } from '../draggables';
-import { FormattedDuration } from '../formatted_duration';
-
-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 = React.memo<{
-  contextId: string;
-  eventId: string;
-  fieldName: string;
-  value?: string | null;
-}>(({ contextId, eventId, fieldName, value }) => (
-  <DefaultDraggable
-    id={`duration-default-draggable-${contextId}-${eventId}-${fieldName}-${value}`}
-    name={name}
-    field={fieldName}
-    tooltipContent={null}
-    value={value}
-  >
-    <FormattedDuration maybeDurationNanoseconds={value} tooltipTitle={fieldName} />
-  </DefaultDraggable>
-));
-
-Duration.displayName = 'Duration';
diff --git a/x-pack/plugins/siem/public/components/edit_data_provider/helpers.test.tsx b/x-pack/plugins/siem/public/components/edit_data_provider/helpers.test.tsx
deleted file mode 100644
index 74430873064280..00000000000000
--- a/x-pack/plugins/siem/public/components/edit_data_provider/helpers.test.tsx
+++ /dev/null
@@ -1,295 +0,0 @@
-/*
- * 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 { mockBrowserFields } from '../../containers/source/mock';
-import { EXISTS_OPERATOR, IS_OPERATOR } from '../timeline/data_providers/data_provider';
-
-import {
-  getCategorizedFieldNames,
-  getExcludedFromSelection,
-  getFieldNames,
-  getQueryOperatorFromSelection,
-  selectionsAreValid,
-} from './helpers';
-
-import * as i18n from './translations';
-
-describe('helpers', () => {
-  describe('getFieldNames', () => {
-    test('it should return the expected field names in a category', () => {
-      expect(getFieldNames(mockBrowserFields.auditd)).toEqual([
-        'auditd.data.a0',
-        'auditd.data.a1',
-        'auditd.data.a2',
-      ]);
-    });
-  });
-
-  describe('getCategorizedFieldNames', () => {
-    test('it should return the expected field names grouped by category', () => {
-      expect(getCategorizedFieldNames(mockBrowserFields)).toEqual([
-        {
-          label: 'agent',
-          options: [
-            { label: 'agent.ephemeral_id' },
-            { label: 'agent.hostname' },
-            { label: 'agent.id' },
-            { label: 'agent.name' },
-          ],
-        },
-        {
-          label: 'auditd',
-          options: [
-            { label: 'auditd.data.a0' },
-            { label: 'auditd.data.a1' },
-            { label: 'auditd.data.a2' },
-          ],
-        },
-        { label: 'base', options: [{ label: '@timestamp' }] },
-        {
-          label: 'client',
-          options: [
-            { label: 'client.address' },
-            { label: 'client.bytes' },
-            { label: 'client.domain' },
-            { label: 'client.geo.country_iso_code' },
-          ],
-        },
-        {
-          label: 'cloud',
-          options: [{ label: 'cloud.account.id' }, { label: 'cloud.availability_zone' }],
-        },
-        {
-          label: 'container',
-          options: [
-            { label: 'container.id' },
-            { label: 'container.image.name' },
-            { label: 'container.image.tag' },
-          ],
-        },
-        {
-          label: 'destination',
-          options: [
-            { label: 'destination.address' },
-            { label: 'destination.bytes' },
-            { label: 'destination.domain' },
-            { label: 'destination.ip' },
-            { label: 'destination.port' },
-          ],
-        },
-        { label: 'event', options: [{ label: 'event.end' }] },
-        { label: 'source', options: [{ label: 'source.ip' }, { label: 'source.port' }] },
-      ]);
-    });
-  });
-
-  describe('selectionsAreValid', () => {
-    test('it should return true when the selected field and operator are valid', () => {
-      expect(
-        selectionsAreValid({
-          browserFields: mockBrowserFields,
-          selectedField: [
-            {
-              label: 'destination.bytes',
-            },
-          ],
-          selectedOperator: [
-            {
-              label: 'is',
-            },
-          ],
-        })
-      ).toBe(true);
-    });
-
-    test('it should return false when the selected field is empty', () => {
-      expect(
-        selectionsAreValid({
-          browserFields: mockBrowserFields,
-          selectedField: [
-            {
-              label: '',
-            },
-          ],
-          selectedOperator: [
-            {
-              label: 'is',
-            },
-          ],
-        })
-      ).toBe(false);
-    });
-
-    test('it should return false when the selected field is unknown', () => {
-      expect(
-        selectionsAreValid({
-          browserFields: mockBrowserFields,
-          selectedField: [
-            {
-              label: 'invalid-field',
-            },
-          ],
-          selectedOperator: [
-            {
-              label: 'is',
-            },
-          ],
-        })
-      ).toBe(false);
-    });
-
-    test('it should return false when the selected operator is empty', () => {
-      expect(
-        selectionsAreValid({
-          browserFields: mockBrowserFields,
-          selectedField: [
-            {
-              label: 'destination.bytes',
-            },
-          ],
-          selectedOperator: [
-            {
-              label: '',
-            },
-          ],
-        })
-      ).toBe(false);
-    });
-
-    test('it should return false when the selected operator is unknown', () => {
-      expect(
-        selectionsAreValid({
-          browserFields: mockBrowserFields,
-          selectedField: [
-            {
-              label: 'destination.bytes',
-            },
-          ],
-          selectedOperator: [
-            {
-              label: 'invalid-operator',
-            },
-          ],
-        })
-      ).toBe(false);
-    });
-  });
-
-  describe('getQueryOperatorFromSelection', () => {
-    const validSelections = [
-      {
-        operator: i18n.IS,
-        expected: IS_OPERATOR,
-      },
-      {
-        operator: i18n.IS_NOT,
-        expected: IS_OPERATOR,
-      },
-      {
-        operator: i18n.EXISTS,
-        expected: EXISTS_OPERATOR,
-      },
-      {
-        operator: i18n.DOES_NOT_EXIST,
-        expected: EXISTS_OPERATOR,
-      },
-    ];
-
-    validSelections.forEach(({ operator, expected }) => {
-      test(`it should the expected operator given "${operator}", a valid selection`, () => {
-        expect(
-          getQueryOperatorFromSelection([
-            {
-              label: operator,
-            },
-          ])
-        ).toEqual(expected);
-      });
-    });
-
-    test('it should default to the "is" operator given an empty selection', () => {
-      expect(
-        getQueryOperatorFromSelection([
-          {
-            label: '',
-          },
-        ])
-      ).toEqual(IS_OPERATOR);
-    });
-
-    test('it should default to the "is" operator given an invalid selection', () => {
-      expect(
-        getQueryOperatorFromSelection([
-          {
-            label: 'invalid',
-          },
-        ])
-      ).toEqual(IS_OPERATOR);
-    });
-  });
-
-  describe('getExcludedFromSelection', () => {
-    test('it returns false when the selected operator is empty', () => {
-      expect(
-        getExcludedFromSelection([
-          {
-            label: '',
-          },
-        ])
-      ).toBe(false);
-    });
-
-    test('it returns false when the "is" operator is selected', () => {
-      expect(
-        getExcludedFromSelection([
-          {
-            label: i18n.IS,
-          },
-        ])
-      ).toBe(false);
-    });
-
-    test('it returns false when the "exists" operator is selected', () => {
-      expect(
-        getExcludedFromSelection([
-          {
-            label: i18n.EXISTS,
-          },
-        ])
-      ).toBe(false);
-    });
-
-    test('it returns false when an unknown selection is made', () => {
-      expect(
-        getExcludedFromSelection([
-          {
-            label: 'an unknown selection',
-          },
-        ])
-      ).toBe(false);
-    });
-
-    test('it returns true when "is not" is selected', () => {
-      expect(
-        getExcludedFromSelection([
-          {
-            label: i18n.IS_NOT,
-          },
-        ])
-      ).toBe(true);
-    });
-
-    test('it returns true when "does not exist" is selected', () => {
-      expect(
-        getExcludedFromSelection([
-          {
-            label: i18n.DOES_NOT_EXIST,
-          },
-        ])
-      ).toBe(true);
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/edit_data_provider/helpers.tsx b/x-pack/plugins/siem/public/components/edit_data_provider/helpers.tsx
deleted file mode 100644
index e6afc86a7ee678..00000000000000
--- a/x-pack/plugins/siem/public/components/edit_data_provider/helpers.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-/*
- * 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 { findIndex } from 'lodash/fp';
-import { EuiComboBoxOptionOption } from '@elastic/eui';
-
-import { BrowserField, BrowserFields, getAllFieldsByName } from '../../containers/source';
-import {
-  QueryOperator,
-  EXISTS_OPERATOR,
-  IS_OPERATOR,
-} from '../timeline/data_providers/data_provider';
-
-import * as i18n from './translations';
-
-/** The list of operators to display in the `Operator` select  */
-export const operatorLabels: EuiComboBoxOptionOption[] = [
-  {
-    label: i18n.IS,
-  },
-  {
-    label: i18n.IS_NOT,
-  },
-  {
-    label: i18n.EXISTS,
-  },
-  {
-    label: i18n.DOES_NOT_EXIST,
-  },
-];
-
-/** Returns the names of fields in a category */
-export const getFieldNames = (category: Partial<BrowserField>): string[] =>
-  category.fields != null && Object.keys(category.fields).length > 0
-    ? Object.keys(category.fields)
-    : [];
-
-/** Returns all field names by category, for display in an `EuiComboBox`  */
-export const getCategorizedFieldNames = (browserFields: BrowserFields): EuiComboBoxOptionOption[] =>
-  Object.keys(browserFields)
-    .sort()
-    .map(categoryId => ({
-      label: categoryId,
-      options: getFieldNames(browserFields[categoryId]).map(fieldId => ({
-        label: fieldId,
-      })),
-    }));
-
-/** Returns true if the specified field name is valid */
-export const selectionsAreValid = ({
-  browserFields,
-  selectedField,
-  selectedOperator,
-}: {
-  browserFields: BrowserFields;
-  selectedField: EuiComboBoxOptionOption[];
-  selectedOperator: EuiComboBoxOptionOption[];
-}): boolean => {
-  const fieldId = selectedField.length > 0 ? selectedField[0].label : '';
-  const operator = selectedOperator.length > 0 ? selectedOperator[0].label : '';
-
-  const fieldIsValid = getAllFieldsByName(browserFields)[fieldId] != null;
-  const operatorIsValid = findIndex(o => o.label === operator, operatorLabels) !== -1;
-
-  return fieldIsValid && operatorIsValid;
-};
-
-/** Returns a `QueryOperator` based on the user's Operator selection */
-export const getQueryOperatorFromSelection = (
-  selectedOperator: EuiComboBoxOptionOption[]
-): QueryOperator => {
-  const selection = selectedOperator.length > 0 ? selectedOperator[0].label : '';
-
-  switch (selection) {
-    case i18n.IS: // fall through
-    case i18n.IS_NOT:
-      return IS_OPERATOR;
-    case i18n.EXISTS: // fall through
-    case i18n.DOES_NOT_EXIST:
-      return EXISTS_OPERATOR;
-    default:
-      return IS_OPERATOR;
-  }
-};
-
-/**
- * Returns `true` when the search excludes results that match the specified data provider
- */
-export const getExcludedFromSelection = (selectedOperator: EuiComboBoxOptionOption[]): boolean => {
-  const selection = selectedOperator.length > 0 ? selectedOperator[0].label : '';
-
-  switch (selection) {
-    case i18n.IS_NOT: // fall through
-    case i18n.DOES_NOT_EXIST:
-      return true;
-    default:
-      return false;
-  }
-};
diff --git a/x-pack/plugins/siem/public/components/edit_data_provider/index.test.tsx b/x-pack/plugins/siem/public/components/edit_data_provider/index.test.tsx
deleted file mode 100644
index 1786905a4bb48a..00000000000000
--- a/x-pack/plugins/siem/public/components/edit_data_provider/index.test.tsx
+++ /dev/null
@@ -1,428 +0,0 @@
-/*
- * 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 { mount } from 'enzyme';
-import React from 'react';
-
-import { mockBrowserFields } from '../../containers/source/mock';
-import { TestProviders } from '../../mock';
-import { IS_OPERATOR, EXISTS_OPERATOR } from '../timeline/data_providers/data_provider';
-
-import { StatefulEditDataProvider } from '.';
-
-interface HasIsDisabled {
-  isDisabled: boolean;
-}
-
-describe('StatefulEditDataProvider', () => {
-  const field = 'client.address';
-  const timelineId = 'test';
-  const value = 'test-host';
-
-  test('it renders the current field', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <StatefulEditDataProvider
-          andProviderId={undefined}
-          browserFields={mockBrowserFields}
-          field={field}
-          isExcluded={false}
-          onDataProviderEdited={jest.fn()}
-          operator={IS_OPERATOR}
-          providerId={`hosts-table-hostName-${value}`}
-          timelineId={timelineId}
-          value={value}
-        />
-      </TestProviders>
-    );
-
-    expect(
-      wrapper
-        .find('[data-test-subj="field"]')
-        .first()
-        .text()
-    ).toEqual(field);
-  });
-
-  test('it renders the expected placeholder for the current field when field is empty', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <StatefulEditDataProvider
-          andProviderId={undefined}
-          browserFields={mockBrowserFields}
-          field=""
-          isExcluded={false}
-          onDataProviderEdited={jest.fn()}
-          operator={IS_OPERATOR}
-          providerId={`hosts-table-hostName-${value}`}
-          timelineId={timelineId}
-          value={value}
-        />
-      </TestProviders>
-    );
-
-    expect(
-      wrapper
-        .find('[data-test-subj="field"]')
-        .first()
-        .props().placeholder
-    ).toEqual('Select a field');
-  });
-
-  test('it renders the "is" operator in a humanized format', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <StatefulEditDataProvider
-          andProviderId={undefined}
-          browserFields={mockBrowserFields}
-          field={field}
-          isExcluded={false}
-          onDataProviderEdited={jest.fn()}
-          operator={IS_OPERATOR}
-          providerId={`hosts-table-hostName-${value}`}
-          timelineId={timelineId}
-          value={value}
-        />
-      </TestProviders>
-    );
-
-    expect(
-      wrapper
-        .find('[data-test-subj="operator"]')
-        .first()
-        .text()
-    ).toEqual('is');
-  });
-
-  test('it renders the negated "is" operator in a humanized format when isExcluded is true', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <StatefulEditDataProvider
-          andProviderId={undefined}
-          browserFields={mockBrowserFields}
-          field={field}
-          isExcluded={true}
-          onDataProviderEdited={jest.fn()}
-          operator={IS_OPERATOR}
-          providerId={`hosts-table-hostName-${value}`}
-          timelineId={timelineId}
-          value={value}
-        />
-      </TestProviders>
-    );
-
-    expect(
-      wrapper
-        .find('[data-test-subj="operator"]')
-        .first()
-        .text()
-    ).toEqual('is not');
-  });
-
-  test('it renders the "exists" operator in human-readable format', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <StatefulEditDataProvider
-          andProviderId={undefined}
-          browserFields={mockBrowserFields}
-          field={field}
-          isExcluded={false}
-          onDataProviderEdited={jest.fn()}
-          operator={EXISTS_OPERATOR}
-          providerId={`hosts-table-hostName-${value}`}
-          timelineId={timelineId}
-          value={value}
-        />
-      </TestProviders>
-    );
-
-    expect(
-      wrapper
-        .find('[data-test-subj="operator"]')
-        .first()
-        .text()
-    ).toEqual('exists');
-  });
-
-  test('it renders the negated "exists" operator in a humanized format when isExcluded is true', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <StatefulEditDataProvider
-          andProviderId={undefined}
-          browserFields={mockBrowserFields}
-          field={field}
-          isExcluded={true}
-          onDataProviderEdited={jest.fn()}
-          operator={EXISTS_OPERATOR}
-          providerId={`hosts-table-hostName-${value}`}
-          timelineId={timelineId}
-          value={value}
-        />
-      </TestProviders>
-    );
-
-    expect(
-      wrapper
-        .find('[data-test-subj="operator"]')
-        .first()
-        .text()
-    ).toEqual('does not exist');
-  });
-
-  test('it renders the current value when the operator is "is"', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <StatefulEditDataProvider
-          andProviderId={undefined}
-          browserFields={mockBrowserFields}
-          field={field}
-          isExcluded={false}
-          onDataProviderEdited={jest.fn()}
-          operator={IS_OPERATOR}
-          providerId={`hosts-table-hostName-${value}`}
-          timelineId={timelineId}
-          value={value}
-        />
-      </TestProviders>
-    );
-
-    expect(
-      wrapper
-        .find('[data-test-subj="value"]')
-        .first()
-        .props().value
-    ).toEqual(value);
-  });
-
-  test('it renders the current value when the type of value is an array', () => {
-    const reallyAnArray = ([value] as unknown) as string;
-
-    const wrapper = mount(
-      <TestProviders>
-        <StatefulEditDataProvider
-          andProviderId={undefined}
-          browserFields={mockBrowserFields}
-          field={field}
-          isExcluded={false}
-          onDataProviderEdited={jest.fn()}
-          operator={IS_OPERATOR}
-          providerId={`hosts-table-hostName-${value}`}
-          timelineId={timelineId}
-          value={reallyAnArray}
-        />
-      </TestProviders>
-    );
-
-    expect(
-      wrapper
-        .find('[data-test-subj="value"]')
-        .first()
-        .props().value
-    ).toEqual(value);
-  });
-
-  test('it does NOT render the current value when the operator is "is not" (isExcluded is true)', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <StatefulEditDataProvider
-          andProviderId={undefined}
-          browserFields={mockBrowserFields}
-          field={field}
-          isExcluded={true}
-          onDataProviderEdited={jest.fn()}
-          operator={IS_OPERATOR}
-          providerId={`hosts-table-hostName-${value}`}
-          timelineId={timelineId}
-          value={value}
-        />
-      </TestProviders>
-    );
-
-    expect(
-      wrapper
-        .find('[data-test-subj="value"]')
-        .first()
-        .props().value
-    ).toEqual(value);
-  });
-
-  test('it renders the expected placeholder when value is empty', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <StatefulEditDataProvider
-          andProviderId={undefined}
-          browserFields={mockBrowserFields}
-          field={field}
-          isExcluded={false}
-          onDataProviderEdited={jest.fn()}
-          operator={IS_OPERATOR}
-          providerId={`hosts-table-hostName-${value}`}
-          timelineId={timelineId}
-          value=""
-        />
-      </TestProviders>
-    );
-
-    expect(
-      wrapper
-        .find('[data-test-subj="value"]')
-        .first()
-        .props().placeholder
-    ).toEqual('value');
-  });
-
-  test('it does NOT render value when the operator is "exists"', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <StatefulEditDataProvider
-          andProviderId={undefined}
-          browserFields={mockBrowserFields}
-          field={field}
-          isExcluded={false}
-          onDataProviderEdited={jest.fn()}
-          operator={EXISTS_OPERATOR}
-          providerId={`hosts-table-hostName-${value}`}
-          timelineId={timelineId}
-          value={value}
-        />
-      </TestProviders>
-    );
-
-    expect(wrapper.find('[data-test-subj="value"]').exists()).toBe(false);
-  });
-
-  test('it does NOT render value when the operator is "not exists" (isExcluded is true)', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <StatefulEditDataProvider
-          andProviderId={undefined}
-          browserFields={mockBrowserFields}
-          field={field}
-          isExcluded={true}
-          onDataProviderEdited={jest.fn()}
-          operator={EXISTS_OPERATOR}
-          providerId={`hosts-table-hostName-${value}`}
-          timelineId={timelineId}
-          value={value}
-        />
-      </TestProviders>
-    );
-
-    expect(wrapper.find('[data-test-subj="value"]').exists()).toBe(false);
-  });
-
-  test('it does NOT disable the save button when field is valid', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <StatefulEditDataProvider
-          andProviderId={undefined}
-          browserFields={mockBrowserFields}
-          field={field}
-          isExcluded={false}
-          onDataProviderEdited={jest.fn()}
-          operator={IS_OPERATOR}
-          providerId={`hosts-table-hostName-${value}`}
-          timelineId={timelineId}
-          value={value}
-        />
-      </TestProviders>
-    );
-
-    const props = wrapper
-      .find('[data-test-subj="save"]')
-      .first()
-      .props() as HasIsDisabled;
-
-    expect(props.isDisabled).toBe(false);
-  });
-
-  test('it disables the save button when field is invalid because it is empty', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <StatefulEditDataProvider
-          andProviderId={undefined}
-          browserFields={mockBrowserFields}
-          field=""
-          isExcluded={false}
-          onDataProviderEdited={jest.fn()}
-          operator={IS_OPERATOR}
-          providerId={`hosts-table-hostName-${value}`}
-          timelineId={timelineId}
-          value={value}
-        />
-      </TestProviders>
-    );
-
-    const props = wrapper
-      .find('[data-test-subj="save"]')
-      .first()
-      .props() as HasIsDisabled;
-
-    expect(props.isDisabled).toBe(true);
-  });
-
-  test('it disables the save button when field is invalid because it is not contained in the browser fields', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <StatefulEditDataProvider
-          andProviderId={undefined}
-          browserFields={mockBrowserFields}
-          field="not-in-browser-fields"
-          isExcluded={false}
-          onDataProviderEdited={jest.fn()}
-          operator={IS_OPERATOR}
-          providerId={`hosts-table-hostName-${value}`}
-          timelineId={timelineId}
-          value={value}
-        />
-      </TestProviders>
-    );
-
-    const props = wrapper
-      .find('[data-test-subj="save"]')
-      .first()
-      .props() as HasIsDisabled;
-
-    expect(props.isDisabled).toBe(true);
-  });
-
-  test('it invokes onDataProviderEdited with the expected values when the user clicks the save button', () => {
-    const onDataProviderEdited = jest.fn();
-
-    const wrapper = mount(
-      <TestProviders>
-        <StatefulEditDataProvider
-          andProviderId={undefined}
-          browserFields={mockBrowserFields}
-          field={field}
-          isExcluded={false}
-          onDataProviderEdited={onDataProviderEdited}
-          operator={IS_OPERATOR}
-          providerId={`hosts-table-hostName-${value}`}
-          timelineId={timelineId}
-          value={value}
-        />
-      </TestProviders>
-    );
-
-    wrapper
-      .find('[data-test-subj="save"]')
-      .first()
-      .simulate('click');
-
-    wrapper.update();
-
-    expect(onDataProviderEdited).toBeCalledWith({
-      andProviderId: undefined,
-      excluded: false,
-      field: 'client.address',
-      id: 'test',
-      operator: ':',
-      providerId: 'hosts-table-hostName-test-host',
-      value: 'test-host',
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/edit_data_provider/index.tsx b/x-pack/plugins/siem/public/components/edit_data_provider/index.tsx
deleted file mode 100644
index 5ecc96187532d4..00000000000000
--- a/x-pack/plugins/siem/public/components/edit_data_provider/index.tsx
+++ /dev/null
@@ -1,253 +0,0 @@
-/*
- * 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 { noop } from 'lodash/fp';
-import {
-  EuiButton,
-  EuiComboBox,
-  EuiComboBoxOptionOption,
-  EuiFieldText,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiFormRow,
-  EuiPanel,
-  EuiSpacer,
-  EuiToolTip,
-} from '@elastic/eui';
-import React, { useEffect, useState, useCallback } from 'react';
-import styled from 'styled-components';
-
-import { BrowserFields } from '../../containers/source';
-import { OnDataProviderEdited } from '../timeline/events';
-import { QueryOperator } from '../timeline/data_providers/data_provider';
-
-import {
-  getCategorizedFieldNames,
-  getExcludedFromSelection,
-  getQueryOperatorFromSelection,
-  operatorLabels,
-  selectionsAreValid,
-} from './helpers';
-
-import * as i18n from './translations';
-
-const EDIT_DATA_PROVIDER_WIDTH = 400;
-const FIELD_COMBO_BOX_WIDTH = 195;
-const OPERATOR_COMBO_BOX_WIDTH = 160;
-const SAVE_CLASS_NAME = 'edit-data-provider-save';
-const VALUE_INPUT_CLASS_NAME = 'edit-data-provider-value';
-
-export const HeaderContainer = styled.div`
-  width: ${EDIT_DATA_PROVIDER_WIDTH};
-`;
-
-HeaderContainer.displayName = 'HeaderContainer';
-
-interface Props {
-  andProviderId?: string;
-  browserFields: BrowserFields;
-  field: string;
-  isExcluded: boolean;
-  onDataProviderEdited: OnDataProviderEdited;
-  operator: QueryOperator;
-  providerId: string;
-  timelineId: string;
-  value: string | number;
-}
-
-const sanatizeValue = (value: string | number): string =>
-  Array.isArray(value) ? `${value[0]}` : `${value}`; // fun fact: value should never be an array
-
-export const getInitialOperatorLabel = (
-  isExcluded: boolean,
-  operator: QueryOperator
-): EuiComboBoxOptionOption[] => {
-  if (operator === ':') {
-    return isExcluded ? [{ label: i18n.IS_NOT }] : [{ label: i18n.IS }];
-  } else {
-    return isExcluded ? [{ label: i18n.DOES_NOT_EXIST }] : [{ label: i18n.EXISTS }];
-  }
-};
-
-export const StatefulEditDataProvider = React.memo<Props>(
-  ({
-    andProviderId,
-    browserFields,
-    field,
-    isExcluded,
-    onDataProviderEdited,
-    operator,
-    providerId,
-    timelineId,
-    value,
-  }) => {
-    const [updatedField, setUpdatedField] = useState<EuiComboBoxOptionOption[]>([{ label: field }]);
-    const [updatedOperator, setUpdatedOperator] = useState<EuiComboBoxOptionOption[]>(
-      getInitialOperatorLabel(isExcluded, operator)
-    );
-    const [updatedValue, setUpdatedValue] = useState<string | number>(value);
-
-    /** Focuses the Value input if it is visible, falling back to the Save button if it's not */
-    const focusInput = () => {
-      const elements = document.getElementsByClassName(VALUE_INPUT_CLASS_NAME);
-
-      if (elements.length > 0) {
-        (elements[0] as HTMLElement).focus(); // this cast is required because focus() does not exist on every `Element` returned by `getElementsByClassName`
-      } else {
-        const saveElements = document.getElementsByClassName(SAVE_CLASS_NAME);
-
-        if (saveElements.length > 0) {
-          (saveElements[0] as HTMLElement).focus();
-        }
-      }
-    };
-
-    const onFieldSelected = useCallback((selectedField: EuiComboBoxOptionOption[]) => {
-      setUpdatedField(selectedField);
-
-      focusInput();
-    }, []);
-
-    const onOperatorSelected = useCallback((operatorSelected: EuiComboBoxOptionOption[]) => {
-      setUpdatedOperator(operatorSelected);
-
-      focusInput();
-    }, []);
-
-    const onValueChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-      setUpdatedValue(e.target.value);
-    }, []);
-
-    const disableScrolling = () => {
-      const x =
-        window.pageXOffset !== undefined
-          ? window.pageXOffset
-          : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
-
-      const y =
-        window.pageYOffset !== undefined
-          ? window.pageYOffset
-          : (document.documentElement || document.body.parentNode || document.body).scrollTop;
-
-      window.onscroll = () => window.scrollTo(x, y);
-    };
-
-    const enableScrolling = () => {
-      window.onscroll = () => noop;
-    };
-
-    useEffect(() => {
-      disableScrolling();
-      focusInput();
-      return () => {
-        enableScrolling();
-      };
-    }, []);
-
-    return (
-      <EuiPanel paddingSize="s">
-        <EuiFlexGroup direction="column" gutterSize="none">
-          <EuiFlexItem grow={false}>
-            <EuiFlexGroup direction="row" gutterSize="none" justifyContent="spaceBetween">
-              <EuiFlexItem grow={false}>
-                <EuiFormRow label={i18n.FIELD}>
-                  <EuiToolTip content={updatedField.length > 0 ? updatedField[0].label : null}>
-                    <EuiComboBox
-                      data-test-subj="field"
-                      isClearable={false}
-                      onChange={onFieldSelected}
-                      options={getCategorizedFieldNames(browserFields)}
-                      placeholder={i18n.FIELD_PLACEHOLDER}
-                      selectedOptions={updatedField}
-                      singleSelection={{ asPlainText: true }}
-                      style={{ width: `${FIELD_COMBO_BOX_WIDTH}px` }}
-                    />
-                  </EuiToolTip>
-                </EuiFormRow>
-              </EuiFlexItem>
-
-              <EuiFlexItem grow={false}>
-                <EuiFormRow label={i18n.OPERATOR}>
-                  <EuiComboBox
-                    data-test-subj="operator"
-                    isClearable={false}
-                    onChange={onOperatorSelected}
-                    options={operatorLabels}
-                    placeholder={i18n.SELECT_AN_OPERATOR}
-                    selectedOptions={updatedOperator}
-                    singleSelection={{ asPlainText: true }}
-                    style={{ width: `${OPERATOR_COMBO_BOX_WIDTH}px` }}
-                  />
-                </EuiFormRow>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiFlexItem>
-
-          <EuiFlexItem grow={false}>
-            <EuiSpacer />
-          </EuiFlexItem>
-
-          {updatedOperator.length > 0 &&
-          updatedOperator[0].label !== i18n.EXISTS &&
-          updatedOperator[0].label !== i18n.DOES_NOT_EXIST ? (
-            <EuiFlexItem grow={false}>
-              <EuiFormRow label={i18n.VALUE_LABEL}>
-                <EuiFieldText
-                  className={VALUE_INPUT_CLASS_NAME}
-                  data-test-subj="value"
-                  onChange={onValueChange}
-                  placeholder={i18n.VALUE}
-                  value={sanatizeValue(updatedValue)}
-                />
-              </EuiFormRow>
-            </EuiFlexItem>
-          ) : null}
-
-          <EuiFlexItem grow={false}>
-            <EuiSpacer />
-          </EuiFlexItem>
-
-          <EuiFlexItem grow={false}>
-            <EuiFlexGroup justifyContent="flexEnd" gutterSize="none">
-              <EuiFlexItem grow={false}>
-                <EuiButton
-                  autoFocus
-                  className={SAVE_CLASS_NAME}
-                  color="primary"
-                  data-test-subj="save"
-                  fill={true}
-                  isDisabled={
-                    !selectionsAreValid({
-                      browserFields,
-                      selectedField: updatedField,
-                      selectedOperator: updatedOperator,
-                    })
-                  }
-                  onClick={() => {
-                    onDataProviderEdited({
-                      andProviderId,
-                      excluded: getExcludedFromSelection(updatedOperator),
-                      field: updatedField.length > 0 ? updatedField[0].label : '',
-                      id: timelineId,
-                      operator: getQueryOperatorFromSelection(updatedOperator),
-                      providerId,
-                      value: updatedValue,
-                    });
-                  }}
-                  size="s"
-                >
-                  {i18n.SAVE}
-                </EuiButton>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiPanel>
-    );
-  }
-);
-
-StatefulEditDataProvider.displayName = 'StatefulEditDataProvider';
diff --git a/x-pack/plugins/siem/public/components/embeddables/__mocks__/mock.ts b/x-pack/plugins/siem/public/components/embeddables/__mocks__/mock.ts
deleted file mode 100644
index 19ad0d452feb17..00000000000000
--- a/x-pack/plugins/siem/public/components/embeddables/__mocks__/mock.ts
+++ /dev/null
@@ -1,477 +0,0 @@
-/*
- * 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 { IndexPatternMapping } from '../types';
-import { IndexPatternSavedObject } from '../../../hooks/types';
-
-export const mockIndexPatternIds: IndexPatternMapping[] = [
-  { title: 'filebeat-*', id: '8c7323ac-97ad-4b53-ac0a-40f8f691a918' },
-];
-
-export const mockAPMIndexPatternIds: IndexPatternMapping[] = [
-  { title: 'apm-*', id: '8c7323ac-97ad-4b53-ac0a-40f8f691a918' },
-];
-
-export const mockSourceLayer = {
-  sourceDescriptor: {
-    id: 'uuid.v4()',
-    type: 'ES_SEARCH',
-    applyGlobalQuery: true,
-    geoField: 'source.geo.location',
-    filterByMapBounds: false,
-    tooltipProperties: [
-      'host.name',
-      'source.ip',
-      'source.domain',
-      'source.geo.country_iso_code',
-      'source.as.organization.name',
-    ],
-    useTopHits: false,
-    topHitsTimeField: '@timestamp',
-    topHitsSize: 1,
-    indexPatternId: '8c7323ac-97ad-4b53-ac0a-40f8f691a918',
-  },
-  style: {
-    type: 'VECTOR',
-    properties: {
-      fillColor: {
-        type: 'STATIC',
-        options: { color: '#6092C0' },
-      },
-      lineColor: {
-        type: 'STATIC',
-        options: { color: '#FFFFFF' },
-      },
-      lineWidth: { type: 'STATIC', options: { size: 2 } },
-      iconSize: { type: 'STATIC', options: { size: 8 } },
-      iconOrientation: {
-        type: 'STATIC',
-        options: { orientation: 0 },
-      },
-      symbolizeAs: {
-        options: { value: 'icon' },
-      },
-      icon: {
-        type: 'STATIC',
-        options: { value: 'home' },
-      },
-    },
-  },
-  id: 'uuid.v4()',
-  label: `filebeat-* | Source Point`,
-  minZoom: 0,
-  maxZoom: 24,
-  alpha: 1,
-  visible: true,
-  type: 'VECTOR',
-  query: { query: '', language: 'kuery' },
-  joins: [],
-};
-
-export const mockDestinationLayer = {
-  sourceDescriptor: {
-    id: 'uuid.v4()',
-    type: 'ES_SEARCH',
-    applyGlobalQuery: true,
-    geoField: 'destination.geo.location',
-    filterByMapBounds: true,
-    tooltipProperties: [
-      'host.name',
-      'destination.ip',
-      'destination.domain',
-      'destination.geo.country_iso_code',
-      'destination.as.organization.name',
-    ],
-    useTopHits: false,
-    topHitsTimeField: '@timestamp',
-    topHitsSize: 1,
-    indexPatternId: '8c7323ac-97ad-4b53-ac0a-40f8f691a918',
-  },
-  style: {
-    type: 'VECTOR',
-    properties: {
-      fillColor: {
-        type: 'STATIC',
-        options: { color: '#D36086' },
-      },
-      lineColor: {
-        type: 'STATIC',
-        options: { color: '#FFFFFF' },
-      },
-      lineWidth: { type: 'STATIC', options: { size: 2 } },
-      iconSize: { type: 'STATIC', options: { size: 8 } },
-      iconOrientation: {
-        type: 'STATIC',
-        options: { orientation: 0 },
-      },
-      symbolizeAs: {
-        options: { value: 'icon' },
-      },
-      icon: {
-        type: 'STATIC',
-        options: { value: 'marker' },
-      },
-    },
-  },
-  id: 'uuid.v4()',
-  label: `filebeat-* | Destination Point`,
-  minZoom: 0,
-  maxZoom: 24,
-  alpha: 1,
-  visible: true,
-  type: 'VECTOR',
-  query: { query: '', language: 'kuery' },
-};
-
-export const mockClientLayer = {
-  sourceDescriptor: {
-    id: 'uuid.v4()',
-    type: 'ES_SEARCH',
-    applyGlobalQuery: true,
-    geoField: 'client.geo.location',
-    filterByMapBounds: false,
-    tooltipProperties: [
-      'host.name',
-      'client.ip',
-      'client.domain',
-      'client.geo.country_iso_code',
-      'client.as.organization.name',
-    ],
-    useTopHits: false,
-    topHitsTimeField: '@timestamp',
-    topHitsSize: 1,
-    indexPatternId: '8c7323ac-97ad-4b53-ac0a-40f8f691a918',
-  },
-  style: {
-    type: 'VECTOR',
-    properties: {
-      fillColor: {
-        type: 'STATIC',
-        options: { color: '#6092C0' },
-      },
-      lineColor: {
-        type: 'STATIC',
-        options: { color: '#FFFFFF' },
-      },
-      lineWidth: { type: 'STATIC', options: { size: 2 } },
-      iconSize: { type: 'STATIC', options: { size: 8 } },
-      iconOrientation: {
-        type: 'STATIC',
-        options: { orientation: 0 },
-      },
-      symbolizeAs: {
-        options: { value: 'icon' },
-      },
-      icon: {
-        type: 'STATIC',
-        options: { value: 'home' },
-      },
-    },
-  },
-  id: 'uuid.v4()',
-  label: `apm-* | Client Point`,
-  minZoom: 0,
-  maxZoom: 24,
-  alpha: 1,
-  visible: true,
-  type: 'VECTOR',
-  query: { query: '', language: 'kuery' },
-  joins: [],
-};
-
-export const mockServerLayer = {
-  sourceDescriptor: {
-    id: 'uuid.v4()',
-    type: 'ES_SEARCH',
-    applyGlobalQuery: true,
-    geoField: 'server.geo.location',
-    filterByMapBounds: true,
-    tooltipProperties: [
-      'host.name',
-      'server.ip',
-      'server.domain',
-      'server.geo.country_iso_code',
-      'server.as.organization.name',
-    ],
-    useTopHits: false,
-    topHitsTimeField: '@timestamp',
-    topHitsSize: 1,
-    indexPatternId: '8c7323ac-97ad-4b53-ac0a-40f8f691a918',
-  },
-  style: {
-    type: 'VECTOR',
-    properties: {
-      fillColor: {
-        type: 'STATIC',
-        options: { color: '#D36086' },
-      },
-      lineColor: {
-        type: 'STATIC',
-        options: { color: '#FFFFFF' },
-      },
-      lineWidth: { type: 'STATIC', options: { size: 2 } },
-      iconSize: { type: 'STATIC', options: { size: 8 } },
-      iconOrientation: {
-        type: 'STATIC',
-        options: { orientation: 0 },
-      },
-      symbolizeAs: {
-        options: { value: 'icon' },
-      },
-      icon: {
-        type: 'STATIC',
-        options: { value: 'marker' },
-      },
-    },
-  },
-  id: 'uuid.v4()',
-  label: `apm-* | Server Point`,
-  minZoom: 0,
-  maxZoom: 24,
-  alpha: 1,
-  visible: true,
-  type: 'VECTOR',
-  query: { query: '', language: 'kuery' },
-};
-
-export const mockLineLayer = {
-  sourceDescriptor: {
-    type: 'ES_PEW_PEW',
-    applyGlobalQuery: true,
-    id: 'uuid.v4()',
-    indexPatternId: '8c7323ac-97ad-4b53-ac0a-40f8f691a918',
-    sourceGeoField: 'source.geo.location',
-    destGeoField: 'destination.geo.location',
-    metrics: [
-      { type: 'sum', field: 'source.bytes', label: 'source.bytes' },
-      { type: 'sum', field: 'destination.bytes', label: 'destination.bytes' },
-    ],
-  },
-  style: {
-    type: 'VECTOR',
-    properties: {
-      fillColor: {
-        type: 'STATIC',
-        options: { color: '#1EA593' },
-      },
-      lineColor: {
-        type: 'STATIC',
-        options: { color: '#6092C0' },
-      },
-      lineWidth: {
-        type: 'DYNAMIC',
-        options: {
-          field: {
-            label: 'count',
-            name: 'doc_count',
-            origin: 'source',
-          },
-          minSize: 1,
-          maxSize: 8,
-          fieldMetaOptions: {
-            isEnabled: true,
-            sigma: 3,
-          },
-        },
-      },
-      iconSize: { type: 'STATIC', options: { size: 10 } },
-      iconOrientation: {
-        type: 'STATIC',
-        options: { orientation: 0 },
-      },
-      symbolizeAs: {
-        options: { value: 'icon' },
-      },
-      icon: {
-        type: 'STATIC',
-        options: { value: 'airfield' },
-      },
-    },
-  },
-  id: 'uuid.v4()',
-  label: `filebeat-* | Line`,
-  minZoom: 0,
-  maxZoom: 24,
-  alpha: 0.5,
-  visible: true,
-  type: 'VECTOR',
-  query: { query: '', language: 'kuery' },
-};
-
-export const mockClientServerLineLayer = {
-  sourceDescriptor: {
-    type: 'ES_PEW_PEW',
-    applyGlobalQuery: true,
-    id: 'uuid.v4()',
-    indexPatternId: '8c7323ac-97ad-4b53-ac0a-40f8f691a918',
-    sourceGeoField: 'client.geo.location',
-    destGeoField: 'server.geo.location',
-    metrics: [
-      { type: 'sum', field: 'client.bytes', label: 'client.bytes' },
-      { type: 'sum', field: 'server.bytes', label: 'server.bytes' },
-    ],
-  },
-  style: {
-    type: 'VECTOR',
-    properties: {
-      fillColor: {
-        type: 'STATIC',
-        options: { color: '#1EA593' },
-      },
-      lineColor: {
-        type: 'STATIC',
-        options: { color: '#6092C0' },
-      },
-      lineWidth: {
-        type: 'DYNAMIC',
-        options: {
-          field: {
-            label: 'count',
-            name: 'doc_count',
-            origin: 'source',
-          },
-          minSize: 1,
-          maxSize: 8,
-          fieldMetaOptions: {
-            isEnabled: true,
-            sigma: 3,
-          },
-        },
-      },
-      iconSize: { type: 'STATIC', options: { size: 10 } },
-      iconOrientation: {
-        type: 'STATIC',
-        options: { orientation: 0 },
-      },
-      symbolizeAs: {
-        options: { value: 'icon' },
-      },
-      icon: {
-        type: 'STATIC',
-        options: { value: 'airfield' },
-      },
-    },
-  },
-  id: 'uuid.v4()',
-  label: `apm-* | Line`,
-  minZoom: 0,
-  maxZoom: 24,
-  alpha: 0.5,
-  visible: true,
-  type: 'VECTOR',
-  query: { query: '', language: 'kuery' },
-};
-
-export const mockLayerList = [
-  {
-    sourceDescriptor: { type: 'EMS_TMS', isAutoSelect: true },
-    id: 'uuid.v4()',
-    label: null,
-    minZoom: 0,
-    maxZoom: 24,
-    alpha: 1,
-    visible: true,
-    style: null,
-    type: 'VECTOR_TILE',
-  },
-  mockLineLayer,
-  mockDestinationLayer,
-  mockSourceLayer,
-];
-
-export const mockLayerListDouble = [
-  {
-    sourceDescriptor: { type: 'EMS_TMS', isAutoSelect: true },
-    id: 'uuid.v4()',
-    label: null,
-    minZoom: 0,
-    maxZoom: 24,
-    alpha: 1,
-    visible: true,
-    style: null,
-    type: 'VECTOR_TILE',
-  },
-  mockLineLayer,
-  mockDestinationLayer,
-  mockSourceLayer,
-  mockLineLayer,
-  mockDestinationLayer,
-  mockSourceLayer,
-];
-
-export const mockLayerListMixed = [
-  {
-    sourceDescriptor: { type: 'EMS_TMS', isAutoSelect: true },
-    id: 'uuid.v4()',
-    label: null,
-    minZoom: 0,
-    maxZoom: 24,
-    alpha: 1,
-    visible: true,
-    style: null,
-    type: 'VECTOR_TILE',
-  },
-  mockLineLayer,
-  mockDestinationLayer,
-  mockSourceLayer,
-  mockClientServerLineLayer,
-  mockServerLayer,
-  mockClientLayer,
-];
-
-export const mockAPMIndexPattern: IndexPatternSavedObject = {
-  id: 'apm-*',
-  type: 'index-pattern',
-  _version: 'abc',
-  attributes: {
-    title: 'apm-*',
-  },
-};
-
-export const mockAPMRegexIndexPattern: IndexPatternSavedObject = {
-  id: 'apm-7.*',
-  type: 'index-pattern',
-  _version: 'abc',
-  attributes: {
-    title: 'apm-7.*',
-  },
-};
-
-export const mockFilebeatIndexPattern: IndexPatternSavedObject = {
-  id: 'filebeat-*',
-  type: 'index-pattern',
-  _version: 'abc',
-  attributes: {
-    title: 'filebeat-*',
-  },
-};
-
-export const mockAuditbeatIndexPattern: IndexPatternSavedObject = {
-  id: 'auditbeat-*',
-  type: 'index-pattern',
-  _version: 'abc',
-  attributes: {
-    title: 'auditbeat-*',
-  },
-};
-
-export const mockAPMTransactionIndexPattern: IndexPatternSavedObject = {
-  id: 'apm-*-transaction*',
-  type: 'index-pattern',
-  _version: 'abc',
-  attributes: {
-    title: 'apm-*-transaction*',
-  },
-};
-
-export const mockGlobIndexPattern: IndexPatternSavedObject = {
-  id: '*',
-  type: 'index-pattern',
-  _version: 'abc',
-  attributes: {
-    title: '*',
-  },
-};
diff --git a/x-pack/plugins/siem/public/components/embeddables/types.ts b/x-pack/plugins/siem/public/components/embeddables/types.ts
deleted file mode 100644
index d8e20c7f47b4ed..00000000000000
--- a/x-pack/plugins/siem/public/components/embeddables/types.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-/*
- * 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 { RenderTooltipContentParams } from '../../../../../legacy/plugins/maps/public';
-import { inputsModel } from '../../store/inputs';
-
-export interface IndexPatternMapping {
-  title: string;
-  id: string;
-}
-
-export interface LayerMappingDetails {
-  metricField: string;
-  geoField: string;
-  tooltipProperties: string[];
-  label: string;
-}
-
-export interface LayerMapping {
-  source: LayerMappingDetails;
-  destination: LayerMappingDetails;
-}
-
-export interface LayerMappingCollection {
-  [indexPatternTitle: string]: LayerMapping;
-}
-
-export type SetQuery = (params: {
-  id: string;
-  inspect: inputsModel.InspectQuery | null;
-  loading: boolean;
-  refetch: inputsModel.Refetch;
-}) => void;
-
-export interface MapFeature {
-  id: number;
-  layerId: string;
-}
-
-export interface LoadFeatureProps {
-  layerId: string;
-  featureId: number;
-}
-
-export interface FeatureProperty {
-  _propertyKey: string;
-  _rawValue: string | string[];
-}
-
-export interface FeatureGeometry {
-  coordinates: [number];
-  type: string;
-}
-
-export type MapToolTipProps = Partial<RenderTooltipContentParams>;
diff --git a/x-pack/plugins/siem/public/components/error_toast_dispatcher/index.test.tsx b/x-pack/plugins/siem/public/components/error_toast_dispatcher/index.test.tsx
deleted file mode 100644
index 6b90d9ccd08c48..00000000000000
--- a/x-pack/plugins/siem/public/components/error_toast_dispatcher/index.test.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
- * 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 { shallow } from 'enzyme';
-import React from 'react';
-import { Provider } from 'react-redux';
-
-import { apolloClientObservable, mockGlobalState } from '../../mock';
-import { createStore } from '../../store/store';
-
-import { ErrorToastDispatcher } from '.';
-import { State } from '../../store/reducer';
-
-describe('Error Toast Dispatcher', () => {
-  const state: State = mockGlobalState;
-  let store = createStore(state, apolloClientObservable);
-
-  beforeEach(() => {
-    store = createStore(state, apolloClientObservable);
-  });
-
-  describe('rendering', () => {
-    test('it renders', () => {
-      const wrapper = shallow(
-        <Provider store={store}>
-          <ErrorToastDispatcher toastLifeTimeMs={9999999999} />
-        </Provider>
-      );
-      expect(wrapper.find('Connect(ErrorToastDispatcherComponent)')).toMatchSnapshot();
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/event_details/columns.tsx b/x-pack/plugins/siem/public/components/event_details/columns.tsx
deleted file mode 100644
index 131a3a63bae309..00000000000000
--- a/x-pack/plugins/siem/public/components/event_details/columns.tsx
+++ /dev/null
@@ -1,210 +0,0 @@
-/*
- * 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.
- */
-
-/* eslint-disable react/display-name */
-
-import {
-  EuiCheckbox,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiIcon,
-  EuiPanel,
-  EuiText,
-  EuiToolTip,
-} from '@elastic/eui';
-import React from 'react';
-import { Draggable } from 'react-beautiful-dnd';
-import styled from 'styled-components';
-
-import { BrowserFields } from '../../containers/source';
-import { ToStringArray } from '../../graphql/types';
-import { ColumnHeaderOptions } from '../../store/timeline/model';
-import { DragEffects } from '../drag_and_drop/draggable_wrapper';
-import { DroppableWrapper } from '../drag_and_drop/droppable_wrapper';
-import { getDroppableId, getDraggableFieldId, DRAG_TYPE_FIELD } from '../drag_and_drop/helpers';
-import { DraggableFieldBadge } from '../draggables/field_badge';
-import { FieldName } from '../fields_browser/field_name';
-import { SelectableText } from '../selectable_text';
-import { OverflowField } from '../tables/helpers';
-import { defaultColumnHeaderType } from '../timeline/body/column_headers/default_headers';
-import { DEFAULT_COLUMN_MIN_WIDTH } from '../timeline/body/constants';
-import { MESSAGE_FIELD_NAME } from '../timeline/body/renderers/constants';
-import { FormattedFieldValue } from '../timeline/body/renderers/formatted_field';
-import { OnUpdateColumns } from '../timeline/events';
-import { getIconFromType, getExampleText, getColumnsWithTimestamp } from './helpers';
-import * as i18n from './translations';
-import { EventFieldsData } from './types';
-
-const HoverActionsContainer = styled(EuiPanel)`
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  height: 25px;
-  justify-content: center;
-  left: 5px;
-  position: absolute;
-  top: -10px;
-  width: 30px;
-`;
-
-HoverActionsContainer.displayName = 'HoverActionsContainer';
-
-export const getColumns = ({
-  browserFields,
-  columnHeaders,
-  eventId,
-  onUpdateColumns,
-  contextId,
-  toggleColumn,
-}: {
-  browserFields: BrowserFields;
-  columnHeaders: ColumnHeaderOptions[];
-  eventId: string;
-  onUpdateColumns: OnUpdateColumns;
-  contextId: string;
-  toggleColumn: (column: ColumnHeaderOptions) => void;
-}) => [
-  {
-    field: 'field',
-    name: '',
-    sortable: false,
-    truncateText: false,
-    width: '30px',
-    render: (field: string) => (
-      <EuiToolTip content={i18n.TOGGLE_COLUMN_TOOLTIP}>
-        <EuiCheckbox
-          checked={columnHeaders.findIndex(c => c.id === field) !== -1}
-          data-test-subj={`toggle-field-${field}`}
-          id={field}
-          onChange={() =>
-            toggleColumn({
-              columnHeaderType: defaultColumnHeaderType,
-              id: field,
-              width: DEFAULT_COLUMN_MIN_WIDTH,
-            })
-          }
-        />
-      </EuiToolTip>
-    ),
-  },
-  {
-    field: 'field',
-    name: i18n.FIELD,
-    sortable: true,
-    truncateText: false,
-    render: (field: string, data: EventFieldsData) => (
-      <EuiFlexGroup alignItems="center" gutterSize="none">
-        <EuiFlexItem grow={false}>
-          <EuiToolTip content={data.type}>
-            <EuiIcon data-test-subj="field-type-icon" type={getIconFromType(data.type)} />
-          </EuiToolTip>
-        </EuiFlexItem>
-
-        <EuiFlexItem grow={false}>
-          <DroppableWrapper
-            droppableId={getDroppableId(
-              `event-details-field-droppable-wrapper-${contextId}-${eventId}-${data.category}-${field}`
-            )}
-            key={getDroppableId(
-              `event-details-field-droppable-wrapper-${contextId}-${eventId}-${data.category}-${field}`
-            )}
-            isDropDisabled={true}
-            type={DRAG_TYPE_FIELD}
-            renderClone={provided => (
-              <div
-                {...provided.draggableProps}
-                {...provided.dragHandleProps}
-                ref={provided.innerRef}
-              >
-                <DragEffects>
-                  <DraggableFieldBadge fieldId={field} />
-                </DragEffects>
-              </div>
-            )}
-          >
-            <Draggable
-              draggableId={getDraggableFieldId({
-                contextId: `event-details-field-draggable-${contextId}-${eventId}-${data.category}-${field}`,
-                fieldId: field,
-              })}
-              index={0}
-            >
-              {provided => (
-                <div
-                  {...provided.draggableProps}
-                  {...provided.dragHandleProps}
-                  ref={provided.innerRef}
-                >
-                  <FieldName
-                    categoryId={data.category}
-                    categoryColumns={getColumnsWithTimestamp({
-                      browserFields,
-                      category: data.category,
-                    })}
-                    data-test-subj="field-name"
-                    fieldId={field}
-                    onUpdateColumns={onUpdateColumns}
-                  />
-                </div>
-              )}
-            </Draggable>
-          </DroppableWrapper>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    ),
-  },
-  {
-    field: 'values',
-    name: i18n.VALUE,
-    sortable: true,
-    truncateText: false,
-    render: (values: ToStringArray | null | undefined, data: EventFieldsData) => (
-      <EuiFlexGroup direction="column" alignItems="flexStart" component="span" gutterSize="none">
-        {values != null &&
-          values.map((value, i) => (
-            <EuiFlexItem
-              grow={false}
-              component="span"
-              key={`event-details-value-flex-item-${contextId}-${eventId}-${data.field}-${i}-${value}`}
-            >
-              {data.field === MESSAGE_FIELD_NAME ? (
-                <OverflowField value={value} />
-              ) : (
-                <FormattedFieldValue
-                  contextId={`event-details-value-formatted-field-value-${contextId}-${eventId}-${data.field}-${i}-${value}`}
-                  eventId={eventId}
-                  fieldFormat={data.format}
-                  fieldName={data.field}
-                  fieldType={data.type}
-                  value={value}
-                />
-              )}
-            </EuiFlexItem>
-          ))}
-      </EuiFlexGroup>
-    ),
-  },
-  {
-    field: 'description',
-    name: i18n.DESCRIPTION,
-    render: (description: string | null | undefined, data: EventFieldsData) => (
-      <SelectableText>
-        <EuiText size="xs">{`${description || ''} ${getExampleText(data.example)}`}</EuiText>
-      </SelectableText>
-    ),
-    sortable: true,
-    truncateText: true,
-    width: '50%',
-  },
-  {
-    field: 'valuesConcatenated',
-    name: i18n.BLANK,
-    render: () => null,
-    sortable: false,
-    truncateText: true,
-    width: '1px',
-  },
-];
diff --git a/x-pack/plugins/siem/public/components/event_details/helpers.tsx b/x-pack/plugins/siem/public/components/event_details/helpers.tsx
deleted file mode 100644
index 5d9c9d82490bbb..00000000000000
--- a/x-pack/plugins/siem/public/components/event_details/helpers.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-/*
- * 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 { get, getOr, isEmpty, uniqBy } from 'lodash/fp';
-
-import { BrowserField, BrowserFields } from '../../containers/source';
-import { ColumnHeaderOptions } from '../../store/timeline/model';
-import {
-  DEFAULT_DATE_COLUMN_MIN_WIDTH,
-  DEFAULT_COLUMN_MIN_WIDTH,
-} from '../timeline/body/constants';
-import { ToStringArray } from '../../graphql/types';
-
-import * as i18n from './translations';
-
-/**
- * Defines the behavior of the search input that appears above the table of data
- */
-export const search = {
-  box: {
-    incremental: true,
-    placeholder: i18n.PLACEHOLDER,
-    schema: true,
-  },
-};
-
-export interface ItemValues {
-  value: JSX.Element;
-  valueAsString: string;
-}
-
-/**
- * An item rendered in the table
- */
-export interface Item {
-  description: string;
-  field: JSX.Element;
-  fieldId: string;
-  type: string;
-  values: ToStringArray;
-}
-
-export const getColumnHeaderFromBrowserField = ({
-  browserField,
-  width = DEFAULT_COLUMN_MIN_WIDTH,
-}: {
-  browserField: Partial<BrowserField>;
-  width?: number;
-}): ColumnHeaderOptions => ({
-  category: browserField.category,
-  columnHeaderType: 'not-filtered',
-  description: browserField.description != null ? browserField.description : undefined,
-  example: browserField.example != null ? `${browserField.example}` : undefined,
-  id: browserField.name || '',
-  type: browserField.type,
-  aggregatable: browserField.aggregatable,
-  width,
-});
-
-/**
- * Returns a collection of columns, where the first column in the collection
- * is a timestamp, and the remaining columns are all the columns in the
- * specified category
- */
-export const getColumnsWithTimestamp = ({
-  browserFields,
-  category,
-}: {
-  browserFields: BrowserFields;
-  category: string;
-}): ColumnHeaderOptions[] => {
-  const emptyFields: Record<string, Partial<BrowserField>> = {};
-  const timestamp = get('base.fields.@timestamp', browserFields);
-  const categoryFields: Array<Partial<BrowserField>> = [
-    ...Object.values(getOr(emptyFields, `${category}.fields`, browserFields)),
-  ];
-
-  return timestamp != null && categoryFields.length
-    ? uniqBy('id', [
-        getColumnHeaderFromBrowserField({
-          browserField: timestamp,
-          width: DEFAULT_DATE_COLUMN_MIN_WIDTH,
-        }),
-        ...categoryFields.map(f => getColumnHeaderFromBrowserField({ browserField: f })),
-      ])
-    : [];
-};
-
-/** Returns example text, or an empty string if the field does not have an example */
-export const getExampleText = (example: string | number | null | undefined): string =>
-  !isEmpty(example) ? `Example: ${example}` : '';
-
-export const getIconFromType = (type: string | null) => {
-  switch (type) {
-    case 'string': // fall through
-    case 'keyword':
-      return 'string';
-    case 'number': // fall through
-    case 'long':
-      return 'number';
-    case 'date':
-      return 'clock';
-    case 'ip':
-      return 'globe';
-    case 'object':
-      return 'questionInCircle';
-    case 'float':
-      return 'number';
-    default:
-      return 'questionInCircle';
-  }
-};
diff --git a/x-pack/plugins/siem/public/components/event_details/types.ts b/x-pack/plugins/siem/public/components/event_details/types.ts
deleted file mode 100644
index 4e351fcdf98e4c..00000000000000
--- a/x-pack/plugins/siem/public/components/event_details/types.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- * 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 { BrowserField } from '../../containers/source';
-import { DetailItem } from '../../graphql/types';
-
-export type EventFieldsData = BrowserField & DetailItem;
diff --git a/x-pack/plugins/siem/public/components/events_viewer/default_model.tsx b/x-pack/plugins/siem/public/components/events_viewer/default_model.tsx
deleted file mode 100644
index 59a9f6d061c8d4..00000000000000
--- a/x-pack/plugins/siem/public/components/events_viewer/default_model.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-/*
- * 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 { defaultHeaders } from './default_headers';
-import { SubsetTimelineModel } from '../../store/timeline/model';
-import { timelineDefaults } from '../../store/timeline/defaults';
-
-export const eventsDefaultModel: SubsetTimelineModel = {
-  ...timelineDefaults,
-  columns: defaultHeaders,
-};
diff --git a/x-pack/plugins/siem/public/components/events_viewer/index.test.tsx b/x-pack/plugins/siem/public/components/events_viewer/index.test.tsx
deleted file mode 100644
index 6f614c1e32f651..00000000000000
--- a/x-pack/plugins/siem/public/components/events_viewer/index.test.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-/*
- * 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 { MockedProvider } from 'react-apollo/test-utils';
-import useResizeObserver from 'use-resize-observer/polyfilled';
-
-import { wait } from '../../lib/helpers';
-import { mockIndexPattern, TestProviders } from '../../mock';
-import { useMountAppended } from '../../utils/use_mount_appended';
-
-import { mockEventViewerResponse } from './mock';
-import { StatefulEventsViewer } from '.';
-import { useFetchIndexPatterns } from '../../containers/detection_engine/rules/fetch_index_patterns';
-import { mockBrowserFields } from '../../containers/source/mock';
-import { eventsDefaultModel } from './default_model';
-
-const mockUseFetchIndexPatterns: jest.Mock = useFetchIndexPatterns as jest.Mock;
-jest.mock('../../containers/detection_engine/rules/fetch_index_patterns');
-mockUseFetchIndexPatterns.mockImplementation(() => [
-  {
-    browserFields: mockBrowserFields,
-    indexPatterns: mockIndexPattern,
-  },
-]);
-
-const mockUseResizeObserver: jest.Mock = useResizeObserver as jest.Mock;
-jest.mock('use-resize-observer/polyfilled');
-mockUseResizeObserver.mockImplementation(() => ({}));
-
-const from = 1566943856794;
-const to = 1566857456791;
-
-describe('StatefulEventsViewer', () => {
-  const mount = useMountAppended();
-
-  test('it renders the events viewer', async () => {
-    const wrapper = mount(
-      <TestProviders>
-        <MockedProvider mocks={mockEventViewerResponse} addTypename={false}>
-          <StatefulEventsViewer
-            defaultModel={eventsDefaultModel}
-            end={to}
-            id={'test-stateful-events-viewer'}
-            start={from}
-          />
-        </MockedProvider>
-      </TestProviders>
-    );
-
-    await wait();
-    wrapper.update();
-
-    expect(
-      wrapper
-        .find('[data-test-subj="events-viewer-panel"]')
-        .first()
-        .exists()
-    ).toBe(true);
-  });
-
-  // InspectButtonContainer controls displaying InspectButton components
-  test('it renders InspectButtonContainer', async () => {
-    const wrapper = mount(
-      <TestProviders>
-        <MockedProvider mocks={mockEventViewerResponse} addTypename={false}>
-          <StatefulEventsViewer
-            defaultModel={eventsDefaultModel}
-            end={to}
-            id={'test-stateful-events-viewer'}
-            start={from}
-          />
-        </MockedProvider>
-      </TestProviders>
-    );
-
-    await wait();
-    wrapper.update();
-
-    expect(wrapper.find(`InspectButtonContainer`).exists()).toBe(true);
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/events_viewer/index.tsx b/x-pack/plugins/siem/public/components/events_viewer/index.tsx
deleted file mode 100644
index bc6a1b3b77bfa9..00000000000000
--- a/x-pack/plugins/siem/public/components/events_viewer/index.tsx
+++ /dev/null
@@ -1,218 +0,0 @@
-/*
- * 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, { useCallback, useMemo, useEffect } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
-import deepEqual from 'fast-deep-equal';
-
-import { DEFAULT_INDEX_KEY } from '../../../common/constants';
-import { inputsModel, inputsSelectors, State, timelineSelectors } from '../../store';
-import { inputsActions, timelineActions } from '../../store/actions';
-import {
-  ColumnHeaderOptions,
-  SubsetTimelineModel,
-  TimelineModel,
-} from '../../store/timeline/model';
-import { OnChangeItemsPerPage } from '../timeline/events';
-import { Filter } from '../../../../../../src/plugins/data/public';
-import { useUiSetting } from '../../lib/kibana';
-import { EventsViewer } from './events_viewer';
-import { useFetchIndexPatterns } from '../../containers/detection_engine/rules/fetch_index_patterns';
-import { TimelineTypeContextProps } from '../timeline/timeline_context';
-import { InspectButtonContainer } from '../inspect';
-import * as i18n from './translations';
-
-export interface OwnProps {
-  defaultIndices?: string[];
-  defaultModel: SubsetTimelineModel;
-  end: number;
-  id: string;
-  start: number;
-  headerFilterGroup?: React.ReactNode;
-  pageFilters?: Filter[];
-  timelineTypeContext?: TimelineTypeContextProps;
-  utilityBar?: (refetch: inputsModel.Refetch, totalCount: number) => React.ReactNode;
-}
-
-type Props = OwnProps & PropsFromRedux;
-
-const defaultTimelineTypeContext = {
-  loadingText: i18n.LOADING_EVENTS,
-};
-
-const StatefulEventsViewerComponent: React.FC<Props> = ({
-  createTimeline,
-  columns,
-  dataProviders,
-  deletedEventIds,
-  defaultIndices,
-  deleteEventQuery,
-  end,
-  filters,
-  headerFilterGroup,
-  id,
-  isLive,
-  itemsPerPage,
-  itemsPerPageOptions,
-  kqlMode,
-  pageFilters,
-  query,
-  removeColumn,
-  start,
-  showCheckboxes,
-  showRowRenderers,
-  sort,
-  timelineTypeContext = defaultTimelineTypeContext,
-  updateItemsPerPage,
-  upsertColumn,
-  utilityBar,
-}) => {
-  const [{ browserFields, indexPatterns }] = useFetchIndexPatterns(
-    defaultIndices ?? useUiSetting<string[]>(DEFAULT_INDEX_KEY)
-  );
-
-  useEffect(() => {
-    if (createTimeline != null) {
-      createTimeline({ id, columns, sort, itemsPerPage, showCheckboxes, showRowRenderers });
-    }
-    return () => {
-      deleteEventQuery({ id, inputId: 'global' });
-    };
-  }, []);
-
-  const onChangeItemsPerPage: OnChangeItemsPerPage = useCallback(
-    itemsChangedPerPage => updateItemsPerPage({ id, itemsPerPage: itemsChangedPerPage }),
-    [id, updateItemsPerPage]
-  );
-
-  const toggleColumn = useCallback(
-    (column: ColumnHeaderOptions) => {
-      const exists = columns.findIndex(c => c.id === column.id) !== -1;
-
-      if (!exists && upsertColumn != null) {
-        upsertColumn({
-          column,
-          id,
-          index: 1,
-        });
-      }
-
-      if (exists && removeColumn != null) {
-        removeColumn({
-          columnId: column.id,
-          id,
-        });
-      }
-    },
-    [columns, id, upsertColumn, removeColumn]
-  );
-
-  const globalFilters = useMemo(() => [...filters, ...(pageFilters ?? [])], [filters, pageFilters]);
-
-  return (
-    <InspectButtonContainer>
-      <EventsViewer
-        browserFields={browserFields}
-        columns={columns}
-        id={id}
-        dataProviders={dataProviders!}
-        deletedEventIds={deletedEventIds}
-        end={end}
-        filters={globalFilters}
-        headerFilterGroup={headerFilterGroup}
-        indexPattern={indexPatterns}
-        isLive={isLive}
-        itemsPerPage={itemsPerPage!}
-        itemsPerPageOptions={itemsPerPageOptions!}
-        kqlMode={kqlMode}
-        onChangeItemsPerPage={onChangeItemsPerPage}
-        query={query}
-        start={start}
-        sort={sort!}
-        timelineTypeContext={timelineTypeContext}
-        toggleColumn={toggleColumn}
-        utilityBar={utilityBar}
-      />
-    </InspectButtonContainer>
-  );
-};
-
-const makeMapStateToProps = () => {
-  const getInputsTimeline = inputsSelectors.getTimelineSelector();
-  const getGlobalQuerySelector = inputsSelectors.globalQuerySelector();
-  const getGlobalFiltersQuerySelector = inputsSelectors.globalFiltersQuerySelector();
-  const getEvents = timelineSelectors.getEventsByIdSelector();
-  const mapStateToProps = (state: State, { id, defaultModel }: OwnProps) => {
-    const input: inputsModel.InputsRange = getInputsTimeline(state);
-    const events: TimelineModel = getEvents(state, id) ?? defaultModel;
-    const {
-      columns,
-      dataProviders,
-      deletedEventIds,
-      itemsPerPage,
-      itemsPerPageOptions,
-      kqlMode,
-      sort,
-      showCheckboxes,
-      showRowRenderers,
-    } = events;
-
-    return {
-      columns,
-      dataProviders,
-      deletedEventIds,
-      filters: getGlobalFiltersQuerySelector(state),
-      id,
-      isLive: input.policy.kind === 'interval',
-      itemsPerPage,
-      itemsPerPageOptions,
-      kqlMode,
-      query: getGlobalQuerySelector(state),
-      sort,
-      showCheckboxes,
-      showRowRenderers,
-    };
-  };
-  return mapStateToProps;
-};
-
-const mapDispatchToProps = {
-  createTimeline: timelineActions.createTimeline,
-  deleteEventQuery: inputsActions.deleteOneQuery,
-  updateItemsPerPage: timelineActions.updateItemsPerPage,
-  removeColumn: timelineActions.removeColumn,
-  upsertColumn: timelineActions.upsertColumn,
-};
-
-const connector = connect(makeMapStateToProps, mapDispatchToProps);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-export const StatefulEventsViewer = connector(
-  React.memo(
-    StatefulEventsViewerComponent,
-    (prevProps, nextProps) =>
-      prevProps.id === nextProps.id &&
-      deepEqual(prevProps.columns, nextProps.columns) &&
-      deepEqual(prevProps.dataProviders, nextProps.dataProviders) &&
-      prevProps.deletedEventIds === nextProps.deletedEventIds &&
-      prevProps.end === nextProps.end &&
-      deepEqual(prevProps.filters, nextProps.filters) &&
-      prevProps.isLive === nextProps.isLive &&
-      prevProps.itemsPerPage === nextProps.itemsPerPage &&
-      deepEqual(prevProps.itemsPerPageOptions, nextProps.itemsPerPageOptions) &&
-      prevProps.kqlMode === nextProps.kqlMode &&
-      deepEqual(prevProps.query, nextProps.query) &&
-      deepEqual(prevProps.sort, nextProps.sort) &&
-      prevProps.start === nextProps.start &&
-      deepEqual(prevProps.pageFilters, nextProps.pageFilters) &&
-      prevProps.showCheckboxes === nextProps.showCheckboxes &&
-      prevProps.showRowRenderers === nextProps.showRowRenderers &&
-      prevProps.start === nextProps.start &&
-      deepEqual(prevProps.timelineTypeContext, nextProps.timelineTypeContext) &&
-      prevProps.utilityBar === nextProps.utilityBar
-  )
-);
diff --git a/x-pack/plugins/siem/public/components/events_viewer/mock.ts b/x-pack/plugins/siem/public/components/events_viewer/mock.ts
deleted file mode 100644
index 352b0b95c6dd4d..00000000000000
--- a/x-pack/plugins/siem/public/components/events_viewer/mock.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-/*
- * 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 { noop } from 'lodash/fp';
-import { timelineQuery } from '../../containers/timeline/index.gql_query';
-
-export const mockEventViewerResponse = [
-  {
-    request: {
-      query: timelineQuery,
-      fetchPolicy: 'network-only',
-      notifyOnNetworkStatusChange: true,
-      variables: {
-        fieldRequested: [
-          '@timestamp',
-          'message',
-          'host.name',
-          'event.module',
-          'event.dataset',
-          'event.action',
-          'user.name',
-          'source.ip',
-          'destination.ip',
-        ],
-        filterQuery:
-          '{"bool":{"must":[],"filter":[{"bool":{"filter":[{"bool":{"should":[{"range":{"@timestamp":{"gte":1566943856794}}}],"minimum_should_match":1}},{"bool":{"should":[{"range":{"@timestamp":{"lte":1566857456791}}}],"minimum_should_match":1}}]}}],"should":[],"must_not":[]}}',
-        sourceId: 'default',
-        pagination: { limit: 25, cursor: null, tiebreaker: null },
-        sortField: { sortFieldId: '@timestamp', direction: 'desc' },
-        defaultIndex: ['filebeat-*', 'auditbeat-*', 'packetbeat-*'],
-        inspect: false,
-      },
-    },
-    result: {
-      loading: false,
-      fetchMore: noop,
-      refetch: noop,
-      data: {
-        source: {
-          id: 'default',
-          Timeline: {
-            totalCount: 12,
-            pageInfo: {
-              endCursor: null,
-              hasNextPage: true,
-              __typename: 'PageInfo',
-            },
-            edges: [],
-            __typename: 'TimelineData',
-          },
-          __typename: 'Source',
-        },
-      },
-    },
-  },
-];
diff --git a/x-pack/plugins/siem/public/components/fields_browser/helpers.test.tsx b/x-pack/plugins/siem/public/components/fields_browser/helpers.test.tsx
deleted file mode 100644
index db9daacb21fa8f..00000000000000
--- a/x-pack/plugins/siem/public/components/fields_browser/helpers.test.tsx
+++ /dev/null
@@ -1,376 +0,0 @@
-/*
- * 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 { mockBrowserFields } from '../../containers/source/mock';
-
-import {
-  categoryHasFields,
-  createVirtualCategory,
-  getCategoryPaneCategoryClassName,
-  getFieldBrowserCategoryTitleClassName,
-  getFieldBrowserSearchInputClassName,
-  getFieldCount,
-  filterBrowserFieldsByFieldName,
-} from './helpers';
-import { BrowserFields } from '../../containers/source';
-
-const timelineId = 'test';
-
-describe('helpers', () => {
-  describe('getCategoryPaneCategoryClassName', () => {
-    test('it returns the expected class name', () => {
-      const categoryId = 'auditd';
-
-      expect(getCategoryPaneCategoryClassName({ categoryId, timelineId })).toEqual(
-        'field-browser-category-pane-auditd-test'
-      );
-    });
-  });
-
-  describe('getFieldBrowserCategoryTitleClassName', () => {
-    test('it returns the expected class name', () => {
-      const categoryId = 'auditd';
-
-      expect(getFieldBrowserCategoryTitleClassName({ categoryId, timelineId })).toEqual(
-        'field-browser-category-title-auditd-test'
-      );
-    });
-  });
-
-  describe('getFieldBrowserSearchInputClassName', () => {
-    test('it returns the expected class name', () => {
-      expect(getFieldBrowserSearchInputClassName(timelineId)).toEqual(
-        'field-browser-search-input-test'
-      );
-    });
-  });
-
-  describe('categoryHasFields', () => {
-    test('it returns false if the category fields property is undefined', () => {
-      expect(categoryHasFields({})).toBe(false);
-    });
-
-    test('it returns false if the category fields property is empty', () => {
-      expect(categoryHasFields({ fields: {} })).toBe(false);
-    });
-
-    test('it returns true if the category has one field', () => {
-      expect(
-        categoryHasFields({
-          fields: {
-            'auditd.data.a0': {
-              aggregatable: true,
-              category: 'auditd',
-              description: null,
-              example: null,
-              format: '',
-              indexes: ['auditbeat'],
-              name: 'auditd.data.a0',
-              searchable: true,
-              type: 'string',
-            },
-          },
-        })
-      ).toBe(true);
-    });
-
-    test('it returns true if the category has multiple fields', () => {
-      expect(
-        categoryHasFields({
-          fields: {
-            'agent.ephemeral_id': {
-              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: ['auditbeat', 'filebeat', 'packetbeat'],
-              name: 'agent.ephemeral_id',
-              searchable: true,
-              type: 'string',
-            },
-            'agent.hostname': {
-              aggregatable: true,
-              category: 'agent',
-              description: null,
-              example: null,
-              format: '',
-              indexes: ['auditbeat', 'filebeat', 'packetbeat'],
-              name: 'agent.hostname',
-              searchable: true,
-              type: 'string',
-            },
-          },
-        })
-      ).toBe(true);
-    });
-  });
-
-  describe('getFieldCount', () => {
-    test('it returns 0 if the category fields property is undefined', () => {
-      expect(getFieldCount({})).toEqual(0);
-    });
-
-    test('it returns 0 if the category fields property is empty', () => {
-      expect(getFieldCount({ fields: {} })).toEqual(0);
-    });
-
-    test('it returns 1 if the category has one field', () => {
-      expect(
-        getFieldCount({
-          fields: {
-            'auditd.data.a0': {
-              aggregatable: true,
-              category: 'auditd',
-              description: null,
-              example: null,
-              format: '',
-              indexes: ['auditbeat'],
-              name: 'auditd.data.a0',
-              searchable: true,
-              type: 'string',
-            },
-          },
-        })
-      ).toEqual(1);
-    });
-
-    test('it returns the correct count when category has multiple fields', () => {
-      expect(
-        getFieldCount({
-          fields: {
-            'agent.ephemeral_id': {
-              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: ['auditbeat', 'filebeat', 'packetbeat'],
-              name: 'agent.ephemeral_id',
-              searchable: true,
-              type: 'string',
-            },
-            'agent.hostname': {
-              aggregatable: true,
-              category: 'agent',
-              description: null,
-              example: null,
-              format: '',
-              indexes: ['auditbeat', 'filebeat', 'packetbeat'],
-              name: 'agent.hostname',
-              searchable: true,
-              type: 'string',
-            },
-          },
-        })
-      ).toEqual(2);
-    });
-  });
-
-  describe('filterBrowserFieldsByFieldName', () => {
-    test('it returns an empty collection when browserFields is empty', () => {
-      expect(filterBrowserFieldsByFieldName({ browserFields: {}, substring: '' })).toEqual({});
-    });
-
-    test('it returns an empty collection when browserFields is empty and substring is non empty', () => {
-      expect(
-        filterBrowserFieldsByFieldName({ browserFields: {}, substring: 'nothing to match' })
-      ).toEqual({});
-    });
-
-    test('it returns an empty collection when browserFields is NOT empty and substring does not match any fields', () => {
-      expect(
-        filterBrowserFieldsByFieldName({
-          browserFields: mockBrowserFields,
-          substring: 'nothing to match',
-        })
-      ).toEqual({});
-    });
-
-    test('it returns the original collection when browserFields is NOT empty and substring is empty', () => {
-      expect(
-        filterBrowserFieldsByFieldName({
-          browserFields: mockBrowserFields,
-          substring: '',
-        })
-      ).toEqual(mockBrowserFields);
-    });
-
-    test('it returns (only) non-empty categories, where each category contains only the fields matching the substring', () => {
-      const filtered: BrowserFields = {
-        agent: {
-          fields: {
-            'agent.ephemeral_id': {
-              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: ['auditbeat', 'filebeat', 'packetbeat'],
-              name: 'agent.ephemeral_id',
-              searchable: true,
-              type: 'string',
-            },
-            'agent.id': {
-              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: ['auditbeat', 'filebeat', 'packetbeat'],
-              name: 'agent.id',
-              searchable: true,
-              type: 'string',
-            },
-          },
-        },
-        cloud: {
-          fields: {
-            'cloud.account.id': {
-              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: ['auditbeat', 'filebeat', 'packetbeat'],
-              name: 'cloud.account.id',
-              searchable: true,
-              type: 'string',
-            },
-          },
-        },
-        container: {
-          fields: {
-            'container.id': {
-              aggregatable: true,
-              category: 'container',
-              description: 'Unique container id.',
-              example: null,
-              format: '',
-              indexes: ['auditbeat', 'filebeat', 'packetbeat'],
-              name: 'container.id',
-              searchable: true,
-              type: 'string',
-            },
-          },
-        },
-      };
-
-      expect(
-        filterBrowserFieldsByFieldName({
-          browserFields: mockBrowserFields,
-          substring: 'id',
-        })
-      ).toEqual(filtered);
-    });
-  });
-
-  describe('createVirtualCategory', () => {
-    test('it combines the specified fields into a virtual category when the input ONLY contains field names that contain dots (e.g. agent.hostname)', () => {
-      const expectedMatchingFields = {
-        fields: {
-          'agent.hostname': {
-            aggregatable: true,
-            category: 'agent',
-            description: null,
-            example: null,
-            format: '',
-            indexes: ['auditbeat', 'filebeat', 'packetbeat'],
-            name: 'agent.hostname',
-            searchable: true,
-            type: 'string',
-          },
-          'client.domain': {
-            aggregatable: true,
-            category: 'client',
-            description: 'Client domain.',
-            example: null,
-            format: '',
-            indexes: ['auditbeat', 'filebeat', 'packetbeat'],
-            name: 'client.domain',
-            searchable: true,
-            type: 'string',
-          },
-          'client.geo.country_iso_code': {
-            aggregatable: true,
-            category: 'client',
-            description: 'Country ISO code.',
-            example: 'CA',
-            format: '',
-            indexes: ['auditbeat', 'filebeat', 'packetbeat'],
-            name: 'client.geo.country_iso_code',
-            searchable: true,
-            type: 'string',
-          },
-        },
-      };
-
-      const fieldIds = ['agent.hostname', 'client.domain', 'client.geo.country_iso_code'];
-
-      expect(
-        createVirtualCategory({
-          browserFields: mockBrowserFields,
-          fieldIds,
-        })
-      ).toEqual(expectedMatchingFields);
-    });
-
-    test('it combines the specified fields into a virtual category when the input includes field names from the base category that do NOT contain dots (e.g. @timestamp)', () => {
-      const expectedMatchingFields = {
-        fields: {
-          'agent.hostname': {
-            aggregatable: true,
-            category: 'agent',
-            description: null,
-            example: null,
-            format: '',
-            indexes: ['auditbeat', 'filebeat', 'packetbeat'],
-            name: 'agent.hostname',
-            searchable: true,
-            type: 'string',
-          },
-          '@timestamp': {
-            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: ['auditbeat', 'filebeat', 'packetbeat'],
-            name: '@timestamp',
-            searchable: true,
-            type: 'date',
-          },
-          'client.domain': {
-            aggregatable: true,
-            category: 'client',
-            description: 'Client domain.',
-            example: null,
-            format: '',
-            indexes: ['auditbeat', 'filebeat', 'packetbeat'],
-            name: 'client.domain',
-            searchable: true,
-            type: 'string',
-          },
-        },
-      };
-
-      const fieldIds = ['agent.hostname', '@timestamp', 'client.domain'];
-
-      expect(
-        createVirtualCategory({
-          browserFields: mockBrowserFields,
-          fieldIds,
-        })
-      ).toEqual(expectedMatchingFields);
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/fields_browser/helpers.tsx b/x-pack/plugins/siem/public/components/fields_browser/helpers.tsx
deleted file mode 100644
index e198d802d8a2ef..00000000000000
--- a/x-pack/plugins/siem/public/components/fields_browser/helpers.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-/*
- * 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 { EuiLoadingSpinner } from '@elastic/eui';
-import { filter, get, pickBy } from 'lodash/fp';
-import styled from 'styled-components';
-
-import { BrowserField, BrowserFields } from '../../containers/source';
-import {
-  DEFAULT_CATEGORY_NAME,
-  defaultHeaders,
-} from '../timeline/body/column_headers/default_headers';
-
-export const LoadingSpinner = styled(EuiLoadingSpinner)`
-  cursor: pointer;
-  position: relative;
-  top: 3px;
-`;
-
-LoadingSpinner.displayName = 'LoadingSpinner';
-
-export const CATEGORY_PANE_WIDTH = 200;
-export const DESCRIPTION_COLUMN_WIDTH = 300;
-export const FIELD_COLUMN_WIDTH = 200;
-export const FIELD_BROWSER_WIDTH = 900;
-export const FIELD_BROWSER_HEIGHT = 300;
-export const FIELDS_PANE_WIDTH = 670;
-export const HEADER_HEIGHT = 40;
-export const PANES_FLEX_GROUP_WIDTH = CATEGORY_PANE_WIDTH + FIELDS_PANE_WIDTH + 10;
-export const SEARCH_INPUT_WIDTH = 850;
-export const TABLE_HEIGHT = 260;
-export const TYPE_COLUMN_WIDTH = 50;
-
-/**
- * Returns the CSS class name for the title of a category shown in the left
- * side field browser
- */
-export const getCategoryPaneCategoryClassName = ({
-  categoryId,
-  timelineId,
-}: {
-  categoryId: string;
-  timelineId: string;
-}): string => `field-browser-category-pane-${categoryId}-${timelineId}`;
-
-/**
- * Returns the CSS class name for the title of a category shown in the right
- * side of field browser
- */
-export const getFieldBrowserCategoryTitleClassName = ({
-  categoryId,
-  timelineId,
-}: {
-  categoryId: string;
-  timelineId: string;
-}): string => `field-browser-category-title-${categoryId}-${timelineId}`;
-
-/** Returns the class name for a field browser search input */
-export const getFieldBrowserSearchInputClassName = (timelineId: string): string =>
-  `field-browser-search-input-${timelineId}`;
-
-/** Returns true if the specified category has at least one field */
-export const categoryHasFields = (category: Partial<BrowserField>): boolean =>
-  category.fields != null && Object.keys(category.fields).length > 0;
-
-/** Returns the count of fields in the specified category */
-export const getFieldCount = (category: Partial<BrowserField> | undefined): number =>
-  category != null && category.fields != null ? Object.keys(category.fields).length : 0;
-
-/**
- * Filters the specified `BrowserFields` to return a new collection where every
- * category contains at least one field name that matches the specified substring.
- */
-export const filterBrowserFieldsByFieldName = ({
-  browserFields,
-  substring,
-}: {
-  browserFields: BrowserFields;
-  substring: string;
-}): BrowserFields => {
-  const trimmedSubstring = substring.trim();
-
-  // filter each category such that it only contains fields with field names
-  // that contain the specified substring:
-  const filteredBrowserFields: BrowserFields = Object.keys(browserFields).reduce(
-    (filteredCategories, categoryId) => ({
-      ...filteredCategories,
-      [categoryId]: {
-        ...browserFields[categoryId],
-        fields: filter(
-          f => f.name != null && f.name.includes(trimmedSubstring),
-          browserFields[categoryId].fields
-        ).reduce((filtered, field) => ({ ...filtered, [field.name!]: field }), {}),
-      },
-    }),
-    {}
-  );
-
-  // only pick non-empty categories from the filtered browser fields
-  const nonEmptyCategories: BrowserFields = pickBy(
-    category => categoryHasFields(category),
-    filteredBrowserFields
-  );
-
-  return nonEmptyCategories;
-};
-
-/**
- * Returns a "virtual" category (e.g. default ECS) from the specified fieldIds
- */
-export const createVirtualCategory = ({
-  browserFields,
-  fieldIds,
-}: {
-  browserFields: BrowserFields;
-  fieldIds: string[];
-}): Partial<BrowserField> => ({
-  fields: fieldIds.reduce<Readonly<Record<string, Partial<BrowserField>>>>((fields, fieldId) => {
-    const splitId = fieldId.split('.'); // source.geo.city_name -> [source, geo, city_name]
-
-    return {
-      ...fields,
-      [fieldId]: {
-        ...get([splitId.length > 1 ? splitId[0] : 'base', 'fields', fieldId], browserFields),
-        name: fieldId,
-      },
-    };
-  }, {}),
-});
-
-/** Merges the specified browser fields with the default category (i.e. `default ECS`) */
-export const mergeBrowserFieldsWithDefaultCategory = (
-  browserFields: BrowserFields
-): BrowserFields => ({
-  ...browserFields,
-  [DEFAULT_CATEGORY_NAME]: createVirtualCategory({
-    browserFields,
-    fieldIds: defaultHeaders.map(header => header.id),
-  }),
-});
diff --git a/x-pack/plugins/siem/public/components/fields_browser/index.test.tsx b/x-pack/plugins/siem/public/components/fields_browser/index.test.tsx
deleted file mode 100644
index 9e513b890e722a..00000000000000
--- a/x-pack/plugins/siem/public/components/fields_browser/index.test.tsx
+++ /dev/null
@@ -1,275 +0,0 @@
-/*
- * 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 { mount } from 'enzyme';
-import React from 'react';
-import { ActionCreator } from 'typescript-fsa';
-
-import { mockBrowserFields } from '../../containers/source/mock';
-import { TestProviders } from '../../mock';
-import { ColumnHeaderOptions } from '../../store/timeline/model';
-
-import { FIELD_BROWSER_HEIGHT, FIELD_BROWSER_WIDTH } from './helpers';
-
-import { StatefulFieldsBrowserComponent } from '.';
-
-// Suppress warnings about "react-beautiful-dnd" until we migrate to @testing-library/react
-/* eslint-disable no-console */
-const originalError = console.error;
-const originalWarn = console.warn;
-beforeAll(() => {
-  console.warn = jest.fn();
-  console.error = jest.fn();
-});
-afterAll(() => {
-  console.error = originalError;
-  console.warn = originalWarn;
-});
-
-const removeColumnMock = (jest.fn() as unknown) as ActionCreator<{
-  id: string;
-  columnId: string;
-}>;
-
-const upsertColumnMock = (jest.fn() as unknown) as ActionCreator<{
-  column: ColumnHeaderOptions;
-  id: string;
-  index: number;
-}>;
-
-describe('StatefulFieldsBrowser', () => {
-  const timelineId = 'test';
-
-  test('it renders the Fields button, which displays the fields browser on click', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <StatefulFieldsBrowserComponent
-          browserFields={mockBrowserFields}
-          columnHeaders={[]}
-          height={FIELD_BROWSER_HEIGHT}
-          onUpdateColumns={jest.fn()}
-          timelineId={timelineId}
-          toggleColumn={jest.fn()}
-          width={FIELD_BROWSER_WIDTH}
-          removeColumn={removeColumnMock}
-          upsertColumn={upsertColumnMock}
-        />
-      </TestProviders>
-    );
-
-    expect(
-      wrapper
-        .find('[data-test-subj="show-field-browser"]')
-        .first()
-        .text()
-    ).toEqual('Columns');
-  });
-
-  describe('toggleShow', () => {
-    test('it does NOT render the fields browser until the Fields button is clicked', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <StatefulFieldsBrowserComponent
-            browserFields={mockBrowserFields}
-            columnHeaders={[]}
-            height={FIELD_BROWSER_HEIGHT}
-            onUpdateColumns={jest.fn()}
-            timelineId={timelineId}
-            toggleColumn={jest.fn()}
-            width={FIELD_BROWSER_WIDTH}
-            removeColumn={removeColumnMock}
-            upsertColumn={upsertColumnMock}
-          />
-        </TestProviders>
-      );
-
-      expect(wrapper.find('[data-test-subj="fields-browser-container"]').exists()).toBe(false);
-    });
-
-    test('it renders the fields browser when the Fields button is clicked', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <StatefulFieldsBrowserComponent
-            browserFields={mockBrowserFields}
-            columnHeaders={[]}
-            height={FIELD_BROWSER_HEIGHT}
-            onUpdateColumns={jest.fn()}
-            timelineId={timelineId}
-            toggleColumn={jest.fn()}
-            width={FIELD_BROWSER_WIDTH}
-            removeColumn={removeColumnMock}
-            upsertColumn={upsertColumnMock}
-          />
-        </TestProviders>
-      );
-
-      wrapper
-        .find('[data-test-subj="show-field-browser"]')
-        .first()
-        .simulate('click');
-
-      expect(wrapper.find('[data-test-subj="fields-browser-container"]').exists()).toBe(true);
-    });
-  });
-
-  describe('updateSelectedCategoryId', () => {
-    beforeEach(() => {
-      jest.useFakeTimers();
-    });
-    test('it updates the selectedCategoryId state, which makes the category bold, when the user clicks a category name in the left hand side of the field browser', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <StatefulFieldsBrowserComponent
-            browserFields={mockBrowserFields}
-            columnHeaders={[]}
-            height={FIELD_BROWSER_HEIGHT}
-            onUpdateColumns={jest.fn()}
-            timelineId={timelineId}
-            toggleColumn={jest.fn()}
-            width={FIELD_BROWSER_WIDTH}
-            removeColumn={removeColumnMock}
-            upsertColumn={upsertColumnMock}
-          />
-        </TestProviders>
-      );
-
-      wrapper
-        .find('[data-test-subj="show-field-browser"]')
-        .first()
-        .simulate('click');
-
-      wrapper
-        .find(`.field-browser-category-pane-auditd-${timelineId}`)
-        .first()
-        .simulate('click');
-
-      wrapper.update();
-      expect(
-        wrapper.find(`.field-browser-category-pane-auditd-${timelineId}`).first()
-      ).toHaveStyleRule('font-weight', 'bold', { modifier: '.euiText' });
-    });
-
-    test('it updates the selectedCategoryId state according to most fields returned', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <StatefulFieldsBrowserComponent
-            browserFields={mockBrowserFields}
-            columnHeaders={[]}
-            height={FIELD_BROWSER_HEIGHT}
-            onUpdateColumns={jest.fn()}
-            timelineId={timelineId}
-            toggleColumn={jest.fn()}
-            width={FIELD_BROWSER_WIDTH}
-            removeColumn={removeColumnMock}
-            upsertColumn={upsertColumnMock}
-          />
-        </TestProviders>
-      );
-
-      wrapper
-        .find('[data-test-subj="show-field-browser"]')
-        .first()
-        .simulate('click');
-      expect(
-        wrapper.find(`.field-browser-category-pane-cloud-${timelineId}`).first()
-      ).toHaveStyleRule('font-weight', 'normal', { modifier: '.euiText' });
-      wrapper
-        .find('[data-test-subj="field-search"]')
-        .last()
-        .simulate('change', { target: { value: 'cloud' } });
-
-      jest.runOnlyPendingTimers();
-      wrapper.update();
-      expect(
-        wrapper.find(`.field-browser-category-pane-cloud-${timelineId}`).first()
-      ).toHaveStyleRule('font-weight', 'bold', { modifier: '.euiText' });
-    });
-  });
-
-  test('it renders the Fields Browser button as a settings gear when the isEventViewer prop is true', () => {
-    const isEventViewer = true;
-
-    const wrapper = mount(
-      <TestProviders>
-        <StatefulFieldsBrowserComponent
-          browserFields={mockBrowserFields}
-          columnHeaders={[]}
-          height={FIELD_BROWSER_HEIGHT}
-          isEventViewer={isEventViewer}
-          onUpdateColumns={jest.fn()}
-          timelineId={timelineId}
-          toggleColumn={jest.fn()}
-          width={FIELD_BROWSER_WIDTH}
-          removeColumn={removeColumnMock}
-          upsertColumn={upsertColumnMock}
-        />
-      </TestProviders>
-    );
-
-    expect(
-      wrapper
-        .find('[data-test-subj="show-field-browser-gear"]')
-        .first()
-        .exists()
-    ).toBe(true);
-  });
-
-  test('it does NOT render the Fields Browser button as a settings gear when the isEventViewer prop is false', () => {
-    const isEventViewer = false;
-
-    const wrapper = mount(
-      <TestProviders>
-        <StatefulFieldsBrowserComponent
-          browserFields={mockBrowserFields}
-          columnHeaders={[]}
-          height={FIELD_BROWSER_HEIGHT}
-          isEventViewer={isEventViewer}
-          onUpdateColumns={jest.fn()}
-          timelineId={timelineId}
-          toggleColumn={jest.fn()}
-          width={FIELD_BROWSER_WIDTH}
-          removeColumn={removeColumnMock}
-          upsertColumn={upsertColumnMock}
-        />
-      </TestProviders>
-    );
-
-    expect(
-      wrapper
-        .find('[data-test-subj="show-field-browser-gear"]')
-        .first()
-        .exists()
-    ).toBe(false);
-  });
-
-  test('it does NOT render the default Fields Browser button when the isEventViewer prop is true', () => {
-    const isEventViewer = true;
-
-    const wrapper = mount(
-      <TestProviders>
-        <StatefulFieldsBrowserComponent
-          browserFields={mockBrowserFields}
-          columnHeaders={[]}
-          height={FIELD_BROWSER_HEIGHT}
-          isEventViewer={isEventViewer}
-          onUpdateColumns={jest.fn()}
-          timelineId={timelineId}
-          toggleColumn={jest.fn()}
-          width={FIELD_BROWSER_WIDTH}
-          removeColumn={removeColumnMock}
-          upsertColumn={upsertColumnMock}
-        />
-      </TestProviders>
-    );
-
-    expect(
-      wrapper
-        .find('[data-test-subj="show-field-browser"]')
-        .first()
-        .exists()
-    ).toBe(false);
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/fields_browser/index.tsx b/x-pack/plugins/siem/public/components/fields_browser/index.tsx
deleted file mode 100644
index 3e19ba383b4ecb..00000000000000
--- a/x-pack/plugins/siem/public/components/fields_browser/index.tsx
+++ /dev/null
@@ -1,211 +0,0 @@
-/*
- * 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 { EuiButtonEmpty, EuiButtonIcon, EuiToolTip } from '@elastic/eui';
-import { noop } from 'lodash/fp';
-import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
-import styled from 'styled-components';
-
-import { BrowserFields } from '../../containers/source';
-import { timelineActions } from '../../store/actions';
-import { ColumnHeaderOptions } from '../../store/timeline/model';
-import { DEFAULT_CATEGORY_NAME } from '../timeline/body/column_headers/default_headers';
-import { FieldsBrowser } from './field_browser';
-import { filterBrowserFieldsByFieldName, mergeBrowserFieldsWithDefaultCategory } from './helpers';
-import * as i18n from './translations';
-import { FieldBrowserProps } from './types';
-
-const fieldsButtonClassName = 'fields-button';
-
-/** wait this many ms after the user completes typing before applying the filter input */
-export const INPUT_TIMEOUT = 250;
-
-const FieldsBrowserButtonContainer = styled.div`
-  position: relative;
-`;
-
-FieldsBrowserButtonContainer.displayName = 'FieldsBrowserButtonContainer';
-
-/**
- * Manages the state of the field browser
- */
-export const StatefulFieldsBrowserComponent = React.memo<FieldBrowserProps & PropsFromRedux>(
-  ({
-    columnHeaders,
-    browserFields,
-    height,
-    isEventViewer = false,
-    onFieldSelected,
-    onUpdateColumns,
-    timelineId,
-    toggleColumn,
-    width,
-  }) => {
-    /** tracks the latest timeout id from `setTimeout`*/
-    const inputTimeoutId = useRef(0);
-
-    /** all field names shown in the field browser must contain this string (when specified) */
-    const [filterInput, setFilterInput] = useState('');
-    /** all fields in this collection have field names that match the filterInput */
-    const [filteredBrowserFields, setFilteredBrowserFields] = useState<BrowserFields | null>(null);
-    /** when true, show a spinner in the input to indicate the field browser is searching for matching field names */
-    const [isSearching, setIsSearching] = useState(false);
-    /** this category will be displayed in the right-hand pane of the field browser */
-    const [selectedCategoryId, setSelectedCategoryId] = useState(DEFAULT_CATEGORY_NAME);
-    /** show the field browser */
-    const [show, setShow] = useState(false);
-    useEffect(() => {
-      return () => {
-        if (inputTimeoutId.current !== 0) {
-          // ⚠️ mutation: cancel any remaining timers and zero-out the timer id:
-          clearTimeout(inputTimeoutId.current);
-          inputTimeoutId.current = 0;
-        }
-      };
-    }, []);
-
-    /** Shows / hides the field browser */
-    const toggleShow = useCallback(() => {
-      setShow(!show);
-    }, [show]);
-
-    /** Invoked when the user types in the filter input */
-    const updateFilter = useCallback(
-      (newFilterInput: string) => {
-        setFilterInput(newFilterInput);
-        setIsSearching(true);
-        if (inputTimeoutId.current !== 0) {
-          clearTimeout(inputTimeoutId.current); // ⚠️ mutation: cancel any previous timers
-        }
-        // ⚠️ mutation: schedule a new timer that will apply the filter when it fires:
-        inputTimeoutId.current = window.setTimeout(() => {
-          const newFilteredBrowserFields = filterBrowserFieldsByFieldName({
-            browserFields: mergeBrowserFieldsWithDefaultCategory(browserFields),
-            substring: newFilterInput,
-          });
-          setFilteredBrowserFields(newFilteredBrowserFields);
-          setIsSearching(false);
-
-          const newSelectedCategoryId =
-            newFilterInput === '' || Object.keys(newFilteredBrowserFields).length === 0
-              ? DEFAULT_CATEGORY_NAME
-              : Object.keys(newFilteredBrowserFields)
-                  .sort()
-                  .reduce<string>(
-                    (selected, category) =>
-                      newFilteredBrowserFields[category].fields != null &&
-                      newFilteredBrowserFields[selected].fields != null &&
-                      Object.keys(newFilteredBrowserFields[category].fields!).length >
-                        Object.keys(newFilteredBrowserFields[selected].fields!).length
-                        ? category
-                        : selected,
-                    Object.keys(newFilteredBrowserFields)[0]
-                  );
-          setSelectedCategoryId(newSelectedCategoryId);
-        }, INPUT_TIMEOUT);
-      },
-      [browserFields, filterInput, inputTimeoutId.current]
-    );
-
-    /**
-     * Invoked when the user clicks a category name in the left-hand side of
-     * the field browser
-     */
-    const updateSelectedCategoryId = useCallback((categoryId: string) => {
-      setSelectedCategoryId(categoryId);
-    }, []);
-
-    /**
-     * Invoked when the user clicks on the context menu to view a category's
-     * columns in the timeline, this function dispatches the action that
-     * causes the timeline display those columns.
-     */
-    const updateColumnsAndSelectCategoryId = useCallback((columns: ColumnHeaderOptions[]) => {
-      onUpdateColumns(columns); // show the category columns in the timeline
-    }, []);
-
-    /** Invoked when the field browser should be hidden */
-    const hideFieldBrowser = useCallback(() => {
-      setFilterInput('');
-      setFilterInput('');
-      setFilteredBrowserFields(null);
-      setIsSearching(false);
-      setSelectedCategoryId(DEFAULT_CATEGORY_NAME);
-      setShow(false);
-    }, []);
-    // only merge in the default category if the field browser is visible
-    const browserFieldsWithDefaultCategory = useMemo(
-      () => (show ? mergeBrowserFieldsWithDefaultCategory(browserFields) : {}),
-      [show, browserFields]
-    );
-
-    return (
-      <>
-        <FieldsBrowserButtonContainer data-test-subj="fields-browser-button-container">
-          <EuiToolTip content={i18n.CUSTOMIZE_COLUMNS}>
-            {isEventViewer ? (
-              <EuiButtonIcon
-                aria-label={i18n.CUSTOMIZE_COLUMNS}
-                className={fieldsButtonClassName}
-                data-test-subj="show-field-browser-gear"
-                iconType="list"
-                onClick={toggleShow}
-              />
-            ) : (
-              <EuiButtonEmpty
-                className={fieldsButtonClassName}
-                data-test-subj="show-field-browser"
-                iconType="list"
-                onClick={toggleShow}
-                size="xs"
-              >
-                {i18n.FIELDS}
-              </EuiButtonEmpty>
-            )}
-          </EuiToolTip>
-
-          {show && (
-            <FieldsBrowser
-              browserFields={browserFieldsWithDefaultCategory}
-              columnHeaders={columnHeaders}
-              filteredBrowserFields={
-                filteredBrowserFields != null
-                  ? filteredBrowserFields
-                  : browserFieldsWithDefaultCategory
-              }
-              height={height}
-              isEventViewer={isEventViewer}
-              isSearching={isSearching}
-              onCategorySelected={updateSelectedCategoryId}
-              onFieldSelected={onFieldSelected}
-              onHideFieldBrowser={hideFieldBrowser}
-              onOutsideClick={show ? hideFieldBrowser : noop}
-              onSearchInputChange={updateFilter}
-              onUpdateColumns={updateColumnsAndSelectCategoryId}
-              searchInput={filterInput}
-              selectedCategoryId={selectedCategoryId}
-              timelineId={timelineId}
-              toggleColumn={toggleColumn}
-              width={width}
-            />
-          )}
-        </FieldsBrowserButtonContainer>
-      </>
-    );
-  }
-);
-
-const mapDispatchToProps = {
-  removeColumn: timelineActions.removeColumn,
-  upsertColumn: timelineActions.upsertColumn,
-};
-
-const connector = connect(null, mapDispatchToProps);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-export const StatefulFieldsBrowser = connector(React.memo(StatefulFieldsBrowserComponent));
diff --git a/x-pack/plugins/siem/public/components/fields_browser/types.ts b/x-pack/plugins/siem/public/components/fields_browser/types.ts
deleted file mode 100644
index d6b1936fcc52f8..00000000000000
--- a/x-pack/plugins/siem/public/components/fields_browser/types.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * 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 { BrowserFields } from '../../containers/source';
-import { ColumnHeaderOptions } from '../../store/timeline/model';
-import { OnUpdateColumns } from '../timeline/events';
-
-export type OnFieldSelected = (fieldId: string) => void;
-export type OnHideFieldBrowser = () => void;
-
-export interface FieldBrowserProps {
-  /** The timeline's current column headers */
-  columnHeaders: ColumnHeaderOptions[];
-  /** A map of categoryId -> metadata about the fields in that category */
-  browserFields: BrowserFields;
-  /** The height of the field browser */
-  height: number;
-  /** When true, this Fields Browser is being used as an "events viewer" */
-  isEventViewer?: boolean;
-  /**
-   * Overrides the default behavior of the `FieldBrowser` to enable
-   * "selection" mode, where a field is selected by clicking a button
-   * instead of dragging it to the timeline
-   */
-  onFieldSelected?: OnFieldSelected;
-  /** Invoked when a user chooses to view a new set of columns in the timeline */
-  onUpdateColumns: OnUpdateColumns;
-  /** The timeline associated with this field browser */
-  timelineId: string;
-  /** Adds or removes a column to / from the timeline */
-  toggleColumn: (column: ColumnHeaderOptions) => void;
-  /** The width of the field browser */
-  width: number;
-}
diff --git a/x-pack/plugins/siem/public/components/flyout/button/index.tsx b/x-pack/plugins/siem/public/components/flyout/button/index.tsx
deleted file mode 100644
index d0debbca4dec39..00000000000000
--- a/x-pack/plugins/siem/public/components/flyout/button/index.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-/*
- * 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 { noop } from 'lodash/fp';
-import { EuiButton, EuiNotificationBadge, EuiPanel } from '@elastic/eui';
-import { rgba } from 'polished';
-import React, { useMemo } from 'react';
-import styled from 'styled-components';
-
-import { WithSource } from '../../../containers/source';
-import { IS_DRAGGING_CLASS_NAME } from '../../drag_and_drop/helpers';
-import { DataProviders } from '../../timeline/data_providers';
-import { DataProvider } from '../../timeline/data_providers/data_provider';
-import { flattenIntoAndGroups } from '../../timeline/data_providers/helpers';
-
-import * as i18n from './translations';
-
-export const FLYOUT_BUTTON_CLASS_NAME = 'timeline-flyout-button';
-
-export const getBadgeCount = (dataProviders: DataProvider[]): number =>
-  flattenIntoAndGroups(dataProviders).reduce((total, group) => total + group.length, 0);
-
-const SHOW_HIDE_TRANSLATE_X = 497; // px
-
-const Container = styled.div`
-  padding-top: 8px;
-  position: fixed;
-  right: 0px;
-  top: 40%;
-  transform: translateX(${SHOW_HIDE_TRANSLATE_X}px);
-  user-select: none;
-  width: 500px;
-  z-index: ${({ theme }) => theme.eui.euiZLevel9};
-
-  .${IS_DRAGGING_CLASS_NAME} & {
-    transform: none;
-  }
-
-  .${FLYOUT_BUTTON_CLASS_NAME} {
-    border-radius: 4px 4px 0 0;
-    box-shadow: none;
-    height: 46px;
-  }
-
-  .${IS_DRAGGING_CLASS_NAME} & .${FLYOUT_BUTTON_CLASS_NAME} {
-    color: ${({ theme }) => theme.eui.euiColorSuccess};
-    background: ${({ theme }) => rgba(theme.eui.euiColorSuccess, 0.2)} !important;
-    border: 1px solid ${({ theme }) => theme.eui.euiColorSuccess};
-    border-bottom: none;
-    text-decoration: none;
-  }
-`;
-
-Container.displayName = 'Container';
-
-const BadgeButtonContainer = styled.div`
-  align-items: flex-start;
-  display: flex;
-  flex-direction: row;
-  left: -87px;
-  position: absolute;
-  top: 34px;
-  transform: rotate(-90deg);
-`;
-
-BadgeButtonContainer.displayName = 'BadgeButtonContainer';
-
-const DataProvidersPanel = styled(EuiPanel)`
-  border-radius: 0;
-  padding: 0 4px 0 4px;
-  user-select: none;
-  z-index: ${({ theme }) => theme.eui.euiZLevel9};
-`;
-
-interface FlyoutButtonProps {
-  dataProviders: DataProvider[];
-  onOpen: () => void;
-  show: boolean;
-  timelineId: string;
-}
-
-export const FlyoutButton = React.memo<FlyoutButtonProps>(
-  ({ onOpen, show, dataProviders, timelineId }) => {
-    const badgeCount = useMemo(() => getBadgeCount(dataProviders), [dataProviders]);
-
-    if (!show) {
-      return null;
-    }
-
-    return (
-      <Container>
-        <BadgeButtonContainer
-          className="flyout-overlay"
-          data-test-subj="flyoutOverlay"
-          onClick={onOpen}
-        >
-          <EuiButton
-            className={FLYOUT_BUTTON_CLASS_NAME}
-            data-test-subj="flyout-button-not-ready-to-drop"
-            fill={false}
-            iconSide="right"
-            iconType="arrowUp"
-          >
-            {i18n.FLYOUT_BUTTON}
-          </EuiButton>
-          <EuiNotificationBadge
-            color="accent"
-            data-test-subj="badge"
-            style={{
-              left: '-9px',
-              position: 'relative',
-              top: '-6px',
-              transform: 'rotate(90deg)',
-              visibility: dataProviders.length !== 0 ? 'inherit' : 'hidden',
-              zIndex: 10,
-            }}
-          >
-            {badgeCount}
-          </EuiNotificationBadge>
-        </BadgeButtonContainer>
-        <DataProvidersPanel paddingSize="none">
-          <WithSource sourceId="default">
-            {({ browserFields }) => (
-              <DataProviders
-                browserFields={browserFields}
-                id={timelineId}
-                dataProviders={dataProviders}
-                onDataProviderEdited={noop}
-                onDataProviderRemoved={noop}
-                onToggleDataProviderEnabled={noop}
-                onToggleDataProviderExcluded={noop}
-                show={show}
-              />
-            )}
-          </WithSource>
-        </DataProvidersPanel>
-      </Container>
-    );
-  },
-  (prevProps, nextProps) =>
-    prevProps.show === nextProps.show &&
-    prevProps.dataProviders === nextProps.dataProviders &&
-    prevProps.timelineId === nextProps.timelineId
-);
-
-FlyoutButton.displayName = 'FlyoutButton';
diff --git a/x-pack/plugins/siem/public/components/flyout/header/index.tsx b/x-pack/plugins/siem/public/components/flyout/header/index.tsx
deleted file mode 100644
index 27a8a83a0850af..00000000000000
--- a/x-pack/plugins/siem/public/components/flyout/header/index.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-/*
- * 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, { useCallback } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
-import { Dispatch } from 'redux';
-
-import { isEmpty, get } from 'lodash/fp';
-import { History } from '../../../lib/history';
-import { Note } from '../../../lib/note';
-import {
-  appSelectors,
-  inputsModel,
-  inputsSelectors,
-  State,
-  timelineSelectors,
-} from '../../../store';
-import { defaultHeaders } from '../../timeline/body/column_headers/default_headers';
-import { Properties } from '../../timeline/properties';
-import { appActions } from '../../../store/app';
-import { inputsActions } from '../../../store/inputs';
-import { timelineActions } from '../../../store/actions';
-import { TimelineModel } from '../../../store/timeline/model';
-import { timelineDefaults } from '../../../store/timeline/defaults';
-import { InputsModelId } from '../../../store/inputs/constants';
-
-interface OwnProps {
-  timelineId: string;
-  usersViewing: string[];
-}
-
-type Props = OwnProps & PropsFromRedux;
-
-const StatefulFlyoutHeader = React.memo<Props>(
-  ({
-    associateNote,
-    createTimeline,
-    description,
-    isFavorite,
-    isDataInTimeline,
-    isDatepickerLocked,
-    title,
-    noteIds,
-    notesById,
-    timelineId,
-    toggleLock,
-    updateDescription,
-    updateIsFavorite,
-    updateNote,
-    updateTitle,
-    usersViewing,
-  }) => {
-    const getNotesByIds = useCallback(
-      (noteIdsVar: string[]): Note[] => appSelectors.getNotes(notesById, noteIdsVar),
-      [notesById]
-    );
-    return (
-      <Properties
-        associateNote={associateNote}
-        createTimeline={createTimeline}
-        description={description}
-        getNotesByIds={getNotesByIds}
-        isDataInTimeline={isDataInTimeline}
-        isDatepickerLocked={isDatepickerLocked}
-        isFavorite={isFavorite}
-        title={title}
-        noteIds={noteIds}
-        timelineId={timelineId}
-        toggleLock={toggleLock}
-        updateDescription={updateDescription}
-        updateIsFavorite={updateIsFavorite}
-        updateTitle={updateTitle}
-        updateNote={updateNote}
-        usersViewing={usersViewing}
-      />
-    );
-  }
-);
-
-StatefulFlyoutHeader.displayName = 'StatefulFlyoutHeader';
-
-const emptyHistory: History[] = []; // stable reference
-
-const emptyNotesId: string[] = []; // stable reference
-
-const makeMapStateToProps = () => {
-  const getTimeline = timelineSelectors.getTimelineByIdSelector();
-  const getNotesByIds = appSelectors.notesByIdsSelector();
-  const getGlobalInput = inputsSelectors.globalSelector();
-  const mapStateToProps = (state: State, { timelineId }: OwnProps) => {
-    const timeline: TimelineModel = getTimeline(state, timelineId) ?? timelineDefaults;
-    const globalInput: inputsModel.InputsRange = getGlobalInput(state);
-    const {
-      dataProviders,
-      description = '',
-      isFavorite = false,
-      kqlQuery,
-      title = '',
-      noteIds = emptyNotesId,
-    } = timeline;
-
-    const history = emptyHistory; // TODO: get history from store via selector
-
-    return {
-      description,
-      notesById: getNotesByIds(state),
-      history,
-      isDataInTimeline:
-        !isEmpty(dataProviders) || !isEmpty(get('filterQuery.kuery.expression', kqlQuery)),
-      isFavorite,
-      isDatepickerLocked: globalInput.linkTo.includes('timeline'),
-      noteIds,
-      title,
-    };
-  };
-  return mapStateToProps;
-};
-
-const mapDispatchToProps = (dispatch: Dispatch, { timelineId }: OwnProps) => ({
-  associateNote: (noteId: string) => dispatch(timelineActions.addNote({ id: timelineId, noteId })),
-  createTimeline: ({ id, show }: { id: string; show?: boolean }) =>
-    dispatch(
-      timelineActions.createTimeline({
-        id,
-        columns: defaultHeaders,
-        show,
-      })
-    ),
-  updateDescription: ({ id, description }: { id: string; description: string }) =>
-    dispatch(timelineActions.updateDescription({ id, description })),
-  updateIsFavorite: ({ id, isFavorite }: { id: string; isFavorite: boolean }) =>
-    dispatch(timelineActions.updateIsFavorite({ id, isFavorite })),
-  updateIsLive: ({ id, isLive }: { id: string; isLive: boolean }) =>
-    dispatch(timelineActions.updateIsLive({ id, isLive })),
-  updateNote: (note: Note) => dispatch(appActions.updateNote({ note })),
-  updateTitle: ({ id, title }: { id: string; title: string }) =>
-    dispatch(timelineActions.updateTitle({ id, title })),
-  toggleLock: ({ linkToId }: { linkToId: InputsModelId }) =>
-    dispatch(inputsActions.toggleTimelineLinkTo({ linkToId })),
-});
-
-const connector = connect(makeMapStateToProps, mapDispatchToProps);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-export const FlyoutHeader = connector(StatefulFlyoutHeader);
diff --git a/x-pack/plugins/siem/public/components/flyout/header_with_close_button/index.test.tsx b/x-pack/plugins/siem/public/components/flyout/header_with_close_button/index.test.tsx
deleted file mode 100644
index e0eace2ad5b102..00000000000000
--- a/x-pack/plugins/siem/public/components/flyout/header_with_close_button/index.test.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-/*
- * 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 { mount, shallow } from 'enzyme';
-import React from 'react';
-
-import { TestProviders } from '../../../mock';
-import { FlyoutHeaderWithCloseButton } from '.';
-
-describe('FlyoutHeaderWithCloseButton', () => {
-  test('renders correctly against snapshot', () => {
-    const EmptyComponent = shallow(
-      <TestProviders>
-        <FlyoutHeaderWithCloseButton
-          onClose={jest.fn()}
-          timelineId={'test'}
-          usersViewing={['elastic']}
-        />
-      </TestProviders>
-    );
-    expect(EmptyComponent.find('FlyoutHeaderWithCloseButton')).toMatchSnapshot();
-  });
-
-  test('it should invoke onClose when the close button is clicked', () => {
-    const closeMock = jest.fn();
-    const wrapper = mount(
-      <TestProviders>
-        <FlyoutHeaderWithCloseButton
-          onClose={closeMock}
-          timelineId={'test'}
-          usersViewing={['elastic']}
-        />
-      </TestProviders>
-    );
-    wrapper
-      .find('[data-test-subj="close-timeline"] button')
-      .first()
-      .simulate('click');
-
-    expect(closeMock).toBeCalled();
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/flyout/index.test.tsx b/x-pack/plugins/siem/public/components/flyout/index.test.tsx
deleted file mode 100644
index ab41b4617894e7..00000000000000
--- a/x-pack/plugins/siem/public/components/flyout/index.test.tsx
+++ /dev/null
@@ -1,246 +0,0 @@
-/*
- * 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 { mount, shallow } from 'enzyme';
-import { set } from 'lodash/fp';
-import React from 'react';
-import { ActionCreator } from 'typescript-fsa';
-
-import { apolloClientObservable, mockGlobalState, TestProviders } from '../../mock';
-import { createStore, State } from '../../store';
-import { mockDataProviders } from '../timeline/data_providers/mock/mock_data_providers';
-
-import { Flyout, FlyoutComponent } from '.';
-import { FlyoutButton } from './button';
-
-jest.mock('../timeline', () => ({
-  // eslint-disable-next-line react/display-name
-  StatefulTimeline: () => <div />,
-}));
-
-const testFlyoutHeight = 980;
-const usersViewing = ['elastic'];
-
-describe('Flyout', () => {
-  const state: State = mockGlobalState;
-
-  describe('rendering', () => {
-    test('it renders correctly against snapshot', () => {
-      const wrapper = shallow(
-        <TestProviders>
-          <Flyout flyoutHeight={testFlyoutHeight} timelineId="test" usersViewing={usersViewing} />
-        </TestProviders>
-      );
-      expect(wrapper.find('Flyout')).toMatchSnapshot();
-    });
-
-    test('it renders the default flyout state as a button', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <Flyout flyoutHeight={testFlyoutHeight} timelineId="test" usersViewing={usersViewing} />
-        </TestProviders>
-      );
-
-      expect(
-        wrapper
-          .find('[data-test-subj="flyout-button-not-ready-to-drop"]')
-          .first()
-          .text()
-      ).toContain('Timeline');
-    });
-
-    test('it does NOT render the fly out button when its state is set to flyout is true', () => {
-      const stateShowIsTrue = set('timeline.timelineById.test.show', true, state);
-      const storeShowIsTrue = createStore(stateShowIsTrue, apolloClientObservable);
-
-      const wrapper = mount(
-        <TestProviders store={storeShowIsTrue}>
-          <Flyout flyoutHeight={testFlyoutHeight} timelineId="test" usersViewing={usersViewing} />
-        </TestProviders>
-      );
-
-      expect(wrapper.find('[data-test-subj="flyout-button-not-ready-to-drop"]').exists()).toEqual(
-        false
-      );
-    });
-
-    test('it does render the data providers badge when the number is greater than 0', () => {
-      const stateWithDataProviders = set(
-        'timeline.timelineById.test.dataProviders',
-        mockDataProviders,
-        state
-      );
-      const storeWithDataProviders = createStore(stateWithDataProviders, apolloClientObservable);
-
-      const wrapper = mount(
-        <TestProviders store={storeWithDataProviders}>
-          <Flyout flyoutHeight={testFlyoutHeight} timelineId="test" usersViewing={usersViewing} />
-        </TestProviders>
-      );
-
-      expect(wrapper.find('[data-test-subj="badge"]').exists()).toEqual(true);
-    });
-
-    test('it renders the correct number of data providers badge when the number is greater than 0', () => {
-      const stateWithDataProviders = set(
-        'timeline.timelineById.test.dataProviders',
-        mockDataProviders,
-        state
-      );
-      const storeWithDataProviders = createStore(stateWithDataProviders, apolloClientObservable);
-
-      const wrapper = mount(
-        <TestProviders store={storeWithDataProviders}>
-          <Flyout flyoutHeight={testFlyoutHeight} timelineId="test" usersViewing={usersViewing} />
-        </TestProviders>
-      );
-
-      expect(
-        wrapper
-          .find('[data-test-subj="badge"]')
-          .first()
-          .text()
-      ).toContain('10');
-    });
-
-    test('it hides the data providers badge when the timeline does NOT have data providers', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <Flyout flyoutHeight={testFlyoutHeight} timelineId="test" usersViewing={usersViewing} />
-        </TestProviders>
-      );
-
-      expect(
-        wrapper
-          .find('[data-test-subj="badge"]')
-          .first()
-          .props().style!.visibility
-      ).toEqual('hidden');
-    });
-
-    test('it does NOT hide the data providers badge when the timeline has data providers', () => {
-      const stateWithDataProviders = set(
-        'timeline.timelineById.test.dataProviders',
-        mockDataProviders,
-        state
-      );
-      const storeWithDataProviders = createStore(stateWithDataProviders, apolloClientObservable);
-
-      const wrapper = mount(
-        <TestProviders store={storeWithDataProviders}>
-          <Flyout flyoutHeight={testFlyoutHeight} timelineId="test" usersViewing={usersViewing} />
-        </TestProviders>
-      );
-
-      expect(
-        wrapper
-          .find('[data-test-subj="badge"]')
-          .first()
-          .props().style!.visibility
-      ).toEqual('inherit');
-    });
-
-    test('should call the onOpen when the mouse is clicked for rendering', () => {
-      const showTimeline = (jest.fn() as unknown) as ActionCreator<{ id: string; show: boolean }>;
-      const wrapper = mount(
-        <TestProviders>
-          <FlyoutComponent
-            dataProviders={mockDataProviders}
-            flyoutHeight={testFlyoutHeight}
-            show={false}
-            showTimeline={showTimeline}
-            timelineId="test"
-            width={100}
-            usersViewing={usersViewing}
-          />
-        </TestProviders>
-      );
-
-      wrapper
-        .find('[data-test-subj="flyoutOverlay"]')
-        .first()
-        .simulate('click');
-
-      expect(showTimeline).toBeCalled();
-    });
-  });
-
-  describe('showFlyoutButton', () => {
-    test('should show the flyout button when show is true', () => {
-      const openMock = jest.fn();
-      const wrapper = mount(
-        <TestProviders>
-          <FlyoutButton
-            dataProviders={mockDataProviders}
-            show={true}
-            timelineId="test"
-            onOpen={openMock}
-          />
-        </TestProviders>
-      );
-      expect(wrapper.find('[data-test-subj="flyout-button-not-ready-to-drop"]').exists()).toEqual(
-        true
-      );
-    });
-
-    test('should NOT show the flyout button when show is false', () => {
-      const openMock = jest.fn();
-      const wrapper = mount(
-        <TestProviders>
-          <FlyoutButton
-            dataProviders={mockDataProviders}
-            show={false}
-            timelineId="test"
-            onOpen={openMock}
-          />
-        </TestProviders>
-      );
-      expect(wrapper.find('[data-test-subj="flyout-button-not-ready-to-drop"]').exists()).toEqual(
-        false
-      );
-    });
-
-    test('should return the flyout button with text', () => {
-      const openMock = jest.fn();
-      const wrapper = mount(
-        <TestProviders>
-          <FlyoutButton
-            dataProviders={mockDataProviders}
-            show={true}
-            timelineId="test"
-            onOpen={openMock}
-          />
-        </TestProviders>
-      );
-      expect(
-        wrapper
-          .find('[data-test-subj="flyout-button-not-ready-to-drop"]')
-          .first()
-          .text()
-      ).toContain('Timeline');
-    });
-
-    test('should call the onOpen when it is clicked', () => {
-      const openMock = jest.fn();
-      const wrapper = mount(
-        <TestProviders>
-          <FlyoutButton
-            dataProviders={mockDataProviders}
-            show={true}
-            timelineId="test"
-            onOpen={openMock}
-          />
-        </TestProviders>
-      );
-      wrapper
-        .find('[data-test-subj="flyoutOverlay"]')
-        .first()
-        .simulate('click');
-
-      expect(openMock).toBeCalled();
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/flyout/index.tsx b/x-pack/plugins/siem/public/components/flyout/index.tsx
deleted file mode 100644
index 404ca4a16e0f1c..00000000000000
--- a/x-pack/plugins/siem/public/components/flyout/index.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-/*
- * 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 { EuiBadge } from '@elastic/eui';
-import React, { useCallback } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
-import styled from 'styled-components';
-
-import { State, timelineSelectors } from '../../store';
-import { DataProvider } from '../timeline/data_providers/data_provider';
-import { FlyoutButton } from './button';
-import { Pane } from './pane';
-import { timelineActions } from '../../store/actions';
-import { DEFAULT_TIMELINE_WIDTH } from '../timeline/body/constants';
-import { StatefulTimeline } from '../timeline';
-import { TimelineById } from '../../store/timeline/types';
-
-export const Badge = (styled(EuiBadge)`
-  position: absolute;
-  padding-left: 4px;
-  padding-right: 4px;
-  right: 0%;
-  top: 0%;
-  border-bottom-left-radius: 5px;
-` as unknown) as typeof EuiBadge;
-
-Badge.displayName = 'Badge';
-
-const Visible = styled.div<{ show?: boolean }>`
-  visibility: ${({ show }) => (show ? 'visible' : 'hidden')};
-`;
-
-Visible.displayName = 'Visible';
-
-interface OwnProps {
-  flyoutHeight: number;
-  timelineId: string;
-  usersViewing: string[];
-}
-
-type Props = OwnProps & ProsFromRedux;
-
-export const FlyoutComponent = React.memo<Props>(
-  ({ dataProviders, flyoutHeight, show, showTimeline, timelineId, usersViewing, width }) => {
-    const handleClose = useCallback(() => showTimeline({ id: timelineId, show: false }), [
-      showTimeline,
-      timelineId,
-    ]);
-    const handleOpen = useCallback(() => showTimeline({ id: timelineId, show: true }), [
-      showTimeline,
-      timelineId,
-    ]);
-
-    return (
-      <>
-        <Visible show={show}>
-          <Pane
-            flyoutHeight={flyoutHeight}
-            onClose={handleClose}
-            timelineId={timelineId}
-            width={width}
-          >
-            <StatefulTimeline onClose={handleClose} usersViewing={usersViewing} id={timelineId} />
-          </Pane>
-        </Visible>
-        <FlyoutButton
-          dataProviders={dataProviders}
-          show={!show}
-          timelineId={timelineId}
-          onOpen={handleOpen}
-        />
-      </>
-    );
-  }
-);
-
-FlyoutComponent.displayName = 'FlyoutComponent';
-
-const DEFAULT_DATA_PROVIDERS: DataProvider[] = [];
-const DEFAULT_TIMELINE_BY_ID = {};
-
-const mapStateToProps = (state: State, { timelineId }: OwnProps) => {
-  const timelineById: TimelineById =
-    timelineSelectors.timelineByIdSelector(state) ?? DEFAULT_TIMELINE_BY_ID;
-  /*
-    In case timelineById[timelineId]?.dataProviders is an empty array it will cause unnecessary rerender
-    of StatefulTimeline which can be expensive, so to avoid that return DEFAULT_DATA_PROVIDERS
-  */
-  const dataProviders = timelineById[timelineId]?.dataProviders.length
-    ? timelineById[timelineId]?.dataProviders
-    : DEFAULT_DATA_PROVIDERS;
-  const show = timelineById[timelineId]?.show ?? false;
-  const width = timelineById[timelineId]?.width ?? DEFAULT_TIMELINE_WIDTH;
-
-  return { dataProviders, show, width };
-};
-
-const mapDispatchToProps = {
-  showTimeline: timelineActions.showTimeline,
-};
-
-const connector = connect(mapStateToProps, mapDispatchToProps);
-
-type ProsFromRedux = ConnectedProps<typeof connector>;
-
-export const Flyout = connector(FlyoutComponent);
-
-Flyout.displayName = 'Flyout';
diff --git a/x-pack/plugins/siem/public/components/flyout/pane/index.test.tsx b/x-pack/plugins/siem/public/components/flyout/pane/index.test.tsx
deleted file mode 100644
index 53cf8f95de0ce7..00000000000000
--- a/x-pack/plugins/siem/public/components/flyout/pane/index.test.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-/*
- * 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 { mount, shallow } from 'enzyme';
-import React from 'react';
-
-import { TestProviders } from '../../../mock';
-import { Pane } from '.';
-
-const testFlyoutHeight = 980;
-const testWidth = 640;
-
-describe('Pane', () => {
-  test('renders correctly against snapshot', () => {
-    const EmptyComponent = shallow(
-      <TestProviders>
-        <Pane
-          flyoutHeight={testFlyoutHeight}
-          onClose={jest.fn()}
-          timelineId={'test'}
-          width={testWidth}
-        >
-          <span>{'I am a child of flyout'}</span>
-        </Pane>
-      </TestProviders>
-    );
-    expect(EmptyComponent.find('Pane')).toMatchSnapshot();
-  });
-
-  test('it should NOT let the flyout expand to take up the full width of the element that contains it', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <Pane
-          flyoutHeight={testFlyoutHeight}
-          onClose={jest.fn()}
-          timelineId={'test'}
-          width={testWidth}
-        >
-          <span>{'I am a child of flyout'}</span>
-        </Pane>
-      </TestProviders>
-    );
-
-    expect(wrapper.find('Resizable').get(0).props.maxWidth).toEqual('95vw');
-  });
-
-  test('it should render a resize handle', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <Pane
-          flyoutHeight={testFlyoutHeight}
-          onClose={jest.fn()}
-          timelineId={'test'}
-          width={testWidth}
-        >
-          <span>{'I am a child of flyout'}</span>
-        </Pane>
-      </TestProviders>
-    );
-
-    expect(
-      wrapper
-        .find('[data-test-subj="flyout-resize-handle"]')
-        .first()
-        .exists()
-    ).toEqual(true);
-  });
-
-  test('it should render children', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <Pane
-          flyoutHeight={testFlyoutHeight}
-          onClose={jest.fn()}
-          timelineId={'test'}
-          width={testWidth}
-        >
-          <span>{'I am a mock body'}</span>
-        </Pane>
-      </TestProviders>
-    );
-    expect(wrapper.first().text()).toContain('I am a mock body');
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/flyout/pane/index.tsx b/x-pack/plugins/siem/public/components/flyout/pane/index.tsx
deleted file mode 100644
index 3b5041c1ee3468..00000000000000
--- a/x-pack/plugins/siem/public/components/flyout/pane/index.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-/*
- * 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 { EuiFlyout } from '@elastic/eui';
-import React, { useCallback, useMemo } from 'react';
-import { useDispatch } from 'react-redux';
-import styled from 'styled-components';
-import { Resizable, ResizeCallback } from 're-resizable';
-
-import { TimelineResizeHandle } from './timeline_resize_handle';
-import { EventDetailsWidthProvider } from '../../events_viewer/event_details_width_context';
-
-import * as i18n from './translations';
-import { timelineActions } from '../../../store/actions';
-
-const minWidthPixels = 550; // do not allow the flyout to shrink below this width (pixels)
-const maxWidthPercent = 95; // do not allow the flyout to grow past this percentage of the view
-interface FlyoutPaneComponentProps {
-  children: React.ReactNode;
-  flyoutHeight: number;
-  onClose: () => void;
-  timelineId: string;
-  width: number;
-}
-
-const EuiFlyoutContainer = styled.div`
-  .timeline-flyout {
-    min-width: 150px;
-    width: auto;
-  }
-`;
-
-const StyledResizable = styled(Resizable)`
-  display: flex;
-  flex-direction: column;
-`;
-
-const RESIZABLE_ENABLE = { left: true };
-
-const FlyoutPaneComponent: React.FC<FlyoutPaneComponentProps> = ({
-  children,
-  flyoutHeight,
-  onClose,
-  timelineId,
-  width,
-}) => {
-  const dispatch = useDispatch();
-
-  const onResizeStop: ResizeCallback = useCallback(
-    (e, direction, ref, delta) => {
-      const bodyClientWidthPixels = document.body.clientWidth;
-
-      if (delta.width) {
-        dispatch(
-          timelineActions.applyDeltaToWidth({
-            bodyClientWidthPixels,
-            delta: -delta.width,
-            id: timelineId,
-            maxWidthPercent,
-            minWidthPixels,
-          })
-        );
-      }
-    },
-    [dispatch]
-  );
-  const resizableDefaultSize = useMemo(
-    () => ({
-      width,
-      height: '100%',
-    }),
-    []
-  );
-  const resizableHandleComponent = useMemo(
-    () => ({
-      left: <TimelineResizeHandle data-test-subj="flyout-resize-handle" height={flyoutHeight} />,
-    }),
-    [flyoutHeight]
-  );
-
-  return (
-    <EuiFlyoutContainer data-test-subj="flyout-pane">
-      <EuiFlyout
-        aria-label={i18n.TIMELINE_DESCRIPTION}
-        className="timeline-flyout"
-        data-test-subj="eui-flyout"
-        hideCloseButton={true}
-        onClose={onClose}
-        size="l"
-      >
-        <StyledResizable
-          enable={RESIZABLE_ENABLE}
-          defaultSize={resizableDefaultSize}
-          minWidth={minWidthPixels}
-          maxWidth={`${maxWidthPercent}vw`}
-          handleComponent={resizableHandleComponent}
-          onResizeStop={onResizeStop}
-        >
-          <EventDetailsWidthProvider>{children}</EventDetailsWidthProvider>
-        </StyledResizable>
-      </EuiFlyout>
-    </EuiFlyoutContainer>
-  );
-};
-
-export const Pane = React.memo(FlyoutPaneComponent);
-
-Pane.displayName = 'Pane';
diff --git a/x-pack/plugins/siem/public/components/formatted_bytes/index.tsx b/x-pack/plugins/siem/public/components/formatted_bytes/index.tsx
deleted file mode 100644
index 98a1acf471629e..00000000000000
--- a/x-pack/plugins/siem/public/components/formatted_bytes/index.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * 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 numeral from '@elastic/numeral';
-
-import { DEFAULT_BYTES_FORMAT } from '../../../common/constants';
-import { useUiSetting$ } from '../../lib/kibana';
-
-type Bytes = string | number;
-
-export const formatBytes = (value: Bytes, format: string) => {
-  return numeral(value).format(format);
-};
-
-export const useFormatBytes = () => {
-  const [bytesFormat] = useUiSetting$<string>(DEFAULT_BYTES_FORMAT);
-
-  return (value: Bytes) => formatBytes(value, bytesFormat);
-};
-
-export const PreferenceFormattedBytesComponent = ({ value }: { value: Bytes }) => (
-  <>{useFormatBytes()(value)}</>
-);
-
-PreferenceFormattedBytesComponent.displayName = 'PreferenceFormattedBytesComponent';
-
-export const PreferenceFormattedBytes = React.memo(PreferenceFormattedBytesComponent);
-
-PreferenceFormattedBytes.displayName = 'PreferenceFormattedBytes';
diff --git a/x-pack/plugins/siem/public/components/formatted_duration/helpers.test.ts b/x-pack/plugins/siem/public/components/formatted_duration/helpers.test.ts
deleted file mode 100644
index 30254c49c9f3bf..00000000000000
--- a/x-pack/plugins/siem/public/components/formatted_duration/helpers.test.ts
+++ /dev/null
@@ -1,401 +0,0 @@
-/*
- * 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 { getEmptyValue } from '../empty_value';
-import {
-  getFormattedDurationString,
-  getHumanizedDuration,
-  ONE_DAY,
-  ONE_HOUR,
-  ONE_MILLISECOND_AS_NANOSECONDS,
-  ONE_MINUTE,
-  ONE_MONTH,
-  ONE_SECOND,
-  ONE_YEAR,
-} from './helpers';
-import * as i18n from './translations';
-
-describe('FormattedDurationHelpers', () => {
-  describe('#getFormattedDurationString', () => {
-    test('it returns a placeholder when the input is undefined', () => {
-      expect(getFormattedDurationString(undefined)).toEqual(getEmptyValue());
-    });
-
-    test('it returns a placeholder when the input is null', () => {
-      expect(getFormattedDurationString(null)).toEqual(getEmptyValue());
-    });
-
-    test('it echos back the input as a string when the input is not a number', () => {
-      expect(getFormattedDurationString('invalid duration')).toEqual('invalid duration');
-    });
-
-    test('it returns the original input (with no formatting) when the input is negative', () => {
-      expect(getFormattedDurationString(-1)).toEqual('-1');
-    });
-
-    test('it returns the duration formatted as 0 nanoseconds when the input is 0 nanoseconds', () => {
-      expect(getFormattedDurationString(0)).toEqual('0ns');
-    });
-
-    test('it returns 1 nanosecond when the input is 1 nanosecond', () => {
-      expect(getFormattedDurationString(1)).toEqual('1ns');
-    });
-
-    test('it returns 1000 nanoseconds when the input is 1000 nanoseconds', () => {
-      expect(getFormattedDurationString(1000)).toEqual('1000ns');
-    });
-
-    test('it returns 1000 nanoseconds when the input is a string ("1000") instead of a number', () => {
-      expect(getFormattedDurationString('1000')).toEqual('1000ns');
-    });
-
-    test('it returns the largest value that would be represented as nanoseconds when the input is 1 millisecond - 1 nanosecond', () => {
-      expect(getFormattedDurationString(ONE_MILLISECOND_AS_NANOSECONDS - 1)).toEqual('999999ns');
-    });
-
-    test('it returns exactly 1 millisecond (with no fractional component) when the input is exactly one millisecond', () => {
-      expect(getFormattedDurationString(ONE_MILLISECOND_AS_NANOSECONDS)).toEqual('1ms');
-    });
-
-    test('it returns 1 millisecond with a fractional component when the input is 1 millisecond + 1 nanosecond', () => {
-      expect(getFormattedDurationString(ONE_MILLISECOND_AS_NANOSECONDS + 1)).toEqual('1.000001ms');
-    });
-
-    test('it returns the largest value (in milliseconds) that would be represented as milliseconds with a fractional component when the input is 1 second - 1 nanosecond', () => {
-      expect(getFormattedDurationString(ONE_SECOND * ONE_MILLISECOND_AS_NANOSECONDS - 1)).toEqual(
-        '999.999999ms'
-      );
-    });
-
-    test('it returns exactly one second (with no millisecond component) when the input is exactly one second', () => {
-      expect(getFormattedDurationString(ONE_SECOND * ONE_MILLISECOND_AS_NANOSECONDS)).toEqual('1s');
-    });
-
-    test('it returns one second with fractional milliseconds when the input is one second + 1 nanosecond', () => {
-      expect(getFormattedDurationString(ONE_SECOND * ONE_MILLISECOND_AS_NANOSECONDS + 1)).toEqual(
-        '1s 0.000001ms'
-      );
-    });
-
-    test('it returns one second with fractional milliseconds when the input is 1 second + 1 millisecond - 1 nanosecond', () => {
-      expect(
-        getFormattedDurationString(
-          ONE_SECOND * ONE_MILLISECOND_AS_NANOSECONDS + ONE_MILLISECOND_AS_NANOSECONDS - 1
-        )
-      ).toEqual('1s 0.999999ms');
-    });
-
-    test('it returns 1 second, 1 non-fractional millisecond when the input is 1 second + 1 millisecond', () => {
-      expect(
-        getFormattedDurationString(
-          ONE_SECOND * ONE_MILLISECOND_AS_NANOSECONDS + ONE_MILLISECOND_AS_NANOSECONDS
-        )
-      ).toEqual('1s 1ms');
-    });
-
-    test('it returns 1 seconds with fractional milliseconds when the input is 1 second + 1 millisecond + 1 nanosecond', () => {
-      expect(
-        getFormattedDurationString(
-          ONE_SECOND * ONE_MILLISECOND_AS_NANOSECONDS + ONE_MILLISECOND_AS_NANOSECONDS + 1
-        )
-      ).toEqual('1s 1.000001ms');
-    });
-
-    test('it returns 1 seconds with fractional milliseconds when the input is 1 second + 2 milliseconds - 1 nanosecond', () => {
-      expect(
-        getFormattedDurationString(
-          ONE_SECOND * ONE_MILLISECOND_AS_NANOSECONDS + 2 * ONE_MILLISECOND_AS_NANOSECONDS - 1
-        )
-      ).toEqual('1s 1.999999ms');
-    });
-
-    test('it returns 59 seconds with fractional milliseconds when the input is 1 minute - 1 nanosecond', () => {
-      expect(getFormattedDurationString(ONE_MINUTE * ONE_MILLISECOND_AS_NANOSECONDS - 1)).toEqual(
-        '59s 999.999999ms'
-      );
-    });
-
-    test('it returns 1 minute with 0 non-fractional seconds (and no milliseconds) when the input is exactly 1 minute', () => {
-      expect(getFormattedDurationString(ONE_MINUTE * ONE_MILLISECOND_AS_NANOSECONDS)).toEqual(
-        '1m 0s'
-      );
-    });
-
-    test('it returns 1 minute, 0 seconds, and fractional milliseconds when the input is 1 minute + 1 nanosecond', () => {
-      expect(getFormattedDurationString(ONE_MINUTE * ONE_MILLISECOND_AS_NANOSECONDS + 1)).toEqual(
-        '1m 0s 0.000001ms'
-      );
-    });
-
-    test('it returns the duration formatted as 1 minute, 59 seconds and fractional milliseconds when the input is 2 minutes - 1 nanosecond', () => {
-      expect(
-        getFormattedDurationString(2 * ONE_MINUTE * ONE_MILLISECOND_AS_NANOSECONDS - 1)
-      ).toEqual('1m 59s 999.999999ms');
-    });
-
-    test('it returns the duration formatted as 59 minutes, 59 seconds and fractional milliseconds when the input is one hour - 1 nanosecond', () => {
-      expect(getFormattedDurationString(ONE_HOUR * ONE_MILLISECOND_AS_NANOSECONDS - 1)).toEqual(
-        '59m 59s 999.999999ms'
-      );
-    });
-
-    test('it returns the duration formatted as 1 hour, 0 minutes, 0 seconds, (and no milliseconds) when the duration is exactly one hour', () => {
-      expect(getFormattedDurationString(ONE_HOUR * ONE_MILLISECOND_AS_NANOSECONDS)).toEqual(
-        '1h 0m 0s'
-      );
-    });
-
-    test('it returns the duration formatted as 1 hour, 0 minutes and seconds, and fractional milliseconds when the duration is exactly 1 hour + 1 nanosecond', () => {
-      expect(getFormattedDurationString(ONE_HOUR * ONE_MILLISECOND_AS_NANOSECONDS + 1)).toEqual(
-        '1h 0m 0s 0.000001ms'
-      );
-    });
-
-    test('it returns the duration formatted as 23 hours, 59 minutes, 59 seconds, and fractional milliseconds when the duration is one day - 1 nanosecond', () => {
-      expect(getFormattedDurationString(ONE_DAY * ONE_MILLISECOND_AS_NANOSECONDS - 1)).toEqual(
-        '23h 59m 59s 999.999999ms'
-      );
-    });
-
-    test('it returns the duration formatted as 1 day, 0 hours, 0 minutes, and 0 seconds, (and no milliseconds) when the duration is exactly one day', () => {
-      expect(getFormattedDurationString(ONE_DAY * ONE_MILLISECOND_AS_NANOSECONDS)).toEqual(
-        '1d 0h 0m 0s'
-      );
-    });
-
-    test('it returns the duration formatted as one day, with zero hours, minutes, seconds, and fractional milliseconds when the duration is one day + 1 nanosecond', () => {
-      expect(getFormattedDurationString(ONE_DAY * ONE_MILLISECOND_AS_NANOSECONDS + 1)).toEqual(
-        '1d 0h 0m 0s 0.000001ms'
-      );
-    });
-
-    test('it returns the duration formatted as 29 days, 23 hours, 59 minutes, 59 seconds, and with fractional milliseconds when the duration is one month - 1 nanosecond', () => {
-      expect(getFormattedDurationString(ONE_MONTH * ONE_MILLISECOND_AS_NANOSECONDS - 1)).toEqual(
-        '29d 23h 59m 59s 999.999999ms'
-      );
-    });
-
-    test('it returns 30 days, zero hours, minutes, seconds, (and no millieconds) when the duration is exactly one month, as is the current behavior of moment', () => {
-      expect(getFormattedDurationString(ONE_MONTH * ONE_MILLISECOND_AS_NANOSECONDS)).toEqual(
-        '30d 0h 0m 0s' // see https://github.com/moment/moment/issues/3653
-      );
-    });
-
-    test('it returns the duration as 29 days, 23 hours, 59 minutes, 59 seconds, and fractional milliseconds when the duration is 1 month - 1 nanosecond', () => {
-      expect(getFormattedDurationString(ONE_MONTH * ONE_MILLISECOND_AS_NANOSECONDS - 1)).toEqual(
-        '29d 23h 59m 59s 999.999999ms' // see https://github.com/moment/moment/issues/3653
-      );
-    });
-
-    test('it returns 1 month, zero days, hours, minutes, seconds (and no milliseconds) month when the duration is exactly 1 month + 1 day, as is the current behavior of moment', () => {
-      expect(
-        getFormattedDurationString((ONE_MONTH + ONE_DAY) * ONE_MILLISECOND_AS_NANOSECONDS)
-      ).toEqual(
-        '1m 0d 0h 0m 0s' // see https://github.com/moment/moment/issues/3653
-      );
-    });
-
-    test('it returns the 1 month with 0 days, hours, minutes, seconds, and fractional milliseconds when the duration is exactly 1 month + 1 day + 1 nanosecond, ', () => {
-      expect(
-        getFormattedDurationString((ONE_MONTH + ONE_DAY) * ONE_MILLISECOND_AS_NANOSECONDS + 1)
-      ).toEqual(
-        '1m 0d 0h 0m 0s 0.000001ms' // see https://github.com/moment/moment/issues/3653
-      );
-    });
-
-    test('it returns 11 months, 30 days (with 0 hours, minutes, and non-fractional seconds) when the duration is exactly one year, as is the current behavior of moment', () => {
-      expect(getFormattedDurationString(ONE_YEAR * ONE_MILLISECOND_AS_NANOSECONDS)).toEqual(
-        '11m 30d 0h 0m 0s' // see https://github.com/moment/moment/issues/3209
-      );
-    });
-
-    test('it returns one year when the duration is exactly 1 year + 1 day, as is the current behavior of moment', () => {
-      expect(
-        getFormattedDurationString((ONE_YEAR + ONE_DAY) * ONE_MILLISECOND_AS_NANOSECONDS)
-      ).toEqual(
-        '1y 0m 0d 0h 0m 0s' // see https://github.com/moment/moment/issues/3209
-      );
-    });
-
-    test('it returns less than 6 months when input is 1 year + 6 months, as is the current behavior of moment', () => {
-      expect(
-        getFormattedDurationString((ONE_YEAR + 6 * ONE_MONTH) * ONE_MILLISECOND_AS_NANOSECONDS)
-      ).toEqual('1y 5m 27d 0h 0m 0s'); // see https://github.com/moment/moment/issues/3209
-    });
-  });
-
-  describe('#getHumanizedDuration', () => {
-    test('it returns "no duration" when the input is undefined', () => {
-      expect(getHumanizedDuration(undefined)).toEqual(i18n.NO_DURATION);
-    });
-
-    test('it returns "no duration" when the input is null', () => {
-      expect(getHumanizedDuration(null)).toEqual(i18n.NO_DURATION);
-    });
-
-    test('it returns "invalid duration" when the input is not a number', () => {
-      expect(getHumanizedDuration('an invalid duration')).toEqual(i18n.INVALID_DURATION);
-    });
-
-    test('it returns the original "invalid duration" when the input is negative', () => {
-      expect(getHumanizedDuration(-1)).toEqual(i18n.INVALID_DURATION);
-    });
-
-    test('it returns "zero nanoseconds" when the input is 0 nanoseconds', () => {
-      expect(getHumanizedDuration(0)).toEqual(i18n.ZERO_NANOSECONDS);
-    });
-
-    test('it returns "a nanosecond" nanosecond when the input is 1 nanosecond', () => {
-      expect(getHumanizedDuration(1)).toEqual(i18n.A_NANOSECOND);
-    });
-
-    test('it returns "a few nanoseconds" when the input is 1000 nanoseconds', () => {
-      expect(getHumanizedDuration(1000)).toEqual(i18n.A_FEW_NANOSECONDS);
-    });
-
-    test('it returns 1000 nanoseconds when the input is a string ("1000") instead of a number', () => {
-      expect(getHumanizedDuration('1000')).toEqual(i18n.A_FEW_NANOSECONDS);
-    });
-
-    test('it returns "a few nanoseconds" given the largest value that would be represented as nanoseconds', () => {
-      expect(getHumanizedDuration(ONE_MILLISECOND_AS_NANOSECONDS - 1)).toEqual(
-        i18n.A_FEW_NANOSECONDS
-      );
-    });
-
-    test('it returns "a millisecond" when the input is exactly one millisecond', () => {
-      expect(getHumanizedDuration(ONE_MILLISECOND_AS_NANOSECONDS)).toEqual(i18n.A_MILLISECOND);
-    });
-
-    test('it returns "a few milliseconds" when the input is 1 millisecond + 1 nanosecond', () => {
-      expect(getHumanizedDuration(ONE_MILLISECOND_AS_NANOSECONDS + 1)).toEqual(
-        i18n.A_FEW_MILLISECONDS
-      );
-    });
-
-    test('it returns "a few milliseconds" when the input is the maximum value for milliseconds', () => {
-      expect(getHumanizedDuration(ONE_SECOND * ONE_MILLISECOND_AS_NANOSECONDS - 1)).toEqual(
-        i18n.A_FEW_MILLISECONDS
-      );
-    });
-
-    test('it returns "a second" when the input is exactly one second', () => {
-      expect(getHumanizedDuration(ONE_SECOND * ONE_MILLISECOND_AS_NANOSECONDS)).toEqual(
-        i18n.A_SECOND
-      );
-    });
-
-    test('it returns "a few seconds" when the input is one second + 1 nanosecond', () => {
-      expect(getHumanizedDuration(ONE_SECOND * ONE_MILLISECOND_AS_NANOSECONDS + 1)).toEqual(
-        'a few seconds' // <-- note for this and the rest of the tests in this 'describe', this value is coming from moment, which has it's own i18n
-      );
-    });
-
-    test('it rounds to "a minute" when the input is 45 seconds', () => {
-      expect(getHumanizedDuration(45 * ONE_SECOND * ONE_MILLISECOND_AS_NANOSECONDS)).toEqual(
-        'a minute' // <-- debatable, but thats' how moment describes this
-      );
-    });
-
-    test('it rounds to "a minute" when the input is 1 minute - 1 nanosecond', () => {
-      expect(getHumanizedDuration(ONE_MINUTE * ONE_MILLISECOND_AS_NANOSECONDS - 1)).toEqual(
-        'a minute'
-      );
-    });
-
-    test('it returns "a minute" when the input is exactly 1 minute', () => {
-      expect(getHumanizedDuration(ONE_MINUTE * ONE_MILLISECOND_AS_NANOSECONDS)).toEqual('a minute');
-    });
-
-    test('it rounds to "a minute" when the input is 1 minute + 1 nanosecond', () => {
-      expect(getHumanizedDuration(ONE_MINUTE * ONE_MILLISECOND_AS_NANOSECONDS + 1)).toEqual(
-        'a minute'
-      );
-    });
-
-    test('it rounds to "two minutes" when the input is 2 minutes - 1 nanosecond', () => {
-      expect(getHumanizedDuration(2 * ONE_MINUTE * ONE_MILLISECOND_AS_NANOSECONDS - 1)).toEqual(
-        '2 minutes'
-      );
-    });
-
-    test('it rounds to "an hour" when the input is one hour - 1 nanosecond', () => {
-      expect(getHumanizedDuration(ONE_HOUR * ONE_MILLISECOND_AS_NANOSECONDS - 1)).toEqual(
-        'an hour'
-      );
-    });
-
-    test('it returns "an hour" when the input is exactly one hour', () => {
-      expect(getHumanizedDuration(ONE_HOUR * ONE_MILLISECOND_AS_NANOSECONDS)).toEqual('an hour');
-    });
-
-    test('it rounds to "an hour" when the input 1 hour + 1 nanosecond', () => {
-      expect(getHumanizedDuration(ONE_HOUR * ONE_MILLISECOND_AS_NANOSECONDS + 1)).toEqual(
-        'an hour'
-      );
-    });
-
-    test('it returns "2 hours" when the input is exactly 2 hours', () => {
-      expect(getHumanizedDuration(2 * ONE_HOUR * ONE_MILLISECOND_AS_NANOSECONDS)).toEqual(
-        '2 hours'
-      );
-    });
-
-    test('it rounds to "a day" when the input is one day - 1 nanosecond', () => {
-      expect(getHumanizedDuration(ONE_DAY * ONE_MILLISECOND_AS_NANOSECONDS - 1)).toEqual('a day');
-    });
-
-    test('it returns "a day" when the input is exactly one day', () => {
-      expect(getHumanizedDuration(ONE_DAY * ONE_MILLISECOND_AS_NANOSECONDS)).toEqual('a day');
-    });
-
-    test('it rounds to "a day" when the input is one day + 1 nanosecond', () => {
-      expect(getHumanizedDuration(ONE_DAY * ONE_MILLISECOND_AS_NANOSECONDS + 1)).toEqual('a day');
-    });
-
-    test('it returns "2 days" when the input is exactly two days', () => {
-      expect(getHumanizedDuration(2 * ONE_DAY * ONE_MILLISECOND_AS_NANOSECONDS)).toEqual('2 days');
-    });
-
-    test('it rounds to "a month" when the input is one month - 1 nanosecond', () => {
-      expect(getHumanizedDuration(ONE_MONTH * ONE_MILLISECOND_AS_NANOSECONDS - 1)).toEqual(
-        'a month'
-      );
-    });
-
-    test('it returns "a month" when the input is exactly one month', () => {
-      expect(getHumanizedDuration(ONE_MONTH * ONE_MILLISECOND_AS_NANOSECONDS)).toEqual('a month');
-    });
-
-    test('it rounds to "a month" when the input is 1 month + 1 day', () => {
-      expect(getHumanizedDuration((ONE_MONTH + ONE_DAY) * ONE_MILLISECOND_AS_NANOSECONDS)).toEqual(
-        'a month'
-      );
-    });
-
-    test('it returns "2 months" when the input is 2 months', () => {
-      expect(getHumanizedDuration(2 * ONE_MONTH * ONE_MILLISECOND_AS_NANOSECONDS)).toEqual(
-        '2 months'
-      );
-    });
-
-    test('it returns "a year" when the input is exactly one year', () => {
-      expect(getHumanizedDuration(ONE_YEAR * ONE_MILLISECOND_AS_NANOSECONDS)).toEqual('a year');
-    });
-
-    test('it rounds down to "a year" when the input is 1 year + 6 months, as is the current behavior of moment', () => {
-      expect(
-        getHumanizedDuration((ONE_YEAR + 6 * ONE_MONTH) * ONE_MILLISECOND_AS_NANOSECONDS)
-      ).toEqual('a year'); // <-- as a user, you may not expect this
-    });
-
-    test('it returns "2 years" when the duration is exactly 2 years', () => {
-      expect(getHumanizedDuration(2 * ONE_YEAR * ONE_MILLISECOND_AS_NANOSECONDS)).toEqual(
-        '2 years'
-      );
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/formatted_duration/helpers.tsx b/x-pack/plugins/siem/public/components/formatted_duration/helpers.tsx
deleted file mode 100644
index 44bd76bc6beb05..00000000000000
--- a/x-pack/plugins/siem/public/components/formatted_duration/helpers.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-/*
- * 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 moment from 'moment';
-
-import { getEmptyValue } from '../empty_value';
-
-import * as i18n from './translations';
-
-/** one millisecond (as nanoseconds) */
-export const ONE_MILLISECOND_AS_NANOSECONDS = 1000000;
-
-export const ONE_SECOND = 1000;
-export const ONE_MINUTE = 60000;
-export const ONE_HOUR = 3600000;
-export const ONE_DAY = 86400000; // ms
-export const ONE_MONTH = 2592000000; // ms
-export const ONE_YEAR = 31536000000; // ms
-
-const milliseconds = (duration: moment.Duration): string =>
-  Number.isInteger(duration.milliseconds())
-    ? `${duration.milliseconds()}ms`
-    : `${duration.milliseconds().toFixed(6)}ms`; // nanosecond precision
-const seconds = (duration: moment.Duration): string =>
-  `${duration.seconds().toFixed()}s${
-    duration.milliseconds() > 0 ? ` ${milliseconds(duration)}` : ''
-  }`;
-const minutes = (duration: moment.Duration): string =>
-  `${duration.minutes()}m ${seconds(duration)}`;
-const hours = (duration: moment.Duration): string => `${duration.hours()}h ${minutes(duration)}`;
-const days = (duration: moment.Duration): string => `${duration.days()}d ${hours(duration)}`;
-const months = (duration: moment.Duration): string =>
-  `${duration.years() > 0 || duration.months() > 0 ? `${duration.months()}m ` : ''}${days(
-    duration
-  )}`;
-const years = (duration: moment.Duration): string =>
-  `${duration.years() > 0 ? `${duration.years()}y ` : ''}${months(duration)}`;
-
-export const getFormattedDurationString = (
-  maybeDurationNanoseconds: string | number | object | undefined | null
-): string => {
-  const totalNanoseconds = Number(maybeDurationNanoseconds);
-
-  if (maybeDurationNanoseconds == null) {
-    return getEmptyValue();
-  }
-
-  if (Number.isNaN(totalNanoseconds) || totalNanoseconds < 0) {
-    return `${maybeDurationNanoseconds}`; // echo back the duration as a string
-  }
-
-  if (totalNanoseconds < ONE_MILLISECOND_AS_NANOSECONDS) {
-    return `${totalNanoseconds}ns`; // display the raw nanoseconds
-  }
-
-  const duration = moment.duration(totalNanoseconds / ONE_MILLISECOND_AS_NANOSECONDS);
-  const totalMs = duration.asMilliseconds();
-
-  if (totalMs < ONE_SECOND) {
-    return milliseconds(duration);
-  } else if (totalMs < ONE_MINUTE) {
-    return seconds(duration);
-  } else if (totalMs < ONE_HOUR) {
-    return minutes(duration);
-  } else if (totalMs < ONE_DAY) {
-    return hours(duration);
-  } else if (totalMs < ONE_MONTH) {
-    return days(duration);
-  } else if (totalMs < ONE_YEAR) {
-    return months(duration);
-  } else {
-    return years(duration);
-  }
-};
-
-export const getHumanizedDuration = (
-  maybeDurationNanoseconds: string | number | object | undefined | null
-): string => {
-  if (maybeDurationNanoseconds == null) {
-    return i18n.NO_DURATION;
-  }
-
-  const totalNanoseconds = Number(maybeDurationNanoseconds);
-
-  if (Number.isNaN(totalNanoseconds) || totalNanoseconds < 0) {
-    return i18n.INVALID_DURATION;
-  }
-
-  if (totalNanoseconds === 0) {
-    return i18n.ZERO_NANOSECONDS;
-  } else if (totalNanoseconds === 1) {
-    return i18n.A_NANOSECOND;
-  } else if (totalNanoseconds < ONE_MILLISECOND_AS_NANOSECONDS) {
-    return i18n.A_FEW_NANOSECONDS;
-  } else if (totalNanoseconds === ONE_MILLISECOND_AS_NANOSECONDS) {
-    return i18n.A_MILLISECOND;
-  }
-
-  const totalMs = totalNanoseconds / ONE_MILLISECOND_AS_NANOSECONDS;
-  if (totalMs < ONE_SECOND) {
-    return i18n.A_FEW_MILLISECONDS;
-  } else if (totalMs === ONE_SECOND) {
-    return i18n.A_SECOND;
-  } else {
-    return moment.duration(totalMs).humanize();
-  }
-};
diff --git a/x-pack/plugins/siem/public/components/formatted_ip/index.tsx b/x-pack/plugins/siem/public/components/formatted_ip/index.tsx
deleted file mode 100644
index ba97e8d61451c3..00000000000000
--- a/x-pack/plugins/siem/public/components/formatted_ip/index.tsx
+++ /dev/null
@@ -1,178 +0,0 @@
-/*
- * 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 { isArray, isEmpty, isString, uniq } from 'lodash/fp';
-import React from 'react';
-
-import { DragEffects, DraggableWrapper } from '../drag_and_drop/draggable_wrapper';
-import { escapeDataProviderId } from '../drag_and_drop/helpers';
-import { getOrEmptyTagFromValue } from '../empty_value';
-import { IPDetailsLink } from '../links';
-import { parseQueryValue } from '../timeline/body/renderers/parse_query_value';
-import { DataProvider, IS_OPERATOR } from '../timeline/data_providers/data_provider';
-import { Provider } from '../timeline/data_providers/provider';
-
-const getUniqueId = ({
-  contextId,
-  eventId,
-  fieldName,
-  address,
-}: {
-  contextId: string;
-  eventId: string;
-  fieldName: string;
-  address: string | object | null | undefined;
-}) => `formatted-ip-data-provider-${contextId}-${fieldName}-${address}-${eventId}`;
-
-const tryStringify = (value: string | object | null | undefined): string => {
-  try {
-    return JSON.stringify(value);
-  } catch (_) {
-    return `${value}`;
-  }
-};
-
-const getDataProvider = ({
-  contextId,
-  eventId,
-  fieldName,
-  address,
-}: {
-  contextId: string;
-  eventId: string;
-  fieldName: string;
-  address: string | object | null | undefined;
-}): DataProvider => ({
-  enabled: true,
-  id: escapeDataProviderId(getUniqueId({ contextId, eventId, fieldName, address })),
-  name: `${fieldName}: ${parseQueryValue(address)}`,
-  queryMatch: {
-    field: fieldName,
-    value: parseQueryValue(address),
-    operator: IS_OPERATOR,
-  },
-  excluded: false,
-  kqlQuery: '',
-  and: [],
-});
-
-const NonDecoratedIpComponent: React.FC<{
-  contextId: string;
-  eventId: string;
-  fieldName: string;
-  truncate?: boolean;
-  value: string | object | null | undefined;
-}> = ({ contextId, eventId, fieldName, truncate, value }) => (
-  <DraggableWrapper
-    dataProvider={getDataProvider({ contextId, eventId, fieldName, address: value })}
-    key={`non-decorated-ip-draggable-wrapper-${getUniqueId({
-      contextId,
-      eventId,
-      fieldName,
-      address: value,
-    })}`}
-    render={(dataProvider, _, snapshot) =>
-      snapshot.isDragging ? (
-        <DragEffects>
-          <Provider dataProvider={dataProvider} />
-        </DragEffects>
-      ) : typeof value !== 'object' ? (
-        getOrEmptyTagFromValue(value)
-      ) : (
-        getOrEmptyTagFromValue(tryStringify(value))
-      )
-    }
-    truncate={truncate}
-  />
-);
-
-const NonDecoratedIp = React.memo(NonDecoratedIpComponent);
-
-const AddressLinksComponent: React.FC<{
-  addresses: string[];
-  contextId: string;
-  eventId: string;
-  fieldName: string;
-  truncate?: boolean;
-}> = ({ addresses, contextId, eventId, fieldName, truncate }) => (
-  <>
-    {uniq(addresses).map(address => (
-      <DraggableWrapper
-        dataProvider={getDataProvider({ contextId, eventId, fieldName, address })}
-        key={`address-links-draggable-wrapper-${getUniqueId({
-          contextId,
-          eventId,
-          fieldName,
-          address,
-        })}`}
-        render={(_, __, snapshot) =>
-          snapshot.isDragging ? (
-            <DragEffects>
-              <Provider
-                dataProvider={getDataProvider({ contextId, eventId, fieldName, address })}
-              />
-            </DragEffects>
-          ) : (
-            <IPDetailsLink data-test-sub="ip-details" ip={address} />
-          )
-        }
-        truncate={truncate}
-      />
-    ))}
-  </>
-);
-
-const AddressLinks = React.memo(AddressLinksComponent);
-
-const FormattedIpComponent: React.FC<{
-  contextId: string;
-  eventId: string;
-  fieldName: string;
-  truncate?: boolean;
-  value: string | object | null | undefined;
-}> = ({ contextId, eventId, fieldName, truncate, value }) => {
-  if (isString(value) && !isEmpty(value)) {
-    try {
-      const addresses = JSON.parse(value);
-      if (isArray(addresses)) {
-        return (
-          <AddressLinks
-            addresses={addresses}
-            contextId={contextId}
-            eventId={eventId}
-            fieldName={fieldName}
-            truncate={truncate}
-          />
-        );
-      }
-    } catch (_) {
-      // fall back to formatting it as a single link
-    }
-
-    // return a single draggable link
-    return (
-      <AddressLinks
-        addresses={[value]}
-        contextId={contextId}
-        eventId={eventId}
-        fieldName={fieldName}
-        truncate={truncate}
-      />
-    );
-  } else {
-    return (
-      <NonDecoratedIp
-        contextId={contextId}
-        eventId={eventId}
-        fieldName={fieldName}
-        truncate={truncate}
-        value={value}
-      />
-    );
-  }
-};
-
-export const FormattedIp = React.memo(FormattedIpComponent);
diff --git a/x-pack/plugins/siem/public/components/generic_downloader/index.tsx b/x-pack/plugins/siem/public/components/generic_downloader/index.tsx
deleted file mode 100644
index 6f08f5c8c381cd..00000000000000
--- a/x-pack/plugins/siem/public/components/generic_downloader/index.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-/*
- * 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, { useEffect, useRef } from 'react';
-import styled from 'styled-components';
-import { isFunction } from 'lodash/fp';
-import * as i18n from './translations';
-
-import { ExportDocumentsProps } from '../../containers/detection_engine/rules';
-import { useStateToaster, errorToToaster } from '../toasters';
-
-const InvisibleAnchor = styled.a`
-  display: none;
-`;
-
-export type ExportSelectedData = ({
-  excludeExportDetails,
-  filename,
-  ids,
-  signal,
-}: ExportDocumentsProps) => Promise<Blob>;
-
-export interface GenericDownloaderProps {
-  filename: string;
-  ids?: string[];
-  exportSelectedData: ExportSelectedData;
-  onExportSuccess?: (exportCount: number) => void;
-  onExportFailure?: () => void;
-}
-
-/**
- * Component for downloading Rules as an exported .ndjson file. Download will occur on each update to `rules` param
- *
- * @param filename of file to be downloaded
- * @param payload Rule[]
- *
- */
-
-export const GenericDownloaderComponent = ({
-  exportSelectedData,
-  filename,
-  ids,
-  onExportSuccess,
-  onExportFailure,
-}: GenericDownloaderProps) => {
-  const anchorRef = useRef<HTMLAnchorElement>(null);
-  const [, dispatchToaster] = useStateToaster();
-
-  useEffect(() => {
-    let isSubscribed = true;
-    const abortCtrl = new AbortController();
-
-    const exportData = async () => {
-      if (anchorRef && anchorRef.current && ids != null && ids.length > 0) {
-        try {
-          const exportResponse = await exportSelectedData({
-            ids,
-            signal: abortCtrl.signal,
-          });
-
-          if (isSubscribed) {
-            // this is for supporting IE
-            if (isFunction(window.navigator.msSaveOrOpenBlob)) {
-              window.navigator.msSaveBlob(exportResponse);
-            } else {
-              const objectURL = window.URL.createObjectURL(exportResponse);
-              // These are safe-assignments as writes to anchorRef are isolated to exportData
-              anchorRef.current.href = objectURL; // eslint-disable-line require-atomic-updates
-              anchorRef.current.download = filename; // eslint-disable-line require-atomic-updates
-              anchorRef.current.click();
-              window.URL.revokeObjectURL(objectURL);
-            }
-
-            if (onExportSuccess != null) {
-              onExportSuccess(ids.length);
-            }
-          }
-        } catch (error) {
-          if (isSubscribed) {
-            if (onExportFailure != null) {
-              onExportFailure();
-            }
-            errorToToaster({ title: i18n.EXPORT_FAILURE, error, dispatchToaster });
-          }
-        }
-      }
-    };
-
-    exportData();
-
-    return () => {
-      isSubscribed = false;
-      abortCtrl.abort();
-    };
-  }, [ids]);
-
-  return <InvisibleAnchor ref={anchorRef} />;
-};
-
-GenericDownloaderComponent.displayName = 'GenericDownloaderComponent';
-
-export const GenericDownloader = React.memo(GenericDownloaderComponent);
-
-GenericDownloader.displayName = 'GenericDownloader';
diff --git a/x-pack/plugins/siem/public/components/header_global/index.tsx b/x-pack/plugins/siem/public/components/header_global/index.tsx
deleted file mode 100644
index adc2be4f9c3656..00000000000000
--- a/x-pack/plugins/siem/public/components/header_global/index.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-/*
- * 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 { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLink } from '@elastic/eui';
-import { pickBy } from 'lodash/fp';
-import React from 'react';
-import styled, { css } from 'styled-components';
-
-import { useLocation } from 'react-router-dom';
-import { gutterTimeline } from '../../lib/helpers';
-import { navTabs } from '../../pages/home/home_navigations';
-import { SiemPageName } from '../../pages/home/types';
-import { getOverviewUrl } from '../link_to';
-import { MlPopover } from '../ml_popover/ml_popover';
-import { SiemNavigation } from '../navigation';
-import * as i18n from './translations';
-import { indicesExistOrDataTemporarilyUnavailable, WithSource } from '../../containers/source';
-
-const Wrapper = styled.header`
-  ${({ theme }) => css`
-    background: ${theme.eui.euiColorEmptyShade};
-    border-bottom: ${theme.eui.euiBorderThin};
-    padding: ${theme.eui.paddingSizes.m} ${gutterTimeline} ${theme.eui.paddingSizes.m}
-      ${theme.eui.paddingSizes.l};
-  `}
-`;
-Wrapper.displayName = 'Wrapper';
-
-const FlexItem = styled(EuiFlexItem)`
-  min-width: 0;
-`;
-FlexItem.displayName = 'FlexItem';
-
-interface HeaderGlobalProps {
-  hideDetectionEngine?: boolean;
-}
-export const HeaderGlobal = React.memo<HeaderGlobalProps>(({ hideDetectionEngine = false }) => {
-  const currentLocation = useLocation();
-
-  return (
-    <Wrapper className="siemHeaderGlobal">
-      <EuiFlexGroup alignItems="center" justifyContent="spaceBetween" wrap>
-        <WithSource sourceId="default">
-          {({ indicesExist }) => (
-            <>
-              <FlexItem>
-                <EuiFlexGroup alignItems="center" responsive={false}>
-                  <FlexItem grow={false}>
-                    <EuiLink href={getOverviewUrl()}>
-                      <EuiIcon aria-label={i18n.SIEM} type="securityAnalyticsApp" size="l" />
-                    </EuiLink>
-                  </FlexItem>
-
-                  <FlexItem component="nav">
-                    {indicesExistOrDataTemporarilyUnavailable(indicesExist) ? (
-                      <SiemNavigation
-                        display="condensed"
-                        navTabs={
-                          hideDetectionEngine
-                            ? pickBy((_, key) => key !== SiemPageName.detections, navTabs)
-                            : navTabs
-                        }
-                      />
-                    ) : (
-                      <SiemNavigation
-                        display="condensed"
-                        navTabs={pickBy((_, key) => key === SiemPageName.overview, navTabs)}
-                      />
-                    )}
-                  </FlexItem>
-                </EuiFlexGroup>
-              </FlexItem>
-
-              <FlexItem grow={false}>
-                <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false} wrap>
-                  {indicesExistOrDataTemporarilyUnavailable(indicesExist) &&
-                    currentLocation.pathname.includes(`/${SiemPageName.detections}/`) && (
-                      <FlexItem grow={false}>
-                        <MlPopover />
-                      </FlexItem>
-                    )}
-
-                  <FlexItem grow={false}>
-                    <EuiButtonEmpty
-                      data-test-subj="add-data"
-                      href="kibana#home/tutorial_directory/siem"
-                      iconType="plusInCircle"
-                    >
-                      {i18n.BUTTON_ADD_DATA}
-                    </EuiButtonEmpty>
-                  </FlexItem>
-                </EuiFlexGroup>
-              </FlexItem>
-            </>
-          )}
-        </WithSource>
-      </EuiFlexGroup>
-    </Wrapper>
-  );
-});
-HeaderGlobal.displayName = 'HeaderGlobal';
diff --git a/x-pack/plugins/siem/public/components/import_data_modal/index.tsx b/x-pack/plugins/siem/public/components/import_data_modal/index.tsx
deleted file mode 100644
index c827411a41e2ea..00000000000000
--- a/x-pack/plugins/siem/public/components/import_data_modal/index.tsx
+++ /dev/null
@@ -1,173 +0,0 @@
-/*
- * 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 {
-  EuiButton,
-  EuiButtonEmpty,
-  EuiCheckbox,
-  // @ts-ignore no-exported-member
-  EuiFilePicker,
-  EuiModal,
-  EuiModalBody,
-  EuiModalFooter,
-  EuiModalHeader,
-  EuiModalHeaderTitle,
-  EuiOverlayMask,
-  EuiSpacer,
-  EuiText,
-} from '@elastic/eui';
-import React, { useCallback, useState } from 'react';
-
-import { ImportDataResponse, ImportDataProps } from '../../containers/detection_engine/rules';
-import {
-  displayErrorToast,
-  displaySuccessToast,
-  useStateToaster,
-  errorToToaster,
-} from '../toasters';
-import * as i18n from './translations';
-
-interface ImportDataModalProps {
-  checkBoxLabel: string;
-  closeModal: () => void;
-  description: string;
-  errorMessage: string;
-  failedDetailed: (id: string, statusCode: number, message: string) => string;
-  importComplete: () => void;
-  importData: (arg: ImportDataProps) => Promise<ImportDataResponse>;
-  showCheckBox: boolean;
-  showModal: boolean;
-  submitBtnText: string;
-  subtitle: string;
-  successMessage: (totalCount: number) => string;
-  title: string;
-}
-
-/**
- * Modal component for importing Rules from a json file
- */
-export const ImportDataModalComponent = ({
-  checkBoxLabel,
-  closeModal,
-  description,
-  errorMessage,
-  failedDetailed,
-  importComplete,
-  importData,
-  showCheckBox = true,
-  showModal,
-  submitBtnText,
-  subtitle,
-  successMessage,
-  title,
-}: ImportDataModalProps) => {
-  const [selectedFiles, setSelectedFiles] = useState<FileList | null>(null);
-  const [isImporting, setIsImporting] = useState(false);
-  const [overwrite, setOverwrite] = useState(false);
-  const [, dispatchToaster] = useStateToaster();
-
-  const cleanupAndCloseModal = useCallback(() => {
-    setIsImporting(false);
-    setSelectedFiles(null);
-    closeModal();
-  }, [setIsImporting, setSelectedFiles, closeModal]);
-
-  const importDataCallback = useCallback(async () => {
-    if (selectedFiles != null) {
-      setIsImporting(true);
-      const abortCtrl = new AbortController();
-
-      try {
-        const importResponse = await importData({
-          fileToImport: selectedFiles[0],
-          overwrite,
-          signal: abortCtrl.signal,
-        });
-
-        // TODO: Improve error toast details for better debugging failed imports
-        // e.g. When success == true && success_count === 0 that means no rules were overwritten, etc
-        if (importResponse.success) {
-          displaySuccessToast(successMessage(importResponse.success_count), dispatchToaster);
-        }
-        if (importResponse.errors.length > 0) {
-          const formattedErrors = importResponse.errors.map(e =>
-            failedDetailed(e.rule_id, e.error.status_code, e.error.message)
-          );
-          displayErrorToast(errorMessage, formattedErrors, dispatchToaster);
-        }
-
-        importComplete();
-        cleanupAndCloseModal();
-      } catch (error) {
-        cleanupAndCloseModal();
-        errorToToaster({ title: errorMessage, error, dispatchToaster });
-      }
-    }
-  }, [selectedFiles, overwrite]);
-
-  const handleCloseModal = useCallback(() => {
-    setSelectedFiles(null);
-    closeModal();
-  }, [closeModal]);
-
-  return (
-    <>
-      {showModal && (
-        <EuiOverlayMask>
-          <EuiModal onClose={closeModal} maxWidth={'750px'}>
-            <EuiModalHeader>
-              <EuiModalHeaderTitle>{title}</EuiModalHeaderTitle>
-            </EuiModalHeader>
-
-            <EuiModalBody>
-              <EuiText size="s">
-                <h4>{description}</h4>
-              </EuiText>
-
-              <EuiSpacer size="s" />
-              <EuiFilePicker
-                id="rule-file-picker"
-                initialPromptText={subtitle}
-                onChange={(files: FileList | null) => {
-                  setSelectedFiles(files && files.length > 0 ? files : null);
-                }}
-                display={'large'}
-                fullWidth={true}
-                isLoading={isImporting}
-              />
-              <EuiSpacer size="s" />
-              {showCheckBox && (
-                <EuiCheckbox
-                  id="import-data-modal-checkbox-label"
-                  label={checkBoxLabel}
-                  checked={overwrite}
-                  onChange={() => setOverwrite(!overwrite)}
-                />
-              )}
-            </EuiModalBody>
-
-            <EuiModalFooter>
-              <EuiButtonEmpty onClick={handleCloseModal}>{i18n.CANCEL_BUTTON}</EuiButtonEmpty>
-              <EuiButton
-                onClick={importDataCallback}
-                disabled={selectedFiles == null || isImporting}
-                fill
-              >
-                {submitBtnText}
-              </EuiButton>
-            </EuiModalFooter>
-          </EuiModal>
-        </EuiOverlayMask>
-      )}
-    </>
-  );
-};
-
-ImportDataModalComponent.displayName = 'ImportDataModalComponent';
-
-export const ImportDataModal = React.memo(ImportDataModalComponent);
-
-ImportDataModal.displayName = 'ImportDataModal';
diff --git a/x-pack/plugins/siem/public/components/inspect/index.test.tsx b/x-pack/plugins/siem/public/components/inspect/index.test.tsx
deleted file mode 100644
index 9492002717e2bf..00000000000000
--- a/x-pack/plugins/siem/public/components/inspect/index.test.tsx
+++ /dev/null
@@ -1,238 +0,0 @@
-/*
- * 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 euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
-import { mount } from 'enzyme';
-import React from 'react';
-import { ThemeProvider } from 'styled-components';
-
-import {
-  TestProviderWithoutDragAndDrop,
-  mockGlobalState,
-  apolloClientObservable,
-} from '../../mock';
-import { createStore, State } from '../../store';
-import { UpdateQueryParams, upsertQuery } from '../../store/inputs/helpers';
-
-import { InspectButton, InspectButtonContainer, BUTTON_CLASS } from '.';
-import { cloneDeep } from 'lodash/fp';
-
-describe('Inspect Button', () => {
-  const theme = () => ({ eui: euiDarkVars, darkMode: true });
-  const refetch = jest.fn();
-  const state: State = mockGlobalState;
-  const newQuery: UpdateQueryParams = {
-    inputId: 'global',
-    id: 'myQuery',
-    inspect: null,
-    loading: false,
-    refetch,
-    state: state.inputs,
-  };
-
-  let store = createStore(state, apolloClientObservable);
-
-  describe('Render', () => {
-    beforeEach(() => {
-      const myState = cloneDeep(state);
-      myState.inputs = upsertQuery(newQuery);
-      store = createStore(myState, apolloClientObservable);
-    });
-    test('Eui Empty Button', () => {
-      const wrapper = mount(
-        <TestProviderWithoutDragAndDrop store={store}>
-          <InspectButton queryId={newQuery.id} inputId="timeline" title="My title" />
-        </TestProviderWithoutDragAndDrop>
-      );
-      expect(
-        wrapper
-          .find('button[data-test-subj="inspect-empty-button"]')
-          .first()
-          .exists()
-      ).toBe(true);
-    });
-
-    test('it does NOT render the Eui Empty Button when timeline is timeline and compact is true', () => {
-      const wrapper = mount(
-        <TestProviderWithoutDragAndDrop store={store}>
-          <InspectButton compact={true} queryId={newQuery.id} inputId="timeline" title="My title" />
-        </TestProviderWithoutDragAndDrop>
-      );
-      expect(
-        wrapper
-          .find('button[data-test-subj="inspect-empty-button"]')
-          .first()
-          .exists()
-      ).toBe(false);
-    });
-
-    test('Eui Icon Button', () => {
-      const wrapper = mount(
-        <TestProviderWithoutDragAndDrop store={store}>
-          <InspectButton queryId={newQuery.id} title="My title" />
-        </TestProviderWithoutDragAndDrop>
-      );
-      expect(
-        wrapper
-          .find('button[data-test-subj="inspect-icon-button"]')
-          .first()
-          .exists()
-      ).toBe(true);
-    });
-
-    test('renders the Icon Button when inputId does NOT equal global, but compact is true', () => {
-      const wrapper = mount(
-        <TestProviderWithoutDragAndDrop store={store}>
-          <InspectButton compact={true} inputId="timeline" queryId={newQuery.id} title="My title" />
-        </TestProviderWithoutDragAndDrop>
-      );
-      expect(
-        wrapper
-          .find('button[data-test-subj="inspect-icon-button"]')
-          .first()
-          .exists()
-      ).toBe(true);
-    });
-
-    test('Eui Empty Button disabled', () => {
-      const wrapper = mount(
-        <TestProviderWithoutDragAndDrop store={store}>
-          <InspectButton isDisabled={true} queryId={newQuery.id} title="My title" />
-        </TestProviderWithoutDragAndDrop>
-      );
-      expect(wrapper.find('.euiButtonIcon').get(0).props.disabled).toBe(true);
-    });
-
-    test('Eui Icon Button disabled', () => {
-      const wrapper = mount(
-        <TestProviderWithoutDragAndDrop store={store}>
-          <InspectButton isDisabled={true} queryId={newQuery.id} title="My title" />
-        </TestProviderWithoutDragAndDrop>
-      );
-      expect(wrapper.find('.euiButtonIcon').get(0).props.disabled).toBe(true);
-    });
-
-    describe('InspectButtonContainer', () => {
-      test('it renders a transparent inspect button by default', async () => {
-        const wrapper = mount(
-          <TestProviderWithoutDragAndDrop store={store}>
-            <InspectButtonContainer>
-              <InspectButton queryId={newQuery.id} title="My title" />
-            </InspectButtonContainer>
-          </TestProviderWithoutDragAndDrop>
-        );
-
-        expect(wrapper.find(`InspectButtonContainer`)).toHaveStyleRule('opacity', '0', {
-          modifier: `.${BUTTON_CLASS}`,
-        });
-      });
-
-      test('it renders an opaque inspect button when it has mouse focus', async () => {
-        const wrapper = mount(
-          <TestProviderWithoutDragAndDrop store={store}>
-            <InspectButtonContainer>
-              <InspectButton queryId={newQuery.id} title="My title" />
-            </InspectButtonContainer>
-          </TestProviderWithoutDragAndDrop>
-        );
-
-        expect(wrapper.find(`InspectButtonContainer`)).toHaveStyleRule('opacity', '1', {
-          modifier: `:hover .${BUTTON_CLASS}`,
-        });
-      });
-    });
-  });
-
-  describe('Modal Inspect - happy path', () => {
-    beforeEach(() => {
-      const myState = cloneDeep(state);
-      const myQuery = cloneDeep(newQuery);
-      myQuery.inspect = {
-        dsl: ['my dsl'],
-        response: ['my response'],
-      };
-      myState.inputs = upsertQuery(myQuery);
-      store = createStore(myState, apolloClientObservable);
-    });
-    test('Open Inspect Modal', () => {
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <TestProviderWithoutDragAndDrop store={store}>
-            <InspectButton queryId={newQuery.id} title="My title" />
-          </TestProviderWithoutDragAndDrop>
-        </ThemeProvider>
-      );
-      wrapper
-        .find('button[data-test-subj="inspect-icon-button"]')
-        .first()
-        .simulate('click');
-
-      wrapper.update();
-
-      expect(store.getState().inputs.global.queries[0].isInspected).toBe(true);
-      expect(
-        wrapper
-          .find('button[data-test-subj="modal-inspect-close"]')
-          .first()
-          .exists()
-      ).toBe(true);
-    });
-
-    test('Close Inspect Modal', () => {
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <TestProviderWithoutDragAndDrop store={store}>
-            <InspectButton queryId={newQuery.id} title="My title" />
-          </TestProviderWithoutDragAndDrop>
-        </ThemeProvider>
-      );
-      wrapper
-        .find('button[data-test-subj="inspect-icon-button"]')
-        .first()
-        .simulate('click');
-
-      wrapper.update();
-
-      wrapper
-        .find('button[data-test-subj="modal-inspect-close"]')
-        .first()
-        .simulate('click');
-
-      wrapper.update();
-
-      expect(store.getState().inputs.global.queries[0].isInspected).toBe(false);
-      expect(
-        wrapper
-          .find('button[data-test-subj="modal-inspect-close"]')
-          .first()
-          .exists()
-      ).toBe(false);
-    });
-
-    test('Do not Open Inspect Modal if it is loading', () => {
-      const wrapper = mount(
-        <TestProviderWithoutDragAndDrop store={store}>
-          <InspectButton queryId={newQuery.id} title="My title" />
-        </TestProviderWithoutDragAndDrop>
-      );
-      store.getState().inputs.global.queries[0].loading = true;
-      wrapper
-        .find('button[data-test-subj="inspect-icon-button"]')
-        .first()
-        .simulate('click');
-
-      wrapper.update();
-
-      expect(store.getState().inputs.global.queries[0].isInspected).toBe(true);
-      expect(
-        wrapper
-          .find('button[data-test-subj="modal-inspect-close"]')
-          .first()
-          .exists()
-      ).toBe(false);
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/ip/index.test.tsx b/x-pack/plugins/siem/public/components/ip/index.test.tsx
deleted file mode 100644
index 209fc63c7355c6..00000000000000
--- a/x-pack/plugins/siem/public/components/ip/index.test.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-/*
- * 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 { shallow } from 'enzyme';
-import React from 'react';
-
-import { TestProviders } from '../../mock/test_providers';
-import { useMountAppended } from '../../utils/use_mount_appended';
-
-import { Ip } from '.';
-
-describe('Port', () => {
-  const mount = useMountAppended();
-
-  test('renders correctly against snapshot', () => {
-    const wrapper = shallow(
-      <Ip contextId="test" eventId="abcd" fieldName="destination.ip" value="10.1.2.3" />
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  test('it renders the the ip address', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <Ip contextId="test" eventId="abcd" fieldName="destination.ip" value="10.1.2.3" />
-      </TestProviders>
-    );
-
-    expect(
-      wrapper
-        .find('[data-test-subj="formatted-ip"]')
-        .first()
-        .text()
-    ).toEqual('10.1.2.3');
-  });
-
-  test('it hyperlinks to the network/ip page', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <Ip contextId="test" eventId="abcd" fieldName="destination.ip" value="10.1.2.3" />
-      </TestProviders>
-    );
-
-    expect(
-      wrapper
-        .find('[data-test-subj="draggable-content-destination.ip"]')
-        .find('a')
-        .first()
-        .props().href
-    ).toEqual('#/link-to/network/ip/10.1.2.3/source');
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/ip/index.tsx b/x-pack/plugins/siem/public/components/ip/index.tsx
deleted file mode 100644
index 49237c3bb1bb96..00000000000000
--- a/x-pack/plugins/siem/public/components/ip/index.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
- * 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 { FormattedFieldValue } from '../timeline/body/renderers/formatted_field';
-
-export const SOURCE_IP_FIELD_NAME = 'source.ip';
-export const DESTINATION_IP_FIELD_NAME = 'destination.ip';
-
-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 = React.memo<{
-  contextId: string;
-  eventId: string;
-  fieldName: string;
-  value?: string | null;
-}>(({ contextId, eventId, fieldName, value }) => (
-  <FormattedFieldValue
-    contextId={contextId}
-    data-test-subj="formatted-ip"
-    eventId={eventId}
-    fieldName={fieldName}
-    fieldType={IP_FIELD_TYPE}
-    value={value}
-  />
-));
-
-Ip.displayName = 'Ip';
diff --git a/x-pack/plugins/siem/public/components/ja3_fingerprint/index.test.tsx b/x-pack/plugins/siem/public/components/ja3_fingerprint/index.test.tsx
deleted file mode 100644
index c4ea6ff63a0a77..00000000000000
--- a/x-pack/plugins/siem/public/components/ja3_fingerprint/index.test.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-/*
- * 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 { TestProviders } from '../../mock';
-import { useMountAppended } from '../../utils/use_mount_appended';
-
-import { Ja3Fingerprint } from '.';
-
-describe('Ja3Fingerprint', () => {
-  const mount = useMountAppended();
-
-  test('renders the expected label', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <Ja3Fingerprint
-          eventId="KzNOvGkBqd-n62SwSPa4"
-          contextId="test"
-          fieldName="tls.fingerprints.ja3.hash"
-          value="fff799d91b7c01ae3fe6787cfc895552"
-        />
-      </TestProviders>
-    );
-
-    expect(
-      wrapper
-        .find('[data-test-subj="ja3-fingerprint-label"]')
-        .first()
-        .text()
-    ).toEqual('ja3');
-  });
-
-  test('renders the fingerprint as text', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <Ja3Fingerprint
-          eventId="KzNOvGkBqd-n62SwSPa4"
-          contextId="test"
-          fieldName="tls.fingerprints.ja3.hash"
-          value="fff799d91b7c01ae3fe6787cfc895552"
-        />
-      </TestProviders>
-    );
-
-    expect(
-      wrapper
-        .find('[data-test-subj="ja3-fingerprint-link"]')
-        .first()
-        .text()
-    ).toEqual('fff799d91b7c01ae3fe6787cfc895552');
-  });
-
-  test('it renders a hyperlink to an external site to compare the fingerprint against a known set of signatures', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <Ja3Fingerprint
-          eventId="KzNOvGkBqd-n62SwSPa4"
-          contextId="test"
-          fieldName="tls.fingerprints.ja3.hash"
-          value="fff799d91b7c01ae3fe6787cfc895552"
-        />
-      </TestProviders>
-    );
-
-    expect(
-      wrapper
-        .find('[data-test-subj="ja3-fingerprint-link"]')
-        .first()
-        .props().href
-    ).toEqual('https://sslbl.abuse.ch/ja3-fingerprints/fff799d91b7c01ae3fe6787cfc895552');
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/ja3_fingerprint/index.tsx b/x-pack/plugins/siem/public/components/ja3_fingerprint/index.tsx
deleted file mode 100644
index 955a57576dc8eb..00000000000000
--- a/x-pack/plugins/siem/public/components/ja3_fingerprint/index.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-/*
- * 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 styled from 'styled-components';
-
-import { DraggableBadge } from '../draggables';
-import { ExternalLinkIcon } from '../external_link_icon';
-import { Ja3FingerprintLink } from '../links';
-
-import * as i18n from './translations';
-
-export const JA3_HASH_FIELD_NAME = 'tls.fingerprints.ja3.hash';
-
-const Ja3FingerprintLabel = styled.span`
-  margin-right: 5px;
-`;
-
-Ja3FingerprintLabel.displayName = 'Ja3FingerprintLabel';
-
-/**
- * Renders a ja3 fingerprint, which enables (some) clients and servers communicating
- * using TLS traffic to be identified, which is possible because SSL
- * negotiations happen in the clear
- */
-export const Ja3Fingerprint = React.memo<{
-  eventId: string;
-  contextId: string;
-  fieldName: string;
-  value?: string | null;
-}>(({ contextId, eventId, fieldName, value }) => (
-  <DraggableBadge
-    contextId={contextId}
-    data-test-subj="ja3-hash"
-    eventId={eventId}
-    field={fieldName}
-    iconType="snowflake"
-    value={value}
-  >
-    <Ja3FingerprintLabel data-test-subj="ja3-fingerprint-label">
-      {i18n.JA3_FINGERPRINT_LABEL}
-    </Ja3FingerprintLabel>
-    <Ja3FingerprintLink data-test-subj="ja3-hash-link" ja3Fingerprint={value || ''} />
-    <ExternalLinkIcon />
-  </DraggableBadge>
-));
-
-Ja3Fingerprint.displayName = 'Ja3Fingerprint';
diff --git a/x-pack/plugins/siem/public/components/last_event_time/index.test.tsx b/x-pack/plugins/siem/public/components/last_event_time/index.test.tsx
deleted file mode 100644
index 69a795d0c8db78..00000000000000
--- a/x-pack/plugins/siem/public/components/last_event_time/index.test.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-/*
- * 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 { getEmptyValue } from '../empty_value';
-import { LastEventIndexKey } from '../../graphql/types';
-import { mockLastEventTimeQuery } from '../../containers/events/last_event_time/mock';
-
-import { useMountAppended } from '../../utils/use_mount_appended';
-import { useLastEventTimeQuery } from '../../containers/events/last_event_time';
-import { TestProviders } from '../../mock';
-
-import { LastEventTime } from '.';
-
-const mockUseLastEventTimeQuery: jest.Mock = useLastEventTimeQuery as jest.Mock;
-jest.mock('../../containers/events/last_event_time', () => ({
-  useLastEventTimeQuery: jest.fn(),
-}));
-
-describe('Last Event Time Stat', () => {
-  const mount = useMountAppended();
-
-  beforeEach(() => {
-    mockUseLastEventTimeQuery.mockReset();
-  });
-
-  test('Loading', async () => {
-    mockUseLastEventTimeQuery.mockImplementation(() => ({
-      loading: true,
-      lastSeen: null,
-      errorMessage: null,
-    }));
-    const wrapper = mount(
-      <TestProviders>
-        <LastEventTime indexKey={LastEventIndexKey.hosts} />
-      </TestProviders>
-    );
-    expect(wrapper.html()).toBe(
-      '<span class="euiLoadingSpinner euiLoadingSpinner--medium"></span>'
-    );
-  });
-  test('Last seen', async () => {
-    mockUseLastEventTimeQuery.mockImplementation(() => ({
-      loading: false,
-      lastSeen: mockLastEventTimeQuery[0].result.data!.source.LastEventTime.lastSeen,
-      errorMessage: mockLastEventTimeQuery[0].result.data!.source.LastEventTime.errorMessage,
-    }));
-    const wrapper = mount(
-      <TestProviders>
-        <LastEventTime indexKey={LastEventIndexKey.hosts} />
-      </TestProviders>
-    );
-    expect(wrapper.html()).toBe('Last event: <span class="euiToolTipAnchor">12 minutes ago</span>');
-  });
-  test('Bad date time string', async () => {
-    mockUseLastEventTimeQuery.mockImplementation(() => ({
-      loading: false,
-      lastSeen: 'something-invalid',
-      errorMessage: mockLastEventTimeQuery[0].result.data!.source.LastEventTime.errorMessage,
-    }));
-    const wrapper = mount(
-      <TestProviders>
-        <LastEventTime indexKey={LastEventIndexKey.hosts} />
-      </TestProviders>
-    );
-
-    expect(wrapper.html()).toBe('something-invalid');
-  });
-  test('Null time string', async () => {
-    mockUseLastEventTimeQuery.mockImplementation(() => ({
-      loading: false,
-      lastSeen: null,
-      errorMessage: mockLastEventTimeQuery[0].result.data!.source.LastEventTime.errorMessage,
-    }));
-    const wrapper = mount(
-      <TestProviders>
-        <LastEventTime indexKey={LastEventIndexKey.hosts} />
-      </TestProviders>
-    );
-    expect(wrapper.html()).toContain(getEmptyValue());
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/last_event_time/index.tsx b/x-pack/plugins/siem/public/components/last_event_time/index.tsx
deleted file mode 100644
index 2493a1378e944a..00000000000000
--- a/x-pack/plugins/siem/public/components/last_event_time/index.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-/*
- * 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 { EuiIcon, EuiLoadingSpinner, EuiToolTip } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n/react';
-import React, { memo } from 'react';
-
-import { LastEventIndexKey } from '../../graphql/types';
-import { useLastEventTimeQuery } from '../../containers/events/last_event_time';
-import { getEmptyTagValue } from '../empty_value';
-import { FormattedRelativePreferenceDate } from '../formatted_date';
-
-export interface LastEventTimeProps {
-  hostName?: string;
-  indexKey: LastEventIndexKey;
-  ip?: string;
-}
-
-export const LastEventTime = memo<LastEventTimeProps>(({ hostName, indexKey, ip }) => {
-  const { loading, lastSeen, errorMessage } = useLastEventTimeQuery(
-    indexKey,
-    { hostName, ip },
-    'default'
-  );
-
-  if (errorMessage != null) {
-    return (
-      <EuiToolTip
-        position="top"
-        content={errorMessage}
-        data-test-subj="last_event_time_error"
-        aria-label="last_event_time_error"
-        id={`last_event_time_error-${indexKey}`}
-      >
-        <EuiIcon aria-describedby={`last_event_time_error-${indexKey}`} type="alert" />
-      </EuiToolTip>
-    );
-  }
-
-  return (
-    <>
-      {loading && <EuiLoadingSpinner size="m" />}
-      {!loading && lastSeen != null && new Date(lastSeen).toString() === 'Invalid Date'
-        ? lastSeen
-        : !loading &&
-          lastSeen != null && (
-            <FormattedMessage
-              id="xpack.siem.headerPage.pageSubtitle"
-              defaultMessage="Last event: {beat}"
-              values={{
-                beat: <FormattedRelativePreferenceDate value={lastSeen} />,
-              }}
-            />
-          )}
-      {!loading && lastSeen == null && getEmptyTagValue()}
-    </>
-  );
-});
-
-LastEventTime.displayName = 'LastEventTime';
diff --git a/x-pack/plugins/siem/public/components/links/index.test.tsx b/x-pack/plugins/siem/public/components/links/index.test.tsx
deleted file mode 100644
index 214c0294f2cf42..00000000000000
--- a/x-pack/plugins/siem/public/components/links/index.test.tsx
+++ /dev/null
@@ -1,563 +0,0 @@
-/*
- * 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 { mount, shallow, ShallowWrapper } from 'enzyme';
-import React from 'react';
-import { mountWithIntl } from 'test_utils/enzyme_helpers';
-
-import { encodeIpv6 } from '../../lib/helpers';
-import { useUiSetting$ } from '../../lib/kibana';
-
-import {
-  GoogleLink,
-  HostDetailsLink,
-  IPDetailsLink,
-  ReputationLink,
-  WhoIsLink,
-  CertificateFingerprintLink,
-  Ja3FingerprintLink,
-  PortOrServiceNameLink,
-  DEFAULT_NUMBER_OF_LINK,
-  ExternalLink,
-} from '.';
-
-jest.mock('../../pages/overview/events_by_dataset');
-
-jest.mock('../../lib/kibana', () => {
-  return {
-    useUiSetting$: jest.fn(),
-  };
-});
-
-describe('Custom Links', () => {
-  const hostName = 'Host Name';
-  const ipv4 = '192.0.2.255';
-  const ipv6 = '2001:db8:ffff:ffff:ffff:ffff:ffff:ffff';
-  const ipv6Encoded = encodeIpv6(ipv6);
-
-  describe('HostDetailsLink', () => {
-    test('should render valid link to Host Details with hostName as the display text', () => {
-      const wrapper = mount(<HostDetailsLink hostName={hostName} />);
-      expect(wrapper.find('EuiLink').prop('href')).toEqual(
-        `#/link-to/hosts/${encodeURIComponent(hostName)}`
-      );
-      expect(wrapper.text()).toEqual(hostName);
-    });
-
-    test('should render valid link to Host Details with child text as the display text', () => {
-      const wrapper = mount(<HostDetailsLink hostName={hostName}>{hostName}</HostDetailsLink>);
-      expect(wrapper.find('EuiLink').prop('href')).toEqual(
-        `#/link-to/hosts/${encodeURIComponent(hostName)}`
-      );
-      expect(wrapper.text()).toEqual(hostName);
-    });
-  });
-
-  describe('IPDetailsLink', () => {
-    test('should render valid link to IP Details with ipv4 as the display text', () => {
-      const wrapper = mount(<IPDetailsLink ip={ipv4} />);
-      expect(wrapper.find('EuiLink').prop('href')).toEqual(
-        `#/link-to/network/ip/${encodeURIComponent(ipv4)}/source`
-      );
-      expect(wrapper.text()).toEqual(ipv4);
-    });
-
-    test('should render valid link to IP Details with child text as the display text', () => {
-      const wrapper = mount(<IPDetailsLink ip={ipv4}>{hostName}</IPDetailsLink>);
-      expect(wrapper.find('EuiLink').prop('href')).toEqual(
-        `#/link-to/network/ip/${encodeURIComponent(ipv4)}/source`
-      );
-      expect(wrapper.text()).toEqual(hostName);
-    });
-
-    test('should render valid link to IP Details with ipv6 as the display text', () => {
-      const wrapper = mount(<IPDetailsLink ip={ipv6} />);
-      expect(wrapper.find('EuiLink').prop('href')).toEqual(
-        `#/link-to/network/ip/${encodeURIComponent(ipv6Encoded)}/source`
-      );
-      expect(wrapper.text()).toEqual(ipv6);
-    });
-  });
-
-  describe('GoogleLink', () => {
-    test('it renders text passed in as value', () => {
-      const wrapper = mountWithIntl(
-        <GoogleLink link={'http://example.com/'}>{'Example Link'}</GoogleLink>
-      );
-      expect(wrapper.text()).toEqual('Example Link');
-    });
-
-    test('it renders props passed in as link', () => {
-      const wrapper = mountWithIntl(
-        <GoogleLink link={'http://example.com/'}>{'Example Link'}</GoogleLink>
-      );
-      expect(wrapper.find('a').prop('href')).toEqual(
-        'https://www.google.com/search?q=http%3A%2F%2Fexample.com%2F'
-      );
-    });
-
-    test("it encodes <script>alert('XSS')</script>", () => {
-      const wrapper = mountWithIntl(
-        <GoogleLink link={"http://example.com?q=<script>alert('XSS')</script>"}>
-          {'Example Link'}
-        </GoogleLink>
-      );
-      expect(wrapper.find('a').prop('href')).toEqual(
-        "https://www.google.com/search?q=http%3A%2F%2Fexample.com%3Fq%3D%3Cscript%3Ealert('XSS')%3C%2Fscript%3E"
-      );
-    });
-  });
-
-  describe('External Link', () => {
-    const mockLink = 'https://www.virustotal.com/gui/search/';
-    const mockLinkName = 'Link';
-    let wrapper: ShallowWrapper;
-
-    describe('render', () => {
-      beforeAll(() => {
-        wrapper = shallow(
-          <ExternalLink url={mockLink} idx={0} allItemsLimit={5} overflowIndexStart={5}>
-            {mockLinkName}
-          </ExternalLink>
-        );
-      });
-
-      test('it renders tooltip', () => {
-        expect(wrapper.find('[data-test-subj="externalLinkTooltip"]').exists()).toBeTruthy();
-      });
-
-      test('it renders ExternalLinkIcon', () => {
-        expect(wrapper.find('[data-test-subj="externalLinkIcon"]').exists()).toBeTruthy();
-      });
-
-      test('it renders correct url', () => {
-        expect(wrapper.find('[data-test-subj="externalLink"]').prop('href')).toEqual(mockLink);
-      });
-
-      test('it renders comma if id is given', () => {
-        expect(wrapper.find('[data-test-subj="externalLinkComma"]').exists()).toBeTruthy();
-      });
-    });
-
-    describe('not render', () => {
-      test('it should not render if childen prop is not given', () => {
-        wrapper = shallow(
-          <ExternalLink url={mockLink} idx={4} allItemsLimit={5} overflowIndexStart={5} />
-        );
-        expect(wrapper.find('[data-test-subj="externalLinkTooltip"]').exists()).toBeFalsy();
-      });
-
-      test('it should not render if url prop is not given', () => {
-        wrapper = shallow(
-          <ExternalLink url={''} idx={4} allItemsLimit={5} overflowIndexStart={5} />
-        );
-        expect(wrapper.find('[data-test-subj="externalLinkTooltip"]').exists()).toBeFalsy();
-      });
-
-      test('it should not render if url prop is invalid', () => {
-        wrapper = shallow(
-          <ExternalLink url={'xxx'} idx={4} allItemsLimit={5} overflowIndexStart={5} />
-        );
-        expect(wrapper.find('[data-test-subj="externalLinkTooltip"]').exists()).toBeFalsy();
-      });
-
-      test('it should not render comma if id is not given', () => {
-        wrapper = shallow(
-          <ExternalLink url={mockLink} allItemsLimit={5} overflowIndexStart={5}>
-            {mockLinkName}
-          </ExternalLink>
-        );
-        expect(wrapper.find('[data-test-subj="externalLinkComma"]').exists()).toBeFalsy();
-      });
-
-      test('it should not render comma for the last item', () => {
-        wrapper = shallow(
-          <ExternalLink url={mockLink} idx={4} allItemsLimit={5} overflowIndexStart={5}>
-            {mockLinkName}
-          </ExternalLink>
-        );
-        expect(wrapper.find('[data-test-subj="externalLinkComma"]').exists()).toBeFalsy();
-      });
-    });
-
-    describe.each<[number, number, number, boolean]>([
-      [0, 2, 5, true],
-      [1, 2, 5, false],
-      [2, 2, 5, false],
-      [3, 2, 5, false],
-      [4, 2, 5, false],
-      [5, 2, 5, false],
-    ])(
-      'renders Comma when overflowIndex is smaller than allItems limit',
-      (idx, overflowIndexStart, allItemsLimit, showComma) => {
-        beforeAll(() => {
-          wrapper = shallow(
-            <ExternalLink
-              url={mockLink}
-              idx={idx}
-              allItemsLimit={allItemsLimit}
-              overflowIndexStart={overflowIndexStart}
-            >
-              {mockLinkName}
-            </ExternalLink>
-          );
-        });
-
-        test(`should render Comma if current id (${idx}) is smaller than the index of last visible item`, () => {
-          expect(wrapper.find('[data-test-subj="externalLinkComma"]').exists()).toEqual(showComma);
-        });
-      }
-    );
-
-    describe.each<[number, number, number, boolean]>([
-      [0, 5, 4, true],
-      [1, 5, 4, true],
-      [2, 5, 4, true],
-      [3, 5, 4, false],
-      [4, 5, 4, false],
-      [5, 5, 4, false],
-    ])(
-      'When overflowIndex is grater than allItems limit',
-      (idx, overflowIndexStart, allItemsLimit, showComma) => {
-        beforeAll(() => {
-          wrapper = shallow(
-            <ExternalLink
-              url={mockLink}
-              idx={idx}
-              allItemsLimit={allItemsLimit}
-              overflowIndexStart={overflowIndexStart}
-            >
-              {mockLinkName}
-            </ExternalLink>
-          );
-        });
-
-        test(`Current item (${idx}) should render Comma execpt the last item`, () => {
-          expect(wrapper.find('[data-test-subj="externalLinkComma"]').exists()).toEqual(showComma);
-        });
-      }
-    );
-
-    describe.each<[number, number, number, boolean]>([
-      [0, 5, 5, true],
-      [1, 5, 5, true],
-      [2, 5, 5, true],
-      [3, 5, 5, true],
-      [4, 5, 5, false],
-      [5, 5, 5, false],
-    ])(
-      'when overflowIndex equals to allItems limit',
-      (idx, overflowIndexStart, allItemsLimit, showComma) => {
-        beforeAll(() => {
-          wrapper = shallow(
-            <ExternalLink
-              url={mockLink}
-              idx={idx}
-              allItemsLimit={allItemsLimit}
-              overflowIndexStart={overflowIndexStart}
-            >
-              {mockLinkName}
-            </ExternalLink>
-          );
-        });
-
-        test(`Current item (${idx}) should render Comma correctly`, () => {
-          expect(wrapper.find('[data-test-subj="externalLinkComma"]').exists()).toEqual(showComma);
-        });
-      }
-    );
-  });
-
-  describe('ReputationLink', () => {
-    const mockCustomizedReputationLinks = [
-      { name: 'Link 1', url_template: 'https://www.virustotal.com/gui/search/{{ip}}' },
-      {
-        name: 'Link 2',
-        url_template: 'https://talosintelligence.com/reputation_center/lookup?search={{ip}}',
-      },
-      { name: 'Link 3', url_template: 'https://www.virustotal.com/gui/search/{{ip}}' },
-      {
-        name: 'Link 4',
-        url_template: 'https://talosintelligence.com/reputation_center/lookup?search={{ip}}',
-      },
-      { name: 'Link 5', url_template: 'https://www.virustotal.com/gui/search/{{ip}}' },
-      {
-        name: 'Link 6',
-        url_template: 'https://talosintelligence.com/reputation_center/lookup?search={{ip}}',
-      },
-    ];
-    const mockDefaultReputationLinks = mockCustomizedReputationLinks.slice(0, 2);
-
-    describe('links property', () => {
-      beforeEach(() => {
-        (useUiSetting$ as jest.Mock).mockReset();
-        (useUiSetting$ as jest.Mock).mockReturnValue([mockDefaultReputationLinks]);
-      });
-
-      test('it renders default link text', () => {
-        const wrapper = shallow(<ReputationLink domain={'192.0.2.0'} />);
-        wrapper.find('[data-test-subj="externalLink"]').forEach((node, idx) => {
-          expect(node.at(idx).text()).toEqual(mockDefaultReputationLinks[idx].name);
-        });
-      });
-
-      test('it renders customized link text', () => {
-        (useUiSetting$ as jest.Mock).mockReset();
-        (useUiSetting$ as jest.Mock).mockReturnValue([mockCustomizedReputationLinks]);
-        const wrapper = shallow(<ReputationLink domain={'192.0.2.0'} />);
-        wrapper.find('[data-test-subj="externalLink"]').forEach((node, idx) => {
-          expect(node.at(idx).text()).toEqual(mockCustomizedReputationLinks[idx].name);
-        });
-      });
-
-      test('it renders correct href', () => {
-        const wrapper = shallow(<ReputationLink domain={'192.0.2.0'} />);
-        wrapper.find('[data-test-subj="externalLink"]').forEach((node, idx) => {
-          expect(node.prop('href')).toEqual(
-            mockDefaultReputationLinks[idx].url_template.replace('{{ip}}', '192.0.2.0')
-          );
-        });
-      });
-    });
-
-    describe('number of links', () => {
-      beforeAll(() => {
-        (useUiSetting$ as jest.Mock).mockReset();
-        (useUiSetting$ as jest.Mock).mockReturnValue([mockCustomizedReputationLinks]);
-      });
-
-      afterEach(() => {
-        (useUiSetting$ as jest.Mock).mockClear();
-      });
-
-      test('it renders correct number of links by default', () => {
-        const wrapper = mountWithIntl(<ReputationLink domain={'192.0.2.0'} />);
-        expect(wrapper.find('[data-test-subj="externalLinkComponent"]')).toHaveLength(
-          DEFAULT_NUMBER_OF_LINK
-        );
-      });
-
-      test('it renders correct number of tooltips by default', () => {
-        const wrapper = mountWithIntl(<ReputationLink domain={'192.0.2.0'} />);
-        expect(wrapper.find('[data-test-subj="externalLinkTooltip"]')).toHaveLength(
-          DEFAULT_NUMBER_OF_LINK
-        );
-      });
-
-      test('it renders correct number of visible link', () => {
-        (useUiSetting$ as jest.Mock).mockReset();
-        (useUiSetting$ as jest.Mock).mockReturnValue([mockCustomizedReputationLinks]);
-
-        const wrapper = mountWithIntl(
-          <ReputationLink domain={'192.0.2.0'} overflowIndexStart={1} />
-        );
-        expect(wrapper.find('[data-test-subj="externalLinkComponent"]')).toHaveLength(1);
-      });
-
-      test('it renders correct number of tooltips for visible links', () => {
-        (useUiSetting$ as jest.Mock).mockReset();
-        (useUiSetting$ as jest.Mock).mockReturnValue([mockCustomizedReputationLinks]);
-
-        const wrapper = mountWithIntl(
-          <ReputationLink domain={'192.0.2.0'} overflowIndexStart={1} />
-        );
-        expect(wrapper.find('[data-test-subj="externalLinkTooltip"]')).toHaveLength(1);
-      });
-    });
-
-    describe('invalid customized links', () => {
-      const mockInvalidLinksEmptyObj = [{}];
-      const mockInvalidLinksNoName = [
-        { url_template: 'https://talosintelligence.com/reputation_center/lookup?search={{ip}}' },
-      ];
-      const mockInvalidLinksNoUrl = [{ name: 'Link 1' }];
-      const mockInvalidUrl = [{ name: 'Link 1', url_template: "<script>alert('XSS')</script>" }];
-      afterEach(() => {
-        (useUiSetting$ as jest.Mock).mockReset();
-      });
-
-      test('it filters empty object', () => {
-        (useUiSetting$ as jest.Mock).mockReturnValue([mockInvalidLinksEmptyObj]);
-
-        const wrapper = mountWithIntl(
-          <ReputationLink domain={'192.0.2.0'} overflowIndexStart={1} />
-        );
-        expect(wrapper.find('[data-test-subj="externalLink"]')).toHaveLength(0);
-      });
-
-      test('it filters object without name property', () => {
-        (useUiSetting$ as jest.Mock).mockReturnValue([mockInvalidLinksNoName]);
-
-        const wrapper = mountWithIntl(
-          <ReputationLink domain={'192.0.2.0'} overflowIndexStart={1} />
-        );
-        expect(wrapper.find('[data-test-subj="externalLink"]')).toHaveLength(0);
-      });
-
-      test('it filters object without url_template property', () => {
-        (useUiSetting$ as jest.Mock).mockReturnValue([mockInvalidLinksNoUrl]);
-
-        const wrapper = mountWithIntl(
-          <ReputationLink domain={'192.0.2.0'} overflowIndexStart={1} />
-        );
-        expect(wrapper.find('[data-test-subj="externalLink"]')).toHaveLength(0);
-      });
-
-      test('it filters object with invalid url', () => {
-        (useUiSetting$ as jest.Mock).mockReturnValue([mockInvalidUrl]);
-
-        const wrapper = mountWithIntl(
-          <ReputationLink domain={'192.0.2.0'} overflowIndexStart={1} />
-        );
-        expect(wrapper.find('[data-test-subj="externalLink"]')).toHaveLength(0);
-      });
-    });
-
-    describe('external icon', () => {
-      beforeAll(() => {
-        (useUiSetting$ as jest.Mock).mockReset();
-        (useUiSetting$ as jest.Mock).mockReturnValue([mockCustomizedReputationLinks]);
-      });
-
-      afterEach(() => {
-        (useUiSetting$ as jest.Mock).mockClear();
-      });
-
-      test('it renders correct number of external icons by default', () => {
-        const wrapper = mountWithIntl(<ReputationLink domain={'192.0.2.0'} />);
-        expect(wrapper.find('[data-test-subj="externalLinkIcon"]')).toHaveLength(5);
-      });
-
-      test('it renders correct number of external icons', () => {
-        const wrapper = mountWithIntl(
-          <ReputationLink domain={'192.0.2.0'} overflowIndexStart={1} />
-        );
-        expect(wrapper.find('[data-test-subj="externalLinkIcon"]')).toHaveLength(1);
-      });
-    });
-  });
-
-  describe('WhoisLink', () => {
-    test('it renders ip passed in as domain', () => {
-      const wrapper = mountWithIntl(<WhoIsLink domain={'192.0.2.0'}>{'Example Link'}</WhoIsLink>);
-      expect(wrapper.text()).toEqual('Example Link');
-    });
-
-    test('it renders correct href', () => {
-      const wrapper = mountWithIntl(<WhoIsLink domain={'192.0.2.0'}>{'Example Link'} </WhoIsLink>);
-      expect(wrapper.find('a').prop('href')).toEqual('https://www.iana.org/whois?q=192.0.2.0');
-    });
-
-    test("it encodes <script>alert('XSS')</script>", () => {
-      const wrapper = mountWithIntl(
-        <WhoIsLink domain={"<script>alert('XSS')</script>"}>{'Example Link'}</WhoIsLink>
-      );
-      expect(wrapper.find('a').prop('href')).toEqual(
-        "https://www.iana.org/whois?q=%3Cscript%3Ealert('XSS')%3C%2Fscript%3E"
-      );
-    });
-  });
-
-  describe('CertificateFingerprintLink', () => {
-    test('it renders link text', () => {
-      const wrapper = mountWithIntl(
-        <CertificateFingerprintLink certificateFingerprint={'abcd'}>
-          {'Example Link'}
-        </CertificateFingerprintLink>
-      );
-      expect(wrapper.text()).toEqual('Example Link');
-    });
-
-    test('it renders correct href', () => {
-      const wrapper = mountWithIntl(
-        <CertificateFingerprintLink certificateFingerprint={'abcd'}>
-          {'Example Link'}
-        </CertificateFingerprintLink>
-      );
-      expect(wrapper.find('a').prop('href')).toEqual(
-        'https://sslbl.abuse.ch/ssl-certificates/sha1/abcd'
-      );
-    });
-
-    test("it encodes <script>alert('XSS')</script>", () => {
-      const wrapper = mountWithIntl(
-        <CertificateFingerprintLink certificateFingerprint={"<script>alert('XSS')</script>"}>
-          {'Example Link'}
-        </CertificateFingerprintLink>
-      );
-      expect(wrapper.find('a').prop('href')).toEqual(
-        "https://sslbl.abuse.ch/ssl-certificates/sha1/%3Cscript%3Ealert('XSS')%3C%2Fscript%3E"
-      );
-    });
-  });
-
-  describe('Ja3FingerprintLink', () => {
-    test('it renders link text', () => {
-      const wrapper = mountWithIntl(
-        <Ja3FingerprintLink ja3Fingerprint={'abcd'}>{'Example Link'}</Ja3FingerprintLink>
-      );
-      expect(wrapper.text()).toEqual('Example Link');
-    });
-
-    test('it renders correct href', () => {
-      const wrapper = mountWithIntl(
-        <Ja3FingerprintLink ja3Fingerprint={'abcd'}>{'Example Link'}</Ja3FingerprintLink>
-      );
-      expect(wrapper.find('a').prop('href')).toEqual(
-        'https://sslbl.abuse.ch/ja3-fingerprints/abcd'
-      );
-    });
-
-    test("it encodes <script>alert('XSS')</script>", () => {
-      const wrapper = mountWithIntl(
-        <Ja3FingerprintLink ja3Fingerprint={"<script>alert('XSS')</script>"}>
-          {'Example Link'}
-        </Ja3FingerprintLink>
-      );
-      expect(wrapper.find('a').prop('href')).toEqual(
-        "https://sslbl.abuse.ch/ja3-fingerprints/%3Cscript%3Ealert('XSS')%3C%2Fscript%3E"
-      );
-    });
-  });
-
-  describe('PortOrServiceNameLink', () => {
-    test('it renders link text', () => {
-      const wrapper = mountWithIntl(
-        <PortOrServiceNameLink portOrServiceName={443}>{'Example Link'}</PortOrServiceNameLink>
-      );
-      expect(wrapper.text()).toEqual('Example Link');
-    });
-
-    test('it renders correct href when port is a number', () => {
-      const wrapper = mountWithIntl(
-        <PortOrServiceNameLink portOrServiceName={443}>{'Example Link'}</PortOrServiceNameLink>
-      );
-      expect(wrapper.find('a').prop('href')).toEqual(
-        'https://www.iana.org/assignments/service-names-port-numbers/service-names-port-numbers.xhtml?search=443'
-      );
-    });
-
-    test('it renders correct href when port is a string', () => {
-      const wrapper = mountWithIntl(
-        <PortOrServiceNameLink portOrServiceName={'80'}>{'Example Link'}</PortOrServiceNameLink>
-      );
-      expect(wrapper.find('a').prop('href')).toEqual(
-        'https://www.iana.org/assignments/service-names-port-numbers/service-names-port-numbers.xhtml?search=80'
-      );
-    });
-
-    test("it encodes <script>alert('XSS')</script>", () => {
-      const wrapper = mountWithIntl(
-        <PortOrServiceNameLink portOrServiceName={"<script>alert('XSS')</script>"}>
-          {'Example Link'}
-        </PortOrServiceNameLink>
-      );
-      expect(wrapper.find('a').prop('href')).toEqual(
-        "https://www.iana.org/assignments/service-names-port-numbers/service-names-port-numbers.xhtml?search=%3Cscript%3Ealert('XSS')%3C%2Fscript%3E"
-      );
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/links/index.tsx b/x-pack/plugins/siem/public/components/links/index.tsx
deleted file mode 100644
index 6d473f47217105..00000000000000
--- a/x-pack/plugins/siem/public/components/links/index.tsx
+++ /dev/null
@@ -1,312 +0,0 @@
-/*
- * 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 { EuiLink, EuiToolTip, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import React, { useMemo } from 'react';
-import { isNil } from 'lodash/fp';
-import styled from 'styled-components';
-
-import { IP_REPUTATION_LINKS_SETTING } from '../../../common/constants';
-import {
-  DefaultFieldRendererOverflow,
-  DEFAULT_MORE_MAX_HEIGHT,
-} from '../field_renderers/field_renderers';
-import { encodeIpv6 } from '../../lib/helpers';
-import {
-  getCaseDetailsUrl,
-  getHostDetailsUrl,
-  getIPDetailsUrl,
-  getCreateCaseUrl,
-} from '../link_to';
-import { FlowTarget, FlowTargetSourceDest } from '../../graphql/types';
-import { useUiSetting$ } from '../../lib/kibana';
-import { isUrlInvalid } from '../../pages/detection_engine/rules/components/step_about_rule/helpers';
-import { ExternalLinkIcon } from '../external_link_icon';
-import { navTabs } from '../../pages/home/home_navigations';
-import { useGetUrlSearch } from '../navigation/use_get_url_search';
-
-import * as i18n from './translations';
-
-export const DEFAULT_NUMBER_OF_LINK = 5;
-
-// Internal Links
-const HostDetailsLinkComponent: React.FC<{ children?: React.ReactNode; hostName: string }> = ({
-  children,
-  hostName,
-}) => (
-  <EuiLink href={getHostDetailsUrl(encodeURIComponent(hostName))}>
-    {children ? children : hostName}
-  </EuiLink>
-);
-
-const whitelistUrlSchemes = ['http://', 'https://'];
-export const ExternalLink = React.memo<{
-  url: string;
-  children?: React.ReactNode;
-  idx?: number;
-  overflowIndexStart?: number;
-  allItemsLimit?: number;
-}>(
-  ({
-    url,
-    children,
-    idx,
-    overflowIndexStart = DEFAULT_NUMBER_OF_LINK,
-    allItemsLimit = DEFAULT_NUMBER_OF_LINK,
-  }) => {
-    const lastVisibleItemIndex = overflowIndexStart - 1;
-    const lastItemIndex = allItemsLimit - 1;
-    const lastIndexToShow = Math.max(0, Math.min(lastVisibleItemIndex, lastItemIndex));
-    const inWhitelist = whitelistUrlSchemes.some(scheme => url.indexOf(scheme) === 0);
-    return url && inWhitelist && !isUrlInvalid(url) && children ? (
-      <EuiToolTip content={url} position="top" data-test-subj="externalLinkTooltip">
-        <EuiLink href={url} target="_blank" rel="noopener" data-test-subj="externalLink">
-          {children}
-          <ExternalLinkIcon data-test-subj="externalLinkIcon" />
-          {!isNil(idx) && idx < lastIndexToShow && <Comma data-test-subj="externalLinkComma" />}
-        </EuiLink>
-      </EuiToolTip>
-    ) : null;
-  }
-);
-
-ExternalLink.displayName = 'ExternalLink';
-
-export const HostDetailsLink = React.memo(HostDetailsLinkComponent);
-
-const IPDetailsLinkComponent: React.FC<{
-  children?: React.ReactNode;
-  ip: string;
-  flowTarget?: FlowTarget | FlowTargetSourceDest;
-}> = ({ children, ip, flowTarget = FlowTarget.source }) => (
-  <EuiLink href={`${getIPDetailsUrl(encodeURIComponent(encodeIpv6(ip)), flowTarget)}`}>
-    {children ? children : ip}
-  </EuiLink>
-);
-
-export const IPDetailsLink = React.memo(IPDetailsLinkComponent);
-
-const CaseDetailsLinkComponent: React.FC<{
-  children?: React.ReactNode;
-  detailName: string;
-  title?: string;
-}> = ({ children, detailName, title }) => {
-  const search = useGetUrlSearch(navTabs.case);
-
-  return (
-    <EuiLink
-      href={getCaseDetailsUrl({ id: detailName, search })}
-      data-test-subj="case-details-link"
-      aria-label={i18n.CASE_DETAILS_LINK_ARIA(title ?? detailName)}
-    >
-      {children ? children : detailName}
-    </EuiLink>
-  );
-};
-export const CaseDetailsLink = React.memo(CaseDetailsLinkComponent);
-CaseDetailsLink.displayName = 'CaseDetailsLink';
-
-export const CreateCaseLink = React.memo<{ children: React.ReactNode }>(({ children }) => {
-  const search = useGetUrlSearch(navTabs.case);
-  return <EuiLink href={getCreateCaseUrl(search)}>{children}</EuiLink>;
-});
-
-CreateCaseLink.displayName = 'CreateCaseLink';
-
-// External Links
-export const GoogleLink = React.memo<{ children?: React.ReactNode; link: string }>(
-  ({ children, link }) => (
-    <ExternalLink url={`https://www.google.com/search?q=${encodeURIComponent(link)}`}>
-      {children ? children : link}
-    </ExternalLink>
-  )
-);
-
-GoogleLink.displayName = 'GoogleLink';
-
-export const PortOrServiceNameLink = React.memo<{
-  children?: React.ReactNode;
-  portOrServiceName: number | string;
-}>(({ children, portOrServiceName }) => (
-  <EuiLink
-    data-test-subj="port-or-service-name-link"
-    href={`https://www.iana.org/assignments/service-names-port-numbers/service-names-port-numbers.xhtml?search=${encodeURIComponent(
-      String(portOrServiceName)
-    )}`}
-    target="_blank"
-  >
-    {children ? children : portOrServiceName}
-  </EuiLink>
-));
-
-PortOrServiceNameLink.displayName = 'PortOrServiceNameLink';
-
-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 = React.memo<{
-  children?: React.ReactNode;
-  certificateFingerprint: string;
-}>(({ children, certificateFingerprint }) => (
-  <EuiLink
-    data-test-subj="certificate-fingerprint-link"
-    href={`https://sslbl.abuse.ch/ssl-certificates/sha1/${encodeURIComponent(
-      certificateFingerprint
-    )}`}
-    target="_blank"
-  >
-    {children ? children : certificateFingerprint}
-  </EuiLink>
-));
-
-CertificateFingerprintLink.displayName = 'CertificateFingerprintLink';
-
-enum DefaultReputationLink {
-  'virustotal.com' = 'virustotal.com',
-  'talosIntelligence.com' = 'talosIntelligence.com',
-}
-
-export interface ReputationLinkSetting {
-  name: string;
-  url_template: string;
-}
-
-function isDefaultReputationLink(name: string): name is DefaultReputationLink {
-  return (
-    name === DefaultReputationLink['virustotal.com'] ||
-    name === DefaultReputationLink['talosIntelligence.com']
-  );
-}
-const isReputationLink = (
-  rowItem: string | ReputationLinkSetting
-): rowItem is ReputationLinkSetting =>
-  (rowItem as ReputationLinkSetting).url_template !== undefined &&
-  (rowItem as ReputationLinkSetting).name !== undefined;
-
-export const Comma = styled('span')`
-  margin-right: 5px;
-  margin-left: 5px;
-  &::after {
-    content: ' ,';
-  }
-`;
-
-Comma.displayName = 'Comma';
-
-const defaultNameMapping: Record<DefaultReputationLink, string> = {
-  [DefaultReputationLink['virustotal.com']]: i18n.VIEW_VIRUS_TOTAL,
-  [DefaultReputationLink['talosIntelligence.com']]: i18n.VIEW_TALOS_INTELLIGENCE,
-};
-
-const ReputationLinkComponent: React.FC<{
-  overflowIndexStart?: number;
-  allItemsLimit?: number;
-  showDomain?: boolean;
-  domain: string;
-  direction?: 'row' | 'column';
-}> = ({
-  overflowIndexStart = DEFAULT_NUMBER_OF_LINK,
-  allItemsLimit = DEFAULT_NUMBER_OF_LINK,
-  showDomain = false,
-  domain,
-  direction = 'row',
-}) => {
-  const [ipReputationLinksSetting] = useUiSetting$<ReputationLinkSetting[]>(
-    IP_REPUTATION_LINKS_SETTING
-  );
-
-  const ipReputationLinks: ReputationLinkSetting[] = useMemo(
-    () =>
-      ipReputationLinksSetting
-        ?.slice(0, allItemsLimit)
-        .filter(
-          ({ url_template, name }) =>
-            !isNil(url_template) && !isNil(name) && !isUrlInvalid(url_template)
-        )
-        .map(({ name, url_template }: { name: string; url_template: string }) => ({
-          name: isDefaultReputationLink(name) ? defaultNameMapping[name] : name,
-          url_template: url_template.replace(`{{ip}}`, encodeURIComponent(domain)),
-        })),
-    [ipReputationLinksSetting, domain, defaultNameMapping, allItemsLimit]
-  );
-
-  return ipReputationLinks?.length > 0 ? (
-    <section>
-      <EuiFlexGroup
-        gutterSize="none"
-        justifyContent="center"
-        direction={direction}
-        alignItems="center"
-        data-test-subj="reputationLinkGroup"
-      >
-        <EuiFlexItem grow={true}>
-          {ipReputationLinks
-            ?.slice(0, overflowIndexStart)
-            .map(({ name, url_template: urlTemplate }: ReputationLinkSetting, id) => (
-              <ExternalLink
-                allItemsLimit={ipReputationLinks.length}
-                idx={id}
-                overflowIndexStart={overflowIndexStart}
-                url={urlTemplate}
-                data-test-subj="externalLinkComponent"
-                key={`reputationLink-${id}`}
-              >
-                <>{showDomain ? domain : name ?? domain}</>
-              </ExternalLink>
-            ))}
-        </EuiFlexItem>
-
-        <EuiFlexItem grow={false}>
-          <DefaultFieldRendererOverflow
-            rowItems={ipReputationLinks}
-            idPrefix="moreReputationLink"
-            render={rowItem => {
-              return (
-                isReputationLink(rowItem) && (
-                  <ExternalLink
-                    url={rowItem.url_template}
-                    overflowIndexStart={overflowIndexStart}
-                    allItemsLimit={allItemsLimit}
-                  >
-                    <>{rowItem.name ?? domain}</>
-                  </ExternalLink>
-                )
-              );
-            }}
-            moreMaxHeight={DEFAULT_MORE_MAX_HEIGHT}
-            overflowIndexStart={overflowIndexStart}
-          />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </section>
-  ) : null;
-};
-
-ReputationLinkComponent.displayName = 'ReputationLinkComponent';
-
-export const ReputationLink = React.memo(ReputationLinkComponent);
-
-export const WhoIsLink = React.memo<{ children?: React.ReactNode; domain: string }>(
-  ({ children, domain }) => (
-    <ExternalLink url={`https://www.iana.org/whois?q=${encodeURIComponent(domain)}`}>
-      {children ? children : domain}
-    </ExternalLink>
-  )
-);
-
-WhoIsLink.displayName = 'WhoIsLink';
diff --git a/x-pack/plugins/siem/public/components/links/translations.ts b/x-pack/plugins/siem/public/components/links/translations.ts
deleted file mode 100644
index bed867cd5bf504..00000000000000
--- a/x-pack/plugins/siem/public/components/links/translations.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/*
- * 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 { i18n } from '@kbn/i18n';
-
-export * from '../page/network/ip_overview/translations';
-
-export const CASE_DETAILS_LINK_ARIA = (detailName: string) =>
-  i18n.translate('xpack.siem.case.caseTable.caseDetailsLinkAria', {
-    values: { detailName },
-    defaultMessage: 'click to visit case with title {detailName}',
-  });
diff --git a/x-pack/plugins/siem/public/components/markdown_editor/form.tsx b/x-pack/plugins/siem/public/components/markdown_editor/form.tsx
deleted file mode 100644
index 17c321b15418c9..00000000000000
--- a/x-pack/plugins/siem/public/components/markdown_editor/form.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-/*
- * 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 { EuiFormRow } from '@elastic/eui';
-import React, { useCallback } from 'react';
-
-import { FieldHook, getFieldValidityAndErrorMessage } from '../../shared_imports';
-import { CursorPosition, MarkdownEditor } from '.';
-
-interface IMarkdownEditorForm {
-  bottomRightContent?: React.ReactNode;
-  dataTestSubj: string;
-  field: FieldHook;
-  idAria: string;
-  isDisabled: boolean;
-  onCursorPositionUpdate?: (cursorPosition: CursorPosition) => void;
-  placeholder?: string;
-  topRightContent?: React.ReactNode;
-}
-export const MarkdownEditorForm = ({
-  bottomRightContent,
-  dataTestSubj,
-  field,
-  idAria,
-  isDisabled = false,
-  onCursorPositionUpdate,
-  placeholder,
-  topRightContent,
-}: IMarkdownEditorForm) => {
-  const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
-
-  const handleContentChange = useCallback(
-    (newContent: string) => {
-      field.setValue(newContent);
-    },
-    [field]
-  );
-
-  return (
-    <EuiFormRow
-      data-test-subj={dataTestSubj}
-      describedByIds={idAria ? [idAria] : undefined}
-      error={errorMessage}
-      fullWidth
-      helpText={field.helpText}
-      isInvalid={isInvalid}
-      label={field.label}
-      labelAppend={field.labelAppend}
-    >
-      <MarkdownEditor
-        bottomRightContent={bottomRightContent}
-        content={field.value as string}
-        isDisabled={isDisabled}
-        onChange={handleContentChange}
-        onCursorPositionUpdate={onCursorPositionUpdate}
-        placeholder={placeholder}
-        topRightContent={topRightContent}
-      />
-    </EuiFormRow>
-  );
-};
diff --git a/x-pack/plugins/siem/public/components/matrix_histogram/index.test.tsx b/x-pack/plugins/siem/public/components/matrix_histogram/index.test.tsx
deleted file mode 100644
index 3b8a43a0f395a8..00000000000000
--- a/x-pack/plugins/siem/public/components/matrix_histogram/index.test.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-/*
- * 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.
- */
-
-/* eslint-disable react/display-name */
-
-import { mount, ReactWrapper } from 'enzyme';
-import React from 'react';
-
-import { MatrixHistogram } from '.';
-import { useQuery } from '../../containers/matrix_histogram';
-import { HistogramType } from '../../graphql/types';
-jest.mock('../../lib/kibana');
-
-jest.mock('./matrix_loader', () => {
-  return {
-    MatrixLoader: () => {
-      return <div className="matrixLoader" />;
-    },
-  };
-});
-
-jest.mock('../header_section', () => {
-  return {
-    HeaderSection: () => <div className="headerSection" />,
-  };
-});
-
-jest.mock('../charts/barchart', () => {
-  return {
-    BarChart: () => <div className="barchart" />,
-  };
-});
-
-jest.mock('../../containers/matrix_histogram', () => {
-  return {
-    useQuery: jest.fn(),
-  };
-});
-
-jest.mock('../../components/matrix_histogram/utils', () => {
-  return {
-    getBarchartConfigs: jest.fn(),
-    getCustomChartData: jest.fn().mockReturnValue(true),
-  };
-});
-
-describe('Matrix Histogram Component', () => {
-  let wrapper: ReactWrapper;
-
-  const mockMatrixOverTimeHistogramProps = {
-    defaultIndex: ['defaultIndex'],
-    defaultStackByOption: { text: 'text', value: 'value' },
-    endDate: new Date('2019-07-18T20:00:00.000Z').valueOf(),
-    errorMessage: 'error',
-    histogramType: HistogramType.alerts,
-    id: 'mockId',
-    isInspected: false,
-    isPtrIncluded: false,
-    setQuery: jest.fn(),
-    skip: false,
-    sourceId: 'default',
-    stackByField: 'mockStackByField',
-    stackByOptions: [{ text: 'text', value: 'value' }],
-    startDate: new Date('2019-07-18T19:00: 00.000Z').valueOf(),
-    subtitle: 'mockSubtitle',
-    totalCount: -1,
-    title: 'mockTitle',
-    dispatchSetAbsoluteRangeDatePicker: jest.fn(),
-  };
-
-  beforeAll(() => {
-    (useQuery as jest.Mock).mockReturnValue({
-      data: null,
-      loading: false,
-      inspect: false,
-      totalCount: null,
-    });
-    wrapper = mount(<MatrixHistogram {...mockMatrixOverTimeHistogramProps} />);
-  });
-  describe('on initial load', () => {
-    test('it renders MatrixLoader', () => {
-      expect(wrapper.html()).toMatchSnapshot();
-      expect(wrapper.find('MatrixLoader').exists()).toBe(true);
-    });
-  });
-
-  describe('spacer', () => {
-    test('it renders a spacer by default', () => {
-      expect(wrapper.find('[data-test-subj="spacer"]').exists()).toBe(true);
-    });
-
-    test('it does NOT render a spacer when showSpacer is false', () => {
-      wrapper = mount(<MatrixHistogram {...mockMatrixOverTimeHistogramProps} showSpacer={false} />);
-      expect(wrapper.find('[data-test-subj="spacer"]').exists()).toBe(false);
-    });
-  });
-
-  describe('not initial load', () => {
-    beforeAll(() => {
-      (useQuery as jest.Mock).mockReturnValue({
-        data: [
-          { x: 1, y: 2, g: 'g1' },
-          { x: 2, y: 4, g: 'g1' },
-          { x: 3, y: 6, g: 'g1' },
-          { x: 1, y: 1, g: 'g2' },
-          { x: 2, y: 3, g: 'g2' },
-          { x: 3, y: 5, g: 'g2' },
-        ],
-        loading: false,
-        inspect: false,
-        totalCount: 1,
-      });
-      wrapper.setProps({ endDate: 100 });
-      wrapper.update();
-    });
-    test('it renders no MatrixLoader', () => {
-      expect(wrapper.html()).toMatchSnapshot();
-      expect(wrapper.find(`MatrixLoader`).exists()).toBe(false);
-    });
-
-    test('it shows BarChart if data available', () => {
-      expect(wrapper.find(`.barchart`).exists()).toBe(true);
-    });
-  });
-
-  describe('select dropdown', () => {
-    test('should be hidden if only one option is provided', () => {
-      expect(wrapper.find('EuiSelect').exists()).toBe(false);
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/matrix_histogram/index.tsx b/x-pack/plugins/siem/public/components/matrix_histogram/index.tsx
deleted file mode 100644
index ba3cb4f62af864..00000000000000
--- a/x-pack/plugins/siem/public/components/matrix_histogram/index.tsx
+++ /dev/null
@@ -1,273 +0,0 @@
-/*
- * 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, { useState, useEffect, useCallback, useMemo } from 'react';
-import { Position } from '@elastic/charts';
-import styled from 'styled-components';
-
-import { EuiFlexGroup, EuiFlexItem, EuiProgress, EuiSelect, EuiSpacer } from '@elastic/eui';
-import { noop } from 'lodash/fp';
-import { compose } from 'redux';
-import { connect } from 'react-redux';
-import * as i18n from './translations';
-import { BarChart } from '../charts/barchart';
-import { HeaderSection } from '../header_section';
-import { MatrixLoader } from './matrix_loader';
-import { Panel } from '../panel';
-import { getBarchartConfigs, getCustomChartData } from './utils';
-import { useQuery } from '../../containers/matrix_histogram';
-import {
-  MatrixHistogramProps,
-  MatrixHistogramOption,
-  HistogramAggregation,
-  MatrixHistogramQueryProps,
-} from './types';
-import { InspectButtonContainer } from '../inspect';
-
-import { State, inputsSelectors, hostsModel, networkModel } from '../../store';
-
-import {
-  MatrixHistogramMappingTypes,
-  GetTitle,
-  GetSubTitle,
-} from '../../components/matrix_histogram/types';
-import { SetQuery } from '../../pages/hosts/navigation/types';
-import { QueryTemplateProps } from '../../containers/query_template';
-import { setAbsoluteRangeDatePicker } from '../../store/inputs/actions';
-import { InputsModelId } from '../../store/inputs/constants';
-import { HistogramType } from '../../graphql/types';
-
-export interface OwnProps extends QueryTemplateProps {
-  defaultStackByOption: MatrixHistogramOption;
-  errorMessage: string;
-  headerChildren?: React.ReactNode;
-  hideHistogramIfEmpty?: boolean;
-  histogramType: HistogramType;
-  id: string;
-  indexToAdd?: string[] | null;
-  legendPosition?: Position;
-  mapping?: MatrixHistogramMappingTypes;
-  showSpacer?: boolean;
-  setQuery: SetQuery;
-  setAbsoluteRangeDatePickerTarget?: InputsModelId;
-  showLegend?: boolean;
-  stackByOptions: MatrixHistogramOption[];
-  subtitle?: string | GetSubTitle;
-  title: string | GetTitle;
-  type: hostsModel.HostsType | networkModel.NetworkType;
-}
-
-const DEFAULT_PANEL_HEIGHT = 300;
-
-const HeaderChildrenFlexItem = styled(EuiFlexItem)`
-  margin-left: 24px;
-`;
-
-// @ts-ignore - the EUI type definitions for Panel do no play nice with styled-components
-const HistogramPanel = styled(Panel)<{ height?: number }>`
-  display: flex;
-  flex-direction: column;
-  ${({ height }) => (height != null ? `height: ${height}px;` : '')}
-`;
-
-export const MatrixHistogramComponent: React.FC<MatrixHistogramProps &
-  MatrixHistogramQueryProps> = ({
-  chartHeight,
-  defaultStackByOption,
-  endDate,
-  errorMessage,
-  filterQuery,
-  headerChildren,
-  histogramType,
-  hideHistogramIfEmpty = false,
-  id,
-  indexToAdd,
-  isInspected,
-  legendPosition,
-  mapping,
-  panelHeight = DEFAULT_PANEL_HEIGHT,
-  setAbsoluteRangeDatePickerTarget = 'global',
-  setQuery,
-  showLegend,
-  showSpacer = true,
-  stackByOptions,
-  startDate,
-  subtitle,
-  title,
-  titleSize,
-  dispatchSetAbsoluteRangeDatePicker,
-  yTickFormatter,
-}) => {
-  const barchartConfigs = useMemo(
-    () =>
-      getBarchartConfigs({
-        chartHeight,
-        from: startDate,
-        legendPosition,
-        to: endDate,
-        onBrushEnd: ({ x }) => {
-          if (!x) {
-            return;
-          }
-          const [from, to] = x;
-          dispatchSetAbsoluteRangeDatePicker({
-            id: setAbsoluteRangeDatePickerTarget,
-            from,
-            to,
-          });
-        },
-        yTickFormatter,
-        showLegend,
-      }),
-    [
-      chartHeight,
-      startDate,
-      legendPosition,
-      endDate,
-      dispatchSetAbsoluteRangeDatePicker,
-      yTickFormatter,
-      showLegend,
-    ]
-  );
-  const [isInitialLoading, setIsInitialLoading] = useState(true);
-  const [selectedStackByOption, setSelectedStackByOption] = useState<MatrixHistogramOption>(
-    defaultStackByOption
-  );
-  const setSelectedChartOptionCallback = useCallback(
-    (event: React.ChangeEvent<HTMLSelectElement>) => {
-      setSelectedStackByOption(
-        stackByOptions.find(co => co.value === event.target.value) ?? defaultStackByOption
-      );
-    },
-    []
-  );
-
-  const { data, loading, inspect, totalCount, refetch = noop } = useQuery<{}, HistogramAggregation>(
-    {
-      endDate,
-      errorMessage,
-      filterQuery,
-      histogramType,
-      indexToAdd,
-      startDate,
-      isInspected,
-      stackByField: selectedStackByOption.value,
-    }
-  );
-
-  const titleWithStackByField = useMemo(
-    () => (title != null && typeof title === 'function' ? title(selectedStackByOption) : title),
-    [title, selectedStackByOption]
-  );
-  const subtitleWithCounts = useMemo(() => {
-    if (isInitialLoading) {
-      return null;
-    }
-
-    if (typeof subtitle === 'function') {
-      return totalCount >= 0 ? subtitle(totalCount) : null;
-    }
-
-    return subtitle;
-  }, [isInitialLoading, subtitle, totalCount]);
-  const hideHistogram = useMemo(() => (totalCount <= 0 && hideHistogramIfEmpty ? true : false), [
-    totalCount,
-    hideHistogramIfEmpty,
-  ]);
-  const barChartData = useMemo(() => getCustomChartData(data, mapping), [data, mapping]);
-
-  useEffect(() => {
-    if (!loading && !isInitialLoading) {
-      setQuery({ id, inspect, loading, refetch });
-    }
-
-    if (isInitialLoading && !!barChartData && data) {
-      setIsInitialLoading(false);
-    }
-  }, [
-    setQuery,
-    id,
-    inspect,
-    loading,
-    refetch,
-    isInitialLoading,
-    barChartData,
-    data,
-    setIsInitialLoading,
-  ]);
-
-  if (hideHistogram) {
-    return null;
-  }
-
-  return (
-    <>
-      <InspectButtonContainer show={!isInitialLoading}>
-        <HistogramPanel data-test-subj={`${id}Panel`} height={panelHeight}>
-          {loading && !isInitialLoading && (
-            <EuiProgress
-              data-test-subj="initialLoadingPanelMatrixOverTime"
-              size="xs"
-              position="absolute"
-              color="accent"
-            />
-          )}
-
-          <HeaderSection
-            id={id}
-            title={titleWithStackByField}
-            titleSize={titleSize}
-            subtitle={subtitleWithCounts}
-          >
-            <EuiFlexGroup alignItems="center" gutterSize="none">
-              <EuiFlexItem grow={false}>
-                {stackByOptions.length > 1 && (
-                  <EuiSelect
-                    onChange={setSelectedChartOptionCallback}
-                    options={stackByOptions}
-                    prepend={i18n.STACK_BY}
-                    value={selectedStackByOption?.value}
-                  />
-                )}
-              </EuiFlexItem>
-              <HeaderChildrenFlexItem grow={false}>{headerChildren}</HeaderChildrenFlexItem>
-            </EuiFlexGroup>
-          </HeaderSection>
-
-          {isInitialLoading ? (
-            <MatrixLoader />
-          ) : (
-            <BarChart
-              barChart={barChartData}
-              configs={barchartConfigs}
-              stackByField={selectedStackByOption.value}
-            />
-          )}
-        </HistogramPanel>
-      </InspectButtonContainer>
-      {showSpacer && <EuiSpacer data-test-subj="spacer" size="l" />}
-    </>
-  );
-};
-
-export const MatrixHistogram = React.memo(MatrixHistogramComponent);
-
-const makeMapStateToProps = () => {
-  const getQuery = inputsSelectors.globalQueryByIdSelector();
-  const mapStateToProps = (state: State, { type, id }: OwnProps) => {
-    const { isInspected } = getQuery(state, id);
-    return {
-      isInspected,
-    };
-  };
-  return mapStateToProps;
-};
-
-export const MatrixHistogramContainer = compose<React.ComponentClass<OwnProps>>(
-  connect(makeMapStateToProps, {
-    dispatchSetAbsoluteRangeDatePicker: setAbsoluteRangeDatePicker,
-  })
-)(MatrixHistogram);
diff --git a/x-pack/plugins/siem/public/components/matrix_histogram/types.ts b/x-pack/plugins/siem/public/components/matrix_histogram/types.ts
deleted file mode 100644
index c59775ad325d07..00000000000000
--- a/x-pack/plugins/siem/public/components/matrix_histogram/types.ts
+++ /dev/null
@@ -1,143 +0,0 @@
-/*
- * 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 { EuiTitleSize } from '@elastic/eui';
-import { ScaleType, Position, TickFormatter } from '@elastic/charts';
-import { ActionCreator } from 'redux';
-import { ESQuery } from '../../../common/typed_json';
-import { SetQuery } from '../../pages/hosts/navigation/types';
-import { InputsModelId } from '../../store/inputs/constants';
-import { HistogramType } from '../../graphql/types';
-import { UpdateDateRange } from '../charts/common';
-
-export type MatrixHistogramMappingTypes = Record<
-  string,
-  { key: string; value: null; color?: string | undefined }
->;
-export interface MatrixHistogramOption {
-  text: string;
-  value: string;
-}
-
-export type GetSubTitle = (count: number) => string;
-export type GetTitle = (matrixHistogramOption: MatrixHistogramOption) => string;
-
-export interface MatrixHisrogramConfigs {
-  defaultStackByOption: MatrixHistogramOption;
-  errorMessage: string;
-  hideHistogramIfEmpty?: boolean;
-  histogramType: HistogramType;
-  legendPosition?: Position;
-  mapping?: MatrixHistogramMappingTypes;
-  stackByOptions: MatrixHistogramOption[];
-  subtitle?: string | GetSubTitle;
-  title: string | GetTitle;
-  titleSize?: EuiTitleSize;
-}
-
-interface MatrixHistogramBasicProps {
-  chartHeight?: number;
-  defaultIndex: string[];
-  defaultStackByOption: MatrixHistogramOption;
-  dispatchSetAbsoluteRangeDatePicker: ActionCreator<{
-    id: InputsModelId;
-    from: number;
-    to: number;
-  }>;
-  endDate: number;
-  headerChildren?: React.ReactNode;
-  hideHistogramIfEmpty?: boolean;
-  id: string;
-  legendPosition?: Position;
-  mapping?: MatrixHistogramMappingTypes;
-  panelHeight?: number;
-  setQuery: SetQuery;
-  startDate: number;
-  stackByOptions: MatrixHistogramOption[];
-  subtitle?: string | GetSubTitle;
-  title?: string | GetTitle;
-  titleSize?: EuiTitleSize;
-}
-
-export interface MatrixHistogramQueryProps {
-  endDate: number;
-  errorMessage: string;
-  filterQuery?: ESQuery | string | undefined;
-  setAbsoluteRangeDatePicker?: ActionCreator<{
-    id: InputsModelId;
-    from: number;
-    to: number;
-  }>;
-  setAbsoluteRangeDatePickerTarget?: InputsModelId;
-  stackByField: string;
-  startDate: number;
-  indexToAdd?: string[] | null;
-  isInspected: boolean;
-  histogramType: HistogramType;
-}
-
-export interface MatrixHistogramProps extends MatrixHistogramBasicProps {
-  scaleType?: ScaleType;
-  yTickFormatter?: (value: number) => string;
-  showLegend?: boolean;
-  showSpacer?: boolean;
-  legendPosition?: Position;
-}
-
-export interface HistogramBucket {
-  key_as_string: string;
-  key: number;
-  doc_count: number;
-}
-export interface GroupBucket {
-  key: string;
-  signals: {
-    buckets: HistogramBucket[];
-  };
-}
-
-export interface HistogramAggregation {
-  histogramAgg: {
-    buckets: GroupBucket[];
-  };
-}
-
-export interface BarchartConfigs {
-  series: {
-    xScaleType: ScaleType;
-    yScaleType: ScaleType;
-    stackAccessors: string[];
-  };
-  axis: {
-    xTickFormatter: TickFormatter;
-    yTickFormatter: TickFormatter;
-    tickSize: number;
-  };
-  settings: {
-    legendPosition: Position;
-    onBrushEnd: UpdateDateRange;
-    showLegend: boolean;
-    showLegendExtra: boolean;
-    theme: {
-      scales: {
-        barsPadding: number;
-      };
-      chartMargins: {
-        left: number;
-        right: number;
-        top: number;
-        bottom: number;
-      };
-      chartPaddings: {
-        left: number;
-        right: number;
-        top: number;
-        bottom: number;
-      };
-    };
-  };
-  customHeight: number;
-}
diff --git a/x-pack/plugins/siem/public/components/matrix_histogram/utils.ts b/x-pack/plugins/siem/public/components/matrix_histogram/utils.ts
deleted file mode 100644
index d31eb1da15ea1f..00000000000000
--- a/x-pack/plugins/siem/public/components/matrix_histogram/utils.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-/*
- * 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 { ScaleType, Position } from '@elastic/charts';
-import { get, groupBy, map, toPairs } from 'lodash/fp';
-
-import { UpdateDateRange, ChartSeriesData } from '../charts/common';
-import { MatrixHistogramMappingTypes, BarchartConfigs } from './types';
-import { MatrixOverTimeHistogramData } from '../../graphql/types';
-import { histogramDateTimeFormatter } from '../utils';
-
-interface GetBarchartConfigsProps {
-  chartHeight?: number;
-  from: number;
-  legendPosition?: Position;
-  to: number;
-  onBrushEnd: UpdateDateRange;
-  yTickFormatter?: (value: number) => string;
-  showLegend?: boolean;
-}
-
-export const DEFAULT_CHART_HEIGHT = 174;
-export const DEFAULT_Y_TICK_FORMATTER = (value: string | number): string => value.toLocaleString();
-
-export const getBarchartConfigs = ({
-  chartHeight,
-  from,
-  legendPosition,
-  to,
-  onBrushEnd,
-  yTickFormatter,
-  showLegend,
-}: GetBarchartConfigsProps): BarchartConfigs => ({
-  series: {
-    xScaleType: ScaleType.Time,
-    yScaleType: ScaleType.Linear,
-    stackAccessors: ['g'],
-  },
-  axis: {
-    xTickFormatter: histogramDateTimeFormatter([from, to]),
-    yTickFormatter: yTickFormatter != null ? yTickFormatter : DEFAULT_Y_TICK_FORMATTER,
-    tickSize: 8,
-  },
-  settings: {
-    legendPosition: legendPosition ?? Position.Right,
-    onBrushEnd,
-    showLegend: showLegend ?? true,
-    showLegendExtra: true,
-    theme: {
-      scales: {
-        barsPadding: 0.08,
-      },
-      chartMargins: {
-        left: 0,
-        right: 0,
-        top: 0,
-        bottom: 0,
-      },
-      chartPaddings: {
-        left: 0,
-        right: 0,
-        top: 0,
-        bottom: 0,
-      },
-    },
-  },
-  customHeight: chartHeight ?? DEFAULT_CHART_HEIGHT,
-});
-
-export const defaultLegendColors = [
-  '#1EA593',
-  '#2B70F7',
-  '#CE0060',
-  '#38007E',
-  '#FCA5D3',
-  '#F37020',
-  '#E49E29',
-  '#B0916F',
-  '#7B000B',
-  '#34130C',
-];
-
-export const formatToChartDataItem = ([key, value]: [
-  string,
-  MatrixOverTimeHistogramData[]
-]): ChartSeriesData => ({
-  key,
-  value,
-});
-
-export const getCustomChartData = (
-  data: MatrixOverTimeHistogramData[] | null,
-  mapping?: MatrixHistogramMappingTypes
-): ChartSeriesData[] => {
-  if (!data) return [];
-  const dataGroupedByEvent = groupBy('g', data);
-  const dataGroupedEntries = toPairs(dataGroupedByEvent);
-  const formattedChartData = map(formatToChartDataItem, dataGroupedEntries);
-
-  if (mapping)
-    return map((item: ChartSeriesData) => {
-      const mapItem = get(item.key, mapping);
-      return { ...item, color: mapItem?.color };
-    }, formattedChartData);
-  else return formattedChartData;
-};
diff --git a/x-pack/plugins/siem/public/components/ml/types.ts b/x-pack/plugins/siem/public/components/ml/types.ts
deleted file mode 100644
index f70c7d3eb034c8..00000000000000
--- a/x-pack/plugins/siem/public/components/ml/types.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-/*
- * 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 { Influencer } from '../../../../ml/public';
-
-import { HostsType } from '../../store/hosts/model';
-import { NetworkType } from '../../store/network/model';
-import { FlowTarget } from '../../graphql/types';
-
-export interface Source {
-  job_id: string;
-  result_type: string;
-  probability: number;
-  multi_bucket_impact: number;
-  record_score: number;
-  initial_record_score: number;
-  bucket_span: number;
-  detector_index: number;
-  is_interim: boolean;
-  timestamp: number;
-  by_field_name: string;
-  by_field_value: string;
-  partition_field_name: string;
-  partition_field_value: string;
-  function: string;
-  function_description: string;
-  typical: number[];
-  actual: number[];
-  influencers: Influencer[];
-}
-
-export interface CriteriaFields {
-  fieldName: string;
-  fieldValue: string;
-}
-
-export interface InfluencerInput {
-  fieldName: string;
-  fieldValue: string;
-}
-
-export interface Anomaly {
-  detectorIndex: number;
-  entityName: string;
-  entityValue: string;
-  influencers?: Array<Record<string, string>>;
-  jobId: string;
-  rowId: string;
-  severity: number;
-  time: number;
-  source: Source;
-}
-
-export interface Anomalies {
-  anomalies: Anomaly[];
-  interval: string;
-}
-
-export type NarrowDateRange = (score: Anomaly, interval: string) => void;
-
-export interface AnomaliesByHost {
-  hostName: string;
-  anomaly: Anomaly;
-}
-
-export type DestinationOrSource = 'source.ip' | 'destination.ip';
-
-export interface AnomaliesByNetwork {
-  type: DestinationOrSource;
-  ip: string;
-  anomaly: Anomaly;
-}
-
-export interface HostOrNetworkProps {
-  startDate: number;
-  endDate: number;
-  narrowDateRange: NarrowDateRange;
-  skip: boolean;
-}
-
-export type AnomaliesHostTableProps = HostOrNetworkProps & {
-  hostName?: string;
-  type: HostsType;
-};
-
-export type AnomaliesNetworkTableProps = HostOrNetworkProps & {
-  ip?: string;
-  type: NetworkType;
-  flowTarget?: FlowTarget;
-};
-
-const sourceOrDestination = ['source.ip', 'destination.ip'];
-
-export const isDestinationOrSource = (value: string | null): value is DestinationOrSource =>
-  value != null && sourceOrDestination.includes(value);
-
-export interface MlError {
-  msg: string;
-  response: string;
-  statusCode: number;
-  path?: string;
-  query?: {};
-  body?: string;
-}
diff --git a/x-pack/plugins/siem/public/components/ml_popover/types.ts b/x-pack/plugins/siem/public/components/ml_popover/types.ts
deleted file mode 100644
index 005f93650a8eb0..00000000000000
--- a/x-pack/plugins/siem/public/components/ml_popover/types.ts
+++ /dev/null
@@ -1,203 +0,0 @@
-/*
- * 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 { AuditMessageBase } from '../../../../ml/public';
-import { MlError } from '../ml/types';
-
-export interface Group {
-  id: string;
-  jobIds: string[];
-  calendarIds: string[];
-}
-
-export interface CheckRecognizerProps {
-  indexPatternName: string[];
-  signal: AbortSignal;
-}
-
-export interface RecognizerModule {
-  id: string;
-  title: string;
-  query: Record<string, object>;
-  description: string;
-  logo: {
-    icon: string;
-  };
-}
-
-export interface GetModulesProps {
-  moduleId?: string;
-  signal: AbortSignal;
-}
-
-export interface Module {
-  id: string;
-  title: string;
-  description: string;
-  type: string;
-  logoFile: string;
-  defaultIndexPattern: string;
-  query: Record<string, object>;
-  jobs: ModuleJob[];
-  datafeeds: ModuleDatafeed[];
-  kibana: object;
-}
-
-/**
- * Representation of an ML Job as returned from `the ml/modules/get_module` API
- */
-export interface ModuleJob {
-  id: string;
-  config: {
-    groups: string[];
-    description: string;
-    analysis_config: {
-      bucket_span: string;
-      summary_count_field_name?: string;
-      detectors: Detector[];
-      influencers: string[];
-    };
-    analysis_limits: {
-      model_memory_limit: string;
-    };
-    data_description: {
-      time_field: string;
-      time_format?: string;
-    };
-    model_plot_config?: {
-      enabled: boolean;
-    };
-    custom_settings: {
-      created_by: string;
-      custom_urls: CustomURL[];
-    };
-    job_type: string;
-  };
-}
-
-// TODO: Speak to ML team about why the get_module API will sometimes return indexes and other times indices
-// See mockGetModuleResponse for examples
-export interface ModuleDatafeed {
-  id: string;
-  config: {
-    job_id: string;
-    indexes?: string[];
-    indices?: string[];
-    query: Record<string, object>;
-  };
-}
-
-export interface MlSetupArgs {
-  configTemplate: string;
-  indexPatternName: string;
-  jobIdErrorFilter: string[];
-  groups: string[];
-  prefix?: string;
-}
-
-/**
- * Representation of an ML Job as returned from the `ml/jobs/jobs_summary` API
- */
-export interface JobSummary {
-  auditMessage?: AuditMessageBase;
-  datafeedId: string;
-  datafeedIndices: string[];
-  datafeedState: string;
-  description: string;
-  earliestTimestampMs?: number;
-  latestResultsTimestampMs?: number;
-  groups: string[];
-  hasDatafeed: boolean;
-  id: string;
-  isSingleMetricViewerJob: boolean;
-  jobState: string;
-  latestTimestampMs?: number;
-  memory_status: string;
-  nodeName?: string;
-  processed_record_count: number;
-}
-
-export interface Detector {
-  detector_description: string;
-  function: string;
-  by_field_name: string;
-  partition_field_name?: string;
-}
-
-export interface CustomURL {
-  url_name: string;
-  url_value: string;
-}
-
-/**
- * Representation of an ML Job as used by the SIEM App -- a composition of ModuleJob and JobSummary
- * that includes necessary metadata like moduleName, defaultIndexPattern, etc.
- */
-export interface SiemJob extends JobSummary {
-  moduleId: string;
-  defaultIndexPattern: string;
-  isCompatible: boolean;
-  isInstalled: boolean;
-  isElasticJob: boolean;
-}
-
-export interface AugmentedSiemJobFields {
-  moduleId: string;
-  defaultIndexPattern: string;
-  isCompatible: boolean;
-  isElasticJob: boolean;
-}
-
-export interface SetupMlResponseJob {
-  id: string;
-  success: boolean;
-  error?: MlError;
-}
-
-export interface SetupMlResponseDatafeed {
-  id: string;
-  success: boolean;
-  started: boolean;
-  error?: MlError;
-}
-
-export interface SetupMlResponse {
-  jobs: SetupMlResponseJob[];
-  datafeeds: SetupMlResponseDatafeed[];
-  kibana: {};
-}
-
-export interface StartDatafeedResponse {
-  [key: string]: {
-    started: boolean;
-    error?: string;
-  };
-}
-
-export interface ErrorResponse {
-  statusCode?: number;
-  error?: string;
-  message?: string;
-}
-
-export interface StopDatafeedResponse {
-  [key: string]: {
-    stopped: boolean;
-  };
-}
-
-export interface CloseJobsResponse {
-  [key: string]: {
-    closed: boolean;
-  };
-}
-
-export interface JobsFilters {
-  filterQuery: string;
-  showCustomJobs: boolean;
-  showElasticJobs: boolean;
-  selectedGroups: string[];
-}
diff --git a/x-pack/plugins/siem/public/components/navigation/breadcrumbs/index.ts b/x-pack/plugins/siem/public/components/navigation/breadcrumbs/index.ts
deleted file mode 100644
index 8abc099ee7f693..00000000000000
--- a/x-pack/plugins/siem/public/components/navigation/breadcrumbs/index.ts
+++ /dev/null
@@ -1,170 +0,0 @@
-/*
- * 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 { getOr, omit } from 'lodash/fp';
-
-import { ChromeBreadcrumb } from '../../../../../../../src/core/public';
-import { APP_NAME } from '../../../../common/constants';
-import { StartServices } from '../../../plugin';
-import { getBreadcrumbs as getHostDetailsBreadcrumbs } from '../../../pages/hosts/details/utils';
-import { getBreadcrumbs as getIPDetailsBreadcrumbs } from '../../../pages/network/ip_details';
-import { getBreadcrumbs as getCaseDetailsBreadcrumbs } from '../../../pages/case/utils';
-import { getBreadcrumbs as getDetectionRulesBreadcrumbs } from '../../../pages/detection_engine/rules/utils';
-import { getBreadcrumbs as getTimelinesBreadcrumbs } from '../../../pages/timelines';
-import { SiemPageName } from '../../../pages/home/types';
-import {
-  RouteSpyState,
-  HostRouteSpyState,
-  NetworkRouteSpyState,
-  TimelineRouteSpyState,
-} from '../../../utils/route/types';
-import { getOverviewUrl } from '../../link_to';
-
-import { TabNavigationProps } from '../tab_navigation/types';
-import { getSearch } from '../helpers';
-import { SearchNavTab } from '../types';
-
-export const setBreadcrumbs = (
-  spyState: RouteSpyState & TabNavigationProps,
-  chrome: StartServices['chrome']
-) => {
-  const breadcrumbs = getBreadcrumbsForRoute(spyState);
-  if (breadcrumbs) {
-    chrome.setBreadcrumbs(breadcrumbs);
-  }
-};
-
-export const siemRootBreadcrumb: ChromeBreadcrumb[] = [
-  {
-    text: APP_NAME,
-    href: getOverviewUrl(),
-  },
-];
-
-const isNetworkRoutes = (spyState: RouteSpyState): spyState is NetworkRouteSpyState =>
-  spyState != null && spyState.pageName === SiemPageName.network;
-
-const isHostsRoutes = (spyState: RouteSpyState): spyState is HostRouteSpyState =>
-  spyState != null && spyState.pageName === SiemPageName.hosts;
-
-const isTimelinesRoutes = (spyState: RouteSpyState): spyState is TimelineRouteSpyState =>
-  spyState != null && spyState.pageName === SiemPageName.timelines;
-
-const isCaseRoutes = (spyState: RouteSpyState): spyState is RouteSpyState =>
-  spyState != null && spyState.pageName === SiemPageName.case;
-
-const isDetectionsRoutes = (spyState: RouteSpyState) =>
-  spyState != null && spyState.pageName === SiemPageName.detections;
-
-export const getBreadcrumbsForRoute = (
-  object: RouteSpyState & TabNavigationProps
-): ChromeBreadcrumb[] | null => {
-  const spyState: RouteSpyState = omit('navTabs', object);
-  if (isHostsRoutes(spyState) && object.navTabs) {
-    const tempNav: SearchNavTab = { urlKey: 'host', isDetailPage: false };
-    let urlStateKeys = [getOr(tempNav, spyState.pageName, object.navTabs)];
-    if (spyState.tabName != null) {
-      urlStateKeys = [...urlStateKeys, getOr(tempNav, spyState.tabName, object.navTabs)];
-    }
-    return [
-      ...siemRootBreadcrumb,
-      ...getHostDetailsBreadcrumbs(
-        spyState,
-        urlStateKeys.reduce(
-          (acc: string[], item: SearchNavTab) => [...acc, getSearch(item, object)],
-          []
-        )
-      ),
-    ];
-  }
-  if (isNetworkRoutes(spyState) && object.navTabs) {
-    const tempNav: SearchNavTab = { urlKey: 'network', isDetailPage: false };
-    let urlStateKeys = [getOr(tempNav, spyState.pageName, object.navTabs)];
-    if (spyState.tabName != null) {
-      urlStateKeys = [...urlStateKeys, getOr(tempNav, spyState.tabName, object.navTabs)];
-    }
-    return [
-      ...siemRootBreadcrumb,
-      ...getIPDetailsBreadcrumbs(
-        spyState,
-        urlStateKeys.reduce(
-          (acc: string[], item: SearchNavTab) => [...acc, getSearch(item, object)],
-          []
-        )
-      ),
-    ];
-  }
-  if (isDetectionsRoutes(spyState) && object.navTabs) {
-    const tempNav: SearchNavTab = { urlKey: 'detections', isDetailPage: false };
-    let urlStateKeys = [getOr(tempNav, spyState.pageName, object.navTabs)];
-    if (spyState.tabName != null) {
-      urlStateKeys = [...urlStateKeys, getOr(tempNav, spyState.tabName, object.navTabs)];
-    }
-
-    return [
-      ...siemRootBreadcrumb,
-      ...getDetectionRulesBreadcrumbs(
-        spyState,
-        urlStateKeys.reduce(
-          (acc: string[], item: SearchNavTab) => [...acc, getSearch(item, object)],
-          []
-        )
-      ),
-    ];
-  }
-  if (isCaseRoutes(spyState) && object.navTabs) {
-    const tempNav: SearchNavTab = { urlKey: 'case', isDetailPage: false };
-    let urlStateKeys = [getOr(tempNav, spyState.pageName, object.navTabs)];
-    if (spyState.tabName != null) {
-      urlStateKeys = [...urlStateKeys, getOr(tempNav, spyState.tabName, object.navTabs)];
-    }
-
-    return [
-      ...siemRootBreadcrumb,
-      ...getCaseDetailsBreadcrumbs(
-        spyState,
-        urlStateKeys.reduce(
-          (acc: string[], item: SearchNavTab) => [...acc, getSearch(item, object)],
-          []
-        )
-      ),
-    ];
-  }
-  if (isTimelinesRoutes(spyState) && object.navTabs) {
-    const tempNav: SearchNavTab = { urlKey: 'timeline', isDetailPage: false };
-    let urlStateKeys = [getOr(tempNav, spyState.pageName, object.navTabs)];
-    if (spyState.tabName != null) {
-      urlStateKeys = [...urlStateKeys, getOr(tempNav, spyState.tabName, object.navTabs)];
-    }
-
-    return [
-      ...siemRootBreadcrumb,
-      ...getTimelinesBreadcrumbs(
-        spyState,
-        urlStateKeys.reduce(
-          (acc: string[], item: SearchNavTab) => [...acc, getSearch(item, object)],
-          []
-        )
-      ),
-    ];
-  }
-  if (
-    spyState != null &&
-    object.navTabs &&
-    spyState.pageName &&
-    object.navTabs[spyState.pageName]
-  ) {
-    return [
-      ...siemRootBreadcrumb,
-      {
-        text: object.navTabs[spyState.pageName].name,
-        href: '',
-      },
-    ];
-  }
-
-  return null;
-};
diff --git a/x-pack/plugins/siem/public/components/navigation/helpers.ts b/x-pack/plugins/siem/public/components/navigation/helpers.ts
deleted file mode 100644
index 291cb90098f78e..00000000000000
--- a/x-pack/plugins/siem/public/components/navigation/helpers.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-/*
- * 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 { isEmpty } from 'lodash/fp';
-import { Location } from 'history';
-
-import { UrlInputsModel } from '../../store/inputs/model';
-import { TimelineUrl } from '../../store/timeline/model';
-import { CONSTANTS } from '../url_state/constants';
-import { URL_STATE_KEYS, KeyUrlState, UrlState } from '../url_state/types';
-import {
-  replaceQueryStringInLocation,
-  replaceStateKeyInQueryString,
-  getQueryStringFromLocation,
-} from '../url_state/helpers';
-import { Query, Filter } from '../../../../../../src/plugins/data/public';
-
-import { SearchNavTab } from './types';
-
-export const getSearch = (tab: SearchNavTab, urlState: UrlState): string => {
-  if (tab && tab.urlKey != null && URL_STATE_KEYS[tab.urlKey] != null) {
-    return URL_STATE_KEYS[tab.urlKey].reduce<Location>(
-      (myLocation: Location, urlKey: KeyUrlState) => {
-        let urlStateToReplace: UrlInputsModel | Query | Filter[] | TimelineUrl | string = '';
-
-        if (urlKey === CONSTANTS.appQuery && urlState.query != null) {
-          if (urlState.query.query === '') {
-            urlStateToReplace = '';
-          } else {
-            urlStateToReplace = urlState.query;
-          }
-        } else if (urlKey === CONSTANTS.filters && urlState.filters != null) {
-          if (isEmpty(urlState.filters)) {
-            urlStateToReplace = '';
-          } else {
-            urlStateToReplace = urlState.filters;
-          }
-        } else if (urlKey === CONSTANTS.timerange) {
-          urlStateToReplace = urlState[CONSTANTS.timerange];
-        } else if (urlKey === CONSTANTS.timeline && urlState[CONSTANTS.timeline] != null) {
-          const timeline = urlState[CONSTANTS.timeline];
-          if (timeline.id === '') {
-            urlStateToReplace = '';
-          } else {
-            urlStateToReplace = timeline;
-          }
-        }
-        return replaceQueryStringInLocation(
-          myLocation,
-          replaceStateKeyInQueryString(
-            urlKey,
-            urlStateToReplace
-          )(getQueryStringFromLocation(myLocation.search))
-        );
-      },
-      {
-        pathname: '',
-        hash: '',
-        search: '',
-        state: '',
-      }
-    ).search;
-  }
-  return '';
-};
diff --git a/x-pack/plugins/siem/public/components/navigation/index.test.tsx b/x-pack/plugins/siem/public/components/navigation/index.test.tsx
deleted file mode 100644
index d8b62029138c82..00000000000000
--- a/x-pack/plugins/siem/public/components/navigation/index.test.tsx
+++ /dev/null
@@ -1,238 +0,0 @@
-/*
- * 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 { mount } from 'enzyme';
-import React from 'react';
-
-import { CONSTANTS } from '../url_state/constants';
-import { SiemNavigationComponent } from './';
-import { setBreadcrumbs } from './breadcrumbs';
-import { navTabs } from '../../pages/home/home_navigations';
-import { HostsTableType } from '../../store/hosts/model';
-import { RouteSpyState } from '../../utils/route/types';
-import { SiemNavigationProps, SiemNavigationComponentProps } from './types';
-
-jest.mock('./breadcrumbs', () => ({
-  setBreadcrumbs: jest.fn(),
-}));
-
-describe('SIEM Navigation', () => {
-  const mockProps: SiemNavigationComponentProps & SiemNavigationProps & RouteSpyState = {
-    pageName: 'hosts',
-    pathName: '/hosts',
-    detailName: undefined,
-    search: '',
-    tabName: HostsTableType.authentications,
-    navTabs,
-    urlState: {
-      [CONSTANTS.timerange]: {
-        global: {
-          [CONSTANTS.timerange]: {
-            from: 1558048243696,
-            fromStr: 'now-24h',
-            kind: 'relative',
-            to: 1558134643697,
-            toStr: 'now',
-          },
-          linkTo: ['timeline'],
-        },
-        timeline: {
-          [CONSTANTS.timerange]: {
-            from: 1558048243696,
-            fromStr: 'now-24h',
-            kind: 'relative',
-            to: 1558134643697,
-            toStr: 'now',
-          },
-          linkTo: ['global'],
-        },
-      },
-      [CONSTANTS.appQuery]: { query: '', language: 'kuery' },
-      [CONSTANTS.filters]: [],
-      [CONSTANTS.timeline]: {
-        id: '',
-        isOpen: false,
-      },
-    },
-  };
-  const wrapper = mount(<SiemNavigationComponent {...mockProps} />);
-  test('it calls setBreadcrumbs with correct path on mount', () => {
-    expect(setBreadcrumbs).toHaveBeenNthCalledWith(
-      1,
-      {
-        detailName: undefined,
-        navTabs: {
-          case: {
-            disabled: false,
-            href: '#/link-to/case',
-            id: 'case',
-            name: 'Cases',
-            urlKey: 'case',
-          },
-          detections: {
-            disabled: false,
-            href: '#/link-to/detections',
-            id: 'detections',
-            name: 'Detections',
-            urlKey: 'detections',
-          },
-          hosts: {
-            disabled: false,
-            href: '#/link-to/hosts',
-            id: 'hosts',
-            name: 'Hosts',
-            urlKey: 'host',
-          },
-          network: {
-            disabled: false,
-            href: '#/link-to/network',
-            id: 'network',
-            name: 'Network',
-            urlKey: 'network',
-          },
-          overview: {
-            disabled: false,
-            href: '#/link-to/overview',
-            id: 'overview',
-            name: 'Overview',
-            urlKey: 'overview',
-          },
-          timelines: {
-            disabled: false,
-            href: '#/link-to/timelines',
-            id: 'timelines',
-            name: 'Timelines',
-            urlKey: 'timeline',
-          },
-        },
-        pageName: 'hosts',
-        pathName: '/hosts',
-        search: '',
-        tabName: 'authentications',
-        query: { query: '', language: 'kuery' },
-        filters: [],
-        savedQuery: undefined,
-        timeline: {
-          id: '',
-          isOpen: false,
-        },
-        timerange: {
-          global: {
-            linkTo: ['timeline'],
-            timerange: {
-              from: 1558048243696,
-              fromStr: 'now-24h',
-              kind: 'relative',
-              to: 1558134643697,
-              toStr: 'now',
-            },
-          },
-          timeline: {
-            linkTo: ['global'],
-            timerange: {
-              from: 1558048243696,
-              fromStr: 'now-24h',
-              kind: 'relative',
-              to: 1558134643697,
-              toStr: 'now',
-            },
-          },
-        },
-      },
-      undefined
-    );
-  });
-  test('it calls setBreadcrumbs with correct path on update', () => {
-    wrapper.setProps({
-      pageName: 'network',
-      pathName: '/network',
-      tabName: undefined,
-    });
-    wrapper.update();
-    expect(setBreadcrumbs).toHaveBeenNthCalledWith(
-      1,
-      {
-        detailName: undefined,
-        filters: [],
-        navTabs: {
-          case: {
-            disabled: false,
-            href: '#/link-to/case',
-            id: 'case',
-            name: 'Cases',
-            urlKey: 'case',
-          },
-          detections: {
-            disabled: false,
-            href: '#/link-to/detections',
-            id: 'detections',
-            name: 'Detections',
-            urlKey: 'detections',
-          },
-          hosts: {
-            disabled: false,
-            href: '#/link-to/hosts',
-            id: 'hosts',
-            name: 'Hosts',
-            urlKey: 'host',
-          },
-          network: {
-            disabled: false,
-            href: '#/link-to/network',
-            id: 'network',
-            name: 'Network',
-            urlKey: 'network',
-          },
-          overview: {
-            disabled: false,
-            href: '#/link-to/overview',
-            id: 'overview',
-            name: 'Overview',
-            urlKey: 'overview',
-          },
-          timelines: {
-            disabled: false,
-            href: '#/link-to/timelines',
-            id: 'timelines',
-            name: 'Timelines',
-            urlKey: 'timeline',
-          },
-        },
-        pageName: 'hosts',
-        pathName: '/hosts',
-        query: { language: 'kuery', query: '' },
-        savedQuery: undefined,
-        search: '',
-        state: undefined,
-        tabName: 'authentications',
-        timeline: { id: '', isOpen: false },
-        timerange: {
-          global: {
-            linkTo: ['timeline'],
-            timerange: {
-              from: 1558048243696,
-              fromStr: 'now-24h',
-              kind: 'relative',
-              to: 1558134643697,
-              toStr: 'now',
-            },
-          },
-          timeline: {
-            linkTo: ['global'],
-            timerange: {
-              from: 1558048243696,
-              fromStr: 'now-24h',
-              kind: 'relative',
-              to: 1558134643697,
-              toStr: 'now',
-            },
-          },
-        },
-      },
-      undefined
-    );
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/navigation/tab_navigation/index.test.tsx b/x-pack/plugins/siem/public/components/navigation/tab_navigation/index.test.tsx
deleted file mode 100644
index 99ded06cfdcc86..00000000000000
--- a/x-pack/plugins/siem/public/components/navigation/tab_navigation/index.test.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-/*
- * 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 { mount } from 'enzyme';
-import React from 'react';
-
-import { navTabs } from '../../../pages/home/home_navigations';
-import { SiemPageName } from '../../../pages/home/types';
-import { navTabsHostDetails } from '../../../pages/hosts/details/nav_tabs';
-import { HostsTableType } from '../../../store/hosts/model';
-import { RouteSpyState } from '../../../utils/route/types';
-import { CONSTANTS } from '../../url_state/constants';
-import { TabNavigationComponent } from './';
-import { TabNavigationProps } from './types';
-
-describe('Tab Navigation', () => {
-  const pageName = SiemPageName.hosts;
-  const hostName = 'siem-window';
-  const tabName = HostsTableType.authentications;
-  const pathName = `/${pageName}/${hostName}/${tabName}`;
-
-  describe('Page Navigation', () => {
-    const mockProps: TabNavigationProps & RouteSpyState = {
-      pageName,
-      pathName,
-      detailName: undefined,
-      search: '',
-      tabName,
-      navTabs,
-      [CONSTANTS.timerange]: {
-        global: {
-          [CONSTANTS.timerange]: {
-            from: 1558048243696,
-            fromStr: 'now-24h',
-            kind: 'relative',
-            to: 1558134643697,
-            toStr: 'now',
-          },
-          linkTo: ['timeline'],
-        },
-        timeline: {
-          [CONSTANTS.timerange]: {
-            from: 1558048243696,
-            fromStr: 'now-24h',
-            kind: 'relative',
-            to: 1558134643697,
-            toStr: 'now',
-          },
-          linkTo: ['global'],
-        },
-      },
-      [CONSTANTS.appQuery]: { query: 'host.name:"siem-es"', language: 'kuery' },
-      [CONSTANTS.filters]: [],
-      [CONSTANTS.timeline]: {
-        id: '',
-        isOpen: false,
-      },
-    };
-    test('it mounts with correct tab highlighted', () => {
-      const wrapper = mount(<TabNavigationComponent {...mockProps} />);
-      const hostsTab = wrapper.find('EuiTab[data-test-subj="navigation-hosts"]');
-      expect(hostsTab.prop('isSelected')).toBeTruthy();
-    });
-    test('it changes active tab when nav changes by props', () => {
-      const wrapper = mount(<TabNavigationComponent {...mockProps} />);
-      const networkTab = () => wrapper.find('EuiTab[data-test-subj="navigation-network"]').first();
-      expect(networkTab().prop('isSelected')).toBeFalsy();
-      wrapper.setProps({
-        pageName: 'network',
-        pathName: '/network',
-        tabName: undefined,
-      });
-      wrapper.update();
-      expect(networkTab().prop('isSelected')).toBeTruthy();
-    });
-    test('it carries the url state in the link', () => {
-      const wrapper = mount(<TabNavigationComponent {...mockProps} />);
-      const firstTab = wrapper.find('EuiTab[data-test-subj="navigation-network"]');
-      expect(firstTab.props().href).toBe(
-        "#/link-to/network?query=(language:kuery,query:'host.name:%22siem-es%22')&timerange=(global:(linkTo:!(timeline),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)),timeline:(linkTo:!(global),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)))"
-      );
-    });
-  });
-
-  describe('Table Navigation', () => {
-    const mockHasMlUserPermissions = true;
-    const mockProps: TabNavigationProps & RouteSpyState = {
-      pageName: 'hosts',
-      pathName: '/hosts',
-      detailName: undefined,
-      search: '',
-      tabName: HostsTableType.authentications,
-      navTabs: navTabsHostDetails(hostName, mockHasMlUserPermissions),
-      [CONSTANTS.timerange]: {
-        global: {
-          [CONSTANTS.timerange]: {
-            from: 1558048243696,
-            fromStr: 'now-24h',
-            kind: 'relative',
-            to: 1558134643697,
-            toStr: 'now',
-          },
-          linkTo: ['timeline'],
-        },
-        timeline: {
-          [CONSTANTS.timerange]: {
-            from: 1558048243696,
-            fromStr: 'now-24h',
-            kind: 'relative',
-            to: 1558134643697,
-            toStr: 'now',
-          },
-          linkTo: ['global'],
-        },
-      },
-      [CONSTANTS.appQuery]: { query: 'host.name:"siem-es"', language: 'kuery' },
-      [CONSTANTS.filters]: [],
-      [CONSTANTS.timeline]: {
-        id: '',
-        isOpen: false,
-      },
-    };
-    test('it mounts with correct tab highlighted', () => {
-      const wrapper = mount(<TabNavigationComponent {...mockProps} />);
-      const tableNavigationTab = wrapper.find(
-        `EuiTab[data-test-subj="navigation-${HostsTableType.authentications}"]`
-      );
-
-      expect(tableNavigationTab.prop('isSelected')).toBeTruthy();
-    });
-    test('it changes active tab when nav changes by props', () => {
-      const wrapper = mount(<TabNavigationComponent {...mockProps} />);
-      const tableNavigationTab = () =>
-        wrapper.find(`[data-test-subj="navigation-${HostsTableType.events}"]`).first();
-      expect(tableNavigationTab().prop('isSelected')).toBeFalsy();
-      wrapper.setProps({
-        pageName: SiemPageName.hosts,
-        pathName: `/${SiemPageName.hosts}`,
-        tabName: HostsTableType.events,
-      });
-      wrapper.update();
-      expect(tableNavigationTab().prop('isSelected')).toBeTruthy();
-    });
-    test('it carries the url state in the link', () => {
-      const wrapper = mount(<TabNavigationComponent {...mockProps} />);
-      const firstTab = wrapper.find(
-        `EuiTab[data-test-subj="navigation-${HostsTableType.authentications}"]`
-      );
-      expect(firstTab.props().href).toBe(
-        `#/${pageName}/${hostName}/${HostsTableType.authentications}?query=(language:kuery,query:'host.name:%22siem-es%22')&timerange=(global:(linkTo:!(timeline),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)),timeline:(linkTo:!(global),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)))`
-      );
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/navigation/tab_navigation/types.ts b/x-pack/plugins/siem/public/components/navigation/tab_navigation/types.ts
deleted file mode 100644
index 2e2dea09f8c38b..00000000000000
--- a/x-pack/plugins/siem/public/components/navigation/tab_navigation/types.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * 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 { UrlInputsModel } from '../../../store/inputs/model';
-import { CONSTANTS } from '../../url_state/constants';
-import { HostsTableType } from '../../../store/hosts/model';
-import { TimelineUrl } from '../../../store/timeline/model';
-import { Filter, Query } from '../../../../../../../src/plugins/data/public';
-
-import { SiemNavigationProps } from '../types';
-
-export interface TabNavigationProps extends SiemNavigationProps {
-  pathName: string;
-  pageName: string;
-  tabName: HostsTableType | undefined;
-  [CONSTANTS.appQuery]?: Query;
-  [CONSTANTS.filters]?: Filter[];
-  [CONSTANTS.savedQuery]?: string;
-  [CONSTANTS.timerange]: UrlInputsModel;
-  [CONSTANTS.timeline]: TimelineUrl;
-}
-
-export interface TabNavigationItemProps {
-  href: string;
-  hrefWithSearch: string;
-  id: string;
-  disabled: boolean;
-  name: string;
-  isSelected: boolean;
-}
diff --git a/x-pack/plugins/siem/public/components/navigation/types.ts b/x-pack/plugins/siem/public/components/navigation/types.ts
deleted file mode 100644
index e8a2865938062b..00000000000000
--- a/x-pack/plugins/siem/public/components/navigation/types.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * 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 { Filter, Query } from '../../../../../../src/plugins/data/public';
-import { HostsTableType } from '../../store/hosts/model';
-import { UrlInputsModel } from '../../store/inputs/model';
-import { TimelineUrl } from '../../store/timeline/model';
-import { CONSTANTS, UrlStateType } from '../url_state/constants';
-
-export interface SiemNavigationProps {
-  display?: 'default' | 'condensed';
-  navTabs: Record<string, NavTab>;
-}
-
-export interface SiemNavigationComponentProps {
-  pathName: string;
-  pageName: string;
-  tabName: HostsTableType | undefined;
-  urlState: {
-    [CONSTANTS.appQuery]?: Query;
-    [CONSTANTS.filters]?: Filter[];
-    [CONSTANTS.savedQuery]?: string;
-    [CONSTANTS.timerange]: UrlInputsModel;
-    [CONSTANTS.timeline]: TimelineUrl;
-  };
-}
-
-export type SearchNavTab = NavTab | { urlKey: UrlStateType; isDetailPage: boolean };
-
-export interface NavTab {
-  id: string;
-  name: string;
-  href: string;
-  disabled: boolean;
-  urlKey: UrlStateType;
-  isDetailPage?: boolean;
-}
diff --git a/x-pack/plugins/siem/public/components/netflow/index.test.tsx b/x-pack/plugins/siem/public/components/netflow/index.test.tsx
deleted file mode 100644
index ecf162ebf2739a..00000000000000
--- a/x-pack/plugins/siem/public/components/netflow/index.test.tsx
+++ /dev/null
@@ -1,534 +0,0 @@
-/*
- * 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 { get } from 'lodash/fp';
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import { asArrayIfExists } from '../../lib/helpers';
-import { getMockNetflowData } from '../../mock';
-import { TestProviders } from '../../mock/test_providers';
-import {
-  TLS_CLIENT_CERTIFICATE_FINGERPRINT_SHA1_FIELD_NAME,
-  TLS_SERVER_CERTIFICATE_FINGERPRINT_SHA1_FIELD_NAME,
-} from '../certificate_fingerprint';
-import { EVENT_DURATION_FIELD_NAME } from '../duration';
-import { ID_FIELD_NAME } from '../event_details/event_id';
-import { DESTINATION_IP_FIELD_NAME, SOURCE_IP_FIELD_NAME } from '../ip';
-import { JA3_HASH_FIELD_NAME } from '../ja3_fingerprint';
-import { DESTINATION_PORT_FIELD_NAME, SOURCE_PORT_FIELD_NAME } from '../port';
-import {
-  DESTINATION_GEO_CITY_NAME_FIELD_NAME,
-  DESTINATION_GEO_CONTINENT_NAME_FIELD_NAME,
-  DESTINATION_GEO_COUNTRY_ISO_CODE_FIELD_NAME,
-  DESTINATION_GEO_COUNTRY_NAME_FIELD_NAME,
-  DESTINATION_GEO_REGION_NAME_FIELD_NAME,
-  SOURCE_GEO_CITY_NAME_FIELD_NAME,
-  SOURCE_GEO_CONTINENT_NAME_FIELD_NAME,
-  SOURCE_GEO_COUNTRY_ISO_CODE_FIELD_NAME,
-  SOURCE_GEO_COUNTRY_NAME_FIELD_NAME,
-  SOURCE_GEO_REGION_NAME_FIELD_NAME,
-} from '../source_destination/geo_fields';
-import {
-  DESTINATION_BYTES_FIELD_NAME,
-  DESTINATION_PACKETS_FIELD_NAME,
-  SOURCE_BYTES_FIELD_NAME,
-  SOURCE_PACKETS_FIELD_NAME,
-} from '../source_destination/source_destination_arrows';
-import * as i18n from '../timeline/body/renderers/translations';
-
-import { Netflow } from '.';
-import {
-  EVENT_END_FIELD_NAME,
-  EVENT_START_FIELD_NAME,
-} from './netflow_columns/duration_event_start_end';
-import { PROCESS_NAME_FIELD_NAME, USER_NAME_FIELD_NAME } from './netflow_columns/user_process';
-import {
-  NETWORK_BYTES_FIELD_NAME,
-  NETWORK_DIRECTION_FIELD_NAME,
-  NETWORK_COMMUNITY_ID_FIELD_NAME,
-  NETWORK_PACKETS_FIELD_NAME,
-  NETWORK_PROTOCOL_FIELD_NAME,
-  NETWORK_TRANSPORT_FIELD_NAME,
-} from '../source_destination/field_names';
-import { useMountAppended } from '../../utils/use_mount_appended';
-
-const getNetflowInstance = () => (
-  <Netflow
-    contextId="test"
-    destinationBytes={asArrayIfExists(get(DESTINATION_BYTES_FIELD_NAME, getMockNetflowData()))}
-    destinationGeoContinentName={asArrayIfExists(
-      get(DESTINATION_GEO_CONTINENT_NAME_FIELD_NAME, getMockNetflowData())
-    )}
-    destinationGeoCountryName={asArrayIfExists(
-      get(DESTINATION_GEO_COUNTRY_NAME_FIELD_NAME, getMockNetflowData())
-    )}
-    destinationGeoCountryIsoCode={asArrayIfExists(
-      get(DESTINATION_GEO_COUNTRY_ISO_CODE_FIELD_NAME, getMockNetflowData())
-    )}
-    destinationGeoRegionName={asArrayIfExists(
-      get(DESTINATION_GEO_REGION_NAME_FIELD_NAME, getMockNetflowData())
-    )}
-    destinationGeoCityName={asArrayIfExists(
-      get(DESTINATION_GEO_CITY_NAME_FIELD_NAME, getMockNetflowData())
-    )}
-    destinationIp={asArrayIfExists(get(DESTINATION_IP_FIELD_NAME, getMockNetflowData()))}
-    destinationPackets={asArrayIfExists(get(DESTINATION_PACKETS_FIELD_NAME, getMockNetflowData()))}
-    destinationPort={asArrayIfExists(get(DESTINATION_PORT_FIELD_NAME, getMockNetflowData()))}
-    eventDuration={asArrayIfExists(get(EVENT_DURATION_FIELD_NAME, getMockNetflowData()))}
-    eventId={get(ID_FIELD_NAME, getMockNetflowData())}
-    eventEnd={asArrayIfExists(get(EVENT_END_FIELD_NAME, getMockNetflowData()))}
-    eventStart={asArrayIfExists(get(EVENT_START_FIELD_NAME, getMockNetflowData()))}
-    networkBytes={asArrayIfExists(get(NETWORK_BYTES_FIELD_NAME, getMockNetflowData()))}
-    networkCommunityId={asArrayIfExists(get(NETWORK_COMMUNITY_ID_FIELD_NAME, getMockNetflowData()))}
-    networkDirection={asArrayIfExists(get(NETWORK_DIRECTION_FIELD_NAME, getMockNetflowData()))}
-    networkPackets={asArrayIfExists(get(NETWORK_PACKETS_FIELD_NAME, getMockNetflowData()))}
-    networkProtocol={asArrayIfExists(get(NETWORK_PROTOCOL_FIELD_NAME, getMockNetflowData()))}
-    processName={asArrayIfExists(get(PROCESS_NAME_FIELD_NAME, getMockNetflowData()))}
-    sourceBytes={asArrayIfExists(get(SOURCE_BYTES_FIELD_NAME, getMockNetflowData()))}
-    sourceGeoContinentName={asArrayIfExists(
-      get(SOURCE_GEO_CONTINENT_NAME_FIELD_NAME, getMockNetflowData())
-    )}
-    sourceGeoCountryName={asArrayIfExists(
-      get(SOURCE_GEO_COUNTRY_NAME_FIELD_NAME, getMockNetflowData())
-    )}
-    sourceGeoCountryIsoCode={asArrayIfExists(
-      get(SOURCE_GEO_COUNTRY_ISO_CODE_FIELD_NAME, getMockNetflowData())
-    )}
-    sourceGeoRegionName={asArrayIfExists(
-      get(SOURCE_GEO_REGION_NAME_FIELD_NAME, getMockNetflowData())
-    )}
-    sourceGeoCityName={asArrayIfExists(get(SOURCE_GEO_CITY_NAME_FIELD_NAME, getMockNetflowData()))}
-    sourceIp={asArrayIfExists(get(SOURCE_IP_FIELD_NAME, getMockNetflowData()))}
-    sourcePackets={asArrayIfExists(get(SOURCE_PACKETS_FIELD_NAME, getMockNetflowData()))}
-    sourcePort={asArrayIfExists(get(SOURCE_PORT_FIELD_NAME, getMockNetflowData()))}
-    tlsClientCertificateFingerprintSha1={asArrayIfExists(
-      get(TLS_CLIENT_CERTIFICATE_FINGERPRINT_SHA1_FIELD_NAME, getMockNetflowData())
-    )}
-    tlsFingerprintsJa3Hash={asArrayIfExists(get(JA3_HASH_FIELD_NAME, getMockNetflowData()))}
-    tlsServerCertificateFingerprintSha1={asArrayIfExists(
-      get(TLS_SERVER_CERTIFICATE_FINGERPRINT_SHA1_FIELD_NAME, getMockNetflowData())
-    )}
-    transport={asArrayIfExists(get(NETWORK_TRANSPORT_FIELD_NAME, getMockNetflowData()))}
-    userName={asArrayIfExists(get(USER_NAME_FIELD_NAME, getMockNetflowData()))}
-  />
-);
-
-describe('Netflow', () => {
-  const mount = useMountAppended();
-
-  test('renders correctly against snapshot', () => {
-    const wrapper = shallow(getNetflowInstance());
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  test('it renders a destination label', () => {
-    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="destination-label"]')
-        .first()
-        .text()
-    ).toEqual(i18n.DESTINATION);
-  });
-
-  test('it renders destination.bytes', () => {
-    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="destination-bytes"]')
-        .first()
-        .text()
-    ).toEqual('40B');
-  });
-
-  test('it renders destination.geo.continent_name', () => {
-    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="destination.geo.continent_name"]')
-        .first()
-        .text()
-    ).toEqual('North America');
-  });
-
-  test('it renders destination.geo.country_name', () => {
-    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="destination.geo.country_name"]')
-        .first()
-        .text()
-    ).toEqual('United States');
-  });
-
-  test('it renders destination.geo.country_iso_code', () => {
-    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="destination.geo.country_iso_code"]')
-        .first()
-        .text()
-    ).toEqual('US');
-  });
-
-  test('it renders destination.geo.region_name', () => {
-    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="destination.geo.region_name"]')
-        .first()
-        .text()
-    ).toEqual('New York');
-  });
-
-  test('it renders destination.geo.city_name', () => {
-    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="destination.geo.city_name"]')
-        .first()
-        .text()
-    ).toEqual('New York');
-  });
-
-  test('it renders the destination ip and port, separated with a colon', () => {
-    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="destination-ip-and-port"]')
-        .first()
-        .text()
-    ).toEqual('10.1.2.3:80');
-  });
-
-  test('it renders destination.packets', () => {
-    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="destination-packets"]')
-        .first()
-        .text()
-    ).toEqual('1 pkts');
-  });
-
-  test('it hyperlinks links destination.port to an external service that describes the purpose of the port', () => {
-    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="destination-ip-and-port"]')
-        .find('[data-test-subj="port-or-service-name-link"]')
-        .first()
-        .props().href
-    ).toEqual(
-      'https://www.iana.org/assignments/service-names-port-numbers/service-names-port-numbers.xhtml?search=80'
-    );
-  });
-
-  test('it renders event.duration', () => {
-    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="event-duration"]')
-        .first()
-        .text()
-    ).toEqual('1ms');
-  });
-
-  test('it renders event.end', () => {
-    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="event-end"]')
-        .first()
-        .text().length
-    ).toBeGreaterThan(0); // the format of this date will depend on the user's locale and settings
-  });
-
-  test('it renders event.start', () => {
-    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="event-start"]')
-        .first()
-        .text().length
-    ).toBeGreaterThan(0); // the format of this date will depend on the user's locale and settings
-  });
-
-  test('it renders network.bytes', () => {
-    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="network-bytes"]')
-        .first()
-        .text()
-    ).toEqual('100B');
-  });
-
-  test('it renders network.community_id', () => {
-    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="network-community-id"]')
-        .first()
-        .text()
-    ).toEqual('we.live.in.a');
-  });
-
-  test('it renders network.direction', () => {
-    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="network-direction"]')
-        .first()
-        .text()
-    ).toEqual('outgoing');
-  });
-
-  test('it renders network.packets', () => {
-    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="network-packets"]')
-        .first()
-        .text()
-    ).toEqual('3 pkts');
-  });
-
-  test('it renders network.protocol', () => {
-    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="network-protocol"]')
-        .first()
-        .text()
-    ).toEqual('http');
-  });
-
-  test('it renders process.name', () => {
-    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="process-name"]')
-        .first()
-        .text()
-    ).toEqual('rat');
-  });
-
-  test('it renders a source label', () => {
-    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="source-label"]')
-        .first()
-        .text()
-    ).toEqual(i18n.SOURCE);
-  });
-
-  test('it renders source.bytes', () => {
-    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="source-bytes"]')
-        .first()
-        .text()
-    ).toEqual('60B');
-  });
-
-  test('it renders source.geo.continent_name', () => {
-    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="source.geo.continent_name"]')
-        .first()
-        .text()
-    ).toEqual('North America');
-  });
-
-  test('it renders source.geo.country_name', () => {
-    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="source.geo.country_name"]')
-        .first()
-        .text()
-    ).toEqual('United States');
-  });
-
-  test('it renders source.geo.country_iso_code', () => {
-    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="source.geo.country_iso_code"]')
-        .first()
-        .text()
-    ).toEqual('US');
-  });
-
-  test('it renders source.geo.region_name', () => {
-    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="source.geo.region_name"]')
-        .first()
-        .text()
-    ).toEqual('Georgia');
-  });
-
-  test('it renders source.geo.city_name', () => {
-    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="source.geo.city_name"]')
-        .first()
-        .text()
-    ).toEqual('Atlanta');
-  });
-
-  test('it renders the source ip and port, separated with a colon', () => {
-    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="source-ip-and-port"]')
-        .first()
-        .text()
-    ).toEqual('192.168.1.2:9987');
-  });
-
-  test('it renders source.packets', () => {
-    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="source-packets"]')
-        .first()
-        .text()
-    ).toEqual('2 pkts');
-  });
-
-  test('it hyperlinks tls.client_certificate.fingerprint.sha1 site to compare the fingerprint against a known set of signatures', () => {
-    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="client-certificate-fingerprint"]')
-        .find('[data-test-subj="certificate-fingerprint-link"]')
-        .first()
-        .props().href
-    ).toEqual(
-      'https://sslbl.abuse.ch/ssl-certificates/sha1/tls.client_certificate.fingerprint.sha1-value'
-    );
-  });
-
-  test('renders tls.client_certificate.fingerprint.sha1 text', () => {
-    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="client-certificate-fingerprint"]')
-        .find('[data-test-subj="certificate-fingerprint-link"]')
-        .first()
-        .text()
-    ).toEqual('tls.client_certificate.fingerprint.sha1-value');
-  });
-
-  test('it hyperlinks tls.fingerprints.ja3.hash site to compare the fingerprint against a known set of signatures', () => {
-    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="ja3-fingerprint-link"]')
-        .first()
-        .props().href
-    ).toEqual('https://sslbl.abuse.ch/ja3-fingerprints/tls.fingerprints.ja3.hash-value');
-  });
-
-  test('renders tls.fingerprints.ja3.hash text', () => {
-    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="ja3-fingerprint-link"]')
-        .first()
-        .text()
-    ).toEqual('tls.fingerprints.ja3.hash-value');
-  });
-
-  test('it hyperlinks tls.server_certificate.fingerprint.sha1 site to compare the fingerprint against a known set of signatures', () => {
-    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="server-certificate-fingerprint"]')
-        .find('[data-test-subj="certificate-fingerprint-link"]')
-        .first()
-        .props().href
-    ).toEqual(
-      'https://sslbl.abuse.ch/ssl-certificates/sha1/tls.server_certificate.fingerprint.sha1-value'
-    );
-  });
-
-  test('renders tls.server_certificate.fingerprint.sha1 text', () => {
-    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="server-certificate-fingerprint"]')
-        .find('[data-test-subj="certificate-fingerprint-link"]')
-        .first()
-        .text()
-    ).toEqual('tls.server_certificate.fingerprint.sha1-value');
-  });
-
-  test('it renders network.transport', () => {
-    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="network-transport"]')
-        .first()
-        .text()
-    ).toEqual('tcp');
-  });
-
-  test('it renders user.name', () => {
-    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="user-name"]')
-        .first()
-        .text()
-    ).toEqual('first.last');
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/netflow/netflow_columns/index.tsx b/x-pack/plugins/siem/public/components/netflow/netflow_columns/index.tsx
deleted file mode 100644
index f8a0256ff4d435..00000000000000
--- a/x-pack/plugins/siem/public/components/netflow/netflow_columns/index.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-/*
- * 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 { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import React from 'react';
-import styled from 'styled-components';
-
-import { SourceDestination } from '../../source_destination';
-
-import { DurationEventStartEnd } from './duration_event_start_end';
-import { NetflowColumnsProps } from './types';
-import { UserProcess } from './user_process';
-
-export const EVENT_START = 'event.start';
-export const EVENT_END = 'event.end';
-
-const EuiFlexItemMarginRight = styled(EuiFlexItem)`
-  margin-right: 10px;
-`;
-
-EuiFlexItemMarginRight.displayName = 'EuiFlexItemMarginRight';
-
-/**
- * Renders columns of draggable badges that describe both Netflow data, or more
- * generally, hosts interacting over a network connection. This component is
- * consumed by the `Netflow` visualization / row renderer.
- *
- * 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 = React.memo<NetflowColumnsProps>(
-  ({
-    contextId,
-    destinationBytes,
-    destinationGeoContinentName,
-    destinationGeoCountryName,
-    destinationGeoCountryIsoCode,
-    destinationGeoRegionName,
-    destinationGeoCityName,
-    destinationIp,
-    destinationPackets,
-    destinationPort,
-    eventDuration,
-    eventId,
-    eventEnd,
-    eventStart,
-    networkBytes,
-    networkCommunityId,
-    networkDirection,
-    networkPackets,
-    networkProtocol,
-    processName,
-    sourceBytes,
-    sourceGeoContinentName,
-    sourceGeoCountryName,
-    sourceGeoCountryIsoCode,
-    sourceGeoRegionName,
-    sourceGeoCityName,
-    sourceIp,
-    sourcePackets,
-    sourcePort,
-    transport,
-    userName,
-  }) => (
-    <EuiFlexGroup
-      data-test-subj="netflow-columns"
-      gutterSize="none"
-      justifyContent="center"
-      wrap={true}
-    >
-      <EuiFlexItemMarginRight grow={false}>
-        <UserProcess
-          contextId={contextId}
-          eventId={eventId}
-          processName={processName}
-          userName={userName}
-        />
-      </EuiFlexItemMarginRight>
-
-      <EuiFlexItemMarginRight grow={false}>
-        <DurationEventStartEnd
-          contextId={contextId}
-          eventDuration={eventDuration}
-          eventId={eventId}
-          eventEnd={eventEnd}
-          eventStart={eventStart}
-        />
-      </EuiFlexItemMarginRight>
-
-      <EuiFlexItem grow={false}>
-        <SourceDestination
-          contextId={contextId}
-          destinationBytes={destinationBytes}
-          destinationGeoContinentName={destinationGeoContinentName}
-          destinationGeoCountryName={destinationGeoCountryName}
-          destinationGeoCountryIsoCode={destinationGeoCountryIsoCode}
-          destinationGeoRegionName={destinationGeoRegionName}
-          destinationGeoCityName={destinationGeoCityName}
-          destinationIp={destinationIp}
-          destinationPackets={destinationPackets}
-          destinationPort={destinationPort}
-          eventId={eventId}
-          networkBytes={networkBytes}
-          networkCommunityId={networkCommunityId}
-          networkDirection={networkDirection}
-          networkPackets={networkPackets}
-          networkProtocol={networkProtocol}
-          sourceBytes={sourceBytes}
-          sourceGeoContinentName={sourceGeoContinentName}
-          sourceGeoCountryName={sourceGeoCountryName}
-          sourceGeoCountryIsoCode={sourceGeoCountryIsoCode}
-          sourceGeoRegionName={sourceGeoRegionName}
-          sourceGeoCityName={sourceGeoCityName}
-          sourceIp={sourceIp}
-          sourcePackets={sourcePackets}
-          sourcePort={sourcePort}
-          transport={transport}
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  )
-);
-
-NetflowColumns.displayName = 'NetflowColumns';
diff --git a/x-pack/plugins/siem/public/components/news_feed/helpers.test.ts b/x-pack/plugins/siem/public/components/news_feed/helpers.test.ts
deleted file mode 100644
index 96bd9b08bf8bf0..00000000000000
--- a/x-pack/plugins/siem/public/components/news_feed/helpers.test.ts
+++ /dev/null
@@ -1,492 +0,0 @@
-/*
- * 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 { NEWS_FEED_URL_SETTING_DEFAULT } from '../../../common/constants';
-import { KibanaServices } from '../../lib/kibana';
-import { rawNewsApiResponse } from '../../mock/news';
-import { rawNewsJSON } from '../../mock/raw_news';
-
-import {
-  fetchNews,
-  getLocale,
-  getNewsFeedUrl,
-  getNewsItemsFromApiResponse,
-  removeSnapshotFromVersion,
-  showNewsItem,
-} from './helpers';
-import { NewsItem, RawNewsApiResponse } from './types';
-
-jest.mock('../../lib/kibana');
-
-describe('helpers', () => {
-  describe('removeSnapshotFromVersion', () => {
-    test('it should remove an all-caps `-SNAPSHOT`', () => {
-      const version = '8.0.0-SNAPSHOT';
-
-      expect(removeSnapshotFromVersion(version)).toEqual('8.0.0');
-    });
-
-    test('it should remove a mixed-case `-SnApShoT`', () => {
-      const version = '8.0.0-SnApShoT';
-
-      expect(removeSnapshotFromVersion(version)).toEqual('8.0.0');
-    });
-
-    test('it should remove all occurrences of `-SNAPSHOT`, regardless of where they appear in the version', () => {
-      const version = '-SNAPSHOT8.0.0-SNAPSHOT';
-
-      expect(removeSnapshotFromVersion(version)).toEqual('8.0.0');
-    });
-
-    test('it should NOT transform a version when it does not contain a `-SNAPSHOT`', () => {
-      const version = '8.0.0';
-
-      expect(removeSnapshotFromVersion(version)).toEqual('8.0.0');
-    });
-
-    test('it should NOT transform a version if it omits the dash in `SNAPSHOT`', () => {
-      const version = '8.0.0SNAPSHOT';
-
-      expect(removeSnapshotFromVersion(version)).toEqual('8.0.0SNAPSHOT');
-    });
-
-    test('it should NOT transform a version if has only a partial `-SNAPSHOT`', () => {
-      const version = '8.0.0-SNAP';
-
-      expect(removeSnapshotFromVersion(version)).toEqual('8.0.0-SNAP');
-    });
-
-    test('it should NOT transform an undefined version', () => {
-      const version = undefined;
-
-      expect(removeSnapshotFromVersion(version)).toBeUndefined();
-    });
-
-    test('it should NOT transform an empty version', () => {
-      const version = '';
-
-      expect(removeSnapshotFromVersion(version)).toEqual('');
-    });
-  });
-
-  describe('getNewsFeedUrl', () => {
-    const getKibanaVersion = () => '8.0.0';
-
-    test('it combines the (default) base URL from settings and the Kibana version to return the expected URL', () => {
-      expect(
-        getNewsFeedUrl({ newsFeedUrlSetting: NEWS_FEED_URL_SETTING_DEFAULT, getKibanaVersion })
-      ).toEqual('https://feeds.elastic.co/security-solution/v8.0.0.json');
-    });
-
-    test('it combines a URL with extra whitespace and the Kibana version to return the expected URL', () => {
-      const withExtraWhitespace = `   ${NEWS_FEED_URL_SETTING_DEFAULT}   `;
-
-      expect(getNewsFeedUrl({ newsFeedUrlSetting: withExtraWhitespace, getKibanaVersion })).toEqual(
-        'https://feeds.elastic.co/security-solution/v8.0.0.json'
-      );
-    });
-
-    test('it combines a URL with a trailing slash and the Kibana version to return the expected URL', () => {
-      const withTrailingSlash = `${NEWS_FEED_URL_SETTING_DEFAULT}/`;
-
-      expect(getNewsFeedUrl({ newsFeedUrlSetting: withTrailingSlash, getKibanaVersion })).toEqual(
-        'https://feeds.elastic.co/security-solution/v8.0.0.json'
-      );
-    });
-
-    test('it combines a URL with a trailing slash plus whitespace and the Kibana version to return the expected URL', () => {
-      const withTrailingSlashPlusWhitespace = `   ${NEWS_FEED_URL_SETTING_DEFAULT}/   `;
-
-      expect(
-        getNewsFeedUrl({ newsFeedUrlSetting: withTrailingSlashPlusWhitespace, getKibanaVersion })
-      ).toEqual('https://feeds.elastic.co/security-solution/v8.0.0.json');
-    });
-
-    test('it combines a URL and a Kibana version with a `-SNAPSHOT` to return the expected URL', () => {
-      const getKibanaVersionWithSnapshot = () => '8.0.0-SNAPSHOT';
-
-      expect(
-        getNewsFeedUrl({
-          newsFeedUrlSetting: NEWS_FEED_URL_SETTING_DEFAULT,
-          getKibanaVersion: getKibanaVersionWithSnapshot,
-        })
-      ).toEqual('https://feeds.elastic.co/security-solution/v8.0.0.json');
-    });
-  });
-
-  describe('getLocale', () => {
-    const fallback = 'wowzers';
-
-    test('it returns language specified in the document', () => {
-      const lang = 'ja';
-
-      document.documentElement.lang = lang;
-
-      expect(getLocale(fallback)).toEqual(lang);
-    });
-
-    test('it returns the fallback when the language in the document is an empty string', () => {
-      document.documentElement.lang = '';
-
-      expect(getLocale(fallback)).toEqual(fallback);
-    });
-  });
-
-  describe('getNewsItemsFromApiResponse', () => {
-    const expectedNewsItems: NewsItem[] = [
-      {
-        description:
-          "There's an awesome community of Elastic SIEM users out there. Join the discussion about configuring, learning, and using the Elastic SIEM app, and detecting threats!",
-        expireOn: expect.any(Date),
-        hash: '5a35c984a9cdc1c6a25913f3d0b99b1aefc7257bc3b936c39db9fa0435edeed0',
-        imageUrl:
-          'https://aws1.discourse-cdn.com/elastic/original/3X/f/8/f8c3d0b9971cfcd0be349d973aa5799f71d280cc.png?blade=securitysolutionfeed',
-        linkUrl: 'https://discuss.elastic.co/c/siem?blade=securitysolutionfeed',
-        publishOn: expect.any(Date),
-        title: 'Got SIEM Questions?',
-      },
-      {
-        description:
-          'Elastic Security combines the threat hunting and analytics of Elastic SIEM with the prevention and response provided by Elastic Endpoint Security.',
-        expireOn: expect.any(Date),
-        hash: 'edcb2d396ffdd80bfd5a97fbc0dc9f4b73477f9be556863fe0a1caf086679420',
-        imageUrl:
-          'https://static-www.elastic.co/v3/assets/bltefdd0b53724fa2ce/blt1caa35177420c61b/5d0d0394d8ff351753cbf2c5/illustrated-screenshot-hero-siem.png?blade=securitysolutionfeed',
-        linkUrl:
-          'https://www.elastic.co/blog/elastic-security-7-5-0-released?blade=securitysolutionfeed',
-        publishOn: expect.any(Date),
-        title: 'Elastic Security 7.5.0 released',
-      },
-      {
-        description:
-          'At Elastic, we’re bringing endpoint protection and SIEM together into the same experience to streamline how you secure your organization.',
-        expireOn: expect.any(Date),
-        hash: 'ec970adc85e9eede83f77e4cc6a6fea00cd7822cbe48a71dc2c5f1df10939196',
-        imageUrl:
-          'https://static-www.elastic.co/v3/assets/bltefdd0b53724fa2ce/bltd0eb8689eafe398a/5d970ecc1970e80e85277925/illustration-endpoint-hero.png?blade=securitysolutionfeed',
-        linkUrl:
-          'https://www.elastic.co/webinars/elastic-endpoint-security-overview-security-starts-at-the-endpoint?blade=securitysolutionfeed',
-        publishOn: expect.any(Date),
-        title: 'Elastic Endpoint Security Overview Webinar',
-      },
-      {
-        description:
-          'For small businesses and homes, having access to effective security analytics can come at a high cost of either time or money. Well, until now!',
-        expireOn: expect.any(Date),
-        hash: 'aa243fd5845356a5ccd54a7a11b208ed307e0d88158873b1fcf7d1164b739bac',
-        imageUrl:
-          'https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt024c26b7636cb24f/5daf4e293a326d6df6c0e025/home-siem-blog-1-map.jpg?blade=securitysolutionfeed',
-        linkUrl:
-          'https://www.elastic.co/blog/elastic-siem-for-small-business-and-home-1-getting-started?blade=securitysolutionfeed',
-        publishOn: expect.any(Date),
-        title: 'Trying Elastic SIEM at Home?',
-      },
-      {
-        description:
-          'Elastic is excited to announce the introduction of Elastic Endpoint Security, based on Elastic’s acquisition of Endgame, a pioneer and industry-recognized leader in endpoint threat prevention, detection, and response.',
-        expireOn: expect.any(Date),
-        hash: '3c64576c9749d33ff98726d641cdf2fb2bfde3dd9a6f99ff2573ac8d8c5b2c02',
-        imageUrl:
-          'https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt1f87637fb7870298/5d9fe27bf8ca980f8717f6f8/screenshot-resolver-trickbot-enrichments-showing-defender-shutdown-endgame-2-optimized.png?blade=securitysolutionfeed',
-        linkUrl:
-          'https://www.elastic.co/blog/introducing-elastic-endpoint-security?blade=securitysolutionfeed',
-        publishOn: expect.any(Date),
-        title: 'Introducing Elastic Endpoint Security',
-      },
-      {
-        description:
-          'Elastic SIEM is powered by Elastic Common Schema. With ECS, analytics content such as dashboards, rules, and machine learning jobs can be applied more broadly, searches can be crafted more narrowly, and field names are easier to remember.',
-        expireOn: expect.any(Date),
-        hash: 'b8a0d3d21e9638bde891ab5eb32594b3d7a3daacc7f0900c6dd506d5d7b42410',
-        imageUrl:
-          'https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt71256f06dc672546/5c98d595975fd58f4d12646d/ecs-intro-dashboard-1360.jpg?blade=securitysolutionfeed',
-        linkUrl:
-          'https://www.elastic.co/blog/introducing-the-elastic-common-schema?blade=securitysolutionfeed',
-        publishOn: expect.any(Date),
-        title: 'What is Elastic Common Schema (ECS)?',
-      },
-    ];
-
-    test('it returns an empty collection of news items when the response is undefined', () => {
-      expect(getNewsItemsFromApiResponse(undefined)).toEqual([]);
-    });
-
-    test('it returns an empty collection of news items when the response is null', () => {
-      expect(getNewsItemsFromApiResponse(null)).toEqual([]);
-    });
-
-    test('it returns an empty collection of news items when the response items are undefined', () => {
-      expect(getNewsItemsFromApiResponse({ items: undefined })).toEqual([]);
-    });
-
-    test('it returns an empty collection of news items when the response items are null', () => {
-      expect(getNewsItemsFromApiResponse({ items: null })).toEqual([]);
-    });
-
-    test('it returns the expected news items when the browser language matches the i18n values in the response', () => {
-      const lang = 'en';
-
-      document.documentElement.lang = lang;
-
-      expect(getNewsItemsFromApiResponse(rawNewsApiResponse)).toEqual(expectedNewsItems);
-    });
-
-    test('it returns the expected news items when an ALL CAPS the browser language matches the i18n values in the response', () => {
-      const allCapsLang = 'EN';
-
-      document.documentElement.lang = allCapsLang;
-
-      expect(getNewsItemsFromApiResponse(rawNewsApiResponse)).toEqual(expectedNewsItems);
-    });
-
-    test('it returns the expected news items when the browser language does NOT match the i18n values in the response', () => {
-      const nonMatchingLang = 'ja';
-
-      document.documentElement.lang = nonMatchingLang;
-
-      expect(getNewsItemsFromApiResponse(rawNewsApiResponse)).toEqual(expectedNewsItems);
-    });
-
-    test('it returns the expected news items when the browser language is an empty string', () => {
-      const emptyLang = '';
-
-      document.documentElement.lang = emptyLang;
-
-      expect(getNewsItemsFromApiResponse(rawNewsApiResponse)).toEqual(expectedNewsItems);
-    });
-
-    test('it returns the expected news item when parsing a raw JSON response', () => {
-      const lang = 'en';
-
-      document.documentElement.lang = lang;
-
-      expect(getNewsItemsFromApiResponse(JSON.parse(rawNewsJSON))).toEqual(expectedNewsItems);
-    });
-
-    describe('translated items', () => {
-      const translatedDescription =
-        'Elastic SIEMユーザーの素晴らしいコミュニティがそこにあります。 Elastic SIEMアプリの設定、学習、使用、および脅威の検出に関するディスカッションに参加してください！';
-      const translatedImageUrl = 'https://aws1.discourse-cdn.com/elastic/translated-image-url';
-      const translatedLinkUrl = 'https://discuss.elastic.co/translated-link-url';
-      const translatedTitle = 'SIEMに関する質問はありますか？';
-
-      const withNonDefaultTranslations: RawNewsApiResponse = {
-        items: [
-          {
-            title: { en: 'Got SIEM Questions?', ja: translatedTitle },
-            description: {
-              en:
-                "There's an awesome community of Elastic SIEM users out there. Join the discussion about configuring, learning, and using the Elastic SIEM app, and detecting threats!",
-              ja: translatedDescription,
-            },
-            link_text: null,
-            link_url: {
-              en: 'https://discuss.elastic.co/c/siem?blade=securitysolutionfeed',
-              ja: translatedLinkUrl,
-            },
-            languages: null,
-            badge: { en: '7.6' },
-            image_url: {
-              en:
-                'https://aws1.discourse-cdn.com/elastic/original/3X/f/8/f8c3d0b9971cfcd0be349d973aa5799f71d280cc.png?blade=securitysolutionfeed',
-              ja: translatedImageUrl,
-            },
-            publish_on: new Date('2020-01-01T00:00:00'),
-            expire_on: new Date('2020-12-31T00:00:00'),
-          },
-        ],
-      };
-
-      test('it returns a translated description when the browser language matches additional translated content', () => {
-        const lang = 'ja'; // an additional translation for this language is provided in the response
-
-        document.documentElement.lang = lang;
-
-        expect(getNewsItemsFromApiResponse(withNonDefaultTranslations)[0].description).toEqual(
-          translatedDescription
-        );
-      });
-
-      test('it returns a translated imageUrl when the browser language matches additional translated content', () => {
-        const lang = 'ja'; // a translation for this language is provided in the response
-
-        document.documentElement.lang = lang;
-
-        expect(getNewsItemsFromApiResponse(withNonDefaultTranslations)[0].imageUrl).toEqual(
-          translatedImageUrl
-        );
-      });
-
-      test('it returns a translated linkUrl when the browser language matches additional translated content', () => {
-        const lang = 'ja'; // a translation for this language is provided in the response
-
-        document.documentElement.lang = lang;
-
-        expect(getNewsItemsFromApiResponse(withNonDefaultTranslations)[0].linkUrl).toEqual(
-          translatedLinkUrl
-        );
-      });
-
-      test('it returns a translated title when the browser language matches additional translated content', () => {
-        const lang = 'ja'; // a translation for this language is provided in the response
-
-        document.documentElement.lang = lang;
-
-        expect(getNewsItemsFromApiResponse(withNonDefaultTranslations)[0].title).toEqual(
-          translatedTitle
-        );
-      });
-
-      test('it returns the default translated title when the browser language matches additional translated content', () => {
-        const lang = 'fr'; // no translation for this language
-
-        document.documentElement.lang = lang;
-
-        expect(getNewsItemsFromApiResponse(withNonDefaultTranslations)[0].title).toEqual(
-          'Got SIEM Questions?'
-        );
-      });
-
-      test('it returns the default translated title when the browser language is an empty string', () => {
-        const lang = ''; // just an empty string
-
-        document.documentElement.lang = lang;
-
-        expect(getNewsItemsFromApiResponse(withNonDefaultTranslations)[0].title).toEqual(
-          'Got SIEM Questions?'
-        );
-      });
-    });
-
-    test('it generates a news item hash when an item does NOT include it', () => {
-      const lang = 'en';
-
-      const itemHasNoHash: RawNewsApiResponse = {
-        items: [
-          {
-            title: { en: 'Got SIEM Questions?' },
-            description: {
-              en: 'some description',
-            },
-            link_text: null,
-            link_url: { en: 'https://example.com/link-url' },
-            languages: null,
-            badge: { en: '7.6' },
-            image_url: {
-              en: 'https://example.com/image-url',
-            },
-            publish_on: new Date('2020-01-01T00:00:00'),
-            expire_on: new Date('2020-12-31T00:00:00'),
-          },
-        ],
-      };
-
-      document.documentElement.lang = lang;
-
-      expect(getNewsItemsFromApiResponse(itemHasNoHash)[0].hash.length).toBeGreaterThan(0);
-    });
-  });
-
-  describe('fetchNews', () => {
-    const mockKibanaServices = KibanaServices.get as jest.Mock;
-    const fetchMock = jest.fn();
-    mockKibanaServices.mockReturnValue({ http: { fetch: fetchMock } });
-
-    beforeEach(() => {
-      fetchMock.mockClear();
-      fetchMock.mockResolvedValue(rawNewsApiResponse);
-    });
-
-    test('it returns the raw API response from the news feed', async () => {
-      const newsFeedUrl = 'https://feeds.elastic.co/security-solution/v8.0.0.json';
-      expect(await fetchNews({ newsFeedUrl })).toEqual(rawNewsApiResponse);
-    });
-  });
-
-  describe('showNewsItem', () => {
-    const MOCK_DATE_NOW = 1579848101395; // 2020-01-24T06:41:41.395Z
-
-    let dateNowSpy: { mockRestore: () => void };
-
-    beforeAll(() => {
-      dateNowSpy = jest.spyOn(Date, 'now').mockImplementation(() => MOCK_DATE_NOW);
-    });
-
-    afterAll(() => {
-      dateNowSpy.mockRestore();
-    });
-
-    test('it should return true when the article has already been published, and will expire in the future', () => {
-      const alreadyPublishedAndNotExpired: NewsItem = {
-        description: 'description',
-        expireOn: new Date(MOCK_DATE_NOW + 1000),
-        hash: '5a35c984a9cdc1c6a25913f3d0b99b1aefc7257bc3b936c39db9fa0435edeed0',
-        imageUrl: 'https://example.com',
-        linkUrl: 'https://example.com',
-        publishOn: new Date(MOCK_DATE_NOW - 1000),
-        title: 'Show this post',
-      };
-
-      expect(showNewsItem(alreadyPublishedAndNotExpired)).toEqual(true);
-    });
-
-    test('it should return false when the article was published exactly "now", and will expire in the future', () => {
-      const publishedJustNowAndNotExpired: NewsItem = {
-        description: 'description',
-        expireOn: new Date(MOCK_DATE_NOW + 1000),
-        hash: '5a35c984a9cdc1c6a25913f3d0b99b1aefc7257bc3b936c39db9fa0435edeed0',
-        imageUrl: 'https://example.com',
-        linkUrl: 'https://example.com',
-        publishOn: new Date(MOCK_DATE_NOW),
-        title: 'Do NOT show this post',
-      };
-
-      expect(showNewsItem(publishedJustNowAndNotExpired)).toEqual(false);
-    });
-
-    test('it should return false when the article has not been published yet, and has not expired yet', () => {
-      const notPublishedAndNotExpired: NewsItem = {
-        description: 'description',
-        expireOn: new Date(MOCK_DATE_NOW + 5000),
-        hash: '5a35c984a9cdc1c6a25913f3d0b99b1aefc7257bc3b936c39db9fa0435edeed0',
-        imageUrl: 'https://example.com',
-        linkUrl: 'https://example.com',
-        publishOn: new Date(MOCK_DATE_NOW + 1000),
-        title: 'Do NOT show this post',
-      };
-
-      expect(showNewsItem(notPublishedAndNotExpired)).toEqual(false);
-    });
-
-    test('it should return false when the article was published in the past, and will expire exactly now', () => {
-      const alreadyPublishedAndExpiredNow: NewsItem = {
-        description: 'description',
-        expireOn: new Date(MOCK_DATE_NOW),
-        hash: '5a35c984a9cdc1c6a25913f3d0b99b1aefc7257bc3b936c39db9fa0435edeed0',
-        imageUrl: 'https://example.com',
-        linkUrl: 'https://example.com',
-        publishOn: new Date(MOCK_DATE_NOW - 1000),
-        title: 'Do NOT show this post',
-      };
-
-      expect(showNewsItem(alreadyPublishedAndExpiredNow)).toEqual(false);
-    });
-
-    test('it should return false when the article was published in the past, and it already expired', () => {
-      const articleJustExpired: NewsItem = {
-        description: 'description',
-        expireOn: new Date(MOCK_DATE_NOW - 1000),
-        hash: '5a35c984a9cdc1c6a25913f3d0b99b1aefc7257bc3b936c39db9fa0435edeed0',
-        imageUrl: 'https://example.com',
-        linkUrl: 'https://example.com',
-        publishOn: new Date(MOCK_DATE_NOW - 5000),
-        title: 'Do NOT show this post',
-      };
-
-      expect(showNewsItem(articleJustExpired)).toEqual(false);
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/notes/add_note/index.tsx b/x-pack/plugins/siem/public/components/notes/add_note/index.tsx
deleted file mode 100644
index 28cab2b46755f8..00000000000000
--- a/x-pack/plugins/siem/public/components/notes/add_note/index.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-/*
- * 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 { EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import React, { useCallback } from 'react';
-import styled from 'styled-components';
-
-import { MarkdownHint } from '../../markdown/markdown_hint';
-import {
-  AssociateNote,
-  GetNewNoteId,
-  updateAndAssociateNode,
-  UpdateInternalNewNote,
-  UpdateNote,
-} from '../helpers';
-import * as i18n from '../translations';
-
-import { NewNote } from './new_note';
-
-const AddNotesContainer = styled(EuiFlexGroup)`
-  margin-bottom: 5px;
-  user-select: none;
-`;
-
-AddNotesContainer.displayName = 'AddNotesContainer';
-
-const ButtonsContainer = styled(EuiFlexGroup)`
-  margin-top: 5px;
-`;
-
-ButtonsContainer.displayName = 'ButtonsContainer';
-
-export const CancelButton = React.memo<{ onCancelAddNote: () => void }>(({ onCancelAddNote }) => (
-  <EuiButtonEmpty data-test-subj="cancel" onClick={onCancelAddNote}>
-    {i18n.CANCEL}
-  </EuiButtonEmpty>
-));
-
-CancelButton.displayName = 'CancelButton';
-
-/** Displays an input for entering a new note, with an adjacent "Add" button */
-export const AddNote = React.memo<{
-  associateNote: AssociateNote;
-  getNewNoteId: GetNewNoteId;
-  newNote: string;
-  onCancelAddNote?: () => void;
-  updateNewNote: UpdateInternalNewNote;
-  updateNote: UpdateNote;
-}>(({ associateNote, getNewNoteId, newNote, onCancelAddNote, updateNewNote, updateNote }) => {
-  const handleClick = useCallback(
-    () =>
-      updateAndAssociateNode({
-        associateNote,
-        getNewNoteId,
-        newNote,
-        updateNewNote,
-        updateNote,
-      }),
-    [associateNote, getNewNoteId, newNote, updateNewNote, updateNote]
-  );
-
-  return (
-    <AddNotesContainer alignItems="flexEnd" direction="column" gutterSize="none">
-      <NewNote note={newNote} noteInputHeight={200} updateNewNote={updateNewNote} />
-      <EuiFlexItem grow={true}>
-        <MarkdownHint show={newNote.trim().length > 0} />
-      </EuiFlexItem>
-      <ButtonsContainer gutterSize="none">
-        {onCancelAddNote != null ? (
-          <EuiFlexItem grow={false}>
-            <CancelButton onCancelAddNote={onCancelAddNote} />
-          </EuiFlexItem>
-        ) : null}
-        <EuiFlexItem grow={false}>
-          <EuiButton
-            data-test-subj="add-note"
-            isDisabled={newNote.trim().length === 0}
-            fill={true}
-            onClick={handleClick}
-          >
-            {i18n.ADD_NOTE}
-          </EuiButton>
-        </EuiFlexItem>
-      </ButtonsContainer>
-    </AddNotesContainer>
-  );
-});
-
-AddNote.displayName = 'AddNote';
diff --git a/x-pack/plugins/siem/public/components/notes/helpers.tsx b/x-pack/plugins/siem/public/components/notes/helpers.tsx
deleted file mode 100644
index c933055186e078..00000000000000
--- a/x-pack/plugins/siem/public/components/notes/helpers.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-/*
- * 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 { EuiIcon, EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
-import moment from 'moment';
-import React from 'react';
-import styled from 'styled-components';
-
-import { Note } from '../../lib/note';
-
-import * as i18n from './translations';
-import { CountBadge } from '../page';
-
-/** Performs IO to update (or add a new) note */
-export type UpdateNote = (note: Note) => void;
-/** Performs IO to associate a note with something (e.g. a timeline, an event, etc). (The "something" is opaque to the caller) */
-export type AssociateNote = (noteId: string) => void;
-/** Performs IO to get a new note ID */
-export type GetNewNoteId = () => string;
-/** Updates the local state containing a new note being edited by the user */
-export type UpdateInternalNewNote = (newNote: string) => void;
-/** Closes the notes popover */
-export type OnClosePopover = () => void;
-/** Performs IO to associate a note with an event */
-export type AddNoteToEvent = ({ eventId, noteId }: { eventId: string; noteId: string }) => void;
-
-/**
- * Defines the behavior of the search input that appears above the table of data
- */
-export const search = {
-  box: {
-    incremental: true,
-    placeholder: i18n.SEARCH_PLACEHOLDER,
-    schema: {
-      fields: {
-        user: 'string',
-        note: 'string',
-      },
-    },
-  },
-};
-
-const TitleText = styled.h3`
-  margin: 0 5px;
-  cursor: default;
-  user-select: none;
-`;
-
-TitleText.displayName = 'TitleText';
-
-/** Displays a count of the existing notes */
-export const NotesCount = React.memo<{
-  noteIds: string[];
-}>(({ noteIds }) => (
-  <EuiFlexGroup alignItems="center" gutterSize="none">
-    <EuiFlexItem grow={false}>
-      <EuiIcon color="text" size="l" type="editorComment" />
-    </EuiFlexItem>
-
-    <EuiFlexItem grow={false}>
-      <EuiTitle size="s">
-        <TitleText>{i18n.NOTES}</TitleText>
-      </EuiTitle>
-    </EuiFlexItem>
-
-    <EuiFlexItem grow={false}>
-      <CountBadge color="hollow">{noteIds.length}</CountBadge>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-));
-
-NotesCount.displayName = 'NotesCount';
-
-/** Creates a new instance of a `note` */
-export const createNote = ({
-  newNote,
-  getNewNoteId,
-}: {
-  newNote: string;
-  getNewNoteId: GetNewNoteId;
-}): Note => ({
-  created: moment.utc().toDate(),
-  id: getNewNoteId(),
-  lastEdit: null,
-  note: newNote.trim(),
-  saveObjectId: null,
-  user: 'elastic', // TODO: get the logged-in Kibana user
-  version: null,
-});
-
-interface UpdateAndAssociateNodeParams {
-  associateNote: AssociateNote;
-  getNewNoteId: GetNewNoteId;
-  newNote: string;
-  updateNewNote: UpdateInternalNewNote;
-  updateNote: UpdateNote;
-}
-
-export const updateAndAssociateNode = ({
-  associateNote,
-  getNewNoteId,
-  newNote,
-  updateNewNote,
-  updateNote,
-}: UpdateAndAssociateNodeParams) => {
-  const note = createNote({ newNote, getNewNoteId });
-  updateNote(note); // perform IO to store the newly-created note
-  associateNote(note.id); // associate the note with the (opaque) thing
-  updateNewNote(''); // clear the input
-};
diff --git a/x-pack/plugins/siem/public/components/notes/index.tsx b/x-pack/plugins/siem/public/components/notes/index.tsx
deleted file mode 100644
index b5fef9a5e4d413..00000000000000
--- a/x-pack/plugins/siem/public/components/notes/index.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-/*
- * 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 {
-  EuiInMemoryTable,
-  EuiInMemoryTableProps,
-  EuiModalBody,
-  EuiModalHeader,
-  EuiPanel,
-  EuiSpacer,
-} from '@elastic/eui';
-import React, { useState } from 'react';
-import styled from 'styled-components';
-
-import { Note } from '../../lib/note';
-
-import { AddNote } from './add_note';
-import { columns } from './columns';
-import { AssociateNote, GetNewNoteId, NotesCount, search, UpdateNote } from './helpers';
-import { NOTES_PANEL_WIDTH, NOTES_PANEL_HEIGHT } from '../timeline/properties/notes_size';
-
-interface Props {
-  associateNote: AssociateNote;
-  getNotesByIds: (noteIds: string[]) => Note[];
-  getNewNoteId: GetNewNoteId;
-  noteIds: string[];
-  updateNote: UpdateNote;
-}
-
-const NotesPanel = styled(EuiPanel)`
-  height: ${NOTES_PANEL_HEIGHT}px;
-  width: ${NOTES_PANEL_WIDTH}px;
-
-  & thead {
-    display: none;
-  }
-`;
-
-NotesPanel.displayName = 'NotesPanel';
-
-const InMemoryTable: typeof EuiInMemoryTable & { displayName: string } = styled(
-  EuiInMemoryTable as React.ComponentType<EuiInMemoryTableProps<Note>>
-)`
-  overflow-x: hidden;
-  overflow-y: auto;
-  height: 220px;
-` as any; // eslint-disable-line @typescript-eslint/no-explicit-any
-
-InMemoryTable.displayName = 'InMemoryTable';
-
-/** A view for entering and reviewing notes */
-export const Notes = React.memo<Props>(
-  ({ associateNote, getNotesByIds, getNewNoteId, noteIds, updateNote }) => {
-    const [newNote, setNewNote] = useState('');
-
-    return (
-      <NotesPanel>
-        <EuiModalHeader>
-          <NotesCount noteIds={noteIds} />
-        </EuiModalHeader>
-
-        <EuiModalBody>
-          <AddNote
-            associateNote={associateNote}
-            getNewNoteId={getNewNoteId}
-            newNote={newNote}
-            updateNewNote={setNewNote}
-            updateNote={updateNote}
-          />
-          <EuiSpacer size="s" />
-          <InMemoryTable
-            data-test-subj="notes-table"
-            items={getNotesByIds(noteIds)}
-            columns={columns}
-            search={search}
-            sorting={true}
-          />
-        </EuiModalBody>
-      </NotesPanel>
-    );
-  }
-);
-
-Notes.displayName = 'Notes';
diff --git a/x-pack/plugins/siem/public/components/notes/note_cards/index.test.tsx b/x-pack/plugins/siem/public/components/notes/note_cards/index.test.tsx
deleted file mode 100644
index f70e841d1eefd3..00000000000000
--- a/x-pack/plugins/siem/public/components/notes/note_cards/index.test.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-/*
- * 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 { mountWithIntl } from 'test_utils/enzyme_helpers';
-import { ThemeProvider } from 'styled-components';
-import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
-
-import { Note } from '../../../lib/note';
-
-import { NoteCards } from '.';
-
-describe('NoteCards', () => {
-  const noteIds = ['abc', 'def'];
-  const theme = () => ({ eui: euiDarkVars, darkMode: true });
-
-  const getNotesByIds = (_: string[]): Note[] => [
-    {
-      created: new Date(),
-      id: 'abc',
-      lastEdit: null,
-      note: 'a fake note',
-      saveObjectId: null,
-      user: 'elastic',
-      version: null,
-    },
-    {
-      created: new Date(),
-      id: 'def',
-      lastEdit: null,
-      note: 'another fake note',
-      saveObjectId: null,
-      user: 'elastic',
-      version: null,
-    },
-  ];
-
-  test('it renders the notes column when noteIds are specified', () => {
-    const wrapper = mountWithIntl(
-      <ThemeProvider theme={theme}>
-        <NoteCards
-          associateNote={jest.fn()}
-          getNotesByIds={getNotesByIds}
-          getNewNoteId={jest.fn()}
-          noteIds={noteIds}
-          showAddNote={true}
-          toggleShowAddNote={jest.fn()}
-          updateNote={jest.fn()}
-        />
-      </ThemeProvider>
-    );
-
-    expect(wrapper.find('[data-test-subj="notes"]').exists()).toEqual(true);
-  });
-
-  test('it does NOT render the notes column when noteIds are NOT specified', () => {
-    const wrapper = mountWithIntl(
-      <ThemeProvider theme={theme}>
-        <NoteCards
-          associateNote={jest.fn()}
-          getNotesByIds={getNotesByIds}
-          getNewNoteId={jest.fn()}
-          noteIds={[]}
-          showAddNote={true}
-          toggleShowAddNote={jest.fn()}
-          updateNote={jest.fn()}
-        />
-      </ThemeProvider>
-    );
-
-    expect(wrapper.find('[data-test-subj="notes"]').exists()).toEqual(false);
-  });
-
-  test('renders note cards', () => {
-    const wrapper = mountWithIntl(
-      <ThemeProvider theme={theme}>
-        <NoteCards
-          associateNote={jest.fn()}
-          getNotesByIds={getNotesByIds}
-          getNewNoteId={jest.fn()}
-          noteIds={noteIds}
-          showAddNote={true}
-          toggleShowAddNote={jest.fn()}
-          updateNote={jest.fn()}
-        />
-      </ThemeProvider>
-    );
-
-    expect(
-      wrapper
-        .find('[data-test-subj="note-card"]')
-        .find('[data-test-subj="note-card-body"]')
-        .find('[data-test-subj="markdown-root"]')
-        .first()
-        .text()
-    ).toEqual(getNotesByIds(noteIds)[0].note);
-  });
-
-  test('it shows controls for adding notes when showAddNote is true', () => {
-    const wrapper = mountWithIntl(
-      <ThemeProvider theme={theme}>
-        <NoteCards
-          associateNote={jest.fn()}
-          getNotesByIds={getNotesByIds}
-          getNewNoteId={jest.fn()}
-          noteIds={noteIds}
-          showAddNote={true}
-          toggleShowAddNote={jest.fn()}
-          updateNote={jest.fn()}
-        />
-      </ThemeProvider>
-    );
-
-    expect(wrapper.find('[data-test-subj="add-note"]').exists()).toEqual(true);
-  });
-
-  test('it does NOT show controls for adding notes when showAddNote is false', () => {
-    const wrapper = mountWithIntl(
-      <ThemeProvider theme={theme}>
-        <NoteCards
-          associateNote={jest.fn()}
-          getNotesByIds={getNotesByIds}
-          getNewNoteId={jest.fn()}
-          noteIds={noteIds}
-          showAddNote={false}
-          toggleShowAddNote={jest.fn()}
-          updateNote={jest.fn()}
-        />
-      </ThemeProvider>
-    );
-
-    expect(wrapper.find('[data-test-subj="add-note"]').exists()).toEqual(false);
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/notes/note_cards/index.tsx b/x-pack/plugins/siem/public/components/notes/note_cards/index.tsx
deleted file mode 100644
index 6664660eb6bdc2..00000000000000
--- a/x-pack/plugins/siem/public/components/notes/note_cards/index.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-/*
- * 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 { EuiFlexGroup, EuiPanel } from '@elastic/eui';
-import React, { useState, useCallback } from 'react';
-import styled from 'styled-components';
-
-import { Note } from '../../../lib/note';
-import { AddNote } from '../add_note';
-import { AssociateNote, GetNewNoteId, UpdateNote } from '../helpers';
-import { NoteCard } from '../note_card';
-
-const AddNoteContainer = styled.div``;
-AddNoteContainer.displayName = 'AddNoteContainer';
-
-const NoteContainer = styled.div`
-  margin-top: 5px;
-`;
-NoteContainer.displayName = 'NoteContainer';
-
-interface NoteCardsCompProps {
-  children: React.ReactNode;
-}
-
-const NoteCardsComp = React.memo<NoteCardsCompProps>(({ children }) => (
-  <EuiPanel
-    data-test-subj="note-cards"
-    hasShadow={false}
-    paddingSize="none"
-    style={{ border: 'none' }}
-  >
-    {children}
-  </EuiPanel>
-));
-NoteCardsComp.displayName = 'NoteCardsComp';
-
-const NotesContainer = styled(EuiFlexGroup)`
-  padding: 0 5px;
-  margin-bottom: 5px;
-`;
-NotesContainer.displayName = 'NotesContainer';
-
-interface Props {
-  associateNote: AssociateNote;
-  getNotesByIds: (noteIds: string[]) => Note[];
-  getNewNoteId: GetNewNoteId;
-  noteIds: string[];
-  showAddNote: boolean;
-  toggleShowAddNote: () => void;
-  updateNote: UpdateNote;
-}
-
-/** A view for entering and reviewing notes */
-export const NoteCards = React.memo<Props>(
-  ({
-    associateNote,
-    getNotesByIds,
-    getNewNoteId,
-    noteIds,
-    showAddNote,
-    toggleShowAddNote,
-    updateNote,
-  }) => {
-    const [newNote, setNewNote] = useState('');
-
-    const associateNoteAndToggleShow = useCallback(
-      (noteId: string) => {
-        associateNote(noteId);
-        toggleShowAddNote();
-      },
-      [associateNote, toggleShowAddNote]
-    );
-
-    return (
-      <NoteCardsComp>
-        {noteIds.length ? (
-          <NotesContainer data-test-subj="notes" direction="column" gutterSize="none">
-            {getNotesByIds(noteIds).map(note => (
-              <NoteContainer data-test-subj="note-container" key={note.id}>
-                <NoteCard created={note.created} rawNote={note.note} user={note.user} />
-              </NoteContainer>
-            ))}
-          </NotesContainer>
-        ) : null}
-
-        {showAddNote ? (
-          <AddNoteContainer data-test-subj="add-note-container">
-            <AddNote
-              associateNote={associateNoteAndToggleShow}
-              getNewNoteId={getNewNoteId}
-              newNote={newNote}
-              onCancelAddNote={toggleShowAddNote}
-              updateNewNote={setNewNote}
-              updateNote={updateNote}
-            />
-          </AddNoteContainer>
-        ) : null}
-      </NoteCardsComp>
-    );
-  }
-);
-
-NoteCards.displayName = 'NoteCards';
diff --git a/x-pack/plugins/siem/public/components/open_timeline/export_timeline/index.tsx b/x-pack/plugins/siem/public/components/open_timeline/export_timeline/index.tsx
deleted file mode 100644
index 12cf952bb1ff86..00000000000000
--- a/x-pack/plugins/siem/public/components/open_timeline/export_timeline/index.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-/*
- * 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, { useState, useCallback } from 'react';
-import { DeleteTimelines } from '../types';
-
-import { TimelineDownloader } from './export_timeline';
-import { DeleteTimelineModalOverlay } from '../delete_timeline_modal';
-import { exportSelectedTimeline } from '../../../containers/timeline/api';
-
-export interface ExportTimeline {
-  disableExportTimelineDownloader: () => void;
-  enableExportTimelineDownloader: () => void;
-  isEnableDownloader: boolean;
-}
-
-export const useExportTimeline = (): ExportTimeline => {
-  const [isEnableDownloader, setIsEnableDownloader] = useState(false);
-
-  const enableExportTimelineDownloader = useCallback(() => {
-    setIsEnableDownloader(true);
-  }, []);
-
-  const disableExportTimelineDownloader = useCallback(() => {
-    setIsEnableDownloader(false);
-  }, []);
-
-  return {
-    disableExportTimelineDownloader,
-    enableExportTimelineDownloader,
-    isEnableDownloader,
-  };
-};
-
-const EditTimelineActionsComponent: React.FC<{
-  deleteTimelines: DeleteTimelines | undefined;
-  ids: string[];
-  isEnableDownloader: boolean;
-  isDeleteTimelineModalOpen: boolean;
-  onComplete: () => void;
-  title: string;
-}> = ({
-  deleteTimelines,
-  ids,
-  isEnableDownloader,
-  isDeleteTimelineModalOpen,
-  onComplete,
-  title,
-}) => (
-  <>
-    <TimelineDownloader
-      exportedIds={ids}
-      getExportedData={exportSelectedTimeline}
-      isEnableDownloader={isEnableDownloader}
-      onComplete={onComplete}
-    />
-    {deleteTimelines != null && (
-      <DeleteTimelineModalOverlay
-        deleteTimelines={deleteTimelines}
-        isModalOpen={isDeleteTimelineModalOpen}
-        onComplete={onComplete}
-        savedObjectIds={ids}
-        title={title}
-      />
-    )}
-  </>
-);
-
-export const EditTimelineActions = React.memo(EditTimelineActionsComponent);
-export const EditOneTimelineAction = React.memo(EditTimelineActionsComponent);
diff --git a/x-pack/plugins/siem/public/components/open_timeline/helpers.test.ts b/x-pack/plugins/siem/public/components/open_timeline/helpers.test.ts
deleted file mode 100644
index a7c0b08fc8a21e..00000000000000
--- a/x-pack/plugins/siem/public/components/open_timeline/helpers.test.ts
+++ /dev/null
@@ -1,893 +0,0 @@
-/*
- * 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 { cloneDeep, omit } from 'lodash/fp';
-import { Dispatch } from 'redux';
-
-import {
-  mockTimelineResults,
-  mockTimelineResult,
-  mockTimelineModel,
-} from '../../mock/timeline_results';
-import { timelineDefaults } from '../../store/timeline/defaults';
-import { setTimelineRangeDatePicker as dispatchSetTimelineRangeDatePicker } from '../../store/inputs/actions';
-import {
-  setKqlFilterQueryDraft as dispatchSetKqlFilterQueryDraft,
-  applyKqlFilterQuery as dispatchApplyKqlFilterQuery,
-  addTimeline as dispatchAddTimeline,
-  addNote as dispatchAddGlobalTimelineNote,
-} from '../../store/timeline/actions';
-import {
-  addNotes as dispatchAddNotes,
-  updateNote as dispatchUpdateNote,
-} from '../../store/app/actions';
-import {
-  defaultTimelineToTimelineModel,
-  getNotesCount,
-  getPinnedEventCount,
-  isUntitled,
-  omitTypenameInTimeline,
-  dispatchUpdateTimeline,
-} from './helpers';
-import { OpenTimelineResult, DispatchUpdateTimeline } from './types';
-import { KueryFilterQueryKind } from '../../store/model';
-import { Note } from '../../lib/note';
-import moment from 'moment';
-import sinon from 'sinon';
-import { TimelineType } from '../../../common/types/timeline';
-
-jest.mock('../../store/inputs/actions');
-jest.mock('../../store/timeline/actions');
-jest.mock('../../store/app/actions');
-jest.mock('uuid', () => {
-  return {
-    v1: jest.fn(() => 'uuid.v1()'),
-    v4: jest.fn(() => 'uuid.v4()'),
-  };
-});
-
-describe('helpers', () => {
-  let mockResults: OpenTimelineResult[];
-
-  beforeEach(() => {
-    mockResults = cloneDeep(mockTimelineResults);
-  });
-
-  describe('#getPinnedEventCount', () => {
-    test('returns 6 when the timeline has 6 pinned events', () => {
-      const with6Events = mockResults[0];
-
-      expect(getPinnedEventCount(with6Events)).toEqual(6);
-    });
-
-    test('returns zero when the timeline has an empty collection of pinned events', () => {
-      const withPinnedEvents = { ...mockResults[0], pinnedEventIds: {} };
-
-      expect(getPinnedEventCount(withPinnedEvents)).toEqual(0);
-    });
-
-    test('returns zero when pinnedEventIds is undefined', () => {
-      const withPinnedEvents = omit('pinnedEventIds', { ...mockResults[0] });
-
-      expect(getPinnedEventCount(withPinnedEvents)).toEqual(0);
-    });
-
-    test('returns zero when pinnedEventIds is null', () => {
-      const withPinnedEvents = omit('pinnedEventIds', { ...mockResults[0] });
-
-      expect(getPinnedEventCount(withPinnedEvents)).toEqual(0);
-    });
-  });
-
-  describe('#getNotesCount', () => {
-    test('returns a total of 4 notes when the timeline has 4 notes (event1 [2] + event2 [1] + global [1])', () => {
-      const with4Notes = mockResults[0];
-
-      expect(getNotesCount(with4Notes)).toEqual(4);
-    });
-
-    test('returns 1 note (global [1]) when eventIdToNoteIds is undefined', () => {
-      const with1Note = omit('eventIdToNoteIds', { ...mockResults[0] });
-
-      expect(getNotesCount(with1Note)).toEqual(1);
-    });
-
-    test('returns 1 note (global [1]) when eventIdToNoteIds is null', () => {
-      const eventIdToNoteIdsIsNull = {
-        ...mockResults[0],
-        eventIdToNoteIds: null,
-      };
-      expect(getNotesCount(eventIdToNoteIdsIsNull)).toEqual(1);
-    });
-
-    test('returns 1 note (global [1]) when eventIdToNoteIds is empty', () => {
-      const eventIdToNoteIdsIsEmpty = {
-        ...mockResults[0],
-        eventIdToNoteIds: {},
-      };
-      expect(getNotesCount(eventIdToNoteIdsIsEmpty)).toEqual(1);
-    });
-
-    test('returns 3 notes (event1 [2] + event2 [1]) when noteIds is undefined', () => {
-      const noteIdsIsUndefined = omit('noteIds', { ...mockResults[0] });
-
-      expect(getNotesCount(noteIdsIsUndefined)).toEqual(3);
-    });
-
-    test('returns 3 notes (event1 [2] + event2 [1]) when noteIds is null', () => {
-      const noteIdsIsNull = {
-        ...mockResults[0],
-        noteIds: null,
-      };
-
-      expect(getNotesCount(noteIdsIsNull)).toEqual(3);
-    });
-
-    test('returns 3 notes (event1 [2] + event2 [1]) when noteIds is empty', () => {
-      const noteIdsIsEmpty = {
-        ...mockResults[0],
-        noteIds: [],
-      };
-
-      expect(getNotesCount(noteIdsIsEmpty)).toEqual(3);
-    });
-
-    test('returns 0 when eventIdToNoteIds and noteIds are undefined', () => {
-      const eventIdToNoteIdsAndNoteIdsUndefined = omit(['eventIdToNoteIds', 'noteIds'], {
-        ...mockResults[0],
-      });
-
-      expect(getNotesCount(eventIdToNoteIdsAndNoteIdsUndefined)).toEqual(0);
-    });
-
-    test('returns 0 when eventIdToNoteIds and noteIds are null', () => {
-      const eventIdToNoteIdsAndNoteIdsNull = {
-        ...mockResults[0],
-        eventIdToNoteIds: null,
-        noteIds: null,
-      };
-
-      expect(getNotesCount(eventIdToNoteIdsAndNoteIdsNull)).toEqual(0);
-    });
-
-    test('returns 0 when eventIdToNoteIds and noteIds are empty', () => {
-      const eventIdToNoteIdsAndNoteIdsEmpty = {
-        ...mockResults[0],
-        eventIdToNoteIds: {},
-        noteIds: [],
-      };
-
-      expect(getNotesCount(eventIdToNoteIdsAndNoteIdsEmpty)).toEqual(0);
-    });
-  });
-
-  describe('#isUntitled', () => {
-    test('returns true when title is undefined', () => {
-      const titleIsUndefined = omit('title', {
-        ...mockResults[0],
-      });
-
-      expect(isUntitled(titleIsUndefined)).toEqual(true);
-    });
-
-    test('returns true when title is null', () => {
-      const titleIsNull = {
-        ...mockResults[0],
-        title: null,
-      };
-
-      expect(isUntitled(titleIsNull)).toEqual(true);
-    });
-
-    test('returns true when title is just whitespace', () => {
-      const titleIsWitespace = {
-        ...mockResults[0],
-        title: '    ',
-      };
-
-      expect(isUntitled(titleIsWitespace)).toEqual(true);
-    });
-
-    test('returns false when title is surrounded by whitespace', () => {
-      const titleIsWitespace = {
-        ...mockResults[0],
-        title: '  the king of the north  ',
-      };
-
-      expect(isUntitled(titleIsWitespace)).toEqual(false);
-    });
-
-    test('returns false when title is NOT surrounded by whitespace', () => {
-      const titleIsWitespace = {
-        ...mockResults[0],
-        title: 'in the beginning...',
-      };
-
-      expect(isUntitled(titleIsWitespace)).toEqual(false);
-    });
-  });
-
-  describe('#defaultTimelineToTimelineModel', () => {
-    test('if title is null, we should get the default title', () => {
-      const timeline = {
-        savedObjectId: 'savedObject-1',
-        title: null,
-        version: '1',
-      };
-
-      const newTimeline = defaultTimelineToTimelineModel(timeline, false);
-      expect(newTimeline).toEqual({
-        columns: [
-          {
-            columnHeaderType: 'not-filtered',
-            id: '@timestamp',
-            width: 190,
-          },
-          {
-            columnHeaderType: 'not-filtered',
-            id: 'message',
-            width: 180,
-          },
-          {
-            columnHeaderType: 'not-filtered',
-            id: 'event.category',
-            width: 180,
-          },
-          {
-            columnHeaderType: 'not-filtered',
-            id: 'event.action',
-            width: 180,
-          },
-          {
-            columnHeaderType: 'not-filtered',
-            id: 'host.name',
-            width: 180,
-          },
-          {
-            columnHeaderType: 'not-filtered',
-            id: 'source.ip',
-            width: 180,
-          },
-          {
-            columnHeaderType: 'not-filtered',
-            id: 'destination.ip',
-            width: 180,
-          },
-          {
-            columnHeaderType: 'not-filtered',
-            id: 'user.name',
-            width: 180,
-          },
-        ],
-        dataProviders: [],
-        dateRange: {
-          end: 0,
-          start: 0,
-        },
-        description: '',
-        deletedEventIds: [],
-        eventIdToNoteIds: {},
-        eventType: 'all',
-        filters: [],
-        highlightedDropAndProviderId: '',
-        historyIds: [],
-        id: 'savedObject-1',
-        isFavorite: false,
-        isLive: false,
-        isSelectAllChecked: false,
-        isLoading: false,
-        isSaving: false,
-        itemsPerPage: 25,
-        itemsPerPageOptions: [10, 25, 50, 100],
-        kqlMode: 'filter',
-        kqlQuery: {
-          filterQuery: null,
-          filterQueryDraft: null,
-        },
-        loadingEventIds: [],
-        noteIds: [],
-        pinnedEventIds: {},
-        pinnedEventsSaveObject: {},
-        savedObjectId: 'savedObject-1',
-        selectedEventIds: {},
-        show: false,
-        showCheckboxes: false,
-        showRowRenderers: true,
-        sort: {
-          columnId: '@timestamp',
-          sortDirection: 'desc',
-        },
-        title: '',
-        timelineType: TimelineType.default,
-        templateTimelineId: null,
-        templateTimelineVersion: null,
-        version: '1',
-        width: 1100,
-      });
-    });
-    test('if columns are null, we should get the default columns', () => {
-      const timeline = {
-        savedObjectId: 'savedObject-1',
-        columns: null,
-        version: '1',
-      };
-
-      const newTimeline = defaultTimelineToTimelineModel(timeline, false);
-      expect(newTimeline).toEqual({
-        columns: [
-          {
-            columnHeaderType: 'not-filtered',
-            id: '@timestamp',
-            width: 190,
-          },
-          {
-            columnHeaderType: 'not-filtered',
-            id: 'message',
-            width: 180,
-          },
-          {
-            columnHeaderType: 'not-filtered',
-            id: 'event.category',
-            width: 180,
-          },
-          {
-            columnHeaderType: 'not-filtered',
-            id: 'event.action',
-            width: 180,
-          },
-          {
-            columnHeaderType: 'not-filtered',
-            id: 'host.name',
-            width: 180,
-          },
-          {
-            columnHeaderType: 'not-filtered',
-            id: 'source.ip',
-            width: 180,
-          },
-          {
-            columnHeaderType: 'not-filtered',
-            id: 'destination.ip',
-            width: 180,
-          },
-          {
-            columnHeaderType: 'not-filtered',
-            id: 'user.name',
-            width: 180,
-          },
-        ],
-        dataProviders: [],
-        dateRange: {
-          end: 0,
-          start: 0,
-        },
-        description: '',
-        deletedEventIds: [],
-        eventIdToNoteIds: {},
-        eventType: 'all',
-        filters: [],
-        highlightedDropAndProviderId: '',
-        historyIds: [],
-        id: 'savedObject-1',
-        isFavorite: false,
-        isLive: false,
-        isSelectAllChecked: false,
-        isLoading: false,
-        isSaving: false,
-        itemsPerPage: 25,
-        itemsPerPageOptions: [10, 25, 50, 100],
-        kqlMode: 'filter',
-        kqlQuery: {
-          filterQuery: null,
-          filterQueryDraft: null,
-        },
-        loadingEventIds: [],
-        noteIds: [],
-        pinnedEventIds: {},
-        pinnedEventsSaveObject: {},
-        savedObjectId: 'savedObject-1',
-        selectedEventIds: {},
-        show: false,
-        showCheckboxes: false,
-        showRowRenderers: true,
-        sort: {
-          columnId: '@timestamp',
-          sortDirection: 'desc',
-        },
-        title: '',
-        timelineType: TimelineType.default,
-        templateTimelineId: null,
-        templateTimelineVersion: null,
-        version: '1',
-        width: 1100,
-      });
-    });
-    test('should merge columns when event.action is deleted without two extra column names of user.name', () => {
-      const timeline = {
-        savedObjectId: 'savedObject-1',
-        columns: timelineDefaults.columns.filter(column => column.id !== 'event.action'),
-        version: '1',
-      };
-
-      const newTimeline = defaultTimelineToTimelineModel(timeline, false);
-      expect(newTimeline).toEqual({
-        savedObjectId: 'savedObject-1',
-        columns: [
-          {
-            columnHeaderType: 'not-filtered',
-            id: '@timestamp',
-            width: 190,
-          },
-          {
-            columnHeaderType: 'not-filtered',
-            id: 'message',
-            width: 180,
-          },
-          {
-            columnHeaderType: 'not-filtered',
-            id: 'event.category',
-            width: 180,
-          },
-          {
-            columnHeaderType: 'not-filtered',
-            id: 'host.name',
-            width: 180,
-          },
-          {
-            columnHeaderType: 'not-filtered',
-            id: 'source.ip',
-            width: 180,
-          },
-          {
-            columnHeaderType: 'not-filtered',
-            id: 'destination.ip',
-            width: 180,
-          },
-          {
-            columnHeaderType: 'not-filtered',
-            id: 'user.name',
-            width: 180,
-          },
-        ],
-        version: '1',
-        dataProviders: [],
-        description: '',
-        deletedEventIds: [],
-        eventIdToNoteIds: {},
-        eventType: 'all',
-        filters: [],
-        highlightedDropAndProviderId: '',
-        historyIds: [],
-        isFavorite: false,
-        isLive: false,
-        isSelectAllChecked: false,
-        isLoading: false,
-        isSaving: false,
-        itemsPerPage: 25,
-        itemsPerPageOptions: [10, 25, 50, 100],
-        kqlMode: 'filter',
-        kqlQuery: {
-          filterQuery: null,
-          filterQueryDraft: null,
-        },
-        loadingEventIds: [],
-        title: '',
-        timelineType: TimelineType.default,
-        templateTimelineId: null,
-        templateTimelineVersion: null,
-        noteIds: [],
-        pinnedEventIds: {},
-        pinnedEventsSaveObject: {},
-        dateRange: {
-          start: 0,
-          end: 0,
-        },
-        selectedEventIds: {},
-        show: false,
-        showCheckboxes: false,
-        showRowRenderers: true,
-        sort: {
-          columnId: '@timestamp',
-          sortDirection: 'desc',
-        },
-        width: 1100,
-        id: 'savedObject-1',
-      });
-    });
-
-    test('should merge filters object back with json object', () => {
-      const timeline = {
-        savedObjectId: 'savedObject-1',
-        columns: timelineDefaults.columns.filter(column => column.id !== 'event.action'),
-        filters: [
-          {
-            meta: {
-              alias: null,
-              controlledBy: null,
-              disabled: false,
-              index: null,
-              key: 'event.category',
-              negate: false,
-              params: '{"query":"file"}',
-              type: 'phrase',
-              value: null,
-            },
-            query: '{"match_phrase":{"event.category":"file"}}',
-            exists: null,
-          },
-          {
-            meta: {
-              alias: null,
-              controlledBy: null,
-              disabled: false,
-              index: null,
-              key: '@timestamp',
-              negate: false,
-              params: null,
-              type: 'exists',
-              value: 'exists',
-            },
-            query: null,
-            exists: '{"field":"@timestamp"}',
-          },
-        ],
-        version: '1',
-      };
-
-      const newTimeline = defaultTimelineToTimelineModel(timeline, false);
-      expect(newTimeline).toEqual({
-        savedObjectId: 'savedObject-1',
-        columns: [
-          {
-            columnHeaderType: 'not-filtered',
-            id: '@timestamp',
-            width: 190,
-          },
-          {
-            columnHeaderType: 'not-filtered',
-            id: 'message',
-            width: 180,
-          },
-          {
-            columnHeaderType: 'not-filtered',
-            id: 'event.category',
-            width: 180,
-          },
-          {
-            columnHeaderType: 'not-filtered',
-            id: 'host.name',
-            width: 180,
-          },
-          {
-            columnHeaderType: 'not-filtered',
-            id: 'source.ip',
-            width: 180,
-          },
-          {
-            columnHeaderType: 'not-filtered',
-            id: 'destination.ip',
-            width: 180,
-          },
-          {
-            columnHeaderType: 'not-filtered',
-            id: 'user.name',
-            width: 180,
-          },
-        ],
-        version: '1',
-        dataProviders: [],
-        description: '',
-        deletedEventIds: [],
-        eventIdToNoteIds: {},
-        eventType: 'all',
-        filters: [
-          {
-            $state: {
-              store: 'appState',
-            },
-            meta: {
-              alias: null,
-              controlledBy: null,
-              disabled: false,
-              index: null,
-              key: 'event.category',
-              negate: false,
-              params: {
-                query: 'file',
-              },
-              type: 'phrase',
-              value: null,
-            },
-            query: {
-              match_phrase: {
-                'event.category': 'file',
-              },
-            },
-          },
-          {
-            $state: {
-              store: 'appState',
-            },
-            exists: {
-              field: '@timestamp',
-            },
-            meta: {
-              alias: null,
-              controlledBy: null,
-              disabled: false,
-              index: null,
-              key: '@timestamp',
-              negate: false,
-              params: null,
-              type: 'exists',
-              value: 'exists',
-            },
-          },
-        ],
-        highlightedDropAndProviderId: '',
-        historyIds: [],
-        isFavorite: false,
-        isLive: false,
-        isSelectAllChecked: false,
-        isLoading: false,
-        isSaving: false,
-        itemsPerPage: 25,
-        itemsPerPageOptions: [10, 25, 50, 100],
-        kqlMode: 'filter',
-        kqlQuery: {
-          filterQuery: null,
-          filterQueryDraft: null,
-        },
-        loadingEventIds: [],
-        title: '',
-        timelineType: TimelineType.default,
-        templateTimelineId: null,
-        templateTimelineVersion: null,
-        noteIds: [],
-        pinnedEventIds: {},
-        pinnedEventsSaveObject: {},
-        dateRange: {
-          start: 0,
-          end: 0,
-        },
-        selectedEventIds: {},
-        show: false,
-        showCheckboxes: false,
-        showRowRenderers: true,
-        sort: {
-          columnId: '@timestamp',
-          sortDirection: 'desc',
-        },
-        width: 1100,
-        id: 'savedObject-1',
-      });
-    });
-  });
-
-  describe('omitTypenameInTimeline', () => {
-    test('it does not modify the passed in timeline if no __typename exists', () => {
-      const result = omitTypenameInTimeline(mockTimelineResult);
-
-      expect(result).toEqual(mockTimelineResult);
-    });
-
-    test('it returns timeline with __typename removed when it exists', () => {
-      const mockTimeline = {
-        ...mockTimelineResult,
-        __typename: 'something, something',
-      };
-      const result = omitTypenameInTimeline(mockTimeline);
-      const expectedTimeline = {
-        ...mockTimeline,
-        __typename: undefined,
-      };
-
-      expect(result).toEqual(expectedTimeline);
-    });
-  });
-
-  describe('dispatchUpdateTimeline', () => {
-    const dispatch = jest.fn() as Dispatch;
-    const anchor = '2020-03-27T20:34:51.337Z';
-    const unix = moment(anchor).valueOf();
-    let clock: sinon.SinonFakeTimers;
-    let timelineDispatch: DispatchUpdateTimeline;
-
-    beforeEach(() => {
-      jest.clearAllMocks();
-
-      clock = sinon.useFakeTimers(unix);
-      timelineDispatch = dispatchUpdateTimeline(dispatch);
-    });
-
-    afterEach(function() {
-      clock.restore();
-    });
-
-    test('it invokes date range picker dispatch', () => {
-      timelineDispatch({
-        duplicate: true,
-        id: 'timeline-1',
-        from: 1585233356356,
-        to: 1585233716356,
-        notes: [],
-        timeline: mockTimelineModel,
-      })();
-
-      expect(dispatchSetTimelineRangeDatePicker).toHaveBeenCalledWith({
-        from: 1585233356356,
-        to: 1585233716356,
-      });
-    });
-
-    test('it invokes add timeline dispatch', () => {
-      timelineDispatch({
-        duplicate: true,
-        id: 'timeline-1',
-        from: 1585233356356,
-        to: 1585233716356,
-        notes: [],
-        timeline: mockTimelineModel,
-      })();
-
-      expect(dispatchAddTimeline).toHaveBeenCalledWith({
-        id: 'timeline-1',
-        timeline: mockTimelineModel,
-      });
-    });
-
-    test('it does not invoke kql filter query dispatches if timeline.kqlQuery.filterQuery is null', () => {
-      timelineDispatch({
-        duplicate: true,
-        id: 'timeline-1',
-        from: 1585233356356,
-        to: 1585233716356,
-        notes: [],
-        timeline: mockTimelineModel,
-      })();
-
-      expect(dispatchSetKqlFilterQueryDraft).not.toHaveBeenCalled();
-      expect(dispatchApplyKqlFilterQuery).not.toHaveBeenCalled();
-    });
-
-    test('it does not invoke notes dispatch if duplicate is true', () => {
-      timelineDispatch({
-        duplicate: true,
-        id: 'timeline-1',
-        from: 1585233356356,
-        to: 1585233716356,
-        notes: [],
-        timeline: mockTimelineModel,
-      })();
-
-      expect(dispatchAddNotes).not.toHaveBeenCalled();
-    });
-
-    test('it does not invoke kql filter query dispatches if timeline.kqlQuery.kuery is null', () => {
-      const mockTimeline = {
-        ...mockTimelineModel,
-        kqlQuery: {
-          filterQuery: {
-            kuery: null,
-            serializedQuery: 'some-serialized-query',
-          },
-          filterQueryDraft: null,
-        },
-      };
-      timelineDispatch({
-        duplicate: true,
-        id: 'timeline-1',
-        from: 1585233356356,
-        to: 1585233716356,
-        notes: [],
-        timeline: mockTimeline,
-      })();
-
-      expect(dispatchSetKqlFilterQueryDraft).not.toHaveBeenCalled();
-      expect(dispatchApplyKqlFilterQuery).not.toHaveBeenCalled();
-    });
-
-    test('it invokes kql filter query dispatches if timeline.kqlQuery.filterQuery.kuery is not null', () => {
-      const mockTimeline = {
-        ...mockTimelineModel,
-        kqlQuery: {
-          filterQuery: {
-            kuery: { expression: 'expression', kind: 'kuery' as KueryFilterQueryKind },
-            serializedQuery: 'some-serialized-query',
-          },
-          filterQueryDraft: null,
-        },
-      };
-      timelineDispatch({
-        duplicate: true,
-        id: 'timeline-1',
-        from: 1585233356356,
-        to: 1585233716356,
-        notes: [],
-        timeline: mockTimeline,
-      })();
-
-      expect(dispatchSetKqlFilterQueryDraft).toHaveBeenCalledWith({
-        id: 'timeline-1',
-        filterQueryDraft: {
-          kind: 'kuery',
-          expression: 'expression',
-        },
-      });
-      expect(dispatchApplyKqlFilterQuery).toHaveBeenCalledWith({
-        id: 'timeline-1',
-        filterQuery: {
-          kuery: {
-            kind: 'kuery',
-            expression: 'expression',
-          },
-          serializedQuery: 'some-serialized-query',
-        },
-      });
-    });
-
-    test('it invokes dispatchAddNotes if duplicate is false', () => {
-      timelineDispatch({
-        duplicate: false,
-        id: 'timeline-1',
-        from: 1585233356356,
-        to: 1585233716356,
-        notes: [
-          {
-            created: 1585233356356,
-            updated: 1585233356356,
-            noteId: 'note-id',
-            note: 'I am a note',
-          },
-        ],
-        timeline: mockTimelineModel,
-      })();
-
-      expect(dispatchAddGlobalTimelineNote).not.toHaveBeenCalled();
-      expect(dispatchUpdateNote).not.toHaveBeenCalled();
-      expect(dispatchAddNotes).toHaveBeenCalledWith({
-        notes: [
-          {
-            created: new Date('2020-03-26T14:35:56.356Z'),
-            id: 'note-id',
-            lastEdit: new Date('2020-03-26T14:35:56.356Z'),
-            note: 'I am a note',
-            user: 'unknown',
-            saveObjectId: 'note-id',
-            version: undefined,
-          },
-        ],
-      });
-    });
-
-    test('it invokes dispatch to create a timeline note if duplicate is true and ruleNote exists', () => {
-      timelineDispatch({
-        duplicate: true,
-        id: 'timeline-1',
-        from: 1585233356356,
-        to: 1585233716356,
-        notes: [],
-        timeline: mockTimelineModel,
-        ruleNote: '# this would be some markdown',
-      })();
-      const expectedNote: Note = {
-        created: new Date(anchor),
-        id: 'uuid.v4()',
-        lastEdit: null,
-        note: '# this would be some markdown',
-        saveObjectId: null,
-        user: 'elastic',
-        version: null,
-      };
-
-      expect(dispatchAddNotes).not.toHaveBeenCalled();
-      expect(dispatchUpdateNote).toHaveBeenCalledWith({ note: expectedNote });
-      expect(dispatchAddGlobalTimelineNote).toHaveBeenLastCalledWith({
-        id: 'timeline-1',
-        noteId: 'uuid.v4()',
-      });
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/open_timeline/helpers.ts b/x-pack/plugins/siem/public/components/open_timeline/helpers.ts
deleted file mode 100644
index 681d39feb09f81..00000000000000
--- a/x-pack/plugins/siem/public/components/open_timeline/helpers.ts
+++ /dev/null
@@ -1,319 +0,0 @@
-/*
- * 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 ApolloClient from 'apollo-client';
-import { getOr, set, isEmpty } from 'lodash/fp';
-import { Action } from 'typescript-fsa';
-import uuid from 'uuid';
-import { Dispatch } from 'redux';
-
-import { oneTimelineQuery } from '../../containers/timeline/one/index.gql_query';
-import { TimelineResult, GetOneTimeline, NoteResult } from '../../graphql/types';
-import {
-  addNotes as dispatchAddNotes,
-  updateNote as dispatchUpdateNote,
-} from '../../store/app/actions';
-import { setTimelineRangeDatePicker as dispatchSetTimelineRangeDatePicker } from '../../store/inputs/actions';
-import {
-  setKqlFilterQueryDraft as dispatchSetKqlFilterQueryDraft,
-  applyKqlFilterQuery as dispatchApplyKqlFilterQuery,
-  addTimeline as dispatchAddTimeline,
-  addNote as dispatchAddGlobalTimelineNote,
-} from '../../store/timeline/actions';
-
-import { ColumnHeaderOptions, TimelineModel } from '../../store/timeline/model';
-import { timelineDefaults } from '../../store/timeline/defaults';
-import {
-  defaultColumnHeaderType,
-  defaultHeaders,
-} from '../timeline/body/column_headers/default_headers';
-import {
-  DEFAULT_DATE_COLUMN_MIN_WIDTH,
-  DEFAULT_COLUMN_MIN_WIDTH,
-} from '../timeline/body/constants';
-
-import { OpenTimelineResult, UpdateTimeline, DispatchUpdateTimeline } from './types';
-import { getTimeRangeSettings } from '../../utils/default_date_settings';
-import { createNote } from '../notes/helpers';
-
-export const OPEN_TIMELINE_CLASS_NAME = 'open-timeline';
-
-/** Returns a count of the pinned events in a timeline */
-export const getPinnedEventCount = ({ pinnedEventIds }: OpenTimelineResult): number =>
-  pinnedEventIds != null ? Object.keys(pinnedEventIds).length : 0;
-
-/** Returns the sum of all notes added to pinned events and notes applicable to the timeline */
-export const getNotesCount = ({ eventIdToNoteIds, noteIds }: OpenTimelineResult): number => {
-  const eventNoteCount =
-    eventIdToNoteIds != null
-      ? Object.keys(eventIdToNoteIds).reduce<number>(
-          (count, eventId) => count + eventIdToNoteIds[eventId].length,
-          0
-        )
-      : 0;
-
-  const globalNoteCount = noteIds != null ? noteIds.length : 0;
-
-  return eventNoteCount + globalNoteCount;
-};
-
-/** Returns true if the timeline is untitlied */
-export const isUntitled = ({ title }: OpenTimelineResult): boolean =>
-  title == null || title.trim().length === 0;
-
-const omitTypename = (key: string, value: keyof TimelineModel) =>
-  key === '__typename' ? undefined : value;
-
-export const omitTypenameInTimeline = (timeline: TimelineResult): TimelineResult =>
-  JSON.parse(JSON.stringify(timeline), omitTypename);
-
-const parseString = (params: string) => {
-  try {
-    return JSON.parse(params);
-  } catch {
-    return params;
-  }
-};
-
-export const defaultTimelineToTimelineModel = (
-  timeline: TimelineResult,
-  duplicate: boolean
-): TimelineModel => {
-  return Object.entries({
-    ...timeline,
-    columns:
-      timeline.columns != null
-        ? timeline.columns.map(col => {
-            const timelineCols: ColumnHeaderOptions = {
-              ...col,
-              columnHeaderType: defaultColumnHeaderType,
-              id: col.id != null ? col.id : 'unknown',
-              placeholder: col.placeholder != null ? col.placeholder : undefined,
-              category: col.category != null ? col.category : undefined,
-              description: col.description != null ? col.description : undefined,
-              example: col.example != null ? col.example : undefined,
-              type: col.type != null ? col.type : undefined,
-              aggregatable: col.aggregatable != null ? col.aggregatable : undefined,
-              width:
-                col.id === '@timestamp' ? DEFAULT_DATE_COLUMN_MIN_WIDTH : DEFAULT_COLUMN_MIN_WIDTH,
-            };
-            return timelineCols;
-          })
-        : defaultHeaders,
-    eventIdToNoteIds: duplicate
-      ? {}
-      : timeline.eventIdToNoteIds != null
-      ? timeline.eventIdToNoteIds.reduce((acc, note) => {
-          if (note.eventId != null) {
-            const eventNotes = getOr([], note.eventId, acc);
-            return { ...acc, [note.eventId]: [...eventNotes, note.noteId] };
-          }
-          return acc;
-        }, {})
-      : {},
-    filters:
-      timeline.filters != null
-        ? timeline.filters.map(filter => ({
-            $state: {
-              store: 'appState',
-            },
-            meta: {
-              ...filter.meta,
-              ...(filter.meta && filter.meta.field != null
-                ? { params: parseString(filter.meta.field) }
-                : {}),
-              ...(filter.meta && filter.meta.params != null
-                ? { params: parseString(filter.meta.params) }
-                : {}),
-              ...(filter.meta && filter.meta.value != null
-                ? { value: parseString(filter.meta.value) }
-                : {}),
-            },
-            ...(filter.exists != null ? { exists: parseString(filter.exists) } : {}),
-            ...(filter.match_all != null ? { exists: parseString(filter.match_all) } : {}),
-            ...(filter.missing != null ? { exists: parseString(filter.missing) } : {}),
-            ...(filter.query != null ? { query: parseString(filter.query) } : {}),
-            ...(filter.range != null ? { range: parseString(filter.range) } : {}),
-            ...(filter.script != null ? { exists: parseString(filter.script) } : {}),
-          }))
-        : [],
-    isFavorite: duplicate
-      ? false
-      : timeline.favorite != null
-      ? timeline.favorite.length > 0
-      : false,
-    noteIds: duplicate ? [] : timeline.noteIds != null ? timeline.noteIds : [],
-    pinnedEventIds: duplicate
-      ? {}
-      : timeline.pinnedEventIds != null
-      ? timeline.pinnedEventIds.reduce(
-          (acc, pinnedEventId) => ({ ...acc, [pinnedEventId]: true }),
-          {}
-        )
-      : {},
-    pinnedEventsSaveObject: duplicate
-      ? {}
-      : timeline.pinnedEventsSaveObject != null
-      ? timeline.pinnedEventsSaveObject.reduce(
-          (acc, pinnedEvent) => ({
-            ...acc,
-            ...(pinnedEvent.eventId != null ? { [pinnedEvent.eventId]: pinnedEvent } : {}),
-          }),
-          {}
-        )
-      : {},
-    id: duplicate ? '' : timeline.savedObjectId,
-    savedObjectId: duplicate ? null : timeline.savedObjectId,
-    version: duplicate ? null : timeline.version,
-    title: duplicate ? '' : timeline.title || '',
-    templateTimelineId: duplicate ? null : timeline.templateTimelineId,
-    templateTimelineVersion: duplicate ? null : timeline.templateTimelineVersion,
-  }).reduce((acc: TimelineModel, [key, value]) => (value != null ? set(key, value, acc) : acc), {
-    ...timelineDefaults,
-    id: '',
-  });
-};
-
-export const formatTimelineResultToModel = (
-  timelineToOpen: TimelineResult,
-  duplicate: boolean = false
-): { notes: NoteResult[] | null | undefined; timeline: TimelineModel } => {
-  const { notes, ...timelineModel } = timelineToOpen;
-  return {
-    notes,
-    timeline: defaultTimelineToTimelineModel(timelineModel, duplicate),
-  };
-};
-
-export interface QueryTimelineById<TCache> {
-  apolloClient: ApolloClient<TCache> | ApolloClient<{}> | undefined;
-  duplicate: boolean;
-  timelineId: string;
-  onOpenTimeline?: (timeline: TimelineModel) => void;
-  openTimeline?: boolean;
-  updateIsLoading: ({
-    id,
-    isLoading,
-  }: {
-    id: string;
-    isLoading: boolean;
-  }) => Action<{ id: string; isLoading: boolean }>;
-  updateTimeline: DispatchUpdateTimeline;
-}
-
-export const queryTimelineById = <TCache>({
-  apolloClient,
-  duplicate = false,
-  timelineId,
-  onOpenTimeline,
-  openTimeline = true,
-  updateIsLoading,
-  updateTimeline,
-}: QueryTimelineById<TCache>) => {
-  updateIsLoading({ id: 'timeline-1', isLoading: true });
-  if (apolloClient) {
-    apolloClient
-      .query<GetOneTimeline.Query, GetOneTimeline.Variables>({
-        query: oneTimelineQuery,
-        fetchPolicy: 'no-cache',
-        variables: { id: timelineId },
-      })
-      // eslint-disable-next-line
-      .then(result => {
-        const timelineToOpen: TimelineResult = omitTypenameInTimeline(
-          getOr({}, 'data.getOneTimeline', result)
-        );
-
-        const { timeline, notes } = formatTimelineResultToModel(timelineToOpen, duplicate);
-        if (onOpenTimeline != null) {
-          onOpenTimeline(timeline);
-        } else if (updateTimeline) {
-          const { from, to } = getTimeRangeSettings();
-          updateTimeline({
-            duplicate,
-            from: getOr(from, 'dateRange.start', timeline),
-            id: 'timeline-1',
-            notes,
-            timeline: {
-              ...timeline,
-              show: openTimeline,
-            },
-            to: getOr(to, 'dateRange.end', timeline),
-          })();
-        }
-      })
-      .finally(() => {
-        updateIsLoading({ id: 'timeline-1', isLoading: false });
-      });
-  }
-};
-
-export const dispatchUpdateTimeline = (dispatch: Dispatch): DispatchUpdateTimeline => ({
-  duplicate,
-  id,
-  from,
-  notes,
-  timeline,
-  to,
-  ruleNote,
-}: UpdateTimeline): (() => void) => () => {
-  dispatch(dispatchSetTimelineRangeDatePicker({ from, to }));
-  dispatch(dispatchAddTimeline({ id, timeline }));
-  if (
-    timeline.kqlQuery != null &&
-    timeline.kqlQuery.filterQuery != null &&
-    timeline.kqlQuery.filterQuery.kuery != null &&
-    timeline.kqlQuery.filterQuery.kuery.expression !== ''
-  ) {
-    dispatch(
-      dispatchSetKqlFilterQueryDraft({
-        id,
-        filterQueryDraft: {
-          kind: 'kuery',
-          expression: timeline.kqlQuery.filterQuery.kuery.expression || '',
-        },
-      })
-    );
-    dispatch(
-      dispatchApplyKqlFilterQuery({
-        id,
-        filterQuery: {
-          kuery: {
-            kind: 'kuery',
-            expression: timeline.kqlQuery.filterQuery.kuery.expression || '',
-          },
-          serializedQuery: timeline.kqlQuery.filterQuery.serializedQuery || '',
-        },
-      })
-    );
-  }
-
-  if (duplicate && ruleNote != null && !isEmpty(ruleNote)) {
-    const getNewNoteId = (): string => uuid.v4();
-    const newNote = createNote({ newNote: ruleNote, getNewNoteId });
-    dispatch(dispatchUpdateNote({ note: newNote }));
-    dispatch(dispatchAddGlobalTimelineNote({ noteId: newNote.id, id }));
-  }
-
-  if (!duplicate) {
-    dispatch(
-      dispatchAddNotes({
-        notes:
-          notes != null
-            ? notes.map((note: NoteResult) => ({
-                created: note.created != null ? new Date(note.created) : new Date(),
-                id: note.noteId,
-                lastEdit: note.updated != null ? new Date(note.updated) : new Date(),
-                note: note.note || '',
-                user: note.updatedBy || 'unknown',
-                saveObjectId: note.noteId,
-                version: note.version,
-              }))
-            : [],
-      })
-    );
-  }
-};
diff --git a/x-pack/plugins/siem/public/components/open_timeline/index.test.tsx b/x-pack/plugins/siem/public/components/open_timeline/index.test.tsx
deleted file mode 100644
index 731c6d1ca9806a..00000000000000
--- a/x-pack/plugins/siem/public/components/open_timeline/index.test.tsx
+++ /dev/null
@@ -1,658 +0,0 @@
-/*
- * 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 euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
-import { mount } from 'enzyme';
-import { MockedProvider } from 'react-apollo/test-utils';
-import React from 'react';
-import { ThemeProvider } from 'styled-components';
-
-import { wait } from '../../lib/helpers';
-import { TestProviderWithoutDragAndDrop, apolloClient } from '../../mock/test_providers';
-import { mockOpenTimelineQueryResults } from '../../mock/timeline_results';
-import { DEFAULT_SEARCH_RESULTS_PER_PAGE } from '../../pages/timelines/timelines_page';
-
-import { NotePreviews } from './note_previews';
-import { OPEN_TIMELINE_CLASS_NAME } from './helpers';
-import { TimelineTabsStyle } from './types';
-
-import { StatefulOpenTimeline } from '.';
-import { useGetAllTimeline, getAllTimeline } from '../../containers/timeline/all';
-jest.mock('../../lib/kibana');
-jest.mock('../../containers/timeline/all', () => {
-  const originalModule = jest.requireActual('../../containers/timeline/all');
-  return {
-    ...originalModule,
-    useGetAllTimeline: jest.fn(),
-    getAllTimeline: originalModule.getAllTimeline,
-  };
-});
-jest.mock('./use_timeline_types', () => {
-  return {
-    useTimelineTypes: jest.fn().mockReturnValue({
-      timelineType: 'default',
-      timelineTabs: <div data-test-subj="timeline-tab" />,
-      timelineFilters: <div data-test-subj="timeline-filter" />,
-    }),
-  };
-});
-
-describe('StatefulOpenTimeline', () => {
-  const theme = () => ({ eui: euiDarkVars, darkMode: true });
-  const title = 'All Timelines / Open Timelines';
-  beforeEach(() => {
-    ((useGetAllTimeline as unknown) as jest.Mock).mockReturnValue({
-      fetchAllTimeline: jest.fn(),
-      timelines: getAllTimeline(
-        '',
-        mockOpenTimelineQueryResults[0].result.data?.getAllTimeline?.timeline ?? []
-      ),
-      loading: false,
-      totalCount: mockOpenTimelineQueryResults[0].result.data.getAllTimeline.totalCount,
-      refetch: jest.fn(),
-    });
-  });
-
-  test('it has the expected initial state', () => {
-    const wrapper = mount(
-      <ThemeProvider theme={theme}>
-        <TestProviderWithoutDragAndDrop>
-          <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
-            <StatefulOpenTimeline
-              data-test-subj="stateful-timeline"
-              apolloClient={apolloClient}
-              isModal={false}
-              defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
-              title={title}
-            />
-          </MockedProvider>
-        </TestProviderWithoutDragAndDrop>
-      </ThemeProvider>
-    );
-
-    const componentProps = wrapper
-      .find('[data-test-subj="open-timeline"]')
-      .last()
-      .props();
-
-    expect(componentProps).toEqual({
-      ...componentProps,
-      itemIdToExpandedNotesRowMap: {},
-      onlyFavorites: false,
-      pageIndex: 0,
-      pageSize: 10,
-      query: '',
-      selectedItems: [],
-      sortDirection: 'desc',
-      sortField: 'updated',
-    });
-  });
-
-  describe('#onQueryChange', () => {
-    test('it updates the query state with the expected trimmed value when the user enters a query', () => {
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <TestProviderWithoutDragAndDrop>
-            <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
-              <StatefulOpenTimeline
-                data-test-subj="stateful-timeline"
-                apolloClient={apolloClient}
-                isModal={false}
-                defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
-                title={title}
-              />
-            </MockedProvider>
-          </TestProviderWithoutDragAndDrop>
-        </ThemeProvider>
-      );
-      wrapper
-        .find('[data-test-subj="search-bar"] input')
-        .simulate('keyup', { keyCode: 13, target: { value: '   abcd   ' } });
-      expect(
-        wrapper
-          .find('[data-test-subj="search-row"]')
-          .first()
-          .prop('query')
-      ).toEqual('abcd');
-    });
-
-    test('it appends the word "with" to the Showing in Timelines message when the user enters a query', async () => {
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <TestProviderWithoutDragAndDrop>
-            <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
-              <StatefulOpenTimeline
-                apolloClient={apolloClient}
-                isModal={false}
-                defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
-                title={title}
-              />
-            </MockedProvider>
-          </TestProviderWithoutDragAndDrop>
-        </ThemeProvider>
-      );
-
-      await wait();
-
-      wrapper
-        .find('[data-test-subj="search-bar"] input')
-        .simulate('keyup', { keyCode: 13, target: { value: '   abcd   ' } });
-
-      expect(
-        wrapper
-          .find('[data-test-subj="query-message"]')
-          .first()
-          .text()
-      ).toContain('Showing: 11 timelines with');
-    });
-
-    test('echos (renders) the query when the user enters a query', async () => {
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <TestProviderWithoutDragAndDrop>
-            <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
-              <StatefulOpenTimeline
-                apolloClient={apolloClient}
-                isModal={false}
-                defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
-                title={title}
-              />
-            </MockedProvider>
-          </TestProviderWithoutDragAndDrop>
-        </ThemeProvider>
-      );
-
-      await wait();
-
-      wrapper
-        .find('[data-test-subj="search-bar"] input')
-        .simulate('keyup', { keyCode: 13, target: { value: '   abcd   ' } });
-
-      expect(
-        wrapper
-          .find('[data-test-subj="selectable-query-text"]')
-          .first()
-          .text()
-      ).toEqual('with "abcd"');
-    });
-  });
-
-  describe('#focusInput', () => {
-    test('focuses the input when the component mounts', async () => {
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <TestProviderWithoutDragAndDrop>
-            <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
-              <StatefulOpenTimeline
-                apolloClient={apolloClient}
-                isModal={false}
-                defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
-                title={title}
-              />
-            </MockedProvider>
-          </TestProviderWithoutDragAndDrop>
-        </ThemeProvider>
-      );
-
-      await wait();
-
-      expect(
-        wrapper
-          .find(`.${OPEN_TIMELINE_CLASS_NAME} input`)
-          .first()
-          .getDOMNode().id === document.activeElement!.id
-      ).toBe(true);
-    });
-  });
-
-  describe('#onAddTimelinesToFavorites', () => {
-    // This functionality is hiding for now and waiting to see the light in the near future
-    test.skip('it invokes addTimelinesToFavorites with the selected timelines when the button is clicked', async () => {
-      const addTimelinesToFavorites = jest.fn();
-
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <TestProviderWithoutDragAndDrop>
-            <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
-              <StatefulOpenTimeline
-                apolloClient={apolloClient}
-                isModal={false}
-                defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
-                title={title}
-              />
-            </MockedProvider>
-          </TestProviderWithoutDragAndDrop>
-        </ThemeProvider>
-      );
-
-      await wait();
-
-      wrapper
-        .find('.euiCheckbox__input')
-        .first()
-        .simulate('change', { target: { checked: true } });
-
-      wrapper
-        .find('[data-test-subj="favorite-selected"]')
-        .first()
-        .simulate('click');
-
-      expect(addTimelinesToFavorites).toHaveBeenCalledWith([
-        'saved-timeline-11',
-        'saved-timeline-10',
-        'saved-timeline-9',
-        'saved-timeline-8',
-        'saved-timeline-6',
-        'saved-timeline-5',
-        'saved-timeline-4',
-        'saved-timeline-3',
-        'saved-timeline-2',
-      ]);
-    });
-  });
-
-  describe('#onDeleteSelected', () => {
-    // TODO - Have been skip because we need to re-implement the test as the component changed
-    test.skip('it invokes deleteTimelines with the selected timelines when the button is clicked', async () => {
-      const deleteTimelines = jest.fn();
-
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <TestProviderWithoutDragAndDrop>
-            <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
-              <StatefulOpenTimeline
-                apolloClient={apolloClient}
-                isModal={false}
-                defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
-                title={title}
-              />
-            </MockedProvider>
-          </TestProviderWithoutDragAndDrop>
-        </ThemeProvider>
-      );
-
-      await wait();
-
-      wrapper
-        .find('.euiCheckbox__input')
-        .first()
-        .simulate('change', { target: { checked: true } });
-
-      wrapper
-        .find('[data-test-subj="delete-selected"]')
-        .first()
-        .simulate('click');
-
-      expect(deleteTimelines).toHaveBeenCalledWith([
-        'saved-timeline-11',
-        'saved-timeline-10',
-        'saved-timeline-9',
-        'saved-timeline-8',
-        'saved-timeline-6',
-        'saved-timeline-5',
-        'saved-timeline-4',
-        'saved-timeline-3',
-        'saved-timeline-2',
-      ]);
-    });
-  });
-
-  describe('#onSelectionChange', () => {
-    test('it updates the selection state when timelines are selected', async () => {
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <TestProviderWithoutDragAndDrop>
-            <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
-              <StatefulOpenTimeline
-                data-test-subj="stateful-timeline"
-                apolloClient={apolloClient}
-                isModal={false}
-                defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
-                title={title}
-              />
-            </MockedProvider>
-          </TestProviderWithoutDragAndDrop>
-        </ThemeProvider>
-      );
-
-      await wait();
-
-      wrapper
-        .find('.euiCheckbox__input')
-        .first()
-        .simulate('change', { target: { checked: true } });
-
-      const selectedItems: [] = wrapper
-        .find('[data-test-subj="open-timeline"]')
-        .last()
-        .prop('selectedItems');
-
-      expect(selectedItems.length).toEqual(13); // 13 because we did mock 13 timelines in the query
-    });
-  });
-
-  describe('#onTableChange', () => {
-    test('it updates the sort state when the user clicks on a column to sort it', () => {
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <TestProviderWithoutDragAndDrop>
-            <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
-              <StatefulOpenTimeline
-                data-test-subj="stateful-timeline"
-                apolloClient={apolloClient}
-                isModal={false}
-                defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
-                title={title}
-              />
-            </MockedProvider>
-          </TestProviderWithoutDragAndDrop>
-        </ThemeProvider>
-      );
-
-      expect(
-        wrapper
-          .find('[data-test-subj="open-timeline"]')
-          .last()
-          .prop('sortDirection')
-      ).toEqual('desc');
-
-      wrapper
-        .find('thead tr th button')
-        .at(0)
-        .simulate('click');
-
-      expect(
-        wrapper
-          .find('[data-test-subj="open-timeline"]')
-          .last()
-          .prop('sortDirection')
-      ).toEqual('asc');
-    });
-  });
-
-  describe('#onToggleOnlyFavorites', () => {
-    test('it updates the onlyFavorites state when the user clicks the Only Favorites button', () => {
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <TestProviderWithoutDragAndDrop>
-            <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
-              <StatefulOpenTimeline
-                data-test-subj="stateful-timeline"
-                apolloClient={apolloClient}
-                isModal={false}
-                defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
-                title={title}
-              />
-            </MockedProvider>
-          </TestProviderWithoutDragAndDrop>
-        </ThemeProvider>
-      );
-
-      expect(
-        wrapper
-          .find('[data-test-subj="open-timeline"]')
-          .last()
-          .prop('onlyFavorites')
-      ).toEqual(false);
-
-      wrapper
-        .find('[data-test-subj="only-favorites-toggle"]')
-        .first()
-        .simulate('click');
-
-      expect(
-        wrapper
-          .find('[data-test-subj="open-timeline"]')
-          .last()
-          .prop('onlyFavorites')
-      ).toEqual(true);
-    });
-  });
-
-  describe('#onToggleShowNotes', () => {
-    test('it updates the itemIdToExpandedNotesRowMap state when the user clicks the expand notes button', async () => {
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <TestProviderWithoutDragAndDrop>
-            <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
-              <StatefulOpenTimeline
-                data-test-subj="stateful-timeline"
-                apolloClient={apolloClient}
-                isModal={false}
-                defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
-                title={title}
-              />
-            </MockedProvider>
-          </TestProviderWithoutDragAndDrop>
-        </ThemeProvider>
-      );
-
-      await wait();
-      wrapper.update();
-
-      expect(
-        wrapper
-          .find('[data-test-subj="open-timeline"]')
-          .last()
-          .prop('itemIdToExpandedNotesRowMap')
-      ).toEqual({});
-
-      wrapper
-        .find('[data-test-subj="expand-notes"]')
-        .first()
-        .simulate('click');
-
-      expect(
-        wrapper
-          .find('[data-test-subj="open-timeline"]')
-          .last()
-          .prop('itemIdToExpandedNotesRowMap')
-      ).toEqual({
-        '10849df0-7b44-11e9-a608-ab3d811609': (
-          <NotePreviews
-            notes={
-              mockOpenTimelineQueryResults[0].result.data!.getAllTimeline.timeline[0].notes != null
-                ? mockOpenTimelineQueryResults[0].result.data!.getAllTimeline.timeline[0].notes.map(
-                    note => ({ ...note, savedObjectId: note.noteId })
-                  )
-                : []
-            }
-          />
-        ),
-      });
-    });
-
-    test('it renders the expanded notes when the expand button is clicked', async () => {
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <TestProviderWithoutDragAndDrop>
-            <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
-              <StatefulOpenTimeline
-                data-test-subj="stateful-timeline"
-                apolloClient={apolloClient}
-                isModal={false}
-                defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
-                title={title}
-              />
-            </MockedProvider>
-          </TestProviderWithoutDragAndDrop>
-        </ThemeProvider>
-      );
-
-      await wait();
-
-      wrapper.update();
-
-      wrapper
-        .find('[data-test-subj="expand-notes"]')
-        .first()
-        .simulate('click');
-      expect(wrapper.find('[data-test-subj="note-previews-container"]').exists()).toEqual(true);
-      expect(wrapper.find('[data-test-subj="updated-by"]').exists()).toEqual(true);
-
-      expect(
-        wrapper
-          .find('[data-test-subj="note-previews-container"]')
-          .find('[data-test-subj="updated-by"]')
-          .first()
-          .text()
-      ).toEqual('elastic');
-    });
-
-    test('it renders the title', async () => {
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <TestProviderWithoutDragAndDrop>
-            <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
-              <StatefulOpenTimeline
-                data-test-subj="stateful-timeline"
-                apolloClient={apolloClient}
-                isModal={false}
-                defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
-                title={title}
-              />
-            </MockedProvider>
-          </TestProviderWithoutDragAndDrop>
-        </ThemeProvider>
-      );
-
-      await wait();
-
-      expect(wrapper.find(`[data-test-subj="timeline-${TimelineTabsStyle.tab}"]`).exists()).toEqual(
-        true
-      );
-    });
-  });
-
-  describe('#resetSelectionState', () => {
-    test('when the user deletes selected timelines, resetSelectionState is invoked to clear the selection state', async () => {
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <TestProviderWithoutDragAndDrop>
-            <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
-              <StatefulOpenTimeline
-                data-test-subj="stateful-timeline"
-                apolloClient={apolloClient}
-                isModal={false}
-                defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
-                title={title}
-              />
-            </MockedProvider>
-          </TestProviderWithoutDragAndDrop>
-        </ThemeProvider>
-      );
-      const getSelectedItem = (): [] =>
-        wrapper
-          .find('[data-test-subj="open-timeline"]')
-          .last()
-          .prop('selectedItems');
-      await wait();
-      expect(getSelectedItem().length).toEqual(0);
-      wrapper
-        .find('.euiCheckbox__input')
-        .first()
-        .simulate('change', { target: { checked: true } });
-      expect(getSelectedItem().length).toEqual(13);
-    });
-  });
-
-  test('it renders the expected count of matching timelines when no query has been entered', async () => {
-    const wrapper = mount(
-      <ThemeProvider theme={theme}>
-        <MockedProvider addTypename={false}>
-          <TestProviderWithoutDragAndDrop>
-            <StatefulOpenTimeline
-              data-test-subj="stateful-timeline"
-              apolloClient={apolloClient}
-              isModal={false}
-              defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
-              title={title}
-            />
-          </TestProviderWithoutDragAndDrop>
-        </MockedProvider>
-      </ThemeProvider>
-    );
-
-    await wait();
-
-    wrapper.update();
-
-    expect(
-      wrapper
-        .find('[data-test-subj="query-message"]')
-        .first()
-        .text()
-    ).toContain('Showing: 11 timelines ');
-  });
-
-  // TODO - Have been skip because we need to re-implement the test as the component changed
-  test.skip('it invokes onOpenTimeline with the expected parameters when the hyperlink is clicked', async () => {
-    const onOpenTimeline = jest.fn();
-
-    const wrapper = mount(
-      <ThemeProvider theme={theme}>
-        <TestProviderWithoutDragAndDrop>
-          <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
-            <StatefulOpenTimeline
-              data-test-subj="stateful-timeline"
-              apolloClient={apolloClient}
-              isModal={false}
-              defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
-              title={title}
-            />
-          </MockedProvider>
-        </TestProviderWithoutDragAndDrop>
-      </ThemeProvider>
-    );
-
-    await wait();
-
-    wrapper
-      .find(
-        `[data-test-subj="title-${
-          mockOpenTimelineQueryResults[0].result.data!.getAllTimeline.timeline[0].savedObjectId
-        }"]`
-      )
-      .first()
-      .simulate('click');
-
-    expect(onOpenTimeline).toHaveBeenCalledWith({
-      duplicate: false,
-      timelineId: mockOpenTimelineQueryResults[0].result.data!.getAllTimeline.timeline[0]
-        .savedObjectId,
-    });
-  });
-
-  // TODO - Have been skip because we need to re-implement the test as the component changed
-  test.skip('it invokes onOpenTimeline with the expected params when the button is clicked', async () => {
-    const onOpenTimeline = jest.fn();
-
-    const wrapper = mount(
-      <ThemeProvider theme={theme}>
-        <TestProviderWithoutDragAndDrop>
-          <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
-            <StatefulOpenTimeline
-              data-test-subj="stateful-timeline"
-              apolloClient={apolloClient}
-              isModal={false}
-              defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
-              title={title}
-            />
-          </MockedProvider>
-        </TestProviderWithoutDragAndDrop>
-      </ThemeProvider>
-    );
-
-    await wait();
-
-    wrapper
-      .find('[data-test-subj="open-duplicate"]')
-      .first()
-      .simulate('click');
-
-    expect(onOpenTimeline).toBeCalledWith({ duplicate: true, timelineId: 'saved-timeline-11' });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/open_timeline/index.tsx b/x-pack/plugins/siem/public/components/open_timeline/index.tsx
deleted file mode 100644
index ed22673f07a780..00000000000000
--- a/x-pack/plugins/siem/public/components/open_timeline/index.tsx
+++ /dev/null
@@ -1,343 +0,0 @@
-/*
- * 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 ApolloClient from 'apollo-client';
-import React, { useEffect, useState, useCallback } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
-
-import { Dispatch } from 'redux';
-
-import { defaultHeaders } from '../../components/timeline/body/column_headers/default_headers';
-import { deleteTimelineMutation } from '../../containers/timeline/delete/persist.gql_query';
-import { useGetAllTimeline } from '../../containers/timeline/all';
-import { DeleteTimelineMutation, SortFieldTimeline, Direction } from '../../graphql/types';
-import { State, timelineSelectors } from '../../store';
-import { ColumnHeaderOptions, TimelineModel } from '../../store/timeline/model';
-import { timelineDefaults } from '../../store/timeline/defaults';
-import {
-  createTimeline as dispatchCreateNewTimeline,
-  updateIsLoading as dispatchUpdateIsLoading,
-} from '../../store/timeline/actions';
-import { OpenTimeline } from './open_timeline';
-import { OPEN_TIMELINE_CLASS_NAME, queryTimelineById, dispatchUpdateTimeline } from './helpers';
-import { OpenTimelineModalBody } from './open_timeline_modal/open_timeline_modal_body';
-import {
-  ActionTimelineToShow,
-  DeleteTimelines,
-  EuiSearchBarQuery,
-  OnDeleteSelected,
-  OnOpenTimeline,
-  OnQueryChange,
-  OnSelectionChange,
-  OnTableChange,
-  OnTableChangeParams,
-  OpenTimelineProps,
-  OnToggleOnlyFavorites,
-  OpenTimelineResult,
-  OnToggleShowNotes,
-  OnDeleteOneTimeline,
-} from './types';
-import { DEFAULT_SORT_FIELD, DEFAULT_SORT_DIRECTION } from './constants';
-import { useTimelineTypes } from './use_timeline_types';
-
-interface OwnProps<TCache = object> {
-  apolloClient: ApolloClient<TCache>;
-  /** Displays open timeline in modal */
-  isModal: boolean;
-  closeModalTimeline?: () => void;
-  hideActions?: ActionTimelineToShow[];
-  onOpenTimeline?: (timeline: TimelineModel) => void;
-}
-
-export type OpenTimelineOwnProps = OwnProps &
-  Pick<
-    OpenTimelineProps,
-    'defaultPageSize' | 'title' | 'importDataModalToggle' | 'setImportDataModalToggle'
-  > &
-  PropsFromRedux;
-
-/** Returns a collection of selected timeline ids */
-export const getSelectedTimelineIds = (selectedItems: OpenTimelineResult[]): string[] =>
-  selectedItems.reduce<string[]>(
-    (validSelections, timelineResult) =>
-      timelineResult.savedObjectId != null
-        ? [...validSelections, timelineResult.savedObjectId]
-        : validSelections,
-    []
-  );
-
-/** Manages the state (e.g table selection) of the (pure) `OpenTimeline` component */
-export const StatefulOpenTimelineComponent = React.memo<OpenTimelineOwnProps>(
-  ({
-    apolloClient,
-    closeModalTimeline,
-    createNewTimeline,
-    defaultPageSize,
-    hideActions = [],
-    isModal = false,
-    importDataModalToggle,
-    onOpenTimeline,
-    setImportDataModalToggle,
-    timeline,
-    title,
-    updateTimeline,
-    updateIsLoading,
-  }) => {
-    /** Required by EuiTable for expandable rows: a map of `TimelineResult.savedObjectId` to rendered notes */
-    const [itemIdToExpandedNotesRowMap, setItemIdToExpandedNotesRowMap] = useState<
-      Record<string, JSX.Element>
-    >({});
-    /** Only query for favorite timelines when true */
-    const [onlyFavorites, setOnlyFavorites] = useState(false);
-    /** The requested page of results */
-    const [pageIndex, setPageIndex] = useState(0);
-    /** The requested size of each page of search results */
-    const [pageSize, setPageSize] = useState(defaultPageSize);
-    /** The current search criteria */
-    const [search, setSearch] = useState('');
-    /** The currently-selected timelines in the table */
-    const [selectedItems, setSelectedItems] = useState<OpenTimelineResult[]>([]);
-    /** The requested sort direction of the query results */
-    const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>(DEFAULT_SORT_DIRECTION);
-    /** The requested field to sort on */
-    const [sortField, setSortField] = useState(DEFAULT_SORT_FIELD);
-
-    const { timelineType, timelineTabs, timelineFilters } = useTimelineTypes();
-    const { fetchAllTimeline, timelines, loading, totalCount } = useGetAllTimeline();
-
-    const refetch = useCallback(() => {
-      fetchAllTimeline({
-        pageInfo: {
-          pageIndex: pageIndex + 1,
-          pageSize,
-        },
-        search,
-        sort: { sortField: sortField as SortFieldTimeline, sortOrder: sortDirection as Direction },
-        onlyUserFavorite: onlyFavorites,
-        timelineType,
-      });
-    }, [pageIndex, pageSize, search, sortField, sortDirection, timelineType, onlyFavorites]);
-
-    /** Invoked when the user presses enters to submit the text in the search input */
-    const onQueryChange: OnQueryChange = useCallback((query: EuiSearchBarQuery) => {
-      setSearch(query.queryText.trim());
-    }, []);
-
-    /** Focuses the input that filters the field browser */
-    const focusInput = () => {
-      const elements = document.querySelector<HTMLElement>(`.${OPEN_TIMELINE_CLASS_NAME} input`);
-
-      if (elements != null) {
-        elements.focus();
-      }
-    };
-
-    /* This feature will be implemented in the near future, so we are keeping it to know what to do */
-
-    /** Invoked when the user clicks the action to add the selected timelines to favorites */
-    // const onAddTimelinesToFavorites: OnAddTimelinesToFavorites = () => {
-    // const { addTimelinesToFavorites } = this.props;
-    // const { selectedItems } = this.state;
-    // if (addTimelinesToFavorites != null) {
-    //   addTimelinesToFavorites(getSelectedTimelineIds(selectedItems));
-    // TODO: it's not possible to clear the selection state of the newly-favorited
-    // items, because we can't pass the selection state as props to the table.
-    // See: https://github.com/elastic/eui/issues/1077
-    // TODO: the query must re-execute to show the results of the mutation
-    // }
-    // };
-
-    const deleteTimelines: DeleteTimelines = useCallback(
-      async (timelineIds: string[]) => {
-        if (timelineIds.includes(timeline.savedObjectId || '')) {
-          createNewTimeline({ id: 'timeline-1', columns: defaultHeaders, show: false });
-        }
-
-        await apolloClient.mutate<
-          DeleteTimelineMutation.Mutation,
-          DeleteTimelineMutation.Variables
-        >({
-          mutation: deleteTimelineMutation,
-          fetchPolicy: 'no-cache',
-          variables: { id: timelineIds },
-        });
-        refetch();
-      },
-      [apolloClient, createNewTimeline, refetch, timeline]
-    );
-
-    const onDeleteOneTimeline: OnDeleteOneTimeline = useCallback(
-      async (timelineIds: string[]) => {
-        await deleteTimelines(timelineIds);
-      },
-      [deleteTimelines]
-    );
-
-    /** Invoked when the user clicks the action to delete the selected timelines */
-    const onDeleteSelected: OnDeleteSelected = useCallback(async () => {
-      await deleteTimelines(getSelectedTimelineIds(selectedItems));
-
-      // NOTE: we clear the selection state below, but if the server fails to
-      // delete a timeline, it will remain selected in the table:
-      resetSelectionState();
-
-      // TODO: the query must re-execute to show the results of the deletion
-    }, [selectedItems, deleteTimelines]);
-
-    /** Invoked when the user selects (or de-selects) timelines */
-    const onSelectionChange: OnSelectionChange = useCallback(
-      (newSelectedItems: OpenTimelineResult[]) => {
-        setSelectedItems(newSelectedItems); // <-- this is NOT passed down as props to the table: https://github.com/elastic/eui/issues/1077
-      },
-      []
-    );
-
-    /** Invoked by the EUI table implementation when the user interacts with the table (i.e. to update sorting) */
-    const onTableChange: OnTableChange = useCallback(({ page, sort }: OnTableChangeParams) => {
-      const { index, size } = page;
-      const { field, direction } = sort;
-      setPageIndex(index);
-      setPageSize(size);
-      setSortDirection(direction);
-      setSortField(field);
-    }, []);
-
-    /** Invoked when the user toggles the option to only view favorite timelines */
-    const onToggleOnlyFavorites: OnToggleOnlyFavorites = useCallback(() => {
-      setOnlyFavorites(!onlyFavorites);
-    }, [onlyFavorites]);
-
-    /** Invoked when the user toggles the expansion or collapse of inline notes in a table row */
-    const onToggleShowNotes: OnToggleShowNotes = useCallback(
-      (newItemIdToExpandedNotesRowMap: Record<string, JSX.Element>) => {
-        setItemIdToExpandedNotesRowMap(newItemIdToExpandedNotesRowMap);
-      },
-      []
-    );
-
-    /** Resets the selection state such that all timelines are unselected */
-    const resetSelectionState = useCallback(() => {
-      setSelectedItems([]);
-    }, []);
-
-    const openTimeline: OnOpenTimeline = useCallback(
-      ({ duplicate, timelineId }: { duplicate: boolean; timelineId: string }) => {
-        if (isModal && closeModalTimeline != null) {
-          closeModalTimeline();
-        }
-
-        queryTimelineById({
-          apolloClient,
-          duplicate,
-          onOpenTimeline,
-          timelineId,
-          updateIsLoading,
-          updateTimeline,
-        });
-      },
-      [apolloClient, updateIsLoading, updateTimeline]
-    );
-
-    useEffect(() => {
-      focusInput();
-    }, []);
-
-    useEffect(() => {
-      refetch();
-    }, [refetch]);
-
-    return !isModal ? (
-      <OpenTimeline
-        data-test-subj={'open-timeline'}
-        deleteTimelines={onDeleteOneTimeline}
-        defaultPageSize={defaultPageSize}
-        isLoading={loading}
-        itemIdToExpandedNotesRowMap={itemIdToExpandedNotesRowMap}
-        importDataModalToggle={importDataModalToggle}
-        onAddTimelinesToFavorites={undefined}
-        onDeleteSelected={onDeleteSelected}
-        onlyFavorites={onlyFavorites}
-        onOpenTimeline={openTimeline}
-        onQueryChange={onQueryChange}
-        onSelectionChange={onSelectionChange}
-        onTableChange={onTableChange}
-        onToggleOnlyFavorites={onToggleOnlyFavorites}
-        onToggleShowNotes={onToggleShowNotes}
-        pageIndex={pageIndex}
-        pageSize={pageSize}
-        query={search}
-        refetch={refetch}
-        searchResults={timelines}
-        setImportDataModalToggle={setImportDataModalToggle}
-        selectedItems={selectedItems}
-        sortDirection={sortDirection}
-        sortField={sortField}
-        tabs={timelineTabs}
-        title={title}
-        totalSearchResultsCount={totalCount}
-      />
-    ) : (
-      <OpenTimelineModalBody
-        data-test-subj={'open-timeline-modal'}
-        deleteTimelines={onDeleteOneTimeline}
-        defaultPageSize={defaultPageSize}
-        hideActions={hideActions}
-        isLoading={loading}
-        itemIdToExpandedNotesRowMap={itemIdToExpandedNotesRowMap}
-        onAddTimelinesToFavorites={undefined}
-        onlyFavorites={onlyFavorites}
-        onOpenTimeline={openTimeline}
-        onQueryChange={onQueryChange}
-        onSelectionChange={onSelectionChange}
-        onTableChange={onTableChange}
-        onToggleOnlyFavorites={onToggleOnlyFavorites}
-        onToggleShowNotes={onToggleShowNotes}
-        pageIndex={pageIndex}
-        pageSize={pageSize}
-        query={search}
-        searchResults={timelines}
-        selectedItems={selectedItems}
-        sortDirection={sortDirection}
-        sortField={sortField}
-        tabs={timelineFilters}
-        title={title}
-        totalSearchResultsCount={totalCount}
-      />
-    );
-  }
-);
-
-const makeMapStateToProps = () => {
-  const getTimeline = timelineSelectors.getTimelineByIdSelector();
-  const mapStateToProps = (state: State) => {
-    const timeline = getTimeline(state, 'timeline-1') ?? timelineDefaults;
-    return {
-      timeline,
-    };
-  };
-  return mapStateToProps;
-};
-
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  createNewTimeline: ({
-    id,
-    columns,
-    show,
-  }: {
-    id: string;
-    columns: ColumnHeaderOptions[];
-    show?: boolean;
-  }) => dispatch(dispatchCreateNewTimeline({ id, columns, show })),
-  updateIsLoading: ({ id, isLoading }: { id: string; isLoading: boolean }) =>
-    dispatch(dispatchUpdateIsLoading({ id, isLoading })),
-  updateTimeline: dispatchUpdateTimeline(dispatch),
-});
-
-const connector = connect(makeMapStateToProps, mapDispatchToProps);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-export const StatefulOpenTimeline = connector(StatefulOpenTimelineComponent);
diff --git a/x-pack/plugins/siem/public/components/open_timeline/note_previews/index.test.tsx b/x-pack/plugins/siem/public/components/open_timeline/note_previews/index.test.tsx
deleted file mode 100644
index 463111bd9735f0..00000000000000
--- a/x-pack/plugins/siem/public/components/open_timeline/note_previews/index.test.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-/*
- * 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 euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
-import { cloneDeep } from 'lodash/fp';
-import moment from 'moment';
-import { mountWithIntl } from 'test_utils/enzyme_helpers';
-import React from 'react';
-import { ThemeProvider } from 'styled-components';
-
-import { mockTimelineResults } from '../../../mock/timeline_results';
-import { OpenTimelineResult, TimelineResultNote } from '../types';
-import { NotePreviews } from '.';
-
-describe('NotePreviews', () => {
-  const theme = () => ({ eui: euiDarkVars, darkMode: true });
-  let mockResults: OpenTimelineResult[];
-  let note1updated: number;
-  let note2updated: number;
-  let note3updated: number;
-
-  beforeEach(() => {
-    mockResults = cloneDeep(mockTimelineResults);
-    note1updated = moment('2019-03-24T04:12:33.000Z').valueOf();
-    note2updated = moment(note1updated)
-      .add(1, 'minute')
-      .valueOf();
-    note3updated = moment(note2updated)
-      .add(1, 'minute')
-      .valueOf();
-  });
-
-  test('it renders a note preview for each note when isModal is false', () => {
-    const hasNotes: OpenTimelineResult[] = [{ ...mockResults[0] }];
-
-    const wrapper = mountWithIntl(
-      <ThemeProvider theme={theme}>
-        <NotePreviews notes={hasNotes[0].notes} />
-      </ThemeProvider>
-    );
-
-    hasNotes[0].notes!.forEach(({ savedObjectId }) => {
-      expect(wrapper.find(`[data-test-subj="note-preview-${savedObjectId}"]`).exists()).toBe(true);
-    });
-  });
-
-  test('it renders a note preview for each note when isModal is true', () => {
-    const hasNotes: OpenTimelineResult[] = [{ ...mockResults[0] }];
-
-    const wrapper = mountWithIntl(
-      <ThemeProvider theme={theme}>
-        <NotePreviews notes={hasNotes[0].notes} />
-      </ThemeProvider>
-    );
-
-    hasNotes[0].notes!.forEach(({ savedObjectId }) => {
-      expect(wrapper.find(`[data-test-subj="note-preview-${savedObjectId}"]`).exists()).toBe(true);
-    });
-  });
-
-  test('it does NOT render the preview container if notes is undefined', () => {
-    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 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 notes={[]} />);
-
-    expect(wrapper.find('[data-test-subj="note-previews-container"]').exists()).toBe(false);
-  });
-
-  test('it filters-out non-unique savedObjectIds', () => {
-    const nonUniqueNotes: TimelineResultNote[] = [
-      {
-        note: '1',
-        savedObjectId: 'noteId1',
-        updated: note1updated,
-        updatedBy: 'alice',
-      },
-      {
-        note: '2 (savedObjectId is the same as the previous entry)',
-        savedObjectId: 'noteId1',
-        updated: note2updated,
-        updatedBy: 'alice',
-      },
-      {
-        note: '3',
-        savedObjectId: 'noteId2',
-        updated: note3updated,
-        updatedBy: 'bob',
-      },
-    ];
-
-    const wrapper = mountWithIntl(
-      <ThemeProvider theme={theme}>
-        <NotePreviews notes={nonUniqueNotes} />
-      </ThemeProvider>
-    );
-
-    expect(
-      wrapper
-        .find(`[data-test-subj="updated-by"]`)
-        .at(2)
-        .text()
-    ).toEqual('bob');
-  });
-
-  test('it filters-out null savedObjectIds', () => {
-    const nonUniqueNotes: TimelineResultNote[] = [
-      {
-        note: '1',
-        savedObjectId: 'noteId1',
-        updated: note1updated,
-        updatedBy: 'alice',
-      },
-      {
-        note: '2 (savedObjectId is null)',
-        savedObjectId: null,
-        updated: note2updated,
-        updatedBy: 'alice',
-      },
-      {
-        note: '3',
-        savedObjectId: 'noteId2',
-        updated: note3updated,
-        updatedBy: 'bob',
-      },
-    ];
-
-    const wrapper = mountWithIntl(
-      <ThemeProvider theme={theme}>
-        <NotePreviews notes={nonUniqueNotes} />
-      </ThemeProvider>
-    );
-
-    expect(
-      wrapper
-        .find(`[data-test-subj="updated-by"]`)
-        .at(2)
-        .text()
-    ).toEqual('bob');
-  });
-
-  test('it filters-out undefined savedObjectIds', () => {
-    const nonUniqueNotes: TimelineResultNote[] = [
-      {
-        note: '1',
-        savedObjectId: 'noteId1',
-        updated: note1updated,
-        updatedBy: 'alice',
-      },
-      {
-        note: 'b (savedObjectId is undefined)',
-        updated: note2updated,
-        updatedBy: 'alice',
-      },
-      {
-        note: 'c',
-        savedObjectId: 'noteId2',
-        updated: note3updated,
-        updatedBy: 'bob',
-      },
-    ];
-
-    const wrapper = mountWithIntl(
-      <ThemeProvider theme={theme}>
-        <NotePreviews notes={nonUniqueNotes} />
-      </ThemeProvider>
-    );
-
-    expect(
-      wrapper
-        .find(`[data-test-subj="updated-by"]`)
-        .at(2)
-        .text()
-    ).toEqual('bob');
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/open_timeline/open_timeline_modal/index.test.tsx b/x-pack/plugins/siem/public/components/open_timeline/open_timeline_modal/index.test.tsx
deleted file mode 100644
index 178c69e6957e1d..00000000000000
--- a/x-pack/plugins/siem/public/components/open_timeline/open_timeline_modal/index.test.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-/*
- * 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 euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
-import { mount } from 'enzyme';
-import React from 'react';
-import { MockedProvider } from 'react-apollo/test-utils';
-import { ThemeProvider } from 'styled-components';
-
-import { wait } from '../../../lib/helpers';
-import { TestProviderWithoutDragAndDrop } from '../../../mock/test_providers';
-import { mockOpenTimelineQueryResults } from '../../../mock/timeline_results';
-import { useGetAllTimeline, getAllTimeline } from '../../../containers/timeline/all';
-
-import { OpenTimelineModal } from '.';
-
-jest.mock('../../../lib/kibana');
-jest.mock('../../../utils/apollo_context', () => ({
-  useApolloClient: () => ({}),
-}));
-jest.mock('../../../containers/timeline/all', () => {
-  const originalModule = jest.requireActual('../../../containers/timeline/all');
-  return {
-    useGetAllTimeline: jest.fn(),
-    getAllTimeline: originalModule.getAllTimeline,
-  };
-});
-jest.mock('../use_timeline_types', () => {
-  return {
-    useTimelineTypes: jest.fn().mockReturnValue({
-      timelineType: 'default',
-      timelineTabs: <div />,
-      timelineFilters: <div />,
-    }),
-  };
-});
-
-describe('OpenTimelineModal', () => {
-  const theme = () => ({ eui: euiDarkVars, darkMode: true });
-  beforeEach(() => {
-    ((useGetAllTimeline as unknown) as jest.Mock).mockReturnValue({
-      fetchAllTimeline: jest.fn(),
-      timelines: getAllTimeline(
-        '',
-        mockOpenTimelineQueryResults[0].result.data?.getAllTimeline?.timeline ?? []
-      ),
-      loading: false,
-      totalCount: mockOpenTimelineQueryResults[0].result.data.getAllTimeline.totalCount,
-      refetch: jest.fn(),
-    });
-  });
-
-  test('it renders the expected modal', async () => {
-    const wrapper = mount(
-      <ThemeProvider theme={theme}>
-        <TestProviderWithoutDragAndDrop>
-          <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
-            <OpenTimelineModal onClose={jest.fn()} />
-          </MockedProvider>
-        </TestProviderWithoutDragAndDrop>
-      </ThemeProvider>
-    );
-
-    await wait();
-
-    wrapper.update();
-
-    expect(wrapper.find('div[data-test-subj="open-timeline-modal"].euiModal').length).toEqual(1);
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/open_timeline/open_timeline_modal/index.tsx b/x-pack/plugins/siem/public/components/open_timeline/open_timeline_modal/index.tsx
deleted file mode 100644
index c530929a3c96ee..00000000000000
--- a/x-pack/plugins/siem/public/components/open_timeline/open_timeline_modal/index.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-/*
- * 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 { EuiModal, EuiOverlayMask } from '@elastic/eui';
-import React from 'react';
-
-import { TimelineModel } from '../../../store/timeline/model';
-import { useApolloClient } from '../../../utils/apollo_context';
-
-import * as i18n from '../translations';
-import { ActionTimelineToShow } from '../types';
-import { StatefulOpenTimeline } from '..';
-
-export interface OpenTimelineModalProps {
-  onClose: () => void;
-  hideActions?: ActionTimelineToShow[];
-  modalTitle?: string;
-  onOpen?: (timeline: TimelineModel) => void;
-}
-
-const DEFAULT_SEARCH_RESULTS_PER_PAGE = 10;
-const OPEN_TIMELINE_MODAL_WIDTH = 1000; // px
-
-export const OpenTimelineModal = React.memo<OpenTimelineModalProps>(
-  ({ hideActions = [], modalTitle, onClose, onOpen }) => {
-    const apolloClient = useApolloClient();
-
-    if (!apolloClient) return null;
-
-    return (
-      <EuiOverlayMask>
-        <EuiModal
-          data-test-subj="open-timeline-modal"
-          maxWidth={OPEN_TIMELINE_MODAL_WIDTH}
-          onClose={onClose}
-        >
-          <StatefulOpenTimeline
-            apolloClient={apolloClient}
-            closeModalTimeline={onClose}
-            hideActions={hideActions}
-            isModal={true}
-            defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
-            onOpenTimeline={onOpen}
-            title={modalTitle ?? i18n.OPEN_TIMELINE_TITLE}
-          />
-        </EuiModal>
-      </EuiOverlayMask>
-    );
-  }
-);
-
-OpenTimelineModal.displayName = 'OpenTimelineModal';
diff --git a/x-pack/plugins/siem/public/components/open_timeline/timelines_table/index.test.tsx b/x-pack/plugins/siem/public/components/open_timeline/timelines_table/index.test.tsx
deleted file mode 100644
index 44e6218b5ad259..00000000000000
--- a/x-pack/plugins/siem/public/components/open_timeline/timelines_table/index.test.tsx
+++ /dev/null
@@ -1,326 +0,0 @@
-/*
- * 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 euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
-import { cloneDeep } from 'lodash/fp';
-import { mountWithIntl } from 'test_utils/enzyme_helpers';
-import React from 'react';
-import { ThemeProvider } from 'styled-components';
-
-import { mockTimelineResults } from '../../../mock/timeline_results';
-import { OpenTimelineResult } from '../types';
-import { TimelinesTable, TimelinesTableProps } from '.';
-import { getMockTimelinesTableProps } from './mocks';
-
-import * as i18n from '../translations';
-
-jest.mock('../../../lib/kibana');
-
-describe('TimelinesTable', () => {
-  const theme = () => ({ eui: euiDarkVars, darkMode: true });
-  let mockResults: OpenTimelineResult[];
-
-  beforeEach(() => {
-    mockResults = cloneDeep(mockTimelineResults);
-  });
-
-  test('it renders the select all timelines header checkbox when actionTimelineToShow has the action selectable', () => {
-    const wrapper = mountWithIntl(
-      <ThemeProvider theme={theme}>
-        <TimelinesTable {...getMockTimelinesTableProps(mockResults)} />
-      </ThemeProvider>
-    );
-
-    expect(
-      wrapper
-        .find('thead tr th input')
-        .first()
-        .exists()
-    ).toBe(true);
-  });
-
-  test('it does NOT render the select all timelines header checkbox when actionTimelineToShow has not the action selectable', () => {
-    const testProps: TimelinesTableProps = {
-      ...getMockTimelinesTableProps(mockResults),
-      actionTimelineToShow: ['delete', 'duplicate'],
-    };
-    const wrapper = mountWithIntl(
-      <ThemeProvider theme={theme}>
-        <TimelinesTable {...testProps} />
-      </ThemeProvider>
-    );
-
-    expect(
-      wrapper
-        .find('thead tr th input')
-        .first()
-        .exists()
-    ).toBe(false);
-  });
-
-  test('it renders the Modified By column when showExtendedColumns is true ', () => {
-    const testProps: TimelinesTableProps = {
-      ...getMockTimelinesTableProps(mockResults),
-      showExtendedColumns: true,
-    };
-    const wrapper = mountWithIntl(
-      <ThemeProvider theme={theme}>
-        <TimelinesTable {...testProps} />
-      </ThemeProvider>
-    );
-
-    expect(
-      wrapper
-        .find('thead tr th')
-        .at(4)
-        .text()
-    ).toContain(i18n.MODIFIED_BY);
-  });
-
-  test('it renders the notes column in the position of the Modified By column when showExtendedColumns is false', () => {
-    const testProps: TimelinesTableProps = {
-      ...getMockTimelinesTableProps(mockResults),
-      showExtendedColumns: false,
-    };
-    const wrapper = mountWithIntl(
-      <ThemeProvider theme={theme}>
-        <TimelinesTable {...testProps} />
-      </ThemeProvider>
-    );
-
-    expect(
-      wrapper
-        .find('thead tr th')
-        .at(5)
-        .find('[data-test-subj="notes-count-header-icon"]')
-        .first()
-        .exists()
-    ).toBe(true);
-  });
-
-  test('it renders the delete timeline (trash icon) when actionTimelineToShow has the delete action', () => {
-    const wrapper = mountWithIntl(
-      <ThemeProvider theme={theme}>
-        <TimelinesTable {...getMockTimelinesTableProps(mockResults)} />
-      </ThemeProvider>
-    );
-
-    expect(
-      wrapper
-        .find('[data-test-subj="delete-timeline"]')
-        .first()
-        .exists()
-    ).toBe(true);
-  });
-
-  test('it does NOT render the delete timeline (trash icon) when actionTimelineToShow has NOT the delete action', () => {
-    const testProps: TimelinesTableProps = {
-      ...getMockTimelinesTableProps(mockResults),
-      actionTimelineToShow: ['duplicate', 'selectable'],
-    };
-    const wrapper = mountWithIntl(
-      <ThemeProvider theme={theme}>
-        <TimelinesTable {...testProps} />
-      </ThemeProvider>
-    );
-
-    expect(
-      wrapper
-        .find('[data-test-subj="delete-timeline"]')
-        .first()
-        .exists()
-    ).toBe(false);
-  });
-
-  test('it renders the rows per page selector when showExtendedColumns is true', () => {
-    const wrapper = mountWithIntl(
-      <ThemeProvider theme={theme}>
-        <TimelinesTable {...getMockTimelinesTableProps(mockResults)} />
-      </ThemeProvider>
-    );
-
-    expect(
-      wrapper
-        .find('EuiTablePagination EuiPopover')
-        .first()
-        .exists()
-    ).toBe(true);
-  });
-
-  test('it does NOT render the rows per page selector when showExtendedColumns is false', () => {
-    const testProps: TimelinesTableProps = {
-      ...getMockTimelinesTableProps(mockResults),
-      showExtendedColumns: false,
-    };
-    const wrapper = mountWithIntl(
-      <ThemeProvider theme={theme}>
-        <TimelinesTable {...testProps} />
-      </ThemeProvider>
-    );
-
-    expect(
-      wrapper
-        .find('EuiTablePagination EuiPopover')
-        .first()
-        .exists()
-    ).toBe(false);
-  });
-
-  test('it renders the default page size specified by the defaultPageSize prop', () => {
-    const defaultPageSize = 123;
-    const testProps = {
-      ...getMockTimelinesTableProps(mockResults),
-      defaultPageSize,
-      pageSize: defaultPageSize,
-    };
-    const wrapper = mountWithIntl(
-      <ThemeProvider theme={theme}>
-        <TimelinesTable {...testProps} />
-      </ThemeProvider>
-    );
-
-    expect(
-      wrapper
-        .find('EuiTablePagination EuiPopover')
-        .first()
-        .text()
-    ).toEqual('Rows per page: 123');
-  });
-
-  test('it sorts the Last Modified column in descending order when showExtendedColumns is true ', () => {
-    const wrapper = mountWithIntl(
-      <ThemeProvider theme={theme}>
-        <TimelinesTable {...getMockTimelinesTableProps(mockResults)} />
-      </ThemeProvider>
-    );
-
-    expect(
-      wrapper
-        .find('[aria-sort="descending"]')
-        .first()
-        .text()
-    ).toContain(i18n.LAST_MODIFIED);
-  });
-
-  test('it sorts the Last Modified column in descending order when showExtendedColumns is false ', () => {
-    const testProps: TimelinesTableProps = {
-      ...getMockTimelinesTableProps(mockResults),
-      showExtendedColumns: false,
-    };
-    const wrapper = mountWithIntl(
-      <ThemeProvider theme={theme}>
-        <TimelinesTable {...testProps} />
-      </ThemeProvider>
-    );
-
-    expect(
-      wrapper
-        .find('[aria-sort="descending"]')
-        .first()
-        .text()
-    ).toContain(i18n.LAST_MODIFIED);
-  });
-
-  test('it displays the expected message when no search results are found', () => {
-    const testProps: TimelinesTableProps = {
-      ...getMockTimelinesTableProps(mockResults),
-      searchResults: [],
-    };
-    const wrapper = mountWithIntl(
-      <ThemeProvider theme={theme}>
-        <TimelinesTable {...testProps} />
-      </ThemeProvider>
-    );
-
-    expect(
-      wrapper
-        .find('tbody tr td div')
-        .first()
-        .text()
-    ).toEqual(i18n.ZERO_TIMELINES_MATCH);
-  });
-
-  test('it invokes onTableChange with the expected parameters when a table header is clicked to sort it', () => {
-    const onTableChange = jest.fn();
-    const testProps: TimelinesTableProps = {
-      ...getMockTimelinesTableProps(mockResults),
-      onTableChange,
-    };
-    const wrapper = mountWithIntl(
-      <ThemeProvider theme={theme}>
-        <TimelinesTable {...testProps} />
-      </ThemeProvider>
-    );
-
-    wrapper
-      .find('thead tr th button')
-      .at(0)
-      .simulate('click');
-
-    wrapper.update();
-
-    expect(onTableChange).toHaveBeenCalledWith({
-      page: { index: 0, size: 10 },
-      sort: { direction: 'asc', field: 'updated' },
-    });
-  });
-
-  test('it invokes onSelectionChange when a row is selected', () => {
-    const onSelectionChange = jest.fn();
-    const testProps: TimelinesTableProps = {
-      ...getMockTimelinesTableProps(mockResults),
-      onSelectionChange,
-    };
-    const wrapper = mountWithIntl(
-      <ThemeProvider theme={theme}>
-        <TimelinesTable {...testProps} />
-      </ThemeProvider>
-    );
-
-    wrapper
-      .find('thead tr th input')
-      .at(0)
-      .simulate('change', { target: { checked: true } });
-
-    wrapper.update();
-
-    expect(onSelectionChange).toHaveBeenCalled();
-  });
-
-  test('it enables the table loading animation when isLoading is true', () => {
-    const testProps: TimelinesTableProps = {
-      ...getMockTimelinesTableProps(mockResults),
-      loading: true,
-    };
-    const wrapper = mountWithIntl(
-      <ThemeProvider theme={theme}>
-        <TimelinesTable {...testProps} />
-      </ThemeProvider>
-    );
-
-    const props = wrapper
-      .find('[data-test-subj="timelines-table"]')
-      .first()
-      .props() as TimelinesTableProps;
-
-    expect(props.loading).toBe(true);
-  });
-
-  test('it disables the table loading animation when isLoading is false', () => {
-    const wrapper = mountWithIntl(
-      <ThemeProvider theme={theme}>
-        <TimelinesTable {...getMockTimelinesTableProps(mockResults)} />
-      </ThemeProvider>
-    );
-
-    const props = wrapper
-      .find('[data-test-subj="timelines-table"]')
-      .first()
-      .props() as TimelinesTableProps;
-
-    expect(props.loading).toBe(false);
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/open_timeline/title_row/index.tsx b/x-pack/plugins/siem/public/components/open_timeline/title_row/index.tsx
deleted file mode 100644
index 559bbc3eecb824..00000000000000
--- a/x-pack/plugins/siem/public/components/open_timeline/title_row/index.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-/*
- * 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 { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import React from 'react';
-
-import * as i18n from '../translations';
-import { OpenTimelineProps } from '../types';
-import { HeaderSection } from '../../header_section';
-
-type Props = Pick<OpenTimelineProps, 'onAddTimelinesToFavorites' | 'title'> & {
-  /** The number of timelines currently selected */
-  selectedTimelinesCount: number;
-  children?: JSX.Element;
-};
-
-/**
- * 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 = React.memo<Props>(
-  ({ children, onAddTimelinesToFavorites, selectedTimelinesCount, title }) => (
-    <HeaderSection title={title} split={true}>
-      <EuiFlexGroup gutterSize="s" responsive={false}>
-        {onAddTimelinesToFavorites && (
-          <EuiFlexItem grow={false}>
-            <EuiButton
-              data-test-subj="favorite-selected"
-              iconSide="left"
-              iconType="starEmptySpace"
-              isDisabled={selectedTimelinesCount === 0}
-              onClick={onAddTimelinesToFavorites}
-            >
-              {i18n.FAVORITE_SELECTED}
-            </EuiButton>
-          </EuiFlexItem>
-        )}
-
-        {children && <EuiFlexItem>{children}</EuiFlexItem>}
-      </EuiFlexGroup>
-    </HeaderSection>
-  )
-);
-
-TitleRow.displayName = 'TitleRow';
diff --git a/x-pack/plugins/siem/public/components/open_timeline/types.ts b/x-pack/plugins/siem/public/components/open_timeline/types.ts
deleted file mode 100644
index 4d953f6fa775e1..00000000000000
--- a/x-pack/plugins/siem/public/components/open_timeline/types.ts
+++ /dev/null
@@ -1,203 +0,0 @@
-/*
- * 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 { SetStateAction, Dispatch } from 'react';
-import { AllTimelinesVariables } from '../../containers/timeline/all';
-import { TimelineModel } from '../../store/timeline/model';
-import { NoteResult } from '../../graphql/types';
-import { TimelineType, TimelineTypeLiteral } from '../../../common/types/timeline';
-
-/** The users who added a timeline to favorites */
-export interface FavoriteTimelineResult {
-  userId?: number | null;
-  userName?: string | null;
-  favoriteDate?: number | null;
-}
-
-export interface TimelineResultNote {
-  savedObjectId?: string | null;
-  note?: string | null;
-  noteId?: string | null;
-  updated?: number | null;
-  updatedBy?: string | null;
-}
-
-export interface TimelineActionsOverflowColumns {
-  width: string;
-  actions: Array<{
-    name: string;
-    icon?: string;
-    onClick?: (timeline: OpenTimelineResult) => void;
-    description: string;
-    render?: (timeline: OpenTimelineResult) => JSX.Element;
-  } | null>;
-}
-
-/** The results of the query run by the OpenTimeline component */
-export interface OpenTimelineResult {
-  created?: number | null;
-  description?: string | null;
-  eventIdToNoteIds?: Readonly<Record<string, string[]>> | null;
-  favorite?: FavoriteTimelineResult[] | null;
-  noteIds?: string[] | null;
-  notes?: TimelineResultNote[] | null;
-  pinnedEventIds?: Readonly<Record<string, boolean>> | null;
-  savedObjectId?: string | null;
-  title?: string | null;
-  templateTimelineId?: string | null;
-  type?: TimelineType.template | TimelineType.default;
-  updated?: number | null;
-  updatedBy?: string | null;
-}
-
-/**
- * EuiSearchBar returns this object when the user changes the query. At the
- * time of this writing, there is no typescript definition for this type, so
- * only the properties used by the Open Timeline component are exposed.
- */
-export interface EuiSearchBarQuery {
-  queryText: string;
-}
-
-/** Performs IO to delete the specified timelines */
-export type DeleteTimelines = (timelineIds: string[], variables?: AllTimelinesVariables) => void;
-
-/** Invoked when the user clicks the action make the selected timelines favorites */
-export type OnAddTimelinesToFavorites = () => void;
-
-/** Invoked when the user clicks the action to delete the selected timelines */
-export type OnDeleteSelected = () => void;
-export type OnDeleteOneTimeline = (timelineIds: string[]) => void;
-
-/** Invoked when the user clicks on the name of a timeline to open it */
-export type OnOpenTimeline = ({
-  duplicate,
-  timelineId,
-}: {
-  duplicate: boolean;
-  timelineId: string;
-}) => void;
-
-export type OnOpenDeleteTimelineModal = (selectedItem: OpenTimelineResult) => void;
-export type SetActionTimeline = Dispatch<SetStateAction<OpenTimelineResult | undefined>>;
-export type EnableExportTimelineDownloader = (selectedItem: OpenTimelineResult) => void;
-/** Invoked when the user presses enters to submit the text in the search input */
-export type OnQueryChange = (query: EuiSearchBarQuery) => void;
-
-/** Invoked when the user selects (or de-selects) timelines in the table */
-export type OnSelectionChange = (selectedItems: OpenTimelineResult[]) => void;
-
-/** Invoked when the user toggles the option to only view favorite timelines */
-export type OnToggleOnlyFavorites = () => void;
-
-/** Invoked when the user toggles the expansion or collapse of inline notes in a table row */
-export type OnToggleShowNotes = (itemIdToExpandedNotesRowMap: Record<string, JSX.Element>) => void;
-
-/** Parameters to the OnTableChange callback  */
-export interface OnTableChangeParams {
-  page: {
-    index: number;
-    size: number;
-  };
-  sort: {
-    field: string;
-    direction: 'asc' | 'desc';
-  };
-}
-
-/** Invoked by the EUI table implementation when the user interacts with the table */
-export type OnTableChange = (tableChange: OnTableChangeParams) => void;
-
-export type ActionTimelineToShow = 'duplicate' | 'delete' | 'export' | 'selectable';
-
-export interface OpenTimelineProps {
-  /** Invoked when the user clicks the delete (trash) icon on an individual timeline */
-  deleteTimelines?: DeleteTimelines;
-  /** The default requested size of each page of search results */
-  defaultPageSize: number;
-  /** Displays an indicator that data is loading when true */
-  isLoading: boolean;
-  /** Required by EuiTable for expandable rows: a map of `TimelineResult.savedObjectId` to rendered notes */
-  itemIdToExpandedNotesRowMap: Record<string, JSX.Element>;
-  /** Display import timelines modal*/
-  importDataModalToggle?: boolean;
-  /** If this callback is specified, a "Favorite Selected" button will be displayed, and this callback will be invoked when the button is clicked */
-  onAddTimelinesToFavorites?: OnAddTimelinesToFavorites;
-  /** If this callback is specified, a "Delete Selected" button will be displayed, and this callback will be invoked when the button is clicked */
-  onDeleteSelected?: OnDeleteSelected;
-  /** Only show favorite timelines when true */
-  onlyFavorites: boolean;
-  /** Invoked when the user presses enter after typing in the search bar */
-  onQueryChange: OnQueryChange;
-  /** Invoked when the user selects (or de-selects) timelines in the table */
-  onSelectionChange: OnSelectionChange;
-  /** Invoked when the user clicks on the name of a timeline to open it */
-  onOpenTimeline: OnOpenTimeline;
-  /** Invoked by the EUI table implementation when the user interacts with the table */
-  onTableChange: OnTableChange;
-  /** Invoked when the user toggles the option to only show favorite timelines */
-  onToggleOnlyFavorites: OnToggleOnlyFavorites;
-  /** Invoked when the user toggles the expansion or collapse of inline notes in a table row */
-  onToggleShowNotes: OnToggleShowNotes;
-  /** the requested page of results */
-  pageIndex: number;
-  /** the requested size of each page of search results */
-  pageSize: number;
-  /** The currently applied search criteria */
-  query: string;
-  /** Refetch table */
-  refetch?: (existingTimeline?: OpenTimelineResult[], existingCount?: number) => void;
-  /** The results of executing a search */
-  searchResults: OpenTimelineResult[];
-  /** the currently-selected timelines in the table */
-  selectedItems: OpenTimelineResult[];
-  /** Toggle export timelines modal*/
-  setImportDataModalToggle?: React.Dispatch<React.SetStateAction<boolean>>;
-  /** the requested sort direction of the query results */
-  sortDirection: 'asc' | 'desc';
-  /** the requested field to sort on */
-  sortField: string;
-  /** timeline / template timeline */
-  tabs: JSX.Element;
-  /** The title of the Open Timeline component  */
-  title: string;
-  /** The total (server-side) count of the search results */
-  totalSearchResultsCount: number;
-  /** Hide action on timeline if needed it */
-  hideActions?: ActionTimelineToShow[];
-}
-
-export interface UpdateTimeline {
-  duplicate: boolean;
-  id: string;
-  from: number;
-  notes: NoteResult[] | null | undefined;
-  timeline: TimelineModel;
-  to: number;
-  ruleNote?: string;
-}
-
-export type DispatchUpdateTimeline = ({
-  duplicate,
-  id,
-  from,
-  notes,
-  timeline,
-  to,
-  ruleNote,
-}: UpdateTimeline) => () => void;
-
-export enum TimelineTabsStyle {
-  tab = 'tab',
-  filter = 'filter',
-}
-
-export interface TimelineTab {
-  id: TimelineTypeLiteral;
-  name: string;
-  disabled: boolean;
-  href: string;
-}
diff --git a/x-pack/plugins/siem/public/components/page/add_filter_to_global_search_bar/index.test.tsx b/x-pack/plugins/siem/public/components/page/add_filter_to_global_search_bar/index.test.tsx
deleted file mode 100644
index 677fc5e102614a..00000000000000
--- a/x-pack/plugins/siem/public/components/page/add_filter_to_global_search_bar/index.test.tsx
+++ /dev/null
@@ -1,170 +0,0 @@
-/*
- * 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 { mount, shallow } from 'enzyme';
-import React from 'react';
-
-import { apolloClientObservable, mockGlobalState, TestProviders } from '../../../mock';
-import { createStore, State } from '../../../store';
-import { AddFilterToGlobalSearchBar } from '.';
-
-const mockAddFilters = jest.fn();
-jest.mock('../../../lib/kibana', () => ({
-  useKibana: () => ({
-    services: {
-      data: {
-        query: {
-          filterManager: {
-            addFilters: mockAddFilters,
-          },
-        },
-      },
-    },
-  }),
-}));
-
-describe('AddFilterToGlobalSearchBar Component', () => {
-  const state: State = mockGlobalState;
-  let store = createStore(state, apolloClientObservable);
-
-  beforeEach(() => {
-    store = createStore(state, apolloClientObservable);
-    mockAddFilters.mockClear();
-  });
-
-  test('Rendering', async () => {
-    const wrapper = shallow(
-      <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',
-              },
-            },
-          },
-        }}
-      >
-        <>{'siem-kibana'}</>
-      </AddFilterToGlobalSearchBar>
-    );
-
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  test('Rendering tooltip', 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',
-              },
-            },
-            query: {
-              match: {
-                'host.name': {
-                  query: 'siem-kibana',
-                  type: 'phrase',
-                },
-              },
-            },
-          }}
-        >
-          <>{'siem-kibana'}</>
-        </AddFilterToGlobalSearchBar>
-      </TestProviders>
-    );
-
-    wrapper.simulate('mouseenter');
-    wrapper.update();
-    expect(wrapper.find('[data-test-subj="hover-actions-container"] svg').first()).toBeTruthy();
-  });
-
-  test('Functionality with inputs state', async () => {
-    const onFilterAdded = jest.fn();
-
-    const wrapper = mount(
-      <TestProviders store={store}>
-        <AddFilterToGlobalSearchBar
-          onFilterAdded={onFilterAdded}
-          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',
-                },
-              },
-            },
-          }}
-        >
-          <>{'siem-kibana'}</>
-        </AddFilterToGlobalSearchBar>
-      </TestProviders>
-    );
-
-    wrapper
-      .simulate('mouseenter')
-      .find('[data-test-subj="hover-actions-container"] [data-euiicon-type]')
-      .first()
-      .simulate('click');
-    wrapper.update();
-
-    expect(mockAddFilters.mock.calls[0][0]).toEqual({
-      meta: {
-        alias: null,
-        disabled: false,
-        key: 'host.name',
-        negate: false,
-        params: {
-          query: 'siem-kibana',
-        },
-        type: 'phrase',
-        value: 'siem-kibana',
-      },
-      query: {
-        match: {
-          'host.name': {
-            query: 'siem-kibana',
-            type: 'phrase',
-          },
-        },
-      },
-    });
-    expect(onFilterAdded).toHaveBeenCalledTimes(1);
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/page/add_filter_to_global_search_bar/index.tsx b/x-pack/plugins/siem/public/components/page/add_filter_to_global_search_bar/index.tsx
deleted file mode 100644
index 7aed36422bd2f5..00000000000000
--- a/x-pack/plugins/siem/public/components/page/add_filter_to_global_search_bar/index.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-/*
- * 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 { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
-import React, { useCallback } from 'react';
-
-import { Filter } from '../../../../../../../src/plugins/data/public';
-import { WithHoverActions } from '../../with_hover_actions';
-import { useKibana } from '../../../lib/kibana';
-
-import * as i18n from './translations';
-
-export * from './helpers';
-
-interface OwnProps {
-  children: JSX.Element;
-  filter: Filter;
-  onFilterAdded?: () => void;
-}
-
-export const AddFilterToGlobalSearchBar = React.memo<OwnProps>(
-  ({ children, filter, onFilterAdded }) => {
-    const { filterManager } = useKibana().services.data.query;
-
-    const filterForValue = useCallback(() => {
-      filterManager.addFilters(filter);
-
-      if (onFilterAdded != null) {
-        onFilterAdded();
-      }
-    }, [filterManager, filter, onFilterAdded]);
-
-    const filterOutValue = useCallback(() => {
-      filterManager.addFilters({
-        ...filter,
-        meta: {
-          ...filter.meta,
-          negate: true,
-        },
-      });
-
-      if (onFilterAdded != null) {
-        onFilterAdded();
-      }
-    }, [filterManager, filter, onFilterAdded]);
-
-    return (
-      <WithHoverActions
-        hoverContent={
-          <div data-test-subj="hover-actions-container">
-            <EuiToolTip content={i18n.FILTER_FOR_VALUE}>
-              <EuiButtonIcon
-                aria-label={i18n.FILTER_FOR_VALUE}
-                color="text"
-                data-test-subj="add-to-filter"
-                iconType="magnifyWithPlus"
-                onClick={filterForValue}
-              />
-            </EuiToolTip>
-
-            <EuiToolTip content={i18n.FILTER_OUT_VALUE}>
-              <EuiButtonIcon
-                aria-label={i18n.FILTER_OUT_VALUE}
-                color="text"
-                data-test-subj="filter-out-value"
-                iconType="magnifyWithMinus"
-                onClick={filterOutValue}
-              />
-            </EuiToolTip>
-          </div>
-        }
-        render={() => children}
-      />
-    );
-  }
-);
-
-AddFilterToGlobalSearchBar.displayName = 'AddFilterToGlobalSearchBar';
diff --git a/x-pack/plugins/siem/public/components/page/hosts/authentications_table/index.test.tsx b/x-pack/plugins/siem/public/components/page/hosts/authentications_table/index.test.tsx
deleted file mode 100644
index d7c25e97b3838d..00000000000000
--- a/x-pack/plugins/siem/public/components/page/hosts/authentications_table/index.test.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-/*
- * 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 { shallow } from 'enzyme';
-import { getOr } from 'lodash/fp';
-import React from 'react';
-import { Provider as ReduxStoreProvider } from 'react-redux';
-
-import { apolloClientObservable, mockGlobalState } from '../../../../mock';
-import { createStore, hostsModel, State } from '../../../../store';
-
-import { mockData } from './mock';
-import * as i18n from './translations';
-import { AuthenticationTable, getAuthenticationColumnsCurated } from '.';
-
-describe('Authentication Table Component', () => {
-  const loadPage = jest.fn();
-  const state: State = mockGlobalState;
-
-  let store = createStore(state, apolloClientObservable);
-
-  beforeEach(() => {
-    store = createStore(state, apolloClientObservable);
-  });
-
-  describe('rendering', () => {
-    test('it renders the authentication table', () => {
-      const wrapper = shallow(
-        <ReduxStoreProvider store={store}>
-          <AuthenticationTable
-            data={mockData.Authentications.edges}
-            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.Authentications.pageInfo)}
-            id="authentication"
-            isInspect={false}
-            loading={false}
-            loadPage={loadPage}
-            showMorePagesIndicator={getOr(
-              false,
-              'showMorePagesIndicator',
-              mockData.Authentications.pageInfo
-            )}
-            totalCount={mockData.Authentications.totalCount}
-            type={hostsModel.HostsType.page}
-          />
-        </ReduxStoreProvider>
-      );
-
-      expect(wrapper.find('Connect(AuthenticationTableComponent)')).toMatchSnapshot();
-    });
-  });
-
-  describe('columns', () => {
-    test('on hosts page, we expect to get all columns', () => {
-      expect(getAuthenticationColumnsCurated(hostsModel.HostsType.page).length).toEqual(9);
-    });
-
-    test('on host details page, we expect to remove two columns', () => {
-      const columns = getAuthenticationColumnsCurated(hostsModel.HostsType.details);
-      expect(columns.length).toEqual(7);
-    });
-
-    test('on host details page, we should have Last Failed Destination column', () => {
-      const columns = getAuthenticationColumnsCurated(hostsModel.HostsType.page);
-      expect(columns.some(col => col.name === i18n.LAST_FAILED_DESTINATION)).toEqual(true);
-    });
-
-    test('on host details page, we should not have Last Failed Destination column', () => {
-      const columns = getAuthenticationColumnsCurated(hostsModel.HostsType.details);
-      expect(columns.some(col => col.name === i18n.LAST_FAILED_DESTINATION)).toEqual(false);
-    });
-
-    test('on host page, we should have Last Successful Destination column', () => {
-      const columns = getAuthenticationColumnsCurated(hostsModel.HostsType.page);
-      expect(columns.some(col => col.name === i18n.LAST_SUCCESSFUL_DESTINATION)).toEqual(true);
-    });
-
-    test('on host details page, we should not have Last Successful Destination column', () => {
-      const columns = getAuthenticationColumnsCurated(hostsModel.HostsType.details);
-      expect(columns.some(col => col.name === i18n.LAST_SUCCESSFUL_DESTINATION)).toEqual(false);
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/page/hosts/authentications_table/index.tsx b/x-pack/plugins/siem/public/components/page/hosts/authentications_table/index.tsx
deleted file mode 100644
index 678faff7654db8..00000000000000
--- a/x-pack/plugins/siem/public/components/page/hosts/authentications_table/index.tsx
+++ /dev/null
@@ -1,346 +0,0 @@
-/*
- * 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.
- */
-
-/* eslint-disable react/display-name */
-
-import { has } from 'lodash/fp';
-import React, { useCallback, useMemo } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
-
-import { hostsActions } from '../../../../store/hosts';
-import { AuthenticationsEdges } from '../../../../graphql/types';
-import { hostsModel, hostsSelectors, State } from '../../../../store';
-import { DragEffects, DraggableWrapper } from '../../../drag_and_drop/draggable_wrapper';
-import { escapeDataProviderId } from '../../../drag_and_drop/helpers';
-import { getEmptyTagValue } from '../../../empty_value';
-import { FormattedRelativePreferenceDate } from '../../../formatted_date';
-import { HostDetailsLink, IPDetailsLink } from '../../../links';
-import { Columns, ItemsPerRow, PaginatedTable } from '../../../paginated_table';
-import { IS_OPERATOR } from '../../../timeline/data_providers/data_provider';
-import { Provider } from '../../../timeline/data_providers/provider';
-
-import * as i18n from './translations';
-import { getRowItemDraggables } from '../../../tables/helpers';
-
-const tableType = hostsModel.HostsTableType.authentications;
-
-interface OwnProps {
-  data: AuthenticationsEdges[];
-  fakeTotalCount: number;
-  loading: boolean;
-  loadPage: (newActivePage: number) => void;
-  id: string;
-  isInspect: boolean;
-  showMorePagesIndicator: boolean;
-  totalCount: number;
-  type: hostsModel.HostsType;
-}
-
-export type AuthTableColumns = [
-  Columns<AuthenticationsEdges>,
-  Columns<AuthenticationsEdges>,
-  Columns<AuthenticationsEdges>,
-  Columns<AuthenticationsEdges>,
-  Columns<AuthenticationsEdges>,
-  Columns<AuthenticationsEdges>,
-  Columns<AuthenticationsEdges>,
-  Columns<AuthenticationsEdges>,
-  Columns<AuthenticationsEdges>
-];
-
-type AuthenticationTableProps = OwnProps & PropsFromRedux;
-
-const rowItems: ItemsPerRow[] = [
-  {
-    text: i18n.ROWS_5,
-    numberOfRow: 5,
-  },
-  {
-    text: i18n.ROWS_10,
-    numberOfRow: 10,
-  },
-];
-
-const AuthenticationTableComponent = React.memo<AuthenticationTableProps>(
-  ({
-    activePage,
-    data,
-    fakeTotalCount,
-    id,
-    isInspect,
-    limit,
-    loading,
-    loadPage,
-    showMorePagesIndicator,
-    totalCount,
-    type,
-    updateTableActivePage,
-    updateTableLimit,
-  }) => {
-    const updateLimitPagination = useCallback(
-      newLimit =>
-        updateTableLimit({
-          hostsType: type,
-          limit: newLimit,
-          tableType,
-        }),
-      [type, updateTableLimit]
-    );
-
-    const updateActivePage = useCallback(
-      newPage =>
-        updateTableActivePage({
-          activePage: newPage,
-          hostsType: type,
-          tableType,
-        }),
-      [type, updateTableActivePage]
-    );
-
-    const columns = useMemo(() => getAuthenticationColumnsCurated(type), [type]);
-
-    return (
-      <PaginatedTable
-        activePage={activePage}
-        columns={columns}
-        dataTestSubj={`table-${tableType}`}
-        headerCount={totalCount}
-        headerTitle={i18n.AUTHENTICATIONS}
-        headerUnit={i18n.UNIT(totalCount)}
-        id={id}
-        isInspect={isInspect}
-        itemsPerRow={rowItems}
-        limit={limit}
-        loading={loading}
-        loadPage={loadPage}
-        pageOfItems={data}
-        showMorePagesIndicator={showMorePagesIndicator}
-        totalCount={fakeTotalCount}
-        updateLimitPagination={updateLimitPagination}
-        updateActivePage={updateActivePage}
-      />
-    );
-  }
-);
-
-AuthenticationTableComponent.displayName = 'AuthenticationTableComponent';
-
-const makeMapStateToProps = () => {
-  const getAuthenticationsSelector = hostsSelectors.authenticationsSelector();
-  return (state: State, { type }: OwnProps) => {
-    return getAuthenticationsSelector(state, type);
-  };
-};
-
-const mapDispatchToProps = {
-  updateTableActivePage: hostsActions.updateTableActivePage,
-  updateTableLimit: hostsActions.updateTableLimit,
-};
-
-const connector = connect(makeMapStateToProps, mapDispatchToProps);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-export const AuthenticationTable = connector(AuthenticationTableComponent);
-
-const getAuthenticationColumns = (): AuthTableColumns => [
-  {
-    name: i18n.USER,
-    truncateText: false,
-    hideForMobile: false,
-    render: ({ node }) =>
-      getRowItemDraggables({
-        rowItems: node.user.name,
-        attrName: 'user.name',
-        idPrefix: `authentications-table-${node._id}-userName`,
-      }),
-  },
-  {
-    name: i18n.SUCCESSES,
-    truncateText: false,
-    hideForMobile: false,
-    render: ({ node }) => {
-      const id = escapeDataProviderId(
-        `authentications-table-${node._id}-node-successes-${node.successes}`
-      );
-      return (
-        <DraggableWrapper
-          key={id}
-          dataProvider={{
-            and: [],
-            enabled: true,
-            id,
-            name: 'authentication_success',
-            excluded: false,
-            kqlQuery: '',
-            queryMatch: {
-              field: 'event.type',
-              value: 'authentication_success',
-              operator: IS_OPERATOR,
-            },
-          }}
-          render={(dataProvider, _, snapshot) =>
-            snapshot.isDragging ? (
-              <DragEffects>
-                <Provider dataProvider={dataProvider} />
-              </DragEffects>
-            ) : (
-              node.successes
-            )
-          }
-        />
-      );
-    },
-    width: '8%',
-  },
-  {
-    name: i18n.FAILURES,
-    truncateText: false,
-    hideForMobile: false,
-    render: ({ node }) => {
-      const id = escapeDataProviderId(
-        `authentications-table-${node._id}-failures-${node.failures}`
-      );
-      return (
-        <DraggableWrapper
-          key={id}
-          dataProvider={{
-            and: [],
-            enabled: true,
-            id,
-            name: 'authentication_failure',
-            excluded: false,
-            kqlQuery: '',
-            queryMatch: {
-              field: 'event.type',
-              value: 'authentication_failure',
-              operator: IS_OPERATOR,
-            },
-          }}
-          render={(dataProvider, _, snapshot) =>
-            snapshot.isDragging ? (
-              <DragEffects>
-                <Provider dataProvider={dataProvider} />
-              </DragEffects>
-            ) : (
-              node.failures
-            )
-          }
-        />
-      );
-    },
-    width: '8%',
-  },
-  {
-    name: i18n.LAST_SUCCESSFUL_TIME,
-    truncateText: false,
-    hideForMobile: false,
-    render: ({ node }) =>
-      has('lastSuccess.timestamp', node) && node.lastSuccess!.timestamp != null ? (
-        <FormattedRelativePreferenceDate value={node.lastSuccess!.timestamp} />
-      ) : (
-        getEmptyTagValue()
-      ),
-  },
-  {
-    name: i18n.LAST_SUCCESSFUL_SOURCE,
-    truncateText: false,
-    hideForMobile: false,
-    render: ({ node }) =>
-      getRowItemDraggables({
-        rowItems:
-          node.lastSuccess != null &&
-          node.lastSuccess.source != null &&
-          node.lastSuccess.source.ip != null
-            ? node.lastSuccess.source.ip
-            : null,
-        attrName: 'source.ip',
-        idPrefix: `authentications-table-${node._id}-lastSuccessSource`,
-        render: item => <IPDetailsLink ip={item} />,
-      }),
-  },
-  {
-    name: i18n.LAST_SUCCESSFUL_DESTINATION,
-    truncateText: false,
-    hideForMobile: false,
-    render: ({ node }) =>
-      getRowItemDraggables({
-        rowItems:
-          node.lastSuccess != null &&
-          node.lastSuccess.host != null &&
-          node.lastSuccess.host.name != null
-            ? node.lastSuccess.host.name
-            : null,
-        attrName: 'host.name',
-        idPrefix: `authentications-table-${node._id}-lastSuccessfulDestination`,
-        render: item => <HostDetailsLink hostName={item} />,
-      }),
-  },
-  {
-    name: i18n.LAST_FAILED_TIME,
-    truncateText: false,
-    hideForMobile: false,
-    render: ({ node }) =>
-      has('lastFailure.timestamp', node) && node.lastFailure!.timestamp != null ? (
-        <FormattedRelativePreferenceDate value={node.lastFailure!.timestamp} />
-      ) : (
-        getEmptyTagValue()
-      ),
-  },
-  {
-    name: i18n.LAST_FAILED_SOURCE,
-    truncateText: false,
-    hideForMobile: false,
-    render: ({ node }) =>
-      getRowItemDraggables({
-        rowItems:
-          node.lastFailure != null &&
-          node.lastFailure.source != null &&
-          node.lastFailure.source.ip != null
-            ? node.lastFailure.source.ip
-            : null,
-        attrName: 'source.ip',
-        idPrefix: `authentications-table-${node._id}-lastFailureSource`,
-        render: item => <IPDetailsLink ip={item} />,
-      }),
-  },
-  {
-    name: i18n.LAST_FAILED_DESTINATION,
-    truncateText: false,
-    hideForMobile: false,
-    render: ({ node }) =>
-      getRowItemDraggables({
-        rowItems:
-          node.lastFailure != null &&
-          node.lastFailure.host != null &&
-          node.lastFailure.host.name != null
-            ? node.lastFailure.host.name
-            : null,
-        attrName: 'host.name',
-        idPrefix: `authentications-table-${node._id}-lastFailureDestination`,
-        render: item => <HostDetailsLink hostName={item} />,
-      }),
-  },
-];
-
-export const getAuthenticationColumnsCurated = (
-  pageType: hostsModel.HostsType
-): AuthTableColumns => {
-  const columns = getAuthenticationColumns();
-
-  // Columns to exclude from host details pages
-  if (pageType === hostsModel.HostsType.details) {
-    return [i18n.LAST_FAILED_DESTINATION, i18n.LAST_SUCCESSFUL_DESTINATION].reduce((acc, name) => {
-      acc.splice(
-        acc.findIndex(column => column.name === name),
-        1
-      );
-      return acc;
-    }, columns);
-  }
-
-  return columns;
-};
diff --git a/x-pack/plugins/siem/public/components/page/hosts/authentications_table/mock.ts b/x-pack/plugins/siem/public/components/page/hosts/authentications_table/mock.ts
deleted file mode 100644
index 50a1fa8eb7d72e..00000000000000
--- a/x-pack/plugins/siem/public/components/page/hosts/authentications_table/mock.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-/*
- * 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 { AuthenticationsData } from '../../../../graphql/types';
-
-export const mockData: { Authentications: AuthenticationsData } = {
-  Authentications: {
-    totalCount: 54,
-    edges: [
-      {
-        node: {
-          _id: 'cPsuhGcB0WOhS6qyTKC0',
-          failures: 10,
-          successes: 0,
-          user: { name: ['Evan Hassanabad'] },
-          lastSuccess: {
-            timestamp: '2019-01-23T22:35:32.222Z',
-            source: {
-              ip: ['127.0.0.1'],
-            },
-            host: {
-              id: ['host-id-1'],
-              name: ['host-1'],
-            },
-          },
-          lastFailure: {
-            timestamp: '2019-01-23T22:35:32.222Z',
-            source: {
-              ip: ['8.8.8.8'],
-            },
-            host: {
-              id: ['host-id-1'],
-              name: ['host-2'],
-            },
-          },
-        },
-        cursor: {
-          value: '98966fa2013c396155c460d35c0902be',
-        },
-      },
-      {
-        node: {
-          _id: 'KwQDiWcB0WOhS6qyXmrW',
-          failures: 10,
-          successes: 0,
-          user: { name: ['Braden Hassanabad'] },
-          lastSuccess: {
-            timestamp: '2019-01-23T22:35:32.222Z',
-            source: {
-              ip: ['127.0.0.1'],
-            },
-            host: {
-              id: ['host-id-1'],
-              name: ['host-1'],
-            },
-          },
-          lastFailure: {
-            timestamp: '2019-01-23T22:35:32.222Z',
-            source: {
-              ip: ['8.8.8.8'],
-            },
-            host: {
-              id: ['host-id-1'],
-              name: ['host-2'],
-            },
-          },
-        },
-        cursor: {
-          value: 'aa7ca589f1b8220002f2fc61c64cfbf1',
-        },
-      },
-    ],
-    pageInfo: {
-      activePage: 1,
-      fakeTotalCount: 50,
-      showMorePagesIndicator: true,
-    },
-  },
-};
diff --git a/x-pack/plugins/siem/public/components/page/hosts/first_last_seen_host/index.test.tsx b/x-pack/plugins/siem/public/components/page/hosts/first_last_seen_host/index.test.tsx
deleted file mode 100644
index 4a836333f3311c..00000000000000
--- a/x-pack/plugins/siem/public/components/page/hosts/first_last_seen_host/index.test.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-/*
- * 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 { cloneDeep } from 'lodash/fp';
-import React from 'react';
-import { MockedProvider } from 'react-apollo/test-utils';
-import { render, act } from '@testing-library/react';
-
-import { mockFirstLastSeenHostQuery } from '../../../../containers/hosts/first_last_seen/mock';
-import { wait } from '../../../../lib/helpers';
-import { TestProviders } from '../../../../mock';
-
-import { FirstLastSeenHost, FirstLastSeenHostType } from '.';
-
-describe('FirstLastSeen Component', () => {
-  const firstSeen = 'Apr 8, 2019 @ 16:09:40.692';
-  const lastSeen = 'Apr 8, 2019 @ 18:35:45.064';
-
-  // Suppress warnings about "react-apollo" until we migrate to apollo@3
-  /* eslint-disable no-console */
-  const originalError = console.error;
-  beforeAll(() => {
-    console.error = jest.fn();
-  });
-  afterAll(() => {
-    console.error = originalError;
-  });
-
-  test('Loading', async () => {
-    const { container } = render(
-      <TestProviders>
-        <MockedProvider mocks={mockFirstLastSeenHostQuery} addTypename={false}>
-          <FirstLastSeenHost hostname="kibana-siem" type={FirstLastSeenHostType.FIRST_SEEN} />
-        </MockedProvider>
-      </TestProviders>
-    );
-    expect(container.innerHTML).toBe(
-      '<span class="euiLoadingSpinner euiLoadingSpinner--medium"></span>'
-    );
-  });
-
-  test('First Seen', async () => {
-    const { container } = render(
-      <TestProviders>
-        <MockedProvider mocks={mockFirstLastSeenHostQuery} addTypename={false}>
-          <FirstLastSeenHost hostname="kibana-siem" type={FirstLastSeenHostType.FIRST_SEEN} />
-        </MockedProvider>
-      </TestProviders>
-    );
-
-    await act(() => wait());
-
-    expect(container.innerHTML).toBe(
-      `<div class="euiText euiText--small"><span class="euiToolTipAnchor">${firstSeen}</span></div>`
-    );
-  });
-
-  test('Last Seen', async () => {
-    const { container } = render(
-      <TestProviders>
-        <MockedProvider mocks={mockFirstLastSeenHostQuery} addTypename={false}>
-          <FirstLastSeenHost hostname="kibana-siem" type={FirstLastSeenHostType.LAST_SEEN} />
-        </MockedProvider>
-      </TestProviders>
-    );
-    await act(() => wait());
-    expect(container.innerHTML).toBe(
-      `<div class="euiText euiText--small"><span class="euiToolTipAnchor">${lastSeen}</span></div>`
-    );
-  });
-
-  test('First Seen is empty but not Last Seen', async () => {
-    const badDateTime = cloneDeep(mockFirstLastSeenHostQuery);
-    badDateTime[0].result.data!.source.HostFirstLastSeen.firstSeen = null;
-    const { container } = render(
-      <TestProviders>
-        <MockedProvider mocks={badDateTime} addTypename={false}>
-          <FirstLastSeenHost hostname="kibana-siem" type={FirstLastSeenHostType.LAST_SEEN} />
-        </MockedProvider>
-      </TestProviders>
-    );
-
-    await act(() => wait());
-
-    expect(container.innerHTML).toBe(
-      `<div class="euiText euiText--small"><span class="euiToolTipAnchor">${lastSeen}</span></div>`
-    );
-  });
-
-  test('Last Seen is empty but not First Seen', async () => {
-    const badDateTime = cloneDeep(mockFirstLastSeenHostQuery);
-    badDateTime[0].result.data!.source.HostFirstLastSeen.lastSeen = null;
-    const { container } = render(
-      <TestProviders>
-        <MockedProvider mocks={badDateTime} addTypename={false}>
-          <FirstLastSeenHost hostname="kibana-siem" type={FirstLastSeenHostType.FIRST_SEEN} />
-        </MockedProvider>
-      </TestProviders>
-    );
-
-    await act(() => wait());
-
-    expect(container.innerHTML).toBe(
-      `<div class="euiText euiText--small"><span class="euiToolTipAnchor">${firstSeen}</span></div>`
-    );
-  });
-
-  test('First Seen With a bad date time string', async () => {
-    const badDateTime = cloneDeep(mockFirstLastSeenHostQuery);
-    badDateTime[0].result.data!.source.HostFirstLastSeen.firstSeen = 'something-invalid';
-    const { container } = render(
-      <TestProviders>
-        <MockedProvider mocks={badDateTime} addTypename={false}>
-          <FirstLastSeenHost hostname="kibana-siem" type={FirstLastSeenHostType.FIRST_SEEN} />
-        </MockedProvider>
-      </TestProviders>
-    );
-    await act(() => wait());
-    expect(container.textContent).toBe('something-invalid');
-  });
-
-  test('Last Seen With a bad date time string', async () => {
-    const badDateTime = cloneDeep(mockFirstLastSeenHostQuery);
-    badDateTime[0].result.data!.source.HostFirstLastSeen.lastSeen = 'something-invalid';
-    const { container } = render(
-      <TestProviders>
-        <MockedProvider mocks={badDateTime} addTypename={false}>
-          <FirstLastSeenHost hostname="kibana-siem" type={FirstLastSeenHostType.LAST_SEEN} />
-        </MockedProvider>
-      </TestProviders>
-    );
-    await act(() => wait());
-    expect(container.textContent).toBe('something-invalid');
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/page/hosts/first_last_seen_host/index.tsx b/x-pack/plugins/siem/public/components/page/hosts/first_last_seen_host/index.tsx
deleted file mode 100644
index 70dff5eda59395..00000000000000
--- a/x-pack/plugins/siem/public/components/page/hosts/first_last_seen_host/index.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-/*
- * 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 { EuiIcon, EuiLoadingSpinner, EuiText, EuiToolTip } from '@elastic/eui';
-import React from 'react';
-import { ApolloConsumer } from 'react-apollo';
-
-import { useFirstLastSeenHostQuery } from '../../../../containers/hosts/first_last_seen';
-import { getEmptyTagValue } from '../../../empty_value';
-import { FormattedRelativePreferenceDate } from '../../../formatted_date';
-
-export enum FirstLastSeenHostType {
-  FIRST_SEEN = 'first-seen',
-  LAST_SEEN = 'last-seen',
-}
-
-export const FirstLastSeenHost = React.memo<{ hostname: string; type: FirstLastSeenHostType }>(
-  ({ hostname, type }) => {
-    return (
-      <ApolloConsumer>
-        {client => {
-          const { loading, firstSeen, lastSeen, errorMessage } = useFirstLastSeenHostQuery(
-            hostname,
-            'default',
-            client
-          );
-          if (errorMessage != null) {
-            return (
-              <EuiToolTip
-                position="top"
-                content={errorMessage}
-                data-test-subj="firstLastSeenErrorToolTip"
-                aria-label={`firstLastSeenError-${type}`}
-                id={`firstLastSeenError-${hostname}-${type}`}
-              >
-                <EuiIcon aria-describedby={`firstLastSeenError-${hostname}-${type}`} type="alert" />
-              </EuiToolTip>
-            );
-          }
-          const valueSeen = type === FirstLastSeenHostType.FIRST_SEEN ? firstSeen : lastSeen;
-          return (
-            <>
-              {loading && <EuiLoadingSpinner size="m" />}
-              {!loading && valueSeen != null && new Date(valueSeen).toString() === 'Invalid Date'
-                ? valueSeen
-                : !loading &&
-                  valueSeen != null && (
-                    <EuiText size="s">
-                      <FormattedRelativePreferenceDate value={`${valueSeen}`} />
-                    </EuiText>
-                  )}
-              {!loading && valueSeen == null && getEmptyTagValue()}
-            </>
-          );
-        }}
-      </ApolloConsumer>
-    );
-  }
-);
-
-FirstLastSeenHost.displayName = 'FirstLastSeenHost';
diff --git a/x-pack/plugins/siem/public/components/page/hosts/host_overview/index.test.tsx b/x-pack/plugins/siem/public/components/page/hosts/host_overview/index.test.tsx
deleted file mode 100644
index 90cfe696610d94..00000000000000
--- a/x-pack/plugins/siem/public/components/page/hosts/host_overview/index.test.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
- * 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 { shallow } from 'enzyme';
-import React from 'react';
-import { TestProviders } from '../../../../mock';
-
-import { HostOverview } from './index';
-import { mockData } from './mock';
-import { mockAnomalies } from '../../../ml/mock';
-
-describe('Host Summary Component', () => {
-  describe('rendering', () => {
-    test('it renders the default Host Summary', () => {
-      const wrapper = shallow(
-        <TestProviders>
-          <HostOverview
-            anomaliesData={mockAnomalies}
-            data={mockData.Hosts.edges[0].node}
-            endDate={new Date('2019-06-18T06:00:00.000Z').valueOf()}
-            id="hostOverview"
-            isLoadingAnomaliesData={false}
-            loading={false}
-            narrowDateRange={jest.fn()}
-            startDate={new Date('2019-06-15T06:00:00.000Z').valueOf()}
-          />
-        </TestProviders>
-      );
-
-      expect(wrapper.find('HostOverview')).toMatchSnapshot();
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/page/hosts/host_overview/index.tsx b/x-pack/plugins/siem/public/components/page/hosts/host_overview/index.tsx
deleted file mode 100644
index 223a16fec77a0e..00000000000000
--- a/x-pack/plugins/siem/public/components/page/hosts/host_overview/index.tsx
+++ /dev/null
@@ -1,191 +0,0 @@
-/*
- * 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 { 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 { getOr } from 'lodash/fp';
-import React from 'react';
-
-import { DEFAULT_DARK_MODE } from '../../../../../common/constants';
-import { DescriptionList } from '../../../../../common/utility_types';
-import { useUiSetting$ } from '../../../../lib/kibana';
-import { getEmptyTagValue } from '../../../empty_value';
-import { DefaultFieldRenderer, hostIdRenderer } from '../../../field_renderers/field_renderers';
-import { InspectButton, InspectButtonContainer } from '../../../inspect';
-import { HostItem } from '../../../../graphql/types';
-import { Loader } from '../../../loader';
-import { IPDetailsLink } from '../../../links';
-import { hasMlUserPermissions } from '../../../../../common/machine_learning/has_ml_user_permissions';
-import { useMlCapabilities } from '../../../ml_popover/hooks/use_ml_capabilities';
-import { AnomalyScores } from '../../../ml/score/anomaly_scores';
-import { Anomalies, NarrowDateRange } from '../../../ml/types';
-import { DescriptionListStyled, OverviewWrapper } from '../../index';
-import { FirstLastSeenHost, FirstLastSeenHostType } from '../first_last_seen_host';
-
-import * as i18n from './translations';
-
-interface HostSummaryProps {
-  data: HostItem;
-  id: string;
-  loading: boolean;
-  isLoadingAnomaliesData: boolean;
-  anomaliesData: Anomalies | null;
-  startDate: number;
-  endDate: number;
-  narrowDateRange: NarrowDateRange;
-}
-
-const getDescriptionList = (descriptionList: DescriptionList[], key: number) => (
-  <EuiFlexItem key={key}>
-    <DescriptionListStyled listItems={descriptionList} />
-  </EuiFlexItem>
-);
-
-export const HostOverview = React.memo<HostSummaryProps>(
-  ({
-    data,
-    loading,
-    id,
-    startDate,
-    endDate,
-    isLoadingAnomaliesData,
-    anomaliesData,
-    narrowDateRange,
-  }) => {
-    const capabilities = useMlCapabilities();
-    const userPermissions = hasMlUserPermissions(capabilities);
-    const [darkMode] = useUiSetting$<boolean>(DEFAULT_DARK_MODE);
-
-    const getDefaultRenderer = (fieldName: string, fieldData: HostItem) => (
-      <DefaultFieldRenderer
-        rowItems={getOr([], fieldName, fieldData)}
-        attrName={fieldName}
-        idPrefix="host-overview"
-      />
-    );
-
-    const column: DescriptionList[] = [
-      {
-        title: i18n.HOST_ID,
-        description: data.host
-          ? hostIdRenderer({ host: data.host, noLink: true })
-          : getEmptyTagValue(),
-      },
-      {
-        title: i18n.FIRST_SEEN,
-        description:
-          data.host != null && data.host.name && data.host.name.length ? (
-            <FirstLastSeenHost
-              hostname={data.host.name[0]}
-              type={FirstLastSeenHostType.FIRST_SEEN}
-            />
-          ) : (
-            getEmptyTagValue()
-          ),
-      },
-      {
-        title: i18n.LAST_SEEN,
-        description:
-          data.host != null && data.host.name && data.host.name.length ? (
-            <FirstLastSeenHost
-              hostname={data.host.name[0]}
-              type={FirstLastSeenHostType.LAST_SEEN}
-            />
-          ) : (
-            getEmptyTagValue()
-          ),
-      },
-    ];
-    const firstColumn = userPermissions
-      ? [
-          ...column,
-          {
-            title: i18n.MAX_ANOMALY_SCORE_BY_JOB,
-            description: (
-              <AnomalyScores
-                anomalies={anomaliesData}
-                startDate={startDate}
-                endDate={endDate}
-                isLoading={isLoadingAnomaliesData}
-                narrowDateRange={narrowDateRange}
-              />
-            ),
-          },
-        ]
-      : column;
-
-    const descriptionLists: Readonly<DescriptionList[][]> = [
-      firstColumn,
-      [
-        {
-          title: i18n.IP_ADDRESSES,
-          description: (
-            <DefaultFieldRenderer
-              rowItems={getOr([], 'host.ip', data)}
-              attrName={'host.ip'}
-              idPrefix="host-overview"
-              render={ip => (ip != null ? <IPDetailsLink ip={ip} /> : getEmptyTagValue())}
-            />
-          ),
-        },
-        {
-          title: i18n.MAC_ADDRESSES,
-          description: getDefaultRenderer('host.mac', data),
-        },
-        { title: i18n.PLATFORM, description: getDefaultRenderer('host.os.platform', data) },
-      ],
-      [
-        { title: i18n.OS, description: getDefaultRenderer('host.os.name', data) },
-        { title: i18n.FAMILY, description: getDefaultRenderer('host.os.family', data) },
-        { title: i18n.VERSION, description: getDefaultRenderer('host.os.version', data) },
-        { title: i18n.ARCHITECTURE, description: getDefaultRenderer('host.architecture', data) },
-      ],
-      [
-        {
-          title: i18n.CLOUD_PROVIDER,
-          description: getDefaultRenderer('cloud.provider', data),
-        },
-        {
-          title: i18n.REGION,
-          description: getDefaultRenderer('cloud.region', data),
-        },
-        {
-          title: i18n.INSTANCE_ID,
-          description: getDefaultRenderer('cloud.instance.id', data),
-        },
-        {
-          title: i18n.MACHINE_TYPE,
-          description: getDefaultRenderer('cloud.machine.type', data),
-        },
-      ],
-    ];
-
-    return (
-      <InspectButtonContainer>
-        <OverviewWrapper>
-          <InspectButton queryId={id} title={i18n.INSPECT_TITLE} inspectIndex={0} />
-
-          {descriptionLists.map((descriptionList, index) =>
-            getDescriptionList(descriptionList, index)
-          )}
-
-          {loading && (
-            <Loader
-              overlay
-              overlayBackground={
-                darkMode ? darkTheme.euiPageBackgroundColor : lightTheme.euiPageBackgroundColor
-              }
-              size="xl"
-            />
-          )}
-        </OverviewWrapper>
-      </InspectButtonContainer>
-    );
-  }
-);
-
-HostOverview.displayName = 'HostOverview';
diff --git a/x-pack/plugins/siem/public/components/page/hosts/host_overview/mock.ts b/x-pack/plugins/siem/public/components/page/hosts/host_overview/mock.ts
deleted file mode 100644
index d9a93272c09866..00000000000000
--- a/x-pack/plugins/siem/public/components/page/hosts/host_overview/mock.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-/*
- * 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 { HostsData } from '../../../../graphql/types';
-
-export const mockData: { Hosts: HostsData; DateFields: string[] } = {
-  Hosts: {
-    totalCount: 1,
-    edges: [
-      {
-        node: {
-          _id: 'yneHlmgBjVl2VqDlAjPR',
-          host: {
-            architecture: ['x86_64'],
-            id: ['aa7ca589f1b8220002f2fc61c64cfbf1'],
-            ip: ['10.142.0.7', 'fe80::4001:aff:fe8e:7'],
-            mac: ['42:01:0a:8e:00:07'],
-            name: ['siem-kibana'],
-            os: {
-              family: ['debian'],
-              name: ['Debian GNU/Linux'],
-              platform: ['debian'],
-              version: ['9 (stretch)'],
-            },
-          },
-          cloud: {
-            instance: {
-              id: ['423232333829362673777'],
-            },
-            machine: {
-              type: ['custom-4-16384'],
-            },
-            provider: ['gce'],
-            region: ['us-east-1'],
-          },
-        },
-        cursor: {
-          value: 'aa7ca589f1b8220002f2fc61c64cfbf1',
-        },
-      },
-    ],
-    pageInfo: {
-      activePage: 1,
-      fakeTotalCount: 50,
-      showMorePagesIndicator: true,
-    },
-  },
-  DateFields: ['lastBeat'],
-};
diff --git a/x-pack/plugins/siem/public/components/page/hosts/hosts_table/columns.tsx b/x-pack/plugins/siem/public/components/page/hosts/hosts_table/columns.tsx
deleted file mode 100644
index 6bd82f3192f9be..00000000000000
--- a/x-pack/plugins/siem/public/components/page/hosts/hosts_table/columns.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-/*
- * 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 { EuiIcon, EuiToolTip } from '@elastic/eui';
-import React from 'react';
-import { DragEffects, DraggableWrapper } from '../../../drag_and_drop/draggable_wrapper';
-import { escapeDataProviderId } from '../../../drag_and_drop/helpers';
-import { getEmptyTagValue } from '../../../empty_value';
-import { HostDetailsLink } from '../../../links';
-import { FormattedRelativePreferenceDate } from '../../../formatted_date';
-import { IS_OPERATOR } from '../../../timeline/data_providers/data_provider';
-import { Provider } from '../../../timeline/data_providers/provider';
-import { AddFilterToGlobalSearchBar, createFilter } from '../../add_filter_to_global_search_bar';
-import { HostsTableColumns } from './';
-
-import * as i18n from './translations';
-
-export const getHostsColumns = (): HostsTableColumns => [
-  {
-    field: 'node.host.name',
-    name: i18n.NAME,
-    truncateText: false,
-    hideForMobile: false,
-    sortable: true,
-    render: hostName => {
-      if (hostName != null && hostName.length > 0) {
-        const id = escapeDataProviderId(`hosts-table-hostName-${hostName[0]}`);
-        return (
-          <DraggableWrapper
-            key={id}
-            dataProvider={{
-              and: [],
-              enabled: true,
-              excluded: false,
-              id,
-              name: hostName[0],
-              kqlQuery: '',
-              queryMatch: { field: 'host.name', value: hostName[0], operator: IS_OPERATOR },
-            }}
-            render={(dataProvider, _, snapshot) =>
-              snapshot.isDragging ? (
-                <DragEffects>
-                  <Provider dataProvider={dataProvider} />
-                </DragEffects>
-              ) : (
-                <HostDetailsLink hostName={hostName[0]} />
-              )
-            }
-          />
-        );
-      }
-      return getEmptyTagValue();
-    },
-    width: '35%',
-  },
-  {
-    field: 'node.lastSeen',
-    name: (
-      <EuiToolTip content={i18n.FIRST_LAST_SEEN_TOOLTIP}>
-        <>
-          {i18n.LAST_SEEN}{' '}
-          <EuiIcon size="s" color="subdued" type="iInCircle" className="eui-alignTop" />
-        </>
-      </EuiToolTip>
-    ),
-    truncateText: false,
-    hideForMobile: false,
-    sortable: true,
-    render: lastSeen => {
-      if (lastSeen != null) {
-        return <FormattedRelativePreferenceDate value={lastSeen} />;
-      }
-      return getEmptyTagValue();
-    },
-  },
-  {
-    field: 'node.host.os.name',
-    name: i18n.OS,
-    truncateText: false,
-    hideForMobile: false,
-    sortable: false,
-    render: hostOsName => {
-      if (hostOsName != null) {
-        return (
-          <AddFilterToGlobalSearchBar filter={createFilter('host.os.name', hostOsName)}>
-            <>{hostOsName}</>
-          </AddFilterToGlobalSearchBar>
-        );
-      }
-      return getEmptyTagValue();
-    },
-  },
-  {
-    field: 'node.host.os.version',
-    name: i18n.VERSION,
-    truncateText: false,
-    hideForMobile: false,
-    sortable: false,
-    render: hostOsVersion => {
-      if (hostOsVersion != null) {
-        return (
-          <AddFilterToGlobalSearchBar filter={createFilter('host.os.version', hostOsVersion)}>
-            <>{hostOsVersion}</>
-          </AddFilterToGlobalSearchBar>
-        );
-      }
-      return getEmptyTagValue();
-    },
-  },
-];
diff --git a/x-pack/plugins/siem/public/components/page/hosts/hosts_table/index.test.tsx b/x-pack/plugins/siem/public/components/page/hosts/hosts_table/index.test.tsx
deleted file mode 100644
index e561594013deaa..00000000000000
--- a/x-pack/plugins/siem/public/components/page/hosts/hosts_table/index.test.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-/*
- * 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 { shallow } from 'enzyme';
-import { getOr } from 'lodash/fp';
-import React from 'react';
-import { MockedProvider } from 'react-apollo/test-utils';
-
-import {
-  apolloClientObservable,
-  mockIndexPattern,
-  mockGlobalState,
-  TestProviders,
-} from '../../../../mock';
-import { useMountAppended } from '../../../../utils/use_mount_appended';
-import { createStore, hostsModel, State } from '../../../../store';
-import { HostsTableType } from '../../../../store/hosts/model';
-import { HostsTable } from './index';
-import { mockData } from './mock';
-
-// Test will fail because we will to need to mock some core services to make the test work
-// For now let's forget about SiemSearchBar and QueryBar
-jest.mock('../../../search_bar', () => ({
-  SiemSearchBar: () => null,
-}));
-jest.mock('../../../query_bar', () => ({
-  QueryBar: () => null,
-}));
-
-describe('Hosts Table', () => {
-  const loadPage = jest.fn();
-  const state: State = mockGlobalState;
-
-  let store = createStore(state, apolloClientObservable);
-  const mount = useMountAppended();
-
-  beforeEach(() => {
-    store = createStore(state, apolloClientObservable);
-  });
-
-  describe('rendering', () => {
-    test('it renders the default Hosts table', () => {
-      const wrapper = shallow(
-        <TestProviders store={store}>
-          <HostsTable
-            data={mockData.Hosts.edges}
-            id="hostsQuery"
-            isInspect={false}
-            indexPattern={mockIndexPattern}
-            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.Hosts.pageInfo)}
-            loading={false}
-            loadPage={loadPage}
-            showMorePagesIndicator={getOr(false, 'showMorePagesIndicator', mockData.Hosts.pageInfo)}
-            totalCount={mockData.Hosts.totalCount}
-            type={hostsModel.HostsType.page}
-          />
-        </TestProviders>
-      );
-
-      expect(wrapper.find('HostsTable')).toMatchSnapshot();
-    });
-
-    describe('Sorting on Table', () => {
-      let wrapper: ReturnType<typeof mount>;
-
-      beforeEach(() => {
-        wrapper = mount(
-          <MockedProvider>
-            <TestProviders store={store}>
-              <HostsTable
-                id="hostsQuery"
-                indexPattern={mockIndexPattern}
-                isInspect={false}
-                loading={false}
-                data={mockData.Hosts.edges}
-                totalCount={mockData.Hosts.totalCount}
-                fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.Hosts.pageInfo)}
-                showMorePagesIndicator={getOr(
-                  false,
-                  'showMorePagesIndicator',
-                  mockData.Hosts.pageInfo
-                )}
-                loadPage={loadPage}
-                type={hostsModel.HostsType.page}
-              />
-            </TestProviders>
-          </MockedProvider>
-        );
-      });
-      test('Initial value of the store', () => {
-        expect(store.getState().hosts.page.queries[HostsTableType.hosts]).toEqual({
-          activePage: 0,
-          direction: 'desc',
-          sortField: 'lastSeen',
-          limit: 10,
-        });
-        expect(
-          wrapper
-            .find('.euiTable thead tr th button')
-            .at(1)
-            .text()
-        ).toEqual('Last seen Click to sort in ascending order');
-        expect(
-          wrapper
-            .find('.euiTable thead tr th button')
-            .at(1)
-            .find('svg')
-        ).toBeTruthy();
-      });
-
-      test('when you click on the column header, you should show the sorting icon', () => {
-        wrapper
-          .find('.euiTable thead tr th button')
-          .first()
-          .simulate('click');
-
-        wrapper.update();
-
-        expect(store.getState().hosts.page.queries[HostsTableType.hosts]).toEqual({
-          activePage: 0,
-          direction: 'asc',
-          sortField: 'hostName',
-          limit: 10,
-        });
-        expect(
-          wrapper
-            .find('.euiTable thead tr th button')
-            .first()
-            .text()
-        ).toEqual('Host nameClick to sort in descending order');
-      });
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/page/hosts/hosts_table/index.tsx b/x-pack/plugins/siem/public/components/page/hosts/hosts_table/index.tsx
deleted file mode 100644
index f09834d87e423d..00000000000000
--- a/x-pack/plugins/siem/public/components/page/hosts/hosts_table/index.tsx
+++ /dev/null
@@ -1,208 +0,0 @@
-/*
- * 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, { useMemo, useCallback } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
-import { IIndexPattern } from 'src/plugins/data/public';
-
-import { hostsActions } from '../../../../store/actions';
-import {
-  Direction,
-  HostFields,
-  HostItem,
-  HostsEdges,
-  HostsFields,
-  HostsSortField,
-  OsFields,
-} from '../../../../graphql/types';
-import { assertUnreachable } from '../../../../lib/helpers';
-import { hostsModel, hostsSelectors, State } from '../../../../store';
-import {
-  Columns,
-  Criteria,
-  ItemsPerRow,
-  PaginatedTable,
-  SortingBasicTable,
-} from '../../../paginated_table';
-
-import { getHostsColumns } from './columns';
-import * as i18n from './translations';
-
-const tableType = hostsModel.HostsTableType.hosts;
-
-interface OwnProps {
-  data: HostsEdges[];
-  fakeTotalCount: number;
-  id: string;
-  indexPattern: IIndexPattern;
-  isInspect: boolean;
-  loading: boolean;
-  loadPage: (newActivePage: number) => void;
-  showMorePagesIndicator: boolean;
-  totalCount: number;
-  type: hostsModel.HostsType;
-}
-
-export type HostsTableColumns = [
-  Columns<HostFields['name']>,
-  Columns<HostItem['lastSeen']>,
-  Columns<OsFields['name']>,
-  Columns<OsFields['version']>
-];
-
-type HostsTableProps = OwnProps & PropsFromRedux;
-
-const rowItems: ItemsPerRow[] = [
-  {
-    text: i18n.ROWS_5,
-    numberOfRow: 5,
-  },
-  {
-    text: i18n.ROWS_10,
-    numberOfRow: 10,
-  },
-];
-const getSorting = (
-  trigger: string,
-  sortField: HostsFields,
-  direction: Direction
-): SortingBasicTable => ({ field: getNodeField(sortField), direction });
-
-const HostsTableComponent = React.memo<HostsTableProps>(
-  ({
-    activePage,
-    data,
-    direction,
-    fakeTotalCount,
-    id,
-    indexPattern,
-    isInspect,
-    limit,
-    loading,
-    loadPage,
-    showMorePagesIndicator,
-    sortField,
-    totalCount,
-    type,
-    updateHostsSort,
-    updateTableActivePage,
-    updateTableLimit,
-  }) => {
-    const updateLimitPagination = useCallback(
-      newLimit =>
-        updateTableLimit({
-          hostsType: type,
-          limit: newLimit,
-          tableType,
-        }),
-      [type, updateTableLimit]
-    );
-
-    const updateActivePage = useCallback(
-      newPage =>
-        updateTableActivePage({
-          activePage: newPage,
-          hostsType: type,
-          tableType,
-        }),
-      [type, updateTableActivePage]
-    );
-
-    const onChange = useCallback(
-      (criteria: Criteria) => {
-        if (criteria.sort != null) {
-          const sort: HostsSortField = {
-            field: getSortField(criteria.sort.field),
-            direction: criteria.sort.direction as Direction,
-          };
-          if (sort.direction !== direction || sort.field !== sortField) {
-            updateHostsSort({
-              sort,
-              hostsType: type,
-            });
-          }
-        }
-      },
-      [direction, sortField, type, updateHostsSort]
-    );
-
-    const hostsColumns = useMemo(() => getHostsColumns(), []);
-
-    const sorting = useMemo(() => getSorting(`${sortField}-${direction}`, sortField, direction), [
-      sortField,
-      direction,
-    ]);
-
-    return (
-      <PaginatedTable
-        activePage={activePage}
-        columns={hostsColumns}
-        dataTestSubj={`table-${tableType}`}
-        headerCount={totalCount}
-        headerTitle={i18n.HOSTS}
-        headerUnit={i18n.UNIT(totalCount)}
-        id={id}
-        isInspect={isInspect}
-        itemsPerRow={rowItems}
-        limit={limit}
-        loading={loading}
-        loadPage={loadPage}
-        onChange={onChange}
-        pageOfItems={data}
-        showMorePagesIndicator={showMorePagesIndicator}
-        sorting={sorting}
-        totalCount={fakeTotalCount}
-        updateLimitPagination={updateLimitPagination}
-        updateActivePage={updateActivePage}
-      />
-    );
-  }
-);
-
-HostsTableComponent.displayName = 'HostsTableComponent';
-
-const getSortField = (field: string): HostsFields => {
-  switch (field) {
-    case 'node.host.name':
-      return HostsFields.hostName;
-    case 'node.lastSeen':
-      return HostsFields.lastSeen;
-    default:
-      return HostsFields.lastSeen;
-  }
-};
-
-const getNodeField = (field: HostsFields): string => {
-  switch (field) {
-    case HostsFields.hostName:
-      return 'node.host.name';
-    case HostsFields.lastSeen:
-      return 'node.lastSeen';
-  }
-  assertUnreachable(field);
-};
-
-const makeMapStateToProps = () => {
-  const getHostsSelector = hostsSelectors.hostsSelector();
-  const mapStateToProps = (state: State, { type }: OwnProps) => {
-    return getHostsSelector(state, type);
-  };
-  return mapStateToProps;
-};
-
-const mapDispatchToProps = {
-  updateHostsSort: hostsActions.updateHostsSort,
-  updateTableActivePage: hostsActions.updateTableActivePage,
-  updateTableLimit: hostsActions.updateTableLimit,
-};
-
-const connector = connect(makeMapStateToProps, mapDispatchToProps);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-export const HostsTable = connector(HostsTableComponent);
-
-HostsTable.displayName = 'HostsTable';
diff --git a/x-pack/plugins/siem/public/components/page/hosts/hosts_table/mock.ts b/x-pack/plugins/siem/public/components/page/hosts/hosts_table/mock.ts
deleted file mode 100644
index b5a9c925c599ad..00000000000000
--- a/x-pack/plugins/siem/public/components/page/hosts/hosts_table/mock.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-/*
- * 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 { HostsData } from '../../../../graphql/types';
-
-export const mockData: { Hosts: HostsData } = {
-  Hosts: {
-    totalCount: 4,
-    edges: [
-      {
-        node: {
-          _id: 'cPsuhGcB0WOhS6qyTKC0',
-          host: {
-            name: ['elrond.elstc.co'],
-            os: {
-              name: ['Ubuntu'],
-              version: ['18.04.1 LTS (Bionic Beaver)'],
-            },
-          },
-        },
-        cursor: {
-          value: '98966fa2013c396155c460d35c0902be',
-        },
-      },
-      {
-        node: {
-          _id: 'KwQDiWcB0WOhS6qyXmrW',
-          host: {
-            name: ['siem-kibana'],
-            os: {
-              name: ['Debian GNU/Linux'],
-              version: ['9 (stretch)'],
-            },
-          },
-          cloud: {
-            instance: {
-              id: ['423232333829362673777'],
-            },
-            machine: {
-              type: ['custom-4-16384'],
-            },
-            provider: ['gce'],
-            region: ['us-east-1'],
-          },
-        },
-        cursor: {
-          value: 'aa7ca589f1b8220002f2fc61c64cfbf1',
-        },
-      },
-    ],
-    pageInfo: {
-      activePage: 1,
-      fakeTotalCount: 50,
-      showMorePagesIndicator: true,
-    },
-  },
-};
diff --git a/x-pack/plugins/siem/public/components/page/hosts/index.tsx b/x-pack/plugins/siem/public/components/page/hosts/index.tsx
deleted file mode 100644
index 9b3f36faa065d2..00000000000000
--- a/x-pack/plugins/siem/public/components/page/hosts/index.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- * 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.
- */
-
-export * from './authentications_table';
-export * from './hosts_table';
-export * from './uncommon_process_table';
-export * from './kpi_hosts';
diff --git a/x-pack/plugins/siem/public/components/page/hosts/kpi_hosts/index.test.tsx b/x-pack/plugins/siem/public/components/page/hosts/kpi_hosts/index.test.tsx
deleted file mode 100644
index dc2340d42ebd90..00000000000000
--- a/x-pack/plugins/siem/public/components/page/hosts/kpi_hosts/index.test.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-/*
- * 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 { mockKpiHostsData, mockKpiHostDetailsData } from './mock';
-import React from 'react';
-import { shallow, ShallowWrapper } from 'enzyme';
-import { KpiHostsComponentBase } from '.';
-import * as statItems from '../../../stat_items';
-import { kpiHostsMapping } from './kpi_hosts_mapping';
-import { kpiHostDetailsMapping } from './kpi_host_details_mapping';
-
-describe('kpiHostsComponent', () => {
-  const ID = 'kpiHost';
-  const from = new Date('2019-06-15T06:00:00.000Z').valueOf();
-  const to = new Date('2019-06-18T06:00:00.000Z').valueOf();
-  const narrowDateRange = () => {};
-  describe('render', () => {
-    test('it should render spinner if it is loading', () => {
-      const wrapper: ShallowWrapper = shallow(
-        <KpiHostsComponentBase
-          data={mockKpiHostsData}
-          from={from}
-          id={ID}
-          loading={true}
-          to={to}
-          narrowDateRange={narrowDateRange}
-        />
-      );
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    test('it should render KpiHostsData', () => {
-      const wrapper: ShallowWrapper = shallow(
-        <KpiHostsComponentBase
-          data={mockKpiHostsData}
-          from={from}
-          id={ID}
-          loading={false}
-          to={to}
-          narrowDateRange={narrowDateRange}
-        />
-      );
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    test('it should render KpiHostDetailsData', () => {
-      const wrapper: ShallowWrapper = shallow(
-        <KpiHostsComponentBase
-          data={mockKpiHostDetailsData}
-          from={from}
-          id={ID}
-          loading={false}
-          to={to}
-          narrowDateRange={narrowDateRange}
-        />
-      );
-      expect(wrapper).toMatchSnapshot();
-    });
-  });
-
-  const table = [
-    [mockKpiHostsData, kpiHostsMapping] as [typeof mockKpiHostsData, typeof kpiHostsMapping],
-    [mockKpiHostDetailsData, kpiHostDetailsMapping] as [
-      typeof mockKpiHostDetailsData,
-      typeof kpiHostDetailsMapping
-    ],
-  ];
-
-  describe.each(table)(
-    'it should handle KpiHostsProps and KpiHostDetailsProps',
-    (data, mapping) => {
-      let mockUseKpiMatrixStatus: jest.SpyInstance;
-      beforeAll(() => {
-        mockUseKpiMatrixStatus = jest.spyOn(statItems, 'useKpiMatrixStatus');
-      });
-
-      beforeEach(() => {
-        shallow(
-          <KpiHostsComponentBase
-            data={data}
-            from={from}
-            id={ID}
-            loading={false}
-            to={to}
-            narrowDateRange={narrowDateRange}
-          />
-        );
-      });
-
-      afterEach(() => {
-        mockUseKpiMatrixStatus.mockClear();
-      });
-
-      afterAll(() => {
-        mockUseKpiMatrixStatus.mockRestore();
-      });
-
-      test(`it should apply correct mapping by given data type`, () => {
-        expect(mockUseKpiMatrixStatus).toBeCalledWith(mapping, data, ID, from, to, narrowDateRange);
-      });
-    }
-  );
-});
diff --git a/x-pack/plugins/siem/public/components/page/hosts/kpi_hosts/index.tsx b/x-pack/plugins/siem/public/components/page/hosts/kpi_hosts/index.tsx
deleted file mode 100644
index 65d59248218447..00000000000000
--- a/x-pack/plugins/siem/public/components/page/hosts/kpi_hosts/index.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-/*
- * 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 { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
-import React from 'react';
-import styled from 'styled-components';
-
-import { KpiHostsData, KpiHostDetailsData } from '../../../../graphql/types';
-import { StatItemsComponent, StatItemsProps, useKpiMatrixStatus } from '../../../stat_items';
-import { kpiHostsMapping } from './kpi_hosts_mapping';
-import { kpiHostDetailsMapping } from './kpi_host_details_mapping';
-import { UpdateDateRange } from '../../../charts/common';
-
-const kpiWidgetHeight = 247;
-
-interface GenericKpiHostProps {
-  from: number;
-  id: string;
-  loading: boolean;
-  to: number;
-  narrowDateRange: UpdateDateRange;
-}
-
-interface KpiHostsProps extends GenericKpiHostProps {
-  data: KpiHostsData;
-}
-
-interface KpiHostDetailsProps extends GenericKpiHostProps {
-  data: KpiHostDetailsData;
-}
-
-const FlexGroupSpinner = styled(EuiFlexGroup)`
-   {
-    min-height: ${kpiWidgetHeight}px;
-  }
-`;
-
-FlexGroupSpinner.displayName = 'FlexGroupSpinner';
-
-export const KpiHostsComponentBase = ({
-  data,
-  from,
-  loading,
-  id,
-  to,
-  narrowDateRange,
-}: KpiHostsProps | KpiHostDetailsProps) => {
-  const mappings =
-    (data as KpiHostsData).hosts !== undefined ? kpiHostsMapping : kpiHostDetailsMapping;
-  const statItemsProps: StatItemsProps[] = useKpiMatrixStatus(
-    mappings,
-    data,
-    id,
-    from,
-    to,
-    narrowDateRange
-  );
-  return loading ? (
-    <FlexGroupSpinner justifyContent="center" alignItems="center">
-      <EuiFlexItem grow={false}>
-        <EuiLoadingSpinner size="xl" />
-      </EuiFlexItem>
-    </FlexGroupSpinner>
-  ) : (
-    <EuiFlexGroup>
-      {statItemsProps.map((mappedStatItemProps, idx) => {
-        return <StatItemsComponent {...mappedStatItemProps} />;
-      })}
-    </EuiFlexGroup>
-  );
-};
-
-KpiHostsComponentBase.displayName = 'KpiHostsComponentBase';
-
-export const KpiHostsComponent = React.memo(KpiHostsComponentBase);
-
-KpiHostsComponent.displayName = 'KpiHostsComponent';
diff --git a/x-pack/plugins/siem/public/components/page/hosts/uncommon_process_table/index.test.tsx b/x-pack/plugins/siem/public/components/page/hosts/uncommon_process_table/index.test.tsx
deleted file mode 100644
index 76fc2a0c389c38..00000000000000
--- a/x-pack/plugins/siem/public/components/page/hosts/uncommon_process_table/index.test.tsx
+++ /dev/null
@@ -1,345 +0,0 @@
-/*
- * 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 { shallow } from 'enzyme';
-import { getOr } from 'lodash/fp';
-import React from 'react';
-
-import { TestProviders } from '../../../../mock';
-import { hostsModel } from '../../../../store';
-import { getEmptyValue } from '../../../empty_value';
-import { useMountAppended } from '../../../../utils/use_mount_appended';
-
-import { getArgs, UncommonProcessTable, getUncommonColumnsCurated } from '.';
-import { mockData } from './mock';
-import { HostsType } from '../../../../store/hosts/model';
-import * as i18n from './translations';
-
-describe('Uncommon Process Table Component', () => {
-  const loadPage = jest.fn();
-  const mount = useMountAppended();
-
-  describe('rendering', () => {
-    test('it renders the default Uncommon process table', () => {
-      const wrapper = shallow(
-        <TestProviders>
-          <UncommonProcessTable
-            data={mockData.UncommonProcess.edges}
-            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.UncommonProcess.pageInfo)}
-            id="uncommonProcess"
-            isInspect={false}
-            loading={false}
-            loadPage={loadPage}
-            showMorePagesIndicator={getOr(
-              false,
-              'showMorePagesIndicator',
-              mockData.UncommonProcess.pageInfo
-            )}
-            totalCount={mockData.UncommonProcess.totalCount}
-            type={hostsModel.HostsType.page}
-          />
-        </TestProviders>
-      );
-
-      expect(wrapper.find('UncommonProcessTable')).toMatchSnapshot();
-    });
-
-    test('it has a double dash (empty value) without any hosts at all', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <UncommonProcessTable
-            data={mockData.UncommonProcess.edges}
-            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.UncommonProcess.pageInfo)}
-            id="uncommonProcess"
-            isInspect={false}
-            loading={false}
-            loadPage={loadPage}
-            showMorePagesIndicator={getOr(
-              false,
-              'showMorePagesIndicator',
-              mockData.UncommonProcess.pageInfo
-            )}
-            totalCount={mockData.UncommonProcess.totalCount}
-            type={hostsModel.HostsType.page}
-          />
-        </TestProviders>
-      );
-      expect(
-        wrapper
-          .find('.euiTableRow')
-          .at(0)
-          .find('.euiTableRowCell')
-          .at(3)
-          .text()
-      ).toBe(`Host names${getEmptyValue()}`);
-    });
-
-    test('it has a single host without any extra comma when the number of hosts is exactly 1', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <UncommonProcessTable
-            data={mockData.UncommonProcess.edges}
-            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.UncommonProcess.pageInfo)}
-            id="uncommonProcess"
-            isInspect={false}
-            loading={false}
-            loadPage={loadPage}
-            showMorePagesIndicator={getOr(
-              false,
-              'showMorePagesIndicator',
-              mockData.UncommonProcess.pageInfo
-            )}
-            totalCount={mockData.UncommonProcess.totalCount}
-            type={hostsModel.HostsType.page}
-          />
-        </TestProviders>
-      );
-
-      expect(
-        wrapper
-          .find('.euiTableRow')
-          .at(1)
-          .find('.euiTableRowCell')
-          .at(3)
-          .text()
-      ).toBe('Host nameshello-world ');
-    });
-
-    test('it has a single link when the number of hosts is exactly 1', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <UncommonProcessTable
-            data={mockData.UncommonProcess.edges}
-            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.UncommonProcess.pageInfo)}
-            id="uncommonProcess"
-            isInspect={false}
-            loading={false}
-            loadPage={loadPage}
-            showMorePagesIndicator={getOr(
-              false,
-              'showMorePagesIndicator',
-              mockData.UncommonProcess.pageInfo
-            )}
-            totalCount={mockData.UncommonProcess.totalCount}
-            type={hostsModel.HostsType.page}
-          />
-        </TestProviders>
-      );
-
-      expect(
-        wrapper
-          .find('.euiTableRow')
-          .at(1)
-          .find('.euiTableRowCell')
-          .at(3)
-          .find('a').length
-      ).toBe(1);
-    });
-
-    test('it has a comma separated list of hosts when the number of hosts is greater than 1', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <UncommonProcessTable
-            data={mockData.UncommonProcess.edges}
-            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.UncommonProcess.pageInfo)}
-            id="uncommonProcess"
-            isInspect={false}
-            loading={false}
-            loadPage={loadPage}
-            showMorePagesIndicator={getOr(
-              false,
-              'showMorePagesIndicator',
-              mockData.UncommonProcess.pageInfo
-            )}
-            totalCount={mockData.UncommonProcess.totalCount}
-            type={hostsModel.HostsType.page}
-          />
-        </TestProviders>
-      );
-
-      expect(
-        wrapper
-          .find('.euiTableRow')
-          .at(2)
-          .find('.euiTableRowCell')
-          .at(3)
-          .text()
-      ).toBe('Host nameshello-world,hello-world-2 ');
-    });
-
-    test('it has 2 links when the number of hosts is equal to 2', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <UncommonProcessTable
-            data={mockData.UncommonProcess.edges}
-            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.UncommonProcess.pageInfo)}
-            id="uncommonProcess"
-            isInspect={false}
-            loading={false}
-            loadPage={loadPage}
-            showMorePagesIndicator={getOr(
-              false,
-              'showMorePagesIndicator',
-              mockData.UncommonProcess.pageInfo
-            )}
-            totalCount={mockData.UncommonProcess.totalCount}
-            type={hostsModel.HostsType.page}
-          />
-        </TestProviders>
-      );
-
-      expect(
-        wrapper
-          .find('.euiTableRow')
-          .at(2)
-          .find('.euiTableRowCell')
-          .at(3)
-          .find('a').length
-      ).toBe(2);
-    });
-
-    test('it is empty when all hosts are invalid because they do not contain an id and a name', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <UncommonProcessTable
-            data={mockData.UncommonProcess.edges}
-            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.UncommonProcess.pageInfo)}
-            id="uncommonProcess"
-            isInspect={false}
-            loading={false}
-            loadPage={loadPage}
-            showMorePagesIndicator={getOr(
-              false,
-              'showMorePagesIndicator',
-              mockData.UncommonProcess.pageInfo
-            )}
-            totalCount={mockData.UncommonProcess.totalCount}
-            type={hostsModel.HostsType.page}
-          />
-        </TestProviders>
-      );
-      expect(
-        wrapper
-          .find('.euiTableRow')
-          .at(3)
-          .find('.euiTableRowCell')
-          .at(3)
-          .text()
-      ).toBe(`Host names${getEmptyValue()}`);
-    });
-
-    test('it has no link when all hosts are invalid because they do not contain an id and a name', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <UncommonProcessTable
-            data={mockData.UncommonProcess.edges}
-            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.UncommonProcess.pageInfo)}
-            id="uncommonProcess"
-            isInspect={false}
-            loading={false}
-            loadPage={loadPage}
-            showMorePagesIndicator={getOr(
-              false,
-              'showMorePagesIndicator',
-              mockData.UncommonProcess.pageInfo
-            )}
-            totalCount={mockData.UncommonProcess.totalCount}
-            type={hostsModel.HostsType.page}
-          />
-        </TestProviders>
-      );
-      expect(
-        wrapper
-          .find('.euiTableRow')
-          .at(3)
-          .find('.euiTableRowCell')
-          .at(3)
-          .find('a').length
-      ).toBe(0);
-    });
-
-    test('it is returns two hosts when others are invalid because they do not contain an id and a name', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <UncommonProcessTable
-            data={mockData.UncommonProcess.edges}
-            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.UncommonProcess.pageInfo)}
-            id="uncommonProcess"
-            isInspect={false}
-            loading={false}
-            loadPage={loadPage}
-            showMorePagesIndicator={getOr(
-              false,
-              'showMorePagesIndicator',
-              mockData.UncommonProcess.pageInfo
-            )}
-            totalCount={mockData.UncommonProcess.totalCount}
-            type={hostsModel.HostsType.page}
-          />
-        </TestProviders>
-      );
-      expect(
-        wrapper
-          .find('.euiTableRow')
-          .at(4)
-          .find('.euiTableRowCell')
-          .at(3)
-          .text()
-      ).toBe('Host nameshello-world,hello-world-2 ');
-    });
-  });
-
-  describe('#getArgs', () => {
-    test('it works with string array', () => {
-      const args = ['1', '2', '3'];
-      expect(getArgs(args)).toEqual('1 2 3');
-    });
-
-    test('it returns null if empty array', () => {
-      const args: string[] = [];
-      expect(getArgs(args)).toEqual(null);
-    });
-
-    test('it returns null if given null', () => {
-      expect(getArgs(null)).toEqual(null);
-    });
-
-    test('it returns null if given undefined', () => {
-      expect(getArgs(undefined)).toEqual(null);
-    });
-  });
-
-  describe('#getUncommonColumnsCurated', () => {
-    test('on hosts page, we expect to get all columns', () => {
-      expect(getUncommonColumnsCurated(HostsType.page).length).toEqual(6);
-    });
-
-    test('on host details page, we expect to remove two columns', () => {
-      const columns = getUncommonColumnsCurated(HostsType.details);
-      expect(columns.length).toEqual(4);
-    });
-
-    test('on host page, we should have hosts', () => {
-      const columns = getUncommonColumnsCurated(HostsType.page);
-      expect(columns.some(col => col.name === i18n.HOSTS)).toEqual(true);
-    });
-
-    test('on host page, we should have number of hosts', () => {
-      const columns = getUncommonColumnsCurated(HostsType.page);
-      expect(columns.some(col => col.name === i18n.NUMBER_OF_HOSTS)).toEqual(true);
-    });
-
-    test('on host details page, we should not have hosts', () => {
-      const columns = getUncommonColumnsCurated(HostsType.details);
-      expect(columns.some(col => col.name === i18n.HOSTS)).toEqual(false);
-    });
-
-    test('on host details page, we should not have number of hosts', () => {
-      const columns = getUncommonColumnsCurated(HostsType.details);
-      expect(columns.some(col => col.name === i18n.NUMBER_OF_HOSTS)).toEqual(false);
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/page/hosts/uncommon_process_table/index.tsx b/x-pack/plugins/siem/public/components/page/hosts/uncommon_process_table/index.tsx
deleted file mode 100644
index 2e59afcba4ac86..00000000000000
--- a/x-pack/plugins/siem/public/components/page/hosts/uncommon_process_table/index.tsx
+++ /dev/null
@@ -1,238 +0,0 @@
-/*
- * 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.
- */
-
-/* eslint-disable react/display-name */
-
-import React, { useCallback, useMemo } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
-
-import { hostsActions } from '../../../../store/actions';
-import { UncommonProcessesEdges, UncommonProcessItem } from '../../../../graphql/types';
-import { hostsModel, hostsSelectors, State } from '../../../../store';
-import { defaultToEmptyTag, getEmptyValue } from '../../../empty_value';
-import { HostDetailsLink } from '../../../links';
-import { Columns, ItemsPerRow, PaginatedTable } from '../../../paginated_table';
-
-import * as i18n from './translations';
-import { getRowItemDraggables } from '../../../tables/helpers';
-import { HostsType } from '../../../../store/hosts/model';
-const tableType = hostsModel.HostsTableType.uncommonProcesses;
-interface OwnProps {
-  data: UncommonProcessesEdges[];
-  fakeTotalCount: number;
-  id: string;
-  isInspect: boolean;
-  loading: boolean;
-  loadPage: (newActivePage: number) => void;
-  showMorePagesIndicator: boolean;
-  totalCount: number;
-  type: hostsModel.HostsType;
-}
-
-export type UncommonProcessTableColumns = [
-  Columns<UncommonProcessesEdges>,
-  Columns<UncommonProcessesEdges>,
-  Columns<UncommonProcessesEdges>,
-  Columns<UncommonProcessesEdges>,
-  Columns<UncommonProcessesEdges>,
-  Columns<UncommonProcessesEdges>
-];
-
-type UncommonProcessTableProps = OwnProps & PropsFromRedux;
-
-const rowItems: ItemsPerRow[] = [
-  {
-    text: i18n.ROWS_5,
-    numberOfRow: 5,
-  },
-  {
-    text: i18n.ROWS_10,
-    numberOfRow: 10,
-  },
-];
-
-export const getArgs = (args: string[] | null | undefined): string | null => {
-  if (args != null && args.length !== 0) {
-    return args.join(' ');
-  } else {
-    return null;
-  }
-};
-
-const UncommonProcessTableComponent = React.memo<UncommonProcessTableProps>(
-  ({
-    activePage,
-    data,
-    fakeTotalCount,
-    id,
-    isInspect,
-    limit,
-    loading,
-    loadPage,
-    totalCount,
-    showMorePagesIndicator,
-    updateTableActivePage,
-    updateTableLimit,
-    type,
-  }) => {
-    const updateLimitPagination = useCallback(
-      newLimit =>
-        updateTableLimit({
-          hostsType: type,
-          limit: newLimit,
-          tableType,
-        }),
-      [type, updateTableLimit]
-    );
-
-    const updateActivePage = useCallback(
-      newPage =>
-        updateTableActivePage({
-          activePage: newPage,
-          hostsType: type,
-          tableType,
-        }),
-      [type, updateTableActivePage]
-    );
-
-    const columns = useMemo(() => getUncommonColumnsCurated(type), [type]);
-
-    return (
-      <PaginatedTable
-        activePage={activePage}
-        columns={columns}
-        dataTestSubj={`table-${tableType}`}
-        headerCount={totalCount}
-        headerTitle={i18n.UNCOMMON_PROCESSES}
-        headerUnit={i18n.UNIT(totalCount)}
-        id={id}
-        isInspect={isInspect}
-        itemsPerRow={rowItems}
-        limit={limit}
-        loading={loading}
-        loadPage={loadPage}
-        pageOfItems={data}
-        showMorePagesIndicator={showMorePagesIndicator}
-        totalCount={fakeTotalCount}
-        updateLimitPagination={updateLimitPagination}
-        updateActivePage={updateActivePage}
-      />
-    );
-  }
-);
-
-UncommonProcessTableComponent.displayName = 'UncommonProcessTableComponent';
-
-const makeMapStateToProps = () => {
-  const getUncommonProcessesSelector = hostsSelectors.uncommonProcessesSelector();
-  return (state: State, { type }: OwnProps) => getUncommonProcessesSelector(state, type);
-};
-
-const mapDispatchToProps = {
-  updateTableActivePage: hostsActions.updateTableActivePage,
-  updateTableLimit: hostsActions.updateTableLimit,
-};
-
-const connector = connect(makeMapStateToProps, mapDispatchToProps);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-export const UncommonProcessTable = connector(UncommonProcessTableComponent);
-
-UncommonProcessTable.displayName = 'UncommonProcessTable';
-
-const getUncommonColumns = (): UncommonProcessTableColumns => [
-  {
-    name: i18n.NAME,
-    truncateText: false,
-    hideForMobile: false,
-    render: ({ node }) =>
-      getRowItemDraggables({
-        rowItems: node.process.name,
-        attrName: 'process.name',
-        idPrefix: `uncommon-process-table-${node._id}-processName`,
-      }),
-    width: '20%',
-  },
-  {
-    align: 'right',
-    name: i18n.NUMBER_OF_HOSTS,
-    truncateText: false,
-    hideForMobile: false,
-    render: ({ node }) => <>{node.hosts != null ? node.hosts.length : getEmptyValue()}</>,
-    width: '8%',
-  },
-  {
-    align: 'right',
-    name: i18n.NUMBER_OF_INSTANCES,
-    truncateText: false,
-    hideForMobile: false,
-    render: ({ node }) => defaultToEmptyTag(node.instances),
-    width: '8%',
-  },
-  {
-    name: i18n.HOSTS,
-    truncateText: false,
-    hideForMobile: false,
-    render: ({ node }) =>
-      getRowItemDraggables({
-        rowItems: getHostNames(node),
-        attrName: 'host.name',
-        idPrefix: `uncommon-process-table-${node._id}-processHost`,
-        render: item => <HostDetailsLink hostName={item} />,
-      }),
-    width: '25%',
-  },
-  {
-    name: i18n.LAST_COMMAND,
-    truncateText: false,
-    hideForMobile: false,
-    render: ({ node }) =>
-      getRowItemDraggables({
-        rowItems: node.process != null ? node.process.args : null,
-        attrName: 'process.args',
-        idPrefix: `uncommon-process-table-${node._id}-processArgs`,
-        displayCount: 1, // TODO: Change this back once we have improved the UI
-      }),
-    width: '25%',
-  },
-  {
-    name: i18n.LAST_USER,
-    truncateText: false,
-    hideForMobile: false,
-    render: ({ node }) =>
-      getRowItemDraggables({
-        rowItems: node.user != null ? node.user.name : null,
-        attrName: 'user.name',
-        idPrefix: `uncommon-process-table-${node._id}-processUser`,
-      }),
-  },
-];
-
-export const getHostNames = (node: UncommonProcessItem): string[] => {
-  if (node.hosts != null) {
-    return node.hosts
-      .filter(host => host.name != null && host.name[0] != null)
-      .map(host => (host.name != null && host.name[0] != null ? host.name[0] : ''));
-  } else {
-    return [];
-  }
-};
-
-export const getUncommonColumnsCurated = (pageType: HostsType): UncommonProcessTableColumns => {
-  const columns: UncommonProcessTableColumns = getUncommonColumns();
-  if (pageType === HostsType.details) {
-    return [i18n.HOSTS, i18n.NUMBER_OF_HOSTS].reduce((acc, name) => {
-      acc.splice(
-        acc.findIndex(column => column.name === name),
-        1
-      );
-      return acc;
-    }, columns);
-  } else {
-    return columns;
-  }
-};
diff --git a/x-pack/plugins/siem/public/components/page/hosts/uncommon_process_table/mock.ts b/x-pack/plugins/siem/public/components/page/hosts/uncommon_process_table/mock.ts
deleted file mode 100644
index bcd76706e30354..00000000000000
--- a/x-pack/plugins/siem/public/components/page/hosts/uncommon_process_table/mock.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-/*
- * 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 { UncommonProcessesData } from '../../../../graphql/types';
-
-export const mockData: { UncommonProcess: UncommonProcessesData } = {
-  UncommonProcess: {
-    totalCount: 5,
-    edges: [
-      {
-        node: {
-          _id: 'cPsuhGcB0WOhS6qyTKC0',
-          process: {
-            title: ['Hello World'],
-            name: ['elrond.elstc.co'],
-          },
-          hosts: [],
-          instances: 93,
-          user: {
-            id: ['0'],
-            name: ['root'],
-          },
-        },
-        cursor: {
-          value: '98966fa2013c396155c460d35c0902be',
-        },
-      },
-      {
-        node: {
-          _id: 'cPsuhGcB0WOhS6qyTKC0',
-          process: {
-            title: ['Hello World'],
-            name: ['elrond.elstc.co'],
-          },
-          hosts: [{ id: ['host-id-1'], name: ['hello-world'] }],
-          instances: 93,
-          user: {
-            id: ['0'],
-            name: ['root'],
-          },
-        },
-        cursor: {
-          value: '98966fa2013c396155c460d35c0902be',
-        },
-      },
-      {
-        node: {
-          _id: 'KwQDiWcB0WOhS6qyXmrW',
-          process: {
-            title: ['Hello World'],
-            name: ['siem-kibana'],
-          },
-          hosts: [
-            { id: ['host-id-1'], name: ['hello-world'] },
-            { id: ['host-id-2'], name: ['hello-world-2'] },
-          ],
-          instances: 97,
-          user: {
-            id: ['1'],
-            name: ['Evan'],
-          },
-        },
-        cursor: {
-          value: 'aa7ca589f1b8220002f2fc61c64cfbf1',
-        },
-      },
-      {
-        node: {
-          _id: 'KwQDiWcB0WOhS6qyXmrW',
-          process: {
-            title: ['Hello World'],
-            name: ['siem-kibana'],
-          },
-          hosts: [{ ip: ['127.0.0.1'] }],
-          instances: 97,
-          user: {
-            id: ['1'],
-            name: ['Evan'],
-          },
-        },
-        cursor: {
-          value: 'aa7ca589f1b8220002f2fc61c64cfbf1',
-        },
-      },
-      {
-        node: {
-          _id: 'KwQDiWcB0WOhS6qyXmrW',
-          process: {
-            title: ['Hello World'],
-            name: ['siem-kibana'],
-          },
-          hosts: [
-            { ip: ['127.0.0.1'] },
-            { id: ['host-id-1'], name: ['hello-world'] },
-            { ip: ['127.0.0.1'] },
-            { id: ['host-id-2'], name: ['hello-world-2'] },
-            { ip: ['127.0.0.1'] },
-          ],
-          instances: 97,
-          user: {
-            id: ['1'],
-            name: ['Evan'],
-          },
-        },
-        cursor: {
-          value: 'aa7ca589f1b8220002f2fc61c64cfbf1',
-        },
-      },
-    ],
-    pageInfo: {
-      activePage: 1,
-      fakeTotalCount: 50,
-      showMorePagesIndicator: true,
-    },
-  },
-};
diff --git a/x-pack/plugins/siem/public/components/page/network/flow_target_select_connected/index.test.tsx b/x-pack/plugins/siem/public/components/page/network/flow_target_select_connected/index.test.tsx
deleted file mode 100644
index e71be5a51e5053..00000000000000
--- a/x-pack/plugins/siem/public/components/page/network/flow_target_select_connected/index.test.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
- * 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 { mount } from 'enzyme';
-import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
-
-import { TestProviders } from '../../../../mock';
-import { FlowTargetSelectConnectedComponent } from './index';
-import { FlowTarget } from '../../../../graphql/types';
-
-describe('Flow Target Select Connected', () => {
-  test('renders correctly against snapshot flowTarget source', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <MemoryRouter>
-          <FlowTargetSelectConnectedComponent flowTarget={FlowTarget.source} />
-        </MemoryRouter>
-      </TestProviders>
-    );
-    expect(wrapper.find('Memo(FlowTargetSelectComponent)').prop('selectedTarget')).toEqual(
-      FlowTarget.source
-    );
-  });
-
-  test('renders correctly against snapshot flowTarget destination', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <MemoryRouter>
-          <FlowTargetSelectConnectedComponent flowTarget={FlowTarget.destination} />
-        </MemoryRouter>
-      </TestProviders>
-    );
-
-    expect(wrapper.find('Memo(FlowTargetSelectComponent)').prop('selectedTarget')).toEqual(
-      FlowTarget.destination
-    );
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/page/network/flow_target_select_connected/index.tsx b/x-pack/plugins/siem/public/components/page/network/flow_target_select_connected/index.tsx
deleted file mode 100644
index 2651c31e0a2c9e..00000000000000
--- a/x-pack/plugins/siem/public/components/page/network/flow_target_select_connected/index.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-/*
- * 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 { Location } from 'history';
-import { EuiFlexItem } from '@elastic/eui';
-import React, { useCallback } from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
-import styled from 'styled-components';
-
-import { FlowDirection, FlowTarget } from '../../../../graphql/types';
-import * as i18nIp from '../ip_overview/translations';
-
-import { FlowTargetSelect } from '../../../flow_controls/flow_target_select';
-import { IpOverviewId } from '../../../field_renderers/field_renderers';
-
-const SelectTypeItem = styled(EuiFlexItem)`
-  min-width: 180px;
-`;
-
-SelectTypeItem.displayName = 'SelectTypeItem';
-
-interface Props {
-  flowTarget: FlowTarget;
-}
-
-const getUpdatedFlowTargetPath = (
-  location: Location,
-  currentFlowTarget: FlowTarget,
-  newFlowTarget: FlowTarget
-) => {
-  const newPathame = location.pathname.replace(currentFlowTarget, newFlowTarget);
-
-  return `${newPathame}${location.search}`;
-};
-
-export const FlowTargetSelectConnectedComponent: React.FC<Props> = ({ flowTarget }) => {
-  const history = useHistory();
-  const location = useLocation();
-
-  const updateIpDetailsFlowTarget = useCallback(
-    (newFlowTarget: FlowTarget) => {
-      const newPath = getUpdatedFlowTargetPath(location, flowTarget, newFlowTarget);
-      history.push(newPath);
-    },
-    [history, location, flowTarget]
-  );
-
-  return (
-    <SelectTypeItem grow={false} data-test-subj={`${IpOverviewId}-select-flow-target`}>
-      <FlowTargetSelect
-        id={IpOverviewId}
-        isLoading={!flowTarget}
-        selectedDirection={FlowDirection.uniDirectional}
-        selectedTarget={flowTarget}
-        displayTextOverride={[i18nIp.AS_SOURCE, i18nIp.AS_DESTINATION]}
-        updateFlowTargetAction={updateIpDetailsFlowTarget}
-      />
-    </SelectTypeItem>
-  );
-};
-
-export const FlowTargetSelectConnected = React.memo(FlowTargetSelectConnectedComponent);
diff --git a/x-pack/plugins/siem/public/components/page/network/index.tsx b/x-pack/plugins/siem/public/components/page/network/index.tsx
deleted file mode 100644
index 1f502635a8de4c..00000000000000
--- a/x-pack/plugins/siem/public/components/page/network/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-/*
- * 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.
- */
-
-export { IpOverview } from './ip_overview';
-export { KpiNetworkComponent } from './kpi_network';
-export { NetworkDnsTable } from './network_dns_table';
-export { NetworkTopCountriesTable } from './network_top_countries_table';
-export { NetworkTopNFlowTable } from './network_top_n_flow_table';
-export { NetworkHttpTable } from './network_http_table';
diff --git a/x-pack/plugins/siem/public/components/page/network/ip_overview/index.test.tsx b/x-pack/plugins/siem/public/components/page/network/ip_overview/index.test.tsx
deleted file mode 100644
index 3038d7f41c632e..00000000000000
--- a/x-pack/plugins/siem/public/components/page/network/ip_overview/index.test.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-/*
- * 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 { shallow } from 'enzyme';
-import React from 'react';
-import { ActionCreator } from 'typescript-fsa';
-
-import { FlowTarget } from '../../../../graphql/types';
-import { apolloClientObservable, mockGlobalState, TestProviders } from '../../../../mock';
-import { createStore, networkModel, State } from '../../../../store';
-
-import { IpOverview } from './index';
-import { mockData } from './mock';
-import { mockAnomalies } from '../../../ml/mock';
-import { NarrowDateRange } from '../../../ml/types';
-
-describe('IP Overview Component', () => {
-  const state: State = mockGlobalState;
-
-  let store = createStore(state, apolloClientObservable);
-
-  beforeEach(() => {
-    store = createStore(state, apolloClientObservable);
-  });
-
-  describe('rendering', () => {
-    const mockProps = {
-      anomaliesData: mockAnomalies,
-      data: mockData.IpOverview,
-      endDate: new Date('2019-06-18T06:00:00.000Z').valueOf(),
-      flowTarget: FlowTarget.source,
-      loading: false,
-      id: 'ipOverview',
-      ip: '10.10.10.10',
-      isLoadingAnomaliesData: false,
-      narrowDateRange: (jest.fn() as unknown) as NarrowDateRange,
-      startDate: new Date('2019-06-15T06:00:00.000Z').valueOf(),
-      type: networkModel.NetworkType.details,
-      updateFlowTargetAction: (jest.fn() as unknown) as ActionCreator<{
-        flowTarget: FlowTarget;
-      }>,
-    };
-
-    test('it renders the default IP Overview', () => {
-      const wrapper = shallow(
-        <TestProviders store={store}>
-          <IpOverview {...mockProps} />
-        </TestProviders>
-      );
-
-      expect(wrapper.find('IpOverview')).toMatchSnapshot();
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/page/network/ip_overview/index.tsx b/x-pack/plugins/siem/public/components/page/network/ip_overview/index.tsx
deleted file mode 100644
index 456deaac0fb154..00000000000000
--- a/x-pack/plugins/siem/public/components/page/network/ip_overview/index.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-/*
- * 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 { 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 from 'react';
-
-import { DEFAULT_DARK_MODE } from '../../../../../common/constants';
-import { DescriptionList } from '../../../../../common/utility_types';
-import { useUiSetting$ } from '../../../../lib/kibana';
-import { FlowTarget, IpOverviewData, Overview } from '../../../../graphql/types';
-import { networkModel } from '../../../../store';
-import { getEmptyTagValue } from '../../../empty_value';
-
-import {
-  autonomousSystemRenderer,
-  dateRenderer,
-  hostIdRenderer,
-  hostNameRenderer,
-  locationRenderer,
-  reputationRenderer,
-  whoisRenderer,
-} from '../../../field_renderers/field_renderers';
-import * as i18n from './translations';
-import { DescriptionListStyled, OverviewWrapper } from '../../index';
-import { Loader } from '../../../loader';
-import { Anomalies, NarrowDateRange } from '../../../ml/types';
-import { AnomalyScores } from '../../../ml/score/anomaly_scores';
-import { useMlCapabilities } from '../../../ml_popover/hooks/use_ml_capabilities';
-import { hasMlUserPermissions } from '../../../../../common/machine_learning/has_ml_user_permissions';
-import { InspectButton, InspectButtonContainer } from '../../../inspect';
-
-interface OwnProps {
-  data: IpOverviewData;
-  flowTarget: FlowTarget;
-  id: string;
-  ip: string;
-  loading: boolean;
-  isLoadingAnomaliesData: boolean;
-  anomaliesData: Anomalies | null;
-  startDate: number;
-  endDate: number;
-  type: networkModel.NetworkType;
-  narrowDateRange: NarrowDateRange;
-}
-
-export type IpOverviewProps = OwnProps;
-
-const getDescriptionList = (descriptionList: DescriptionList[], key: number) => {
-  return (
-    <EuiFlexItem key={key}>
-      <DescriptionListStyled listItems={descriptionList} />
-    </EuiFlexItem>
-  );
-};
-
-export const IpOverview = React.memo<IpOverviewProps>(
-  ({
-    id,
-    ip,
-    data,
-    loading,
-    flowTarget,
-    startDate,
-    endDate,
-    isLoadingAnomaliesData,
-    anomaliesData,
-    narrowDateRange,
-  }) => {
-    const capabilities = useMlCapabilities();
-    const userPermissions = hasMlUserPermissions(capabilities);
-    const [darkMode] = useUiSetting$<boolean>(DEFAULT_DARK_MODE);
-    const typeData: Overview = data[flowTarget]!;
-    const column: DescriptionList[] = [
-      {
-        title: i18n.LOCATION,
-        description: locationRenderer(
-          [`${flowTarget}.geo.city_name`, `${flowTarget}.geo.region_name`],
-          data
-        ),
-      },
-      {
-        title: i18n.AUTONOMOUS_SYSTEM,
-        description: typeData
-          ? autonomousSystemRenderer(typeData.autonomousSystem, flowTarget)
-          : getEmptyTagValue(),
-      },
-    ];
-
-    const firstColumn: DescriptionList[] = userPermissions
-      ? [
-          ...column,
-          {
-            title: i18n.MAX_ANOMALY_SCORE_BY_JOB,
-            description: (
-              <AnomalyScores
-                anomalies={anomaliesData}
-                startDate={startDate}
-                endDate={endDate}
-                isLoading={isLoadingAnomaliesData}
-                narrowDateRange={narrowDateRange}
-              />
-            ),
-          },
-        ]
-      : column;
-
-    const descriptionLists: Readonly<DescriptionList[][]> = [
-      firstColumn,
-      [
-        {
-          title: i18n.FIRST_SEEN,
-          description: typeData ? dateRenderer(typeData.firstSeen) : getEmptyTagValue(),
-        },
-        {
-          title: i18n.LAST_SEEN,
-          description: typeData ? dateRenderer(typeData.lastSeen) : getEmptyTagValue(),
-        },
-      ],
-      [
-        {
-          title: i18n.HOST_ID,
-          description: typeData
-            ? hostIdRenderer({ host: data.host, ipFilter: ip })
-            : getEmptyTagValue(),
-        },
-        {
-          title: i18n.HOST_NAME,
-          description: typeData ? hostNameRenderer(data.host, ip) : getEmptyTagValue(),
-        },
-      ],
-      [
-        { title: i18n.WHOIS, description: whoisRenderer(ip) },
-        { title: i18n.REPUTATION, description: reputationRenderer(ip) },
-      ],
-    ];
-
-    return (
-      <InspectButtonContainer>
-        <OverviewWrapper>
-          <InspectButton queryId={id} title={i18n.INSPECT_TITLE} inspectIndex={0} />
-
-          {descriptionLists.map((descriptionList, index) =>
-            getDescriptionList(descriptionList, index)
-          )}
-
-          {loading && (
-            <Loader
-              overlay
-              overlayBackground={
-                darkMode ? darkTheme.euiPageBackgroundColor : lightTheme.euiPageBackgroundColor
-              }
-              size="xl"
-            />
-          )}
-        </OverviewWrapper>
-      </InspectButtonContainer>
-    );
-  }
-);
-
-IpOverview.displayName = 'IpOverview';
diff --git a/x-pack/plugins/siem/public/components/page/network/ip_overview/mock.ts b/x-pack/plugins/siem/public/components/page/network/ip_overview/mock.ts
deleted file mode 100644
index aaacdae70aef79..00000000000000
--- a/x-pack/plugins/siem/public/components/page/network/ip_overview/mock.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-/*
- * 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 { IpOverviewData } from '../../../../graphql/types';
-
-export const mockData: Readonly<Record<string, IpOverviewData>> = {
-  complete: {
-    source: {
-      firstSeen: '2019-02-07T17:19:41.636Z',
-      lastSeen: '2019-02-07T17:19:41.636Z',
-      autonomousSystem: { organization: { name: 'Test Org' }, number: 12345 },
-      geo: {
-        continent_name: ['North America'],
-        city_name: ['New York'],
-        country_iso_code: ['US'],
-        country_name: null,
-        location: {
-          lat: [40.7214],
-          lon: [-74.0052],
-        },
-        region_iso_code: ['US-NY'],
-        region_name: ['New York'],
-      },
-    },
-    destination: {
-      firstSeen: '2019-02-07T17:19:41.648Z',
-      lastSeen: '2019-02-07T17:19:41.648Z',
-      autonomousSystem: { organization: { name: 'Test Org' }, number: 12345 },
-      geo: {
-        continent_name: ['North America'],
-        city_name: ['New York'],
-        country_iso_code: ['US'],
-        country_name: null,
-        location: {
-          lat: [40.7214],
-          lon: [-74.0052],
-        },
-        region_iso_code: ['US-NY'],
-        region_name: ['New York'],
-      },
-    },
-    host: {
-      os: {
-        kernel: ['4.14.50-v7+'],
-        name: ['Raspbian GNU/Linux'],
-        family: [''],
-        version: ['9 (stretch)'],
-        platform: ['raspbian'],
-      },
-      name: ['raspberrypi'],
-      id: ['b19a781f683541a7a25ee345133aa399'],
-      ip: ['10.10.10.10'],
-      architecture: ['armv7l'],
-    },
-  },
-};
diff --git a/x-pack/plugins/siem/public/components/page/network/kpi_network/index.test.tsx b/x-pack/plugins/siem/public/components/page/network/kpi_network/index.test.tsx
deleted file mode 100644
index 48d3b25f59e4a2..00000000000000
--- a/x-pack/plugins/siem/public/components/page/network/kpi_network/index.test.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-/*
- * 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 { shallow } from 'enzyme';
-import React from 'react';
-import { Provider as ReduxStoreProvider } from 'react-redux';
-
-import { apolloClientObservable, mockGlobalState } from '../../../../mock';
-import { createStore, State } from '../../../../store';
-
-import { KpiNetworkComponent } from '.';
-import { mockData } from './mock';
-
-describe('KpiNetwork Component', () => {
-  const state: State = mockGlobalState;
-  const from = new Date('2019-06-15T06:00:00.000Z').valueOf();
-  const to = new Date('2019-06-18T06:00:00.000Z').valueOf();
-  const narrowDateRange = jest.fn();
-
-  let store = createStore(state, apolloClientObservable);
-
-  beforeEach(() => {
-    store = createStore(state, apolloClientObservable);
-  });
-
-  describe('rendering', () => {
-    test('it renders loading icons', () => {
-      const wrapper = shallow(
-        <ReduxStoreProvider store={store}>
-          <KpiNetworkComponent
-            data={mockData.KpiNetwork}
-            from={from}
-            id="kpiNetwork"
-            loading={true}
-            to={to}
-            narrowDateRange={narrowDateRange}
-          />
-        </ReduxStoreProvider>
-      );
-
-      expect(wrapper.find('KpiNetworkComponent')).toMatchSnapshot();
-    });
-
-    test('it renders the default widget', () => {
-      const wrapper = shallow(
-        <ReduxStoreProvider store={store}>
-          <KpiNetworkComponent
-            data={mockData.KpiNetwork}
-            from={from}
-            id="kpiNetwork"
-            loading={false}
-            to={to}
-            narrowDateRange={narrowDateRange}
-          />
-        </ReduxStoreProvider>
-      );
-
-      expect(wrapper.find('KpiNetworkComponent')).toMatchSnapshot();
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/page/network/kpi_network/index.tsx b/x-pack/plugins/siem/public/components/page/network/kpi_network/index.tsx
deleted file mode 100644
index e81c65fbc6afb7..00000000000000
--- a/x-pack/plugins/siem/public/components/page/network/kpi_network/index.tsx
+++ /dev/null
@@ -1,199 +0,0 @@
-/*
- * 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 {
-  EuiFlexItem,
-  EuiLoadingSpinner,
-  EuiFlexGroup,
-  EuiSpacer,
-  euiPaletteColorBlind,
-} from '@elastic/eui';
-import styled from 'styled-components';
-import { chunk as _chunk } from 'lodash/fp';
-
-import {
-  StatItemsComponent,
-  StatItemsProps,
-  useKpiMatrixStatus,
-  StatItems,
-} from '../../../../components/stat_items';
-import { KpiNetworkData } from '../../../../graphql/types';
-
-import * as i18n from './translations';
-import { UpdateDateRange } from '../../../charts/common';
-
-const kipsPerRow = 2;
-const kpiWidgetHeight = 228;
-
-const euiVisColorPalette = euiPaletteColorBlind();
-const euiColorVis1 = euiVisColorPalette[1];
-const euiColorVis2 = euiVisColorPalette[2];
-const euiColorVis3 = euiVisColorPalette[3];
-
-interface KpiNetworkProps {
-  data: KpiNetworkData;
-  from: number;
-  id: string;
-  loading: boolean;
-  to: number;
-  narrowDateRange: UpdateDateRange;
-}
-
-export const fieldTitleChartMapping: Readonly<StatItems[]> = [
-  {
-    key: 'UniqueIps',
-    index: 2,
-    fields: [
-      {
-        key: 'uniqueSourcePrivateIps',
-        value: null,
-        name: i18n.SOURCE_CHART_LABEL,
-        description: i18n.SOURCE_UNIT_LABEL,
-        color: euiColorVis2,
-        icon: 'visMapCoordinate',
-      },
-      {
-        key: 'uniqueDestinationPrivateIps',
-        value: null,
-        name: i18n.DESTINATION_CHART_LABEL,
-        description: i18n.DESTINATION_UNIT_LABEL,
-        color: euiColorVis3,
-        icon: 'visMapCoordinate',
-      },
-    ],
-    description: i18n.UNIQUE_PRIVATE_IPS,
-    enableAreaChart: true,
-    enableBarChart: true,
-    grow: 2,
-  },
-];
-
-const fieldTitleMatrixMapping: Readonly<StatItems[]> = [
-  {
-    key: 'networkEvents',
-    index: 0,
-    fields: [
-      {
-        key: 'networkEvents',
-        value: null,
-        color: euiColorVis1,
-      },
-    ],
-    description: i18n.NETWORK_EVENTS,
-    grow: 1,
-  },
-  {
-    key: 'dnsQueries',
-    index: 1,
-    fields: [
-      {
-        key: 'dnsQueries',
-        value: null,
-      },
-    ],
-    description: i18n.DNS_QUERIES,
-  },
-  {
-    key: 'uniqueFlowId',
-    index: 3,
-    fields: [
-      {
-        key: 'uniqueFlowId',
-        value: null,
-      },
-    ],
-    description: i18n.UNIQUE_FLOW_IDS,
-  },
-  {
-    key: 'tlsHandshakes',
-    index: 4,
-    fields: [
-      {
-        key: 'tlsHandshakes',
-        value: null,
-      },
-    ],
-    description: i18n.TLS_HANDSHAKES,
-  },
-];
-
-const FlexGroup = styled(EuiFlexGroup)`
-  min-height: ${kpiWidgetHeight}px;
-`;
-
-FlexGroup.displayName = 'FlexGroup';
-
-export const KpiNetworkBaseComponent = React.memo<{
-  fieldsMapping: Readonly<StatItems[]>;
-  data: KpiNetworkData;
-  id: string;
-  from: number;
-  to: number;
-  narrowDateRange: UpdateDateRange;
-}>(({ fieldsMapping, data, id, from, to, narrowDateRange }) => {
-  const statItemsProps: StatItemsProps[] = useKpiMatrixStatus(
-    fieldsMapping,
-    data,
-    id,
-    from,
-    to,
-    narrowDateRange
-  );
-
-  return (
-    <EuiFlexGroup wrap>
-      {statItemsProps.map((mappedStatItemProps, idx) => {
-        return <StatItemsComponent {...mappedStatItemProps} />;
-      })}
-    </EuiFlexGroup>
-  );
-});
-
-KpiNetworkBaseComponent.displayName = 'KpiNetworkBaseComponent';
-
-export const KpiNetworkComponent = React.memo<KpiNetworkProps>(
-  ({ data, from, id, loading, to, narrowDateRange }) => {
-    return loading ? (
-      <FlexGroup justifyContent="center" alignItems="center">
-        <EuiFlexItem grow={false}>
-          <EuiLoadingSpinner size="xl" />
-        </EuiFlexItem>
-      </FlexGroup>
-    ) : (
-      <EuiFlexGroup wrap>
-        <EuiFlexItem grow={1}>
-          {_chunk(kipsPerRow, fieldTitleMatrixMapping).map((mappingsPerLine, idx) => (
-            <React.Fragment key={`kpi-network-row-${idx}`}>
-              {idx % kipsPerRow === 1 && <EuiSpacer size="l" />}
-              <KpiNetworkBaseComponent
-                data={data}
-                id={id}
-                fieldsMapping={mappingsPerLine}
-                from={from}
-                to={to}
-                narrowDateRange={narrowDateRange}
-              />
-            </React.Fragment>
-          ))}
-        </EuiFlexItem>
-        <EuiFlexItem grow={1}>
-          <KpiNetworkBaseComponent
-            data={data}
-            id={id}
-            fieldsMapping={fieldTitleChartMapping}
-            from={from}
-            to={to}
-            narrowDateRange={narrowDateRange}
-          />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    );
-  }
-);
-
-KpiNetworkComponent.displayName = 'KpiNetworkComponent';
diff --git a/x-pack/plugins/siem/public/components/page/network/kpi_network/mock.ts b/x-pack/plugins/siem/public/components/page/network/kpi_network/mock.ts
deleted file mode 100644
index 4edaf76bb48202..00000000000000
--- a/x-pack/plugins/siem/public/components/page/network/kpi_network/mock.ts
+++ /dev/null
@@ -1,230 +0,0 @@
-/*
- * 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 { KpiNetworkData } from '../../../../graphql/types';
-import { StatItems } from '../../../stat_items';
-
-export const mockNarrowDateRange = jest.fn();
-
-export const mockData: { KpiNetwork: KpiNetworkData } = {
-  KpiNetwork: {
-    networkEvents: 16,
-    uniqueFlowId: 10277307,
-    uniqueSourcePrivateIps: 383,
-    uniqueSourcePrivateIpsHistogram: [
-      {
-        x: new Date('2019-02-09T16:00:00.000Z').valueOf(),
-        y: 8,
-      },
-      {
-        x: new Date('2019-02-09T19:00:00.000Z').valueOf(),
-        y: 0,
-      },
-    ],
-    uniqueDestinationPrivateIps: 18,
-    uniqueDestinationPrivateIpsHistogram: [
-      {
-        x: new Date('2019-02-09T16:00:00.000Z').valueOf(),
-        y: 8,
-      },
-      {
-        x: new Date('2019-02-09T19:00:00.000Z').valueOf(),
-        y: 0,
-      },
-    ],
-    dnsQueries: 278,
-    tlsHandshakes: 10000,
-  },
-};
-
-const mockMappingItems: StatItems = {
-  key: 'UniqueIps',
-  index: 0,
-  fields: [
-    {
-      key: 'uniqueSourcePrivateIps',
-      value: null,
-      name: 'Src.',
-      description: 'source',
-      color: '#D36086',
-      icon: 'visMapCoordinate',
-    },
-    {
-      key: 'uniqueDestinationPrivateIps',
-      value: null,
-      name: 'Dest.',
-      description: 'destination',
-      color: '#9170B8',
-      icon: 'visMapCoordinate',
-    },
-  ],
-  description: 'Unique private IPs',
-  enableAreaChart: true,
-  enableBarChart: true,
-  grow: 2,
-};
-
-export const mockNoChartMappings: Readonly<StatItems[]> = [
-  {
-    ...mockMappingItems,
-    enableAreaChart: false,
-    enableBarChart: false,
-  },
-];
-
-export const mockDisableChartsInitialData = {
-  fields: [
-    {
-      key: 'uniqueSourcePrivateIps',
-      value: undefined,
-      name: 'Src.',
-      description: 'source',
-      color: '#D36086',
-      icon: 'visMapCoordinate',
-    },
-    {
-      key: 'uniqueDestinationPrivateIps',
-      value: undefined,
-      name: 'Dest.',
-      description: 'destination',
-      color: '#9170B8',
-      icon: 'visMapCoordinate',
-    },
-  ],
-  description: 'Unique private IPs',
-  enableAreaChart: false,
-  enableBarChart: false,
-  grow: 2,
-  areaChart: undefined,
-  barChart: undefined,
-};
-
-export const mockEnableChartsInitialData = {
-  fields: [
-    {
-      key: 'uniqueSourcePrivateIps',
-      value: undefined,
-      name: 'Src.',
-      description: 'source',
-      color: '#D36086',
-      icon: 'visMapCoordinate',
-    },
-    {
-      key: 'uniqueDestinationPrivateIps',
-      value: undefined,
-      name: 'Dest.',
-      description: 'destination',
-      color: '#9170B8',
-      icon: 'visMapCoordinate',
-    },
-  ],
-  description: 'Unique private IPs',
-  enableAreaChart: true,
-  enableBarChart: true,
-  grow: 2,
-  areaChart: [],
-  barChart: [
-    {
-      color: '#D36086',
-      key: 'uniqueSourcePrivateIps',
-      value: [
-        {
-          g: 'uniqueSourcePrivateIps',
-          x: 'Src.',
-          y: null,
-        },
-      ],
-    },
-    {
-      color: '#9170B8',
-      key: 'uniqueDestinationPrivateIps',
-      value: [
-        {
-          g: 'uniqueDestinationPrivateIps',
-          x: 'Dest.',
-          y: null,
-        },
-      ],
-    },
-  ],
-};
-
-export const mockEnableChartsData = {
-  areaChart: [
-    {
-      key: 'uniqueSourcePrivateIpsHistogram',
-      value: [
-        { x: new Date('2019-02-09T16:00:00.000Z').valueOf(), y: 8 },
-        {
-          x: new Date('2019-02-09T19:00:00.000Z').valueOf(),
-          y: 0,
-        },
-      ],
-      name: 'Src.',
-      description: 'source',
-      color: '#D36086',
-      icon: 'visMapCoordinate',
-    },
-    {
-      key: 'uniqueDestinationPrivateIpsHistogram',
-      value: [
-        { x: new Date('2019-02-09T16:00:00.000Z').valueOf(), y: 8 },
-        { x: new Date('2019-02-09T19:00:00.000Z').valueOf(), y: 0 },
-      ],
-      name: 'Dest.',
-      description: 'destination',
-      color: '#9170B8',
-      icon: 'visMapCoordinate',
-    },
-  ],
-  barChart: [
-    {
-      key: 'uniqueSourcePrivateIps',
-      color: '#D36086',
-      value: [
-        {
-          x: 'Src.',
-          y: 383,
-          g: 'uniqueSourcePrivateIps',
-          y0: 0,
-        },
-      ],
-    },
-    {
-      key: 'uniqueDestinationPrivateIps',
-      color: '#9170B8',
-      value: [{ x: 'Dest.', y: 18, g: 'uniqueDestinationPrivateIps', y0: 0 }],
-    },
-  ],
-  description: 'Unique private IPs',
-  enableAreaChart: true,
-  enableBarChart: true,
-  fields: [
-    {
-      key: 'uniqueSourcePrivateIps',
-      value: 383,
-      name: 'Src.',
-      description: 'source',
-      color: '#D36086',
-      icon: 'visMapCoordinate',
-    },
-    {
-      key: 'uniqueDestinationPrivateIps',
-      value: 18,
-      name: 'Dest.',
-      description: 'destination',
-      color: '#9170B8',
-      icon: 'visMapCoordinate',
-    },
-  ],
-  from: 1560578400000,
-  grow: 2,
-  id: 'statItem',
-  index: 2,
-  statKey: 'UniqueIps',
-  to: 1560837600000,
-  narrowDateRange: mockNarrowDateRange,
-};
diff --git a/x-pack/plugins/siem/public/components/page/network/network_dns_table/columns.tsx b/x-pack/plugins/siem/public/components/page/network/network_dns_table/columns.tsx
deleted file mode 100644
index 83a902d7bbde4a..00000000000000
--- a/x-pack/plugins/siem/public/components/page/network/network_dns_table/columns.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-/*
- * 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 numeral from '@elastic/numeral';
-import React from 'react';
-
-import { NetworkDnsFields, NetworkDnsItem } from '../../../../graphql/types';
-import { DragEffects, DraggableWrapper } from '../../../drag_and_drop/draggable_wrapper';
-import { escapeDataProviderId } from '../../../drag_and_drop/helpers';
-import { defaultToEmptyTag, getEmptyTagValue } from '../../../empty_value';
-import { Columns } from '../../../paginated_table';
-import { IS_OPERATOR } from '../../../timeline/data_providers/data_provider';
-import { PreferenceFormattedBytes } from '../../../formatted_bytes';
-import { Provider } from '../../../timeline/data_providers/provider';
-
-import * as i18n from './translations';
-export type NetworkDnsColumns = [
-  Columns<NetworkDnsItem['dnsName']>,
-  Columns<NetworkDnsItem['queryCount']>,
-  Columns<NetworkDnsItem['uniqueDomains']>,
-  Columns<NetworkDnsItem['dnsBytesIn']>,
-  Columns<NetworkDnsItem['dnsBytesOut']>
-];
-
-export const getNetworkDnsColumns = (): NetworkDnsColumns => [
-  {
-    field: `node.${NetworkDnsFields.dnsName}`,
-    name: i18n.REGISTERED_DOMAIN,
-    truncateText: false,
-    hideForMobile: false,
-    sortable: true,
-    render: dnsName => {
-      if (dnsName != null) {
-        const id = escapeDataProviderId(`networkDns-table--name-${dnsName}`);
-        return (
-          <DraggableWrapper
-            key={id}
-            dataProvider={{
-              and: [],
-              enabled: true,
-              id,
-              name: dnsName,
-              excluded: false,
-              kqlQuery: '',
-              queryMatch: {
-                field: 'dns.question.registered_domain',
-                value: dnsName,
-                operator: IS_OPERATOR,
-              },
-            }}
-            render={(dataProvider, _, snapshot) =>
-              snapshot.isDragging ? (
-                <DragEffects>
-                  <Provider dataProvider={dataProvider} />
-                </DragEffects>
-              ) : (
-                defaultToEmptyTag(dnsName)
-              )
-            }
-          />
-        );
-      } else {
-        return getEmptyTagValue();
-      }
-    },
-  },
-  {
-    align: 'right',
-    field: `node.${NetworkDnsFields.queryCount}`,
-    name: i18n.TOTAL_QUERIES,
-    sortable: true,
-    truncateText: false,
-    hideForMobile: false,
-    render: queryCount => {
-      if (queryCount != null) {
-        return numeral(queryCount).format('0');
-      } else {
-        return getEmptyTagValue();
-      }
-    },
-  },
-  {
-    align: 'right',
-    field: `node.${NetworkDnsFields.uniqueDomains}`,
-    name: i18n.UNIQUE_DOMAINS,
-    sortable: true,
-    truncateText: false,
-    hideForMobile: false,
-    render: uniqueDomains => {
-      if (uniqueDomains != null) {
-        return numeral(uniqueDomains).format('0');
-      } else {
-        return getEmptyTagValue();
-      }
-    },
-  },
-  {
-    align: 'right',
-    field: `node.${NetworkDnsFields.dnsBytesIn}`,
-    name: i18n.DNS_BYTES_IN,
-    sortable: true,
-    truncateText: false,
-    hideForMobile: false,
-    render: dnsBytesIn => {
-      if (dnsBytesIn != null) {
-        return <PreferenceFormattedBytes value={dnsBytesIn} />;
-      } else {
-        return getEmptyTagValue();
-      }
-    },
-  },
-  {
-    align: 'right',
-    field: `node.${NetworkDnsFields.dnsBytesOut}`,
-    name: i18n.DNS_BYTES_OUT,
-    sortable: true,
-    truncateText: false,
-    hideForMobile: false,
-    render: dnsBytesOut => {
-      if (dnsBytesOut != null) {
-        return <PreferenceFormattedBytes value={dnsBytesOut} />;
-      } else {
-        return getEmptyTagValue();
-      }
-    },
-  },
-];
diff --git a/x-pack/plugins/siem/public/components/page/network/network_dns_table/index.test.tsx b/x-pack/plugins/siem/public/components/page/network/network_dns_table/index.test.tsx
deleted file mode 100644
index e425057dd0f75f..00000000000000
--- a/x-pack/plugins/siem/public/components/page/network/network_dns_table/index.test.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-/*
- * 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 { shallow } from 'enzyme';
-import { getOr } from 'lodash/fp';
-import React from 'react';
-import { MockedProvider } from 'react-apollo/test-utils';
-import { Provider as ReduxStoreProvider } from 'react-redux';
-
-import { apolloClientObservable, mockGlobalState, TestProviders } from '../../../../mock';
-import { createStore, networkModel, State } from '../../../../store';
-import { useMountAppended } from '../../../../utils/use_mount_appended';
-
-import { NetworkDnsTable } from '.';
-import { mockData } from './mock';
-
-describe('NetworkTopNFlow Table Component', () => {
-  const loadPage = jest.fn();
-  const state: State = mockGlobalState;
-  let store = createStore(state, apolloClientObservable);
-  const mount = useMountAppended();
-
-  beforeEach(() => {
-    store = createStore(state, apolloClientObservable);
-  });
-
-  describe('rendering', () => {
-    test('it renders the default NetworkTopNFlow table', () => {
-      const wrapper = shallow(
-        <ReduxStoreProvider store={store}>
-          <NetworkDnsTable
-            data={mockData.NetworkDns.edges}
-            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.NetworkDns.pageInfo)}
-            id="dns"
-            isInspect={false}
-            loading={false}
-            loadPage={loadPage}
-            showMorePagesIndicator={getOr(
-              false,
-              'showMorePagesIndicator',
-              mockData.NetworkDns.pageInfo
-            )}
-            totalCount={mockData.NetworkDns.totalCount}
-            type={networkModel.NetworkType.page}
-          />
-        </ReduxStoreProvider>
-      );
-
-      expect(wrapper.find('Connect(NetworkDnsTableComponent)')).toMatchSnapshot();
-    });
-  });
-
-  describe('Sorting', () => {
-    test('when you click on the column header, you should show the sorting icon', () => {
-      const wrapper = mount(
-        <MockedProvider>
-          <TestProviders store={store}>
-            <NetworkDnsTable
-              data={mockData.NetworkDns.edges}
-              fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.NetworkDns.pageInfo)}
-              id="dns"
-              isInspect={false}
-              loading={false}
-              loadPage={loadPage}
-              showMorePagesIndicator={getOr(
-                false,
-                'showMorePagesIndicator',
-                mockData.NetworkDns.pageInfo
-              )}
-              totalCount={mockData.NetworkDns.totalCount}
-              type={networkModel.NetworkType.page}
-            />
-          </TestProviders>
-        </MockedProvider>
-      );
-
-      expect(store.getState().network.page.queries!.dns.sort).toEqual({
-        direction: 'desc',
-        field: 'queryCount',
-      });
-
-      wrapper
-        .find('.euiTable thead tr th button')
-        .first()
-        .simulate('click');
-
-      wrapper.update();
-
-      expect(store.getState().network.page.queries!.dns.sort).toEqual({
-        direction: 'asc',
-        field: 'dnsName',
-      });
-      expect(
-        wrapper
-          .find('.euiTable thead tr th button')
-          .first()
-          .find('svg')
-      ).toBeTruthy();
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/page/network/network_dns_table/index.tsx b/x-pack/plugins/siem/public/components/page/network/network_dns_table/index.tsx
deleted file mode 100644
index c1dd96c5c96f91..00000000000000
--- a/x-pack/plugins/siem/public/components/page/network/network_dns_table/index.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-/*
- * 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, { useCallback, useMemo } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
-import deepEqual from 'fast-deep-equal';
-
-import { networkActions } from '../../../../store/actions';
-import {
-  Direction,
-  NetworkDnsEdges,
-  NetworkDnsFields,
-  NetworkDnsSortField,
-} from '../../../../graphql/types';
-import { networkModel, networkSelectors, State } from '../../../../store';
-import { Criteria, ItemsPerRow, PaginatedTable } from '../../../paginated_table';
-
-import { getNetworkDnsColumns } from './columns';
-import { IsPtrIncluded } from './is_ptr_included';
-import * as i18n from './translations';
-
-const tableType = networkModel.NetworkTableType.dns;
-
-interface OwnProps {
-  data: NetworkDnsEdges[];
-  fakeTotalCount: number;
-  id: string;
-  isInspect: boolean;
-  loading: boolean;
-  loadPage: (newActivePage: number) => void;
-  showMorePagesIndicator: boolean;
-  totalCount: number;
-  type: networkModel.NetworkType;
-}
-
-type NetworkDnsTableProps = OwnProps & PropsFromRedux;
-
-const rowItems: ItemsPerRow[] = [
-  {
-    text: i18n.ROWS_5,
-    numberOfRow: 5,
-  },
-  {
-    text: i18n.ROWS_10,
-    numberOfRow: 10,
-  },
-];
-
-export const NetworkDnsTableComponent = React.memo<NetworkDnsTableProps>(
-  ({
-    activePage,
-    data,
-    fakeTotalCount,
-    id,
-    isInspect,
-    isPtrIncluded,
-    limit,
-    loading,
-    loadPage,
-    showMorePagesIndicator,
-    sort,
-    totalCount,
-    type,
-    updateNetworkTable,
-  }) => {
-    const updateLimitPagination = useCallback(
-      newLimit =>
-        updateNetworkTable({
-          networkType: type,
-          tableType,
-          updates: { limit: newLimit },
-        }),
-      [type, updateNetworkTable]
-    );
-
-    const updateActivePage = useCallback(
-      newPage =>
-        updateNetworkTable({
-          networkType: type,
-          tableType,
-          updates: { activePage: newPage },
-        }),
-      [type, updateNetworkTable]
-    );
-
-    const onChange = useCallback(
-      (criteria: Criteria) => {
-        if (criteria.sort != null) {
-          const newDnsSortField: NetworkDnsSortField = {
-            field: criteria.sort.field.split('.')[1] as NetworkDnsFields,
-            direction: criteria.sort.direction as Direction,
-          };
-          if (!deepEqual(newDnsSortField, sort)) {
-            updateNetworkTable({
-              networkType: type,
-              tableType,
-              updates: { sort: newDnsSortField },
-            });
-          }
-        }
-      },
-      [sort, type, updateNetworkTable]
-    );
-
-    const onChangePtrIncluded = useCallback(
-      () =>
-        updateNetworkTable({
-          networkType: type,
-          tableType,
-          updates: { isPtrIncluded: !isPtrIncluded },
-        }),
-      [type, updateNetworkTable, isPtrIncluded]
-    );
-
-    const columns = useMemo(() => getNetworkDnsColumns(), []);
-
-    return (
-      <PaginatedTable
-        activePage={activePage}
-        columns={columns}
-        dataTestSubj={`table-${tableType}`}
-        headerCount={totalCount}
-        headerSupplement={
-          <IsPtrIncluded isPtrIncluded={isPtrIncluded} onChange={onChangePtrIncluded} />
-        }
-        headerTitle={i18n.TOP_DNS_DOMAINS}
-        headerTooltip={i18n.TOOLTIP}
-        headerUnit={i18n.UNIT(totalCount)}
-        id={id}
-        itemsPerRow={rowItems}
-        isInspect={isInspect}
-        limit={limit}
-        loading={loading}
-        loadPage={loadPage}
-        onChange={onChange}
-        pageOfItems={data}
-        showMorePagesIndicator={showMorePagesIndicator}
-        sorting={{
-          field: `node.${sort.field}`,
-          direction: sort.direction,
-        }}
-        totalCount={fakeTotalCount}
-        updateActivePage={updateActivePage}
-        updateLimitPagination={updateLimitPagination}
-      />
-    );
-  }
-);
-
-NetworkDnsTableComponent.displayName = 'NetworkDnsTableComponent';
-
-const makeMapStateToProps = () => {
-  const getNetworkDnsSelector = networkSelectors.dnsSelector();
-  const mapStateToProps = (state: State) => getNetworkDnsSelector(state);
-  return mapStateToProps;
-};
-
-const mapDispatchToProps = {
-  updateNetworkTable: networkActions.updateNetworkTable,
-};
-
-const connector = connect(makeMapStateToProps, mapDispatchToProps);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-export const NetworkDnsTable = connector(NetworkDnsTableComponent);
diff --git a/x-pack/plugins/siem/public/components/page/network/network_dns_table/mock.ts b/x-pack/plugins/siem/public/components/page/network/network_dns_table/mock.ts
deleted file mode 100644
index 281125edb9dc42..00000000000000
--- a/x-pack/plugins/siem/public/components/page/network/network_dns_table/mock.ts
+++ /dev/null
@@ -1,182 +0,0 @@
-/*
- * 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 { NetworkDnsData } from '../../../../graphql/types';
-
-export const mockData: { NetworkDns: NetworkDnsData } = {
-  NetworkDns: {
-    totalCount: 80,
-    edges: [
-      {
-        node: {
-          _id: 'nflxvideo.net',
-          dnsBytesIn: 2964,
-          dnsBytesOut: 12546,
-          dnsName: 'nflxvideo.net',
-          queryCount: 52,
-          uniqueDomains: 21,
-        },
-        cursor: { value: 'nflxvideo.net' },
-      },
-      {
-        node: {
-          _id: 'apple.com',
-          dnsBytesIn: 2680,
-          dnsBytesOut: 31687,
-          dnsName: 'apple.com',
-          queryCount: 75,
-          uniqueDomains: 20,
-        },
-        cursor: { value: 'apple.com' },
-      },
-      {
-        node: {
-          _id: 'googlevideo.com',
-          dnsBytesIn: 1890,
-          dnsBytesOut: 16292,
-          dnsName: 'googlevideo.com',
-          queryCount: 38,
-          uniqueDomains: 19,
-        },
-        cursor: { value: 'googlevideo.com' },
-      },
-      {
-        node: {
-          _id: 'netflix.com',
-          dnsBytesIn: 60525,
-          dnsBytesOut: 218193,
-          dnsName: 'netflix.com',
-          queryCount: 1532,
-          uniqueDomains: 12,
-        },
-        cursor: { value: 'netflix.com' },
-      },
-      {
-        node: {
-          _id: 'samsungcloudsolution.com',
-          dnsBytesIn: 1480,
-          dnsBytesOut: 11702,
-          dnsName: 'samsungcloudsolution.com',
-          queryCount: 31,
-          uniqueDomains: 8,
-        },
-        cursor: { value: 'samsungcloudsolution.com' },
-      },
-      {
-        node: {
-          _id: 'doubleclick.net',
-          dnsBytesIn: 1505,
-          dnsBytesOut: 14372,
-          dnsName: 'doubleclick.net',
-          queryCount: 35,
-          uniqueDomains: 7,
-        },
-        cursor: { value: 'doubleclick.net' },
-      },
-      {
-        node: {
-          _id: 'digitalocean.com',
-          dnsBytesIn: 2035,
-          dnsBytesOut: 4111,
-          dnsName: 'digitalocean.com',
-          queryCount: 35,
-          uniqueDomains: 6,
-        },
-        cursor: { value: 'digitalocean.com' },
-      },
-      {
-        node: {
-          _id: 'samsungelectronics.com',
-          dnsBytesIn: 3916,
-          dnsBytesOut: 36592,
-          dnsName: 'samsungelectronics.com',
-          queryCount: 89,
-          uniqueDomains: 6,
-        },
-        cursor: { value: 'samsungelectronics.com' },
-      },
-      {
-        node: {
-          _id: 'google.com',
-          dnsBytesIn: 896,
-          dnsBytesOut: 8072,
-          dnsName: 'google.com',
-          queryCount: 23,
-          uniqueDomains: 5,
-        },
-        cursor: { value: 'google.com' },
-      },
-      {
-        node: {
-          _id: 'samsungcloudsolution.net',
-          dnsBytesIn: 1490,
-          dnsBytesOut: 11518,
-          dnsName: 'samsungcloudsolution.net',
-          queryCount: 30,
-          uniqueDomains: 5,
-        },
-        cursor: { value: 'samsungcloudsolution.net' },
-      },
-    ],
-    pageInfo: {
-      activePage: 1,
-      fakeTotalCount: 50,
-      showMorePagesIndicator: true,
-    },
-    histogram: [
-      {
-        x: 'nflxvideo.net',
-        g: 'nflxvideo.net',
-        y: 12546,
-      },
-      {
-        x: 'apple.com',
-        g: 'apple.com',
-        y: 31687,
-      },
-      {
-        x: 'googlevideo.com',
-        g: 'googlevideo.com',
-        y: 16292,
-      },
-      {
-        x: 'netflix.com',
-        g: 'netflix.com',
-        y: 218193,
-      },
-      {
-        x: 'samsungcloudsolution.com',
-        g: 'samsungcloudsolution.com',
-        y: 11702,
-      },
-      {
-        x: 'doubleclick.net',
-        g: 'doubleclick.net',
-        y: 14372,
-      },
-      {
-        x: 'digitalocean.com',
-        g: 'digitalocean.com',
-        y: 4111,
-      },
-      {
-        x: 'samsungelectronics.com',
-        g: 'samsungelectronics.com',
-        y: 36592,
-      },
-      {
-        x: 'google.com',
-        g: 'google.com',
-        y: 8072,
-      },
-      {
-        x: 'samsungcloudsolution.net',
-        g: 'samsungcloudsolution.net',
-        y: 11518,
-      },
-    ],
-  },
-};
diff --git a/x-pack/plugins/siem/public/components/page/network/network_http_table/columns.tsx b/x-pack/plugins/siem/public/components/page/network/network_http_table/columns.tsx
deleted file mode 100644
index bffc7235b6804c..00000000000000
--- a/x-pack/plugins/siem/public/components/page/network/network_http_table/columns.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-/*
- * 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.
- */
-
-/* eslint-disable react/display-name */
-
-import React from 'react';
-import numeral from '@elastic/numeral';
-import { NetworkHttpEdges, NetworkHttpFields, NetworkHttpItem } from '../../../../graphql/types';
-import { escapeDataProviderId } from '../../../drag_and_drop/helpers';
-import { getEmptyTagValue } from '../../../empty_value';
-import { IPDetailsLink } from '../../../links';
-import { Columns } from '../../../paginated_table';
-
-import * as i18n from './translations';
-import { getRowItemDraggable, getRowItemDraggables } from '../../../tables/helpers';
-export type NetworkHttpColumns = [
-  Columns<NetworkHttpEdges>,
-  Columns<NetworkHttpEdges>,
-  Columns<NetworkHttpItem['path']>,
-  Columns<NetworkHttpEdges>,
-  Columns<NetworkHttpEdges>,
-  Columns<NetworkHttpEdges>,
-  Columns<NetworkHttpItem['requestCount']>
-];
-
-export const getNetworkHttpColumns = (tableId: string): NetworkHttpColumns => [
-  {
-    name: i18n.METHOD,
-    render: ({ node: { methods, path } }) => {
-      return Array.isArray(methods) && methods.length > 0
-        ? getRowItemDraggables({
-            attrName: 'http.request.method',
-            displayCount: 3,
-            idPrefix: escapeDataProviderId(`${tableId}-table-methods-${path}`),
-            rowItems: methods,
-          })
-        : getEmptyTagValue();
-    },
-  },
-  {
-    name: i18n.DOMAIN,
-    render: ({ node: { domains, path } }) =>
-      Array.isArray(domains) && domains.length > 0
-        ? getRowItemDraggables({
-            attrName: 'url.domain',
-            displayCount: 3,
-            idPrefix: escapeDataProviderId(`${tableId}-table-domains-${path}`),
-            rowItems: domains,
-          })
-        : getEmptyTagValue(),
-  },
-  {
-    field: `node.${NetworkHttpFields.path}`,
-    name: i18n.PATH,
-    render: path =>
-      path != null
-        ? getRowItemDraggable({
-            attrName: 'url.path',
-            idPrefix: escapeDataProviderId(`${tableId}-table-path-${path}`),
-            rowItem: path,
-          })
-        : getEmptyTagValue(),
-  },
-  {
-    name: i18n.STATUS,
-    render: ({ node: { statuses, path } }) =>
-      Array.isArray(statuses) && statuses.length > 0
-        ? getRowItemDraggables({
-            attrName: 'http.response.status_code',
-            displayCount: 3,
-            idPrefix: escapeDataProviderId(`${tableId}-table-statuses-${path}`),
-            rowItems: statuses,
-          })
-        : getEmptyTagValue(),
-  },
-  {
-    name: i18n.LAST_HOST,
-    render: ({ node: { lastHost, path } }) =>
-      lastHost != null
-        ? getRowItemDraggable({
-            attrName: 'host.name',
-            idPrefix: escapeDataProviderId(`${tableId}-table-lastHost-${path}`),
-            rowItem: lastHost,
-          })
-        : getEmptyTagValue(),
-  },
-  {
-    name: i18n.LAST_SOURCE_IP,
-    render: ({ node: { lastSourceIp, path } }) =>
-      lastSourceIp != null
-        ? getRowItemDraggable({
-            attrName: 'source.ip',
-            idPrefix: escapeDataProviderId(`${tableId}-table-lastSourceIp-${path}`),
-            rowItem: lastSourceIp,
-            render: () => <IPDetailsLink ip={lastSourceIp} />,
-          })
-        : getEmptyTagValue(),
-  },
-  {
-    align: 'right',
-    field: `node.${NetworkHttpFields.requestCount}`,
-    name: i18n.REQUESTS,
-    sortable: true,
-    render: requestCount => {
-      if (requestCount != null) {
-        return numeral(requestCount).format('0,000');
-      } else {
-        return getEmptyTagValue();
-      }
-    },
-  },
-];
diff --git a/x-pack/plugins/siem/public/components/page/network/network_http_table/index.test.tsx b/x-pack/plugins/siem/public/components/page/network/network_http_table/index.test.tsx
deleted file mode 100644
index c4596ada5c74db..00000000000000
--- a/x-pack/plugins/siem/public/components/page/network/network_http_table/index.test.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-/*
- * 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 { shallow } from 'enzyme';
-import { getOr } from 'lodash/fp';
-import React from 'react';
-import { MockedProvider } from 'react-apollo/test-utils';
-import { Provider as ReduxStoreProvider } from 'react-redux';
-
-import { apolloClientObservable, mockGlobalState, TestProviders } from '../../../../mock';
-import { useMountAppended } from '../../../../utils/use_mount_appended';
-import { createStore, networkModel, State } from '../../../../store';
-
-import { NetworkHttpTable } from '.';
-import { mockData } from './mock';
-
-describe('NetworkHttp Table Component', () => {
-  const loadPage = jest.fn();
-  const state: State = mockGlobalState;
-
-  let store = createStore(state, apolloClientObservable);
-  const mount = useMountAppended();
-
-  beforeEach(() => {
-    store = createStore(state, apolloClientObservable);
-  });
-
-  describe('rendering', () => {
-    test('it renders the default NetworkHttp table', () => {
-      const wrapper = shallow(
-        <ReduxStoreProvider store={store}>
-          <NetworkHttpTable
-            data={mockData.NetworkHttp.edges}
-            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.NetworkHttp.pageInfo)}
-            id="http"
-            isInspect={false}
-            loading={false}
-            loadPage={loadPage}
-            showMorePagesIndicator={getOr(
-              false,
-              'showMorePagesIndicator',
-              mockData.NetworkHttp.pageInfo
-            )}
-            totalCount={mockData.NetworkHttp.totalCount}
-            type={networkModel.NetworkType.page}
-          />
-        </ReduxStoreProvider>
-      );
-
-      expect(wrapper.find('Connect(Component)')).toMatchSnapshot();
-    });
-  });
-
-  describe('Sorting', () => {
-    test('when you click on the column header, you should show the sorting icon', () => {
-      const wrapper = mount(
-        <MockedProvider>
-          <TestProviders store={store}>
-            <NetworkHttpTable
-              data={mockData.NetworkHttp.edges}
-              fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.NetworkHttp.pageInfo)}
-              id="http"
-              isInspect={false}
-              loading={false}
-              loadPage={loadPage}
-              showMorePagesIndicator={getOr(
-                false,
-                'showMorePagesIndicator',
-                mockData.NetworkHttp.pageInfo
-              )}
-              totalCount={mockData.NetworkHttp.totalCount}
-              type={networkModel.NetworkType.page}
-            />
-          </TestProviders>
-        </MockedProvider>
-      );
-
-      expect(store.getState().network.page.queries!.http.sort).toEqual({
-        direction: 'desc',
-      });
-
-      wrapper
-        .find('.euiTable thead tr th button')
-        .first()
-        .simulate('click');
-
-      wrapper.update();
-
-      expect(store.getState().network.page.queries!.http.sort).toEqual({
-        direction: 'asc',
-      });
-      expect(
-        wrapper
-          .find('.euiTable thead tr th button')
-          .first()
-          .find('svg')
-      ).toBeTruthy();
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/page/network/network_http_table/index.tsx b/x-pack/plugins/siem/public/components/page/network/network_http_table/index.tsx
deleted file mode 100644
index 6a8b1308f1d36a..00000000000000
--- a/x-pack/plugins/siem/public/components/page/network/network_http_table/index.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-/*
- * 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, { useCallback, useMemo } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
-
-import { networkActions } from '../../../../store/actions';
-import { Direction, NetworkHttpEdges, NetworkHttpFields } from '../../../../graphql/types';
-import { networkModel, networkSelectors, State } from '../../../../store';
-import { Criteria, ItemsPerRow, PaginatedTable } from '../../../paginated_table';
-
-import { getNetworkHttpColumns } from './columns';
-import * as i18n from './translations';
-
-interface OwnProps {
-  data: NetworkHttpEdges[];
-  fakeTotalCount: number;
-  id: string;
-  isInspect: boolean;
-  loading: boolean;
-  loadPage: (newActivePage: number) => void;
-  showMorePagesIndicator: boolean;
-  totalCount: number;
-  type: networkModel.NetworkType;
-}
-
-type NetworkHttpTableProps = OwnProps & PropsFromRedux;
-
-const rowItems: ItemsPerRow[] = [
-  {
-    text: i18n.ROWS_5,
-    numberOfRow: 5,
-  },
-  {
-    text: i18n.ROWS_10,
-    numberOfRow: 10,
-  },
-];
-
-const NetworkHttpTableComponent: React.FC<NetworkHttpTableProps> = ({
-  activePage,
-  data,
-  fakeTotalCount,
-  id,
-  isInspect,
-  limit,
-  loading,
-  loadPage,
-  showMorePagesIndicator,
-  sort,
-  totalCount,
-  type,
-  updateNetworkTable,
-}) => {
-  const tableType =
-    type === networkModel.NetworkType.page
-      ? networkModel.NetworkTableType.http
-      : networkModel.IpDetailsTableType.http;
-
-  const updateLimitPagination = useCallback(
-    newLimit =>
-      updateNetworkTable({
-        networkType: type,
-        tableType,
-        updates: { limit: newLimit },
-      }),
-    [type, updateNetworkTable, tableType]
-  );
-
-  const updateActivePage = useCallback(
-    newPage =>
-      updateNetworkTable({
-        networkType: type,
-        tableType,
-        updates: { activePage: newPage },
-      }),
-    [type, updateNetworkTable, tableType]
-  );
-
-  const onChange = useCallback(
-    (criteria: Criteria) => {
-      if (criteria.sort != null && criteria.sort.direction !== sort.direction) {
-        updateNetworkTable({
-          networkType: type,
-          tableType,
-          updates: {
-            sort: {
-              direction: criteria.sort.direction as Direction,
-            },
-          },
-        });
-      }
-    },
-    [tableType, sort.direction, type, updateNetworkTable]
-  );
-
-  const sorting = { field: `node.${NetworkHttpFields.requestCount}`, direction: sort.direction };
-
-  const columns = useMemo(() => getNetworkHttpColumns(tableType), [tableType]);
-
-  return (
-    <PaginatedTable
-      activePage={activePage}
-      columns={columns}
-      dataTestSubj={`table-${tableType}`}
-      headerCount={totalCount}
-      headerTitle={i18n.HTTP_REQUESTS}
-      headerUnit={i18n.UNIT(totalCount)}
-      id={id}
-      itemsPerRow={rowItems}
-      isInspect={isInspect}
-      limit={limit}
-      loading={loading}
-      loadPage={loadPage}
-      onChange={onChange}
-      pageOfItems={data}
-      showMorePagesIndicator={showMorePagesIndicator}
-      sorting={sorting}
-      totalCount={fakeTotalCount}
-      updateActivePage={updateActivePage}
-      updateLimitPagination={updateLimitPagination}
-    />
-  );
-};
-
-NetworkHttpTableComponent.displayName = 'NetworkHttpTableComponent';
-
-const makeMapStateToProps = () => {
-  const getNetworkHttpSelector = networkSelectors.httpSelector();
-  const mapStateToProps = (state: State, { type }: OwnProps) => getNetworkHttpSelector(state, type);
-  return mapStateToProps;
-};
-
-const mapDispatchToProps = {
-  updateNetworkTable: networkActions.updateNetworkTable,
-};
-
-const connector = connect(makeMapStateToProps, mapDispatchToProps);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-export const NetworkHttpTable = connector(React.memo(NetworkHttpTableComponent));
diff --git a/x-pack/plugins/siem/public/components/page/network/network_http_table/mock.ts b/x-pack/plugins/siem/public/components/page/network/network_http_table/mock.ts
deleted file mode 100644
index ed9b00ba8e49e5..00000000000000
--- a/x-pack/plugins/siem/public/components/page/network/network_http_table/mock.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-/*
- * 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 { NetworkHttpData } from '../../../../graphql/types';
-
-export const mockData: { NetworkHttp: NetworkHttpData } = {
-  NetworkHttp: {
-    edges: [
-      {
-        node: {
-          _id: '/computeMetadata/v1/instance/virtual-clock/drift-token',
-          domains: ['metadata.google.internal'],
-          methods: ['get'],
-          statuses: [],
-          lastHost: 'suricata-iowa',
-          lastSourceIp: '10.128.0.21',
-          path: '/computeMetadata/v1/instance/virtual-clock/drift-token',
-          requestCount: 1440,
-        },
-        cursor: {
-          value: '/computeMetadata/v1/instance/virtual-clock/drift-token',
-          tiebreaker: null,
-        },
-      },
-      {
-        node: {
-          _id: '/computeMetadata/v1/',
-          domains: ['metadata.google.internal'],
-          methods: ['get'],
-          statuses: ['200'],
-          lastHost: 'suricata-iowa',
-          lastSourceIp: '10.128.0.21',
-          path: '/computeMetadata/v1/',
-          requestCount: 1020,
-        },
-        cursor: {
-          value: '/computeMetadata/v1/',
-          tiebreaker: null,
-        },
-      },
-      {
-        node: {
-          _id: '/computeMetadata/v1/instance/network-interfaces/',
-          domains: ['metadata.google.internal'],
-          methods: ['get'],
-          statuses: [],
-          lastHost: 'suricata-iowa',
-          lastSourceIp: '10.128.0.21',
-          path: '/computeMetadata/v1/instance/network-interfaces/',
-          requestCount: 960,
-        },
-        cursor: {
-          value: '/computeMetadata/v1/instance/network-interfaces/',
-          tiebreaker: null,
-        },
-      },
-      {
-        node: {
-          _id: '/downloads/ca_setup.exe',
-          domains: ['www.oxid.it'],
-          methods: ['get'],
-          statuses: ['200'],
-          lastHost: 'jessie',
-          lastSourceIp: '10.0.2.15',
-          path: '/downloads/ca_setup.exe',
-          requestCount: 3,
-        },
-        cursor: {
-          value: '/downloads/ca_setup.exe',
-          tiebreaker: null,
-        },
-      },
-    ],
-    inspect: {
-      dsl: [''],
-      response: [''],
-    },
-    pageInfo: {
-      activePage: 0,
-      fakeTotalCount: 4,
-      showMorePagesIndicator: false,
-    },
-    totalCount: 4,
-  },
-};
diff --git a/x-pack/plugins/siem/public/components/page/network/network_top_countries_table/columns.tsx b/x-pack/plugins/siem/public/components/page/network/network_top_countries_table/columns.tsx
deleted file mode 100644
index ae2723e0065091..00000000000000
--- a/x-pack/plugins/siem/public/components/page/network/network_top_countries_table/columns.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-/*
- * 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 { get } from 'lodash/fp';
-import numeral from '@elastic/numeral';
-import React from 'react';
-import { IIndexPattern } from 'src/plugins/data/public';
-
-import { CountryFlagAndName } from '../../../source_destination/country_flag';
-import {
-  FlowTargetSourceDest,
-  NetworkTopCountriesEdges,
-  TopNetworkTablesEcsField,
-} from '../../../../graphql/types';
-import { networkModel } from '../../../../store';
-import { DragEffects, DraggableWrapper } from '../../../drag_and_drop/draggable_wrapper';
-import { escapeDataProviderId } from '../../../drag_and_drop/helpers';
-import { getEmptyTagValue } from '../../../empty_value';
-import { Columns } from '../../../paginated_table';
-import { IS_OPERATOR } from '../../../timeline/data_providers/data_provider';
-import { Provider } from '../../../timeline/data_providers/provider';
-import * as i18n from './translations';
-import { PreferenceFormattedBytes } from '../../../formatted_bytes';
-
-export type NetworkTopCountriesColumns = [
-  Columns<NetworkTopCountriesEdges>,
-  Columns<TopNetworkTablesEcsField['bytes_in']>,
-  Columns<TopNetworkTablesEcsField['bytes_out']>,
-  Columns<NetworkTopCountriesEdges>,
-  Columns<NetworkTopCountriesEdges>,
-  Columns<NetworkTopCountriesEdges>
-];
-
-export type NetworkTopCountriesColumnsIpDetails = [
-  Columns<NetworkTopCountriesEdges>,
-  Columns<TopNetworkTablesEcsField['bytes_in']>,
-  Columns<TopNetworkTablesEcsField['bytes_out']>,
-  Columns<NetworkTopCountriesEdges>,
-  Columns<NetworkTopCountriesEdges>
-];
-
-export const getNetworkTopCountriesColumns = (
-  indexPattern: IIndexPattern,
-  flowTarget: FlowTargetSourceDest,
-  type: networkModel.NetworkType,
-  tableId: string
-): NetworkTopCountriesColumns => [
-  {
-    name: i18n.COUNTRY,
-    render: ({ node }) => {
-      const geo = get(`${flowTarget}.country`, node);
-      const geoAttr = `${flowTarget}.geo.country_iso_code`;
-      const id = escapeDataProviderId(`${tableId}-table-${flowTarget}-country-${geo}`);
-      if (geo != null) {
-        return (
-          <DraggableWrapper
-            key={id}
-            dataProvider={{
-              and: [],
-              enabled: true,
-              id,
-              name: geo,
-              excluded: false,
-              kqlQuery: '',
-              queryMatch: { field: geoAttr, value: geo, operator: IS_OPERATOR },
-            }}
-            render={(dataProvider, _, snapshot) =>
-              snapshot.isDragging ? (
-                <DragEffects>
-                  <Provider dataProvider={dataProvider} />
-                </DragEffects>
-              ) : (
-                <>
-                  <CountryFlagAndName countryCode={geo} />
-                </>
-              )
-            }
-          />
-        );
-      } else {
-        return getEmptyTagValue();
-      }
-    },
-    width: '20%',
-  },
-  {
-    align: 'right',
-    field: 'node.network.bytes_in',
-    name: i18n.BYTES_IN,
-    sortable: true,
-    render: bytes => {
-      if (bytes != null) {
-        return <PreferenceFormattedBytes value={bytes} />;
-      } else {
-        return getEmptyTagValue();
-      }
-    },
-  },
-  {
-    align: 'right',
-    field: 'node.network.bytes_out',
-    name: i18n.BYTES_OUT,
-    sortable: true,
-    render: bytes => {
-      if (bytes != null) {
-        return <PreferenceFormattedBytes value={bytes} />;
-      } else {
-        return getEmptyTagValue();
-      }
-    },
-  },
-  {
-    align: 'right',
-    field: `node.${flowTarget}.flows`,
-    name: i18n.FLOWS,
-    sortable: true,
-    render: flows => {
-      if (flows != null) {
-        return numeral(flows).format('0,000');
-      } else {
-        return getEmptyTagValue();
-      }
-    },
-  },
-  {
-    align: 'right',
-    field: `node.${flowTarget}.${flowTarget}_ips`,
-    name: flowTarget === FlowTargetSourceDest.source ? i18n.SOURCE_IPS : i18n.DESTINATION_IPS,
-    sortable: true,
-    render: ips => {
-      if (ips != null) {
-        return numeral(ips).format('0,000');
-      } else {
-        return getEmptyTagValue();
-      }
-    },
-  },
-  {
-    align: 'right',
-    field: `node.${flowTarget}.${getOppositeField(flowTarget)}_ips`,
-    name:
-      getOppositeField(flowTarget) === FlowTargetSourceDest.source
-        ? i18n.SOURCE_IPS
-        : i18n.DESTINATION_IPS,
-    sortable: true,
-    render: ips => {
-      if (ips != null) {
-        return numeral(ips).format('0,000');
-      } else {
-        return getEmptyTagValue();
-      }
-    },
-  },
-];
-
-export const getCountriesColumnsCurated = (
-  indexPattern: IIndexPattern,
-  flowTarget: FlowTargetSourceDest,
-  type: networkModel.NetworkType,
-  tableId: string
-): NetworkTopCountriesColumns | NetworkTopCountriesColumnsIpDetails => {
-  const columns = getNetworkTopCountriesColumns(indexPattern, flowTarget, type, tableId);
-
-  // Columns to exclude from host details pages
-  if (type === networkModel.NetworkType.details) {
-    columns.pop();
-    return columns;
-  }
-
-  return columns;
-};
-
-const getOppositeField = (flowTarget: FlowTargetSourceDest): FlowTargetSourceDest =>
-  flowTarget === FlowTargetSourceDest.source
-    ? FlowTargetSourceDest.destination
-    : FlowTargetSourceDest.source;
diff --git a/x-pack/plugins/siem/public/components/page/network/network_top_countries_table/index.test.tsx b/x-pack/plugins/siem/public/components/page/network/network_top_countries_table/index.test.tsx
deleted file mode 100644
index 764e440a5a4be8..00000000000000
--- a/x-pack/plugins/siem/public/components/page/network/network_top_countries_table/index.test.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-/*
- * 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 { shallow } from 'enzyme';
-import { getOr } from 'lodash/fp';
-import React from 'react';
-import { MockedProvider } from 'react-apollo/test-utils';
-import { Provider as ReduxStoreProvider } from 'react-redux';
-
-import { FlowTargetSourceDest } from '../../../../graphql/types';
-import {
-  apolloClientObservable,
-  mockGlobalState,
-  mockIndexPattern,
-  TestProviders,
-} from '../../../../mock';
-import { useMountAppended } from '../../../../utils/use_mount_appended';
-import { createStore, networkModel, State } from '../../../../store';
-
-import { NetworkTopCountriesTable } from '.';
-import { mockData } from './mock';
-
-describe('NetworkTopCountries Table Component', () => {
-  const loadPage = jest.fn();
-  const state: State = mockGlobalState;
-  const mount = useMountAppended();
-
-  let store = createStore(state, apolloClientObservable);
-
-  beforeEach(() => {
-    store = createStore(state, apolloClientObservable);
-  });
-
-  describe('rendering', () => {
-    test('it renders the default NetworkTopCountries table', () => {
-      const wrapper = shallow(
-        <ReduxStoreProvider store={store}>
-          <NetworkTopCountriesTable
-            data={mockData.NetworkTopCountries.edges}
-            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.NetworkTopCountries.pageInfo)}
-            flowTargeted={FlowTargetSourceDest.source}
-            id="topCountriesSource"
-            indexPattern={mockIndexPattern}
-            isInspect={false}
-            loading={false}
-            loadPage={loadPage}
-            showMorePagesIndicator={getOr(
-              false,
-              'showMorePagesIndicator',
-              mockData.NetworkTopCountries.pageInfo
-            )}
-            totalCount={mockData.NetworkTopCountries.totalCount}
-            type={networkModel.NetworkType.page}
-          />
-        </ReduxStoreProvider>
-      );
-
-      expect(wrapper.find('Connect(NetworkTopCountriesTableComponent)')).toMatchSnapshot();
-    });
-    test('it renders the IP Details NetworkTopCountries table', () => {
-      const wrapper = shallow(
-        <ReduxStoreProvider store={store}>
-          <NetworkTopCountriesTable
-            data={mockData.NetworkTopCountries.edges}
-            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.NetworkTopCountries.pageInfo)}
-            flowTargeted={FlowTargetSourceDest.source}
-            id="topCountriesSource"
-            indexPattern={mockIndexPattern}
-            isInspect={false}
-            loading={false}
-            loadPage={loadPage}
-            showMorePagesIndicator={getOr(
-              false,
-              'showMorePagesIndicator',
-              mockData.NetworkTopCountries.pageInfo
-            )}
-            totalCount={mockData.NetworkTopCountries.totalCount}
-            type={networkModel.NetworkType.details}
-          />
-        </ReduxStoreProvider>
-      );
-
-      expect(wrapper.find('Connect(NetworkTopCountriesTableComponent)')).toMatchSnapshot();
-    });
-  });
-
-  describe('Sorting on Table', () => {
-    test('when you click on the column header, you should show the sorting icon', () => {
-      const wrapper = mount(
-        <MockedProvider>
-          <TestProviders store={store}>
-            <NetworkTopCountriesTable
-              data={mockData.NetworkTopCountries.edges}
-              fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.NetworkTopCountries.pageInfo)}
-              flowTargeted={FlowTargetSourceDest.source}
-              id="topCountriesSource"
-              isInspect={false}
-              indexPattern={mockIndexPattern}
-              loading={false}
-              loadPage={loadPage}
-              showMorePagesIndicator={getOr(
-                false,
-                'showMorePagesIndicator',
-                mockData.NetworkTopCountries.pageInfo
-              )}
-              totalCount={mockData.NetworkTopCountries.totalCount}
-              type={networkModel.NetworkType.page}
-            />
-          </TestProviders>
-        </MockedProvider>
-      );
-      expect(store.getState().network.page.queries.topCountriesSource.sort).toEqual({
-        direction: 'desc',
-        field: 'bytes_out',
-      });
-
-      wrapper
-        .find('.euiTable thead tr th button')
-        .at(1)
-        .simulate('click');
-
-      wrapper.update();
-
-      expect(store.getState().network.page.queries.topCountriesSource.sort).toEqual({
-        direction: 'asc',
-        field: 'bytes_out',
-      });
-      expect(
-        wrapper
-          .find('.euiTable thead tr th button')
-          .first()
-          .text()
-      ).toEqual('Bytes inClick to sort in ascending order');
-      expect(
-        wrapper
-          .find('.euiTable thead tr th button')
-          .at(1)
-          .text()
-      ).toEqual('Bytes outClick to sort in descending order');
-      expect(
-        wrapper
-          .find('.euiTable thead tr th button')
-          .at(1)
-          .find('svg')
-      ).toBeTruthy();
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/page/network/network_top_countries_table/index.tsx b/x-pack/plugins/siem/public/components/page/network/network_top_countries_table/index.tsx
deleted file mode 100644
index 30f7d5ad823909..00000000000000
--- a/x-pack/plugins/siem/public/components/page/network/network_top_countries_table/index.tsx
+++ /dev/null
@@ -1,191 +0,0 @@
-/*
- * 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 { last } from 'lodash/fp';
-import React, { useCallback, useMemo } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
-import deepEqual from 'fast-deep-equal';
-import { IIndexPattern } from 'src/plugins/data/public';
-
-import { networkActions } from '../../../../store/actions';
-import {
-  Direction,
-  FlowTargetSourceDest,
-  NetworkTopCountriesEdges,
-  NetworkTopTablesFields,
-  NetworkTopTablesSortField,
-} from '../../../../graphql/types';
-import { networkModel, networkSelectors, State } from '../../../../store';
-import { Criteria, ItemsPerRow, PaginatedTable } from '../../../paginated_table';
-
-import { getCountriesColumnsCurated } from './columns';
-import * as i18n from './translations';
-
-interface OwnProps {
-  data: NetworkTopCountriesEdges[];
-  fakeTotalCount: number;
-  flowTargeted: FlowTargetSourceDest;
-  id: string;
-  indexPattern: IIndexPattern;
-  isInspect: boolean;
-  loading: boolean;
-  loadPage: (newActivePage: number) => void;
-  showMorePagesIndicator: boolean;
-  totalCount: number;
-  type: networkModel.NetworkType;
-}
-
-type NetworkTopCountriesTableProps = OwnProps & PropsFromRedux;
-
-const rowItems: ItemsPerRow[] = [
-  {
-    text: i18n.ROWS_5,
-    numberOfRow: 5,
-  },
-  {
-    text: i18n.ROWS_10,
-    numberOfRow: 10,
-  },
-];
-
-export const NetworkTopCountriesTableId = 'networkTopCountries-top-talkers';
-
-const NetworkTopCountriesTableComponent = React.memo<NetworkTopCountriesTableProps>(
-  ({
-    activePage,
-    data,
-    fakeTotalCount,
-    flowTargeted,
-    id,
-    indexPattern,
-    isInspect,
-    limit,
-    loading,
-    loadPage,
-    showMorePagesIndicator,
-    sort,
-    totalCount,
-    type,
-    updateNetworkTable,
-  }) => {
-    let tableType: networkModel.TopCountriesTableType;
-    const headerTitle: string =
-      flowTargeted === FlowTargetSourceDest.source
-        ? i18n.SOURCE_COUNTRIES
-        : i18n.DESTINATION_COUNTRIES;
-
-    if (type === networkModel.NetworkType.page) {
-      tableType =
-        flowTargeted === FlowTargetSourceDest.source
-          ? networkModel.NetworkTableType.topCountriesSource
-          : networkModel.NetworkTableType.topCountriesDestination;
-    } else {
-      tableType =
-        flowTargeted === FlowTargetSourceDest.source
-          ? networkModel.IpDetailsTableType.topCountriesSource
-          : networkModel.IpDetailsTableType.topCountriesDestination;
-    }
-
-    const field =
-      sort.field === NetworkTopTablesFields.bytes_out ||
-      sort.field === NetworkTopTablesFields.bytes_in
-        ? `node.network.${sort.field}`
-        : `node.${flowTargeted}.${sort.field}`;
-
-    const updateLimitPagination = useCallback(
-      newLimit =>
-        updateNetworkTable({
-          networkType: type,
-          tableType,
-          updates: { limit: newLimit },
-        }),
-      [type, updateNetworkTable, tableType]
-    );
-
-    const updateActivePage = useCallback(
-      newPage =>
-        updateNetworkTable({
-          networkType: type,
-          tableType,
-          updates: { activePage: newPage },
-        }),
-      [type, updateNetworkTable, tableType]
-    );
-
-    const onChange = useCallback(
-      (criteria: Criteria) => {
-        if (criteria.sort != null) {
-          const splitField = criteria.sort.field.split('.');
-          const lastField = last(splitField);
-          const newSortDirection =
-            lastField !== sort.field ? Direction.desc : criteria.sort.direction; // sort by desc on init click
-          const newTopCountriesSort: NetworkTopTablesSortField = {
-            field: lastField as NetworkTopTablesFields,
-            direction: newSortDirection as Direction,
-          };
-          if (!deepEqual(newTopCountriesSort, sort)) {
-            updateNetworkTable({
-              networkType: type,
-              tableType,
-              updates: {
-                sort: newTopCountriesSort,
-              },
-            });
-          }
-        }
-      },
-      [type, sort, tableType, updateNetworkTable]
-    );
-
-    const columns = useMemo(
-      () =>
-        getCountriesColumnsCurated(indexPattern, flowTargeted, type, NetworkTopCountriesTableId),
-      [indexPattern, flowTargeted, type]
-    );
-
-    return (
-      <PaginatedTable
-        activePage={activePage}
-        columns={columns}
-        dataTestSubj={`table-${tableType}`}
-        headerCount={totalCount}
-        headerTitle={headerTitle}
-        headerUnit={i18n.UNIT(totalCount)}
-        id={id}
-        isInspect={isInspect}
-        itemsPerRow={rowItems}
-        limit={limit}
-        loading={loading}
-        loadPage={loadPage}
-        onChange={onChange}
-        pageOfItems={data}
-        showMorePagesIndicator={showMorePagesIndicator}
-        sorting={{ field, direction: sort.direction }}
-        totalCount={fakeTotalCount}
-        updateActivePage={updateActivePage}
-        updateLimitPagination={updateLimitPagination}
-      />
-    );
-  }
-);
-
-NetworkTopCountriesTableComponent.displayName = 'NetworkTopCountriesTableComponent';
-
-const makeMapStateToProps = () => {
-  const getTopCountriesSelector = networkSelectors.topCountriesSelector();
-  return (state: State, { type, flowTargeted }: OwnProps) =>
-    getTopCountriesSelector(state, type, flowTargeted);
-};
-
-const mapDispatchToProps = {
-  updateNetworkTable: networkActions.updateNetworkTable,
-};
-
-const connector = connect(makeMapStateToProps, mapDispatchToProps);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-export const NetworkTopCountriesTable = connector(NetworkTopCountriesTableComponent);
diff --git a/x-pack/plugins/siem/public/components/page/network/network_top_countries_table/mock.ts b/x-pack/plugins/siem/public/components/page/network/network_top_countries_table/mock.ts
deleted file mode 100644
index 42b933c7fba6d3..00000000000000
--- a/x-pack/plugins/siem/public/components/page/network/network_top_countries_table/mock.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-/*
- * 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 { NetworkTopCountriesData } from '../../../../graphql/types';
-
-export const mockData: { NetworkTopCountries: NetworkTopCountriesData } = {
-  NetworkTopCountries: {
-    totalCount: 524,
-    edges: [
-      {
-        node: {
-          source: {
-            country: 'DE',
-            destination_ips: 12,
-            flows: 12345,
-            source_ips: 55,
-          },
-          destination: null,
-          network: {
-            bytes_in: 3826633497,
-            bytes_out: 1083495734,
-          },
-        },
-        cursor: {
-          value: '8.8.8.8',
-        },
-      },
-      {
-        node: {
-          source: {
-            flows: 12345,
-            destination_ips: 12,
-            source_ips: 55,
-            country: 'US',
-          },
-          destination: null,
-          network: {
-            bytes_in: 3826633497,
-            bytes_out: 1083495734,
-          },
-        },
-        cursor: {
-          value: '9.9.9.9',
-        },
-      },
-    ],
-    pageInfo: {
-      activePage: 1,
-      fakeTotalCount: 50,
-      showMorePagesIndicator: true,
-    },
-  },
-};
diff --git a/x-pack/plugins/siem/public/components/page/network/network_top_n_flow_table/columns.tsx b/x-pack/plugins/siem/public/components/page/network/network_top_n_flow_table/columns.tsx
deleted file mode 100644
index 3ed377c7ba4b09..00000000000000
--- a/x-pack/plugins/siem/public/components/page/network/network_top_n_flow_table/columns.tsx
+++ /dev/null
@@ -1,251 +0,0 @@
-/*
- * 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 { get } from 'lodash/fp';
-import numeral from '@elastic/numeral';
-import React from 'react';
-
-import { CountryFlag } from '../../../source_destination/country_flag';
-import {
-  AutonomousSystemItem,
-  FlowTargetSourceDest,
-  NetworkTopNFlowEdges,
-  TopNetworkTablesEcsField,
-} from '../../../../graphql/types';
-import { networkModel } from '../../../../store';
-import { DragEffects, DraggableWrapper } from '../../../drag_and_drop/draggable_wrapper';
-import { escapeDataProviderId } from '../../../drag_and_drop/helpers';
-import { getEmptyTagValue } from '../../../empty_value';
-import { IPDetailsLink } from '../../../links';
-import { Columns } from '../../../paginated_table';
-import { IS_OPERATOR } from '../../../timeline/data_providers/data_provider';
-import { Provider } from '../../../timeline/data_providers/provider';
-import * as i18n from './translations';
-import { getRowItemDraggable, getRowItemDraggables } from '../../../tables/helpers';
-import { PreferenceFormattedBytes } from '../../../formatted_bytes';
-
-export type NetworkTopNFlowColumns = [
-  Columns<NetworkTopNFlowEdges>,
-  Columns<NetworkTopNFlowEdges>,
-  Columns<NetworkTopNFlowEdges>,
-  Columns<TopNetworkTablesEcsField['bytes_in']>,
-  Columns<TopNetworkTablesEcsField['bytes_out']>,
-  Columns<NetworkTopNFlowEdges>,
-  Columns<NetworkTopNFlowEdges>
-];
-
-export type NetworkTopNFlowColumnsIpDetails = [
-  Columns<NetworkTopNFlowEdges>,
-  Columns<NetworkTopNFlowEdges>,
-  Columns<NetworkTopNFlowEdges>,
-  Columns<TopNetworkTablesEcsField['bytes_in']>,
-  Columns<TopNetworkTablesEcsField['bytes_out']>,
-  Columns<NetworkTopNFlowEdges>
-];
-
-export const getNetworkTopNFlowColumns = (
-  flowTarget: FlowTargetSourceDest,
-  tableId: string
-): NetworkTopNFlowColumns => [
-  {
-    name: i18n.IP_TITLE,
-    render: ({ node }) => {
-      const ipAttr = `${flowTarget}.ip`;
-      const ip: string | null = get(ipAttr, node);
-      const geoAttr = `${flowTarget}.location.geo.country_iso_code[0]`;
-      const geoAttrName = `${flowTarget}.geo.country_iso_code`;
-      const geo: string | null = get(geoAttr, node);
-      const id = escapeDataProviderId(`${tableId}-table-${flowTarget}-ip-${ip}`);
-
-      if (ip != null) {
-        return (
-          <>
-            <DraggableWrapper
-              key={id}
-              dataProvider={{
-                and: [],
-                enabled: true,
-                id,
-                name: ip,
-                excluded: false,
-                kqlQuery: '',
-                queryMatch: { field: ipAttr, value: ip, operator: IS_OPERATOR },
-              }}
-              render={(dataProvider, _, snapshot) =>
-                snapshot.isDragging ? (
-                  <DragEffects>
-                    <Provider dataProvider={dataProvider} />
-                  </DragEffects>
-                ) : (
-                  <IPDetailsLink ip={ip} flowTarget={flowTarget} />
-                )
-              }
-            />
-
-            {geo && (
-              <DraggableWrapper
-                key={`${id}-${geo}`}
-                dataProvider={{
-                  and: [],
-                  enabled: true,
-                  id: `${id}-${geo}`,
-                  name: geo,
-                  excluded: false,
-                  kqlQuery: '',
-                  queryMatch: { field: geoAttrName, value: geo, operator: IS_OPERATOR },
-                }}
-                render={(dataProvider, _, snapshot) =>
-                  snapshot.isDragging ? (
-                    <DragEffects>
-                      <Provider dataProvider={dataProvider} />
-                    </DragEffects>
-                  ) : (
-                    <>
-                      {' '}
-                      <CountryFlag countryCode={geo} /> {geo}
-                    </>
-                  )
-                }
-              />
-            )}
-          </>
-        );
-      } else {
-        return getEmptyTagValue();
-      }
-    },
-    width: '20%',
-  },
-  {
-    name: i18n.DOMAIN,
-    render: ({ node }) => {
-      const domainAttr = `${flowTarget}.domain`;
-      const ipAttr = `${flowTarget}.ip`;
-      const domains: string[] = get(domainAttr, node);
-      const ip: string | null = get(ipAttr, node);
-
-      if (Array.isArray(domains) && domains.length > 0) {
-        const id = escapeDataProviderId(`${tableId}-table-${ip}`);
-        return getRowItemDraggables({
-          rowItems: domains,
-          attrName: domainAttr,
-          idPrefix: id,
-          displayCount: 1,
-        });
-      } else {
-        return getEmptyTagValue();
-      }
-    },
-    width: '20%',
-  },
-  {
-    name: i18n.AUTONOMOUS_SYSTEM,
-    render: ({ node, cursor: { value: ipAddress } }) => {
-      const asAttr = `${flowTarget}.autonomous_system`;
-      const as: AutonomousSystemItem | null = get(asAttr, node);
-      if (as != null) {
-        const id = escapeDataProviderId(`${tableId}-table-${flowTarget}-ip-${ipAddress}`);
-        return (
-          <>
-            {as.name &&
-              getRowItemDraggable({
-                rowItem: as.name,
-                attrName: `${flowTarget}.as.organization.name`,
-                idPrefix: `${id}-name`,
-              })}
-
-            {as.number && (
-              <>
-                {' '}
-                {getRowItemDraggable({
-                  rowItem: `${as.number}`,
-                  attrName: `${flowTarget}.as.number`,
-                  idPrefix: `${id}-number`,
-                })}
-              </>
-            )}
-          </>
-        );
-      } else {
-        return getEmptyTagValue();
-      }
-    },
-    width: '20%',
-  },
-  {
-    align: 'right',
-    field: 'node.network.bytes_in',
-    name: i18n.BYTES_IN,
-    sortable: true,
-    render: bytes => {
-      if (bytes != null) {
-        return <PreferenceFormattedBytes value={bytes} />;
-      } else {
-        return getEmptyTagValue();
-      }
-    },
-  },
-  {
-    align: 'right',
-    field: 'node.network.bytes_out',
-    name: i18n.BYTES_OUT,
-    sortable: true,
-    render: bytes => {
-      if (bytes != null) {
-        return <PreferenceFormattedBytes value={bytes} />;
-      } else {
-        return getEmptyTagValue();
-      }
-    },
-  },
-  {
-    align: 'right',
-    field: `node.${flowTarget}.flows`,
-    name: i18n.FLOWS,
-    sortable: true,
-    render: flows => {
-      if (flows != null) {
-        return numeral(flows).format('0,000');
-      } else {
-        return getEmptyTagValue();
-      }
-    },
-  },
-  {
-    align: 'right',
-    field: `node.${flowTarget}.${getOppositeField(flowTarget)}_ips`,
-    name: flowTarget === FlowTargetSourceDest.source ? i18n.DESTINATION_IPS : i18n.SOURCE_IPS,
-    sortable: true,
-    render: ips => {
-      if (ips != null) {
-        return numeral(ips).format('0,000');
-      } else {
-        return getEmptyTagValue();
-      }
-    },
-  },
-];
-
-export const getNFlowColumnsCurated = (
-  flowTarget: FlowTargetSourceDest,
-  type: networkModel.NetworkType,
-  tableId: string
-): NetworkTopNFlowColumns | NetworkTopNFlowColumnsIpDetails => {
-  const columns = getNetworkTopNFlowColumns(flowTarget, tableId);
-
-  // Columns to exclude from host details pages
-  if (type === networkModel.NetworkType.details) {
-    columns.pop();
-    return columns;
-  }
-
-  return columns;
-};
-
-const getOppositeField = (flowTarget: FlowTargetSourceDest): FlowTargetSourceDest =>
-  flowTarget === FlowTargetSourceDest.source
-    ? FlowTargetSourceDest.destination
-    : FlowTargetSourceDest.source;
diff --git a/x-pack/plugins/siem/public/components/page/network/network_top_n_flow_table/index.test.tsx b/x-pack/plugins/siem/public/components/page/network/network_top_n_flow_table/index.test.tsx
deleted file mode 100644
index 78e8b15005f431..00000000000000
--- a/x-pack/plugins/siem/public/components/page/network/network_top_n_flow_table/index.test.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-/*
- * 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 { shallow } from 'enzyme';
-import { getOr } from 'lodash/fp';
-import React from 'react';
-import { MockedProvider } from 'react-apollo/test-utils';
-import { Provider as ReduxStoreProvider } from 'react-redux';
-
-import { FlowTargetSourceDest } from '../../../../graphql/types';
-import { apolloClientObservable, mockGlobalState, TestProviders } from '../../../../mock';
-import { useMountAppended } from '../../../../utils/use_mount_appended';
-import { createStore, networkModel, State } from '../../../../store';
-
-import { NetworkTopNFlowTable } from '.';
-import { mockData } from './mock';
-
-describe('NetworkTopNFlow Table Component', () => {
-  const loadPage = jest.fn();
-  const state: State = mockGlobalState;
-
-  let store = createStore(state, apolloClientObservable);
-  const mount = useMountAppended();
-
-  beforeEach(() => {
-    store = createStore(state, apolloClientObservable);
-  });
-
-  describe('rendering', () => {
-    test('it renders the default NetworkTopNFlow table on the Network page', () => {
-      const wrapper = shallow(
-        <ReduxStoreProvider store={store}>
-          <NetworkTopNFlowTable
-            data={mockData.NetworkTopNFlow.edges}
-            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.NetworkTopNFlow.pageInfo)}
-            flowTargeted={FlowTargetSourceDest.source}
-            id="topNFlowSource"
-            isInspect={false}
-            loading={false}
-            loadPage={loadPage}
-            showMorePagesIndicator={getOr(
-              false,
-              'showMorePagesIndicator',
-              mockData.NetworkTopNFlow.pageInfo
-            )}
-            totalCount={mockData.NetworkTopNFlow.totalCount}
-            type={networkModel.NetworkType.page}
-          />
-        </ReduxStoreProvider>
-      );
-
-      expect(wrapper.find('Connect(Component)')).toMatchSnapshot();
-    });
-
-    test('it renders the default NetworkTopNFlow table on the IP Details page', () => {
-      const wrapper = shallow(
-        <ReduxStoreProvider store={store}>
-          <NetworkTopNFlowTable
-            data={mockData.NetworkTopNFlow.edges}
-            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.NetworkTopNFlow.pageInfo)}
-            flowTargeted={FlowTargetSourceDest.source}
-            id="topNFlowSource"
-            isInspect={false}
-            loading={false}
-            loadPage={loadPage}
-            showMorePagesIndicator={getOr(
-              false,
-              'showMorePagesIndicator',
-              mockData.NetworkTopNFlow.pageInfo
-            )}
-            totalCount={mockData.NetworkTopNFlow.totalCount}
-            type={networkModel.NetworkType.details}
-          />
-        </ReduxStoreProvider>
-      );
-
-      expect(wrapper.find('Connect(Component)')).toMatchSnapshot();
-    });
-  });
-
-  describe('Sorting on Table', () => {
-    test('when you click on the column header, you should show the sorting icon', () => {
-      const wrapper = mount(
-        <MockedProvider>
-          <TestProviders store={store}>
-            <NetworkTopNFlowTable
-              data={mockData.NetworkTopNFlow.edges}
-              fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.NetworkTopNFlow.pageInfo)}
-              flowTargeted={FlowTargetSourceDest.source}
-              id="topNFlowSource"
-              isInspect={false}
-              loading={false}
-              loadPage={loadPage}
-              showMorePagesIndicator={getOr(
-                false,
-                'showMorePagesIndicator',
-                mockData.NetworkTopNFlow.pageInfo
-              )}
-              totalCount={mockData.NetworkTopNFlow.totalCount}
-              type={networkModel.NetworkType.page}
-            />
-          </TestProviders>
-        </MockedProvider>
-      );
-      expect(store.getState().network.page.queries.topNFlowSource.sort).toEqual({
-        direction: 'desc',
-        field: 'bytes_out',
-      });
-
-      wrapper
-        .find('.euiTable thead tr th button')
-        .at(1)
-        .simulate('click');
-
-      wrapper.update();
-
-      expect(store.getState().network.page.queries.topNFlowSource.sort).toEqual({
-        direction: 'asc',
-        field: 'bytes_out',
-      });
-      expect(
-        wrapper
-          .find('.euiTable thead tr th button')
-          .first()
-          .text()
-      ).toEqual('Bytes inClick to sort in ascending order');
-      expect(
-        wrapper
-          .find('.euiTable thead tr th button')
-          .at(1)
-          .text()
-      ).toEqual('Bytes outClick to sort in descending order');
-      expect(
-        wrapper
-          .find('.euiTable thead tr th button')
-          .at(1)
-          .find('svg')
-      ).toBeTruthy();
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/page/network/network_top_n_flow_table/index.tsx b/x-pack/plugins/siem/public/components/page/network/network_top_n_flow_table/index.tsx
deleted file mode 100644
index 8e49db04a546cd..00000000000000
--- a/x-pack/plugins/siem/public/components/page/network/network_top_n_flow_table/index.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-/*
- * 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 { last } from 'lodash/fp';
-import React, { useCallback, useMemo } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
-import deepEqual from 'fast-deep-equal';
-
-import { networkActions } from '../../../../store/actions';
-import {
-  Direction,
-  FlowTargetSourceDest,
-  NetworkTopNFlowEdges,
-  NetworkTopTablesFields,
-  NetworkTopTablesSortField,
-} from '../../../../graphql/types';
-import { networkModel, networkSelectors, State } from '../../../../store';
-import { Criteria, ItemsPerRow, PaginatedTable } from '../../../paginated_table';
-
-import { getNFlowColumnsCurated } from './columns';
-import * as i18n from './translations';
-
-interface OwnProps {
-  data: NetworkTopNFlowEdges[];
-  fakeTotalCount: number;
-  flowTargeted: FlowTargetSourceDest;
-  id: string;
-  isInspect: boolean;
-  loading: boolean;
-  loadPage: (newActivePage: number) => void;
-  showMorePagesIndicator: boolean;
-  totalCount: number;
-  type: networkModel.NetworkType;
-}
-
-type NetworkTopNFlowTableProps = OwnProps & PropsFromRedux;
-
-const rowItems: ItemsPerRow[] = [
-  {
-    text: i18n.ROWS_5,
-    numberOfRow: 5,
-  },
-  {
-    text: i18n.ROWS_10,
-    numberOfRow: 10,
-  },
-];
-
-export const NetworkTopNFlowTableId = 'networkTopSourceFlow-top-talkers';
-
-const NetworkTopNFlowTableComponent: React.FC<NetworkTopNFlowTableProps> = ({
-  activePage,
-  data,
-  fakeTotalCount,
-  flowTargeted,
-  id,
-  isInspect,
-  limit,
-  loading,
-  loadPage,
-  showMorePagesIndicator,
-  sort,
-  totalCount,
-  type,
-  updateNetworkTable,
-}) => {
-  const columns = useMemo(
-    () => getNFlowColumnsCurated(flowTargeted, type, NetworkTopNFlowTableId),
-    [flowTargeted, type]
-  );
-
-  let tableType: networkModel.TopNTableType;
-  const headerTitle: string =
-    flowTargeted === FlowTargetSourceDest.source ? i18n.SOURCE_IP : i18n.DESTINATION_IP;
-
-  if (type === networkModel.NetworkType.page) {
-    tableType =
-      flowTargeted === FlowTargetSourceDest.source
-        ? networkModel.NetworkTableType.topNFlowSource
-        : networkModel.NetworkTableType.topNFlowDestination;
-  } else {
-    tableType =
-      flowTargeted === FlowTargetSourceDest.source
-        ? networkModel.IpDetailsTableType.topNFlowSource
-        : networkModel.IpDetailsTableType.topNFlowDestination;
-  }
-
-  const onChange = useCallback(
-    (criteria: Criteria) => {
-      if (criteria.sort != null) {
-        const splitField = criteria.sort.field.split('.');
-        const field = last(splitField);
-        const newSortDirection = field !== sort.field ? Direction.desc : criteria.sort.direction; // sort by desc on init click
-        const newTopNFlowSort: NetworkTopTablesSortField = {
-          field: field as NetworkTopTablesFields,
-          direction: newSortDirection as Direction,
-        };
-        if (!deepEqual(newTopNFlowSort, sort)) {
-          updateNetworkTable({
-            networkType: type,
-            tableType,
-            updates: {
-              sort: newTopNFlowSort,
-            },
-          });
-        }
-      }
-    },
-    [sort, type, tableType, updateNetworkTable]
-  );
-
-  const field =
-    sort.field === NetworkTopTablesFields.bytes_out ||
-    sort.field === NetworkTopTablesFields.bytes_in
-      ? `node.network.${sort.field}`
-      : `node.${flowTargeted}.${sort.field}`;
-
-  const updateActivePage = useCallback(
-    newPage =>
-      updateNetworkTable({
-        networkType: type,
-        tableType,
-        updates: { activePage: newPage },
-      }),
-    [updateNetworkTable, type, tableType]
-  );
-
-  const updateLimitPagination = useCallback(
-    newLimit => updateNetworkTable({ networkType: type, tableType, updates: { limit: newLimit } }),
-    [updateNetworkTable, type, tableType]
-  );
-
-  return (
-    <PaginatedTable
-      activePage={activePage}
-      columns={columns}
-      dataTestSubj={`table-${tableType}`}
-      headerCount={totalCount}
-      headerTitle={headerTitle}
-      headerUnit={i18n.UNIT(totalCount)}
-      id={id}
-      isInspect={isInspect}
-      itemsPerRow={rowItems}
-      limit={limit}
-      loading={loading}
-      loadPage={loadPage}
-      onChange={onChange}
-      pageOfItems={data}
-      showMorePagesIndicator={showMorePagesIndicator}
-      sorting={{ field, direction: sort.direction }}
-      totalCount={fakeTotalCount}
-      updateActivePage={updateActivePage}
-      updateLimitPagination={updateLimitPagination}
-    />
-  );
-};
-
-const makeMapStateToProps = () => {
-  const getTopNFlowSelector = networkSelectors.topNFlowSelector();
-  return (state: State, { type, flowTargeted }: OwnProps) =>
-    getTopNFlowSelector(state, type, flowTargeted);
-};
-
-const mapDispatchToProps = {
-  updateNetworkTable: networkActions.updateNetworkTable,
-};
-
-const connector = connect(makeMapStateToProps, mapDispatchToProps);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-export const NetworkTopNFlowTable = connector(React.memo(NetworkTopNFlowTableComponent));
diff --git a/x-pack/plugins/siem/public/components/page/network/network_top_n_flow_table/mock.ts b/x-pack/plugins/siem/public/components/page/network/network_top_n_flow_table/mock.ts
deleted file mode 100644
index 9ef63bf6d31679..00000000000000
--- a/x-pack/plugins/siem/public/components/page/network/network_top_n_flow_table/mock.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-/*
- * 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 { NetworkTopNFlowData, FlowTargetSourceDest } from '../../../../graphql/types';
-
-export const mockData: { NetworkTopNFlow: NetworkTopNFlowData } = {
-  NetworkTopNFlow: {
-    totalCount: 524,
-    edges: [
-      {
-        node: {
-          source: {
-            autonomous_system: {
-              name: 'Google, Inc',
-              number: 15169,
-            },
-            domain: ['test.domain.com'],
-            flows: 12345,
-            destination_ips: 12,
-            ip: '8.8.8.8',
-            location: {
-              geo: {
-                continent_name: ['North America'],
-                country_name: null,
-                country_iso_code: ['US'],
-                city_name: ['Mountain View'],
-                region_iso_code: ['US-CA'],
-                region_name: ['California'],
-              },
-              flowTarget: FlowTargetSourceDest.source,
-            },
-          },
-          destination: null,
-          network: {
-            bytes_in: 3826633497,
-            bytes_out: 1083495734,
-          },
-        },
-        cursor: {
-          value: '8.8.8.8',
-        },
-      },
-      {
-        node: {
-          source: {
-            autonomous_system: {
-              name: 'TM Net, Internet Service Provider',
-              number: 4788,
-            },
-            domain: ['test.domain.net', 'test.old.domain.net'],
-            flows: 12345,
-            destination_ips: 12,
-            ip: '9.9.9.9',
-            location: {
-              geo: {
-                continent_name: ['Asia'],
-                country_name: null,
-                country_iso_code: ['MY'],
-                city_name: ['Petaling Jaya'],
-                region_iso_code: ['MY-10'],
-                region_name: ['Selangor'],
-              },
-              flowTarget: FlowTargetSourceDest.source,
-            },
-          },
-          destination: null,
-          network: {
-            bytes_in: 3826633497,
-            bytes_out: 1083495734,
-          },
-        },
-        cursor: {
-          value: '9.9.9.9',
-        },
-      },
-    ],
-    pageInfo: {
-      activePage: 1,
-      fakeTotalCount: 50,
-      showMorePagesIndicator: true,
-    },
-  },
-};
diff --git a/x-pack/plugins/siem/public/components/page/network/tls_table/columns.tsx b/x-pack/plugins/siem/public/components/page/network/tls_table/columns.tsx
deleted file mode 100644
index f95475819abc94..00000000000000
--- a/x-pack/plugins/siem/public/components/page/network/tls_table/columns.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-/*
- * 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.
- */
-
-/* eslint-disable react/display-name */
-
-import React from 'react';
-import moment from 'moment';
-import { TlsNode } from '../../../../graphql/types';
-import { Columns } from '../../../paginated_table';
-
-import { getRowItemDraggables, getRowItemDraggable } from '../../../tables/helpers';
-import { LocalizedDateTooltip } from '../../../localized_date_tooltip';
-import { PreferenceFormattedDate } from '../../../formatted_date';
-
-import * as i18n from './translations';
-
-export type TlsColumns = [
-  Columns<TlsNode>,
-  Columns<TlsNode>,
-  Columns<TlsNode['_id']>,
-  Columns<TlsNode>,
-  Columns<TlsNode>
-];
-
-export const getTlsColumns = (tableId: string): TlsColumns => [
-  {
-    field: 'node',
-    name: i18n.ISSUER,
-    truncateText: false,
-    hideForMobile: false,
-    sortable: false,
-    render: ({ _id, issuers }) =>
-      getRowItemDraggables({
-        rowItems: issuers,
-        attrName: 'tls.server.issuer',
-        idPrefix: `${tableId}-${_id}-table-issuers`,
-      }),
-  },
-  {
-    field: 'node',
-    name: i18n.SUBJECT,
-    truncateText: false,
-    hideForMobile: false,
-    sortable: false,
-    render: ({ _id, subjects }) =>
-      getRowItemDraggables({
-        rowItems: subjects,
-        attrName: 'tls.server.subject',
-        idPrefix: `${tableId}-${_id}-table-subjects`,
-      }),
-  },
-  {
-    field: 'node._id',
-    name: i18n.SHA1_FINGERPRINT,
-    truncateText: false,
-    hideForMobile: false,
-    sortable: true,
-    render: sha1 =>
-      getRowItemDraggable({
-        rowItem: sha1,
-        attrName: 'tls.server_certificate.fingerprint.sha1',
-        idPrefix: `${tableId}-${sha1}-table-sha1`,
-      }),
-  },
-  {
-    field: 'node',
-    name: i18n.JA3_FINGERPRINT,
-    truncateText: false,
-    hideForMobile: false,
-    sortable: false,
-    render: ({ _id, ja3 }) =>
-      getRowItemDraggables({
-        rowItems: ja3,
-        attrName: 'tls.fingerprints.ja3.hash',
-        idPrefix: `${tableId}-${_id}-table-ja3`,
-      }),
-  },
-  {
-    field: 'node',
-    name: i18n.VALID_UNTIL,
-    truncateText: false,
-    hideForMobile: false,
-    sortable: false,
-    render: ({ _id, notAfter }) =>
-      getRowItemDraggables({
-        rowItems: notAfter,
-        attrName: 'tls.server_certificate.not_after',
-        idPrefix: `${tableId}-${_id}-table-notAfter`,
-        render: validUntil => (
-          <LocalizedDateTooltip date={moment(new Date(validUntil)).toDate()}>
-            <PreferenceFormattedDate value={new Date(validUntil)} />
-          </LocalizedDateTooltip>
-        ),
-      }),
-  },
-];
diff --git a/x-pack/plugins/siem/public/components/page/network/tls_table/index.test.tsx b/x-pack/plugins/siem/public/components/page/network/tls_table/index.test.tsx
deleted file mode 100644
index 81a472f3175e51..00000000000000
--- a/x-pack/plugins/siem/public/components/page/network/tls_table/index.test.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-/*
- * 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 { shallow } from 'enzyme';
-import { getOr } from 'lodash/fp';
-import React from 'react';
-import { MockedProvider } from 'react-apollo/test-utils';
-import { Provider as ReduxStoreProvider } from 'react-redux';
-
-import { apolloClientObservable, mockGlobalState, TestProviders } from '../../../../mock';
-import { useMountAppended } from '../../../../utils/use_mount_appended';
-import { createStore, networkModel, State } from '../../../../store';
-
-import { TlsTable } from '.';
-import { mockTlsData } from './mock';
-
-describe('Tls Table Component', () => {
-  const loadPage = jest.fn();
-  const state: State = mockGlobalState;
-
-  let store = createStore(state, apolloClientObservable);
-  const mount = useMountAppended();
-
-  beforeEach(() => {
-    store = createStore(state, apolloClientObservable);
-  });
-
-  describe('Rendering', () => {
-    test('it renders the default Domains table', () => {
-      const wrapper = shallow(
-        <ReduxStoreProvider store={store}>
-          <TlsTable
-            data={mockTlsData.edges}
-            fakeTotalCount={getOr(50, 'fakeTotalCount', mockTlsData.pageInfo)}
-            id="tls"
-            isInspect={false}
-            loading={false}
-            loadPage={loadPage}
-            showMorePagesIndicator={getOr(false, 'showMorePagesIndicator', mockTlsData.pageInfo)}
-            totalCount={1}
-            type={networkModel.NetworkType.details}
-          />
-        </ReduxStoreProvider>
-      );
-
-      expect(wrapper.find('Connect(TlsTableComponent)')).toMatchSnapshot();
-    });
-  });
-
-  describe('Sorting on Table', () => {
-    test('when you click on the column header, you should show the sorting icon', () => {
-      const wrapper = mount(
-        <MockedProvider>
-          <TestProviders store={store}>
-            <TlsTable
-              data={mockTlsData.edges}
-              fakeTotalCount={getOr(50, 'fakeTotalCount', mockTlsData.pageInfo)}
-              id="tls"
-              isInspect={false}
-              loading={false}
-              loadPage={loadPage}
-              showMorePagesIndicator={getOr(false, 'showMorePagesIndicator', mockTlsData.pageInfo)}
-              totalCount={1}
-              type={networkModel.NetworkType.details}
-            />
-          </TestProviders>
-        </MockedProvider>
-      );
-      expect(store.getState().network.details.queries!.tls.sort).toEqual({
-        direction: 'desc',
-        field: '_id',
-      });
-
-      wrapper
-        .find('.euiTable thead tr th button')
-        .first()
-        .simulate('click');
-
-      wrapper.update();
-
-      expect(store.getState().network.details.queries!.tls.sort).toEqual({
-        direction: 'asc',
-        field: '_id',
-      });
-
-      expect(
-        wrapper
-          .find('.euiTable thead tr th button')
-          .first()
-          .text()
-      ).toEqual('SHA1 fingerprintClick to sort in descending order');
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/page/network/tls_table/index.tsx b/x-pack/plugins/siem/public/components/page/network/tls_table/index.tsx
deleted file mode 100644
index d1512699cc709c..00000000000000
--- a/x-pack/plugins/siem/public/components/page/network/tls_table/index.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-/*
- * 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, { useCallback, useMemo } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
-import deepEqual from 'fast-deep-equal';
-
-import { networkActions } from '../../../../store/network';
-import { TlsEdges, TlsSortField, TlsFields, Direction } from '../../../../graphql/types';
-import { networkModel, networkSelectors, State } from '../../../../store';
-import { Criteria, ItemsPerRow, PaginatedTable, SortingBasicTable } from '../../../paginated_table';
-import { getTlsColumns } from './columns';
-import * as i18n from './translations';
-
-interface OwnProps {
-  data: TlsEdges[];
-  fakeTotalCount: number;
-  id: string;
-  isInspect: boolean;
-  loading: boolean;
-  loadPage: (newActivePage: number) => void;
-  showMorePagesIndicator: boolean;
-  totalCount: number;
-  type: networkModel.NetworkType;
-}
-
-type TlsTableProps = OwnProps & PropsFromRedux;
-
-const rowItems: ItemsPerRow[] = [
-  {
-    text: i18n.ROWS_5,
-    numberOfRow: 5,
-  },
-  {
-    text: i18n.ROWS_10,
-    numberOfRow: 10,
-  },
-];
-
-export const tlsTableId = 'tls-table';
-
-const TlsTableComponent = React.memo<TlsTableProps>(
-  ({
-    activePage,
-    data,
-    fakeTotalCount,
-    id,
-    isInspect,
-    limit,
-    loading,
-    loadPage,
-    showMorePagesIndicator,
-    sort,
-    totalCount,
-    type,
-    updateNetworkTable,
-  }) => {
-    const tableType: networkModel.TopTlsTableType =
-      type === networkModel.NetworkType.page
-        ? networkModel.NetworkTableType.tls
-        : networkModel.IpDetailsTableType.tls;
-
-    const updateLimitPagination = useCallback(
-      newLimit =>
-        updateNetworkTable({
-          networkType: type,
-          tableType,
-          updates: { limit: newLimit },
-        }),
-      [type, updateNetworkTable, tableType]
-    );
-
-    const updateActivePage = useCallback(
-      newPage =>
-        updateNetworkTable({
-          networkType: type,
-          tableType,
-          updates: { activePage: newPage },
-        }),
-      [type, updateNetworkTable, tableType]
-    );
-
-    const onChange = useCallback(
-      (criteria: Criteria) => {
-        if (criteria.sort != null) {
-          const splitField = criteria.sort.field.split('.');
-          const newTlsSort: TlsSortField = {
-            field: getSortFromString(splitField[splitField.length - 1]),
-            direction: criteria.sort.direction as Direction,
-          };
-          if (!deepEqual(newTlsSort, sort)) {
-            updateNetworkTable({
-              networkType: type,
-              tableType,
-              updates: { sort: newTlsSort },
-            });
-          }
-        }
-      },
-      [sort, type, tableType, updateNetworkTable]
-    );
-
-    const columns = useMemo(() => getTlsColumns(tlsTableId), [tlsTableId]);
-
-    return (
-      <PaginatedTable
-        activePage={activePage}
-        columns={columns}
-        dataTestSubj={`table-${tableType}`}
-        showMorePagesIndicator={showMorePagesIndicator}
-        headerCount={totalCount}
-        headerTitle={i18n.TRANSPORT_LAYER_SECURITY}
-        headerUnit={i18n.UNIT(totalCount)}
-        id={id}
-        isInspect={isInspect}
-        itemsPerRow={rowItems}
-        limit={limit}
-        loading={loading}
-        loadPage={loadPage}
-        onChange={onChange}
-        pageOfItems={data}
-        sorting={getSortField(sort)}
-        totalCount={fakeTotalCount}
-        updateActivePage={updateActivePage}
-        updateLimitPagination={updateLimitPagination}
-      />
-    );
-  }
-);
-
-TlsTableComponent.displayName = 'TlsTableComponent';
-
-const makeMapStateToProps = () => {
-  const getTlsSelector = networkSelectors.tlsSelector();
-  return (state: State, { type }: OwnProps) => getTlsSelector(state, type);
-};
-
-const mapDispatchToProps = {
-  updateNetworkTable: networkActions.updateNetworkTable,
-};
-
-const connector = connect(makeMapStateToProps, mapDispatchToProps);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-export const TlsTable = connector(TlsTableComponent);
-
-const getSortField = (sortField: TlsSortField): SortingBasicTable => ({
-  field: `node.${sortField.field}`,
-  direction: sortField.direction,
-});
-
-const getSortFromString = (sortField: string): TlsFields => {
-  switch (sortField) {
-    case '_id':
-      return TlsFields._id;
-    default:
-      return TlsFields._id;
-  }
-};
diff --git a/x-pack/plugins/siem/public/components/page/network/tls_table/mock.ts b/x-pack/plugins/siem/public/components/page/network/tls_table/mock.ts
deleted file mode 100644
index 453bd8fc84dfae..00000000000000
--- a/x-pack/plugins/siem/public/components/page/network/tls_table/mock.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-/*
- * 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 { TlsData } from '../../../../graphql/types';
-
-export const mockTlsData: TlsData = {
-  totalCount: 2,
-  edges: [
-    {
-      node: {
-        _id: '2fe3bdf168af35b9e0ce5dc583bab007c40d47de',
-        subjects: ['*.elastic.co'],
-        ja3: ['7851693188210d3b271aa1713d8c68c2', 'fb4726d465c5f28b84cd6d14cedd13a7'],
-        issuers: ['DigiCert SHA2 Secure Server CA'],
-        notAfter: ['2021-04-22T12:00:00.000Z'],
-      },
-      cursor: {
-        value: '2fe3bdf168af35b9e0ce5dc583bab007c40d47de',
-      },
-    },
-    {
-      node: {
-        _id: '61749734b3246f1584029deb4f5276c64da00ada',
-        subjects: ['api.snapcraft.io'],
-        ja3: ['839868ad711dc55bde0d37a87f14740d'],
-        issuers: ['DigiCert SHA2 Secure Server CA'],
-        notAfter: ['2019-05-22T12:00:00.000Z'],
-      },
-      cursor: {
-        value: '61749734b3246f1584029deb4f5276c64da00ada',
-      },
-    },
-    {
-      node: {
-        _id: '6560d3b7dd001c989b85962fa64beb778cdae47a',
-        subjects: ['changelogs.ubuntu.com'],
-        ja3: ['da12c94da8021bbaf502907ad086e7bc'],
-        issuers: ["Let's Encrypt Authority X3"],
-        notAfter: ['2019-06-27T01:09:59.000Z'],
-      },
-      cursor: {
-        value: '6560d3b7dd001c989b85962fa64beb778cdae47a',
-      },
-    },
-  ],
-  pageInfo: {
-    activePage: 1,
-    fakeTotalCount: 50,
-    showMorePagesIndicator: true,
-  },
-};
diff --git a/x-pack/plugins/siem/public/components/page/network/users_table/columns.tsx b/x-pack/plugins/siem/public/components/page/network/users_table/columns.tsx
deleted file mode 100644
index b732ac5bfd5fae..00000000000000
--- a/x-pack/plugins/siem/public/components/page/network/users_table/columns.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-/*
- * 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 { FlowTarget, UsersItem } from '../../../../graphql/types';
-import { defaultToEmptyTag } from '../../../empty_value';
-import { Columns } from '../../../paginated_table';
-
-import * as i18n from './translations';
-import { getRowItemDraggables, getRowItemDraggable } from '../../../tables/helpers';
-
-export type UsersColumns = [
-  Columns<UsersItem['name']>,
-  Columns<UsersItem['id']>,
-  Columns<UsersItem['groupName']>,
-  Columns<UsersItem['groupId']>,
-  Columns<UsersItem['count']>
-];
-
-export const getUsersColumns = (flowTarget: FlowTarget, tableId: string): UsersColumns => [
-  {
-    field: 'node.user.name',
-    name: i18n.USER_NAME,
-    truncateText: false,
-    hideForMobile: false,
-    sortable: true,
-    render: userName =>
-      getRowItemDraggable({
-        rowItem: userName,
-        attrName: 'user.name',
-        idPrefix: `${tableId}-table-${flowTarget}-user`,
-      }),
-  },
-  {
-    field: 'node.user.id',
-    name: i18n.USER_ID,
-    truncateText: false,
-    hideForMobile: false,
-    sortable: false,
-    render: userIds =>
-      getRowItemDraggables({
-        rowItems: userIds,
-        attrName: 'user.id',
-        idPrefix: `${tableId}-table-${flowTarget}`,
-      }),
-  },
-  {
-    field: 'node.user.groupName',
-    name: i18n.GROUP_NAME,
-    truncateText: false,
-    hideForMobile: false,
-    sortable: false,
-    render: groupNames =>
-      getRowItemDraggables({
-        rowItems: groupNames,
-        attrName: 'user.group.name',
-        idPrefix: `${tableId}-table-${flowTarget}`,
-      }),
-  },
-  {
-    field: 'node.user.groupId',
-    name: i18n.GROUP_ID,
-    truncateText: false,
-    hideForMobile: false,
-    sortable: false,
-    render: groupId =>
-      getRowItemDraggables({
-        rowItems: groupId,
-        attrName: 'user.group.id',
-        idPrefix: `${tableId}-table-${flowTarget}`,
-      }),
-  },
-  {
-    align: 'right',
-    field: 'node.user.count',
-    name: i18n.DOCUMENT_COUNT,
-    truncateText: false,
-    hideForMobile: false,
-    sortable: true,
-    render: docCount => defaultToEmptyTag(docCount),
-  },
-];
diff --git a/x-pack/plugins/siem/public/components/page/network/users_table/index.test.tsx b/x-pack/plugins/siem/public/components/page/network/users_table/index.test.tsx
deleted file mode 100644
index 8dc3704a089ea8..00000000000000
--- a/x-pack/plugins/siem/public/components/page/network/users_table/index.test.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-/*
- * 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 { shallow } from 'enzyme';
-import { getOr } from 'lodash/fp';
-import React from 'react';
-import { MockedProvider } from 'react-apollo/test-utils';
-import { Provider as ReduxStoreProvider } from 'react-redux';
-
-import { FlowTarget } from '../../../../graphql/types';
-import { apolloClientObservable, mockGlobalState, TestProviders } from '../../../../mock';
-import { useMountAppended } from '../../../../utils/use_mount_appended';
-import { createStore, networkModel, State } from '../../../../store';
-
-import { UsersTable } from '.';
-import { mockUsersData } from './mock';
-
-describe('Users Table Component', () => {
-  const loadPage = jest.fn();
-  const state: State = mockGlobalState;
-
-  let store = createStore(state, apolloClientObservable);
-  const mount = useMountAppended();
-
-  beforeEach(() => {
-    store = createStore(state, apolloClientObservable);
-  });
-
-  describe('Rendering', () => {
-    test('it renders the default Users table', () => {
-      const wrapper = shallow(
-        <ReduxStoreProvider store={store}>
-          <UsersTable
-            data={mockUsersData.edges}
-            flowTarget={FlowTarget.source}
-            fakeTotalCount={getOr(50, 'fakeTotalCount', mockUsersData.pageInfo)}
-            id="user"
-            isInspect={false}
-            loading={false}
-            loadPage={loadPage}
-            showMorePagesIndicator={getOr(false, 'showMorePagesIndicator', mockUsersData.pageInfo)}
-            totalCount={1}
-            type={networkModel.NetworkType.details}
-          />
-        </ReduxStoreProvider>
-      );
-
-      expect(wrapper.find('Connect(UsersTableComponent)')).toMatchSnapshot();
-    });
-  });
-
-  describe('Sorting on Table', () => {
-    test('when you click on the column header, you should show the sorting icon', () => {
-      const wrapper = mount(
-        <MockedProvider>
-          <TestProviders store={store}>
-            <UsersTable
-              data={mockUsersData.edges}
-              flowTarget={FlowTarget.source}
-              fakeTotalCount={getOr(50, 'fakeTotalCount', mockUsersData.pageInfo)}
-              id="user"
-              isInspect={false}
-              loading={false}
-              loadPage={loadPage}
-              showMorePagesIndicator={getOr(
-                false,
-                'showMorePagesIndicator',
-                mockUsersData.pageInfo
-              )}
-              totalCount={1}
-              type={networkModel.NetworkType.details}
-            />
-          </TestProviders>
-        </MockedProvider>
-      );
-      expect(store.getState().network.details.queries!.users.sort).toEqual({
-        direction: 'asc',
-        field: 'name',
-      });
-
-      wrapper
-        .find('.euiTable thead tr th button')
-        .first()
-        .simulate('click');
-
-      wrapper.update();
-
-      expect(store.getState().network.details.queries!.users.sort).toEqual({
-        direction: 'desc',
-        field: 'name',
-      });
-      expect(
-        wrapper
-          .find('.euiTable thead tr th button')
-          .first()
-          .text()
-      ).toEqual('UserClick to sort in ascending order');
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/page/network/users_table/index.tsx b/x-pack/plugins/siem/public/components/page/network/users_table/index.tsx
deleted file mode 100644
index b585b835f31cde..00000000000000
--- a/x-pack/plugins/siem/public/components/page/network/users_table/index.tsx
+++ /dev/null
@@ -1,187 +0,0 @@
-/*
- * 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, { useCallback, useMemo } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
-import deepEqual from 'fast-deep-equal';
-
-import { networkActions } from '../../../../store/network';
-import {
-  Direction,
-  FlowTarget,
-  UsersEdges,
-  UsersFields,
-  UsersSortField,
-} from '../../../../graphql/types';
-import { networkModel, networkSelectors, State } from '../../../../store';
-import { Criteria, ItemsPerRow, PaginatedTable, SortingBasicTable } from '../../../paginated_table';
-
-import { getUsersColumns } from './columns';
-import * as i18n from './translations';
-import { assertUnreachable } from '../../../../lib/helpers';
-const tableType = networkModel.IpDetailsTableType.users;
-
-interface OwnProps {
-  data: UsersEdges[];
-  flowTarget: FlowTarget;
-  fakeTotalCount: number;
-  id: string;
-  isInspect: boolean;
-  loading: boolean;
-  loadPage: (newActivePage: number) => void;
-  showMorePagesIndicator: boolean;
-  totalCount: number;
-  type: networkModel.NetworkType;
-}
-
-type UsersTableProps = OwnProps & PropsFromRedux;
-
-const rowItems: ItemsPerRow[] = [
-  {
-    text: i18n.ROWS_5,
-    numberOfRow: 5,
-  },
-  {
-    text: i18n.ROWS_10,
-    numberOfRow: 10,
-  },
-];
-
-export const usersTableId = 'users-table';
-
-const UsersTableComponent = React.memo<UsersTableProps>(
-  ({
-    activePage,
-    data,
-    fakeTotalCount,
-    flowTarget,
-    id,
-    isInspect,
-    limit,
-    loading,
-    loadPage,
-    showMorePagesIndicator,
-    totalCount,
-    type,
-    updateNetworkTable,
-    sort,
-  }) => {
-    const updateLimitPagination = useCallback(
-      newLimit =>
-        updateNetworkTable({
-          networkType: type,
-          tableType,
-          updates: { limit: newLimit },
-        }),
-      [type, updateNetworkTable]
-    );
-
-    const updateActivePage = useCallback(
-      newPage =>
-        updateNetworkTable({
-          networkType: type,
-          tableType,
-          updates: { activePage: newPage },
-        }),
-      [type, updateNetworkTable]
-    );
-
-    const onChange = useCallback(
-      (criteria: Criteria) => {
-        if (criteria.sort != null) {
-          const splitField = criteria.sort.field.split('.');
-          const newUsersSort: UsersSortField = {
-            field: getSortFromString(splitField[splitField.length - 1]),
-            direction: criteria.sort.direction as Direction,
-          };
-          if (!deepEqual(newUsersSort, sort)) {
-            updateNetworkTable({
-              networkType: type,
-              tableType,
-              updates: { sort: newUsersSort },
-            });
-          }
-        }
-      },
-      [sort, type, updateNetworkTable]
-    );
-
-    const columns = useMemo(() => getUsersColumns(flowTarget, usersTableId), [
-      flowTarget,
-      usersTableId,
-    ]);
-
-    return (
-      <PaginatedTable
-        activePage={activePage}
-        columns={columns}
-        dataTestSubj={`table-${tableType}`}
-        showMorePagesIndicator={showMorePagesIndicator}
-        headerCount={totalCount}
-        headerTitle={i18n.USERS}
-        headerUnit={i18n.UNIT(totalCount)}
-        id={id}
-        isInspect={isInspect}
-        itemsPerRow={rowItems}
-        limit={limit}
-        loading={loading}
-        loadPage={loadPage}
-        onChange={onChange}
-        pageOfItems={data}
-        sorting={getSortField(sort)}
-        totalCount={fakeTotalCount}
-        updateActivePage={updateActivePage}
-        updateLimitPagination={updateLimitPagination}
-      />
-    );
-  }
-);
-
-UsersTableComponent.displayName = 'UsersTableComponent';
-
-const makeMapStateToProps = () => {
-  const getUsersSelector = networkSelectors.usersSelector();
-  return (state: State) => ({
-    ...getUsersSelector(state),
-  });
-};
-
-const mapDispatchToProps = {
-  updateNetworkTable: networkActions.updateNetworkTable,
-};
-
-const connector = connect(makeMapStateToProps, mapDispatchToProps);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-export const UsersTable = connector(UsersTableComponent);
-
-const getSortField = (sortField: UsersSortField): SortingBasicTable => {
-  switch (sortField.field) {
-    case UsersFields.name:
-      return {
-        field: `node.user.${sortField.field}`,
-        direction: sortField.direction,
-      };
-    case UsersFields.count:
-      return {
-        field: `node.user.${sortField.field}`,
-        direction: sortField.direction,
-      };
-  }
-  return assertUnreachable(sortField.field);
-};
-
-const getSortFromString = (sortField: string): UsersFields => {
-  switch (sortField) {
-    case UsersFields.name.valueOf():
-      return UsersFields.name;
-    case UsersFields.count.valueOf():
-      return UsersFields.count;
-    default:
-      return UsersFields.name;
-  }
-};
diff --git a/x-pack/plugins/siem/public/components/page/network/users_table/mock.ts b/x-pack/plugins/siem/public/components/page/network/users_table/mock.ts
deleted file mode 100644
index 9a5de66a91a3ec..00000000000000
--- a/x-pack/plugins/siem/public/components/page/network/users_table/mock.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-/*
- * 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 { UsersData } from '../../../../graphql/types';
-
-export const mockUsersData: UsersData = {
-  edges: [
-    {
-      node: {
-        _id: '_apt',
-        user: {
-          id: ['104'],
-          name: '_apt',
-          groupId: ['65534'],
-          groupName: ['nogroup'],
-          count: 10,
-        },
-      },
-      cursor: {
-        value: '_apt',
-        tiebreaker: null,
-      },
-    },
-    {
-      node: {
-        _id: 'root',
-        user: {
-          id: ['0'],
-          name: 'root',
-          groupId: ['116', '0'],
-          groupName: ['Debian-exim', 'root'],
-          count: 108,
-        },
-      },
-      cursor: {
-        value: 'root',
-        tiebreaker: null,
-      },
-    },
-    {
-      node: {
-        _id: 'systemd-resolve',
-        user: {
-          id: ['102'],
-          name: 'systemd-resolve',
-          groupId: [],
-          groupName: [],
-          count: 4,
-        },
-      },
-      cursor: {
-        value: 'systemd-resolve',
-        tiebreaker: null,
-      },
-    },
-  ],
-  totalCount: 3,
-  pageInfo: {
-    activePage: 1,
-    fakeTotalCount: 3,
-    showMorePagesIndicator: true,
-  },
-};
diff --git a/x-pack/plugins/siem/public/components/page/overview/overview_host/index.test.tsx b/x-pack/plugins/siem/public/components/page/overview/overview_host/index.test.tsx
deleted file mode 100644
index 568cf032fb01ce..00000000000000
--- a/x-pack/plugins/siem/public/components/page/overview/overview_host/index.test.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-/*
- * 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 { cloneDeep } from 'lodash/fp';
-import { mount } from 'enzyme';
-import React from 'react';
-
-import { apolloClientObservable, mockGlobalState, TestProviders } from '../../../../mock';
-
-import { OverviewHost } from '.';
-import { createStore, State } from '../../../../store';
-import { overviewHostQuery } from '../../../../containers/overview/overview_host/index.gql_query';
-import { GetOverviewHostQuery } from '../../../../graphql/types';
-import { MockedProvider } from 'react-apollo/test-utils';
-import { wait } from '../../../../lib/helpers';
-
-jest.mock('../../../../lib/kibana');
-
-const startDate = 1579553397080;
-const endDate = 1579639797080;
-
-interface MockedProvidedQuery {
-  request: {
-    query: GetOverviewHostQuery.Query;
-    fetchPolicy: string;
-    variables: GetOverviewHostQuery.Variables;
-  };
-  result: {
-    data: {
-      source: unknown;
-    };
-  };
-}
-
-const mockOpenTimelineQueryResults: MockedProvidedQuery[] = [
-  {
-    request: {
-      query: overviewHostQuery,
-      fetchPolicy: 'cache-and-network',
-      variables: {
-        sourceId: 'default',
-        timerange: { interval: '12h', from: startDate, to: endDate },
-        filterQuery: undefined,
-        defaultIndex: [
-          'apm-*-transaction*',
-          'auditbeat-*',
-          'endgame-*',
-          'filebeat-*',
-          'packetbeat-*',
-          'winlogbeat-*',
-        ],
-        inspect: false,
-      },
-    },
-    result: {
-      data: {
-        source: {
-          id: 'default',
-          OverviewHost: {
-            auditbeatAuditd: 1,
-            auditbeatFIM: 1,
-            auditbeatLogin: 1,
-            auditbeatPackage: 1,
-            auditbeatProcess: 1,
-            auditbeatUser: 1,
-            endgameDns: 1,
-            endgameFile: 1,
-            endgameImageLoad: 1,
-            endgameNetwork: 1,
-            endgameProcess: 1,
-            endgameRegistry: 1,
-            endgameSecurity: 1,
-            filebeatSystemModule: 1,
-            winlogbeatSecurity: 1,
-            winlogbeatMWSysmonOperational: 1,
-          },
-        },
-      },
-    },
-  },
-];
-
-describe('OverviewHost', () => {
-  const state: State = mockGlobalState;
-
-  let store = createStore(state, apolloClientObservable);
-
-  beforeEach(() => {
-    const myState = cloneDeep(state);
-    store = createStore(myState, apolloClientObservable);
-  });
-
-  test('it renders the expected widget title', () => {
-    const wrapper = mount(
-      <TestProviders store={store}>
-        <OverviewHost endDate={endDate} setQuery={jest.fn()} startDate={startDate} />
-      </TestProviders>
-    );
-
-    expect(
-      wrapper
-        .find('[data-test-subj="header-section-title"]')
-        .first()
-        .text()
-    ).toEqual('Host events');
-  });
-
-  test('it renders an empty subtitle while loading', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <OverviewHost endDate={endDate} setQuery={jest.fn()} startDate={startDate} />
-      </TestProviders>
-    );
-
-    expect(
-      wrapper
-        .find('[data-test-subj="header-panel-subtitle"]')
-        .first()
-        .text()
-    ).toEqual('');
-  });
-
-  test('it renders the expected event count in the subtitle after loading events', async () => {
-    const wrapper = mount(
-      <TestProviders>
-        <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
-          <OverviewHost endDate={endDate} setQuery={jest.fn()} startDate={startDate} />
-        </MockedProvider>
-      </TestProviders>
-    );
-    await wait();
-    wrapper.update();
-
-    expect(
-      wrapper
-        .find('[data-test-subj="header-panel-subtitle"]')
-        .first()
-        .text()
-    ).toEqual('Showing: 16 events');
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/page/overview/overview_host/index.tsx b/x-pack/plugins/siem/public/components/page/overview/overview_host/index.tsx
deleted file mode 100644
index 52c142ceff4805..00000000000000
--- a/x-pack/plugins/siem/public/components/page/overview/overview_host/index.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-/*
- * 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 { isEmpty } from 'lodash/fp';
-import { EuiButton, EuiFlexItem, EuiPanel } from '@elastic/eui';
-import numeral from '@elastic/numeral';
-import { FormattedMessage } from '@kbn/i18n/react';
-import React, { useMemo } from 'react';
-
-import { DEFAULT_NUMBER_FORMAT } from '../../../../../common/constants';
-import { ESQuery } from '../../../../../common/typed_json';
-import {
-  ID as OverviewHostQueryId,
-  OverviewHostQuery,
-} from '../../../../containers/overview/overview_host';
-import { HeaderSection } from '../../../header_section';
-import { useUiSetting$ } from '../../../../lib/kibana';
-import { getHostsUrl } from '../../../link_to';
-import { getOverviewHostStats, OverviewHostStats } from '../overview_host_stats';
-import { manageQuery } from '../../../page/manage_query';
-import { inputsModel } from '../../../../store/inputs';
-import { InspectButtonContainer } from '../../../inspect';
-import { useGetUrlSearch } from '../../../navigation/use_get_url_search';
-import { navTabs } from '../../../../pages/home/home_navigations';
-
-export interface OwnProps {
-  startDate: number;
-  endDate: number;
-  filterQuery?: ESQuery | string;
-  setQuery: ({
-    id,
-    inspect,
-    loading,
-    refetch,
-  }: {
-    id: string;
-    inspect: inputsModel.InspectQuery | null;
-    loading: boolean;
-    refetch: inputsModel.Refetch;
-  }) => void;
-}
-
-const OverviewHostStatsManage = manageQuery(OverviewHostStats);
-export type OverviewHostProps = OwnProps;
-
-const OverviewHostComponent: React.FC<OverviewHostProps> = ({
-  endDate,
-  filterQuery,
-  startDate,
-  setQuery,
-}) => {
-  const [defaultNumberFormat] = useUiSetting$<string>(DEFAULT_NUMBER_FORMAT);
-  const urlSearch = useGetUrlSearch(navTabs.hosts);
-  const hostPageButton = useMemo(
-    () => (
-      <EuiButton href={getHostsUrl(urlSearch)}>
-        <FormattedMessage id="xpack.siem.overview.hostsAction" defaultMessage="View hosts" />
-      </EuiButton>
-    ),
-    [urlSearch]
-  );
-  return (
-    <EuiFlexItem>
-      <InspectButtonContainer>
-        <EuiPanel>
-          <OverviewHostQuery
-            data-test-subj="overview-host-query"
-            endDate={endDate}
-            filterQuery={filterQuery}
-            sourceId="default"
-            startDate={startDate}
-          >
-            {({ overviewHost, loading, id, inspect, refetch }) => {
-              const hostEventsCount = getOverviewHostStats(overviewHost).reduce(
-                (total, stat) => total + stat.count,
-                0
-              );
-              const formattedHostEventsCount = numeral(hostEventsCount).format(defaultNumberFormat);
-
-              return (
-                <>
-                  <HeaderSection
-                    id={OverviewHostQueryId}
-                    subtitle={
-                      !isEmpty(overviewHost) ? (
-                        <FormattedMessage
-                          defaultMessage="Showing: {formattedHostEventsCount} {hostEventsCount, plural, one {event} other {events}}"
-                          id="xpack.siem.overview.overviewHost.hostsSubtitle"
-                          values={{
-                            formattedHostEventsCount,
-                            hostEventsCount,
-                          }}
-                        />
-                      ) : (
-                        <>{''}</>
-                      )
-                    }
-                    title={
-                      <FormattedMessage
-                        id="xpack.siem.overview.hostsTitle"
-                        defaultMessage="Host events"
-                      />
-                    }
-                  >
-                    {hostPageButton}
-                  </HeaderSection>
-
-                  <OverviewHostStatsManage
-                    loading={loading}
-                    data={overviewHost}
-                    setQuery={setQuery}
-                    id={id}
-                    inspect={inspect}
-                    refetch={refetch}
-                  />
-                </>
-              );
-            }}
-          </OverviewHostQuery>
-        </EuiPanel>
-      </InspectButtonContainer>
-    </EuiFlexItem>
-  );
-};
-
-export const OverviewHost = React.memo(OverviewHostComponent);
diff --git a/x-pack/plugins/siem/public/components/page/overview/overview_host_stats/index.test.tsx b/x-pack/plugins/siem/public/components/page/overview/overview_host_stats/index.test.tsx
deleted file mode 100644
index 4240ea441284cf..00000000000000
--- a/x-pack/plugins/siem/public/components/page/overview/overview_host_stats/index.test.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-/*
- * 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 { mount, shallow } from 'enzyme';
-import React from 'react';
-
-import { OverviewHostStats } from '.';
-import { mockData } from './mock';
-import { TestProviders } from '../../../../mock/test_providers';
-
-describe('Overview Host Stat Data', () => {
-  describe('rendering', () => {
-    test('it renders the default OverviewHostStats', () => {
-      const wrapper = shallow(<OverviewHostStats data={mockData.OverviewHost} loading={false} />);
-      expect(wrapper).toMatchSnapshot();
-    });
-  });
-  describe('loading', () => {
-    test('it does NOT show loading indicator when loading is false', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <OverviewHostStats data={mockData.OverviewHost} loading={false} />
-        </TestProviders>
-      );
-
-      // click the accordion to expand it
-      wrapper
-        .find('button')
-        .first()
-        .simulate('click');
-      wrapper.update();
-
-      expect(
-        wrapper
-          .find('[data-test-subj="host-stat-auditbeatAuditd"]')
-          .first()
-          .find('[data-test-subj="stat-value-loading-spinner"]')
-          .first()
-          .exists()
-      ).toBe(false);
-    });
-    test('it shows loading indicator when loading is true', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <OverviewHostStats data={mockData.OverviewHost} loading={true} />
-        </TestProviders>
-      );
-
-      // click the accordion to expand it
-      wrapper
-        .find('button')
-        .first()
-        .simulate('click');
-      wrapper.update();
-
-      expect(
-        wrapper
-          .find('[data-test-subj="host-stat-auditbeatAuditd"]')
-          .first()
-          .find('[data-test-subj="stat-value-loading-spinner"]')
-          .first()
-          .exists()
-      ).toBe(true);
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/page/overview/overview_host_stats/index.tsx b/x-pack/plugins/siem/public/components/page/overview/overview_host_stats/index.tsx
deleted file mode 100644
index 4756e4c8265746..00000000000000
--- a/x-pack/plugins/siem/public/components/page/overview/overview_host_stats/index.tsx
+++ /dev/null
@@ -1,269 +0,0 @@
-/*
- * 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 { EuiAccordion, EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiText } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n/react';
-import React from 'react';
-import styled from 'styled-components';
-
-import { OverviewHostData } from '../../../../graphql/types';
-import { FormattedStat, StatGroup } from '../types';
-import { StatValue } from '../stat_value';
-
-interface OverviewHostProps {
-  data: OverviewHostData;
-  loading: boolean;
-}
-
-export const getOverviewHostStats = (data: OverviewHostData): FormattedStat[] => [
-  {
-    count: data.auditbeatAuditd ?? 0,
-    title: <FormattedMessage id="xpack.siem.overview.auditBeatAuditTitle" defaultMessage="Audit" />,
-    id: 'auditbeatAuditd',
-  },
-  {
-    count: data.auditbeatFIM ?? 0,
-    title: (
-      <FormattedMessage
-        id="xpack.siem.overview.auditBeatFimTitle"
-        defaultMessage="File Integrity Module"
-      />
-    ),
-    id: 'auditbeatFIM',
-  },
-  {
-    count: data.auditbeatLogin ?? 0,
-    title: <FormattedMessage id="xpack.siem.overview.auditBeatLoginTitle" defaultMessage="Login" />,
-    id: 'auditbeatLogin',
-  },
-  {
-    count: data.auditbeatPackage ?? 0,
-    title: (
-      <FormattedMessage id="xpack.siem.overview.auditBeatPackageTitle" defaultMessage="Package" />
-    ),
-    id: 'auditbeatPackage',
-  },
-  {
-    count: data.auditbeatProcess ?? 0,
-    title: (
-      <FormattedMessage id="xpack.siem.overview.auditBeatProcessTitle" defaultMessage="Process" />
-    ),
-    id: 'auditbeatProcess',
-  },
-  {
-    count: data.auditbeatUser ?? 0,
-    title: <FormattedMessage id="xpack.siem.overview.auditBeatUserTitle" defaultMessage="User" />,
-    id: 'auditbeatUser',
-  },
-  {
-    count: data.endgameDns ?? 0,
-    title: <FormattedMessage id="xpack.siem.overview.endgameDnsTitle" defaultMessage="DNS" />,
-    id: 'endgameDns',
-  },
-  {
-    count: data.endgameFile ?? 0,
-    title: <FormattedMessage id="xpack.siem.overview.endgameFileTitle" defaultMessage="File" />,
-    id: 'endgameFile',
-  },
-  {
-    count: data.endgameImageLoad ?? 0,
-    title: (
-      <FormattedMessage
-        id="xpack.siem.overview.endgameImageLoadTitle"
-        defaultMessage="Image Load"
-      />
-    ),
-    id: 'endgameImageLoad',
-  },
-  {
-    count: data.endgameNetwork ?? 0,
-    title: (
-      <FormattedMessage id="xpack.siem.overview.endgameNetworkTitle" defaultMessage="Network" />
-    ),
-    id: 'endgameNetwork',
-  },
-  {
-    count: data.endgameProcess ?? 0,
-    title: (
-      <FormattedMessage id="xpack.siem.overview.endgameProcessTitle" defaultMessage="Process" />
-    ),
-    id: 'endgameProcess',
-  },
-  {
-    count: data.endgameRegistry ?? 0,
-    title: (
-      <FormattedMessage id="xpack.siem.overview.endgameRegistryTitle" defaultMessage="Registry" />
-    ),
-    id: 'endgameRegistry',
-  },
-  {
-    count: data.endgameSecurity ?? 0,
-    title: (
-      <FormattedMessage id="xpack.siem.overview.endgameSecurityTitle" defaultMessage="Security" />
-    ),
-    id: 'endgameSecurity',
-  },
-  {
-    count: data.filebeatSystemModule ?? 0,
-    title: (
-      <FormattedMessage
-        id="xpack.siem.overview.filebeatSystemModuleTitle"
-        defaultMessage="System Module"
-      />
-    ),
-    id: 'filebeatSystemModule',
-  },
-  {
-    count: data.winlogbeatSecurity ?? 0,
-    title: (
-      <FormattedMessage
-        id="xpack.siem.overview.winlogbeatSecurityTitle"
-        defaultMessage="Security"
-      />
-    ),
-    id: 'winlogbeatSecurity',
-  },
-  {
-    count: data.winlogbeatMWSysmonOperational ?? 0,
-    title: (
-      <FormattedMessage
-        id="xpack.siem.overview.winlogbeatMWSysmonOperational"
-        defaultMessage="Microsoft-Windows-Sysmon/Operational"
-      />
-    ),
-    id: 'winlogbeatMWSysmonOperational',
-  },
-];
-
-const HostStatsContainer = styled.div`
-  .accordion-button {
-    width: 100%;
-  }
-`;
-
-const hostStatGroups: StatGroup[] = [
-  {
-    groupId: 'auditbeat',
-    name: (
-      <FormattedMessage
-        id="xpack.siem.overview.hostStatGroupAuditbeat"
-        defaultMessage="Auditbeat"
-      />
-    ),
-    statIds: [
-      'auditbeatAuditd',
-      'auditbeatFIM',
-      'auditbeatLogin',
-      'auditbeatPackage',
-      'auditbeatProcess',
-      'auditbeatUser',
-    ],
-  },
-  {
-    groupId: 'endgame',
-    name: (
-      <FormattedMessage
-        id="xpack.siem.overview.hostStatGroupElasticEndpointSecurity"
-        defaultMessage="Elastic Endpoint Security"
-      />
-    ),
-    statIds: [
-      'endgameDns',
-      'endgameFile',
-      'endgameImageLoad',
-      'endgameNetwork',
-      'endgameProcess',
-      'endgameRegistry',
-      'endgameSecurity',
-    ],
-  },
-  {
-    groupId: 'filebeat',
-    name: (
-      <FormattedMessage id="xpack.siem.overview.hostStatGroupFilebeat" defaultMessage="Filebeat" />
-    ),
-    statIds: ['filebeatSystemModule'],
-  },
-  {
-    groupId: 'winlogbeat',
-    name: (
-      <FormattedMessage
-        id="xpack.siem.overview.hostStatGroupWinlogbeat"
-        defaultMessage="Winlogbeat"
-      />
-    ),
-    statIds: ['winlogbeatSecurity', 'winlogbeatMWSysmonOperational'],
-  },
-];
-
-const Title = styled.div`
-  margin-left: 24px;
-`;
-
-const AccordionContent = styled.div`
-  margin-top: 8px;
-`;
-
-const OverviewHostStatsComponent: React.FC<OverviewHostProps> = ({ data, loading }) => {
-  const allHostStats = getOverviewHostStats(data);
-  const allHostStatsCount = allHostStats.reduce((total, stat) => total + stat.count, 0);
-
-  return (
-    <HostStatsContainer data-test-subj="overview-hosts-stats">
-      {hostStatGroups.map((statGroup, i) => {
-        const statsForGroup = allHostStats.filter(s => statGroup.statIds.includes(s.id));
-        const statsForGroupCount = statsForGroup.reduce((total, stat) => total + stat.count, 0);
-
-        return (
-          <React.Fragment key={statGroup.groupId}>
-            <EuiHorizontalRule margin="xs" />
-            <EuiAccordion
-              id={`host-stat-accordion-group${statGroup.groupId}`}
-              buttonContent={
-                <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween">
-                  <EuiFlexItem grow={false}>
-                    <EuiText>{statGroup.name}</EuiText>
-                  </EuiFlexItem>
-                  <EuiFlexItem grow={false}>
-                    <StatValue
-                      count={statsForGroupCount}
-                      isGroupStat={true}
-                      isLoading={loading}
-                      max={allHostStatsCount}
-                    />
-                  </EuiFlexItem>
-                </EuiFlexGroup>
-              }
-              buttonContentClassName="accordion-button"
-            >
-              <AccordionContent>
-                {statsForGroup.map(stat => (
-                  <EuiFlexGroup key={stat.id} justifyContent="spaceBetween">
-                    <EuiFlexItem grow={false}>
-                      <EuiText color="subdued" size="s">
-                        <Title>{stat.title}</Title>
-                      </EuiText>
-                    </EuiFlexItem>
-                    <EuiFlexItem data-test-subj={`host-stat-${stat.id}`} grow={false}>
-                      <StatValue
-                        count={stat.count}
-                        isGroupStat={false}
-                        isLoading={loading}
-                        max={statsForGroupCount}
-                      />
-                    </EuiFlexItem>
-                  </EuiFlexGroup>
-                ))}
-              </AccordionContent>
-            </EuiAccordion>
-          </React.Fragment>
-        );
-      })}
-    </HostStatsContainer>
-  );
-};
-
-export const OverviewHostStats = React.memo(OverviewHostStatsComponent);
diff --git a/x-pack/plugins/siem/public/components/page/overview/overview_host_stats/mock.ts b/x-pack/plugins/siem/public/components/page/overview/overview_host_stats/mock.ts
deleted file mode 100644
index 60e653caab8c10..00000000000000
--- a/x-pack/plugins/siem/public/components/page/overview/overview_host_stats/mock.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-/*
- * 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 { OverviewHostData } from '../../../../graphql/types';
-
-export const mockData: { OverviewHost: OverviewHostData } = {
-  OverviewHost: {
-    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,
-    winlogbeatSecurity: 195929,
-    winlogbeatMWSysmonOperational: 101070,
-  },
-};
diff --git a/x-pack/plugins/siem/public/components/page/overview/overview_network/index.test.tsx b/x-pack/plugins/siem/public/components/page/overview/overview_network/index.test.tsx
deleted file mode 100644
index 151bb444cfe75c..00000000000000
--- a/x-pack/plugins/siem/public/components/page/overview/overview_network/index.test.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-/*
- * 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 { cloneDeep } from 'lodash/fp';
-import { mount } from 'enzyme';
-import React from 'react';
-
-import { apolloClientObservable, mockGlobalState, TestProviders } from '../../../../mock';
-
-import { OverviewNetwork } from '.';
-import { createStore, State } from '../../../../store';
-import { overviewNetworkQuery } from '../../../../containers/overview/overview_network/index.gql_query';
-import { GetOverviewHostQuery } from '../../../../graphql/types';
-import { MockedProvider } from 'react-apollo/test-utils';
-import { wait } from '../../../../lib/helpers';
-
-jest.mock('../../../../lib/kibana');
-
-const startDate = 1579553397080;
-const endDate = 1579639797080;
-
-interface MockedProvidedQuery {
-  request: {
-    query: GetOverviewHostQuery.Query;
-    fetchPolicy: string;
-    variables: GetOverviewHostQuery.Variables;
-  };
-  result: {
-    data: {
-      source: unknown;
-    };
-  };
-}
-
-const mockOpenTimelineQueryResults: MockedProvidedQuery[] = [
-  {
-    request: {
-      query: overviewNetworkQuery,
-      fetchPolicy: 'cache-and-network',
-      variables: {
-        sourceId: 'default',
-        timerange: { interval: '12h', from: startDate, to: endDate },
-        filterQuery: undefined,
-        defaultIndex: [
-          'apm-*-transaction*',
-          'auditbeat-*',
-          'endgame-*',
-          'filebeat-*',
-          'packetbeat-*',
-          'winlogbeat-*',
-        ],
-        inspect: false,
-      },
-    },
-    result: {
-      data: {
-        source: {
-          id: 'default',
-          OverviewNetwork: {
-            auditbeatSocket: 1,
-            filebeatCisco: 1,
-            filebeatNetflow: 1,
-            filebeatPanw: 1,
-            filebeatSuricata: 1,
-            filebeatZeek: 1,
-            packetbeatDNS: 1,
-            packetbeatFlow: 1,
-            packetbeatTLS: 1,
-          },
-        },
-      },
-    },
-  },
-];
-
-describe('OverviewNetwork', () => {
-  const state: State = mockGlobalState;
-
-  let store = createStore(state, apolloClientObservable);
-
-  beforeEach(() => {
-    const myState = cloneDeep(state);
-    store = createStore(myState, apolloClientObservable);
-  });
-
-  test('it renders the expected widget title', () => {
-    const wrapper = mount(
-      <TestProviders store={store}>
-        <OverviewNetwork endDate={endDate} setQuery={jest.fn()} startDate={startDate} />
-      </TestProviders>
-    );
-
-    expect(
-      wrapper
-        .find('[data-test-subj="header-section-title"]')
-        .first()
-        .text()
-    ).toEqual('Network events');
-  });
-
-  test('it renders an empty subtitle while loading', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <OverviewNetwork endDate={endDate} setQuery={jest.fn()} startDate={startDate} />
-      </TestProviders>
-    );
-
-    expect(
-      wrapper
-        .find('[data-test-subj="header-panel-subtitle"]')
-        .first()
-        .text()
-    ).toEqual('');
-  });
-
-  test('it renders the expected event count in the subtitle after loading events', async () => {
-    const wrapper = mount(
-      <TestProviders>
-        <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
-          <OverviewNetwork endDate={endDate} setQuery={jest.fn()} startDate={startDate} />
-        </MockedProvider>
-      </TestProviders>
-    );
-    await wait();
-    wrapper.update();
-
-    expect(
-      wrapper
-        .find('[data-test-subj="header-panel-subtitle"]')
-        .first()
-        .text()
-    ).toEqual('Showing: 9 events');
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/page/overview/overview_network/index.tsx b/x-pack/plugins/siem/public/components/page/overview/overview_network/index.tsx
deleted file mode 100644
index d649a0dd9e9237..00000000000000
--- a/x-pack/plugins/siem/public/components/page/overview/overview_network/index.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-/*
- * 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 { isEmpty } from 'lodash/fp';
-import { EuiButton, EuiFlexItem, EuiPanel } from '@elastic/eui';
-import numeral from '@elastic/numeral';
-import { FormattedMessage } from '@kbn/i18n/react';
-import React, { useMemo } from 'react';
-
-import { DEFAULT_NUMBER_FORMAT } from '../../../../../common/constants';
-import { ESQuery } from '../../../../../common/typed_json';
-import { HeaderSection } from '../../../header_section';
-import { useUiSetting$ } from '../../../../lib/kibana';
-import { manageQuery } from '../../../page/manage_query';
-import {
-  ID as OverviewNetworkQueryId,
-  OverviewNetworkQuery,
-} from '../../../../containers/overview/overview_network';
-import { inputsModel } from '../../../../store/inputs';
-import { getOverviewNetworkStats, OverviewNetworkStats } from '../overview_network_stats';
-import { getNetworkUrl } from '../../../link_to';
-import { InspectButtonContainer } from '../../../inspect';
-import { useGetUrlSearch } from '../../../navigation/use_get_url_search';
-import { navTabs } from '../../../../pages/home/home_navigations';
-
-export interface OverviewNetworkProps {
-  startDate: number;
-  endDate: number;
-  filterQuery?: ESQuery | string;
-  setQuery: ({
-    id,
-    inspect,
-    loading,
-    refetch,
-  }: {
-    id: string;
-    inspect: inputsModel.InspectQuery | null;
-    loading: boolean;
-    refetch: inputsModel.Refetch;
-  }) => void;
-}
-
-const OverviewNetworkStatsManage = manageQuery(OverviewNetworkStats);
-
-const OverviewNetworkComponent: React.FC<OverviewNetworkProps> = ({
-  endDate,
-  filterQuery,
-  startDate,
-  setQuery,
-}) => {
-  const [defaultNumberFormat] = useUiSetting$<string>(DEFAULT_NUMBER_FORMAT);
-  const urlSearch = useGetUrlSearch(navTabs.network);
-  const networkPageButton = useMemo(
-    () => (
-      <EuiButton href={getNetworkUrl(urlSearch)}>
-        <FormattedMessage id="xpack.siem.overview.networkAction" defaultMessage="View network" />
-      </EuiButton>
-    ),
-    [urlSearch]
-  );
-  return (
-    <EuiFlexItem>
-      <InspectButtonContainer>
-        <EuiPanel>
-          <OverviewNetworkQuery
-            data-test-subj="overview-network-query"
-            endDate={endDate}
-            filterQuery={filterQuery}
-            sourceId="default"
-            startDate={startDate}
-          >
-            {({ overviewNetwork, loading, id, inspect, refetch }) => {
-              const networkEventsCount = getOverviewNetworkStats(overviewNetwork).reduce(
-                (total, stat) => total + stat.count,
-                0
-              );
-              const formattedNetworkEventsCount = numeral(networkEventsCount).format(
-                defaultNumberFormat
-              );
-
-              return (
-                <>
-                  <HeaderSection
-                    id={OverviewNetworkQueryId}
-                    subtitle={
-                      !isEmpty(overviewNetwork) ? (
-                        <FormattedMessage
-                          defaultMessage="Showing: {formattedNetworkEventsCount} {networkEventsCount, plural, one {event} other {events}}"
-                          id="xpack.siem.overview.overviewNetwork.networkSubtitle"
-                          values={{
-                            formattedNetworkEventsCount,
-                            networkEventsCount,
-                          }}
-                        />
-                      ) : (
-                        <>{''}</>
-                      )
-                    }
-                    title={
-                      <FormattedMessage
-                        id="xpack.siem.overview.networkTitle"
-                        defaultMessage="Network events"
-                      />
-                    }
-                  >
-                    {networkPageButton}
-                  </HeaderSection>
-
-                  <OverviewNetworkStatsManage
-                    loading={loading}
-                    data={overviewNetwork}
-                    id={id}
-                    inspect={inspect}
-                    setQuery={setQuery}
-                    refetch={refetch}
-                  />
-                </>
-              );
-            }}
-          </OverviewNetworkQuery>
-        </EuiPanel>
-      </InspectButtonContainer>
-    </EuiFlexItem>
-  );
-};
-
-OverviewNetworkComponent.displayName = 'OverviewNetworkComponent';
-
-export const OverviewNetwork = React.memo(OverviewNetworkComponent);
diff --git a/x-pack/plugins/siem/public/components/page/overview/overview_network_stats/index.test.tsx b/x-pack/plugins/siem/public/components/page/overview/overview_network_stats/index.test.tsx
deleted file mode 100644
index cf1a7d20b73eca..00000000000000
--- a/x-pack/plugins/siem/public/components/page/overview/overview_network_stats/index.test.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-/*
- * 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 { mount, shallow } from 'enzyme';
-import React from 'react';
-
-import { OverviewNetworkStats } from '.';
-import { mockData } from './mock';
-import { TestProviders } from '../../../../mock/test_providers';
-
-describe('Overview Network Stat Data', () => {
-  describe('rendering', () => {
-    test('it renders the default OverviewNetworkStats', () => {
-      const wrapper = shallow(
-        <OverviewNetworkStats data={mockData.OverviewNetwork} loading={false} />
-      );
-      expect(wrapper).toMatchSnapshot();
-    });
-  });
-  describe('loading', () => {
-    test('it does NOT show loading indicator when loading is false', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <OverviewNetworkStats data={mockData.OverviewNetwork} loading={false} />
-        </TestProviders>
-      );
-
-      // click the accordion to expand it
-      wrapper
-        .find('button')
-        .first()
-        .simulate('click');
-      wrapper.update();
-
-      expect(
-        wrapper
-          .find('[data-test-subj="network-stat-auditbeatSocket"]')
-          .first()
-          .find('[data-test-subj="stat-value-loading-spinner"]')
-          .first()
-          .exists()
-      ).toBe(false);
-    });
-
-    test('it shows the loading indicator when loading is true', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <OverviewNetworkStats data={mockData.OverviewNetwork} loading={true} />
-        </TestProviders>
-      );
-
-      // click the accordion to expand it
-      wrapper
-        .find('button')
-        .first()
-        .simulate('click');
-      wrapper.update();
-
-      expect(
-        wrapper
-          .find('[data-test-subj="network-stat-auditbeatSocket"]')
-          .first()
-          .find('[data-test-subj="stat-value-loading-spinner"]')
-          .first()
-          .exists()
-      ).toBe(true);
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/page/overview/overview_network_stats/index.tsx b/x-pack/plugins/siem/public/components/page/overview/overview_network_stats/index.tsx
deleted file mode 100644
index ca947c29bc3822..00000000000000
--- a/x-pack/plugins/siem/public/components/page/overview/overview_network_stats/index.tsx
+++ /dev/null
@@ -1,195 +0,0 @@
-/*
- * 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 { EuiAccordion, EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiText } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n/react';
-import React from 'react';
-import styled from 'styled-components';
-
-import { OverviewNetworkData } from '../../../../graphql/types';
-import { FormattedStat, StatGroup } from '../types';
-import { StatValue } from '../stat_value';
-
-interface OverviewNetworkProps {
-  data: OverviewNetworkData;
-  loading: boolean;
-}
-
-export const getOverviewNetworkStats = (data: OverviewNetworkData): FormattedStat[] => [
-  {
-    count: data.auditbeatSocket ?? 0,
-    title: (
-      <FormattedMessage id="xpack.siem.overview.auditBeatSocketTitle" defaultMessage="Socket" />
-    ),
-    id: 'auditbeatSocket',
-  },
-  {
-    count: data.filebeatCisco ?? 0,
-    title: <FormattedMessage id="xpack.siem.overview.filebeatCiscoTitle" defaultMessage="Cisco" />,
-    id: 'filebeatCisco',
-  },
-  {
-    count: data.filebeatNetflow ?? 0,
-    title: (
-      <FormattedMessage id="xpack.siem.overview.filebeatNetflowTitle" defaultMessage="Netflow" />
-    ),
-    id: 'filebeatNetflow',
-  },
-  {
-    count: data.filebeatPanw ?? 0,
-    title: (
-      <FormattedMessage
-        id="xpack.siem.overview.filebeatPanwTitle"
-        defaultMessage="Palo Alto Networks"
-      />
-    ),
-    id: 'filebeatPanw',
-  },
-  {
-    count: data.filebeatSuricata ?? 0,
-    title: (
-      <FormattedMessage id="xpack.siem.overview.fileBeatSuricataTitle" defaultMessage="Suricata" />
-    ),
-    id: 'filebeatSuricata',
-  },
-  {
-    count: data.filebeatZeek ?? 0,
-    title: <FormattedMessage id="xpack.siem.overview.fileBeatZeekTitle" defaultMessage="Zeek" />,
-    id: 'filebeatZeek',
-  },
-  {
-    count: data.packetbeatDNS ?? 0,
-    title: <FormattedMessage id="xpack.siem.overview.packetBeatDnsTitle" defaultMessage="DNS" />,
-    id: 'packetbeatDNS',
-  },
-  {
-    count: data.packetbeatFlow ?? 0,
-    title: <FormattedMessage id="xpack.siem.overview.packetBeatFlowTitle" defaultMessage="Flow" />,
-    id: 'packetbeatFlow',
-  },
-  {
-    count: data.packetbeatTLS ?? 0,
-    title: <FormattedMessage id="xpack.siem.overview.packetbeatTLSTitle" defaultMessage="TLS" />,
-    id: 'packetbeatTLS',
-  },
-];
-
-const networkStatGroups: StatGroup[] = [
-  {
-    groupId: 'auditbeat',
-    name: (
-      <FormattedMessage
-        id="xpack.siem.overview.networkStatGroupAuditbeat"
-        defaultMessage="Auditbeat"
-      />
-    ),
-    statIds: ['auditbeatSocket'],
-  },
-  {
-    groupId: 'filebeat',
-    name: (
-      <FormattedMessage
-        id="xpack.siem.overview.networkStatGroupFilebeat"
-        defaultMessage="Filebeat"
-      />
-    ),
-    statIds: [
-      'filebeatCisco',
-      'filebeatNetflow',
-      'filebeatPanw',
-      'filebeatSuricata',
-      'filebeatZeek',
-    ],
-  },
-  {
-    groupId: 'packetbeat',
-    name: (
-      <FormattedMessage
-        id="xpack.siem.overview.networkStatGroupPacketbeat"
-        defaultMessage="Packetbeat"
-      />
-    ),
-    statIds: ['packetbeatDNS', 'packetbeatFlow', 'packetbeatTLS'],
-  },
-];
-
-const NetworkStatsContainer = styled.div`
-  .accordion-button {
-    width: 100%;
-  }
-`;
-
-const Title = styled.div`
-  margin-left: 24px;
-`;
-
-const AccordionContent = styled.div`
-  margin-top: 8px;
-`;
-
-const OverviewNetworkStatsComponent: React.FC<OverviewNetworkProps> = ({ data, loading }) => {
-  const allNetworkStats = getOverviewNetworkStats(data);
-  const allNetworkStatsCount = allNetworkStats.reduce((total, stat) => total + stat.count, 0);
-
-  return (
-    <NetworkStatsContainer data-test-subj="overview-network-stats">
-      {networkStatGroups.map((statGroup, i) => {
-        const statsForGroup = allNetworkStats.filter(s => statGroup.statIds.includes(s.id));
-        const statsForGroupCount = statsForGroup.reduce((total, stat) => total + stat.count, 0);
-
-        return (
-          <React.Fragment key={statGroup.groupId}>
-            <EuiHorizontalRule margin="xs" />
-            <EuiAccordion
-              id={`network-stat-accordion-group${statGroup.groupId}`}
-              buttonContent={
-                <EuiFlexGroup
-                  data-test-subj={`network-stat-group-${statGroup.groupId}`}
-                  justifyContent="spaceBetween"
-                >
-                  <EuiFlexItem grow={false}>
-                    <EuiText>{statGroup.name}</EuiText>
-                  </EuiFlexItem>
-                  <EuiFlexItem grow={false}>
-                    <StatValue
-                      count={statsForGroupCount}
-                      isGroupStat={true}
-                      isLoading={loading}
-                      max={allNetworkStatsCount}
-                    />
-                  </EuiFlexItem>
-                </EuiFlexGroup>
-              }
-              buttonContentClassName="accordion-button"
-            >
-              <AccordionContent>
-                {statsForGroup.map(stat => (
-                  <EuiFlexGroup key={stat.id} justifyContent="spaceBetween">
-                    <EuiFlexItem grow={false}>
-                      <EuiText color="subdued" size="s">
-                        <Title>{stat.title}</Title>
-                      </EuiText>
-                    </EuiFlexItem>
-                    <EuiFlexItem data-test-subj={`network-stat-${stat.id}`} grow={false}>
-                      <StatValue
-                        count={stat.count}
-                        isGroupStat={false}
-                        isLoading={loading}
-                        max={statsForGroupCount}
-                      />
-                    </EuiFlexItem>
-                  </EuiFlexGroup>
-                ))}
-              </AccordionContent>
-            </EuiAccordion>
-          </React.Fragment>
-        );
-      })}
-    </NetworkStatsContainer>
-  );
-};
-
-export const OverviewNetworkStats = React.memo(OverviewNetworkStatsComponent);
diff --git a/x-pack/plugins/siem/public/components/page/overview/overview_network_stats/mock.ts b/x-pack/plugins/siem/public/components/page/overview/overview_network_stats/mock.ts
deleted file mode 100644
index cc4c639f85deb8..00000000000000
--- a/x-pack/plugins/siem/public/components/page/overview/overview_network_stats/mock.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/*
- * 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 { OverviewNetworkData } from '../../../../graphql/types';
-
-export const mockData: { OverviewNetwork: OverviewNetworkData } = {
-  OverviewNetwork: {
-    auditbeatSocket: 12,
-    filebeatCisco: 999,
-    filebeatNetflow: 7777,
-    filebeatPanw: 66,
-    filebeatSuricata: 60015,
-    filebeatZeek: 2003,
-    packetbeatDNS: 10277307,
-    packetbeatFlow: 16,
-    packetbeatTLS: 3400000,
-  },
-};
diff --git a/x-pack/plugins/siem/public/components/paginated_table/helpers.ts b/x-pack/plugins/siem/public/components/paginated_table/helpers.ts
deleted file mode 100644
index c63b8699e79eef..00000000000000
--- a/x-pack/plugins/siem/public/components/paginated_table/helpers.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/*
- * 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 { PaginationInputPaginated } from '../../graphql/types';
-
-export const generateTablePaginationOptions = (
-  activePage: number,
-  limit: number
-): PaginationInputPaginated => {
-  const cursorStart = activePage * limit;
-  return {
-    activePage,
-    cursorStart,
-    fakePossibleCount: 4 <= activePage && activePage > 0 ? limit * (activePage + 2) : limit * 5,
-    querySize: limit + cursorStart,
-  };
-};
diff --git a/x-pack/plugins/siem/public/components/paginated_table/index.test.tsx b/x-pack/plugins/siem/public/components/paginated_table/index.test.tsx
deleted file mode 100644
index 94dac6607ce217..00000000000000
--- a/x-pack/plugins/siem/public/components/paginated_table/index.test.tsx
+++ /dev/null
@@ -1,522 +0,0 @@
-/*
- * 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 { mount, shallow } from 'enzyme';
-import React from 'react';
-
-import { DEFAULT_MAX_TABLE_QUERY_SIZE } from '../../../common/constants';
-import { Direction } from '../../graphql/types';
-
-import { BasicTableProps, PaginatedTable } from './index';
-import { getHostsColumns, mockData, rowItems, sortedHosts } from './index.mock';
-import { ThemeProvider } from 'styled-components';
-import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
-
-jest.mock('react', () => {
-  const r = jest.requireActual('react');
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return { ...r, memo: (x: any) => x };
-});
-
-describe('Paginated Table Component', () => {
-  const theme = () => ({ eui: euiDarkVars, darkMode: true });
-  let loadPage: jest.Mock<number>;
-  let updateLimitPagination: jest.Mock<number>;
-  let updateActivePage: jest.Mock<number>;
-  beforeEach(() => {
-    loadPage = jest.fn();
-    updateLimitPagination = jest.fn();
-    updateActivePage = jest.fn();
-  });
-
-  describe('rendering', () => {
-    test('it renders the default load more table', () => {
-      const wrapper = shallow(
-        <ThemeProvider theme={theme}>
-          <PaginatedTable
-            activePage={0}
-            columns={getHostsColumns()}
-            headerCount={1}
-            headerSupplement={<p>{'My test supplement.'}</p>}
-            headerTitle="Hosts"
-            headerTooltip="My test tooltip"
-            headerUnit="Test Unit"
-            itemsPerRow={rowItems}
-            limit={1}
-            loading={false}
-            loadPage={loadPage}
-            pageOfItems={mockData.Hosts.edges}
-            showMorePagesIndicator={true}
-            totalCount={10}
-            updateActivePage={updateActivePage}
-            updateLimitPagination={limit => updateLimitPagination({ limit })}
-          />
-        </ThemeProvider>
-      );
-
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    test('it renders the loading panel at the beginning ', () => {
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <PaginatedTable
-            activePage={0}
-            columns={getHostsColumns()}
-            headerCount={-1}
-            headerSupplement={<p>{'My test supplement.'}</p>}
-            headerTitle="Hosts"
-            headerTooltip="My test tooltip"
-            headerUnit="Test Unit"
-            itemsPerRow={rowItems}
-            limit={1}
-            loading={true}
-            loadPage={loadPage}
-            pageOfItems={[]}
-            showMorePagesIndicator={true}
-            totalCount={10}
-            updateActivePage={updateActivePage}
-            updateLimitPagination={limit => updateLimitPagination({ limit })}
-          />
-        </ThemeProvider>
-      );
-
-      expect(
-        wrapper.find('[data-test-subj="initialLoadingPanelPaginatedTable"]').exists()
-      ).toBeTruthy();
-    });
-
-    test('it renders the over loading panel after data has been in the table ', () => {
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <PaginatedTable
-            activePage={0}
-            columns={getHostsColumns()}
-            headerCount={1}
-            headerSupplement={<p>{'My test supplement.'}</p>}
-            headerTitle="Hosts"
-            headerTooltip="My test tooltip"
-            headerUnit="Test Unit"
-            itemsPerRow={rowItems}
-            limit={1}
-            loading={true}
-            loadPage={loadPage}
-            pageOfItems={mockData.Hosts.edges}
-            showMorePagesIndicator={true}
-            totalCount={10}
-            updateActivePage={updateActivePage}
-            updateLimitPagination={limit => updateLimitPagination({ limit })}
-          />
-        </ThemeProvider>
-      );
-
-      expect(wrapper.find('[data-test-subj="loadingPanelPaginatedTable"]').exists()).toBeTruthy();
-    });
-
-    test('it renders the correct amount of pages and starts at activePage: 0', () => {
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <PaginatedTable
-            activePage={0}
-            columns={getHostsColumns()}
-            headerCount={1}
-            headerSupplement={<p>{'My test supplement.'}</p>}
-            headerTitle="Hosts"
-            headerTooltip="My test tooltip"
-            headerUnit="Test Unit"
-            itemsPerRow={rowItems}
-            limit={1}
-            loading={false}
-            loadPage={loadPage}
-            pageOfItems={mockData.Hosts.edges}
-            showMorePagesIndicator={true}
-            totalCount={10}
-            updateActivePage={updateActivePage}
-            updateLimitPagination={limit => updateLimitPagination({ limit })}
-          />
-        </ThemeProvider>
-      );
-
-      const paginiationProps = wrapper
-        .find('[data-test-subj="numberedPagination"]')
-        .first()
-        .props();
-
-      const expectedPaginationProps = {
-        'data-test-subj': 'numberedPagination',
-        pageCount: 10,
-        activePage: 0,
-      };
-      expect(JSON.stringify(paginiationProps)).toEqual(JSON.stringify(expectedPaginationProps));
-    });
-
-    test('it render popover to select new limit in table', () => {
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <PaginatedTable
-            activePage={0}
-            columns={getHostsColumns()}
-            headerCount={1}
-            headerSupplement={<p>{'My test supplement.'}</p>}
-            headerTitle="Hosts"
-            headerTooltip="My test tooltip"
-            headerUnit="Test Unit"
-            itemsPerRow={rowItems}
-            limit={2}
-            loading={false}
-            loadPage={loadPage}
-            pageOfItems={mockData.Hosts.edges}
-            showMorePagesIndicator={true}
-            totalCount={10}
-            updateActivePage={updateActivePage}
-            updateLimitPagination={limit => updateLimitPagination({ limit })}
-          />
-        </ThemeProvider>
-      );
-
-      wrapper
-        .find('[data-test-subj="loadingMoreSizeRowPopover"] button')
-        .first()
-        .simulate('click');
-      expect(wrapper.find('[data-test-subj="loadingMorePickSizeRow"]').exists()).toBeTruthy();
-    });
-
-    test('it will NOT render popover to select new limit in table if props itemsPerRow is empty', () => {
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <PaginatedTable
-            activePage={0}
-            columns={getHostsColumns()}
-            headerCount={1}
-            headerSupplement={<p>{'My test supplement.'}</p>}
-            headerTitle="Hosts"
-            headerTooltip="My test tooltip"
-            headerUnit="Test Unit"
-            itemsPerRow={[]}
-            limit={2}
-            loading={false}
-            loadPage={loadPage}
-            pageOfItems={mockData.Hosts.edges}
-            showMorePagesIndicator={true}
-            totalCount={10}
-            updateActivePage={updateActivePage}
-            updateLimitPagination={limit => updateLimitPagination({ limit })}
-          />
-        </ThemeProvider>
-      );
-
-      expect(wrapper.find('[data-test-subj="loadingMoreSizeRowPopover"]').exists()).toBeFalsy();
-    });
-
-    test('It should render a sort icon if sorting is defined', () => {
-      const mockOnChange = jest.fn();
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <PaginatedTable
-            activePage={0}
-            columns={sortedHosts}
-            headerCount={1}
-            headerSupplement={<p>{'My test supplement.'}</p>}
-            headerTitle="Hosts"
-            headerTooltip="My test tooltip"
-            headerUnit="Test Unit"
-            itemsPerRow={rowItems}
-            limit={2}
-            loading={false}
-            loadPage={jest.fn()}
-            onChange={mockOnChange}
-            pageOfItems={mockData.Hosts.edges}
-            showMorePagesIndicator={true}
-            sorting={{ direction: Direction.asc, field: 'node.host.name' }}
-            totalCount={10}
-            updateActivePage={updateActivePage}
-            updateLimitPagination={limit => updateLimitPagination({ limit })}
-          />
-        </ThemeProvider>
-      );
-
-      expect(wrapper.find('.euiTable thead tr th button svg')).toBeTruthy();
-    });
-
-    test('Should display toast when user reaches end of results max', () => {
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <PaginatedTable
-            activePage={0}
-            columns={getHostsColumns()}
-            headerCount={1}
-            headerSupplement={<p>{'My test supplement.'}</p>}
-            headerTitle="Hosts"
-            headerTooltip="My test tooltip"
-            headerUnit="Test Unit"
-            itemsPerRow={rowItems}
-            limit={DEFAULT_MAX_TABLE_QUERY_SIZE}
-            loading={false}
-            loadPage={loadPage}
-            pageOfItems={mockData.Hosts.edges}
-            showMorePagesIndicator={true}
-            totalCount={DEFAULT_MAX_TABLE_QUERY_SIZE * 3}
-            updateActivePage={updateActivePage}
-            updateLimitPagination={limit => updateLimitPagination({ limit })}
-          />
-        </ThemeProvider>
-      );
-      wrapper
-        .find('[data-test-subj="pagination-button-next"]')
-        .first()
-        .simulate('click');
-      expect(updateActivePage.mock.calls.length).toEqual(0);
-    });
-
-    test('Should show items per row if totalCount is greater than items', () => {
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <PaginatedTable
-            activePage={0}
-            columns={getHostsColumns()}
-            headerCount={1}
-            headerSupplement={<p>{'My test supplement.'}</p>}
-            headerTitle="Hosts"
-            headerTooltip="My test tooltip"
-            headerUnit="Test Unit"
-            itemsPerRow={rowItems}
-            limit={DEFAULT_MAX_TABLE_QUERY_SIZE}
-            loading={false}
-            loadPage={loadPage}
-            pageOfItems={mockData.Hosts.edges}
-            showMorePagesIndicator={true}
-            totalCount={30}
-            updateActivePage={updateActivePage}
-            updateLimitPagination={limit => updateLimitPagination({ limit })}
-          />
-        </ThemeProvider>
-      );
-      expect(wrapper.find('[data-test-subj="loadingMoreSizeRowPopover"]').exists()).toBeTruthy();
-    });
-
-    test('Should hide items per row if totalCount is less than items', () => {
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <PaginatedTable
-            activePage={0}
-            columns={getHostsColumns()}
-            headerCount={1}
-            headerSupplement={<p>{'My test supplement.'}</p>}
-            headerTitle="Hosts"
-            headerTooltip="My test tooltip"
-            headerUnit="Test Unit"
-            itemsPerRow={rowItems}
-            limit={DEFAULT_MAX_TABLE_QUERY_SIZE}
-            loading={false}
-            loadPage={loadPage}
-            pageOfItems={mockData.Hosts.edges}
-            showMorePagesIndicator={true}
-            totalCount={1}
-            updateActivePage={updateActivePage}
-            updateLimitPagination={limit => updateLimitPagination({ limit })}
-          />
-        </ThemeProvider>
-      );
-      expect(wrapper.find('[data-test-subj="loadingMoreSizeRowPopover"]').exists()).toBeFalsy();
-    });
-  });
-
-  describe('Events', () => {
-    test('should call updateActivePage with 1 when clicking to the first page', () => {
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <PaginatedTable
-            activePage={0}
-            columns={getHostsColumns()}
-            headerCount={1}
-            headerSupplement={<p>{'My test supplement.'}</p>}
-            headerTitle="Hosts"
-            headerTooltip="My test tooltip"
-            headerUnit="Test Unit"
-            itemsPerRow={rowItems}
-            limit={1}
-            loading={false}
-            loadPage={loadPage}
-            pageOfItems={mockData.Hosts.edges}
-            showMorePagesIndicator={true}
-            totalCount={10}
-            updateActivePage={updateActivePage}
-            updateLimitPagination={limit => updateLimitPagination({ limit })}
-          />
-        </ThemeProvider>
-      );
-      wrapper
-        .find('[data-test-subj="pagination-button-next"]')
-        .first()
-        .simulate('click');
-      expect(updateActivePage.mock.calls[0][0]).toEqual(1);
-    });
-
-    test('Should call updateActivePage with 0 when you pick a new limit', () => {
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <PaginatedTable
-            activePage={0}
-            columns={getHostsColumns()}
-            headerCount={1}
-            headerSupplement={<p>{'My test supplement.'}</p>}
-            headerTitle="Hosts"
-            headerTooltip="My test tooltip"
-            headerUnit="Test Unit"
-            itemsPerRow={rowItems}
-            limit={2}
-            loading={false}
-            loadPage={loadPage}
-            pageOfItems={mockData.Hosts.edges}
-            showMorePagesIndicator={true}
-            totalCount={10}
-            updateActivePage={updateActivePage}
-            updateLimitPagination={limit => updateLimitPagination({ limit })}
-          />
-        </ThemeProvider>
-      );
-      wrapper
-        .find('[data-test-subj="pagination-button-next"]')
-        .first()
-        .simulate('click');
-
-      wrapper
-        .find('[data-test-subj="loadingMoreSizeRowPopover"] button')
-        .first()
-        .simulate('click');
-
-      wrapper
-        .find('[data-test-subj="loadingMorePickSizeRow"] button')
-        .first()
-        .simulate('click');
-      expect(updateActivePage.mock.calls[1][0]).toEqual(0);
-    });
-
-    test('should update the page when the activePage is changed from redux', () => {
-      const ourProps: BasicTableProps<unknown> = {
-        activePage: 3,
-        columns: getHostsColumns(),
-        headerCount: 1,
-        headerSupplement: <p>{'My test supplement.'}</p>,
-        headerTitle: 'Hosts',
-        headerTooltip: 'My test tooltip',
-        headerUnit: 'Test Unit',
-        itemsPerRow: rowItems,
-        limit: 1,
-        loading: false,
-        loadPage,
-        pageOfItems: mockData.Hosts.edges,
-        showMorePagesIndicator: true,
-        totalCount: 10,
-        updateActivePage,
-        updateLimitPagination: limit => updateLimitPagination({ limit }),
-      };
-
-      // enzyme does not allow us to pass props to child of HOC
-      // so we make a component to pass it the props context
-      // ComponentWithContext will pass the changed props to Component
-      // https://github.com/airbnb/enzyme/issues/1853#issuecomment-443475903
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const ComponentWithContext = (props: BasicTableProps<any>) => {
-        return (
-          <ThemeProvider theme={theme}>
-            <PaginatedTable {...props} />
-          </ThemeProvider>
-        );
-      };
-
-      const wrapper = mount(<ComponentWithContext {...ourProps} />);
-      expect(
-        wrapper
-          .find('[data-test-subj="numberedPagination"]')
-          .first()
-          .prop('activePage')
-      ).toEqual(3);
-      wrapper.setProps({ activePage: 0 });
-      wrapper.update();
-      expect(
-        wrapper
-          .find('[data-test-subj="numberedPagination"]')
-          .first()
-          .prop('activePage')
-      ).toEqual(0);
-    });
-
-    test('Should call updateLimitPagination when you pick a new limit', () => {
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <PaginatedTable
-            activePage={0}
-            columns={getHostsColumns()}
-            headerCount={1}
-            headerSupplement={<p>{'My test supplement.'}</p>}
-            headerTitle="Hosts"
-            headerTooltip="My test tooltip"
-            headerUnit="Test Unit"
-            itemsPerRow={rowItems}
-            limit={2}
-            loading={false}
-            loadPage={loadPage}
-            pageOfItems={mockData.Hosts.edges}
-            showMorePagesIndicator={true}
-            totalCount={10}
-            updateActivePage={updateActivePage}
-            updateLimitPagination={limit => updateLimitPagination({ limit })}
-          />
-        </ThemeProvider>
-      );
-
-      wrapper
-        .find('[data-test-subj="loadingMoreSizeRowPopover"] button')
-        .first()
-        .simulate('click');
-
-      wrapper
-        .find('[data-test-subj="loadingMorePickSizeRow"] button')
-        .first()
-        .simulate('click');
-      expect(updateLimitPagination).toBeCalled();
-    });
-
-    test('Should call onChange when you choose a new sort in the table', () => {
-      const mockOnChange = jest.fn();
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <PaginatedTable
-            activePage={0}
-            columns={sortedHosts}
-            headerCount={1}
-            headerSupplement={<p>{'My test supplement.'}</p>}
-            headerTitle="Hosts"
-            headerTooltip="My test tooltip"
-            headerUnit="Test Unit"
-            itemsPerRow={rowItems}
-            limit={2}
-            loading={false}
-            loadPage={jest.fn()}
-            onChange={mockOnChange}
-            pageOfItems={mockData.Hosts.edges}
-            showMorePagesIndicator={true}
-            sorting={{ direction: Direction.asc, field: 'node.host.name' }}
-            totalCount={10}
-            updateActivePage={updateActivePage}
-            updateLimitPagination={limit => updateLimitPagination({ limit })}
-          />
-        </ThemeProvider>
-      );
-
-      wrapper
-        .find('.euiTable thead tr th button')
-        .first()
-        .simulate('click');
-
-      expect(mockOnChange).toBeCalled();
-      expect(mockOnChange.mock.calls[0]).toEqual([
-        { page: undefined, sort: { direction: 'desc', field: 'node.host.name' } },
-      ]);
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/paginated_table/index.tsx b/x-pack/plugins/siem/public/components/paginated_table/index.tsx
deleted file mode 100644
index a815ecd1005180..00000000000000
--- a/x-pack/plugins/siem/public/components/paginated_table/index.tsx
+++ /dev/null
@@ -1,350 +0,0 @@
-/*
- * 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 {
-  EuiBasicTable,
-  EuiBasicTableProps,
-  EuiButtonEmpty,
-  EuiContextMenuItem,
-  EuiContextMenuPanel,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiGlobalToastListToast as Toast,
-  EuiLoadingContent,
-  EuiPagination,
-  EuiPopover,
-  Direction,
-} from '@elastic/eui';
-import { noop } from 'lodash/fp';
-import React, { FC, memo, useState, useEffect, ComponentType } from 'react';
-import styled from 'styled-components';
-
-import { DEFAULT_MAX_TABLE_QUERY_SIZE } from '../../../common/constants';
-import { AuthTableColumns } from '../page/hosts/authentications_table';
-import { HostsTableColumns } from '../page/hosts/hosts_table';
-import { NetworkDnsColumns } from '../page/network/network_dns_table/columns';
-import { NetworkHttpColumns } from '../page/network/network_http_table/columns';
-import {
-  NetworkTopNFlowColumns,
-  NetworkTopNFlowColumnsIpDetails,
-} from '../page/network/network_top_n_flow_table/columns';
-import {
-  NetworkTopCountriesColumns,
-  NetworkTopCountriesColumnsIpDetails,
-} from '../page/network/network_top_countries_table/columns';
-import { TlsColumns } from '../page/network/tls_table/columns';
-import { UncommonProcessTableColumns } from '../page/hosts/uncommon_process_table';
-import { UsersColumns } from '../page/network/users_table/columns';
-import { HeaderSection } from '../header_section';
-import { Loader } from '../loader';
-import { useStateToaster } from '../toasters';
-
-import * as i18n from './translations';
-import { Panel } from '../panel';
-import { InspectButtonContainer } from '../inspect';
-
-const DEFAULT_DATA_TEST_SUBJ = 'paginated-table';
-
-export interface ItemsPerRow {
-  text: string;
-  numberOfRow: number;
-}
-
-export interface SortingBasicTable {
-  field: string;
-  direction: Direction;
-  allowNeutralSort?: boolean;
-}
-
-export interface Criteria {
-  page?: { index: number; size: number };
-  sort?: SortingBasicTable;
-}
-
-declare type HostsTableColumnsTest = [
-  Columns<string>,
-  Columns<string>,
-  Columns<string>,
-  Columns<string>
-];
-
-declare type BasicTableColumns =
-  | AuthTableColumns
-  | HostsTableColumns
-  | HostsTableColumnsTest
-  | NetworkDnsColumns
-  | NetworkHttpColumns
-  | NetworkTopCountriesColumns
-  | NetworkTopCountriesColumnsIpDetails
-  | NetworkTopNFlowColumns
-  | NetworkTopNFlowColumnsIpDetails
-  | TlsColumns
-  | UncommonProcessTableColumns
-  | UsersColumns;
-
-declare type SiemTables = BasicTableProps<BasicTableColumns>;
-
-// Using telescoping templates to remove 'any' that was polluting downstream column type checks
-export interface BasicTableProps<T> {
-  activePage: number;
-  columns: T;
-  dataTestSubj?: string;
-  headerCount: number;
-  headerSupplement?: React.ReactElement;
-  headerTitle: string | React.ReactElement;
-  headerTooltip?: string;
-  headerUnit: string | React.ReactElement;
-  id?: string;
-  itemsPerRow?: ItemsPerRow[];
-  isInspect?: boolean;
-  limit: number;
-  loading: boolean;
-  loadPage: (activePage: number) => void;
-  onChange?: (criteria: Criteria) => void;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  pageOfItems: any[];
-  showMorePagesIndicator: boolean;
-  sorting?: SortingBasicTable;
-  totalCount: number;
-  updateActivePage: (activePage: number) => void;
-  updateLimitPagination: (limit: number) => void;
-}
-type Func<T> = (arg: T) => string | number;
-
-export interface Columns<T, U = T> {
-  align?: string;
-  field?: string;
-  hideForMobile?: boolean;
-  isMobileHeader?: boolean;
-  name: string | React.ReactNode;
-  render?: (item: T, node: U) => React.ReactNode;
-  sortable?: boolean | Func<T>;
-  truncateText?: boolean;
-  width?: string;
-}
-
-const PaginatedTableComponent: FC<SiemTables> = ({
-  activePage,
-  columns,
-  dataTestSubj = DEFAULT_DATA_TEST_SUBJ,
-  headerCount,
-  headerSupplement,
-  headerTitle,
-  headerTooltip,
-  headerUnit,
-  id,
-  isInspect,
-  itemsPerRow,
-  limit,
-  loading,
-  loadPage,
-  onChange = noop,
-  pageOfItems,
-  showMorePagesIndicator,
-  sorting = null,
-  totalCount,
-  updateActivePage,
-  updateLimitPagination,
-}) => {
-  const [myLoading, setMyLoading] = useState(loading);
-  const [myActivePage, setActivePage] = useState(activePage);
-  const [loadingInitial, setLoadingInitial] = useState(headerCount === -1);
-  const [isPopoverOpen, setPopoverOpen] = useState(false);
-
-  const pageCount = Math.ceil(totalCount / limit);
-  const dispatchToaster = useStateToaster()[1];
-
-  useEffect(() => {
-    setActivePage(activePage);
-  }, [activePage]);
-
-  useEffect(() => {
-    if (headerCount >= 0 && loadingInitial) {
-      setLoadingInitial(false);
-    }
-  }, [loadingInitial, headerCount]);
-
-  useEffect(() => {
-    setMyLoading(loading);
-  }, [loading]);
-
-  const onButtonClick = () => {
-    setPopoverOpen(!isPopoverOpen);
-  };
-
-  const closePopover = () => {
-    setPopoverOpen(false);
-  };
-
-  const goToPage = (newActivePage: number) => {
-    if ((newActivePage + 1) * limit >= DEFAULT_MAX_TABLE_QUERY_SIZE) {
-      const toast: Toast = {
-        id: 'PaginationWarningMsg',
-        title: headerTitle + i18n.TOAST_TITLE,
-        color: 'warning',
-        iconType: 'alert',
-        toastLifeTimeMs: 10000,
-        text: i18n.TOAST_TEXT,
-      };
-      return dispatchToaster({
-        type: 'addToaster',
-        toast,
-      });
-    }
-    setActivePage(newActivePage);
-    loadPage(newActivePage);
-    updateActivePage(newActivePage);
-  };
-
-  const button = (
-    <EuiButtonEmpty
-      size="xs"
-      color="text"
-      iconType="arrowDown"
-      iconSide="right"
-      onClick={onButtonClick}
-    >
-      {`${i18n.ROWS}: ${limit}`}
-    </EuiButtonEmpty>
-  );
-
-  const rowItems =
-    itemsPerRow &&
-    itemsPerRow.map((item: ItemsPerRow) => (
-      <EuiContextMenuItem
-        key={item.text}
-        icon={limit === item.numberOfRow ? 'check' : 'empty'}
-        onClick={() => {
-          closePopover();
-          updateLimitPagination(item.numberOfRow);
-          updateActivePage(0); // reset results to first page
-        }}
-      >
-        {item.text}
-      </EuiContextMenuItem>
-    ));
-  const PaginationWrapper = showMorePagesIndicator ? PaginationEuiFlexItem : EuiFlexItem;
-
-  return (
-    <InspectButtonContainer show={!loadingInitial}>
-      <Panel data-test-subj={`${dataTestSubj}-loading-${loading}`} loading={loading}>
-        <HeaderSection
-          id={id}
-          subtitle={
-            !loadingInitial &&
-            `${i18n.SHOWING}: ${headerCount >= 0 ? headerCount.toLocaleString() : 0} ${headerUnit}`
-          }
-          title={headerTitle}
-          tooltip={headerTooltip}
-        >
-          {!loadingInitial && headerSupplement}
-        </HeaderSection>
-
-        {loadingInitial ? (
-          <EuiLoadingContent data-test-subj="initialLoadingPanelPaginatedTable" lines={10} />
-        ) : (
-          <>
-            <BasicTable
-              columns={columns}
-              compressed
-              items={pageOfItems}
-              onChange={onChange}
-              sorting={
-                sorting
-                  ? {
-                      sort: {
-                        field: sorting.field,
-                        direction: sorting.direction,
-                      },
-                    }
-                  : undefined
-              }
-            />
-            <FooterAction>
-              <EuiFlexItem>
-                {itemsPerRow && itemsPerRow.length > 0 && totalCount >= itemsPerRow[0].numberOfRow && (
-                  <EuiPopover
-                    id="customizablePagination"
-                    data-test-subj="loadingMoreSizeRowPopover"
-                    button={button}
-                    isOpen={isPopoverOpen}
-                    closePopover={closePopover}
-                    panelPaddingSize="none"
-                  >
-                    <EuiContextMenuPanel items={rowItems} data-test-subj="loadingMorePickSizeRow" />
-                  </EuiPopover>
-                )}
-              </EuiFlexItem>
-
-              <PaginationWrapper grow={false}>
-                <EuiPagination
-                  data-test-subj="numberedPagination"
-                  pageCount={pageCount}
-                  activePage={myActivePage}
-                  onPageClick={goToPage}
-                />
-              </PaginationWrapper>
-            </FooterAction>
-            {(isInspect || myLoading) && (
-              <Loader data-test-subj="loadingPanelPaginatedTable" overlay size="xl" />
-            )}
-          </>
-        )}
-      </Panel>
-    </InspectButtonContainer>
-  );
-};
-
-export const PaginatedTable = memo(PaginatedTableComponent);
-
-type BasicTableType = ComponentType<EuiBasicTableProps<any>>; // eslint-disable-line @typescript-eslint/no-explicit-any
-const BasicTable = styled(EuiBasicTable as BasicTableType)`
-  tbody {
-    th,
-    td {
-      vertical-align: top;
-    }
-
-    .euiTableCellContent {
-      display: block;
-    }
-  }
-` as any; // eslint-disable-line @typescript-eslint/no-explicit-any
-
-BasicTable.displayName = 'BasicTable';
-
-const FooterAction = styled(EuiFlexGroup).attrs(() => ({
-  alignItems: 'center',
-  responsive: false,
-}))`
-  margin-top: ${({ theme }) => theme.eui.euiSizeXS};
-`;
-
-FooterAction.displayName = 'FooterAction';
-
-const PaginationEuiFlexItem = styled(EuiFlexItem)`
-  @media only screen and (min-width: ${({ theme }) => theme.eui.euiBreakpoints.m}) {
-    .euiButtonIcon:last-child {
-      margin-left: 28px;
-    }
-
-    .euiPagination {
-      position: relative;
-    }
-
-    .euiPagination::before {
-      bottom: 0;
-      color: ${({ theme }) => theme.eui.euiButtonColorDisabled};
-      content: '\\2026';
-      font-size: ${({ theme }) => theme.eui.euiFontSizeS};
-      padding: 5px ${({ theme }) => theme.eui.euiSizeS};
-      position: absolute;
-      right: ${({ theme }) => theme.eui.euiSizeL};
-    }
-  }
-`;
-
-PaginationEuiFlexItem.displayName = 'PaginationEuiFlexItem';
diff --git a/x-pack/plugins/siem/public/components/pin/index.tsx b/x-pack/plugins/siem/public/components/pin/index.tsx
deleted file mode 100644
index 9f898f9acaf2e9..00000000000000
--- a/x-pack/plugins/siem/public/components/pin/index.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * 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 { EuiButtonIcon, IconSize } from '@elastic/eui';
-import { noop } from 'lodash/fp';
-import React from 'react';
-
-import * as i18n from '../../components/timeline/body/translations';
-
-export type PinIcon = 'pin' | 'pinFilled';
-
-export const getPinIcon = (pinned: boolean): PinIcon => (pinned ? 'pinFilled' : 'pin');
-
-interface Props {
-  allowUnpinning: boolean;
-  iconSize?: IconSize;
-  onClick?: () => void;
-  pinned: boolean;
-}
-
-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/plugins/siem/public/components/port/index.test.tsx b/x-pack/plugins/siem/public/components/port/index.test.tsx
deleted file mode 100644
index 6ab587f266a8a4..00000000000000
--- a/x-pack/plugins/siem/public/components/port/index.test.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-/*
- * 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 { shallow } from 'enzyme';
-import React from 'react';
-
-import { TestProviders } from '../../mock/test_providers';
-import { useMountAppended } from '../../utils/use_mount_appended';
-
-import { Port } from '.';
-
-describe('Port', () => {
-  const mount = useMountAppended();
-
-  test('renders correctly against snapshot', () => {
-    const wrapper = shallow(
-      <Port contextId="test" eventId="abcd" fieldName="destination.port" value="443" />
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  test('it renders the port', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <Port contextId="test" eventId="abcd" fieldName="destination.port" value="443" />
-      </TestProviders>
-    );
-
-    expect(
-      wrapper
-        .find('[data-test-subj="port"]')
-        .first()
-        .text()
-    ).toEqual('443');
-  });
-
-  test('it hyperlinks links destination.port to an external service that describes the purpose of the port', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <Port contextId="test" eventId="abcd" fieldName="destination.port" value="443" />
-      </TestProviders>
-    );
-
-    expect(
-      wrapper
-        .find('[data-test-subj="port-or-service-name-link"]')
-        .first()
-        .props().href
-    ).toEqual(
-      'https://www.iana.org/assignments/service-names-port-numbers/service-names-port-numbers.xhtml?search=443'
-    );
-  });
-
-  test('it renders an external link', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <Port contextId="test" eventId="abcd" fieldName="destination.port" value="443" />
-      </TestProviders>
-    );
-
-    expect(
-      wrapper
-        .find('[data-test-subj="external-link-icon"]')
-        .first()
-        .exists()
-    ).toBe(true);
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/port/index.tsx b/x-pack/plugins/siem/public/components/port/index.tsx
deleted file mode 100644
index bd6289547d0dc8..00000000000000
--- a/x-pack/plugins/siem/public/components/port/index.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
- * 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 { DefaultDraggable } from '../draggables';
-import { getEmptyValue } from '../empty_value';
-import { ExternalLinkIcon } from '../external_link_icon';
-import { PortOrServiceNameLink } from '../links';
-
-export const CLIENT_PORT_FIELD_NAME = 'client.port';
-export const DESTINATION_PORT_FIELD_NAME = 'destination.port';
-export const SERVER_PORT_FIELD_NAME = 'server.port';
-export const SOURCE_PORT_FIELD_NAME = 'source.port';
-export const URL_PORT_FIELD_NAME = 'url.port';
-
-export const PORT_NAMES = [
-  CLIENT_PORT_FIELD_NAME,
-  DESTINATION_PORT_FIELD_NAME,
-  SERVER_PORT_FIELD_NAME,
-  SOURCE_PORT_FIELD_NAME,
-  URL_PORT_FIELD_NAME,
-];
-
-export const Port = React.memo<{
-  contextId: string;
-  eventId: string;
-  fieldName: string;
-  value: string | undefined | null;
-}>(({ contextId, eventId, fieldName, value }) => (
-  <DefaultDraggable
-    data-test-subj="port"
-    field={fieldName}
-    id={`port-default-draggable-${contextId}-${eventId}-${fieldName}-${value}`}
-    tooltipContent={fieldName}
-    value={value}
-  >
-    <PortOrServiceNameLink portOrServiceName={value || getEmptyValue()} />
-    <ExternalLinkIcon />
-  </DefaultDraggable>
-));
-
-Port.displayName = 'Port';
diff --git a/x-pack/plugins/siem/public/components/query_bar/index.test.tsx b/x-pack/plugins/siem/public/components/query_bar/index.test.tsx
deleted file mode 100644
index e27669b2b15be2..00000000000000
--- a/x-pack/plugins/siem/public/components/query_bar/index.test.tsx
+++ /dev/null
@@ -1,338 +0,0 @@
-/*
- * 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 { mount } from 'enzyme';
-import React from 'react';
-
-import { DEFAULT_FROM, DEFAULT_TO } from '../../../common/constants';
-import { TestProviders, mockIndexPattern } from '../../mock';
-import { createKibanaCoreStartMock } from '../../mock/kibana_core';
-import { FilterManager, SearchBar } from '../../../../../../src/plugins/data/public';
-import { QueryBar, QueryBarComponentProps } from '.';
-import { createKibanaContextProviderMock } from '../../mock/kibana_react';
-
-const mockUiSettingsForFilterManager = createKibanaCoreStartMock().uiSettings;
-
-describe('QueryBar ', () => {
-  // We are doing that because we need to wrapped this component with redux
-  // and redux does not like to be updated and since we need to update our
-  // child component (BODY) and we do not want to scare anyone with this error
-  // we are hiding it!!!
-  // eslint-disable-next-line no-console
-  const originalError = console.error;
-  beforeAll(() => {
-    // eslint-disable-next-line no-console
-    console.error = (...args: string[]) => {
-      if (/<Provider> does not support changing `store` on the fly/.test(args[0])) {
-        return;
-      }
-      originalError.call(console, ...args);
-    };
-  });
-
-  const mockOnChangeQuery = jest.fn();
-  const mockOnSubmitQuery = jest.fn();
-  const mockOnSavedQuery = jest.fn();
-
-  beforeEach(() => {
-    mockOnChangeQuery.mockClear();
-    mockOnSubmitQuery.mockClear();
-    mockOnSavedQuery.mockClear();
-  });
-
-  test('check if we format the appropriate props to QueryBar', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <QueryBar
-          dateRangeFrom={DEFAULT_FROM}
-          dateRangeTo={DEFAULT_TO}
-          hideSavedQuery={false}
-          indexPattern={mockIndexPattern}
-          isRefreshPaused={true}
-          filterQuery={{ query: 'here: query', language: 'kuery' }}
-          filterManager={new FilterManager(mockUiSettingsForFilterManager)}
-          filters={[]}
-          onChangedQuery={mockOnChangeQuery}
-          onSubmitQuery={mockOnSubmitQuery}
-          onSavedQuery={mockOnSavedQuery}
-        />
-      </TestProviders>
-    );
-    const {
-      customSubmitButton,
-      timeHistory,
-      onClearSavedQuery,
-      onFiltersUpdated,
-      onQueryChange,
-      onQuerySubmit,
-      onSaved,
-      onSavedQueryUpdated,
-      ...searchBarProps
-    } = wrapper.find(SearchBar).props();
-
-    expect(searchBarProps).toEqual({
-      dataTestSubj: undefined,
-      dateRangeFrom: 'now-24h',
-      dateRangeTo: 'now',
-      filters: [],
-      indexPatterns: [
-        {
-          fields: [
-            {
-              aggregatable: true,
-              name: '@timestamp',
-              searchable: true,
-              type: 'date',
-            },
-            {
-              aggregatable: true,
-              name: '@version',
-              searchable: true,
-              type: 'string',
-            },
-            {
-              aggregatable: true,
-              name: 'agent.ephemeral_id',
-              searchable: true,
-              type: 'string',
-            },
-            {
-              aggregatable: true,
-              name: 'agent.hostname',
-              searchable: true,
-              type: 'string',
-            },
-            {
-              aggregatable: true,
-              name: 'agent.id',
-              searchable: true,
-              type: 'string',
-            },
-            {
-              aggregatable: true,
-              name: 'agent.test1',
-              searchable: true,
-              type: 'string',
-            },
-            {
-              aggregatable: true,
-              name: 'agent.test2',
-              searchable: true,
-              type: 'string',
-            },
-            {
-              aggregatable: true,
-              name: 'agent.test3',
-              searchable: true,
-              type: 'string',
-            },
-            {
-              aggregatable: true,
-              name: 'agent.test4',
-              searchable: true,
-              type: 'string',
-            },
-            {
-              aggregatable: true,
-              name: 'agent.test5',
-              searchable: true,
-              type: 'string',
-            },
-            {
-              aggregatable: true,
-              name: 'agent.test6',
-              searchable: true,
-              type: 'string',
-            },
-            {
-              aggregatable: true,
-              name: 'agent.test7',
-              searchable: true,
-              type: 'string',
-            },
-            {
-              aggregatable: true,
-              name: 'agent.test8',
-              searchable: true,
-              type: 'string',
-            },
-            {
-              aggregatable: true,
-              name: 'host.name',
-              searchable: true,
-              type: 'string',
-            },
-          ],
-          title: 'filebeat-*,auditbeat-*,packetbeat-*',
-        },
-      ],
-      isLoading: false,
-      isRefreshPaused: true,
-      query: {
-        language: 'kuery',
-        query: 'here: query',
-      },
-      refreshInterval: undefined,
-      showAutoRefreshOnly: false,
-      showDatePicker: false,
-      showFilterBar: true,
-      showQueryBar: true,
-      showQueryInput: true,
-      showSaveQuery: true,
-    });
-  });
-
-  describe('#onQueryChange', () => {
-    test(' is the only reference that changed when filterQueryDraft props get updated', () => {
-      const KibanaWithStorageProvider = createKibanaContextProviderMock();
-
-      const Proxy = (props: QueryBarComponentProps) => (
-        <TestProviders>
-          <KibanaWithStorageProvider services={{ storage: { get: jest.fn() } }}>
-            <QueryBar {...props} />
-          </KibanaWithStorageProvider>
-        </TestProviders>
-      );
-
-      const wrapper = mount(
-        <Proxy
-          dateRangeFrom={DEFAULT_FROM}
-          dateRangeTo={DEFAULT_TO}
-          hideSavedQuery={false}
-          indexPattern={mockIndexPattern}
-          isRefreshPaused={true}
-          filterQuery={{ query: 'here: query', language: 'kuery' }}
-          filterManager={new FilterManager(mockUiSettingsForFilterManager)}
-          filters={[]}
-          onChangedQuery={mockOnChangeQuery}
-          onSubmitQuery={mockOnSubmitQuery}
-          onSavedQuery={mockOnSavedQuery}
-        />
-      );
-      const searchBarProps = wrapper.find(SearchBar).props();
-      const onChangedQueryRef = searchBarProps.onQueryChange;
-      const onSubmitQueryRef = searchBarProps.onQuerySubmit;
-      const onSavedQueryRef = searchBarProps.onSavedQueryUpdated;
-
-      const queryInput = wrapper.find(QueryBar).find('input[data-test-subj="queryInput"]');
-      queryInput.simulate('change', { target: { value: 'hello: world' } });
-      wrapper.update();
-
-      expect(onChangedQueryRef).not.toEqual(wrapper.find(SearchBar).props().onQueryChange);
-      expect(onSubmitQueryRef).toEqual(wrapper.find(SearchBar).props().onQuerySubmit);
-      expect(onSavedQueryRef).toEqual(wrapper.find(SearchBar).props().onSavedQueryUpdated);
-    });
-  });
-
-  describe('#onQuerySubmit', () => {
-    test(' is the only reference that changed when filterQuery props get updated', () => {
-      const Proxy = (props: QueryBarComponentProps) => (
-        <TestProviders>
-          <QueryBar {...props} />
-        </TestProviders>
-      );
-
-      const wrapper = mount(
-        <Proxy
-          dateRangeFrom={DEFAULT_FROM}
-          dateRangeTo={DEFAULT_TO}
-          hideSavedQuery={false}
-          indexPattern={mockIndexPattern}
-          isRefreshPaused={true}
-          filterQuery={{ query: 'here: query', language: 'kuery' }}
-          filterManager={new FilterManager(mockUiSettingsForFilterManager)}
-          filters={[]}
-          onChangedQuery={mockOnChangeQuery}
-          onSubmitQuery={mockOnSubmitQuery}
-          onSavedQuery={mockOnSavedQuery}
-        />
-      );
-      const searchBarProps = wrapper.find(SearchBar).props();
-      const onChangedQueryRef = searchBarProps.onQueryChange;
-      const onSubmitQueryRef = searchBarProps.onQuerySubmit;
-      const onSavedQueryRef = searchBarProps.onSavedQueryUpdated;
-
-      wrapper.setProps({ filterQuery: { expression: 'new: one', kind: 'kuery' } });
-      wrapper.update();
-
-      expect(onSubmitQueryRef).not.toEqual(wrapper.find(SearchBar).props().onQuerySubmit);
-      expect(onChangedQueryRef).not.toEqual(wrapper.find(SearchBar).props().onQueryChange);
-      expect(onSavedQueryRef).toEqual(wrapper.find(SearchBar).props().onSavedQueryUpdated);
-    });
-
-    test(' is only reference that changed when timelineId props get updated', () => {
-      const Proxy = (props: QueryBarComponentProps) => (
-        <TestProviders>
-          <QueryBar {...props} />
-        </TestProviders>
-      );
-
-      const wrapper = mount(
-        <Proxy
-          dateRangeFrom={DEFAULT_FROM}
-          dateRangeTo={DEFAULT_TO}
-          hideSavedQuery={false}
-          indexPattern={mockIndexPattern}
-          isRefreshPaused={true}
-          filterQuery={{ query: 'here: query', language: 'kuery' }}
-          filterManager={new FilterManager(mockUiSettingsForFilterManager)}
-          filters={[]}
-          onChangedQuery={mockOnChangeQuery}
-          onSubmitQuery={mockOnSubmitQuery}
-          onSavedQuery={mockOnSavedQuery}
-        />
-      );
-      const searchBarProps = wrapper.find(SearchBar).props();
-      const onChangedQueryRef = searchBarProps.onQueryChange;
-      const onSubmitQueryRef = searchBarProps.onQuerySubmit;
-      const onSavedQueryRef = searchBarProps.onSavedQueryUpdated;
-
-      wrapper.setProps({ onSubmitQuery: jest.fn() });
-      wrapper.update();
-
-      expect(onSubmitQueryRef).not.toEqual(wrapper.find(SearchBar).props().onQuerySubmit);
-      expect(onChangedQueryRef).toEqual(wrapper.find(SearchBar).props().onQueryChange);
-      expect(onSavedQueryRef).not.toEqual(wrapper.find(SearchBar).props().onSavedQueryUpdated);
-    });
-  });
-
-  describe('#onSavedQueryUpdated', () => {
-    test('is only reference that changed when dataProviders props get updated', () => {
-      const Proxy = (props: QueryBarComponentProps) => (
-        <TestProviders>
-          <QueryBar {...props} />
-        </TestProviders>
-      );
-
-      const wrapper = mount(
-        <Proxy
-          dateRangeFrom={DEFAULT_FROM}
-          dateRangeTo={DEFAULT_TO}
-          hideSavedQuery={false}
-          indexPattern={mockIndexPattern}
-          isRefreshPaused={true}
-          filterQuery={{ query: 'here: query', language: 'kuery' }}
-          filterManager={new FilterManager(mockUiSettingsForFilterManager)}
-          filters={[]}
-          onChangedQuery={mockOnChangeQuery}
-          onSubmitQuery={mockOnSubmitQuery}
-          onSavedQuery={mockOnSavedQuery}
-        />
-      );
-      const searchBarProps = wrapper.find(SearchBar).props();
-      const onChangedQueryRef = searchBarProps.onQueryChange;
-      const onSubmitQueryRef = searchBarProps.onQuerySubmit;
-      const onSavedQueryRef = searchBarProps.onSavedQueryUpdated;
-
-      wrapper.setProps({ onSavedQuery: jest.fn() });
-      wrapper.update();
-
-      expect(onSavedQueryRef).not.toEqual(wrapper.find(SearchBar).props().onSavedQueryUpdated);
-      expect(onChangedQueryRef).toEqual(wrapper.find(SearchBar).props().onQueryChange);
-      expect(onSubmitQueryRef).toEqual(wrapper.find(SearchBar).props().onQuerySubmit);
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/query_bar/index.tsx b/x-pack/plugins/siem/public/components/query_bar/index.tsx
deleted file mode 100644
index 1ad7bc16b901ee..00000000000000
--- a/x-pack/plugins/siem/public/components/query_bar/index.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-/*
- * 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, { memo, useState, useEffect, useMemo, useCallback } from 'react';
-import deepEqual from 'fast-deep-equal';
-
-import {
-  Filter,
-  IIndexPattern,
-  FilterManager,
-  Query,
-  TimeHistory,
-  TimeRange,
-  SavedQuery,
-  SearchBar,
-  SavedQueryTimeFilter,
-} from '../../../../../../src/plugins/data/public';
-import { Storage } from '../../../../../../src/plugins/kibana_utils/public';
-
-export interface QueryBarComponentProps {
-  dataTestSubj?: string;
-  dateRangeFrom?: string;
-  dateRangeTo?: string;
-  hideSavedQuery?: boolean;
-  indexPattern: IIndexPattern;
-  isLoading?: boolean;
-  isRefreshPaused?: boolean;
-  filterQuery: Query;
-  filterManager: FilterManager;
-  filters: Filter[];
-  onChangedQuery: (query: Query) => void;
-  onSubmitQuery: (query: Query, timefilter?: SavedQueryTimeFilter) => void;
-  refreshInterval?: number;
-  savedQuery?: SavedQuery | null;
-  onSavedQuery: (savedQuery: SavedQuery | null) => void;
-}
-
-export const QueryBar = memo<QueryBarComponentProps>(
-  ({
-    dateRangeFrom,
-    dateRangeTo,
-    hideSavedQuery = false,
-    indexPattern,
-    isLoading = false,
-    isRefreshPaused,
-    filterQuery,
-    filterManager,
-    filters,
-    onChangedQuery,
-    onSubmitQuery,
-    refreshInterval,
-    savedQuery,
-    onSavedQuery,
-    dataTestSubj,
-  }) => {
-    const [draftQuery, setDraftQuery] = useState(filterQuery);
-
-    useEffect(() => {
-      setDraftQuery(filterQuery);
-    }, [filterQuery]);
-
-    const onQuerySubmit = useCallback(
-      (payload: { dateRange: TimeRange; query?: Query }) => {
-        if (payload.query != null && !deepEqual(payload.query, filterQuery)) {
-          onSubmitQuery(payload.query);
-        }
-      },
-      [filterQuery, onSubmitQuery]
-    );
-
-    const onQueryChange = useCallback(
-      (payload: { dateRange: TimeRange; query?: Query }) => {
-        if (payload.query != null && !deepEqual(payload.query, draftQuery)) {
-          setDraftQuery(payload.query);
-          onChangedQuery(payload.query);
-        }
-      },
-      [draftQuery, onChangedQuery, setDraftQuery]
-    );
-
-    const onSaved = useCallback(
-      (newSavedQuery: SavedQuery) => {
-        onSavedQuery(newSavedQuery);
-      },
-      [onSavedQuery]
-    );
-
-    const onSavedQueryUpdated = useCallback(
-      (savedQueryUpdated: SavedQuery) => {
-        const { query: newQuery, filters: newFilters, timefilter } = savedQueryUpdated.attributes;
-        onSubmitQuery(newQuery, timefilter);
-        filterManager.setFilters(newFilters || []);
-        onSavedQuery(savedQueryUpdated);
-      },
-      [filterManager, onSubmitQuery, onSavedQuery]
-    );
-
-    const onClearSavedQuery = useCallback(() => {
-      if (savedQuery != null) {
-        onSubmitQuery({
-          query: '',
-          language: savedQuery.attributes.query.language,
-        });
-        filterManager.setFilters([]);
-        onSavedQuery(null);
-      }
-    }, [filterManager, onSubmitQuery, onSavedQuery, savedQuery]);
-
-    const onFiltersUpdated = useCallback(
-      (newFilters: Filter[]) => {
-        filterManager.setFilters(newFilters);
-      },
-      [filterManager]
-    );
-
-    const CustomButton = <>{null}</>;
-    const indexPatterns = useMemo(() => [indexPattern], [indexPattern]);
-
-    const searchBarProps = savedQuery != null ? { savedQuery } : {};
-
-    return (
-      <SearchBar
-        customSubmitButton={CustomButton}
-        dateRangeFrom={dateRangeFrom}
-        dateRangeTo={dateRangeTo}
-        filters={filters}
-        indexPatterns={indexPatterns}
-        isLoading={isLoading}
-        isRefreshPaused={isRefreshPaused}
-        query={draftQuery}
-        onClearSavedQuery={onClearSavedQuery}
-        onFiltersUpdated={onFiltersUpdated}
-        onQueryChange={onQueryChange}
-        onQuerySubmit={onQuerySubmit}
-        onSaved={onSaved}
-        onSavedQueryUpdated={onSavedQueryUpdated}
-        refreshInterval={refreshInterval}
-        showAutoRefreshOnly={false}
-        showFilterBar={!hideSavedQuery}
-        showDatePicker={false}
-        showQueryBar={true}
-        showQueryInput={true}
-        showSaveQuery={true}
-        timeHistory={new TimeHistory(new Storage(localStorage))}
-        dataTestSubj={dataTestSubj}
-        {...searchBarProps}
-      />
-    );
-  }
-);
diff --git a/x-pack/plugins/siem/public/components/recent_cases/index.tsx b/x-pack/plugins/siem/public/components/recent_cases/index.tsx
deleted file mode 100644
index 07246c6c6ec885..00000000000000
--- a/x-pack/plugins/siem/public/components/recent_cases/index.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-/*
- * 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 { EuiHorizontalRule, EuiLink, EuiText } from '@elastic/eui';
-import React, { useEffect, useMemo, useRef } from 'react';
-
-import { FilterOptions, QueryParams } from '../../containers/case/types';
-import { DEFAULT_QUERY_PARAMS, useGetCases } from '../../containers/case/use_get_cases';
-import { getCaseUrl } from '../link_to/redirect_to_case';
-import { useGetUrlSearch } from '../navigation/use_get_url_search';
-import { LoadingPlaceholders } from '../page/overview/loading_placeholders';
-import { navTabs } from '../../pages/home/home_navigations';
-
-import { NoCases } from './no_cases';
-import { RecentCases } from './recent_cases';
-import * as i18n from './translations';
-
-const usePrevious = (value: FilterOptions) => {
-  const ref = useRef();
-  useEffect(() => {
-    (ref.current as unknown) = value;
-  });
-  return ref.current;
-};
-
-const MAX_CASES_TO_SHOW = 3;
-
-const queryParams: QueryParams = {
-  ...DEFAULT_QUERY_PARAMS,
-  perPage: MAX_CASES_TO_SHOW,
-};
-
-const StatefulRecentCasesComponent = React.memo(
-  ({ filterOptions }: { filterOptions: FilterOptions }) => {
-    const previousFilterOptions = usePrevious(filterOptions);
-    const { data, loading, setFilters } = useGetCases(queryParams);
-    const isLoadingCases = useMemo(
-      () => loading.indexOf('cases') > -1 || loading.indexOf('caseUpdate') > -1,
-      [loading]
-    );
-    const search = useGetUrlSearch(navTabs.case);
-    const allCasesLink = useMemo(
-      () => <EuiLink href={getCaseUrl(search)}>{i18n.VIEW_ALL_CASES}</EuiLink>,
-      [search]
-    );
-
-    useEffect(() => {
-      if (previousFilterOptions !== undefined && previousFilterOptions !== filterOptions) {
-        setFilters(filterOptions);
-      }
-    }, [previousFilterOptions, filterOptions, setFilters]);
-
-    const content = useMemo(
-      () =>
-        isLoadingCases ? (
-          <LoadingPlaceholders lines={2} placeholders={3} />
-        ) : !isLoadingCases && data.cases.length === 0 ? (
-          <NoCases />
-        ) : (
-          <RecentCases cases={data.cases} />
-        ),
-      [isLoadingCases, data]
-    );
-
-    return (
-      <EuiText color="subdued" size="s">
-        {content}
-        <EuiHorizontalRule margin="s" />
-        <EuiText size="xs">{allCasesLink}</EuiText>
-      </EuiText>
-    );
-  }
-);
-
-StatefulRecentCasesComponent.displayName = 'StatefulRecentCasesComponent';
-
-export const StatefulRecentCases = React.memo(StatefulRecentCasesComponent);
diff --git a/x-pack/plugins/siem/public/components/recent_cases/no_cases/index.tsx b/x-pack/plugins/siem/public/components/recent_cases/no_cases/index.tsx
deleted file mode 100644
index 9f0361311b7b6d..00000000000000
--- a/x-pack/plugins/siem/public/components/recent_cases/no_cases/index.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * 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 { EuiLink } from '@elastic/eui';
-import React, { useMemo } from 'react';
-
-import { getCreateCaseUrl } from '../../link_to/redirect_to_case';
-import { useGetUrlSearch } from '../../navigation/use_get_url_search';
-import { navTabs } from '../../../pages/home/home_navigations';
-
-import * as i18n from '../translations';
-
-const NoCasesComponent = () => {
-  const urlSearch = useGetUrlSearch(navTabs.case);
-  const newCaseLink = useMemo(
-    () => <EuiLink href={getCreateCaseUrl(urlSearch)}>{` ${i18n.START_A_NEW_CASE}`}</EuiLink>,
-    [urlSearch]
-  );
-
-  return (
-    <>
-      <span>{i18n.NO_CASES}</span>
-      {newCaseLink}
-      {'!'}
-    </>
-  );
-};
-
-NoCasesComponent.displayName = 'NoCasesComponent';
-
-export const NoCases = React.memo(NoCasesComponent);
diff --git a/x-pack/plugins/siem/public/components/recent_timelines/counts/index.tsx b/x-pack/plugins/siem/public/components/recent_timelines/counts/index.tsx
deleted file mode 100644
index c80530b245cf35..00000000000000
--- a/x-pack/plugins/siem/public/components/recent_timelines/counts/index.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-/*
- * 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 { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText, EuiToolTip } from '@elastic/eui';
-import React from 'react';
-import styled from 'styled-components';
-
-import { getPinnedEventCount, getNotesCount } from '../../open_timeline/helpers';
-import { OpenTimelineResult } from '../../open_timeline/types';
-
-import * as i18n from '../translations';
-
-const Icon = styled(EuiIcon)`
-  margin-right: 8px;
-`;
-
-const FlexGroup = styled(EuiFlexGroup)`
-  margin-right: 16px;
-`;
-
-export const IconWithCount = React.memo<{ count: number; icon: string; tooltip: string }>(
-  ({ count, icon, tooltip }) => (
-    <EuiToolTip content={tooltip}>
-      <FlexGroup alignItems="center" gutterSize="none">
-        <EuiFlexItem grow={false}>
-          <Icon color="subdued" size="s" type={icon} />
-        </EuiFlexItem>
-
-        <EuiFlexItem grow={false}>
-          <EuiText color="subdued" size="xs">
-            {count}
-          </EuiText>
-        </EuiFlexItem>
-      </FlexGroup>
-    </EuiToolTip>
-  )
-);
-
-IconWithCount.displayName = 'IconWithCount';
-
-export const RecentTimelineCounts = React.memo<{
-  timeline: OpenTimelineResult;
-}>(({ timeline }) => {
-  return (
-    <div>
-      <IconWithCount
-        count={getPinnedEventCount(timeline)}
-        icon="pinFilled"
-        tooltip={i18n.PINNED_EVENTS}
-      />
-      <IconWithCount count={getNotesCount(timeline)} icon="editorComment" tooltip={i18n.NOTES} />
-    </div>
-  );
-});
-
-RecentTimelineCounts.displayName = 'RecentTimelineCounts';
diff --git a/x-pack/plugins/siem/public/components/recent_timelines/header/index.tsx b/x-pack/plugins/siem/public/components/recent_timelines/header/index.tsx
deleted file mode 100644
index 89c7ae6f1eed96..00000000000000
--- a/x-pack/plugins/siem/public/components/recent_timelines/header/index.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-/*
- * 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 { EuiText, EuiLink } from '@elastic/eui';
-import React, { useCallback } from 'react';
-
-import { isUntitled } from '../../open_timeline/helpers';
-import { OnOpenTimeline, OpenTimelineResult } from '../../open_timeline/types';
-import * as i18n from '../translations';
-
-export const RecentTimelineHeader = React.memo<{
-  onOpenTimeline: OnOpenTimeline;
-  timeline: OpenTimelineResult;
-}>(({ onOpenTimeline, timeline, timeline: { title, savedObjectId } }) => {
-  const onClick = useCallback(
-    () => onOpenTimeline({ duplicate: false, timelineId: `${savedObjectId}` }),
-    [onOpenTimeline, savedObjectId]
-  );
-
-  return (
-    <EuiText size="s">
-      <EuiLink onClick={onClick}>{isUntitled(timeline) ? i18n.UNTITLED_TIMELINE : title}</EuiLink>
-    </EuiText>
-  );
-});
-
-RecentTimelineHeader.displayName = 'RecentTimelineHeader';
diff --git a/x-pack/plugins/siem/public/components/recent_timelines/index.tsx b/x-pack/plugins/siem/public/components/recent_timelines/index.tsx
deleted file mode 100644
index d3532d9fd1025f..00000000000000
--- a/x-pack/plugins/siem/public/components/recent_timelines/index.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-/*
- * 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 ApolloClient from 'apollo-client';
-import { EuiHorizontalRule, EuiLink, EuiText } from '@elastic/eui';
-import React, { useCallback, useMemo, useEffect } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
-import { Dispatch } from 'redux';
-
-import { TimelineType } from '../../../common/types/timeline';
-
-import { useGetAllTimeline } from '../../containers/timeline/all';
-import { SortFieldTimeline, Direction } from '../../graphql/types';
-import { queryTimelineById, dispatchUpdateTimeline } from '../open_timeline/helpers';
-import { OnOpenTimeline } from '../open_timeline/types';
-import { LoadingPlaceholders } from '../page/overview/loading_placeholders';
-import { updateIsLoading as dispatchUpdateIsLoading } from '../../store/timeline/actions';
-
-import { RecentTimelines } from './recent_timelines';
-import * as i18n from './translations';
-import { FilterMode } from './types';
-import { useGetUrlSearch } from '../navigation/use_get_url_search';
-import { navTabs } from '../../pages/home/home_navigations';
-import { getTimelinesUrl } from '../link_to/redirect_to_timelines';
-
-interface OwnProps {
-  apolloClient: ApolloClient<{}>;
-  filterBy: FilterMode;
-}
-
-export type Props = OwnProps & PropsFromRedux;
-
-const PAGE_SIZE = 3;
-
-const StatefulRecentTimelinesComponent = React.memo<Props>(
-  ({ apolloClient, filterBy, updateIsLoading, updateTimeline }) => {
-    const onOpenTimeline: OnOpenTimeline = useCallback(
-      ({ duplicate, timelineId }: { duplicate: boolean; timelineId: string }) => {
-        queryTimelineById({
-          apolloClient,
-          duplicate,
-          timelineId,
-          updateIsLoading,
-          updateTimeline,
-        });
-      },
-      [apolloClient, updateIsLoading, updateTimeline]
-    );
-
-    const noTimelinesMessage =
-      filterBy === 'favorites' ? i18n.NO_FAVORITE_TIMELINES : i18n.NO_TIMELINES;
-    const urlSearch = useGetUrlSearch(navTabs.timelines);
-    const linkAllTimelines = useMemo(
-      () => <EuiLink href={getTimelinesUrl(urlSearch)}>{i18n.VIEW_ALL_TIMELINES}</EuiLink>,
-      [urlSearch]
-    );
-    const loadingPlaceholders = useMemo(
-      () => (
-        <LoadingPlaceholders lines={2} placeholders={filterBy === 'favorites' ? 1 : PAGE_SIZE} />
-      ),
-      [filterBy]
-    );
-
-    const { fetchAllTimeline, timelines, loading } = useGetAllTimeline();
-
-    useEffect(() => {
-      fetchAllTimeline({
-        pageInfo: {
-          pageIndex: 1,
-          pageSize: PAGE_SIZE,
-        },
-        search: '',
-        sort: {
-          sortField: SortFieldTimeline.updated,
-          sortOrder: Direction.desc,
-        },
-        onlyUserFavorite: filterBy === 'favorites',
-        timelineType: TimelineType.default,
-      });
-    }, [filterBy]);
-
-    return (
-      <>
-        {loading ? (
-          loadingPlaceholders
-        ) : (
-          <RecentTimelines
-            noTimelinesMessage={noTimelinesMessage}
-            onOpenTimeline={onOpenTimeline}
-            timelines={timelines}
-          />
-        )}
-        <EuiHorizontalRule margin="s" />
-        <EuiText size="xs">{linkAllTimelines}</EuiText>
-      </>
-    );
-  }
-);
-
-StatefulRecentTimelinesComponent.displayName = 'StatefulRecentTimelinesComponent';
-
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  updateIsLoading: ({ id, isLoading }: { id: string; isLoading: boolean }) =>
-    dispatch(dispatchUpdateIsLoading({ id, isLoading })),
-  updateTimeline: dispatchUpdateTimeline(dispatch),
-});
-
-const connector = connect(null, mapDispatchToProps);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-export const StatefulRecentTimelines = connector(StatefulRecentTimelinesComponent);
diff --git a/x-pack/plugins/siem/public/components/search_bar/index.tsx b/x-pack/plugins/siem/public/components/search_bar/index.tsx
deleted file mode 100644
index 4dd1b114ccff39..00000000000000
--- a/x-pack/plugins/siem/public/components/search_bar/index.tsx
+++ /dev/null
@@ -1,385 +0,0 @@
-/*
- * 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 { getOr, set } from 'lodash/fp';
-import React, { memo, useEffect, useCallback, useMemo } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
-import { Dispatch } from 'redux';
-import { Subscription } from 'rxjs';
-import styled from 'styled-components';
-import deepEqual from 'fast-deep-equal';
-import {
-  FilterManager,
-  IIndexPattern,
-  TimeRange,
-  Query,
-  Filter,
-  SavedQuery,
-} from 'src/plugins/data/public';
-
-import { OnTimeChangeProps } from '@elastic/eui';
-
-import { inputsActions } from '../../store/inputs';
-import { InputsRange } from '../../store/inputs/model';
-import { InputsModelId } from '../../store/inputs/constants';
-import { State, inputsModel } from '../../store';
-import { formatDate } from '../super_date_picker';
-import {
-  endSelector,
-  filterQuerySelector,
-  fromStrSelector,
-  isLoadingSelector,
-  kindSelector,
-  queriesSelector,
-  savedQuerySelector,
-  startSelector,
-  toStrSelector,
-} from './selectors';
-import { timelineActions, hostsActions, networkActions } from '../../store/actions';
-import { useKibana } from '../../lib/kibana';
-
-interface SiemSearchBarProps {
-  id: InputsModelId;
-  indexPattern: IIndexPattern;
-  timelineId?: string;
-  dataTestSubj?: string;
-}
-
-const SearchBarContainer = styled.div`
-  .globalQueryBar {
-    padding: 0px;
-  }
-`;
-
-const SearchBarComponent = memo<SiemSearchBarProps & PropsFromRedux>(
-  ({
-    end,
-    filterQuery,
-    fromStr,
-    id,
-    indexPattern,
-    isLoading = false,
-    queries,
-    savedQuery,
-    setSavedQuery,
-    setSearchBarFilter,
-    start,
-    toStr,
-    updateSearch,
-    dataTestSubj,
-  }) => {
-    const { data } = useKibana().services;
-    const {
-      timefilter: { timefilter },
-      filterManager,
-    } = data.query;
-
-    if (fromStr != null && toStr != null) {
-      timefilter.setTime({ from: fromStr, to: toStr });
-    } else if (start != null && end != null) {
-      timefilter.setTime({
-        from: new Date(start).toISOString(),
-        to: new Date(end).toISOString(),
-      });
-    }
-
-    const onQuerySubmit = useCallback(
-      (payload: { dateRange: TimeRange; query?: Query }) => {
-        const isQuickSelection =
-          payload.dateRange.from.includes('now') || payload.dateRange.to.includes('now');
-        let updateSearchBar: UpdateReduxSearchBar = {
-          id,
-          end: toStr != null ? toStr : new Date(end).toISOString(),
-          start: fromStr != null ? fromStr : new Date(start).toISOString(),
-          isInvalid: false,
-          isQuickSelection,
-          updateTime: false,
-          filterManager,
-        };
-        let isStateUpdated = false;
-
-        if (
-          (isQuickSelection &&
-            (fromStr !== payload.dateRange.from || toStr !== payload.dateRange.to)) ||
-          (!isQuickSelection &&
-            (start !== formatDate(payload.dateRange.from) ||
-              end !== formatDate(payload.dateRange.to)))
-        ) {
-          isStateUpdated = true;
-          updateSearchBar.updateTime = true;
-          updateSearchBar.end = payload.dateRange.to;
-          updateSearchBar.start = payload.dateRange.from;
-        }
-
-        if (payload.query != null && !deepEqual(payload.query, filterQuery)) {
-          isStateUpdated = true;
-          updateSearchBar = set('query', payload.query, updateSearchBar);
-        }
-
-        if (!isStateUpdated) {
-          // That mean we are doing a refresh!
-          if (isQuickSelection) {
-            updateSearchBar.updateTime = true;
-            updateSearchBar.end = payload.dateRange.to;
-            updateSearchBar.start = payload.dateRange.from;
-          } else {
-            queries.forEach(q => q.refetch && (q.refetch as inputsModel.Refetch)());
-          }
-        }
-
-        window.setTimeout(() => updateSearch(updateSearchBar), 0);
-      },
-      [id, end, filterQuery, fromStr, queries, start, toStr]
-    );
-
-    const onRefresh = useCallback(
-      (payload: { dateRange: TimeRange }) => {
-        if (payload.dateRange.from.includes('now') || payload.dateRange.to.includes('now')) {
-          updateSearch({
-            id,
-            end: payload.dateRange.to,
-            start: payload.dateRange.from,
-            isInvalid: false,
-            isQuickSelection: true,
-            updateTime: true,
-            filterManager,
-          });
-        } else {
-          queries.forEach(q => q.refetch && (q.refetch as inputsModel.Refetch)());
-        }
-      },
-      [id, queries, filterManager]
-    );
-
-    const onSaved = useCallback(
-      (newSavedQuery: SavedQuery) => {
-        setSavedQuery({ id, savedQuery: newSavedQuery });
-      },
-      [id]
-    );
-
-    const onSavedQueryUpdated = useCallback(
-      (savedQueryUpdated: SavedQuery) => {
-        const isQuickSelection = savedQueryUpdated.attributes.timefilter
-          ? savedQueryUpdated.attributes.timefilter.from.includes('now') ||
-            savedQueryUpdated.attributes.timefilter.to.includes('now')
-          : false;
-
-        let updateSearchBar: UpdateReduxSearchBar = {
-          id,
-          filters: savedQueryUpdated.attributes.filters || [],
-          end: toStr != null ? toStr : new Date(end).toISOString(),
-          start: fromStr != null ? fromStr : new Date(start).toISOString(),
-          isInvalid: false,
-          isQuickSelection,
-          updateTime: false,
-          filterManager,
-        };
-
-        if (savedQueryUpdated.attributes.timefilter) {
-          updateSearchBar.end = savedQueryUpdated.attributes.timefilter
-            ? savedQueryUpdated.attributes.timefilter.to
-            : updateSearchBar.end;
-          updateSearchBar.start = savedQueryUpdated.attributes.timefilter
-            ? savedQueryUpdated.attributes.timefilter.from
-            : updateSearchBar.start;
-          updateSearchBar.updateTime = true;
-        }
-
-        updateSearchBar = set('query', savedQueryUpdated.attributes.query, updateSearchBar);
-        updateSearchBar = set('savedQuery', savedQueryUpdated, updateSearchBar);
-
-        updateSearch(updateSearchBar);
-      },
-      [id, end, fromStr, start, toStr]
-    );
-
-    const onClearSavedQuery = useCallback(() => {
-      if (savedQuery != null) {
-        updateSearch({
-          id,
-          filters: [],
-          end: toStr != null ? toStr : new Date(end).toISOString(),
-          start: fromStr != null ? fromStr : new Date(start).toISOString(),
-          isInvalid: false,
-          isQuickSelection: false,
-          updateTime: false,
-          query: {
-            query: '',
-            language: savedQuery.attributes.query.language,
-          },
-          resetSavedQuery: true,
-          savedQuery: undefined,
-          filterManager,
-        });
-      }
-    }, [id, end, filterManager, fromStr, start, toStr, savedQuery]);
-
-    useEffect(() => {
-      let isSubscribed = true;
-      const subscriptions = new Subscription();
-
-      subscriptions.add(
-        filterManager.getUpdates$().subscribe({
-          next: () => {
-            if (isSubscribed) {
-              setSearchBarFilter({
-                id,
-                filters: filterManager.getFilters(),
-              });
-            }
-          },
-        })
-      );
-
-      return () => {
-        isSubscribed = false;
-        subscriptions.unsubscribe();
-      };
-    }, []);
-    const indexPatterns = useMemo(() => [indexPattern], [indexPattern]);
-    return (
-      <SearchBarContainer data-test-subj={`${id}DatePicker`}>
-        <data.ui.SearchBar
-          appName="siem"
-          isLoading={isLoading}
-          indexPatterns={indexPatterns}
-          query={filterQuery}
-          onClearSavedQuery={onClearSavedQuery}
-          onQuerySubmit={onQuerySubmit}
-          onRefresh={onRefresh}
-          onSaved={onSaved}
-          onSavedQueryUpdated={onSavedQueryUpdated}
-          savedQuery={savedQuery}
-          showFilterBar={true}
-          showDatePicker={true}
-          showQueryBar={true}
-          showQueryInput={true}
-          showSaveQuery={true}
-          dataTestSubj={dataTestSubj}
-        />
-      </SearchBarContainer>
-    );
-  }
-);
-
-const makeMapStateToProps = () => {
-  const getEndSelector = endSelector();
-  const getFromStrSelector = fromStrSelector();
-  const getIsLoadingSelector = isLoadingSelector();
-  const getKindSelector = kindSelector();
-  const getQueriesSelector = queriesSelector();
-  const getStartSelector = startSelector();
-  const getToStrSelector = toStrSelector();
-  const getFilterQuerySelector = filterQuerySelector();
-  const getSavedQuerySelector = savedQuerySelector();
-  return (state: State, { id }: SiemSearchBarProps) => {
-    const inputsRange: InputsRange = getOr({}, `inputs.${id}`, state);
-    return {
-      end: getEndSelector(inputsRange),
-      fromStr: getFromStrSelector(inputsRange),
-      filterQuery: getFilterQuerySelector(inputsRange),
-      isLoading: getIsLoadingSelector(inputsRange),
-      kind: getKindSelector(inputsRange),
-      queries: getQueriesSelector(inputsRange),
-      savedQuery: getSavedQuerySelector(inputsRange),
-      start: getStartSelector(inputsRange),
-      toStr: getToStrSelector(inputsRange),
-    };
-  };
-};
-
-SearchBarComponent.displayName = 'SiemSearchBar';
-
-interface UpdateReduxSearchBar extends OnTimeChangeProps {
-  id: InputsModelId;
-  filters?: Filter[];
-  filterManager: FilterManager;
-  query?: Query;
-  savedQuery?: SavedQuery;
-  resetSavedQuery?: boolean;
-  timelineId?: string;
-  updateTime: boolean;
-}
-
-export const dispatchUpdateSearch = (dispatch: Dispatch) => ({
-  end,
-  filters,
-  id,
-  isQuickSelection,
-  query,
-  resetSavedQuery,
-  savedQuery,
-  start,
-  timelineId,
-  filterManager,
-  updateTime = false,
-}: UpdateReduxSearchBar): void => {
-  if (updateTime) {
-    const fromDate = formatDate(start);
-    let toDate = formatDate(end, { roundUp: true });
-    if (isQuickSelection) {
-      dispatch(
-        inputsActions.setRelativeRangeDatePicker({
-          id,
-          fromStr: start,
-          toStr: end,
-          from: fromDate,
-          to: toDate,
-        })
-      );
-    } else {
-      toDate = formatDate(end);
-      dispatch(
-        inputsActions.setAbsoluteRangeDatePicker({
-          id,
-          from: formatDate(start),
-          to: formatDate(end),
-        })
-      );
-    }
-    if (timelineId != null) {
-      dispatch(
-        timelineActions.updateRange({
-          id: timelineId,
-          start: fromDate,
-          end: toDate,
-        })
-      );
-    }
-  }
-  if (query != null) {
-    dispatch(
-      inputsActions.setFilterQuery({
-        id,
-        ...query,
-      })
-    );
-  }
-  if (filters != null) {
-    filterManager.setFilters(filters);
-  }
-  if (savedQuery != null || resetSavedQuery) {
-    dispatch(inputsActions.setSavedQuery({ id, savedQuery }));
-  }
-
-  dispatch(hostsActions.setHostTablesActivePageToZero());
-  dispatch(networkActions.setNetworkTablesActivePageToZero());
-};
-
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  updateSearch: dispatchUpdateSearch(dispatch),
-  setSavedQuery: ({ id, savedQuery }: { id: InputsModelId; savedQuery: SavedQuery | undefined }) =>
-    dispatch(inputsActions.setSavedQuery({ id, savedQuery })),
-  setSearchBarFilter: ({ id, filters }: { id: InputsModelId; filters: Filter[] }) =>
-    dispatch(inputsActions.setSearchBarFilter({ id, filters })),
-});
-
-export const connector = connect(makeMapStateToProps, mapDispatchToProps);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-export const SiemSearchBar = connector(SearchBarComponent);
diff --git a/x-pack/plugins/siem/public/components/search_bar/selectors.ts b/x-pack/plugins/siem/public/components/search_bar/selectors.ts
deleted file mode 100644
index 4e700a46ca0e2d..00000000000000
--- a/x-pack/plugins/siem/public/components/search_bar/selectors.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-/*
- * 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 { createSelector } from 'reselect';
-import { InputsRange } from '../../store/inputs/model';
-import { Query, SavedQuery } from '../../../../../../src/plugins/data/public';
-
-export {
-  endSelector,
-  fromStrSelector,
-  isLoadingSelector,
-  kindSelector,
-  queriesSelector,
-  startSelector,
-  toStrSelector,
-} from '../super_date_picker/selectors';
-
-export const getFilterQuery = (inputState: InputsRange): Query => inputState.query;
-
-export const getSavedQuery = (inputState: InputsRange): SavedQuery | undefined =>
-  inputState.savedQuery;
-
-export const filterQuerySelector = () => createSelector(getFilterQuery, filterQuery => filterQuery);
-
-export const savedQuerySelector = () => createSelector(getSavedQuery, savedQuery => savedQuery);
diff --git a/x-pack/plugins/siem/public/components/skeleton_row/index.test.tsx b/x-pack/plugins/siem/public/components/skeleton_row/index.test.tsx
deleted file mode 100644
index 0ee54a1a20003a..00000000000000
--- a/x-pack/plugins/siem/public/components/skeleton_row/index.test.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-/*
- * 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 { mount, shallow } from 'enzyme';
-import React from 'react';
-
-import { TestProviders } from '../../mock';
-import { SkeletonRow } from './index';
-
-describe('SkeletonRow', () => {
-  test('it renders', () => {
-    const wrapper = shallow(<SkeletonRow />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  test('it renders the correct number of cells if cellCount is specified', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <SkeletonRow cellCount={10} />
-      </TestProviders>
-    );
-
-    expect(wrapper.find('.siemSkeletonRow__cell')).toHaveLength(10);
-  });
-
-  test('it applies row and cell styles when cellColor/cellMargin/rowHeight/rowPadding provided', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <SkeletonRow cellColor="red" cellMargin="10px" rowHeight="100px" rowPadding="10px" />
-      </TestProviders>
-    );
-    const siemSkeletonRow = wrapper.find('.siemSkeletonRow').first();
-    const siemSkeletonRowCell = wrapper.find('.siemSkeletonRow__cell').last();
-
-    expect(siemSkeletonRow).toHaveStyleRule('height', '100px');
-    expect(siemSkeletonRow).toHaveStyleRule('padding', '10px');
-    expect(siemSkeletonRowCell).toHaveStyleRule('background-color', 'red');
-    expect(siemSkeletonRowCell).toHaveStyleRule('margin-left', '10px', {
-      modifier: '& + &',
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/source_destination/index.test.tsx b/x-pack/plugins/siem/public/components/source_destination/index.test.tsx
deleted file mode 100644
index 3dee668d66a707..00000000000000
--- a/x-pack/plugins/siem/public/components/source_destination/index.test.tsx
+++ /dev/null
@@ -1,419 +0,0 @@
-/*
- * 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 numeral from '@elastic/numeral';
-import { shallow } from 'enzyme';
-import { get } from 'lodash/fp';
-import React from 'react';
-
-import { asArrayIfExists } from '../../lib/helpers';
-import { getMockNetflowData } from '../../mock';
-import { TestProviders } from '../../mock/test_providers';
-import { ID_FIELD_NAME } from '../event_details/event_id';
-import { useMountAppended } from '../../utils/use_mount_appended';
-import { DESTINATION_IP_FIELD_NAME, SOURCE_IP_FIELD_NAME } from '../ip';
-import { DESTINATION_PORT_FIELD_NAME, SOURCE_PORT_FIELD_NAME } from '../port';
-import {
-  DESTINATION_BYTES_FIELD_NAME,
-  DESTINATION_PACKETS_FIELD_NAME,
-  SOURCE_BYTES_FIELD_NAME,
-  SOURCE_PACKETS_FIELD_NAME,
-} from '../source_destination/source_destination_arrows';
-import * as i18n from '../timeline/body/renderers/translations';
-
-import { SourceDestination } from '.';
-import {
-  DESTINATION_GEO_CITY_NAME_FIELD_NAME,
-  DESTINATION_GEO_CONTINENT_NAME_FIELD_NAME,
-  DESTINATION_GEO_COUNTRY_ISO_CODE_FIELD_NAME,
-  DESTINATION_GEO_COUNTRY_NAME_FIELD_NAME,
-  DESTINATION_GEO_REGION_NAME_FIELD_NAME,
-  SOURCE_GEO_CITY_NAME_FIELD_NAME,
-  SOURCE_GEO_CONTINENT_NAME_FIELD_NAME,
-  SOURCE_GEO_COUNTRY_ISO_CODE_FIELD_NAME,
-  SOURCE_GEO_COUNTRY_NAME_FIELD_NAME,
-  SOURCE_GEO_REGION_NAME_FIELD_NAME,
-} from './geo_fields';
-import {
-  NETWORK_BYTES_FIELD_NAME,
-  NETWORK_COMMUNITY_ID_FIELD_NAME,
-  NETWORK_DIRECTION_FIELD_NAME,
-  NETWORK_PACKETS_FIELD_NAME,
-  NETWORK_PROTOCOL_FIELD_NAME,
-  NETWORK_TRANSPORT_FIELD_NAME,
-} from './field_names';
-
-const getSourceDestinationInstance = () => (
-  <SourceDestination
-    contextId="test"
-    destinationBytes={asArrayIfExists(get(DESTINATION_BYTES_FIELD_NAME, getMockNetflowData()))}
-    destinationGeoContinentName={asArrayIfExists(
-      get(DESTINATION_GEO_CONTINENT_NAME_FIELD_NAME, getMockNetflowData())
-    )}
-    destinationGeoCountryName={asArrayIfExists(
-      get(DESTINATION_GEO_COUNTRY_NAME_FIELD_NAME, getMockNetflowData())
-    )}
-    destinationGeoCountryIsoCode={asArrayIfExists(
-      get(DESTINATION_GEO_COUNTRY_ISO_CODE_FIELD_NAME, getMockNetflowData())
-    )}
-    destinationGeoRegionName={asArrayIfExists(
-      get(DESTINATION_GEO_REGION_NAME_FIELD_NAME, getMockNetflowData())
-    )}
-    destinationGeoCityName={asArrayIfExists(
-      get(DESTINATION_GEO_CITY_NAME_FIELD_NAME, getMockNetflowData())
-    )}
-    destinationIp={asArrayIfExists(get(DESTINATION_IP_FIELD_NAME, getMockNetflowData()))}
-    destinationPackets={asArrayIfExists(get(DESTINATION_PACKETS_FIELD_NAME, getMockNetflowData()))}
-    destinationPort={asArrayIfExists(get(DESTINATION_PORT_FIELD_NAME, getMockNetflowData()))}
-    eventId={get(ID_FIELD_NAME, getMockNetflowData())}
-    networkBytes={asArrayIfExists(get(NETWORK_BYTES_FIELD_NAME, getMockNetflowData()))}
-    networkCommunityId={asArrayIfExists(get(NETWORK_COMMUNITY_ID_FIELD_NAME, getMockNetflowData()))}
-    networkDirection={asArrayIfExists(get(NETWORK_DIRECTION_FIELD_NAME, getMockNetflowData()))}
-    networkPackets={asArrayIfExists(get(NETWORK_PACKETS_FIELD_NAME, getMockNetflowData()))}
-    networkProtocol={asArrayIfExists(get(NETWORK_PROTOCOL_FIELD_NAME, getMockNetflowData()))}
-    sourceBytes={asArrayIfExists(get(SOURCE_BYTES_FIELD_NAME, getMockNetflowData()))}
-    sourceGeoContinentName={asArrayIfExists(
-      get(SOURCE_GEO_CONTINENT_NAME_FIELD_NAME, getMockNetflowData())
-    )}
-    sourceGeoCountryName={asArrayIfExists(
-      get(SOURCE_GEO_COUNTRY_NAME_FIELD_NAME, getMockNetflowData())
-    )}
-    sourceGeoCountryIsoCode={asArrayIfExists(
-      get(SOURCE_GEO_COUNTRY_ISO_CODE_FIELD_NAME, getMockNetflowData())
-    )}
-    sourceGeoRegionName={asArrayIfExists(
-      get(SOURCE_GEO_REGION_NAME_FIELD_NAME, getMockNetflowData())
-    )}
-    sourceGeoCityName={asArrayIfExists(get(SOURCE_GEO_CITY_NAME_FIELD_NAME, getMockNetflowData()))}
-    sourceIp={asArrayIfExists(get(SOURCE_IP_FIELD_NAME, getMockNetflowData()))}
-    sourcePackets={asArrayIfExists(get(SOURCE_PACKETS_FIELD_NAME, getMockNetflowData()))}
-    sourcePort={asArrayIfExists(get(SOURCE_PORT_FIELD_NAME, getMockNetflowData()))}
-    transport={asArrayIfExists(get(NETWORK_TRANSPORT_FIELD_NAME, getMockNetflowData()))}
-  />
-);
-
-describe('SourceDestination', () => {
-  const mount = useMountAppended();
-
-  test('renders correctly against snapshot', () => {
-    const wrapper = shallow(<div>{getSourceDestinationInstance()}</div>);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  test('it renders a destination label', () => {
-    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="destination-label"]')
-        .first()
-        .text()
-    ).toEqual(i18n.DESTINATION);
-  });
-
-  test('it renders destination.bytes', () => {
-    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="destination-bytes"]')
-        .first()
-        .text()
-    ).toEqual('40B');
-  });
-
-  test('it renders percent destination.bytes', () => {
-    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
-    const destinationBytes = asArrayIfExists(
-      get(DESTINATION_BYTES_FIELD_NAME, getMockNetflowData())
-    );
-    const sumBytes = asArrayIfExists(get(NETWORK_BYTES_FIELD_NAME, getMockNetflowData()));
-    let percent = '';
-    if (destinationBytes != null && sumBytes != null) {
-      percent = `(${numeral((destinationBytes[0] / sumBytes[0]) * 100).format('0.00')}%)`;
-    }
-
-    expect(
-      wrapper
-        .find('[data-test-subj="destination-bytes-percent"]')
-        .first()
-        .text()
-    ).toEqual(percent);
-  });
-
-  test('it renders destination.geo.continent_name', () => {
-    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="destination.geo.continent_name"]')
-        .first()
-        .text()
-    ).toEqual('North America');
-  });
-
-  test('it renders destination.geo.country_name', () => {
-    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="destination.geo.country_name"]')
-        .first()
-        .text()
-    ).toEqual('United States');
-  });
-
-  test('it renders destination.geo.country_iso_code', () => {
-    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="destination.geo.country_iso_code"]')
-        .first()
-        .text()
-    ).toEqual('US');
-  });
-
-  test('it renders destination.geo.region_name', () => {
-    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="destination.geo.region_name"]')
-        .first()
-        .text()
-    ).toEqual('New York');
-  });
-
-  test('it renders destination.geo.city_name', () => {
-    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="destination.geo.city_name"]')
-        .first()
-        .text()
-    ).toEqual('New York');
-  });
-
-  test('it renders the destination ip and port, separated with a colon', () => {
-    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="destination-ip-and-port"]')
-        .first()
-        .text()
-    ).toEqual('10.1.2.3:80');
-  });
-
-  test('it renders destination.packets', () => {
-    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="destination-packets"]')
-        .first()
-        .text()
-    ).toEqual('1 pkts');
-  });
-
-  test('it hyperlinks links destination.port to an external service that describes the purpose of the port', () => {
-    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="destination-ip-and-port"]')
-        .find('[data-test-subj="port-or-service-name-link"]')
-        .first()
-        .props().href
-    ).toEqual(
-      'https://www.iana.org/assignments/service-names-port-numbers/service-names-port-numbers.xhtml?search=80'
-    );
-  });
-
-  test('it renders network.bytes', () => {
-    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="network-bytes"]')
-        .first()
-        .text()
-    ).toEqual('100B');
-  });
-
-  test('it renders network.community_id', () => {
-    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="network-community-id"]')
-        .first()
-        .text()
-    ).toEqual('we.live.in.a');
-  });
-
-  test('it renders network.direction', () => {
-    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="network-direction"]')
-        .first()
-        .text()
-    ).toEqual('outgoing');
-  });
-
-  test('it renders network.packets', () => {
-    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="network-packets"]')
-        .first()
-        .text()
-    ).toEqual('3 pkts');
-  });
-
-  test('it renders network.protocol', () => {
-    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="network-protocol"]')
-        .first()
-        .text()
-    ).toEqual('http');
-  });
-
-  test('it renders a source label', () => {
-    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="source-label"]')
-        .first()
-        .text()
-    ).toEqual(i18n.SOURCE);
-  });
-
-  test('it renders source.bytes', () => {
-    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="source-bytes"]')
-        .first()
-        .text()
-    ).toEqual('60B');
-  });
-
-  test('it renders percent source.bytes', () => {
-    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
-    const sourceBytes = asArrayIfExists(get(SOURCE_BYTES_FIELD_NAME, getMockNetflowData()));
-    const sumBytes = asArrayIfExists(get(NETWORK_BYTES_FIELD_NAME, getMockNetflowData()));
-    let percent = '';
-    if (sourceBytes != null && sumBytes != null) {
-      percent = `(${numeral((sourceBytes[0] / sumBytes[0]) * 100).format('0.00')}%)`;
-    }
-
-    expect(
-      wrapper
-        .find('[data-test-subj="source-bytes-percent"]')
-        .first()
-        .text()
-    ).toEqual(percent);
-  });
-
-  test('it renders source.geo.continent_name', () => {
-    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="source.geo.continent_name"]')
-        .first()
-        .text()
-    ).toEqual('North America');
-  });
-
-  test('it renders source.geo.country_name', () => {
-    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="source.geo.country_name"]')
-        .first()
-        .text()
-    ).toEqual('United States');
-  });
-
-  test('it renders source.geo.country_iso_code', () => {
-    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="source.geo.country_iso_code"]')
-        .first()
-        .text()
-    ).toEqual('US');
-  });
-
-  test('it renders source.geo.region_name', () => {
-    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="source.geo.region_name"]')
-        .first()
-        .text()
-    ).toEqual('Georgia');
-  });
-
-  test('it renders source.geo.city_name', () => {
-    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="source.geo.city_name"]')
-        .first()
-        .text()
-    ).toEqual('Atlanta');
-  });
-
-  test('it renders the source ip and port, separated with a colon', () => {
-    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="source-ip-and-port"]')
-        .first()
-        .text()
-    ).toEqual('192.168.1.2:9987');
-  });
-
-  test('it renders source.packets', () => {
-    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="source-packets"]')
-        .first()
-        .text()
-    ).toEqual('2 pkts');
-  });
-
-  test('it renders network.transport', () => {
-    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="network-transport"]')
-        .first()
-        .text()
-    ).toEqual('tcp');
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/source_destination/network.tsx b/x-pack/plugins/siem/public/components/source_destination/network.tsx
deleted file mode 100644
index a0b86b3e9a1338..00000000000000
--- a/x-pack/plugins/siem/public/components/source_destination/network.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-/*
- * 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 { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
-import { uniq } from 'lodash/fp';
-import React from 'react';
-import styled from 'styled-components';
-
-import { DirectionBadge } from '../direction';
-import { DefaultDraggable, DraggableBadge } from '../draggables';
-
-import * as i18n from './translations';
-import {
-  NETWORK_BYTES_FIELD_NAME,
-  NETWORK_COMMUNITY_ID_FIELD_NAME,
-  NETWORK_PACKETS_FIELD_NAME,
-  NETWORK_PROTOCOL_FIELD_NAME,
-  NETWORK_TRANSPORT_FIELD_NAME,
-} from './field_names';
-import { PreferenceFormattedBytes } from '../formatted_bytes';
-
-const EuiFlexItemMarginRight = styled(EuiFlexItem)`
-  margin-right: 3px;
-`;
-
-EuiFlexItemMarginRight.displayName = 'EuiFlexItemMarginRight';
-
-const Stats = styled(EuiText)`
-  margin: 0 5px;
-`;
-
-Stats.displayName = 'Stats';
-
-/**
- * Renders a row of draggable badges containing fields from the
- * `Network` category of fields
- */
-export const Network = React.memo<{
-  bytes?: string[] | null;
-  communityId?: string[] | null;
-  contextId: string;
-  direction?: string[] | null;
-  eventId: string;
-  packets?: string[] | null;
-  protocol?: string[] | null;
-  transport?: string[] | null;
-}>(({ bytes, communityId, contextId, direction, eventId, packets, protocol, transport }) => (
-  <EuiFlexGroup alignItems="center" justifyContent="center" gutterSize="none">
-    {direction != null
-      ? uniq(direction).map(dir => (
-          <EuiFlexItemMarginRight grow={false} key={dir}>
-            <DirectionBadge contextId={contextId} eventId={eventId} direction={dir} />
-          </EuiFlexItemMarginRight>
-        ))
-      : null}
-
-    {protocol != null
-      ? uniq(protocol).map(proto => (
-          <EuiFlexItemMarginRight grow={false} key={proto}>
-            <DraggableBadge
-              contextId={contextId}
-              data-test-subj="network-protocol"
-              eventId={eventId}
-              field={NETWORK_PROTOCOL_FIELD_NAME}
-              value={proto}
-            />
-          </EuiFlexItemMarginRight>
-        ))
-      : null}
-
-    {bytes != null
-      ? uniq(bytes).map(b =>
-          !isNaN(Number(b)) ? (
-            <EuiFlexItemMarginRight grow={false} key={b}>
-              <DefaultDraggable
-                field={NETWORK_BYTES_FIELD_NAME}
-                id={`network-default-draggable-${contextId}-${eventId}-${NETWORK_BYTES_FIELD_NAME}-${b}`}
-                value={b}
-              >
-                <Stats size="xs">
-                  <span data-test-subj="network-bytes">
-                    <PreferenceFormattedBytes value={b} />
-                  </span>
-                </Stats>
-              </DefaultDraggable>
-            </EuiFlexItemMarginRight>
-          ) : null
-        )
-      : null}
-
-    {packets != null
-      ? uniq(packets).map(p => (
-          <EuiFlexItemMarginRight grow={false} key={p}>
-            <DefaultDraggable
-              field={NETWORK_PACKETS_FIELD_NAME}
-              id={`network-default-draggable-${contextId}-${eventId}-${NETWORK_PACKETS_FIELD_NAME}-${p}`}
-              value={p}
-            >
-              <Stats size="xs">
-                <span data-test-subj="network-packets">{`${p} ${i18n.PACKETS}`}</span>
-              </Stats>
-            </DefaultDraggable>
-          </EuiFlexItemMarginRight>
-        ))
-      : null}
-
-    {transport != null
-      ? uniq(transport).map(trans => (
-          <EuiFlexItemMarginRight grow={false} key={trans}>
-            <DraggableBadge
-              contextId={contextId}
-              data-test-subj="network-transport"
-              eventId={eventId}
-              field={NETWORK_TRANSPORT_FIELD_NAME}
-              value={trans}
-            />
-          </EuiFlexItemMarginRight>
-        ))
-      : null}
-
-    {communityId != null
-      ? uniq(communityId).map(trans => (
-          <EuiFlexItem grow={false} key={trans}>
-            <DraggableBadge
-              contextId={contextId}
-              data-test-subj="network-community-id"
-              eventId={eventId}
-              field={NETWORK_COMMUNITY_ID_FIELD_NAME}
-              value={trans}
-            />
-          </EuiFlexItem>
-        ))
-      : null}
-  </EuiFlexGroup>
-));
-
-Network.displayName = 'Network';
diff --git a/x-pack/plugins/siem/public/components/stat_items/index.test.tsx b/x-pack/plugins/siem/public/components/stat_items/index.test.tsx
deleted file mode 100644
index 95ef747bc429ac..00000000000000
--- a/x-pack/plugins/siem/public/components/stat_items/index.test.tsx
+++ /dev/null
@@ -1,294 +0,0 @@
-/*
- * 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.
- */
-
-/* eslint-disable react/display-name */
-
-import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
-import { mount, ReactWrapper } from 'enzyme';
-import React from 'react';
-import { ThemeProvider } from 'styled-components';
-
-import {
-  StatItemsComponent,
-  StatItemsProps,
-  addValueToFields,
-  addValueToAreaChart,
-  addValueToBarChart,
-  useKpiMatrixStatus,
-  StatItems,
-} from '.';
-import { BarChart } from '../charts/barchart';
-import { AreaChart } from '../charts/areachart';
-import { EuiHorizontalRule } from '@elastic/eui';
-import { fieldTitleChartMapping } from '../page/network/kpi_network';
-import {
-  mockData,
-  mockEnableChartsData,
-  mockNoChartMappings,
-  mockNarrowDateRange,
-} from '../page/network/kpi_network/mock';
-import { mockGlobalState, apolloClientObservable } from '../../mock';
-import { State, createStore } from '../../store';
-import { Provider as ReduxStoreProvider } from 'react-redux';
-import { KpiNetworkData, KpiHostsData } from '../../graphql/types';
-
-const from = new Date('2019-06-15T06:00:00.000Z').valueOf();
-const to = new Date('2019-06-18T06:00:00.000Z').valueOf();
-
-jest.mock('../charts/areachart', () => {
-  return { AreaChart: () => <div className="areachart" /> };
-});
-
-jest.mock('../charts/barchart', () => {
-  return { BarChart: () => <div className="barchart" /> };
-});
-
-describe('Stat Items Component', () => {
-  const theme = () => ({ eui: euiDarkVars, darkMode: true });
-  const state: State = mockGlobalState;
-  const store = createStore(state, apolloClientObservable);
-
-  describe.each([
-    [
-      mount(
-        <ThemeProvider theme={theme}>
-          <ReduxStoreProvider store={store}>
-            <StatItemsComponent
-              description="HOSTS"
-              fields={[{ key: 'hosts', value: null, color: '#6092C0', icon: 'cross' }]}
-              from={from}
-              id="statItems"
-              index={0}
-              key="mock-keys"
-              to={to}
-              narrowDateRange={mockNarrowDateRange}
-            />
-          </ReduxStoreProvider>
-        </ThemeProvider>
-      ),
-    ],
-    [
-      mount(
-        <ThemeProvider theme={theme}>
-          <ReduxStoreProvider store={store}>
-            <StatItemsComponent
-              areaChart={[]}
-              barChart={[]}
-              description="HOSTS"
-              fields={[{ key: 'hosts', value: null, color: '#6092C0', icon: 'cross' }]}
-              from={from}
-              id="statItems"
-              index={0}
-              key="mock-keys"
-              to={to}
-              narrowDateRange={mockNarrowDateRange}
-            />
-          </ReduxStoreProvider>
-        </ThemeProvider>
-      ),
-    ],
-  ])('disable charts', wrapper => {
-    test('it renders the default widget', () => {
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    test('should render titles', () => {
-      expect(wrapper.find('[data-test-subj="stat-title"]')).toBeTruthy();
-    });
-
-    test('should not render icons', () => {
-      expect(wrapper.find('[data-test-subj="stat-icon"]').filter('EuiIcon')).toHaveLength(0);
-    });
-
-    test('should not render barChart', () => {
-      expect(wrapper.find(BarChart)).toHaveLength(0);
-    });
-
-    test('should not render areaChart', () => {
-      expect(wrapper.find(AreaChart)).toHaveLength(0);
-    });
-
-    test('should not render spliter', () => {
-      expect(wrapper.find(EuiHorizontalRule)).toHaveLength(0);
-    });
-  });
-
-  describe('rendering kpis with charts', () => {
-    const mockStatItemsData: StatItemsProps = {
-      areaChart: [
-        {
-          key: 'uniqueSourceIpsHistogram',
-          value: [
-            { x: new Date('2019-05-03T13:00:00.000Z').valueOf(), y: 565975 },
-            { x: new Date('2019-05-04T01:00:00.000Z').valueOf(), y: 1084366 },
-            { x: new Date('2019-05-04T13:00:00.000Z').valueOf(), y: 12280 },
-          ],
-          color: '#D36086',
-        },
-        {
-          key: 'uniqueDestinationIpsHistogram',
-          value: [
-            { x: new Date('2019-05-03T13:00:00.000Z').valueOf(), y: 565975 },
-            { x: new Date('2019-05-04T01:00:00.000Z').valueOf(), y: 1084366 },
-            { x: new Date('2019-05-04T13:00:00.000Z').valueOf(), y: 12280 },
-          ],
-          color: '#9170B8',
-        },
-      ],
-      barChart: [
-        { key: 'uniqueSourceIps', value: [{ x: 'uniqueSourceIps', y: '1714' }], color: '#D36086' },
-        {
-          key: 'uniqueDestinationIps',
-          value: [{ x: 'uniqueDestinationIps', y: 2354 }],
-          color: '#9170B8',
-        },
-      ],
-      description: 'UNIQUE_PRIVATE_IPS',
-      enableAreaChart: true,
-      enableBarChart: true,
-      fields: [
-        {
-          key: 'uniqueSourceIps',
-          description: 'Source',
-          value: 1714,
-          color: '#D36086',
-          icon: 'cross',
-        },
-        {
-          key: 'uniqueDestinationIps',
-          description: 'Dest.',
-          value: 2359,
-          color: '#9170B8',
-          icon: 'cross',
-        },
-      ],
-      from,
-      id: 'statItems',
-      index: 0,
-      key: 'mock-keys',
-      to,
-      narrowDateRange: mockNarrowDateRange,
-    };
-    let wrapper: ReactWrapper;
-    beforeAll(() => {
-      wrapper = mount(
-        <ReduxStoreProvider store={store}>
-          <StatItemsComponent {...mockStatItemsData} />
-        </ReduxStoreProvider>
-      );
-    });
-    test('it renders the default widget', () => {
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    test('should handle multiple titles', () => {
-      expect(wrapper.find('[data-test-subj="stat-title"]')).toHaveLength(2);
-    });
-
-    test('should render kpi icons', () => {
-      expect(wrapper.find('[data-test-subj="stat-icon"]').filter('EuiIcon')).toHaveLength(2);
-    });
-
-    test('should render barChart', () => {
-      expect(wrapper.find(BarChart)).toHaveLength(1);
-    });
-
-    test('should render areaChart', () => {
-      expect(wrapper.find(AreaChart)).toHaveLength(1);
-    });
-
-    test('should render separator', () => {
-      expect(wrapper.find(EuiHorizontalRule)).toHaveLength(1);
-    });
-  });
-});
-
-describe('addValueToFields', () => {
-  const mockNetworkMappings = fieldTitleChartMapping[0];
-  const mockKpiNetworkData = mockData.KpiNetwork;
-  test('should update value from data', () => {
-    const result = addValueToFields(mockNetworkMappings.fields, mockKpiNetworkData);
-    expect(result).toEqual(mockEnableChartsData.fields);
-  });
-});
-
-describe('addValueToAreaChart', () => {
-  const mockNetworkMappings = fieldTitleChartMapping[0];
-  const mockKpiNetworkData = mockData.KpiNetwork;
-  test('should add areaChart from data', () => {
-    const result = addValueToAreaChart(mockNetworkMappings.fields, mockKpiNetworkData);
-    expect(result).toEqual(mockEnableChartsData.areaChart);
-  });
-});
-
-describe('addValueToBarChart', () => {
-  const mockNetworkMappings = fieldTitleChartMapping[0];
-  const mockKpiNetworkData = mockData.KpiNetwork;
-  test('should add areaChart from data', () => {
-    const result = addValueToBarChart(mockNetworkMappings.fields, mockKpiNetworkData);
-    expect(result).toEqual(mockEnableChartsData.barChart);
-  });
-});
-
-describe('useKpiMatrixStatus', () => {
-  const mockNetworkMappings = fieldTitleChartMapping;
-  const mockKpiNetworkData = mockData.KpiNetwork;
-  const MockChildComponent = (mappedStatItemProps: StatItemsProps) => <span />;
-  const MockHookWrapperComponent = ({
-    fieldsMapping,
-    data,
-  }: {
-    fieldsMapping: Readonly<StatItems[]>;
-    data: KpiNetworkData | KpiHostsData;
-  }) => {
-    const statItemsProps: StatItemsProps[] = useKpiMatrixStatus(
-      fieldsMapping,
-      data,
-      'statItem',
-      from,
-      to,
-      mockNarrowDateRange
-    );
-
-    return (
-      <div>
-        {statItemsProps.map(mappedStatItemProps => {
-          return <MockChildComponent {...mappedStatItemProps} />;
-        })}
-      </div>
-    );
-  };
-
-  test('it updates status correctly', () => {
-    const wrapper = mount(
-      <>
-        <MockHookWrapperComponent fieldsMapping={mockNetworkMappings} data={mockKpiNetworkData} />
-      </>
-    );
-
-    expect(wrapper.find('MockChildComponent').get(0).props).toEqual(mockEnableChartsData);
-  });
-
-  test('it should not append areaChart if enableAreaChart is off', () => {
-    const wrapper = mount(
-      <>
-        <MockHookWrapperComponent fieldsMapping={mockNoChartMappings} data={mockKpiNetworkData} />
-      </>
-    );
-
-    expect(wrapper.find('MockChildComponent').get(0).props.areaChart).toBeUndefined();
-  });
-
-  test('it should not append barChart if enableBarChart is off', () => {
-    const wrapper = mount(
-      <>
-        <MockHookWrapperComponent fieldsMapping={mockNoChartMappings} data={mockKpiNetworkData} />
-      </>
-    );
-
-    expect(wrapper.find('MockChildComponent').get(0).props.barChart).toBeUndefined();
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/stat_items/index.tsx b/x-pack/plugins/siem/public/components/stat_items/index.tsx
deleted file mode 100644
index 3ebcba0a85a40d..00000000000000
--- a/x-pack/plugins/siem/public/components/stat_items/index.tsx
+++ /dev/null
@@ -1,286 +0,0 @@
-/*
- * 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 { ScaleType, Rotation, BrushEndListener, ElementClickListener } from '@elastic/charts';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiPanel,
-  EuiHorizontalRule,
-  EuiIcon,
-  EuiTitle,
-  IconType,
-} from '@elastic/eui';
-import { get, getOr } from 'lodash/fp';
-import React, { useState, useEffect } from 'react';
-import styled from 'styled-components';
-
-import { KpiHostsData, KpiNetworkData } from '../../graphql/types';
-import { AreaChart } from '../charts/areachart';
-import { BarChart } from '../charts/barchart';
-import { ChartSeriesData, ChartData, ChartSeriesConfigs, UpdateDateRange } from '../charts/common';
-import { histogramDateTimeFormatter } from '../utils';
-import { getEmptyTagValue } from '../empty_value';
-
-import { InspectButton, InspectButtonContainer } from '../inspect';
-
-const FlexItem = styled(EuiFlexItem)`
-  min-width: 0;
-`;
-
-FlexItem.displayName = 'FlexItem';
-
-const StatValue = styled(EuiTitle)`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-
-StatValue.displayName = 'StatValue';
-
-interface StatItem {
-  color?: string;
-  description?: string;
-  icon?: IconType;
-  key: string;
-  name?: string;
-  value: number | undefined | null;
-}
-
-export interface StatItems {
-  areachartConfigs?: ChartSeriesConfigs;
-  barchartConfigs?: ChartSeriesConfigs;
-  description?: string;
-  enableAreaChart?: boolean;
-  enableBarChart?: boolean;
-  fields: StatItem[];
-  grow?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | true | false | null;
-  index: number;
-  key: string;
-  statKey?: string;
-}
-
-export interface StatItemsProps extends StatItems {
-  areaChart?: ChartSeriesData[];
-  barChart?: ChartSeriesData[];
-  from: number;
-  id: string;
-  narrowDateRange: UpdateDateRange;
-  to: number;
-}
-
-export const numberFormatter = (value: string | number): string => value.toLocaleString();
-const statItemBarchartRotation: Rotation = 90;
-const statItemChartCustomHeight = 74;
-
-export const areachartConfigs = (config?: {
-  xTickFormatter: (value: number) => string;
-  onBrushEnd?: BrushEndListener;
-}) => ({
-  series: {
-    xScaleType: ScaleType.Time,
-    yScaleType: ScaleType.Linear,
-  },
-  axis: {
-    xTickFormatter: get('xTickFormatter', config),
-    yTickFormatter: numberFormatter,
-  },
-  settings: {
-    onBrushEnd: getOr(() => {}, 'onBrushEnd', config),
-  },
-  customHeight: statItemChartCustomHeight,
-});
-
-export const barchartConfigs = (config?: { onElementClick?: ElementClickListener }) => ({
-  series: {
-    xScaleType: ScaleType.Ordinal,
-    yScaleType: ScaleType.Linear,
-    stackAccessors: ['y0'],
-  },
-  axis: {
-    xTickFormatter: numberFormatter,
-  },
-  settings: {
-    onElementClick: getOr(() => {}, 'onElementClick', config),
-    rotation: statItemBarchartRotation,
-  },
-  customHeight: statItemChartCustomHeight,
-});
-
-export const addValueToFields = (
-  fields: StatItem[],
-  data: KpiHostsData | KpiNetworkData
-): StatItem[] => fields.map(field => ({ ...field, value: get(field.key, data) }));
-
-export const addValueToAreaChart = (
-  fields: StatItem[],
-  data: KpiHostsData | KpiNetworkData
-): ChartSeriesData[] =>
-  fields
-    .filter(field => get(`${field.key}Histogram`, data) != null)
-    .map(field => ({
-      ...field,
-      value: get(`${field.key}Histogram`, data),
-      key: `${field.key}Histogram`,
-    }));
-
-export const addValueToBarChart = (
-  fields: StatItem[],
-  data: KpiHostsData | KpiNetworkData
-): ChartSeriesData[] => {
-  if (fields.length === 0) return [];
-  return fields.reduce((acc: ChartSeriesData[], field: StatItem, idx: number) => {
-    const { key, color } = field;
-    const y: number | null = getOr(null, key, data);
-    const x: string = get(`${idx}.name`, fields) || getOr('', `${idx}.description`, fields);
-    const value: [ChartData] = [
-      {
-        x,
-        y,
-        g: key,
-        y0: 0,
-      },
-    ];
-
-    return [
-      ...acc,
-      {
-        key,
-        color,
-        value,
-      },
-    ];
-  }, []);
-};
-
-export const useKpiMatrixStatus = (
-  mappings: Readonly<StatItems[]>,
-  data: KpiHostsData | KpiNetworkData,
-  id: string,
-  from: number,
-  to: number,
-  narrowDateRange: UpdateDateRange
-): StatItemsProps[] => {
-  const [statItemsProps, setStatItemsProps] = useState(mappings as StatItemsProps[]);
-
-  useEffect(() => {
-    setStatItemsProps(
-      mappings.map(stat => {
-        return {
-          ...stat,
-          areaChart: stat.enableAreaChart ? addValueToAreaChart(stat.fields, data) : undefined,
-          barChart: stat.enableBarChart ? addValueToBarChart(stat.fields, data) : undefined,
-          fields: addValueToFields(stat.fields, data),
-          id,
-          key: `kpi-summary-${stat.key}`,
-          statKey: `${stat.key}`,
-          from,
-          to,
-          narrowDateRange,
-        };
-      })
-    );
-  }, [data]);
-
-  return statItemsProps;
-};
-
-export const StatItemsComponent = React.memo<StatItemsProps>(
-  ({
-    areaChart,
-    barChart,
-    description,
-    enableAreaChart,
-    enableBarChart,
-    fields,
-    from,
-    grow,
-    id,
-    index,
-    narrowDateRange,
-    statKey = 'item',
-    to,
-  }) => {
-    const isBarChartDataAvailable =
-      barChart &&
-      barChart.length &&
-      barChart.every(item => item.value != null && item.value.length > 0);
-    const isAreaChartDataAvailable =
-      areaChart &&
-      areaChart.length &&
-      areaChart.every(item => item.value != null && item.value.length > 0);
-
-    return (
-      <FlexItem grow={grow} data-test-subj={`stat-${statKey}`}>
-        <InspectButtonContainer>
-          <EuiPanel>
-            <EuiFlexGroup gutterSize={'none'}>
-              <EuiFlexItem>
-                <EuiTitle size="xxxs">
-                  <h6>{description}</h6>
-                </EuiTitle>
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <InspectButton queryId={id} title={`KPI ${description}`} inspectIndex={index} />
-              </EuiFlexItem>
-            </EuiFlexGroup>
-
-            <EuiFlexGroup>
-              {fields.map(field => (
-                <FlexItem key={`stat-items-field-${field.key}`}>
-                  <EuiFlexGroup alignItems="center" gutterSize="m" responsive={false}>
-                    {(isAreaChartDataAvailable || isBarChartDataAvailable) && field.icon && (
-                      <FlexItem grow={false}>
-                        <EuiIcon
-                          type={field.icon}
-                          color={field.color}
-                          size="l"
-                          data-test-subj="stat-icon"
-                        />
-                      </FlexItem>
-                    )}
-
-                    <FlexItem>
-                      <StatValue>
-                        <p data-test-subj="stat-title">
-                          {field.value != null ? field.value.toLocaleString() : getEmptyTagValue()}{' '}
-                          {field.description}
-                        </p>
-                      </StatValue>
-                    </FlexItem>
-                  </EuiFlexGroup>
-                </FlexItem>
-              ))}
-            </EuiFlexGroup>
-
-            {(enableAreaChart || enableBarChart) && <EuiHorizontalRule />}
-            <EuiFlexGroup>
-              {enableBarChart && (
-                <FlexItem>
-                  <BarChart barChart={barChart} configs={barchartConfigs()} />
-                </FlexItem>
-              )}
-
-              {enableAreaChart && from != null && to != null && (
-                <FlexItem>
-                  <AreaChart
-                    areaChart={areaChart}
-                    configs={areachartConfigs({
-                      xTickFormatter: histogramDateTimeFormatter([from, to]),
-                      onBrushEnd: narrowDateRange,
-                    })}
-                  />
-                </FlexItem>
-              )}
-            </EuiFlexGroup>
-          </EuiPanel>
-        </InspectButtonContainer>
-      </FlexItem>
-    );
-  }
-);
-
-StatItemsComponent.displayName = 'StatItemsComponent';
diff --git a/x-pack/plugins/siem/public/components/super_date_picker/index.test.tsx b/x-pack/plugins/siem/public/components/super_date_picker/index.test.tsx
deleted file mode 100644
index b6b515ceeffa61..00000000000000
--- a/x-pack/plugins/siem/public/components/super_date_picker/index.test.tsx
+++ /dev/null
@@ -1,443 +0,0 @@
-/*
- * 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 { mount } from 'enzyme';
-import React from 'react';
-import { Provider as ReduxStoreProvider } from 'react-redux';
-
-import { DEFAULT_TIMEPICKER_QUICK_RANGES } from '../../../common/constants';
-import { useUiSetting$ } from '../../lib/kibana';
-import { apolloClientObservable, mockGlobalState } from '../../mock';
-import { createUseUiSetting$Mock } from '../../mock/kibana_react';
-import { createStore, State } from '../../store';
-
-import { SuperDatePicker, makeMapStateToProps } from '.';
-import { cloneDeep } from 'lodash/fp';
-
-jest.mock('../../lib/kibana');
-const mockUseUiSetting$ = useUiSetting$ as jest.Mock;
-const timepickerRanges = [
-  {
-    from: 'now/d',
-    to: 'now/d',
-    display: 'Today',
-  },
-  {
-    from: 'now/w',
-    to: 'now/w',
-    display: 'This week',
-  },
-  {
-    from: 'now-15m',
-    to: 'now',
-    display: 'Last 15 minutes',
-  },
-  {
-    from: 'now-30m',
-    to: 'now',
-    display: 'Last 30 minutes',
-  },
-  {
-    from: 'now-1h',
-    to: 'now',
-    display: 'Last 1 hour',
-  },
-  {
-    from: 'now-24h',
-    to: 'now',
-    display: 'Last 24 hours',
-  },
-  {
-    from: 'now-7d',
-    to: 'now',
-    display: 'Last 7 days',
-  },
-  {
-    from: 'now-30d',
-    to: 'now',
-    display: 'Last 30 days',
-  },
-  {
-    from: 'now-90d',
-    to: 'now',
-    display: 'Last 90 days',
-  },
-  {
-    from: 'now-1y',
-    to: 'now',
-    display: 'Last 1 year',
-  },
-];
-
-describe('SIEM Super Date Picker', () => {
-  describe('#SuperDatePicker', () => {
-    const state: State = mockGlobalState;
-    let store = createStore(state, apolloClientObservable);
-
-    beforeEach(() => {
-      jest.clearAllMocks();
-      store = createStore(state, apolloClientObservable);
-      mockUseUiSetting$.mockImplementation((key, defaultValue) => {
-        const useUiSetting$Mock = createUseUiSetting$Mock();
-
-        return key === DEFAULT_TIMEPICKER_QUICK_RANGES
-          ? [timepickerRanges, jest.fn()]
-          : useUiSetting$Mock(key, defaultValue);
-      });
-    });
-
-    describe('Pick Relative Date', () => {
-      let wrapper = mount(
-        <ReduxStoreProvider store={store}>
-          <SuperDatePicker id="global" />
-        </ReduxStoreProvider>
-      );
-      beforeEach(() => {
-        wrapper = mount(
-          <ReduxStoreProvider store={store}>
-            <SuperDatePicker id="global" />
-          </ReduxStoreProvider>
-        );
-        wrapper
-          .find('[data-test-subj="superDatePickerToggleQuickMenuButton"]')
-          .first()
-          .simulate('click');
-        wrapper.update();
-
-        wrapper
-          .find('button.euiQuickSelect__applyButton')
-          .first()
-          .simulate('click');
-        wrapper.update();
-      });
-
-      test('Make Sure it is relative date', () => {
-        expect(store.getState().inputs.global.timerange.kind).toBe('relative');
-      });
-
-      test('Make Sure it is last 24 hours date', () => {
-        expect(store.getState().inputs.global.timerange.fromStr).toBe('now-24h');
-        expect(store.getState().inputs.global.timerange.toStr).toBe('now');
-      });
-
-      test('Make Sure it is Today date', () => {
-        wrapper
-          .find('[data-test-subj="superDatePickerToggleQuickMenuButton"]')
-          .first()
-          .simulate('click');
-        wrapper.update();
-
-        wrapper
-          .find('[data-test-subj="superDatePickerCommonlyUsed_Today"]')
-          .first()
-          .simulate('click');
-        wrapper.update();
-        expect(store.getState().inputs.global.timerange.fromStr).toBe('now/d');
-        expect(store.getState().inputs.global.timerange.toStr).toBe('now/d');
-      });
-
-      test('Make Sure to (end date) is superior than from (start date)', () => {
-        expect(store.getState().inputs.global.timerange.to).toBeGreaterThan(
-          store.getState().inputs.global.timerange.from
-        );
-      });
-    });
-
-    describe('Recently used date ranges', () => {
-      let wrapper = mount(
-        <ReduxStoreProvider store={store}>
-          <SuperDatePicker id="global" />
-        </ReduxStoreProvider>
-      );
-      beforeEach(() => {
-        wrapper = mount(
-          <ReduxStoreProvider store={store}>
-            <SuperDatePicker id="global" />
-          </ReduxStoreProvider>
-        );
-        wrapper
-          .find('[data-test-subj="superDatePickerToggleQuickMenuButton"]')
-          .first()
-          .simulate('click');
-        wrapper.update();
-
-        wrapper
-          .find('[data-test-subj="superDatePickerCommonlyUsed_Today"]')
-          .first()
-          .simulate('click');
-        wrapper.update();
-      });
-
-      test('Today is in Recently used date ranges', () => {
-        expect(
-          wrapper
-            .find('div.euiQuickSelectPopover__section')
-            .at(1)
-            .text()
-        ).toBe('Today');
-      });
-
-      test('Today and Last 24 hours are in Recently used date ranges', () => {
-        wrapper
-          .find('[data-test-subj="superDatePickerToggleQuickMenuButton"]')
-          .first()
-          .simulate('click');
-        wrapper.update();
-
-        wrapper
-          .find('button.euiQuickSelect__applyButton')
-          .first()
-          .simulate('click');
-        wrapper.update();
-
-        expect(
-          wrapper
-            .find('div.euiQuickSelectPopover__section')
-            .at(1)
-            .text()
-        ).toBe('Last 24 hoursToday');
-      });
-
-      test('Make sure that it does not add any duplicate if you click again on today', () => {
-        wrapper
-          .find('[data-test-subj="superDatePickerToggleQuickMenuButton"]')
-          .first()
-          .simulate('click');
-        wrapper.update();
-
-        wrapper
-          .find('[data-test-subj="superDatePickerCommonlyUsed_Today"]')
-          .first()
-          .simulate('click');
-        wrapper.update();
-
-        expect(
-          wrapper
-            .find('div.euiQuickSelectPopover__section')
-            .at(1)
-            .text()
-        ).toBe('Today');
-      });
-    });
-
-    describe('Refresh Every', () => {
-      let wrapper = mount(
-        <ReduxStoreProvider store={store}>
-          <SuperDatePicker id="global" />
-        </ReduxStoreProvider>
-      );
-      beforeEach(() => {
-        wrapper = mount(
-          <ReduxStoreProvider store={store}>
-            <SuperDatePicker id="global" />
-          </ReduxStoreProvider>
-        );
-        wrapper
-          .find('[data-test-subj="superDatePickerToggleQuickMenuButton"]')
-          .first()
-          .simulate('click');
-        wrapper.update();
-
-        const wrapperFixedEuiFieldSearch = wrapper.find(
-          'input[data-test-subj="superDatePickerRefreshIntervalInput"]'
-        );
-
-        wrapperFixedEuiFieldSearch.simulate('change', { target: { value: '2' } });
-        wrapper.update();
-
-        wrapper
-          .find('[data-test-subj="superDatePickerToggleRefreshButton"]')
-          .first()
-          .simulate('click');
-        wrapper.update();
-      });
-
-      test('Make sure the duration get updated to 2 minutes === 120000ms', () => {
-        expect(store.getState().inputs.global.policy.duration).toEqual(120000);
-      });
-
-      test('Make sure the stream live started', () => {
-        expect(store.getState().inputs.global.policy.kind).toBe('interval');
-      });
-
-      test('Make sure we can stop the stream live', () => {
-        wrapper
-          .find('[data-test-subj="superDatePickerToggleQuickMenuButton"]')
-          .first()
-          .simulate('click');
-        wrapper.update();
-
-        wrapper
-          .find('[data-test-subj="superDatePickerToggleRefreshButton"]')
-          .first()
-          .simulate('click');
-        wrapper.update();
-
-        expect(store.getState().inputs.global.policy.kind).toBe('manual');
-      });
-    });
-
-    describe('Pick Absolute Date', () => {
-      let wrapper = mount(
-        <ReduxStoreProvider store={store}>
-          <SuperDatePicker id="global" />
-        </ReduxStoreProvider>
-      );
-      beforeEach(() => {
-        wrapper = mount(
-          <ReduxStoreProvider store={store}>
-            <SuperDatePicker id="global" />
-          </ReduxStoreProvider>
-        );
-        wrapper
-          .find('[data-test-subj="superDatePickerShowDatesButton"]')
-          .first()
-          .simulate('click');
-        wrapper.update();
-
-        wrapper
-          .find('[data-test-subj="superDatePickerstartDatePopoverButton"]')
-          .first()
-          .simulate('click');
-        wrapper.update();
-
-        wrapper
-          .find('[data-test-subj="superDatePickerAbsoluteTab"]')
-          .first()
-          .simulate('click');
-        wrapper.update();
-
-        wrapper
-          .find('button.react-datepicker__navigation--previous')
-          .first()
-          .simulate('click');
-        wrapper.update();
-
-        wrapper
-          .find('div.react-datepicker__day')
-          .at(1)
-          .simulate('click');
-        wrapper.update();
-
-        wrapper
-          .find('button[data-test-subj="superDatePickerApplyTimeButton"]')
-          .first()
-          .simulate('click');
-        wrapper.update();
-      });
-    });
-
-    describe('#makeMapStateToProps', () => {
-      test('it should return the same shallow references given the same input twice', () => {
-        const mapStateToProps = makeMapStateToProps();
-        const props1 = mapStateToProps(state, { id: 'global' });
-        const props2 = mapStateToProps(state, { id: 'global' });
-        Object.keys(props1).forEach(key => {
-          expect((props1 as Record<string, {}>)[key]).toBe((props2 as Record<string, {}>)[key]);
-        });
-      });
-
-      test('it should not return the same reference if policy kind is different', () => {
-        const mapStateToProps = makeMapStateToProps();
-        const props1 = mapStateToProps(state, { id: 'global' });
-        const clone = cloneDeep(state);
-        clone.inputs.global.policy.kind = 'interval';
-        const props2 = mapStateToProps(clone, { id: 'global' });
-        expect(props1.policy).not.toBe(props2.policy);
-      });
-
-      test('it should not return the same reference if duration is different', () => {
-        const mapStateToProps = makeMapStateToProps();
-        const props1 = mapStateToProps(state, { id: 'global' });
-        const clone = cloneDeep(state);
-        clone.inputs.global.policy.duration = 99999;
-        const props2 = mapStateToProps(clone, { id: 'global' });
-        expect(props1.duration).not.toBe(props2.duration);
-      });
-
-      test('it should not return the same reference if timerange kind is different', () => {
-        const mapStateToProps = makeMapStateToProps();
-        const props1 = mapStateToProps(state, { id: 'global' });
-        const clone = cloneDeep(state);
-        clone.inputs.global.timerange.kind = 'absolute';
-        const props2 = mapStateToProps(clone, { id: 'global' });
-        expect(props1.kind).not.toBe(props2.kind);
-      });
-
-      test('it should not return the same reference if timerange from is different', () => {
-        const mapStateToProps = makeMapStateToProps();
-        const props1 = mapStateToProps(state, { id: 'global' });
-        const clone = cloneDeep(state);
-        clone.inputs.global.timerange.from = 999;
-        const props2 = mapStateToProps(clone, { id: 'global' });
-        expect(props1.start).not.toBe(props2.start);
-      });
-
-      test('it should not return the same reference if timerange to is different', () => {
-        const mapStateToProps = makeMapStateToProps();
-        const props1 = mapStateToProps(state, { id: 'global' });
-        const clone = cloneDeep(state);
-        clone.inputs.global.timerange.to = 999;
-        const props2 = mapStateToProps(clone, { id: 'global' });
-        expect(props1.end).not.toBe(props2.end);
-      });
-
-      test('it should not return the same reference of toStr if toStr different', () => {
-        const mapStateToProps = makeMapStateToProps();
-        const props1 = mapStateToProps(state, { id: 'global' });
-        const clone = cloneDeep(state);
-        clone.inputs.global.timerange.toStr = 'some other string';
-        const props2 = mapStateToProps(clone, { id: 'global' });
-        expect(props1.toStr).not.toBe(props2.toStr);
-      });
-
-      test('it should not return the same reference of fromStr if fromStr different', () => {
-        const mapStateToProps = makeMapStateToProps();
-        const props1 = mapStateToProps(state, { id: 'global' });
-        const clone = cloneDeep(state);
-        clone.inputs.global.timerange.fromStr = 'some other string';
-        const props2 = mapStateToProps(clone, { id: 'global' });
-        expect(props1.fromStr).not.toBe(props2.fromStr);
-      });
-
-      test('it should not return the same reference of isLoadingSelector if the query different', () => {
-        const mapStateToProps = makeMapStateToProps();
-        const props1 = mapStateToProps(state, { id: 'global' });
-        const clone = cloneDeep(state);
-        clone.inputs.global.queries = [
-          {
-            loading: true,
-            id: '1',
-            inspect: { dsl: [], response: [] },
-            isInspected: false,
-            refetch: null,
-            selectedInspectIndex: 0,
-          },
-        ];
-        const props2 = mapStateToProps(clone, { id: 'global' });
-        expect(props1.isLoading).not.toBe(props2.isLoading);
-      });
-
-      test('it should not return the same reference of refetchSelector if the query different', () => {
-        const mapStateToProps = makeMapStateToProps();
-        const props1 = mapStateToProps(state, { id: 'global' });
-        const clone = cloneDeep(state);
-        clone.inputs.global.queries = [
-          {
-            loading: true,
-            id: '1',
-            inspect: { dsl: [], response: [] },
-            isInspected: false,
-            refetch: null,
-            selectedInspectIndex: 0,
-          },
-        ];
-        const props2 = mapStateToProps(clone, { id: 'global' });
-        expect(props1.queries).not.toBe(props2.queries);
-      });
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/super_date_picker/index.tsx b/x-pack/plugins/siem/public/components/super_date_picker/index.tsx
deleted file mode 100644
index ad38a7d61bcba6..00000000000000
--- a/x-pack/plugins/siem/public/components/super_date_picker/index.tsx
+++ /dev/null
@@ -1,313 +0,0 @@
-/*
- * 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 dateMath from '@elastic/datemath';
-import {
-  EuiSuperDatePicker,
-  OnRefreshChangeProps,
-  EuiSuperDatePickerRecentRange,
-  OnRefreshProps,
-  OnTimeChangeProps,
-} from '@elastic/eui';
-import { getOr, take, isEmpty } from 'lodash/fp';
-import React, { useState, useCallback } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
-import { Dispatch } from 'redux';
-
-import { DEFAULT_TIMEPICKER_QUICK_RANGES } from '../../../common/constants';
-import { useUiSetting$ } from '../../lib/kibana';
-import { inputsModel, State } from '../../store';
-import { inputsActions, timelineActions } from '../../store/actions';
-import { InputsModelId } from '../../store/inputs/constants';
-import {
-  policySelector,
-  durationSelector,
-  kindSelector,
-  startSelector,
-  endSelector,
-  fromStrSelector,
-  toStrSelector,
-  isLoadingSelector,
-  queriesSelector,
-  kqlQuerySelector,
-} from './selectors';
-import { InputsRange } from '../../store/inputs/model';
-
-const MAX_RECENTLY_USED_RANGES = 9;
-
-interface Range {
-  from: string;
-  to: string;
-  display: string;
-}
-
-interface UpdateReduxTime extends OnTimeChangeProps {
-  id: InputsModelId;
-  kql?: inputsModel.GlobalKqlQuery | undefined;
-  timelineId?: string;
-}
-
-interface ReturnUpdateReduxTime {
-  kqlHaveBeenUpdated: boolean;
-}
-
-export type DispatchUpdateReduxTime = ({
-  end,
-  id,
-  isQuickSelection,
-  kql,
-  start,
-  timelineId,
-}: UpdateReduxTime) => ReturnUpdateReduxTime;
-
-interface OwnProps {
-  disabled?: boolean;
-  id: InputsModelId;
-  timelineId?: string;
-}
-
-export type SuperDatePickerProps = OwnProps & PropsFromRedux;
-
-export const SuperDatePickerComponent = React.memo<SuperDatePickerProps>(
-  ({
-    duration,
-    end,
-    fromStr,
-    id,
-    isLoading,
-    kind,
-    kqlQuery,
-    policy,
-    queries,
-    setDuration,
-    start,
-    startAutoReload,
-    stopAutoReload,
-    timelineId,
-    toStr,
-    updateReduxTime,
-  }) => {
-    const [isQuickSelection, setIsQuickSelection] = useState(true);
-    const [recentlyUsedRanges, setRecentlyUsedRanges] = useState<EuiSuperDatePickerRecentRange[]>(
-      []
-    );
-    const onRefresh = useCallback(
-      ({ start: newStart, end: newEnd }: OnRefreshProps): void => {
-        const { kqlHaveBeenUpdated } = updateReduxTime({
-          end: newEnd,
-          id,
-          isInvalid: false,
-          isQuickSelection,
-          kql: kqlQuery,
-          start: newStart,
-          timelineId,
-        });
-        const currentStart = formatDate(newStart);
-        const currentEnd = isQuickSelection
-          ? formatDate(newEnd, { roundUp: true })
-          : formatDate(newEnd);
-        if (
-          !kqlHaveBeenUpdated &&
-          (!isQuickSelection || (start === currentStart && end === currentEnd))
-        ) {
-          refetchQuery(queries);
-        }
-      },
-      [end, id, isQuickSelection, kqlQuery, start, timelineId]
-    );
-
-    const onRefreshChange = useCallback(
-      ({ isPaused, refreshInterval }: OnRefreshChangeProps): void => {
-        if (duration !== refreshInterval) {
-          setDuration({ id, duration: refreshInterval });
-        }
-
-        if (isPaused && policy === 'interval') {
-          stopAutoReload({ id });
-        } else if (!isPaused && policy === 'manual') {
-          startAutoReload({ id });
-        }
-
-        if (!isPaused && (!isQuickSelection || (isQuickSelection && toStr !== 'now'))) {
-          refetchQuery(queries);
-        }
-      },
-      [id, isQuickSelection, duration, policy, toStr]
-    );
-
-    const refetchQuery = (newQueries: inputsModel.GlobalGraphqlQuery[]) => {
-      newQueries.forEach(q => q.refetch && (q.refetch as inputsModel.Refetch)());
-    };
-
-    const onTimeChange = useCallback(
-      ({
-        start: newStart,
-        end: newEnd,
-        isQuickSelection: newIsQuickSelection,
-        isInvalid,
-      }: OnTimeChangeProps) => {
-        if (!isInvalid) {
-          updateReduxTime({
-            end: newEnd,
-            id,
-            isInvalid,
-            isQuickSelection: newIsQuickSelection,
-            kql: kqlQuery,
-            start: newStart,
-            timelineId,
-          });
-          const newRecentlyUsedRanges = [
-            { start: newStart, end: newEnd },
-            ...take(
-              MAX_RECENTLY_USED_RANGES,
-              recentlyUsedRanges.filter(
-                recentlyUsedRange =>
-                  !(recentlyUsedRange.start === newStart && recentlyUsedRange.end === newEnd)
-              )
-            ),
-          ];
-
-          setRecentlyUsedRanges(newRecentlyUsedRanges);
-          setIsQuickSelection(newIsQuickSelection);
-        }
-      },
-      [recentlyUsedRanges, kqlQuery]
-    );
-
-    const endDate = kind === 'relative' ? toStr : new Date(end).toISOString();
-    const startDate = kind === 'relative' ? fromStr : new Date(start).toISOString();
-
-    const [quickRanges] = useUiSetting$<Range[]>(DEFAULT_TIMEPICKER_QUICK_RANGES);
-    const commonlyUsedRanges = isEmpty(quickRanges)
-      ? []
-      : quickRanges.map(({ from, to, display }) => ({
-          start: from,
-          end: to,
-          label: display,
-        }));
-
-    return (
-      <EuiSuperDatePicker
-        commonlyUsedRanges={commonlyUsedRanges}
-        end={endDate}
-        isLoading={isLoading}
-        isPaused={policy === 'manual'}
-        onRefresh={onRefresh}
-        onRefreshChange={onRefreshChange}
-        onTimeChange={onTimeChange}
-        recentlyUsedRanges={recentlyUsedRanges}
-        refreshInterval={duration}
-        showUpdateButton={true}
-        start={startDate}
-      />
-    );
-  }
-);
-
-export const formatDate = (
-  date: string,
-  options?: {
-    roundUp?: boolean;
-  }
-) => {
-  const momentDate = dateMath.parse(date, options);
-  return momentDate != null && momentDate.isValid() ? momentDate.valueOf() : 0;
-};
-
-export const dispatchUpdateReduxTime = (dispatch: Dispatch) => ({
-  end,
-  id,
-  isQuickSelection,
-  kql,
-  start,
-  timelineId,
-}: UpdateReduxTime): ReturnUpdateReduxTime => {
-  const fromDate = formatDate(start);
-  let toDate = formatDate(end, { roundUp: true });
-  if (isQuickSelection) {
-    dispatch(
-      inputsActions.setRelativeRangeDatePicker({
-        id,
-        fromStr: start,
-        toStr: end,
-        from: fromDate,
-        to: toDate,
-      })
-    );
-  } else {
-    toDate = formatDate(end);
-    dispatch(
-      inputsActions.setAbsoluteRangeDatePicker({
-        id,
-        from: formatDate(start),
-        to: formatDate(end),
-      })
-    );
-  }
-  if (timelineId != null) {
-    dispatch(
-      timelineActions.updateRange({
-        id: timelineId,
-        start: fromDate,
-        end: toDate,
-      })
-    );
-  }
-  if (kql) {
-    return {
-      kqlHaveBeenUpdated: kql.refetch(dispatch),
-    };
-  }
-
-  return {
-    kqlHaveBeenUpdated: false,
-  };
-};
-
-export const makeMapStateToProps = () => {
-  const getDurationSelector = durationSelector();
-  const getEndSelector = endSelector();
-  const getFromStrSelector = fromStrSelector();
-  const getIsLoadingSelector = isLoadingSelector();
-  const getKindSelector = kindSelector();
-  const getKqlQuerySelector = kqlQuerySelector();
-  const getPolicySelector = policySelector();
-  const getQueriesSelector = queriesSelector();
-  const getStartSelector = startSelector();
-  const getToStrSelector = toStrSelector();
-  return (state: State, { id }: OwnProps) => {
-    const inputsRange: InputsRange = getOr({}, `inputs.${id}`, state);
-    return {
-      duration: getDurationSelector(inputsRange),
-      end: getEndSelector(inputsRange),
-      fromStr: getFromStrSelector(inputsRange),
-      isLoading: getIsLoadingSelector(inputsRange),
-      kind: getKindSelector(inputsRange),
-      kqlQuery: getKqlQuerySelector(inputsRange) as inputsModel.GlobalKqlQuery,
-      policy: getPolicySelector(inputsRange),
-      queries: getQueriesSelector(inputsRange) as inputsModel.GlobalGraphqlQuery[],
-      start: getStartSelector(inputsRange),
-      toStr: getToStrSelector(inputsRange),
-    };
-  };
-};
-
-SuperDatePickerComponent.displayName = 'SuperDatePickerComponent';
-
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  startAutoReload: ({ id }: { id: InputsModelId }) =>
-    dispatch(inputsActions.startAutoReload({ id })),
-  stopAutoReload: ({ id }: { id: InputsModelId }) => dispatch(inputsActions.stopAutoReload({ id })),
-  setDuration: ({ id, duration }: { id: InputsModelId; duration: number }) =>
-    dispatch(inputsActions.setDuration({ id, duration })),
-  updateReduxTime: dispatchUpdateReduxTime(dispatch),
-});
-
-export const connector = connect(makeMapStateToProps, mapDispatchToProps);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-export const SuperDatePicker = connector(SuperDatePickerComponent);
diff --git a/x-pack/plugins/siem/public/components/tables/helpers.tsx b/x-pack/plugins/siem/public/components/tables/helpers.tsx
deleted file mode 100644
index f4f7375c26d14c..00000000000000
--- a/x-pack/plugins/siem/public/components/tables/helpers.tsx
+++ /dev/null
@@ -1,240 +0,0 @@
-/*
- * 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 { EuiLink, EuiPopover, EuiToolTip, EuiText, EuiTextColor } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n/react';
-import React, { useState } from 'react';
-import styled from 'styled-components';
-
-import { DragEffects, DraggableWrapper } from '../drag_and_drop/draggable_wrapper';
-import { escapeDataProviderId } from '../drag_and_drop/helpers';
-import { defaultToEmptyTag, getEmptyTagValue } from '../empty_value';
-import { MoreRowItems, Spacer } from '../page';
-import { IS_OPERATOR } from '../timeline/data_providers/data_provider';
-import { Provider } from '../timeline/data_providers/provider';
-
-const Subtext = styled.div`
-  font-size: ${props => props.theme.eui.euiFontSizeXS};
-`;
-
-export const getRowItemDraggable = ({
-  rowItem,
-  attrName,
-  idPrefix,
-  render,
-  dragDisplayValue,
-}: {
-  rowItem: string | null | undefined;
-  attrName: string;
-  idPrefix: string;
-  render?: (item: string) => JSX.Element;
-  displayCount?: number;
-  dragDisplayValue?: string;
-  maxOverflow?: number;
-}): JSX.Element => {
-  if (rowItem != null) {
-    const id = escapeDataProviderId(`${idPrefix}-${attrName}-${rowItem}`);
-    return (
-      <DraggableWrapper
-        key={id}
-        dataProvider={{
-          and: [],
-          enabled: true,
-          id,
-          name: rowItem,
-          excluded: false,
-          kqlQuery: '',
-          queryMatch: {
-            field: attrName,
-            value: rowItem,
-            displayValue: dragDisplayValue || rowItem,
-            operator: IS_OPERATOR,
-          },
-        }}
-        render={(dataProvider, _, snapshot) =>
-          snapshot.isDragging ? (
-            <DragEffects>
-              <Provider dataProvider={dataProvider} />
-            </DragEffects>
-          ) : (
-            <>{render ? render(rowItem) : defaultToEmptyTag(rowItem)}</>
-          )
-        }
-      />
-    );
-  } else {
-    return getEmptyTagValue();
-  }
-};
-
-export const getRowItemDraggables = ({
-  rowItems,
-  attrName,
-  idPrefix,
-  render,
-  dragDisplayValue,
-  displayCount = 5,
-  maxOverflow = 5,
-}: {
-  rowItems: string[] | null | undefined;
-  attrName: string;
-  idPrefix: string;
-  render?: (item: string) => JSX.Element;
-  displayCount?: number;
-  dragDisplayValue?: string;
-  maxOverflow?: number;
-}): JSX.Element => {
-  if (rowItems != null && rowItems.length > 0) {
-    const draggables = rowItems.slice(0, displayCount).map((rowItem, index) => {
-      const id = escapeDataProviderId(`${idPrefix}-${attrName}-${rowItem}-${index}`);
-      return (
-        <React.Fragment key={id}>
-          {index !== 0 && (
-            <>
-              {','}
-              <Spacer />
-            </>
-          )}
-          <DraggableWrapper
-            key={id}
-            dataProvider={{
-              and: [],
-              enabled: true,
-              id,
-              name: rowItem,
-              excluded: false,
-              kqlQuery: '',
-              queryMatch: {
-                field: attrName,
-                value: rowItem,
-                displayValue: dragDisplayValue || rowItem,
-                operator: IS_OPERATOR,
-              },
-            }}
-            render={(dataProvider, _, snapshot) =>
-              snapshot.isDragging ? (
-                <DragEffects>
-                  <Provider dataProvider={dataProvider} />
-                </DragEffects>
-              ) : (
-                <>{render ? render(rowItem) : defaultToEmptyTag(rowItem)}</>
-              )
-            }
-          />
-        </React.Fragment>
-      );
-    });
-
-    return draggables.length > 0 ? (
-      <>
-        {draggables} {getRowItemOverflow(rowItems, idPrefix, displayCount, maxOverflow)}
-      </>
-    ) : (
-      getEmptyTagValue()
-    );
-  } else {
-    return getEmptyTagValue();
-  }
-};
-
-export const getRowItemOverflow = (
-  rowItems: string[],
-  idPrefix: string,
-  overflowIndexStart = 5,
-  maxOverflowItems = 5
-): JSX.Element => {
-  return (
-    <>
-      {rowItems.length > overflowIndexStart && (
-        <Popover count={rowItems.length - overflowIndexStart} idPrefix={idPrefix}>
-          <EuiText size="xs">
-            <ul>
-              {rowItems
-                .slice(overflowIndexStart, overflowIndexStart + maxOverflowItems)
-                .map(rowItem => (
-                  <li key={`${idPrefix}-${rowItem}`}>{defaultToEmptyTag(rowItem)}</li>
-                ))}
-            </ul>
-
-            {rowItems.length > overflowIndexStart + maxOverflowItems && (
-              <p data-test-subj="popover-additional-overflow">
-                <EuiTextColor color="subdued">
-                  {rowItems.length - overflowIndexStart - maxOverflowItems}{' '}
-                  <FormattedMessage
-                    id="xpack.siem.tables.rowItemHelper.moreDescription"
-                    defaultMessage="more not shown"
-                  />
-                </EuiTextColor>
-              </p>
-            )}
-          </EuiText>
-        </Popover>
-      )}
-    </>
-  );
-};
-
-export const PopoverComponent = ({
-  children,
-  count,
-  idPrefix,
-}: {
-  children: React.ReactNode;
-  count: number;
-  idPrefix: string;
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <Subtext>
-      <EuiPopover
-        button={<EuiLink onClick={() => setIsOpen(!isOpen)}>{`+${count} More`}</EuiLink>}
-        closePopover={() => setIsOpen(!isOpen)}
-        id={`${idPrefix}-popover`}
-        isOpen={isOpen}
-      >
-        {children}
-      </EuiPopover>
-    </Subtext>
-  );
-};
-
-PopoverComponent.displayName = 'PopoverComponent';
-
-export const Popover = React.memo(PopoverComponent);
-
-Popover.displayName = 'Popover';
-
-export const OverflowFieldComponent = ({
-  value,
-  showToolTip = true,
-  overflowLength = 50,
-}: {
-  value: string;
-  showToolTip?: boolean;
-  overflowLength?: number;
-}) => (
-  <span>
-    {showToolTip ? (
-      <EuiToolTip data-test-subj={'message-tooltip'} content={'message'}>
-        <>{value.substring(0, overflowLength)}</>
-      </EuiToolTip>
-    ) : (
-      <>{value.substring(0, overflowLength)}</>
-    )}
-    {value.length > overflowLength && (
-      <EuiToolTip content={value}>
-        <MoreRowItems type="boxesHorizontal" />
-      </EuiToolTip>
-    )}
-  </span>
-);
-
-OverflowFieldComponent.displayName = 'OverflowFieldComponent';
-
-export const OverflowField = React.memo(OverflowFieldComponent);
-
-OverflowField.displayName = 'OverflowField';
diff --git a/x-pack/plugins/siem/public/components/timeline/auto_save_warning/index.tsx b/x-pack/plugins/siem/public/components/timeline/auto_save_warning/index.tsx
deleted file mode 100644
index 90d0738aba72f2..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/auto_save_warning/index.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-/*
- * 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 {
-  EuiButton,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiGlobalToastListToast as Toast,
-} from '@elastic/eui';
-import { getOr } from 'lodash/fp';
-import React from 'react';
-import { connect, ConnectedProps } from 'react-redux';
-
-import { State, timelineSelectors } from '../../../store';
-import { setTimelineRangeDatePicker as dispatchSetTimelineRangeDatePicker } from '../../../store/inputs/actions';
-
-import * as i18n from './translations';
-import { timelineActions } from '../../../store/timeline';
-import { AutoSavedWarningMsg } from '../../../store/timeline/types';
-import { useStateToaster } from '../../toasters';
-
-const AutoSaveWarningMsgComponent = React.memo<PropsFromRedux>(
-  ({
-    newTimelineModel,
-    setTimelineRangeDatePicker,
-    timelineId,
-    updateAutoSaveMsg,
-    updateTimeline,
-  }) => {
-    const dispatchToaster = useStateToaster()[1];
-    if (timelineId != null && newTimelineModel != null) {
-      const toast: Toast = {
-        id: 'AutoSaveWarningMsg',
-        title: i18n.TITLE,
-        color: 'warning',
-        iconType: 'alert',
-        toastLifeTimeMs: 10000,
-        text: (
-          <>
-            <p>{i18n.DESCRIPTION}</p>
-            <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
-              <EuiFlexItem grow={false}>
-                <EuiButton
-                  size="s"
-                  onClick={() => {
-                    updateTimeline({ id: timelineId, timeline: newTimelineModel });
-                    updateAutoSaveMsg({ timelineId: null, newTimelineModel: null });
-                    setTimelineRangeDatePicker({
-                      from: getOr(0, 'dateRange.start', newTimelineModel),
-                      to: getOr(0, 'dateRange.end', newTimelineModel),
-                    });
-                  }}
-                >
-                  {i18n.REFRESH_TIMELINE}
-                </EuiButton>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </>
-        ),
-      };
-      dispatchToaster({
-        type: 'addToaster',
-        toast,
-      });
-    }
-
-    return null;
-  }
-);
-
-AutoSaveWarningMsgComponent.displayName = 'AutoSaveWarningMsgComponent';
-
-const mapStateToProps = (state: State) => {
-  const autoSaveMessage: AutoSavedWarningMsg = timelineSelectors.autoSaveMsgSelector(state);
-
-  return {
-    timelineId: autoSaveMessage.timelineId,
-    newTimelineModel: autoSaveMessage.newTimelineModel,
-  };
-};
-
-const mapDispatchToProps = {
-  setTimelineRangeDatePicker: dispatchSetTimelineRangeDatePicker,
-  updateAutoSaveMsg: timelineActions.updateAutoSaveMsg,
-  updateTimeline: timelineActions.updateTimeline,
-};
-
-const connector = connect(mapStateToProps, mapDispatchToProps);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-export const AutoSaveWarningMsg = connector(AutoSaveWarningMsgComponent);
diff --git a/x-pack/plugins/siem/public/components/timeline/body/actions/index.test.tsx b/x-pack/plugins/siem/public/components/timeline/body/actions/index.test.tsx
deleted file mode 100644
index 6055745e9378ee..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/body/actions/index.test.tsx
+++ /dev/null
@@ -1,265 +0,0 @@
-/*
- * 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 { mount } from 'enzyme';
-import React from 'react';
-
-import { TestProviders } from '../../../../mock';
-import { DEFAULT_ACTIONS_COLUMN_WIDTH } from '../constants';
-
-import { Actions } from '.';
-
-describe('Actions', () => {
-  test('it renders a checkbox for selecting the event when `showCheckboxes` is `true`', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <Actions
-          actionsColumnWidth={DEFAULT_ACTIONS_COLUMN_WIDTH}
-          associateNote={jest.fn()}
-          checked={false}
-          expanded={false}
-          eventId="abc"
-          eventIsPinned={false}
-          getNotesByIds={jest.fn()}
-          loading={false}
-          loadingEventIds={[]}
-          noteIds={[]}
-          onEventToggled={jest.fn()}
-          onPinClicked={jest.fn()}
-          onRowSelected={jest.fn()}
-          showCheckboxes={true}
-          showNotes={false}
-          toggleShowNotes={jest.fn()}
-          updateNote={jest.fn()}
-        />
-      </TestProviders>
-    );
-
-    expect(wrapper.find('[data-test-subj="select-event"]').exists()).toEqual(true);
-  });
-
-  test('it does NOT render a checkbox for selecting the event when `showCheckboxes` is `false`', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <Actions
-          actionsColumnWidth={DEFAULT_ACTIONS_COLUMN_WIDTH}
-          associateNote={jest.fn()}
-          checked={false}
-          expanded={false}
-          eventId="abc"
-          eventIsPinned={false}
-          getNotesByIds={jest.fn()}
-          loading={false}
-          loadingEventIds={[]}
-          noteIds={[]}
-          onEventToggled={jest.fn()}
-          onPinClicked={jest.fn()}
-          onRowSelected={jest.fn()}
-          showCheckboxes={false}
-          showNotes={false}
-          toggleShowNotes={jest.fn()}
-          updateNote={jest.fn()}
-        />
-      </TestProviders>
-    );
-
-    expect(wrapper.find('[data-test-subj="select-event"]').exists()).toBe(false);
-  });
-
-  test('it renders a button for expanding the event', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <Actions
-          actionsColumnWidth={DEFAULT_ACTIONS_COLUMN_WIDTH}
-          associateNote={jest.fn()}
-          checked={false}
-          expanded={false}
-          eventId="abc"
-          eventIsPinned={false}
-          getNotesByIds={jest.fn()}
-          loading={false}
-          loadingEventIds={[]}
-          noteIds={[]}
-          onEventToggled={jest.fn()}
-          onPinClicked={jest.fn()}
-          onRowSelected={jest.fn()}
-          showCheckboxes={false}
-          showNotes={false}
-          toggleShowNotes={jest.fn()}
-          updateNote={jest.fn()}
-        />
-      </TestProviders>
-    );
-
-    expect(wrapper.find('[data-test-subj="expand-event"]').exists()).toEqual(true);
-  });
-
-  test('it invokes onEventToggled when the button to expand an event is clicked', () => {
-    const onEventToggled = jest.fn();
-
-    const wrapper = mount(
-      <TestProviders>
-        <Actions
-          actionsColumnWidth={DEFAULT_ACTIONS_COLUMN_WIDTH}
-          associateNote={jest.fn()}
-          checked={false}
-          expanded={false}
-          eventId="abc"
-          eventIsPinned={false}
-          getNotesByIds={jest.fn()}
-          loading={false}
-          loadingEventIds={[]}
-          noteIds={[]}
-          onEventToggled={onEventToggled}
-          onPinClicked={jest.fn()}
-          onRowSelected={jest.fn()}
-          showCheckboxes={false}
-          showNotes={false}
-          toggleShowNotes={jest.fn()}
-          updateNote={jest.fn()}
-        />
-      </TestProviders>
-    );
-
-    wrapper
-      .find('[data-test-subj="expand-event"]')
-      .first()
-      .simulate('click');
-
-    expect(onEventToggled).toBeCalled();
-  });
-
-  test('it does NOT render a notes button when isEventsViewer is true', () => {
-    const toggleShowNotes = jest.fn();
-
-    const wrapper = mount(
-      <TestProviders>
-        <Actions
-          actionsColumnWidth={DEFAULT_ACTIONS_COLUMN_WIDTH}
-          associateNote={jest.fn()}
-          checked={false}
-          expanded={false}
-          eventId="abc"
-          eventIsPinned={false}
-          getNotesByIds={jest.fn()}
-          isEventViewer={true}
-          loading={false}
-          loadingEventIds={[]}
-          noteIds={[]}
-          onEventToggled={jest.fn()}
-          onPinClicked={jest.fn()}
-          onRowSelected={jest.fn()}
-          showCheckboxes={false}
-          showNotes={false}
-          toggleShowNotes={toggleShowNotes}
-          updateNote={jest.fn()}
-        />
-      </TestProviders>
-    );
-
-    expect(wrapper.find('[data-test-subj="timeline-notes-button-small"]').exists()).toBe(false);
-  });
-
-  test('it invokes toggleShowNotes when the button for adding notes is clicked', () => {
-    const toggleShowNotes = jest.fn();
-
-    const wrapper = mount(
-      <TestProviders>
-        <Actions
-          actionsColumnWidth={DEFAULT_ACTIONS_COLUMN_WIDTH}
-          associateNote={jest.fn()}
-          checked={false}
-          expanded={false}
-          eventId="abc"
-          eventIsPinned={false}
-          getNotesByIds={jest.fn()}
-          loading={false}
-          loadingEventIds={[]}
-          noteIds={[]}
-          onEventToggled={jest.fn()}
-          onPinClicked={jest.fn()}
-          onRowSelected={jest.fn()}
-          showCheckboxes={false}
-          showNotes={false}
-          toggleShowNotes={toggleShowNotes}
-          updateNote={jest.fn()}
-        />
-      </TestProviders>
-    );
-
-    wrapper
-      .find('[data-test-subj="timeline-notes-button-small"]')
-      .first()
-      .simulate('click');
-
-    expect(toggleShowNotes).toBeCalled();
-  });
-
-  test('it does NOT render a pin button when isEventViewer is true', () => {
-    const onPinClicked = jest.fn();
-
-    const wrapper = mount(
-      <TestProviders>
-        <Actions
-          actionsColumnWidth={DEFAULT_ACTIONS_COLUMN_WIDTH}
-          associateNote={jest.fn()}
-          checked={false}
-          expanded={false}
-          eventId="abc"
-          eventIsPinned={false}
-          getNotesByIds={jest.fn()}
-          isEventViewer={true}
-          loading={false}
-          loadingEventIds={[]}
-          noteIds={[]}
-          onEventToggled={jest.fn()}
-          onPinClicked={onPinClicked}
-          onRowSelected={jest.fn()}
-          showCheckboxes={false}
-          showNotes={false}
-          toggleShowNotes={jest.fn()}
-          updateNote={jest.fn()}
-        />
-      </TestProviders>
-    );
-
-    expect(wrapper.find('[data-test-subj="pin"]').exists()).toBe(false);
-  });
-
-  test('it invokes onPinClicked when the button for pinning events is clicked', () => {
-    const onPinClicked = jest.fn();
-
-    const wrapper = mount(
-      <TestProviders>
-        <Actions
-          actionsColumnWidth={DEFAULT_ACTIONS_COLUMN_WIDTH}
-          associateNote={jest.fn()}
-          checked={false}
-          expanded={false}
-          eventId="abc"
-          eventIsPinned={false}
-          getNotesByIds={jest.fn()}
-          loading={false}
-          loadingEventIds={[]}
-          noteIds={[]}
-          onEventToggled={jest.fn()}
-          onPinClicked={onPinClicked}
-          onRowSelected={jest.fn()}
-          showCheckboxes={false}
-          showNotes={false}
-          toggleShowNotes={jest.fn()}
-          updateNote={jest.fn()}
-        />
-      </TestProviders>
-    );
-
-    wrapper
-      .find('[data-test-subj="pin"]')
-      .first()
-      .simulate('click');
-
-    expect(onPinClicked).toHaveBeenCalled();
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/timeline/body/actions/index.tsx b/x-pack/plugins/siem/public/components/timeline/body/actions/index.tsx
deleted file mode 100644
index 030e9be7703ed5..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/body/actions/index.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-/*
- * 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 { EuiButtonIcon, EuiCheckbox, EuiLoadingSpinner, EuiToolTip } from '@elastic/eui';
-import React from 'react';
-
-import { Note } from '../../../../lib/note';
-import { AssociateNote, UpdateNote } from '../../../notes/helpers';
-import { Pin } from '../../../pin';
-import { NotesButton } from '../../properties/helpers';
-import { EventsLoading, EventsTd, EventsTdContent, EventsTdGroupActions } from '../../styles';
-import { eventHasNotes, getPinTooltip } from '../helpers';
-import * as i18n from '../translations';
-import { OnRowSelected } from '../../events';
-import { Ecs } from '../../../../graphql/types';
-
-export interface TimelineActionProps {
-  eventId: string;
-  ecsData: Ecs;
-}
-
-export interface TimelineAction {
-  getAction: ({ eventId, ecsData }: TimelineActionProps) => JSX.Element;
-  width: number;
-  id: string;
-}
-
-interface Props {
-  actionsColumnWidth: number;
-  additionalActions?: JSX.Element[];
-  associateNote: AssociateNote;
-  checked: boolean;
-  onRowSelected: OnRowSelected;
-  expanded: boolean;
-  eventId: string;
-  eventIsPinned: boolean;
-  getNotesByIds: (noteIds: string[]) => Note[];
-  isEventViewer?: boolean;
-  loading: boolean;
-  loadingEventIds: Readonly<string[]>;
-  noteIds: string[];
-  onEventToggled: () => void;
-  onPinClicked: () => void;
-  showNotes: boolean;
-  showCheckboxes: boolean;
-  toggleShowNotes: () => void;
-  updateNote: UpdateNote;
-}
-
-const emptyNotes: string[] = [];
-
-export const Actions = React.memo<Props>(
-  ({
-    actionsColumnWidth,
-    additionalActions,
-    associateNote,
-    checked,
-    expanded,
-    eventId,
-    eventIsPinned,
-    getNotesByIds,
-    isEventViewer = false,
-    loading = false,
-    loadingEventIds,
-    noteIds,
-    onEventToggled,
-    onPinClicked,
-    onRowSelected,
-    showCheckboxes,
-    showNotes,
-    toggleShowNotes,
-    updateNote,
-  }) => (
-    <EventsTdGroupActions
-      actionsColumnWidth={actionsColumnWidth}
-      data-test-subj="event-actions-container"
-    >
-      {showCheckboxes && (
-        <EventsTd data-test-subj="select-event-container">
-          <EventsTdContent textAlign="center">
-            {loadingEventIds.includes(eventId) ? (
-              <EuiLoadingSpinner size="m" data-test-subj="event-loader" />
-            ) : (
-              <EuiCheckbox
-                data-test-subj="select-event"
-                id={eventId}
-                checked={checked}
-                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                  onRowSelected({
-                    eventIds: [eventId],
-                    isSelected: event.currentTarget.checked,
-                  });
-                }}
-              />
-            )}
-          </EventsTdContent>
-        </EventsTd>
-      )}
-
-      <>{additionalActions}</>
-
-      <EventsTd>
-        <EventsTdContent textAlign="center">
-          {loading && <EventsLoading />}
-
-          {!loading && (
-            <EuiButtonIcon
-              aria-label={expanded ? i18n.COLLAPSE : i18n.EXPAND}
-              data-test-subj="expand-event"
-              iconType={expanded ? 'arrowDown' : 'arrowRight'}
-              id={eventId}
-              onClick={onEventToggled}
-            />
-          )}
-        </EventsTdContent>
-      </EventsTd>
-
-      {!isEventViewer && (
-        <>
-          <EventsTd>
-            <EventsTdContent textAlign="center">
-              <EuiToolTip
-                data-test-subj="timeline-action-pin-tool-tip"
-                content={getPinTooltip({
-                  isPinned: eventIsPinned,
-                  eventHasNotes: eventHasNotes(noteIds),
-                })}
-              >
-                <Pin
-                  allowUnpinning={!eventHasNotes(noteIds)}
-                  data-test-subj="pin-event"
-                  onClick={onPinClicked}
-                  pinned={eventIsPinned}
-                />
-              </EuiToolTip>
-            </EventsTdContent>
-          </EventsTd>
-
-          <EventsTd>
-            <EventsTdContent textAlign="center">
-              <NotesButton
-                animate={false}
-                associateNote={associateNote}
-                data-test-subj="add-note"
-                getNotesByIds={getNotesByIds}
-                noteIds={noteIds || emptyNotes}
-                showNotes={showNotes}
-                size="s"
-                toggleShowNotes={toggleShowNotes}
-                toolTip={i18n.NOTES_TOOLTIP}
-                updateNote={updateNote}
-              />
-            </EventsTdContent>
-          </EventsTd>
-        </>
-      )}
-    </EventsTdGroupActions>
-  ),
-  (nextProps, prevProps) => {
-    return (
-      prevProps.actionsColumnWidth === nextProps.actionsColumnWidth &&
-      prevProps.checked === nextProps.checked &&
-      prevProps.expanded === nextProps.expanded &&
-      prevProps.eventId === nextProps.eventId &&
-      prevProps.eventIsPinned === nextProps.eventIsPinned &&
-      prevProps.loading === nextProps.loading &&
-      prevProps.loadingEventIds === nextProps.loadingEventIds &&
-      prevProps.noteIds === nextProps.noteIds &&
-      prevProps.onRowSelected === nextProps.onRowSelected &&
-      prevProps.showCheckboxes === nextProps.showCheckboxes &&
-      prevProps.showNotes === nextProps.showNotes
-    );
-  }
-);
-Actions.displayName = 'Actions';
diff --git a/x-pack/plugins/siem/public/components/timeline/body/column_headers/actions/index.tsx b/x-pack/plugins/siem/public/components/timeline/body/column_headers/actions/index.tsx
deleted file mode 100644
index 7a2898d465b225..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/body/column_headers/actions/index.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-/*
- * 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 { EuiButtonIcon } from '@elastic/eui';
-import React from 'react';
-
-import { ColumnHeaderOptions } from '../../../../../store/timeline/model';
-import { OnColumnRemoved } from '../../../events';
-import { EventsHeadingExtra, EventsLoading } from '../../../styles';
-import { useTimelineContext } from '../../../timeline_context';
-import { Sort } from '../../sort';
-
-import * as i18n from '../translations';
-
-interface Props {
-  header: ColumnHeaderOptions;
-  onColumnRemoved: OnColumnRemoved;
-  sort: Sort;
-}
-
-/** Given a `header`, returns the `SortDirection` applicable to it */
-
-export const CloseButton = React.memo<{
-  columnId: string;
-  onColumnRemoved: OnColumnRemoved;
-}>(({ columnId, onColumnRemoved }) => (
-  <EuiButtonIcon
-    aria-label={i18n.REMOVE_COLUMN}
-    color="text"
-    data-test-subj="remove-column"
-    iconType="cross"
-    onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
-      // To avoid a re-sorting when you delete a column
-      event.preventDefault();
-      event.stopPropagation();
-      onColumnRemoved(columnId);
-    }}
-  />
-));
-
-CloseButton.displayName = 'CloseButton';
-
-export const Actions = React.memo<Props>(({ header, onColumnRemoved, sort }) => {
-  const { isLoading } = useTimelineContext();
-  return (
-    <>
-      {sort.columnId === header.id && isLoading ? (
-        <EventsHeadingExtra className="siemEventsHeading__extra--loading">
-          <EventsLoading />
-        </EventsHeadingExtra>
-      ) : (
-        <EventsHeadingExtra className="siemEventsHeading__extra--close">
-          <CloseButton columnId={header.id} onColumnRemoved={onColumnRemoved} />
-        </EventsHeadingExtra>
-      )}
-    </>
-  );
-});
-
-Actions.displayName = 'Actions';
diff --git a/x-pack/plugins/siem/public/components/timeline/body/column_headers/events_select/helpers.tsx b/x-pack/plugins/siem/public/components/timeline/body/column_headers/events_select/helpers.tsx
deleted file mode 100644
index 853c1ec24b7031..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/body/column_headers/events_select/helpers.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-/*
- * 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 { EuiText } from '@elastic/eui';
-import React from 'react';
-import styled from 'styled-components';
-
-import { Pin } from '../../../../pin';
-
-import * as i18n from './translations';
-
-const InputDisplay = styled.div`
-  width: 5px;
-`;
-
-InputDisplay.displayName = 'InputDisplay';
-
-const PinIconContainer = styled.div`
-  margin-right: 5px;
-`;
-
-PinIconContainer.displayName = 'PinIconContainer';
-
-const PinActionItem = styled.div`
-  display: flex;
-  flex-direction: row;
-`;
-
-PinActionItem.displayName = 'PinActionItem';
-
-export type EventsSelectAction =
-  | 'select-all'
-  | 'select-none'
-  | 'select-pinned'
-  | 'select-unpinned'
-  | 'pin-selected'
-  | 'unpin-selected';
-
-export interface EventsSelectOption {
-  value: EventsSelectAction;
-  inputDisplay: JSX.Element | string;
-  disabled?: boolean;
-  dropdownDisplay: JSX.Element | string;
-}
-
-export const DropdownDisplay = React.memo<{ text: string }>(({ text }) => (
-  <EuiText size="s" color="subdued">
-    {text}
-  </EuiText>
-));
-
-DropdownDisplay.displayName = 'DropdownDisplay';
-
-export const getEventsSelectOptions = (): EventsSelectOption[] => [
-  {
-    inputDisplay: <InputDisplay />,
-    disabled: true,
-    dropdownDisplay: <DropdownDisplay text={i18n.SELECT_ALL} />,
-    value: 'select-all',
-  },
-  {
-    inputDisplay: <InputDisplay />,
-    disabled: true,
-    dropdownDisplay: <DropdownDisplay text={i18n.SELECT_NONE} />,
-    value: 'select-none',
-  },
-  {
-    inputDisplay: <InputDisplay />,
-    disabled: true,
-    dropdownDisplay: <DropdownDisplay text={i18n.SELECT_PINNED} />,
-    value: 'select-pinned',
-  },
-  {
-    inputDisplay: <InputDisplay />,
-    disabled: true,
-    dropdownDisplay: <DropdownDisplay text={i18n.SELECT_UNPINNED} />,
-    value: 'select-unpinned',
-  },
-  {
-    inputDisplay: <InputDisplay />,
-    disabled: true,
-    dropdownDisplay: (
-      <PinActionItem>
-        <PinIconContainer>
-          <Pin allowUnpinning={true} pinned={true} />
-        </PinIconContainer>
-        <DropdownDisplay text={i18n.PIN_SELECTED} />
-      </PinActionItem>
-    ),
-    value: 'pin-selected',
-  },
-  {
-    inputDisplay: <InputDisplay />,
-    disabled: true,
-    dropdownDisplay: (
-      <PinActionItem>
-        <PinIconContainer>
-          <Pin allowUnpinning={true} pinned={false} />
-        </PinIconContainer>
-        <DropdownDisplay text={i18n.UNPIN_SELECTED} />
-      </PinActionItem>
-    ),
-    value: 'unpin-selected',
-  },
-];
diff --git a/x-pack/plugins/siem/public/components/timeline/body/column_headers/filter/index.test.tsx b/x-pack/plugins/siem/public/components/timeline/body/column_headers/filter/index.test.tsx
deleted file mode 100644
index f0f6ce8d0ed6ff..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/body/column_headers/filter/index.test.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-/*
- * 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 { mount, shallow } from 'enzyme';
-import React from 'react';
-
-import { ColumnHeaderType } from '../../../../../store/timeline/model';
-import { defaultHeaders } from '../default_headers';
-
-import { Filter } from '.';
-
-const textFilter: ColumnHeaderType = 'text-filter';
-const notFiltered: ColumnHeaderType = 'not-filtered';
-
-describe('Filter', () => {
-  test('renders correctly against snapshot', () => {
-    const textFilterColumnHeader = {
-      ...defaultHeaders[0],
-      columnHeaderType: textFilter,
-    };
-
-    const wrapper = shallow(<Filter header={textFilterColumnHeader} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  describe('rendering', () => {
-    test('it renders a text filter when the columnHeaderType is "text-filter"', () => {
-      const textFilterColumnHeader = {
-        ...defaultHeaders[0],
-        columnHeaderType: textFilter,
-      };
-
-      const wrapper = mount(<Filter header={textFilterColumnHeader} />);
-
-      expect(
-        wrapper
-          .find('[data-test-subj="textFilter"]')
-          .first()
-          .props()
-      ).toHaveProperty('placeholder');
-    });
-
-    test('it does NOT render a filter when the columnHeaderType is "not-filtered"', () => {
-      const notFilteredHeader = {
-        ...defaultHeaders[0],
-        columnHeaderType: notFiltered,
-      };
-
-      const wrapper = mount(<Filter header={notFilteredHeader} />);
-
-      expect(wrapper.find('[data-test-subj="textFilter"]').exists()).toEqual(false);
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/timeline/body/column_headers/filter/index.tsx b/x-pack/plugins/siem/public/components/timeline/body/column_headers/filter/index.tsx
deleted file mode 100644
index 911a309edfd987..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/body/column_headers/filter/index.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * 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 { noop } from 'lodash/fp';
-import React from 'react';
-
-import { OnFilterChange } from '../../../events';
-import { ColumnHeaderOptions } from '../../../../../store/timeline/model';
-import { TextFilter } from '../text_filter';
-
-interface Props {
-  header: ColumnHeaderOptions;
-  onFilterChange?: OnFilterChange;
-}
-
-/** Renders a header's filter, based on the `columnHeaderType` */
-export const Filter = React.memo<Props>(({ header, onFilterChange = noop }) => {
-  switch (header.columnHeaderType) {
-    case 'text-filter':
-      return (
-        <TextFilter
-          columnId={header.id}
-          minWidth={header.width}
-          onFilterChange={onFilterChange}
-          placeholder={header.placeholder}
-        />
-      );
-    case 'not-filtered': // fall through
-    default:
-      return null;
-  }
-});
-
-Filter.displayName = 'Filter';
diff --git a/x-pack/plugins/siem/public/components/timeline/body/column_headers/header/helpers.ts b/x-pack/plugins/siem/public/components/timeline/body/column_headers/header/helpers.ts
deleted file mode 100644
index 47ce21e4c96371..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/body/column_headers/header/helpers.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-/*
- * 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 { Direction } from '../../../../../graphql/types';
-import { assertUnreachable } from '../../../../../lib/helpers';
-import { ColumnHeaderOptions } from '../../../../../store/timeline/model';
-import { Sort, SortDirection } from '../../sort';
-
-interface GetNewSortDirectionOnClickParams {
-  clickedHeader: ColumnHeaderOptions;
-  currentSort: Sort;
-}
-
-/** Given a `header`, returns the `SortDirection` applicable to it */
-export const getNewSortDirectionOnClick = ({
-  clickedHeader,
-  currentSort,
-}: GetNewSortDirectionOnClickParams): Direction =>
-  clickedHeader.id === currentSort.columnId ? getNextSortDirection(currentSort) : Direction.desc;
-
-/** Given a current sort direction, it returns the next sort direction */
-export const getNextSortDirection = (currentSort: Sort): Direction => {
-  switch (currentSort.sortDirection) {
-    case Direction.desc:
-      return Direction.asc;
-    case Direction.asc:
-      return Direction.desc;
-    case 'none':
-      return Direction.desc;
-    default:
-      return assertUnreachable(currentSort.sortDirection, 'Unhandled sort direction');
-  }
-};
-
-interface GetSortDirectionParams {
-  header: ColumnHeaderOptions;
-  sort: Sort;
-}
-
-export const getSortDirection = ({ header, sort }: GetSortDirectionParams): SortDirection =>
-  header.id === sort.columnId ? sort.sortDirection : 'none';
diff --git a/x-pack/plugins/siem/public/components/timeline/body/column_headers/header/index.test.tsx b/x-pack/plugins/siem/public/components/timeline/body/column_headers/header/index.test.tsx
deleted file mode 100644
index 80ae2aab0a19c2..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/body/column_headers/header/index.test.tsx
+++ /dev/null
@@ -1,350 +0,0 @@
-/*
- * 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 { mount, shallow } from 'enzyme';
-import React from 'react';
-
-import { Direction } from '../../../../../graphql/types';
-import { TestProviders } from '../../../../../mock';
-import { ColumnHeaderType } from '../../../../../store/timeline/model';
-import { Sort } from '../../sort';
-import { CloseButton } from '../actions';
-import { defaultHeaders } from '../default_headers';
-
-import { HeaderComponent } from '.';
-import { getNewSortDirectionOnClick, getNextSortDirection, getSortDirection } from './helpers';
-
-const filteredColumnHeader: ColumnHeaderType = 'text-filter';
-
-describe('Header', () => {
-  const columnHeader = defaultHeaders[0];
-  const sort: Sort = {
-    columnId: columnHeader.id,
-    sortDirection: Direction.desc,
-  };
-  const timelineId = 'fakeId';
-
-  test('renders correctly against snapshot', () => {
-    const wrapper = shallow(
-      <HeaderComponent
-        header={columnHeader}
-        onColumnRemoved={jest.fn()}
-        onColumnSorted={jest.fn()}
-        sort={sort}
-        timelineId={timelineId}
-      />
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  describe('rendering', () => {
-    test('it renders the header text', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <HeaderComponent
-            header={columnHeader}
-            onColumnRemoved={jest.fn()}
-            onColumnSorted={jest.fn()}
-            sort={sort}
-            timelineId={timelineId}
-          />
-        </TestProviders>
-      );
-
-      expect(
-        wrapper
-          .find(`[data-test-subj="header-text-${columnHeader.id}"]`)
-          .first()
-          .text()
-      ).toEqual(columnHeader.id);
-    });
-
-    test('it renders the header text alias when label is provided', () => {
-      const label = 'Timestamp';
-      const headerWithLabel = { ...columnHeader, label };
-      const wrapper = mount(
-        <TestProviders>
-          <HeaderComponent
-            header={headerWithLabel}
-            onColumnRemoved={jest.fn()}
-            onColumnSorted={jest.fn()}
-            sort={sort}
-            timelineId={timelineId}
-          />
-        </TestProviders>
-      );
-
-      expect(
-        wrapper
-          .find(`[data-test-subj="header-text-${columnHeader.id}"]`)
-          .first()
-          .text()
-      ).toEqual(label);
-    });
-
-    test('it renders a sort indicator', () => {
-      const headerSortable = { ...columnHeader, aggregatable: true };
-      const wrapper = mount(
-        <TestProviders>
-          <HeaderComponent
-            header={headerSortable}
-            onColumnRemoved={jest.fn()}
-            onColumnSorted={jest.fn()}
-            sort={sort}
-            timelineId={timelineId}
-          />
-        </TestProviders>
-      );
-
-      expect(
-        wrapper
-          .find('[data-test-subj="header-sort-indicator"]')
-          .first()
-          .exists()
-      ).toEqual(true);
-    });
-
-    test('it renders a filter', () => {
-      const columnWithFilter = {
-        ...columnHeader,
-        columnHeaderType: filteredColumnHeader,
-      };
-
-      const wrapper = mount(
-        <TestProviders>
-          <HeaderComponent
-            header={columnWithFilter}
-            onColumnRemoved={jest.fn()}
-            onColumnSorted={jest.fn()}
-            sort={sort}
-            timelineId={timelineId}
-          />
-        </TestProviders>
-      );
-
-      expect(
-        wrapper
-          .find('[data-test-subj="textFilter"]')
-          .first()
-          .props()
-      ).toHaveProperty('placeholder');
-    });
-  });
-
-  describe('onColumnSorted', () => {
-    test('it invokes the onColumnSorted callback when the header sort button is clicked', () => {
-      const mockOnColumnSorted = jest.fn();
-      const headerSortable = { ...columnHeader, aggregatable: true };
-      const wrapper = mount(
-        <TestProviders>
-          <HeaderComponent
-            header={headerSortable}
-            onColumnRemoved={jest.fn()}
-            onColumnSorted={mockOnColumnSorted}
-            sort={sort}
-            timelineId={timelineId}
-          />
-        </TestProviders>
-      );
-
-      wrapper
-        .find('[data-test-subj="header-sort-button"]')
-        .first()
-        .simulate('click');
-
-      expect(mockOnColumnSorted).toBeCalledWith({
-        columnId: columnHeader.id,
-        sortDirection: 'asc', // (because the previous state was Direction.desc)
-      });
-    });
-
-    test('it does NOT render the header sort button when aggregatable is false', () => {
-      const mockOnColumnSorted = jest.fn();
-      const headerSortable = { ...columnHeader, aggregatable: false };
-      const wrapper = mount(
-        <TestProviders>
-          <HeaderComponent
-            header={headerSortable}
-            onColumnRemoved={jest.fn()}
-            onColumnSorted={mockOnColumnSorted}
-            sort={sort}
-            timelineId={timelineId}
-          />
-        </TestProviders>
-      );
-
-      expect(wrapper.find('[data-test-subj="header-sort-button"]').length).toEqual(0);
-    });
-
-    test('it does NOT render the header sort button when aggregatable is missing', () => {
-      const mockOnColumnSorted = jest.fn();
-      const headerSortable = { ...columnHeader };
-      const wrapper = mount(
-        <TestProviders>
-          <HeaderComponent
-            header={headerSortable}
-            onColumnRemoved={jest.fn()}
-            onColumnSorted={mockOnColumnSorted}
-            sort={sort}
-            timelineId={timelineId}
-          />
-        </TestProviders>
-      );
-
-      expect(wrapper.find('[data-test-subj="header-sort-button"]').length).toEqual(0);
-    });
-
-    test('it does NOT invoke the onColumnSorted callback when the header is clicked and aggregatable is undefined', () => {
-      const mockOnColumnSorted = jest.fn();
-      const headerSortable = { ...columnHeader, aggregatable: undefined };
-      const wrapper = mount(
-        <TestProviders>
-          <HeaderComponent
-            header={headerSortable}
-            onColumnRemoved={jest.fn()}
-            onColumnSorted={mockOnColumnSorted}
-            sort={sort}
-            timelineId={timelineId}
-          />
-        </TestProviders>
-      );
-
-      wrapper
-        .find('[data-test-subj="header"]')
-        .first()
-        .simulate('click');
-
-      expect(mockOnColumnSorted).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('CloseButton', () => {
-    test('it invokes the onColumnRemoved callback with the column ID when the close button is clicked', () => {
-      const mockOnColumnRemoved = jest.fn();
-
-      const wrapper = mount(
-        <CloseButton columnId={columnHeader.id} onColumnRemoved={mockOnColumnRemoved} />
-      );
-
-      wrapper
-        .find('[data-test-subj="remove-column"]')
-        .first()
-        .simulate('click');
-
-      expect(mockOnColumnRemoved).toBeCalledWith(columnHeader.id);
-    });
-  });
-
-  describe('getSortDirection', () => {
-    test('it returns the sort direction when the header id matches the sort column id', () => {
-      expect(getSortDirection({ header: columnHeader, sort })).toEqual(sort.sortDirection);
-    });
-
-    test('it returns "none" when sort direction when the header id does NOT match the sort column id', () => {
-      const nonMatching: Sort = {
-        columnId: 'differentSocks',
-        sortDirection: Direction.desc,
-      };
-
-      expect(getSortDirection({ header: columnHeader, sort: nonMatching })).toEqual('none');
-    });
-  });
-
-  describe('getNextSortDirection', () => {
-    test('it returns "asc" when the current direction is "desc"', () => {
-      const sortDescending: Sort = { columnId: columnHeader.id, sortDirection: Direction.desc };
-
-      expect(getNextSortDirection(sortDescending)).toEqual('asc');
-    });
-
-    test('it returns "desc" when the current direction is "asc"', () => {
-      const sortAscending: Sort = {
-        columnId: columnHeader.id,
-        sortDirection: Direction.asc,
-      };
-
-      expect(getNextSortDirection(sortAscending)).toEqual(Direction.desc);
-    });
-
-    test('it returns "desc" by default', () => {
-      const sortNone: Sort = {
-        columnId: columnHeader.id,
-        sortDirection: 'none',
-      };
-
-      expect(getNextSortDirection(sortNone)).toEqual(Direction.desc);
-    });
-  });
-
-  describe('getNewSortDirectionOnClick', () => {
-    test('it returns the expected new sort direction when the header id matches the sort column id', () => {
-      const sortMatches: Sort = {
-        columnId: columnHeader.id,
-        sortDirection: Direction.desc,
-      };
-
-      expect(
-        getNewSortDirectionOnClick({
-          clickedHeader: columnHeader,
-          currentSort: sortMatches,
-        })
-      ).toEqual(Direction.asc);
-    });
-
-    test('it returns the expected new sort direction when the header id does NOT match the sort column id', () => {
-      const sortDoesNotMatch: Sort = {
-        columnId: 'someOtherColumn',
-        sortDirection: 'none',
-      };
-
-      expect(
-        getNewSortDirectionOnClick({
-          clickedHeader: columnHeader,
-          currentSort: sortDoesNotMatch,
-        })
-      ).toEqual(Direction.desc);
-    });
-  });
-
-  describe('text truncation styling', () => {
-    test('truncates the header text with an ellipsis', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <HeaderComponent
-            header={columnHeader}
-            onColumnRemoved={jest.fn()}
-            onColumnSorted={jest.fn()}
-            sort={sort}
-            timelineId={timelineId}
-          />
-        </TestProviders>
-      );
-
-      expect(wrapper.find(`[data-test-subj="header-text-${columnHeader.id}"]`)).toHaveStyleRule(
-        'text-overflow',
-        'ellipsis'
-      );
-    });
-  });
-
-  describe('header tooltip', () => {
-    test('it has a tooltip to display the properties of the field', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <HeaderComponent
-            header={columnHeader}
-            onColumnRemoved={jest.fn()}
-            onColumnSorted={jest.fn()}
-            sort={sort}
-            timelineId={timelineId}
-          />
-        </TestProviders>
-      );
-
-      expect(wrapper.find('[data-test-subj="header-tooltip"]').exists()).toEqual(true);
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/timeline/body/column_headers/header/index.tsx b/x-pack/plugins/siem/public/components/timeline/body/column_headers/header/index.tsx
deleted file mode 100644
index 82c5d7eb73f024..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/body/column_headers/header/index.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-/*
- * 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 { noop } from 'lodash/fp';
-import React, { useCallback } from 'react';
-
-import { ColumnHeaderOptions } from '../../../../../store/timeline/model';
-import { OnColumnRemoved, OnColumnSorted, OnFilterChange } from '../../../events';
-import { Sort } from '../../sort';
-import { Actions } from '../actions';
-import { Filter } from '../filter';
-import { getNewSortDirectionOnClick } from './helpers';
-import { HeaderContent } from './header_content';
-
-interface Props {
-  header: ColumnHeaderOptions;
-  onColumnRemoved: OnColumnRemoved;
-  onColumnSorted: OnColumnSorted;
-  onFilterChange?: OnFilterChange;
-  sort: Sort;
-  timelineId: string;
-}
-
-export const HeaderComponent: React.FC<Props> = ({
-  header,
-  onColumnRemoved,
-  onColumnSorted,
-  onFilterChange = noop,
-  sort,
-}) => {
-  const onClick = useCallback(() => {
-    onColumnSorted!({
-      columnId: header.id,
-      sortDirection: getNewSortDirectionOnClick({
-        clickedHeader: header,
-        currentSort: sort,
-      }),
-    });
-  }, [onColumnSorted, header, sort]);
-
-  return (
-    <>
-      <HeaderContent header={header} isResizing={false} onClick={onClick} sort={sort}>
-        <Actions header={header} onColumnRemoved={onColumnRemoved} sort={sort} />
-      </HeaderContent>
-
-      <Filter header={header} onFilterChange={onFilterChange} />
-    </>
-  );
-};
-
-export const Header = React.memo(HeaderComponent);
diff --git a/x-pack/plugins/siem/public/components/timeline/body/column_headers/header_tooltip_content/index.test.tsx b/x-pack/plugins/siem/public/components/timeline/body/column_headers/header_tooltip_content/index.test.tsx
deleted file mode 100644
index 9afc852373bc6c..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/body/column_headers/header_tooltip_content/index.test.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-/*
- * 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 { mount, shallow } from 'enzyme';
-import { cloneDeep } from 'lodash/fp';
-import React from 'react';
-
-import { ColumnHeaderOptions } from '../../../../../store/timeline/model';
-import { defaultHeaders } from '../../../../../mock';
-
-import { HeaderToolTipContent } from '.';
-
-describe('HeaderToolTipContent', () => {
-  let header: ColumnHeaderOptions;
-  beforeEach(() => {
-    header = cloneDeep(defaultHeaders[0]);
-  });
-
-  test('it renders the category', () => {
-    const wrapper = mount(<HeaderToolTipContent header={header} />);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="category-value"]')
-        .first()
-        .text()
-    ).toEqual(header.category);
-  });
-
-  test('it renders the name of the field', () => {
-    const wrapper = mount(<HeaderToolTipContent header={header} />);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="field-value"]')
-        .first()
-        .text()
-    ).toEqual(header.id);
-  });
-
-  test('it renders the expected icon for the header type', () => {
-    const wrapper = mount(<HeaderToolTipContent header={header} />);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="type-icon"]')
-        .first()
-        .props().type
-    ).toEqual('clock');
-  });
-
-  test('it renders the type of the field', () => {
-    const wrapper = mount(<HeaderToolTipContent header={header} />);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="type-value"]')
-        .first()
-        .text()
-    ).toEqual(header.type);
-  });
-
-  test('it renders the description of the field', () => {
-    const wrapper = mount(<HeaderToolTipContent header={header} />);
-
-    expect(
-      wrapper
-        .find('[data-test-subj="description-value"]')
-        .first()
-        .text()
-    ).toEqual(header.description);
-  });
-
-  test('it does NOT render the description column when the field does NOT contain a description', () => {
-    const noDescription = {
-      ...header,
-      description: '',
-    };
-
-    const wrapper = mount(<HeaderToolTipContent header={noDescription} />);
-
-    expect(wrapper.find('[data-test-subj="description"]').exists()).toEqual(false);
-  });
-
-  test('it renders the expected table content', () => {
-    const wrapper = shallow(<HeaderToolTipContent header={header} />);
-
-    expect(wrapper).toMatchSnapshot();
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/timeline/body/column_headers/header_tooltip_content/index.tsx b/x-pack/plugins/siem/public/components/timeline/body/column_headers/header_tooltip_content/index.tsx
deleted file mode 100644
index bef4bcc42b0c78..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/body/column_headers/header_tooltip_content/index.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-/*
- * 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 { EuiIcon } from '@elastic/eui';
-import { isEmpty } from 'lodash/fp';
-import React from 'react';
-import styled from 'styled-components';
-
-import { ColumnHeaderOptions } from '../../../../../store/timeline/model';
-import { getIconFromType } from '../../../../event_details/helpers';
-import * as i18n from '../translations';
-
-const IconType = styled(EuiIcon)`
-  margin-right: 3px;
-  position: relative;
-  top: -2px;
-`;
-IconType.displayName = 'IconType';
-
-const P = styled.p`
-  margin-bottom: 5px;
-`;
-P.displayName = 'P';
-
-const ToolTipTableMetadata = styled.span`
-  margin-right: 5px;
-`;
-ToolTipTableMetadata.displayName = 'ToolTipTableMetadata';
-
-const ToolTipTableValue = styled.span`
-  word-wrap: break-word;
-`;
-ToolTipTableValue.displayName = 'ToolTipTableValue';
-
-export const HeaderToolTipContent = React.memo<{ header: ColumnHeaderOptions }>(({ header }) => (
-  <>
-    {!isEmpty(header.category) && (
-      <P>
-        <ToolTipTableMetadata data-test-subj="category">
-          {i18n.CATEGORY}
-          {':'}
-        </ToolTipTableMetadata>
-        <ToolTipTableValue data-test-subj="category-value">{header.category}</ToolTipTableValue>
-      </P>
-    )}
-    <P>
-      <ToolTipTableMetadata data-test-subj="field">
-        {i18n.FIELD}
-        {':'}
-      </ToolTipTableMetadata>
-      <ToolTipTableValue data-test-subj="field-value">{header.id}</ToolTipTableValue>
-    </P>
-    <P>
-      <ToolTipTableMetadata data-test-subj="type">
-        {i18n.TYPE}
-        {':'}
-      </ToolTipTableMetadata>
-      <ToolTipTableValue>
-        <IconType data-test-subj="type-icon" type={getIconFromType(header.type!)} />
-        <span data-test-subj="type-value">{header.type}</span>
-      </ToolTipTableValue>
-    </P>
-    {!isEmpty(header.description) && (
-      <P>
-        <ToolTipTableMetadata data-test-subj="description">
-          {i18n.DESCRIPTION}
-          {':'}
-        </ToolTipTableMetadata>
-        <ToolTipTableValue data-test-subj="description-value">
-          {header.description}
-        </ToolTipTableValue>
-      </P>
-    )}
-  </>
-));
-HeaderToolTipContent.displayName = 'HeaderToolTipContent';
diff --git a/x-pack/plugins/siem/public/components/timeline/body/column_headers/helpers.ts b/x-pack/plugins/siem/public/components/timeline/body/column_headers/helpers.ts
deleted file mode 100644
index 6923831f9ef634..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/body/column_headers/helpers.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-/*
- * 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 { get } from 'lodash/fp';
-
-import { BrowserFields } from '../../../../containers/source';
-import { ColumnHeaderOptions } from '../../../../store/timeline/model';
-import {
-  DEFAULT_COLUMN_MIN_WIDTH,
-  DEFAULT_DATE_COLUMN_MIN_WIDTH,
-  SHOW_CHECK_BOXES_COLUMN_WIDTH,
-  EVENTS_VIEWER_ACTIONS_COLUMN_WIDTH,
-  DEFAULT_ACTIONS_COLUMN_WIDTH,
-} from '../constants';
-
-/** Enriches the column headers with field details from the specified browserFields */
-export const getColumnHeaders = (
-  headers: ColumnHeaderOptions[],
-  browserFields: BrowserFields
-): ColumnHeaderOptions[] => {
-  return headers.map(header => {
-    const splitHeader = header.id.split('.'); // source.geo.city_name -> [source, geo, city_name]
-
-    return {
-      ...header,
-      ...get(
-        [splitHeader.length > 1 ? splitHeader[0] : 'base', 'fields', header.id],
-        browserFields
-      ),
-    };
-  });
-};
-
-export const getColumnWidthFromType = (type: string): number =>
-  type !== 'date' ? DEFAULT_COLUMN_MIN_WIDTH : DEFAULT_DATE_COLUMN_MIN_WIDTH;
-
-/** Returns the (fixed) width of the Actions column */
-export const getActionsColumnWidth = (
-  isEventViewer: boolean,
-  showCheckboxes = false,
-  additionalActionWidth = 0
-): number =>
-  (showCheckboxes ? SHOW_CHECK_BOXES_COLUMN_WIDTH : 0) +
-  (isEventViewer ? EVENTS_VIEWER_ACTIONS_COLUMN_WIDTH : DEFAULT_ACTIONS_COLUMN_WIDTH) +
-  additionalActionWidth;
diff --git a/x-pack/plugins/siem/public/components/timeline/body/column_headers/index.test.tsx b/x-pack/plugins/siem/public/components/timeline/body/column_headers/index.test.tsx
deleted file mode 100644
index 4fafacfd01633c..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/body/column_headers/index.test.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-/*
- * 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 { shallow } from 'enzyme';
-import React from 'react';
-
-import { DEFAULT_ACTIONS_COLUMN_WIDTH } from '../constants';
-import { defaultHeaders } from './default_headers';
-import { Direction } from '../../../../graphql/types';
-import { mockBrowserFields } from '../../../../../public/containers/source/mock';
-import { Sort } from '../sort';
-import { TestProviders } from '../../../../mock/test_providers';
-import { useMountAppended } from '../../../../utils/use_mount_appended';
-
-import { ColumnHeadersComponent } from '.';
-
-describe('ColumnHeaders', () => {
-  const mount = useMountAppended();
-
-  describe('rendering', () => {
-    const sort: Sort = {
-      columnId: 'fooColumn',
-      sortDirection: Direction.desc,
-    };
-
-    test('renders correctly against snapshot', () => {
-      const wrapper = shallow(
-        <ColumnHeadersComponent
-          actionsColumnWidth={DEFAULT_ACTIONS_COLUMN_WIDTH}
-          browserFields={mockBrowserFields}
-          columnHeaders={defaultHeaders}
-          isSelectAllChecked={false}
-          onColumnSorted={jest.fn()}
-          onColumnRemoved={jest.fn()}
-          onColumnResized={jest.fn()}
-          onSelectAll={jest.fn}
-          onUpdateColumns={jest.fn()}
-          showEventsSelect={false}
-          showSelectAllCheckbox={false}
-          sort={sort}
-          timelineId={'test'}
-          toggleColumn={jest.fn()}
-        />
-      );
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    test('it renders the field browser', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <ColumnHeadersComponent
-            actionsColumnWidth={DEFAULT_ACTIONS_COLUMN_WIDTH}
-            browserFields={mockBrowserFields}
-            columnHeaders={defaultHeaders}
-            isSelectAllChecked={false}
-            onColumnSorted={jest.fn()}
-            onColumnRemoved={jest.fn()}
-            onColumnResized={jest.fn()}
-            onSelectAll={jest.fn}
-            onUpdateColumns={jest.fn()}
-            showEventsSelect={false}
-            showSelectAllCheckbox={false}
-            sort={sort}
-            timelineId={'test'}
-            toggleColumn={jest.fn()}
-          />
-        </TestProviders>
-      );
-
-      expect(
-        wrapper
-          .find('[data-test-subj="field-browser"]')
-          .first()
-          .exists()
-      ).toEqual(true);
-    });
-
-    test('it renders every column header', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <ColumnHeadersComponent
-            actionsColumnWidth={DEFAULT_ACTIONS_COLUMN_WIDTH}
-            browserFields={mockBrowserFields}
-            columnHeaders={defaultHeaders}
-            isSelectAllChecked={false}
-            onColumnSorted={jest.fn()}
-            onColumnRemoved={jest.fn()}
-            onColumnResized={jest.fn()}
-            onSelectAll={jest.fn}
-            onUpdateColumns={jest.fn()}
-            showEventsSelect={false}
-            showSelectAllCheckbox={false}
-            sort={sort}
-            timelineId={'test'}
-            toggleColumn={jest.fn()}
-          />
-        </TestProviders>
-      );
-
-      defaultHeaders.forEach(h => {
-        expect(
-          wrapper
-            .find('[data-test-subj="headers-group"]')
-            .first()
-            .text()
-        ).toContain(h.id);
-      });
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/timeline/body/column_headers/index.tsx b/x-pack/plugins/siem/public/components/timeline/body/column_headers/index.tsx
deleted file mode 100644
index 7a072f1dbf578b..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/body/column_headers/index.tsx
+++ /dev/null
@@ -1,250 +0,0 @@
-/*
- * 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 { EuiCheckbox } from '@elastic/eui';
-import { noop } from 'lodash/fp';
-import React, { useState, useEffect, useCallback, useMemo } from 'react';
-import { Droppable, DraggableChildrenFn } from 'react-beautiful-dnd';
-import deepEqual from 'fast-deep-equal';
-
-import { DragEffects } from '../../../drag_and_drop/draggable_wrapper';
-import { DraggableFieldBadge } from '../../../draggables/field_badge';
-import { BrowserFields } from '../../../../containers/source';
-import { ColumnHeaderOptions } from '../../../../store/timeline/model';
-import { DRAG_TYPE_FIELD, droppableTimelineColumnsPrefix } from '../../../drag_and_drop/helpers';
-import { StatefulFieldsBrowser } from '../../../fields_browser';
-import { FIELD_BROWSER_HEIGHT, FIELD_BROWSER_WIDTH } from '../../../fields_browser/helpers';
-import {
-  OnColumnRemoved,
-  OnColumnResized,
-  OnColumnSorted,
-  OnFilterChange,
-  OnSelectAll,
-  OnUpdateColumns,
-} from '../../events';
-import {
-  EventsTh,
-  EventsThContent,
-  EventsThead,
-  EventsThGroupActions,
-  EventsThGroupData,
-  EventsTrHeader,
-} from '../../styles';
-import { Sort } from '../sort';
-import { EventsSelect } from './events_select';
-import { ColumnHeader } from './column_header';
-
-interface Props {
-  actionsColumnWidth: number;
-  browserFields: BrowserFields;
-  columnHeaders: ColumnHeaderOptions[];
-  isEventViewer?: boolean;
-  isSelectAllChecked: boolean;
-  onColumnRemoved: OnColumnRemoved;
-  onColumnResized: OnColumnResized;
-  onColumnSorted: OnColumnSorted;
-  onFilterChange?: OnFilterChange;
-  onSelectAll: OnSelectAll;
-  onUpdateColumns: OnUpdateColumns;
-  showEventsSelect: boolean;
-  showSelectAllCheckbox: boolean;
-  sort: Sort;
-  timelineId: string;
-  toggleColumn: (column: ColumnHeaderOptions) => void;
-}
-
-interface DraggableContainerProps {
-  children: React.ReactNode;
-  onMount: () => void;
-  onUnmount: () => void;
-}
-
-export const DraggableContainer = React.memo<DraggableContainerProps>(
-  ({ children, onMount, onUnmount }) => {
-    useEffect(() => {
-      onMount();
-
-      return () => onUnmount();
-    }, [onMount, onUnmount]);
-
-    return <>{children}</>;
-  }
-);
-
-DraggableContainer.displayName = 'DraggableContainer';
-
-/** Renders the timeline header columns */
-export const ColumnHeadersComponent = ({
-  actionsColumnWidth,
-  browserFields,
-  columnHeaders,
-  isEventViewer = false,
-  isSelectAllChecked,
-  onColumnRemoved,
-  onColumnResized,
-  onColumnSorted,
-  onSelectAll,
-  onUpdateColumns,
-  onFilterChange = noop,
-  showEventsSelect,
-  showSelectAllCheckbox,
-  sort,
-  timelineId,
-  toggleColumn,
-}: Props) => {
-  const [draggingIndex, setDraggingIndex] = useState(null);
-
-  const handleSelectAllChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      onSelectAll({ isSelected: event.currentTarget.checked });
-    },
-    [onSelectAll]
-  );
-
-  const renderClone: DraggableChildrenFn = useCallback(
-    (dragProvided, dragSnapshot, rubric) => {
-      // TODO: Remove after github.com/DefinitelyTyped/DefinitelyTyped/pull/43057 is merged
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const index = (rubric as any).source.index;
-      const header = columnHeaders[index];
-
-      const onMount = () => setDraggingIndex(index);
-      const onUnmount = () => setDraggingIndex(null);
-
-      return (
-        <EventsTh
-          data-test-subj="draggable-header"
-          {...dragProvided.draggableProps}
-          {...dragProvided.dragHandleProps}
-          ref={dragProvided.innerRef}
-        >
-          <DraggableContainer onMount={onMount} onUnmount={onUnmount}>
-            <DragEffects>
-              <DraggableFieldBadge fieldId={header.id} fieldWidth={header.width} />
-            </DragEffects>
-          </DraggableContainer>
-        </EventsTh>
-      );
-    },
-    [columnHeaders, setDraggingIndex]
-  );
-
-  const ColumnHeaderList = useMemo(
-    () =>
-      columnHeaders.map((header, draggableIndex) => (
-        <ColumnHeader
-          key={header.id}
-          draggableIndex={draggableIndex}
-          timelineId={timelineId}
-          header={header}
-          isDragging={draggingIndex === draggableIndex}
-          onColumnRemoved={onColumnRemoved}
-          onColumnSorted={onColumnSorted}
-          onFilterChange={onFilterChange}
-          onColumnResized={onColumnResized}
-          sort={sort}
-        />
-      )),
-    [
-      columnHeaders,
-      timelineId,
-      draggingIndex,
-      onColumnRemoved,
-      onFilterChange,
-      onColumnResized,
-      sort,
-    ]
-  );
-
-  return (
-    <EventsThead data-test-subj="column-headers">
-      <EventsTrHeader>
-        <EventsThGroupActions
-          actionsColumnWidth={actionsColumnWidth}
-          justifyContent={showSelectAllCheckbox ? 'flexStart' : 'space-between'}
-          data-test-subj="actions-container"
-        >
-          {showEventsSelect && (
-            <EventsTh>
-              <EventsThContent textAlign="center">
-                <EventsSelect checkState="unchecked" timelineId={timelineId} />
-              </EventsThContent>
-            </EventsTh>
-          )}
-          {showSelectAllCheckbox && (
-            <EventsTh>
-              <EventsThContent textAlign="center">
-                <EuiCheckbox
-                  data-test-subj="select-all-events"
-                  id={'select-all-events'}
-                  checked={isSelectAllChecked}
-                  onChange={handleSelectAllChange}
-                />
-              </EventsThContent>
-            </EventsTh>
-          )}
-          <EventsTh>
-            <EventsThContent textAlign={showSelectAllCheckbox ? 'left' : 'center'}>
-              <StatefulFieldsBrowser
-                browserFields={browserFields}
-                columnHeaders={columnHeaders}
-                data-test-subj="field-browser"
-                height={FIELD_BROWSER_HEIGHT}
-                isEventViewer={isEventViewer}
-                onUpdateColumns={onUpdateColumns}
-                timelineId={timelineId}
-                toggleColumn={toggleColumn}
-                width={FIELD_BROWSER_WIDTH}
-              />
-            </EventsThContent>
-          </EventsTh>
-        </EventsThGroupActions>
-
-        <Droppable
-          direction={'horizontal'}
-          droppableId={`${droppableTimelineColumnsPrefix}${timelineId}`}
-          isDropDisabled={false}
-          type={DRAG_TYPE_FIELD}
-          renderClone={renderClone}
-        >
-          {(dropProvided, snapshot) => (
-            <>
-              <EventsThGroupData
-                data-test-subj="headers-group"
-                ref={dropProvided.innerRef}
-                isDragging={snapshot.isDraggingOver}
-                {...dropProvided.droppableProps}
-              >
-                {ColumnHeaderList}
-              </EventsThGroupData>
-            </>
-          )}
-        </Droppable>
-      </EventsTrHeader>
-    </EventsThead>
-  );
-};
-
-export const ColumnHeaders = React.memo(
-  ColumnHeadersComponent,
-  (prevProps, nextProps) =>
-    prevProps.actionsColumnWidth === nextProps.actionsColumnWidth &&
-    prevProps.isEventViewer === nextProps.isEventViewer &&
-    prevProps.isSelectAllChecked === nextProps.isSelectAllChecked &&
-    prevProps.onColumnRemoved === nextProps.onColumnRemoved &&
-    prevProps.onColumnResized === nextProps.onColumnResized &&
-    prevProps.onColumnSorted === nextProps.onColumnSorted &&
-    prevProps.onSelectAll === nextProps.onSelectAll &&
-    prevProps.onUpdateColumns === nextProps.onUpdateColumns &&
-    prevProps.onFilterChange === nextProps.onFilterChange &&
-    prevProps.showEventsSelect === nextProps.showEventsSelect &&
-    prevProps.showSelectAllCheckbox === nextProps.showSelectAllCheckbox &&
-    prevProps.sort === nextProps.sort &&
-    prevProps.timelineId === nextProps.timelineId &&
-    prevProps.toggleColumn === nextProps.toggleColumn &&
-    deepEqual(prevProps.columnHeaders, nextProps.columnHeaders) &&
-    deepEqual(prevProps.browserFields, nextProps.browserFields)
-);
diff --git a/x-pack/plugins/siem/public/components/timeline/body/data_driven_columns/index.test.tsx b/x-pack/plugins/siem/public/components/timeline/body/data_driven_columns/index.test.tsx
deleted file mode 100644
index 098bd3108dba16..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/body/data_driven_columns/index.test.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * 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 { shallow } from 'enzyme';
-
-import React from 'react';
-
-import { mockTimelineData } from '../../../../mock';
-import { defaultHeaders } from '../column_headers/default_headers';
-import { columnRenderers } from '../renderers';
-
-import { DataDrivenColumns } from '.';
-
-describe('Columns', () => {
-  const headersSansTimestamp = defaultHeaders.filter(h => h.id !== '@timestamp');
-
-  test('it renders the expected columns', () => {
-    const wrapper = shallow(
-      <DataDrivenColumns
-        _id={mockTimelineData[0]._id}
-        columnHeaders={headersSansTimestamp}
-        columnRenderers={columnRenderers}
-        data={mockTimelineData[0].data}
-        ecsData={mockTimelineData[0].ecs}
-        onColumnResized={jest.fn()}
-        timelineId="test"
-      />
-    );
-
-    expect(wrapper).toMatchSnapshot();
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/timeline/body/data_driven_columns/index.tsx b/x-pack/plugins/siem/public/components/timeline/body/data_driven_columns/index.tsx
deleted file mode 100644
index c15c468373c5ac..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/body/data_driven_columns/index.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-/*
- * 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 { getOr } from 'lodash/fp';
-
-import { Ecs, TimelineNonEcsData } from '../../../../graphql/types';
-import { ColumnHeaderOptions } from '../../../../store/timeline/model';
-import { OnColumnResized } from '../../events';
-import { EventsTd, EventsTdContent, EventsTdGroupData } from '../../styles';
-import { ColumnRenderer } from '../renderers/column_renderer';
-import { getColumnRenderer } from '../renderers/get_column_renderer';
-
-interface Props {
-  _id: string;
-  columnHeaders: ColumnHeaderOptions[];
-  columnRenderers: ColumnRenderer[];
-  data: TimelineNonEcsData[];
-  ecsData: Ecs;
-  onColumnResized: OnColumnResized;
-  timelineId: string;
-}
-
-export const DataDrivenColumns = React.memo<Props>(
-  ({ _id, columnHeaders, columnRenderers, data, ecsData, timelineId }) => (
-    <EventsTdGroupData data-test-subj="data-driven-columns">
-      {columnHeaders.map(header => (
-        <EventsTd key={header.id} width={header.width}>
-          <EventsTdContent data-test-subj="cell-container">
-            {getColumnRenderer(header.id, columnRenderers, data).renderColumn({
-              columnName: header.id,
-              eventId: _id,
-              field: header,
-              linkValues: getOr([], header.linkField ?? '', ecsData),
-              timelineId,
-              truncate: true,
-              values: getMappedNonEcsValue({
-                data,
-                fieldName: header.id,
-              }),
-            })}
-          </EventsTdContent>
-        </EventsTd>
-      ))}
-    </EventsTdGroupData>
-  )
-);
-
-DataDrivenColumns.displayName = 'DataDrivenColumns';
-
-const getMappedNonEcsValue = ({
-  data,
-  fieldName,
-}: {
-  data: TimelineNonEcsData[];
-  fieldName: string;
-}): string[] | undefined => {
-  const item = data.find(d => d.field === fieldName);
-  if (item != null && item.value != null) {
-    return item.value;
-  }
-  return undefined;
-};
diff --git a/x-pack/plugins/siem/public/components/timeline/body/events/index.tsx b/x-pack/plugins/siem/public/components/timeline/body/events/index.tsx
deleted file mode 100644
index 4178bc656f32d3..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/body/events/index.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-/*
- * 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 { BrowserFields } from '../../../../containers/source';
-import { TimelineItem, TimelineNonEcsData } from '../../../../graphql/types';
-import { ColumnHeaderOptions } from '../../../../store/timeline/model';
-import { maxDelay } from '../../../../lib/helpers/scheduler';
-import { Note } from '../../../../lib/note';
-import { AddNoteToEvent, UpdateNote } from '../../../notes/helpers';
-import {
-  OnColumnResized,
-  OnPinEvent,
-  OnRowSelected,
-  OnUnPinEvent,
-  OnUpdateColumns,
-} from '../../events';
-import { EventsTbody } from '../../styles';
-import { ColumnRenderer } from '../renderers/column_renderer';
-import { RowRenderer } from '../renderers/row_renderer';
-import { StatefulEvent } from './stateful_event';
-import { eventIsPinned } from '../helpers';
-
-interface Props {
-  actionsColumnWidth: number;
-  addNoteToEvent: AddNoteToEvent;
-  browserFields: BrowserFields;
-  columnHeaders: ColumnHeaderOptions[];
-  columnRenderers: ColumnRenderer[];
-  containerElementRef: HTMLDivElement;
-  data: TimelineItem[];
-  eventIdToNoteIds: Readonly<Record<string, string[]>>;
-  getNotesByIds: (noteIds: string[]) => Note[];
-  id: string;
-  isEventViewer?: boolean;
-  loadingEventIds: Readonly<string[]>;
-  onColumnResized: OnColumnResized;
-  onPinEvent: OnPinEvent;
-  onRowSelected: OnRowSelected;
-  onUpdateColumns: OnUpdateColumns;
-  onUnPinEvent: OnUnPinEvent;
-  pinnedEventIds: Readonly<Record<string, boolean>>;
-  rowRenderers: RowRenderer[];
-  selectedEventIds: Readonly<Record<string, TimelineNonEcsData[]>>;
-  showCheckboxes: boolean;
-  toggleColumn: (column: ColumnHeaderOptions) => void;
-  updateNote: UpdateNote;
-}
-
-const EventsComponent: React.FC<Props> = ({
-  actionsColumnWidth,
-  addNoteToEvent,
-  browserFields,
-  columnHeaders,
-  columnRenderers,
-  containerElementRef,
-  data,
-  eventIdToNoteIds,
-  getNotesByIds,
-  id,
-  isEventViewer = false,
-  loadingEventIds,
-  onColumnResized,
-  onPinEvent,
-  onRowSelected,
-  onUpdateColumns,
-  onUnPinEvent,
-  pinnedEventIds,
-  rowRenderers,
-  selectedEventIds,
-  showCheckboxes,
-  toggleColumn,
-  updateNote,
-}) => (
-  <EventsTbody data-test-subj="events">
-    {data.map((event, i) => (
-      <StatefulEvent
-        containerElementRef={containerElementRef}
-        actionsColumnWidth={actionsColumnWidth}
-        addNoteToEvent={addNoteToEvent}
-        browserFields={browserFields}
-        columnHeaders={columnHeaders}
-        columnRenderers={columnRenderers}
-        event={event}
-        eventIdToNoteIds={eventIdToNoteIds}
-        getNotesByIds={getNotesByIds}
-        isEventPinned={eventIsPinned({ eventId: event._id, pinnedEventIds })}
-        isEventViewer={isEventViewer}
-        key={`${event._id}_${event._index}`}
-        loadingEventIds={loadingEventIds}
-        maxDelay={maxDelay(i)}
-        onColumnResized={onColumnResized}
-        onPinEvent={onPinEvent}
-        onRowSelected={onRowSelected}
-        onUnPinEvent={onUnPinEvent}
-        onUpdateColumns={onUpdateColumns}
-        rowRenderers={rowRenderers}
-        selectedEventIds={selectedEventIds}
-        showCheckboxes={showCheckboxes}
-        timelineId={id}
-        toggleColumn={toggleColumn}
-        updateNote={updateNote}
-      />
-    ))}
-  </EventsTbody>
-);
-
-export const Events = React.memo(EventsComponent);
diff --git a/x-pack/plugins/siem/public/components/timeline/body/helpers.test.ts b/x-pack/plugins/siem/public/components/timeline/body/helpers.test.ts
deleted file mode 100644
index f021bf38b56c2d..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/body/helpers.test.ts
+++ /dev/null
@@ -1,228 +0,0 @@
-/*
- * 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 { Ecs } from '../../../graphql/types';
-
-import { eventHasNotes, eventIsPinned, getPinTooltip, stringifyEvent } from './helpers';
-
-describe('helpers', () => {
-  describe('stringifyEvent', () => {
-    test('it omits __typename when it appears at arbitrary levels', () => {
-      const toStringify: Ecs = {
-        __typename: 'level 0',
-        _id: '4',
-        timestamp: '2018-11-08T19:03:25.937Z',
-        host: {
-          __typename: 'level 1',
-          name: ['suricata'],
-          ip: ['192.168.0.1'],
-        },
-        event: {
-          id: ['4'],
-          category: ['Attempted Administrator Privilege Gain'],
-          type: ['Alert'],
-          module: ['suricata'],
-          severity: [1],
-        },
-        source: {
-          ip: ['192.168.0.3'],
-          port: [53],
-        },
-        destination: {
-          ip: ['192.168.0.3'],
-          port: [6343],
-        },
-        suricata: {
-          eve: {
-            flow_id: [4],
-            proto: [''],
-            alert: {
-              signature: ['ET PHONE HOME Stack Overflow (CVE-2019-90210)'],
-              signature_id: [4],
-              __typename: 'level 2',
-            },
-          },
-        },
-        user: {
-          id: ['4'],
-          name: ['jack.black'],
-        },
-        geo: {
-          region_name: ['neither'],
-          country_iso_code: ['sasquatch'],
-        },
-      } as Ecs; // as cast so that `__typename` can be added for the tests even though it is not part of ECS
-      const expected: Ecs = {
-        _id: '4',
-        timestamp: '2018-11-08T19:03:25.937Z',
-        host: {
-          name: ['suricata'],
-          ip: ['192.168.0.1'],
-        },
-        event: {
-          id: ['4'],
-          category: ['Attempted Administrator Privilege Gain'],
-          type: ['Alert'],
-          module: ['suricata'],
-          severity: [1],
-        },
-        source: {
-          ip: ['192.168.0.3'],
-          port: [53],
-        },
-        destination: {
-          ip: ['192.168.0.3'],
-          port: [6343],
-        },
-        suricata: {
-          eve: {
-            flow_id: [4],
-            proto: [''],
-            alert: {
-              signature: ['ET PHONE HOME Stack Overflow (CVE-2019-90210)'],
-              signature_id: [4],
-            },
-          },
-        },
-        user: {
-          id: ['4'],
-          name: ['jack.black'],
-        },
-        geo: {
-          region_name: ['neither'],
-          country_iso_code: ['sasquatch'],
-        },
-      };
-      expect(JSON.parse(stringifyEvent(toStringify))).toEqual(expected);
-    });
-
-    test('it omits null and undefined values at arbitrary levels, for arbitrary data types', () => {
-      const expected: Ecs = {
-        _id: '4',
-        host: {},
-        event: {
-          id: ['4'],
-          category: ['theory'],
-          type: ['Alert'],
-          module: ['me'],
-          severity: [1],
-        },
-        source: {
-          port: [53],
-        },
-        destination: {
-          ip: ['192.168.0.3'],
-          port: [6343],
-        },
-        suricata: {
-          eve: {
-            flow_id: [4],
-            proto: [''],
-            alert: {
-              signature: ['dance moves'],
-            },
-          },
-        },
-        user: {
-          id: ['4'],
-          name: ['no use for a'],
-        },
-        geo: {
-          region_name: ['bizzaro'],
-          country_iso_code: ['world'],
-        },
-      };
-      const toStringify: Ecs = {
-        _id: '4',
-        timestamp: null,
-        host: {
-          name: null,
-          ip: null,
-        },
-        event: {
-          id: ['4'],
-          category: ['theory'],
-          type: ['Alert'],
-          module: ['me'],
-          severity: [1],
-        },
-        source: {
-          ip: undefined,
-          port: [53],
-        },
-        destination: {
-          ip: ['192.168.0.3'],
-          port: [6343],
-        },
-        suricata: {
-          eve: {
-            flow_id: [4],
-            proto: [''],
-            alert: {
-              signature: ['dance moves'],
-              signature_id: undefined,
-            },
-          },
-        },
-        user: {
-          id: ['4'],
-          name: ['no use for a'],
-        },
-        geo: {
-          region_name: ['bizzaro'],
-          country_iso_code: ['world'],
-        },
-      };
-      expect(JSON.parse(stringifyEvent(toStringify))).toEqual(expected);
-    });
-  });
-
-  describe('eventHasNotes', () => {
-    test('it returns false for when notes is empty', () => {
-      expect(eventHasNotes([])).toEqual(false);
-    });
-
-    test('it returns true when notes is non-empty', () => {
-      expect(eventHasNotes(['8af859e2-e4f8-4754-b702-4f227f15aae5'])).toEqual(true);
-    });
-  });
-
-  describe('getPinTooltip', () => {
-    test('it indicates the event may NOT be unpinned when `isPinned` is `true` and the event has notes', () => {
-      expect(getPinTooltip({ isPinned: true, eventHasNotes: true })).toEqual(
-        'This event cannot be unpinned because it has notes'
-      );
-    });
-
-    test('it indicates the event is pinned when `isPinned` is `true` and the event does NOT have notes', () => {
-      expect(getPinTooltip({ isPinned: true, eventHasNotes: false })).toEqual('Pinned event');
-    });
-
-    test('it indicates the event is NOT pinned when `isPinned` is `false` and the event has notes', () => {
-      expect(getPinTooltip({ isPinned: false, eventHasNotes: true })).toEqual('Unpinned event');
-    });
-
-    test('it indicates the event is NOT pinned when `isPinned` is `false` and the event does NOT have notes', () => {
-      expect(getPinTooltip({ isPinned: false, eventHasNotes: false })).toEqual('Unpinned event');
-    });
-  });
-
-  describe('eventIsPinned', () => {
-    test('returns true when the specified event id is contained in the pinnedEventIds', () => {
-      const eventId = 'race-for-the-prize';
-      const pinnedEventIds = { [eventId]: true, 'waiting-for-superman': true };
-
-      expect(eventIsPinned({ eventId, pinnedEventIds })).toEqual(true);
-    });
-
-    test('returns false when the specified event id is NOT contained in the pinnedEventIds', () => {
-      const eventId = 'safety-pin';
-      const pinnedEventIds = { 'thumb-tack': true };
-
-      expect(eventIsPinned({ eventId, pinnedEventIds })).toEqual(false);
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/timeline/body/helpers.ts b/x-pack/plugins/siem/public/components/timeline/body/helpers.ts
deleted file mode 100644
index 3d1d165ef4fa60..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/body/helpers.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-/*
- * 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 { isEmpty, noop } from 'lodash/fp';
-
-import { Ecs, TimelineItem, TimelineNonEcsData } from '../../../graphql/types';
-import { EventType } from '../../../store/timeline/model';
-import { OnPinEvent, OnUnPinEvent } from '../events';
-
-import * as i18n from './translations';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const omitTypenameAndEmpty = (k: string, v: any): any | undefined =>
-  k !== '__typename' && v != null ? v : undefined;
-
-export const stringifyEvent = (ecs: Ecs): string => JSON.stringify(ecs, omitTypenameAndEmpty, 2);
-
-export const eventHasNotes = (noteIds: string[]): boolean => !isEmpty(noteIds);
-
-export const getPinTooltip = ({
-  isPinned,
-  // eslint-disable-next-line no-shadow
-  eventHasNotes,
-}: {
-  isPinned: boolean;
-  eventHasNotes: boolean;
-}) => (isPinned && eventHasNotes ? i18n.PINNED_WITH_NOTES : isPinned ? i18n.PINNED : i18n.UNPINNED);
-
-export interface IsPinnedParams {
-  eventId: string;
-  pinnedEventIds: Readonly<Record<string, boolean>>;
-}
-
-export const eventIsPinned = ({ eventId, pinnedEventIds }: IsPinnedParams): boolean =>
-  pinnedEventIds[eventId] === true;
-
-export interface GetPinOnClickParams {
-  allowUnpinning: boolean;
-  eventId: string;
-  onPinEvent: OnPinEvent;
-  onUnPinEvent: OnUnPinEvent;
-  isEventPinned: boolean;
-}
-
-export const getPinOnClick = ({
-  allowUnpinning,
-  eventId,
-  onPinEvent,
-  onUnPinEvent,
-  isEventPinned,
-}: GetPinOnClickParams): (() => void) => {
-  if (!allowUnpinning) {
-    return noop;
-  }
-  return isEventPinned ? () => onUnPinEvent(eventId) : () => onPinEvent(eventId);
-};
-
-/**
- * Creates mapping of eventID -> fieldData for given fieldsToKeep. Used to store additional field
- * data necessary for custom timeline actions in conjunction with selection state
- * @param timelineData
- * @param eventIds
- * @param fieldsToKeep
- */
-export const getEventIdToDataMapping = (
-  timelineData: TimelineItem[],
-  eventIds: string[],
-  fieldsToKeep: string[]
-): Record<string, TimelineNonEcsData[]> => {
-  return timelineData.reduce((acc, v) => {
-    const fvm = eventIds.includes(v._id)
-      ? { [v._id]: v.data.filter(ti => fieldsToKeep.includes(ti.field)) }
-      : {};
-    return {
-      ...acc,
-      ...fvm,
-    };
-  }, {});
-};
-
-/** Return eventType raw or signal */
-export const getEventType = (event: Ecs): Omit<EventType, 'all'> => {
-  if (!isEmpty(event.signal?.rule?.id)) {
-    return 'signal';
-  }
-  return 'raw';
-};
diff --git a/x-pack/plugins/siem/public/components/timeline/body/index.test.tsx b/x-pack/plugins/siem/public/components/timeline/body/index.test.tsx
deleted file mode 100644
index cf35c8e565bbc0..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/body/index.test.tsx
+++ /dev/null
@@ -1,355 +0,0 @@
-/*
- * 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 { mockBrowserFields } from '../../../containers/source/mock';
-import { Direction } from '../../../graphql/types';
-import { defaultHeaders, mockTimelineData } from '../../../mock';
-import { TestProviders } from '../../../mock/test_providers';
-
-import { Body, BodyProps } from '.';
-import { columnRenderers, rowRenderers } from './renderers';
-import { Sort } from './sort';
-import { wait } from '../../../lib/helpers';
-import { useMountAppended } from '../../../utils/use_mount_appended';
-
-const testBodyHeight = 700;
-const mockGetNotesByIds = (eventId: string[]) => [];
-const mockSort: Sort = {
-  columnId: '@timestamp',
-  sortDirection: Direction.desc,
-};
-
-jest.mock(
-  'react-visibility-sensor',
-  () => ({ children }: { children: (args: { isVisible: boolean }) => React.ReactNode }) =>
-    children({ isVisible: true })
-);
-
-jest.mock('../../../lib/helpers/scheduler', () => ({
-  requestIdleCallbackViaScheduler: (callback: () => void, opts?: unknown) => {
-    callback();
-  },
-  maxDelay: () => 3000,
-}));
-
-describe('Body', () => {
-  const mount = useMountAppended();
-
-  describe('rendering', () => {
-    test('it renders the column headers', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <Body
-            addNoteToEvent={jest.fn()}
-            browserFields={mockBrowserFields}
-            columnHeaders={defaultHeaders}
-            columnRenderers={columnRenderers}
-            data={mockTimelineData}
-            eventIdToNoteIds={{}}
-            height={testBodyHeight}
-            id={'timeline-test'}
-            isSelectAllChecked={false}
-            getNotesByIds={mockGetNotesByIds}
-            loadingEventIds={[]}
-            onColumnRemoved={jest.fn()}
-            onColumnResized={jest.fn()}
-            onColumnSorted={jest.fn()}
-            onFilterChange={jest.fn()}
-            onPinEvent={jest.fn()}
-            onRowSelected={jest.fn()}
-            onSelectAll={jest.fn()}
-            onUnPinEvent={jest.fn()}
-            onUpdateColumns={jest.fn()}
-            pinnedEventIds={{}}
-            rowRenderers={rowRenderers}
-            selectedEventIds={{}}
-            sort={mockSort}
-            showCheckboxes={false}
-            toggleColumn={jest.fn()}
-            updateNote={jest.fn()}
-          />
-        </TestProviders>
-      );
-
-      expect(
-        wrapper
-          .find('[data-test-subj="column-headers"]')
-          .first()
-          .exists()
-      ).toEqual(true);
-    });
-
-    test('it renders the scroll container', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <Body
-            addNoteToEvent={jest.fn()}
-            browserFields={mockBrowserFields}
-            columnHeaders={defaultHeaders}
-            columnRenderers={columnRenderers}
-            data={mockTimelineData}
-            eventIdToNoteIds={{}}
-            height={testBodyHeight}
-            id={'timeline-test'}
-            isSelectAllChecked={false}
-            getNotesByIds={mockGetNotesByIds}
-            loadingEventIds={[]}
-            onColumnRemoved={jest.fn()}
-            onColumnResized={jest.fn()}
-            onColumnSorted={jest.fn()}
-            onFilterChange={jest.fn()}
-            onPinEvent={jest.fn()}
-            onRowSelected={jest.fn()}
-            onSelectAll={jest.fn()}
-            onUnPinEvent={jest.fn()}
-            onUpdateColumns={jest.fn()}
-            pinnedEventIds={{}}
-            rowRenderers={rowRenderers}
-            selectedEventIds={{}}
-            sort={mockSort}
-            showCheckboxes={false}
-            toggleColumn={jest.fn()}
-            updateNote={jest.fn()}
-          />
-        </TestProviders>
-      );
-
-      expect(
-        wrapper
-          .find('[data-test-subj="timeline-body"]')
-          .first()
-          .exists()
-      ).toEqual(true);
-    });
-
-    test('it renders events', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <Body
-            addNoteToEvent={jest.fn()}
-            browserFields={mockBrowserFields}
-            columnHeaders={defaultHeaders}
-            columnRenderers={columnRenderers}
-            data={mockTimelineData}
-            eventIdToNoteIds={{}}
-            height={testBodyHeight}
-            id={'timeline-test'}
-            isSelectAllChecked={false}
-            getNotesByIds={mockGetNotesByIds}
-            loadingEventIds={[]}
-            onColumnRemoved={jest.fn()}
-            onColumnResized={jest.fn()}
-            onColumnSorted={jest.fn()}
-            onFilterChange={jest.fn()}
-            onPinEvent={jest.fn()}
-            onRowSelected={jest.fn()}
-            onSelectAll={jest.fn()}
-            onUnPinEvent={jest.fn()}
-            onUpdateColumns={jest.fn()}
-            pinnedEventIds={{}}
-            rowRenderers={rowRenderers}
-            selectedEventIds={{}}
-            sort={mockSort}
-            showCheckboxes={false}
-            toggleColumn={jest.fn()}
-            updateNote={jest.fn()}
-          />
-        </TestProviders>
-      );
-
-      expect(
-        wrapper
-          .find('[data-test-subj="events"]')
-          .first()
-          .exists()
-      ).toEqual(true);
-    });
-
-    test('it renders a tooltip for timestamp', async () => {
-      const headersJustTimestamp = defaultHeaders.filter(h => h.id === '@timestamp');
-
-      const wrapper = mount(
-        <TestProviders>
-          <Body
-            addNoteToEvent={jest.fn()}
-            browserFields={mockBrowserFields}
-            columnHeaders={headersJustTimestamp}
-            columnRenderers={columnRenderers}
-            data={mockTimelineData}
-            eventIdToNoteIds={{}}
-            height={testBodyHeight}
-            id={'timeline-test'}
-            isSelectAllChecked={false}
-            getNotesByIds={mockGetNotesByIds}
-            loadingEventIds={[]}
-            onColumnRemoved={jest.fn()}
-            onColumnResized={jest.fn()}
-            onColumnSorted={jest.fn()}
-            onFilterChange={jest.fn()}
-            onPinEvent={jest.fn()}
-            onRowSelected={jest.fn()}
-            onSelectAll={jest.fn()}
-            onUnPinEvent={jest.fn()}
-            onUpdateColumns={jest.fn()}
-            pinnedEventIds={{}}
-            rowRenderers={rowRenderers}
-            selectedEventIds={{}}
-            sort={mockSort}
-            showCheckboxes={false}
-            toggleColumn={jest.fn()}
-            updateNote={jest.fn()}
-          />
-        </TestProviders>
-      );
-      wrapper.update();
-      await wait();
-      wrapper.update();
-      headersJustTimestamp.forEach(() => {
-        expect(
-          wrapper
-            .find('[data-test-subj="data-driven-columns"]')
-            .first()
-            .find('[data-test-subj="localized-date-tool-tip"]')
-            .exists()
-        ).toEqual(true);
-      });
-    });
-  });
-
-  describe('action on event', () => {
-    const dispatchAddNoteToEvent = jest.fn();
-    const dispatchOnPinEvent = jest.fn();
-
-    const addaNoteToEvent = (wrapper: ReturnType<typeof mount>, note: string) => {
-      wrapper
-        .find('[data-test-subj="add-note"]')
-        .first()
-        .find('button')
-        .simulate('click');
-      wrapper.update();
-      wrapper
-        .find('[data-test-subj="new-note-tabs"] textarea')
-        .simulate('change', { target: { value: note } });
-      wrapper.update();
-      wrapper
-        .find('button[data-test-subj="add-note"]')
-        .first()
-        .simulate('click');
-      wrapper.update();
-    };
-
-    // We are doing that because we need to wrapped this component with redux
-    // and redux does not like to be updated and since we need to update our
-    // child component (BODY) and we do not want to scare anyone with this error
-    // we are hiding it!!!
-    // eslint-disable-next-line no-console
-    const originalError = console.error;
-    beforeAll(() => {
-      // eslint-disable-next-line no-console
-      console.error = (...args: string[]) => {
-        if (/<Provider> does not support changing `store` on the fly/.test(args[0])) {
-          return;
-        }
-        originalError.call(console, ...args);
-      };
-    });
-
-    beforeEach(() => {
-      dispatchAddNoteToEvent.mockClear();
-      dispatchOnPinEvent.mockClear();
-    });
-
-    test('Add a Note to an event', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <Body
-            addNoteToEvent={dispatchAddNoteToEvent}
-            browserFields={mockBrowserFields}
-            columnHeaders={defaultHeaders}
-            columnRenderers={columnRenderers}
-            data={mockTimelineData}
-            eventIdToNoteIds={{}}
-            height={testBodyHeight}
-            id={'timeline-test'}
-            isSelectAllChecked={false}
-            getNotesByIds={mockGetNotesByIds}
-            loadingEventIds={[]}
-            onColumnRemoved={jest.fn()}
-            onColumnResized={jest.fn()}
-            onColumnSorted={jest.fn()}
-            onFilterChange={jest.fn()}
-            onPinEvent={dispatchOnPinEvent}
-            onRowSelected={jest.fn()}
-            onSelectAll={jest.fn()}
-            onUnPinEvent={jest.fn()}
-            onUpdateColumns={jest.fn()}
-            pinnedEventIds={{}}
-            rowRenderers={rowRenderers}
-            selectedEventIds={{}}
-            sort={mockSort}
-            showCheckboxes={false}
-            toggleColumn={jest.fn()}
-            updateNote={jest.fn()}
-          />
-        </TestProviders>
-      );
-      addaNoteToEvent(wrapper, 'hello world');
-
-      expect(dispatchAddNoteToEvent).toHaveBeenCalled();
-      expect(dispatchOnPinEvent).toHaveBeenCalled();
-    });
-
-    test('Add two Note to an event', () => {
-      const Proxy = (props: BodyProps) => (
-        <TestProviders>
-          <Body {...props} />
-        </TestProviders>
-      );
-
-      const wrapper = mount(
-        <Proxy
-          addNoteToEvent={dispatchAddNoteToEvent}
-          browserFields={mockBrowserFields}
-          columnHeaders={defaultHeaders}
-          columnRenderers={columnRenderers}
-          data={mockTimelineData}
-          eventIdToNoteIds={{}}
-          height={testBodyHeight}
-          id={'timeline-test'}
-          isSelectAllChecked={false}
-          getNotesByIds={mockGetNotesByIds}
-          loadingEventIds={[]}
-          onColumnRemoved={jest.fn()}
-          onColumnResized={jest.fn()}
-          onColumnSorted={jest.fn()}
-          onFilterChange={jest.fn()}
-          onPinEvent={dispatchOnPinEvent}
-          onRowSelected={jest.fn()}
-          onSelectAll={jest.fn()}
-          onUnPinEvent={jest.fn()}
-          onUpdateColumns={jest.fn()}
-          pinnedEventIds={{}}
-          rowRenderers={rowRenderers}
-          selectedEventIds={{}}
-          sort={mockSort}
-          showCheckboxes={false}
-          toggleColumn={jest.fn()}
-          updateNote={jest.fn()}
-        />
-      );
-      addaNoteToEvent(wrapper, 'hello world');
-      dispatchAddNoteToEvent.mockClear();
-      dispatchOnPinEvent.mockClear();
-      wrapper.setProps({ pinnedEventIds: { 1: true } });
-      wrapper.update();
-      addaNoteToEvent(wrapper, 'new hello world');
-      expect(dispatchAddNoteToEvent).toHaveBeenCalled();
-      expect(dispatchOnPinEvent).not.toHaveBeenCalled();
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/timeline/body/index.tsx b/x-pack/plugins/siem/public/components/timeline/body/index.tsx
deleted file mode 100644
index fac8cc61cddd2e..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/body/index.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-/*
- * 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, { useMemo, useRef } from 'react';
-
-import { BrowserFields } from '../../../containers/source';
-import { TimelineItem, TimelineNonEcsData } from '../../../graphql/types';
-import { Note } from '../../../lib/note';
-import { ColumnHeaderOptions } from '../../../store/timeline/model';
-import { AddNoteToEvent, UpdateNote } from '../../notes/helpers';
-import {
-  OnColumnRemoved,
-  OnColumnResized,
-  OnColumnSorted,
-  OnFilterChange,
-  OnPinEvent,
-  OnRowSelected,
-  OnSelectAll,
-  OnUnPinEvent,
-  OnUpdateColumns,
-} from '../events';
-import { EventsTable, TimelineBody, TimelineBodyGlobalStyle } from '../styles';
-import { ColumnHeaders } from './column_headers';
-import { getActionsColumnWidth } from './column_headers/helpers';
-import { Events } from './events';
-import { ColumnRenderer } from './renderers/column_renderer';
-import { RowRenderer } from './renderers/row_renderer';
-import { Sort } from './sort';
-import { useTimelineTypeContext } from '../timeline_context';
-
-export interface BodyProps {
-  addNoteToEvent: AddNoteToEvent;
-  browserFields: BrowserFields;
-  columnHeaders: ColumnHeaderOptions[];
-  columnRenderers: ColumnRenderer[];
-  data: TimelineItem[];
-  getNotesByIds: (noteIds: string[]) => Note[];
-  height?: number;
-  id: string;
-  isEventViewer?: boolean;
-  isSelectAllChecked: boolean;
-  eventIdToNoteIds: Readonly<Record<string, string[]>>;
-  loadingEventIds: Readonly<string[]>;
-  onColumnRemoved: OnColumnRemoved;
-  onColumnResized: OnColumnResized;
-  onColumnSorted: OnColumnSorted;
-  onRowSelected: OnRowSelected;
-  onSelectAll: OnSelectAll;
-  onFilterChange: OnFilterChange;
-  onPinEvent: OnPinEvent;
-  onUpdateColumns: OnUpdateColumns;
-  onUnPinEvent: OnUnPinEvent;
-  pinnedEventIds: Readonly<Record<string, boolean>>;
-  rowRenderers: RowRenderer[];
-  selectedEventIds: Readonly<Record<string, TimelineNonEcsData[]>>;
-  showCheckboxes: boolean;
-  sort: Sort;
-  toggleColumn: (column: ColumnHeaderOptions) => void;
-  updateNote: UpdateNote;
-}
-
-/** Renders the timeline body */
-export const Body = React.memo<BodyProps>(
-  ({
-    addNoteToEvent,
-    browserFields,
-    columnHeaders,
-    columnRenderers,
-    data,
-    eventIdToNoteIds,
-    getNotesByIds,
-    height,
-    id,
-    isEventViewer = false,
-    isSelectAllChecked,
-    loadingEventIds,
-    onColumnRemoved,
-    onColumnResized,
-    onColumnSorted,
-    onRowSelected,
-    onSelectAll,
-    onFilterChange,
-    onPinEvent,
-    onUpdateColumns,
-    onUnPinEvent,
-    pinnedEventIds,
-    rowRenderers,
-    selectedEventIds,
-    showCheckboxes,
-    sort,
-    toggleColumn,
-    updateNote,
-  }) => {
-    const containerElementRef = useRef<HTMLDivElement>(null);
-    const timelineTypeContext = useTimelineTypeContext();
-    const additionalActionWidth = useMemo(
-      () => timelineTypeContext.timelineActions?.reduce((acc, v) => acc + v.width, 0) ?? 0,
-      [timelineTypeContext.timelineActions]
-    );
-    const actionsColumnWidth = useMemo(
-      () => getActionsColumnWidth(isEventViewer, showCheckboxes, additionalActionWidth),
-      [isEventViewer, showCheckboxes, additionalActionWidth]
-    );
-
-    const columnWidths = useMemo(
-      () =>
-        columnHeaders.reduce((totalWidth, header) => totalWidth + header.width, actionsColumnWidth),
-      [actionsColumnWidth, columnHeaders]
-    );
-
-    return (
-      <>
-        <TimelineBody data-test-subj="timeline-body" bodyHeight={height} ref={containerElementRef}>
-          <EventsTable data-test-subj="events-table" columnWidths={columnWidths}>
-            <ColumnHeaders
-              actionsColumnWidth={actionsColumnWidth}
-              browserFields={browserFields}
-              columnHeaders={columnHeaders}
-              isEventViewer={isEventViewer}
-              isSelectAllChecked={isSelectAllChecked}
-              onColumnRemoved={onColumnRemoved}
-              onColumnResized={onColumnResized}
-              onColumnSorted={onColumnSorted}
-              onFilterChange={onFilterChange}
-              onSelectAll={onSelectAll}
-              onUpdateColumns={onUpdateColumns}
-              showEventsSelect={false}
-              showSelectAllCheckbox={showCheckboxes}
-              sort={sort}
-              timelineId={id}
-              toggleColumn={toggleColumn}
-            />
-
-            <Events
-              containerElementRef={containerElementRef.current!}
-              actionsColumnWidth={actionsColumnWidth}
-              addNoteToEvent={addNoteToEvent}
-              browserFields={browserFields}
-              columnHeaders={columnHeaders}
-              columnRenderers={columnRenderers}
-              data={data}
-              eventIdToNoteIds={eventIdToNoteIds}
-              getNotesByIds={getNotesByIds}
-              id={id}
-              isEventViewer={isEventViewer}
-              loadingEventIds={loadingEventIds}
-              onColumnResized={onColumnResized}
-              onPinEvent={onPinEvent}
-              onRowSelected={onRowSelected}
-              onUpdateColumns={onUpdateColumns}
-              onUnPinEvent={onUnPinEvent}
-              pinnedEventIds={pinnedEventIds}
-              rowRenderers={rowRenderers}
-              selectedEventIds={selectedEventIds}
-              showCheckboxes={showCheckboxes}
-              toggleColumn={toggleColumn}
-              updateNote={updateNote}
-            />
-          </EventsTable>
-        </TimelineBody>
-        <TimelineBodyGlobalStyle />
-      </>
-    );
-  }
-);
-Body.displayName = 'Body';
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/generic_details.test.tsx b/x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/generic_details.test.tsx
deleted file mode 100644
index 21cccc88f4fbce..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/generic_details.test.tsx
+++ /dev/null
@@ -1,485 +0,0 @@
-/*
- * 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 { shallow } from 'enzyme';
-import React from 'react';
-
-import { BrowserFields } from '../../../../../containers/source';
-import { mockBrowserFields } from '../../../../../containers/source/mock';
-import { mockTimelineData, TestProviders } from '../../../../../mock';
-import { AuditdGenericDetails, AuditdGenericLine } from './generic_details';
-import { useMountAppended } from '../../../../../utils/use_mount_appended';
-
-describe('GenericDetails', () => {
-  const mount = useMountAppended();
-
-  describe('rendering', () => {
-    test('it renders the default AuditAcquiredCredsDetails', () => {
-      // 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(
-        <AuditdGenericDetails
-          contextId="contextid-123"
-          text="generic-text-123"
-          browserFields={browserFields}
-          data={mockTimelineData[21].ecs}
-          timelineId="test"
-        />
-      );
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    test('it returns auditd if the data does contain auditd data', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <AuditdGenericDetails
-            contextId="contextid-123"
-            text="generic-text-123"
-            browserFields={mockBrowserFields}
-            data={mockTimelineData[19].ecs}
-            timelineId="test"
-          />
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        'Sessionalice@zeek-sanfranin/generic-text-123gpgconf(5402)gpgconf--list-dirsagent-socketgpgconf --list-dirs agent-socket'
-      );
-    });
-
-    test('it returns null for text if the data contains no auditd data', () => {
-      const wrapper = shallow(
-        <AuditdGenericDetails
-          contextId="contextid-123"
-          text="generic-text-123"
-          browserFields={mockBrowserFields}
-          data={mockTimelineData[0].ecs}
-          timelineId="test"
-        />
-      );
-      expect(wrapper.isEmptyRender()).toBeTruthy();
-    });
-  });
-
-  describe('#AuditdConnectedToLine', () => {
-    test('it returns pretty output if you send in all your happy path data', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <AuditdGenericLine
-            id="hello-i-am-an-id"
-            contextId="contextid-123"
-            text="generic-text-123"
-            hostName="host-1"
-            userName="username-1"
-            session="session-1"
-            primary="username-1"
-            secondary="username-1"
-            processPid={123}
-            processName="process-name-1"
-            processExecutable="process-1"
-            processTitle="process-title-1"
-            workingDirectory="working-directory-1"
-            args={['arg1', 'arg2', 'arg3']}
-            result="success"
-          />
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        'Sessionsession-1username-1@host-1inworking-directory-1generic-text-123process-name-1(123)arg1arg2arg3process-title-1with resultsuccess'
-      );
-    });
-
-    test('it returns a session with username if username, primary, and secondary all equal each other ', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <AuditdGenericLine
-            id="hello-i-am-an-id"
-            contextId="contextid-123"
-            text="generic-text-123"
-            hostName="host-1"
-            session="session-1"
-            userName="username-1"
-            primary="username-1"
-            secondary="username-1"
-            processPid={123}
-            processName="process-name-1"
-            processExecutable="process-1"
-            processTitle="process-title-1"
-            workingDirectory="working-directory-1"
-            args={['arg1', 'arg2', 'arg3']}
-            result="success"
-          />
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        'Sessionsession-1username-1@host-1inworking-directory-1generic-text-123process-name-1(123)arg1arg2arg3process-title-1with resultsuccess'
-      );
-    });
-
-    test('it returns a session with username if primary and secondary equal unset', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <AuditdGenericLine
-            id="hello-i-am-an-id"
-            contextId="contextid-123"
-            text="generic-text-123"
-            hostName="host-1"
-            session="session-1"
-            userName="username-1"
-            primary="unset"
-            secondary="unset"
-            processPid={123}
-            processName="process-name-1"
-            processExecutable="process-1"
-            processTitle="process-title-1"
-            workingDirectory="working-directory-1"
-            args={['arg1', 'arg2', 'arg3']}
-            result="success"
-          />
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        'Sessionsession-1username-1@host-1inworking-directory-1generic-text-123process-name-1(123)arg1arg2arg3process-title-1with resultsuccess'
-      );
-    });
-
-    test('it returns a session with username if primary and secondary equal unset with different casing', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <AuditdGenericLine
-            id="hello-i-am-an-id"
-            contextId="contextid-123"
-            text="generic-text-123"
-            hostName="host-1"
-            userName="username-1"
-            session="session-1"
-            primary="Unset"
-            secondary="uNseT"
-            processPid={123}
-            processName="process-name-1"
-            processExecutable="process-1"
-            processTitle="process-title-1"
-            workingDirectory="working-directory-1"
-            args={['arg1', 'arg2', 'arg3']}
-            result="success"
-          />
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        'Sessionsession-1username-1@host-1inworking-directory-1generic-text-123process-name-1(123)arg1arg2arg3process-title-1with resultsuccess'
-      );
-    });
-
-    test('it returns a session with username if primary and secondary are undefined', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <AuditdGenericLine
-            id="hello-i-am-an-id"
-            contextId="contextid-123"
-            text="generic-text-123"
-            hostName="host-1"
-            session="session-1"
-            primary={undefined}
-            secondary={undefined}
-            userName="username-1"
-            processPid={123}
-            processName="process-name-1"
-            processExecutable="process-1"
-            processTitle="process-title-1"
-            workingDirectory="working-directory-1"
-            args={['arg1', 'arg2', 'arg3']}
-            result="success"
-          />
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        'Sessionsession-1username-1@host-1inworking-directory-1generic-text-123process-name-1(123)arg1arg2arg3process-title-1with resultsuccess'
-      );
-    });
-
-    test('it returns a session with "as" wording if username, primary, and secondary are all different', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <AuditdGenericLine
-            id="hello-i-am-an-id"
-            contextId="contextid-123"
-            text="generic-text-123"
-            hostName="host-1"
-            session="session-1"
-            userName="[username-1]"
-            primary="[username-2]"
-            secondary="[username-3]"
-            processPid={123}
-            processName="process-name-1"
-            processExecutable="process-1"
-            processTitle="process-title-1"
-            workingDirectory="working-directory-1"
-            args={['arg1', 'arg2', 'arg3']}
-            result="success"
-          />
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        'Sessionsession-1[username-2]as[username-3]@host-1inworking-directory-1generic-text-123process-name-1(123)arg1arg2arg3process-title-1with resultsuccess'
-      );
-    });
-
-    test('it returns a session with "as" wording if username and primary are the same but secondary is different', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <AuditdGenericLine
-            id="hello-i-am-an-id"
-            contextId="contextid-123"
-            text="generic-text-123"
-            hostName="host-1"
-            session="session-1"
-            userName="[username-1]"
-            primary="[username-1]"
-            secondary="[username-2]"
-            processPid={123}
-            processName="process-name-1"
-            processExecutable="process-1"
-            processTitle="process-title-1"
-            workingDirectory="working-directory-1"
-            args={['arg1', 'arg2', 'arg3']}
-            result="success"
-          />
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        'Sessionsession-1[username-1]as[username-2]@host-1inworking-directory-1generic-text-123process-name-1(123)arg1arg2arg3process-title-1with resultsuccess'
-      );
-    });
-
-    test('it returns a session with primary if username and secondary are unset with different casing', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <AuditdGenericLine
-            id="hello-i-am-an-id"
-            contextId="contextid-123"
-            text="generic-text-123"
-            hostName="host-1"
-            userName="unseT"
-            session="session-1"
-            primary="[username-primary]"
-            secondary="unset"
-            processPid={123}
-            processName="process-name-1"
-            processExecutable="process-1"
-            processTitle="process-title-1"
-            workingDirectory="working-directory-1"
-            args={['arg1', 'arg2', 'arg3']}
-            result="success"
-          />
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        'Sessionsession-1[username-primary]@host-1inworking-directory-1generic-text-123process-name-1(123)arg1arg2arg3process-title-1with resultsuccess'
-      );
-    });
-
-    test('it returns a session with primary if username and secondary are undefined', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <AuditdGenericLine
-            id="hello-i-am-an-id"
-            contextId="contextid-123"
-            text="generic-text-123"
-            hostName="host-1"
-            session="session-1"
-            primary="[username-primary]"
-            userName={undefined}
-            secondary={undefined}
-            processPid={123}
-            processName="process-name-1"
-            processExecutable="process-1"
-            processTitle="process-title-1"
-            workingDirectory="working-directory-1"
-            args={['arg1', 'arg2', 'arg3']}
-            result="success"
-          />
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        'Sessionsession-1[username-primary]@host-1inworking-directory-1generic-text-123process-name-1(123)arg1arg2arg3process-title-1with resultsuccess'
-      );
-    });
-
-    test('it returns just a session if only given an id', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <AuditdGenericLine
-            id="hello-i-am-an-id"
-            contextId="contextid-123"
-            text="generic-text-123"
-            userName={undefined}
-            secondary={undefined}
-            session={undefined}
-            hostName={undefined}
-            primary={undefined}
-            processPid={undefined}
-            processName={undefined}
-            processExecutable={undefined}
-            processTitle={undefined}
-            workingDirectory={undefined}
-            args={undefined}
-            result={undefined}
-          />
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual('Session');
-    });
-
-    test('it returns only session and hostName if only hostname and an id is given', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <AuditdGenericLine
-            id="hello-i-am-an-id"
-            contextId="contextid-123"
-            text="generic-text-123"
-            hostName="some-host-name"
-            userName={undefined}
-            secondary={undefined}
-            session={undefined}
-            primary={undefined}
-            processPid={undefined}
-            processName={undefined}
-            processExecutable={undefined}
-            processTitle={undefined}
-            workingDirectory={undefined}
-            args={undefined}
-            result={undefined}
-          />
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual('Session@some-host-name');
-    });
-
-    test('it returns only a session and user name if only a user name and id is given', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <AuditdGenericLine
-            id="hello-i-am-an-id"
-            contextId="contextid-123"
-            text="generic-text-123"
-            userName="some-user-name"
-            secondary={undefined}
-            session={undefined}
-            hostName={undefined}
-            primary={undefined}
-            processPid={undefined}
-            processName={undefined}
-            processExecutable={undefined}
-            processTitle={undefined}
-            workingDirectory={undefined}
-            args={undefined}
-            result={undefined}
-          />
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual('Sessionsome-user-name');
-    });
-
-    test('it returns only a process name if only given a process name and id', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <AuditdGenericLine
-            id="hello-i-am-an-id"
-            contextId="contextid-123"
-            text="generic-text-123"
-            userName={undefined}
-            processExecutable="some-process-name"
-            secondary={undefined}
-            session={undefined}
-            hostName={undefined}
-            primary={undefined}
-            processPid={undefined}
-            processName={undefined}
-            processTitle={undefined}
-            workingDirectory={undefined}
-            args={undefined}
-            result={undefined}
-          />
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual('Sessiongeneric-text-123some-process-name');
-    });
-
-    test('it returns session, user name, and process title if process title with id is given', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <AuditdGenericLine
-            id="hello-i-am-an-id"
-            contextId="contextid-123"
-            text="generic-text-123"
-            processTitle="some-process-title"
-            userName="some-user-name"
-            secondary={undefined}
-            session={undefined}
-            hostName={undefined}
-            primary={undefined}
-            processPid={undefined}
-            processName={undefined}
-            processExecutable={undefined}
-            workingDirectory={undefined}
-            args={undefined}
-            result={undefined}
-          />
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual('Sessionsome-user-namesome-process-title');
-    });
-
-    test('it returns only a working directory if that is all that is given with a id', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <AuditdGenericLine
-            id="hello-i-am-an-id"
-            contextId="contextid-123"
-            text="generic-text-123"
-            workingDirectory="some-working-directory"
-            userName={undefined}
-            secondary={undefined}
-            session={undefined}
-            hostName={undefined}
-            primary={undefined}
-            processPid={undefined}
-            processName={undefined}
-            processExecutable={undefined}
-            processTitle={undefined}
-            args={undefined}
-            result={undefined}
-          />
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual('Sessioninsome-working-directory');
-    });
-
-    test('it returns only the session and args with id if that is all that is given (very unlikely situation)', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <AuditdGenericLine
-            id="hello-i-am-an-id"
-            contextId="contextid-123"
-            text="generic-text-123"
-            args={['arg1', 'arg2', 'arg 3']}
-            userName={undefined}
-            secondary={undefined}
-            session={undefined}
-            hostName={undefined}
-            primary={undefined}
-            processPid={undefined}
-            processName={undefined}
-            processExecutable={undefined}
-            processTitle={undefined}
-            workingDirectory={undefined}
-            result={undefined}
-          />
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual('Sessionarg1arg2arg 3');
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/generic_details.tsx b/x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/generic_details.tsx
deleted file mode 100644
index c25c656b75e41f..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/generic_details.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-/*
- * 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 { EuiFlexGroup, EuiSpacer } from '@elastic/eui';
-import { get } from 'lodash/fp';
-import React from 'react';
-
-import { BrowserFields } from '../../../../../containers/source';
-import { Ecs } from '../../../../../graphql/types';
-import { DraggableBadge } from '../../../../draggables';
-
-import * as i18n from './translations';
-import { NetflowRenderer } from '../netflow';
-import { TokensFlexItem, Details } from '../helpers';
-import { ProcessDraggable } from '../process_draggable';
-import { Args } from '../args';
-import { SessionUserHostWorkingDir } from './session_user_host_working_dir';
-
-interface Props {
-  id: string;
-  hostName: string | null | undefined;
-  result: string | null | undefined;
-  userName: string | null | undefined;
-  primary: string | null | undefined;
-  contextId: string;
-  text: string;
-  secondary: string | null | undefined;
-  processName: string | null | undefined;
-  processPid: number | null | undefined;
-  processExecutable: string | null | undefined;
-  processTitle: string | null | undefined;
-  workingDirectory: string | null | undefined;
-  args: string[] | null | undefined;
-  session: string | null | undefined;
-}
-
-export const AuditdGenericLine = React.memo<Props>(
-  ({
-    id,
-    contextId,
-    hostName,
-    userName,
-    primary,
-    processName,
-    processPid,
-    processExecutable,
-    processTitle,
-    secondary,
-    workingDirectory,
-    args,
-    result,
-    session,
-    text,
-  }) => (
-    <EuiFlexGroup alignItems="center" justifyContent="center" gutterSize="none" wrap={true}>
-      <SessionUserHostWorkingDir
-        eventId={id}
-        contextId={contextId}
-        hostName={hostName}
-        userName={userName}
-        primary={primary}
-        secondary={secondary}
-        workingDirectory={workingDirectory}
-        session={session}
-      />
-      {processExecutable != null && (
-        <TokensFlexItem grow={false} component="span">
-          {text}
-        </TokensFlexItem>
-      )}
-      <TokensFlexItem grow={false} component="span">
-        <ProcessDraggable
-          contextId={contextId}
-          endgamePid={undefined}
-          endgameProcessName={undefined}
-          eventId={id}
-          processPid={processPid}
-          processName={processName}
-          processExecutable={processExecutable}
-        />
-      </TokensFlexItem>
-      <Args eventId={id} args={args} contextId={contextId} processTitle={processTitle} />
-      {result != null && (
-        <TokensFlexItem grow={false} component="span">
-          {i18n.WITH_RESULT}
-        </TokensFlexItem>
-      )}
-      <TokensFlexItem grow={false} component="span">
-        <DraggableBadge
-          contextId={contextId}
-          eventId={id}
-          field="auditd.result"
-          queryValue={result}
-          value={result}
-        />
-      </TokensFlexItem>
-    </EuiFlexGroup>
-  )
-);
-
-AuditdGenericLine.displayName = 'AuditdGenericLine';
-
-interface GenericDetailsProps {
-  browserFields: BrowserFields;
-  data: Ecs;
-  contextId: string;
-  text: string;
-  timelineId: string;
-}
-
-export const AuditdGenericDetails = React.memo<GenericDetailsProps>(
-  ({ data, contextId, text, timelineId }) => {
-    const id = data._id;
-    const session: string | null | undefined = get('auditd.session[0]', data);
-    const hostName: string | null | undefined = get('host.name[0]', data);
-    const userName: string | null | undefined = get('user.name[0]', data);
-    const result: string | null | undefined = get('auditd.result[0]', data);
-    const processPid: number | null | undefined = get('process.pid[0]', data);
-    const processName: string | null | undefined = get('process.name[0]', data);
-    const processExecutable: string | null | undefined = get('process.executable[0]', data);
-    const processTitle: string | null | undefined = get('process.title[0]', data);
-    const workingDirectory: string | null | undefined = get('process.working_directory[0]', data);
-    const primary: string | null | undefined = get('auditd.summary.actor.primary[0]', data);
-    const secondary: string | null | undefined = get('auditd.summary.actor.secondary[0]', data);
-    const args: string[] | null | undefined = get('process.args', data);
-    if (data.process != null) {
-      return (
-        <Details>
-          <AuditdGenericLine
-            id={id}
-            contextId={contextId}
-            text={text}
-            hostName={hostName}
-            userName={userName}
-            processName={processName}
-            processPid={processPid}
-            processExecutable={processExecutable}
-            processTitle={processTitle}
-            workingDirectory={workingDirectory}
-            args={args}
-            session={session}
-            primary={primary}
-            result={result}
-            secondary={secondary}
-          />
-          <EuiSpacer size="s" />
-          <NetflowRenderer data={data} timelineId={timelineId} />
-        </Details>
-      );
-    } else {
-      return null;
-    }
-  }
-);
-
-AuditdGenericDetails.displayName = 'AuditdGenericDetails';
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/generic_file_details.test.tsx b/x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/generic_file_details.test.tsx
deleted file mode 100644
index fce0e1d645e164..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/generic_file_details.test.tsx
+++ /dev/null
@@ -1,520 +0,0 @@
-/*
- * 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 { shallow } from 'enzyme';
-import React from 'react';
-
-import { BrowserFields } from '../../../../../containers/source';
-import { mockBrowserFields } from '../../../../../containers/source/mock';
-import { mockTimelineData, TestProviders } from '../../../../../mock';
-import { AuditdGenericFileDetails, AuditdGenericFileLine } from './generic_file_details';
-import { useMountAppended } from '../../../../../utils/use_mount_appended';
-
-describe('GenericFileDetails', () => {
-  const mount = useMountAppended();
-
-  describe('rendering', () => {
-    test('it renders the default 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(
-        <AuditdGenericFileDetails
-          contextId="contextid-123"
-          text="generic-text-123"
-          browserFields={browserFields}
-          data={mockTimelineData[27].ecs}
-          fileIcon="document"
-          timelineId="test"
-        />
-      );
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    test('it returns auditd if the data does contain auditd data', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <AuditdGenericFileDetails
-            contextId="contextid-123"
-            text="generic-text-123"
-            browserFields={mockBrowserFields}
-            data={mockTimelineData[19].ecs}
-            fileIcon="document"
-            timelineId="test"
-          />
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        'Sessionalice@zeek-sanfranin/generic-text-123usinggpgconf(5402)gpgconf--list-dirsagent-socketgpgconf --list-dirs agent-socket'
-      );
-    });
-
-    test('it returns null for text if the data contains no auditd data', () => {
-      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();
-    });
-  });
-
-  describe('#AuditdGenericFileLine', () => {
-    test('it returns pretty output if you send in all your happy path data', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <AuditdGenericFileLine
-            id="hello-i-am-an-id"
-            contextId="contextid-123"
-            text="generic-text-123"
-            hostName="host-1"
-            userName="username-1"
-            session="session-1"
-            primary="username-1"
-            secondary="username-1"
-            processPid={123}
-            processName="process-name-1"
-            processExecutable="process-1"
-            processTitle="process-title-1"
-            workingDirectory="working-directory-1"
-            args={['arg1', 'arg2', 'arg3']}
-            filePath="/somepath"
-            fileIcon="document"
-            result="success"
-          />
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        'Sessionsession-1username-1@host-1inworking-directory-1generic-text-123/somepathusingprocess-name-1(123)arg1arg2arg3process-title-1with resultsuccess'
-      );
-    });
-
-    test('it returns a session with username if username, primary, and secondary all equal each other ', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <AuditdGenericFileLine
-            id="hello-i-am-an-id"
-            contextId="contextid-123"
-            text="generic-text-123"
-            hostName="host-1"
-            session="session-1"
-            userName="username-1"
-            primary="username-1"
-            secondary="username-1"
-            processPid={123}
-            processName="process-name-1"
-            processExecutable="process-1"
-            processTitle="process-title-1"
-            workingDirectory="working-directory-1"
-            args={['arg1', 'arg2', 'arg3']}
-            filePath="/somepath"
-            fileIcon="document"
-            result="success"
-          />
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        'Sessionsession-1username-1@host-1inworking-directory-1generic-text-123/somepathusingprocess-name-1(123)arg1arg2arg3process-title-1with resultsuccess'
-      );
-    });
-
-    test('it returns a session with username if primary and secondary equal unset', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <AuditdGenericFileLine
-            id="hello-i-am-an-id"
-            contextId="contextid-123"
-            text="generic-text-123"
-            hostName="host-1"
-            session="session-1"
-            userName="username-1"
-            primary="unset"
-            secondary="unset"
-            processPid={123}
-            processName="process-name-1"
-            processExecutable="process-1"
-            processTitle="process-title-1"
-            workingDirectory="working-directory-1"
-            args={['arg1', 'arg2', 'arg3']}
-            filePath="/somepath"
-            fileIcon="document"
-            result="success"
-          />
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        'Sessionsession-1username-1@host-1inworking-directory-1generic-text-123/somepathusingprocess-name-1(123)arg1arg2arg3process-title-1with resultsuccess'
-      );
-    });
-
-    test('it returns a session with username if primary and secondary equal unset with different casing', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <AuditdGenericFileLine
-            id="hello-i-am-an-id"
-            contextId="contextid-123"
-            text="generic-text-123"
-            hostName="host-1"
-            userName="username-1"
-            session="session-1"
-            primary="Unset"
-            secondary="uNseT"
-            processPid={123}
-            processName="process-name-1"
-            processExecutable="process-1"
-            processTitle="process-title-1"
-            workingDirectory="working-directory-1"
-            args={['arg1', 'arg2', 'arg3']}
-            filePath="/somepath"
-            fileIcon="document"
-            result="success"
-          />
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        'Sessionsession-1username-1@host-1inworking-directory-1generic-text-123/somepathusingprocess-name-1(123)arg1arg2arg3process-title-1with resultsuccess'
-      );
-    });
-
-    test('it returns a session with username if primary and secondary are undefined', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <AuditdGenericFileLine
-            id="hello-i-am-an-id"
-            contextId="contextid-123"
-            text="generic-text-123"
-            hostName="host-1"
-            session="session-1"
-            primary={undefined}
-            secondary={undefined}
-            userName="username-1"
-            processPid={123}
-            processName="process-name-1"
-            processExecutable="process-1"
-            processTitle="process-title-1"
-            workingDirectory="working-directory-1"
-            args={['arg1', 'arg2', 'arg3']}
-            filePath="/somepath"
-            fileIcon="document"
-            result="success"
-          />
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        'Sessionsession-1username-1@host-1inworking-directory-1generic-text-123/somepathusingprocess-name-1(123)arg1arg2arg3process-title-1with resultsuccess'
-      );
-    });
-
-    test('it returns a session with "as" wording if username, primary, and secondary are all different', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <AuditdGenericFileLine
-            id="hello-i-am-an-id"
-            contextId="contextid-123"
-            text="generic-text-123"
-            hostName="host-1"
-            session="session-1"
-            userName="[username-1]"
-            primary="[username-2]"
-            secondary="[username-3]"
-            processPid={123}
-            processName="process-name-1"
-            processExecutable="process-1"
-            processTitle="process-title-1"
-            workingDirectory="working-directory-1"
-            args={['arg1', 'arg2', 'arg3']}
-            filePath="/somepath"
-            fileIcon="document"
-            result="success"
-          />
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        'Sessionsession-1[username-2]as[username-3]@host-1inworking-directory-1generic-text-123/somepathusingprocess-name-1(123)arg1arg2arg3process-title-1with resultsuccess'
-      );
-    });
-
-    test('it returns a session with "as" wording if username and primary are the same but secondary is different', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <AuditdGenericFileLine
-            id="hello-i-am-an-id"
-            contextId="contextid-123"
-            text="generic-text-123"
-            hostName="host-1"
-            session="session-1"
-            userName="[username-1]"
-            primary="[username-1]"
-            secondary="[username-2]"
-            processPid={123}
-            processName="process-name-1"
-            processExecutable="process-1"
-            processTitle="process-title-1"
-            workingDirectory="working-directory-1"
-            args={['arg1', 'arg2', 'arg3']}
-            filePath="/somepath"
-            fileIcon="document"
-            result="success"
-          />
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        'Sessionsession-1[username-1]as[username-2]@host-1inworking-directory-1generic-text-123/somepathusingprocess-name-1(123)arg1arg2arg3process-title-1with resultsuccess'
-      );
-    });
-
-    test('it returns a session with primary if username and secondary are unset with different casing', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <AuditdGenericFileLine
-            id="hello-i-am-an-id"
-            contextId="contextid-123"
-            text="generic-text-123"
-            hostName="host-1"
-            userName="unseT"
-            session="session-1"
-            primary="[username-primary]"
-            secondary="unset"
-            processPid={123}
-            processName="process-name-1"
-            processExecutable="process-1"
-            processTitle="process-title-1"
-            workingDirectory="working-directory-1"
-            args={['arg1', 'arg2', 'arg3']}
-            filePath="/somepath"
-            fileIcon="document"
-            result="success"
-          />
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        'Sessionsession-1[username-primary]@host-1inworking-directory-1generic-text-123/somepathusingprocess-name-1(123)arg1arg2arg3process-title-1with resultsuccess'
-      );
-    });
-
-    test('it returns a session with primary if username and secondary are undefined', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <AuditdGenericFileLine
-            id="hello-i-am-an-id"
-            contextId="contextid-123"
-            text="generic-text-123"
-            hostName="host-1"
-            session="session-1"
-            primary="[username-primary]"
-            userName={undefined}
-            secondary={undefined}
-            processPid={123}
-            processName="process-name-1"
-            processExecutable="process-1"
-            processTitle="process-title-1"
-            workingDirectory="working-directory-1"
-            args={['arg1', 'arg2', 'arg3']}
-            filePath="/somepath"
-            fileIcon="document"
-            result="success"
-          />
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        'Sessionsession-1[username-primary]@host-1inworking-directory-1generic-text-123/somepathusingprocess-name-1(123)arg1arg2arg3process-title-1with resultsuccess'
-      );
-    });
-
-    test('it returns just session if only session id is given', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <AuditdGenericFileLine
-            id="hello-i-am-an-id"
-            contextId="contextid-123"
-            text="generic-text-123"
-            fileIcon="document"
-            userName={undefined}
-            secondary={undefined}
-            session={undefined}
-            hostName={undefined}
-            primary={undefined}
-            processPid={undefined}
-            processName={undefined}
-            processExecutable={undefined}
-            processTitle={undefined}
-            workingDirectory={undefined}
-            args={undefined}
-            result={undefined}
-            filePath={undefined}
-          />
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual('Session');
-    });
-
-    test('it returns only session and hostName if only hostname and an id is given', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <AuditdGenericFileLine
-            id="hello-i-am-an-id"
-            contextId="contextid-123"
-            text="generic-text-123"
-            fileIcon="document"
-            hostName="some-host-name"
-            userName={undefined}
-            secondary={undefined}
-            session={undefined}
-            primary={undefined}
-            processPid={undefined}
-            processName={undefined}
-            processExecutable={undefined}
-            processTitle={undefined}
-            workingDirectory={undefined}
-            args={undefined}
-            result={undefined}
-            filePath={undefined}
-          />
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual('Session@some-host-name');
-    });
-
-    test('it returns only a session and user name if only a user name and id is given', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <AuditdGenericFileLine
-            id="hello-i-am-an-id"
-            contextId="contextid-123"
-            text="generic-text-123"
-            userName="some-user-name"
-            fileIcon="document"
-            secondary={undefined}
-            session={undefined}
-            hostName={undefined}
-            primary={undefined}
-            processPid={undefined}
-            processName={undefined}
-            processExecutable={undefined}
-            processTitle={undefined}
-            workingDirectory={undefined}
-            args={undefined}
-            result={undefined}
-            filePath={undefined}
-          />
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual('Sessionsome-user-name');
-    });
-
-    test('it returns only a process name if only given a process name and id', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <AuditdGenericFileLine
-            id="hello-i-am-an-id"
-            contextId="contextid-123"
-            text="generic-text-123"
-            fileIcon="document"
-            userName={undefined}
-            processExecutable="some-process-name"
-            secondary={undefined}
-            session={undefined}
-            hostName={undefined}
-            primary={undefined}
-            processPid={undefined}
-            processName={undefined}
-            processTitle={undefined}
-            workingDirectory={undefined}
-            args={undefined}
-            result={undefined}
-            filePath={undefined}
-          />
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual('Sessiongeneric-text-123usingsome-process-name');
-    });
-
-    test('it returns session user name and title if process title with id is given', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <AuditdGenericFileLine
-            id="hello-i-am-an-id"
-            contextId="contextid-123"
-            text="generic-text-123"
-            processTitle="some-process-title"
-            userName="some-user-name"
-            fileIcon="document"
-            secondary={undefined}
-            session={undefined}
-            hostName={undefined}
-            primary={undefined}
-            processPid={undefined}
-            processName={undefined}
-            processExecutable={undefined}
-            workingDirectory={undefined}
-            args={undefined}
-            result={undefined}
-            filePath={undefined}
-          />
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual('Sessionsome-user-namesome-process-title');
-    });
-
-    test('it returns only a working directory if that is all that is given with a id', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <AuditdGenericFileLine
-            id="hello-i-am-an-id"
-            contextId="contextid-123"
-            text="generic-text-123"
-            workingDirectory="some-working-directory"
-            fileIcon="document"
-            userName={undefined}
-            secondary={undefined}
-            session={undefined}
-            hostName={undefined}
-            primary={undefined}
-            processPid={undefined}
-            processName={undefined}
-            processExecutable={undefined}
-            processTitle={undefined}
-            args={undefined}
-            result={undefined}
-            filePath={undefined}
-          />
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual('Sessioninsome-working-directory');
-    });
-
-    test('it returns only the session and args with id if that is all that is given (very unlikely situation)', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <AuditdGenericFileLine
-            id="hello-i-am-an-id"
-            contextId="contextid-123"
-            text="generic-text-123"
-            args={['arg1', 'arg2', 'arg 3']}
-            fileIcon="document"
-            userName={undefined}
-            secondary={undefined}
-            session={undefined}
-            hostName={undefined}
-            primary={undefined}
-            processPid={undefined}
-            processName={undefined}
-            processExecutable={undefined}
-            processTitle={undefined}
-            workingDirectory={undefined}
-            result={undefined}
-            filePath={undefined}
-          />
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual('Sessionarg1arg2arg 3');
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/generic_file_details.tsx b/x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/generic_file_details.tsx
deleted file mode 100644
index 797361878e6c53..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/generic_file_details.tsx
+++ /dev/null
@@ -1,182 +0,0 @@
-/*
- * 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 { EuiFlexGroup, EuiSpacer, IconType } from '@elastic/eui';
-import { get } from 'lodash/fp';
-import React from 'react';
-
-import { BrowserFields } from '../../../../../containers/source';
-import { Ecs } from '../../../../../graphql/types';
-import { DraggableBadge } from '../../../../draggables';
-
-import * as i18n from './translations';
-import { NetflowRenderer } from '../netflow';
-import { TokensFlexItem, Details } from '../helpers';
-import { ProcessDraggable } from '../process_draggable';
-import { Args } from '../args';
-import { SessionUserHostWorkingDir } from './session_user_host_working_dir';
-
-interface Props {
-  id: string;
-  hostName: string | null | undefined;
-  userName: string | null | undefined;
-  result: string | null | undefined;
-  primary: string | null | undefined;
-  fileIcon: IconType;
-  contextId: string;
-  text: string;
-  secondary: string | null | undefined;
-  filePath: string | null | undefined;
-  processName: string | null | undefined;
-  processPid: number | null | undefined;
-  processExecutable: string | null | undefined;
-  processTitle: string | null | undefined;
-  workingDirectory: string | null | undefined;
-  args: string[] | null | undefined;
-  session: string | null | undefined;
-}
-
-export const AuditdGenericFileLine = React.memo<Props>(
-  ({
-    id,
-    contextId,
-    hostName,
-    userName,
-    result,
-    primary,
-    secondary,
-    filePath,
-    processName,
-    processPid,
-    processExecutable,
-    processTitle,
-    workingDirectory,
-    args,
-    session,
-    text,
-    fileIcon,
-  }) => (
-    <EuiFlexGroup alignItems="center" justifyContent="center" gutterSize="none" wrap={true}>
-      <SessionUserHostWorkingDir
-        eventId={id}
-        contextId={contextId}
-        hostName={hostName}
-        userName={userName}
-        primary={primary}
-        secondary={secondary}
-        workingDirectory={workingDirectory}
-        session={session}
-      />
-      {(filePath != null || processExecutable != null) && (
-        <TokensFlexItem grow={false} component="span">
-          {text}
-        </TokensFlexItem>
-      )}
-      <TokensFlexItem grow={false} component="span">
-        <DraggableBadge
-          contextId={contextId}
-          eventId={id}
-          field="file.path"
-          value={filePath}
-          iconType={fileIcon}
-        />
-      </TokensFlexItem>
-      {processExecutable != null && (
-        <TokensFlexItem grow={false} component="span">
-          {i18n.USING}
-        </TokensFlexItem>
-      )}
-      <TokensFlexItem grow={false} component="span">
-        <ProcessDraggable
-          contextId={contextId}
-          endgamePid={undefined}
-          endgameProcessName={undefined}
-          eventId={id}
-          processPid={processPid}
-          processName={processName}
-          processExecutable={processExecutable}
-        />
-      </TokensFlexItem>
-      <Args eventId={id} args={args} contextId={contextId} processTitle={processTitle} />
-      {result != null && (
-        <TokensFlexItem grow={false} component="span">
-          {i18n.WITH_RESULT}
-        </TokensFlexItem>
-      )}
-      <TokensFlexItem grow={false} component="span">
-        <DraggableBadge
-          contextId={contextId}
-          eventId={id}
-          field="auditd.result"
-          queryValue={result}
-          value={result}
-        />
-      </TokensFlexItem>
-    </EuiFlexGroup>
-  )
-);
-
-AuditdGenericFileLine.displayName = 'AuditdGenericFileLine';
-
-interface GenericDetailsProps {
-  browserFields: BrowserFields;
-  data: Ecs;
-  contextId: string;
-  text: string;
-  fileIcon: IconType;
-  timelineId: string;
-}
-
-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);
-    const hostName: string | null | undefined = get('host.name[0]', data);
-    const userName: string | null | undefined = get('user.name[0]', data);
-    const result: string | null | undefined = get('auditd.result[0]', data);
-    const processPid: number | null | undefined = get('process.pid[0]', data);
-    const processName: string | null | undefined = get('process.name[0]', data);
-    const processExecutable: string | null | undefined = get('process.executable[0]', data);
-    const processTitle: string | null | undefined = get('process.title[0]', data);
-    const workingDirectory: string | null | undefined = get('process.working_directory[0]', data);
-    const filePath: string | null | undefined = get('file.path[0]', data);
-    const primary: string | null | undefined = get('auditd.summary.actor.primary[0]', data);
-    const secondary: string | null | undefined = get('auditd.summary.actor.secondary[0]', data);
-    const args: string[] | null | undefined = get('process.args', data);
-
-    if (data.process != null) {
-      return (
-        <Details>
-          <AuditdGenericFileLine
-            id={id}
-            contextId={contextId}
-            text={text}
-            hostName={hostName}
-            userName={userName}
-            filePath={filePath}
-            processName={processName}
-            processPid={processPid}
-            processExecutable={processExecutable}
-            processTitle={processTitle}
-            workingDirectory={workingDirectory}
-            args={args}
-            session={session}
-            primary={primary}
-            secondary={secondary}
-            fileIcon={fileIcon}
-            result={result}
-          />
-          <EuiSpacer size="s" />
-          <NetflowRenderer data={data} timelineId={timelineId} />
-        </Details>
-      );
-    } else {
-      return null;
-    }
-  }
-);
-
-AuditdGenericFileDetails.displayName = 'AuditdGenericFileDetails';
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/generic_row_renderer.test.tsx b/x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/generic_row_renderer.test.tsx
deleted file mode 100644
index 417a078a081509..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/generic_row_renderer.test.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-/*
- * 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 { shallow } from 'enzyme';
-import { cloneDeep } from 'lodash/fp';
-import React from 'react';
-
-import { BrowserFields } from '../../../../../containers/source';
-import { mockBrowserFields } from '../../../../../containers/source/mock';
-import { Ecs } from '../../../../../graphql/types';
-import { mockTimelineData, TestProviders } from '../../../../../mock';
-import { useMountAppended } from '../../../../../utils/use_mount_appended';
-import { RowRenderer } from '../row_renderer';
-import {
-  createGenericAuditRowRenderer,
-  createGenericFileRowRenderer,
-} from './generic_row_renderer';
-
-jest.mock('../../../../../pages/overview/events_by_dataset');
-
-describe('GenericRowRenderer', () => {
-  const mount = useMountAppended();
-
-  describe('#createGenericAuditRowRenderer', () => {
-    let nonAuditd: Ecs;
-    let auditd: Ecs;
-    let connectedToRenderer: RowRenderer;
-    beforeEach(() => {
-      nonAuditd = cloneDeep(mockTimelineData[0].ecs);
-      auditd = cloneDeep(mockTimelineData[26].ecs);
-      connectedToRenderer = createGenericAuditRowRenderer({
-        actionName: 'connected-to',
-        text: 'some text',
-      });
-    });
-    test('renders correctly against snapshot', () => {
-      // I cannot and do not want to use BrowserFields mocks for the snapshot tests as they are too heavy
-      const browserFields: BrowserFields = {};
-      const children = connectedToRenderer.renderRow({
-        browserFields,
-        data: auditd,
-        timelineId: 'test',
-      });
-
-      const wrapper = shallow(<span>{children}</span>);
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    test('should return false if not a auditd datum', () => {
-      expect(connectedToRenderer.isInstance(nonAuditd)).toBe(false);
-    });
-
-    test('should return true if it is a auditd datum', () => {
-      expect(connectedToRenderer.isInstance(auditd)).toBe(true);
-    });
-
-    test('should return false when action is set to some other value', () => {
-      if (auditd.event != null && auditd.event.action != null) {
-        auditd.event.action[0] = 'some other value';
-        expect(connectedToRenderer.isInstance(auditd)).toBe(false);
-      } else {
-        // will fail and give you an error if either is not defined as a mock
-        expect(auditd.event).toBeDefined();
-      }
-    });
-
-    test('should render a auditd row', () => {
-      const children = connectedToRenderer.renderRow({
-        browserFields: mockBrowserFields,
-        data: auditd,
-        timelineId: 'test',
-      });
-      const wrapper = mount(
-        <TestProviders>
-          <span>{children}</span>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toContain(
-        'Session246alice@zeek-londonsome textwget(1490)wget www.example.comwith resultsuccessDestination93.184.216.34:80'
-      );
-    });
-  });
-
-  describe('#createGenericFileRowRenderer', () => {
-    let nonAuditd: Ecs;
-    let auditdFile: Ecs;
-    let fileToRenderer: RowRenderer;
-
-    beforeEach(() => {
-      nonAuditd = cloneDeep(mockTimelineData[0].ecs);
-      auditdFile = cloneDeep(mockTimelineData[27].ecs);
-      fileToRenderer = createGenericFileRowRenderer({
-        actionName: 'opened-file',
-        text: 'some text',
-      });
-    });
-
-    test('renders correctly against snapshot', () => {
-      // I cannot and do not want to use BrowserFields mocks for the snapshot tests as they are too heavy
-      const browserFields: BrowserFields = {};
-      const children = fileToRenderer.renderRow({
-        browserFields,
-        data: auditdFile,
-        timelineId: 'test',
-      });
-
-      const wrapper = shallow(<span>{children}</span>);
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    test('should return false if not a auditd datum', () => {
-      expect(fileToRenderer.isInstance(nonAuditd)).toBe(false);
-    });
-
-    test('should return true if it is a auditd datum', () => {
-      expect(fileToRenderer.isInstance(auditdFile)).toBe(true);
-    });
-
-    test('should return false when action is set to some other value', () => {
-      if (auditdFile.event != null && auditdFile.event.action != null) {
-        auditdFile.event.action[0] = 'some other value';
-        expect(fileToRenderer.isInstance(auditdFile)).toBe(false);
-      } else {
-        // will fail and give you an error if either is not defined as a mock
-        expect(auditdFile.event).toBeDefined();
-      }
-    });
-
-    test('should render a auditd row', () => {
-      const children = fileToRenderer.renderRow({
-        browserFields: mockBrowserFields,
-        data: auditdFile,
-        timelineId: 'test',
-      });
-      const wrapper = mount(
-        <TestProviders>
-          <span>{children}</span>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toContain(
-        'Sessionunsetroot@zeek-londonin/some text/proc/15990/attr/currentusingsystemd-journal(27244)/lib/systemd/systemd-journaldwith resultsuccess'
-      );
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/helpers.test.tsx b/x-pack/plugins/siem/public/components/timeline/body/renderers/helpers.test.tsx
deleted file mode 100644
index 98a99cb6e40897..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/helpers.test.tsx
+++ /dev/null
@@ -1,284 +0,0 @@
-/*
- * 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 { cloneDeep } from 'lodash/fp';
-
-import { TimelineNonEcsData } from '../../../../graphql/types';
-import { mockTimelineData } from '../../../../mock';
-import {
-  deleteItemIdx,
-  findItem,
-  getValues,
-  isFileEvent,
-  isNillEmptyOrNotFinite,
-  isProcessStoppedOrTerminationEvent,
-  showVia,
-} from './helpers';
-
-describe('helpers', () => {
-  describe('#deleteItemIdx', () => {
-    let mockDatum: TimelineNonEcsData[];
-    beforeEach(() => {
-      mockDatum = cloneDeep(mockTimelineData[0].data);
-    });
-
-    test('should delete part of a value value', () => {
-      const deleted = deleteItemIdx(mockDatum, 1);
-      const expected: TimelineNonEcsData[] = [
-        { field: '@timestamp', value: ['2018-11-05T19:03:25.937Z'] },
-        // { field: 'event.category', value: ['Access'] <-- deleted entry
-        { field: 'event.category', value: ['Access'] },
-        { field: 'event.action', value: ['Action'] },
-        { field: 'host.name', value: ['apache'] },
-        { field: 'source.ip', value: ['192.168.0.1'] },
-        { field: 'destination.ip', value: ['192.168.0.3'] },
-        { field: 'destination.bytes', value: ['123456'] },
-        { field: 'user.name', value: ['john.dee'] },
-      ];
-      expect(deleted).toEqual(expected);
-    });
-
-    test('should not delete any part of the value, when the value when out of bounds', () => {
-      const deleted = deleteItemIdx(mockDatum, 1000);
-      const expected: TimelineNonEcsData[] = [
-        { field: '@timestamp', value: ['2018-11-05T19:03:25.937Z'] },
-        { field: 'event.severity', value: ['3'] },
-        { field: 'event.category', value: ['Access'] },
-        { field: 'event.action', value: ['Action'] },
-        { field: 'host.name', value: ['apache'] },
-        { field: 'source.ip', value: ['192.168.0.1'] },
-        { field: 'destination.ip', value: ['192.168.0.3'] },
-        { field: 'destination.bytes', value: ['123456'] },
-        { field: 'user.name', value: ['john.dee'] },
-      ];
-      expect(deleted).toEqual(expected);
-    });
-  });
-
-  describe('#findItem', () => {
-    let mockDatum: TimelineNonEcsData[];
-    beforeEach(() => {
-      mockDatum = cloneDeep(mockTimelineData[0].data);
-    });
-    test('should find an index with non-zero', () => {
-      expect(findItem(mockDatum, 'event.severity')).toEqual(1);
-    });
-
-    test('should return -1 with a field not found', () => {
-      expect(findItem(mockDatum, 'event.made-up')).toEqual(-1);
-    });
-  });
-
-  describe('#getValues', () => {
-    let mockDatum: TimelineNonEcsData[];
-    beforeEach(() => {
-      mockDatum = cloneDeep(mockTimelineData[0].data);
-    });
-
-    test('should return a valid value', () => {
-      expect(getValues('event.severity', mockDatum)).toEqual(['3']);
-    });
-
-    test('should return undefined when the value is not found', () => {
-      expect(getValues('event.made-up-value', mockDatum)).toBeUndefined();
-    });
-
-    test('should return an undefined when the value found is null', () => {
-      const nullValue: TimelineNonEcsData[] = [
-        { field: '@timestamp', value: ['2018-11-05T19:03:25.937Z'] },
-        { field: 'event.severity', value: ['3'] },
-        { field: 'event.category', value: ['Access'] },
-        { field: 'event.action', value: ['Action'] },
-        { field: 'host.name', value: ['apache'] },
-        { field: 'source.ip', value: ['192.168.0.1'] },
-        { field: 'destination.ip', value: ['192.168.0.3'] },
-        { field: 'destination.bytes', value: ['123456'] },
-        { field: 'user.name', value: null },
-      ];
-      expect(getValues('user.name', nullValue)).toBeUndefined();
-    });
-
-    test('should return an undefined when the value found is undefined', () => {
-      const nullValue: TimelineNonEcsData[] = [
-        { field: '@timestamp', value: ['2018-11-05T19:03:25.937Z'] },
-        { field: 'event.severity', value: ['3'] },
-        { field: 'event.category', value: ['Access'] },
-        { field: 'event.action', value: ['Action'] },
-        { field: 'host.name', value: ['apache'] },
-        { field: 'source.ip', value: ['192.168.0.1'] },
-        { field: 'destination.ip', value: ['192.168.0.3'] },
-        { field: 'destination.bytes', value: ['123456'] },
-        { field: 'user.name', value: undefined },
-      ];
-      expect(getValues('user.name', nullValue)).toBeUndefined();
-    });
-
-    test('should return an undefined when the value is not present', () => {
-      const nullValue: TimelineNonEcsData[] = [
-        { field: '@timestamp', value: ['2018-11-05T19:03:25.937Z'] },
-        { field: 'event.severity', value: ['3'] },
-        { field: 'event.category', value: ['Access'] },
-        { field: 'event.action', value: ['Action'] },
-        { field: 'host.name', value: ['apache'] },
-        { field: 'source.ip', value: ['192.168.0.1'] },
-        { field: 'destination.ip', value: ['192.168.0.3'] },
-        { field: 'destination.bytes', value: ['123456'] },
-        { field: 'user.name' },
-      ];
-      expect(getValues('user.name', nullValue)).toBeUndefined();
-    });
-  });
-
-  describe('#isNillEmptyOrNotFinite', () => {
-    test('undefined returns true', () => {
-      expect(isNillEmptyOrNotFinite(undefined)).toBe(true);
-    });
-
-    test('null returns true', () => {
-      expect(isNillEmptyOrNotFinite(null)).toBe(true);
-    });
-
-    test('empty string returns true', () => {
-      expect(isNillEmptyOrNotFinite('')).toBe(true);
-    });
-
-    test('empty array returns true', () => {
-      expect(isNillEmptyOrNotFinite([])).toBe(true);
-    });
-
-    test('NaN returns true', () => {
-      expect(isNillEmptyOrNotFinite(NaN)).toBe(true);
-    });
-
-    test('Infinity returns true', () => {
-      expect(isNillEmptyOrNotFinite(Infinity)).toBe(true);
-    });
-
-    test('a single space string returns false', () => {
-      expect(isNillEmptyOrNotFinite(' ')).toBe(false);
-    });
-
-    test('a simple string returns false', () => {
-      expect(isNillEmptyOrNotFinite('a simple string')).toBe(false);
-    });
-
-    test('the number 0 returns false', () => {
-      expect(isNillEmptyOrNotFinite(0)).toBe(false);
-    });
-
-    test('a non-empty array return false', () => {
-      expect(isNillEmptyOrNotFinite(['non empty array'])).toBe(false);
-    });
-  });
-
-  describe('#showVia', () => {
-    test('undefined returns false', () => {
-      expect(showVia(undefined)).toBe(false);
-    });
-
-    test('null returns false', () => {
-      expect(showVia(null)).toBe(false);
-    });
-
-    test('empty string returns false', () => {
-      expect(showVia('')).toBe(false);
-    });
-
-    test('a random string returns false', () => {
-      expect(showVia('a random string')).toBe(false);
-    });
-
-    describe('valid values', () => {
-      const validValues = ['file_create_event', 'created', 'file_delete_event', 'deleted'];
-
-      validValues.forEach(eventAction => {
-        test(`${eventAction} returns true`, () => {
-          expect(showVia(eventAction)).toBe(true);
-        });
-      });
-
-      validValues.forEach(value => {
-        const upperCaseValue = value.toUpperCase();
-
-        test(`${upperCaseValue} (upper case) returns true`, () => {
-          expect(showVia(upperCaseValue)).toBe(true);
-        });
-      });
-    });
-  });
-
-  describe('#isFileEvent', () => {
-    test('returns true when both eventCategory and eventDataset are file', () => {
-      expect(isFileEvent({ eventCategory: 'file', eventDataset: 'file' })).toBe(true);
-    });
-
-    test('returns false when eventCategory and eventDataset are undefined', () => {
-      expect(isFileEvent({ eventCategory: undefined, eventDataset: undefined })).toBe(false);
-    });
-
-    test('returns false when eventCategory and eventDataset are null', () => {
-      expect(isFileEvent({ eventCategory: null, eventDataset: null })).toBe(false);
-    });
-
-    test('returns false when eventCategory and eventDataset are random values', () => {
-      expect(
-        isFileEvent({ eventCategory: 'random category', eventDataset: 'random dataset' })
-      ).toBe(false);
-    });
-
-    test('returns true when just eventCategory is file', () => {
-      expect(isFileEvent({ eventCategory: 'file', eventDataset: undefined })).toBe(true);
-    });
-
-    test('returns true when just eventDataset is file', () => {
-      expect(isFileEvent({ eventCategory: null, eventDataset: 'file' })).toBe(true);
-    });
-
-    test('returns true when just eventCategory is File with a capitol F', () => {
-      expect(isFileEvent({ eventCategory: 'File', eventDataset: '' })).toBe(true);
-    });
-
-    test('returns true when just eventDataset is File with a capitol F', () => {
-      expect(isFileEvent({ eventCategory: 'random', eventDataset: 'File' })).toBe(true);
-    });
-  });
-
-  describe('#isProcessStoppedOrTerminationEvent', () => {
-    test('returns false when eventAction is undefined', () => {
-      expect(isProcessStoppedOrTerminationEvent(undefined)).toBe(false);
-    });
-
-    test('returns false when eventAction is null', () => {
-      expect(isProcessStoppedOrTerminationEvent(null)).toBe(false);
-    });
-
-    test('returns false when eventAction is an empty string', () => {
-      expect(isProcessStoppedOrTerminationEvent('')).toBe(false);
-    });
-
-    test('returns false when eventAction is a random value', () => {
-      expect(isProcessStoppedOrTerminationEvent('a random value')).toBe(false);
-    });
-
-    describe('valid values', () => {
-      const validValues = ['process_stopped', 'termination_event'];
-
-      validValues.forEach(value => {
-        test(`returns true when eventAction is ${value}`, () => {
-          expect(isProcessStoppedOrTerminationEvent(value)).toBe(true);
-        });
-      });
-
-      validValues.forEach(value => {
-        const upperCaseValue = value.toUpperCase();
-
-        test(`returns true when eventAction is (upper case) ${upperCaseValue}`, () => {
-          expect(isProcessStoppedOrTerminationEvent(upperCaseValue)).toBe(true);
-        });
-      });
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/helpers.tsx b/x-pack/plugins/siem/public/components/timeline/body/renderers/helpers.tsx
deleted file mode 100644
index 26aa5cea51ce73..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/helpers.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-/*
- * 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 { EuiFlexItem } from '@elastic/eui';
-import { isNumber, isEmpty } from 'lodash/fp';
-import styled from 'styled-components';
-
-import { TimelineNonEcsData } from '../../../../graphql/types';
-
-export const deleteItemIdx = (data: TimelineNonEcsData[], idx: number) => [
-  ...data.slice(0, idx),
-  ...data.slice(idx + 1),
-];
-
-export const findItem = (data: TimelineNonEcsData[], field: string): number =>
-  data.findIndex(d => d.field === field);
-
-export const getValues = (field: string, data: TimelineNonEcsData[]): string[] | undefined => {
-  const obj = data.find(d => d.field === field);
-  if (obj != null && obj.value != null) {
-    return obj.value;
-  }
-  return undefined;
-};
-
-export const Details = styled.div`
-  margin: 5px 0 5px 10px;
-  & .euiBadge {
-    margin: 2px 0 2px 0;
-  }
-`;
-Details.displayName = 'Details';
-
-export const TokensFlexItem = styled(EuiFlexItem)`
-  margin-left: 3px;
-`;
-TokensFlexItem.displayName = 'TokensFlexItem';
-
-export function isNillEmptyOrNotFinite<T>(value: string | number | T[] | null | undefined) {
-  return isNumber(value) ? !isFinite(value) : isEmpty(value);
-}
-
-export const isFileEvent = ({
-  eventCategory,
-  eventDataset,
-}: {
-  eventCategory: string | null | undefined;
-  eventDataset: string | null | undefined;
-}) =>
-  (eventCategory != null && eventCategory.toLowerCase() === 'file') ||
-  (eventDataset != null && eventDataset.toLowerCase() === 'file');
-
-export const isProcessStoppedOrTerminationEvent = (
-  eventAction: string | null | undefined
-): boolean => ['process_stopped', 'termination_event'].includes(`${eventAction}`.toLowerCase());
-
-export const showVia = (eventAction: string | null | undefined): boolean =>
-  ['file_create_event', 'created', 'file_delete_event', 'deleted'].includes(
-    `${eventAction}`.toLowerCase()
-  );
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/system/generic_details.test.tsx b/x-pack/plugins/siem/public/components/timeline/body/renderers/system/generic_details.test.tsx
deleted file mode 100644
index 19113d93f7cb03..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/system/generic_details.test.tsx
+++ /dev/null
@@ -1,542 +0,0 @@
-/*
- * 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 { shallow } from 'enzyme';
-import React from 'react';
-
-import { BrowserFields } from '../../../../../containers/source';
-import { mockBrowserFields } from '../../../../../containers/source/mock';
-import { mockTimelineData, TestProviders } from '../../../../../mock';
-import { SystemGenericDetails, SystemGenericLine } from './generic_details';
-import { useMountAppended } from '../../../../../utils/use_mount_appended';
-
-describe('SystemGenericDetails', () => {
-  const mount = useMountAppended();
-
-  describe('rendering', () => {
-    test('it renders the default SystemGenericDetails', () => {
-      // 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(
-        <SystemGenericDetails
-          contextId="[contextid-123]"
-          text="[generic-text-123]"
-          browserFields={browserFields}
-          data={mockTimelineData[28].ecs}
-          timelineId="test"
-        />
-      );
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    test('it returns system rendering if the data does contain system data', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <SystemGenericDetails
-            contextId="[contextid-123]"
-            text="[generic-text-123]"
-            browserFields={mockBrowserFields}
-            data={mockTimelineData[28].ecs}
-            timelineId="test"
-          />
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        'Braden@zeek-london[generic-text-123](6278)with resultfailureSource128.199.212.120'
-      );
-    });
-  });
-
-  describe('#SystemGenericLine', () => {
-    test('it returns pretty output if you send in all your happy path data', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericLine
-              contextId="[context-123]"
-              hostName="[hostname-123]"
-              id="[id-123]"
-              message="[message-123]"
-              outcome="[outcome-123]"
-              packageName="[packageName-123]"
-              packageSummary="[packageSummary-123]"
-              packageVersion="[packageVersion-123]"
-              processExecutable="[packageExecutable=123]"
-              processPid={123}
-              processName="[processName-123]"
-              sshMethod="[sshMethod-123]"
-              sshSignature="[sshSignature-123]"
-              text="[generic-text-123]"
-              userDomain="[userDomain-123]"
-              userName="[username-123]"
-              workingDirectory="[working-directory-123]"
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        '[username-123]\\[userDomain-123]@[hostname-123]in[working-directory-123][generic-text-123][processName-123](123)with result[outcome-123][sshSignature-123][sshMethod-123][packageName-123][packageVersion-123][packageSummary-123][message-123]'
-      );
-    });
-
-    test('it returns nothing if data is all null', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericLine
-              contextId="[context-123]"
-              hostName={null}
-              id="[id-123]"
-              message={null}
-              outcome={null}
-              packageName={null}
-              packageSummary={null}
-              packageVersion={null}
-              processExecutable={null}
-              processPid={null}
-              processName={null}
-              sshMethod={null}
-              sshSignature={null}
-              text={null}
-              userDomain={null}
-              userName={null}
-              workingDirectory={null}
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual('');
-    });
-
-    test('it can return only the host name', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericLine
-              contextId="[context-123]"
-              hostName="[hostname-123]"
-              id="[id-123]"
-              message={null}
-              outcome={null}
-              packageName={null}
-              packageSummary={null}
-              packageVersion={null}
-              processExecutable={null}
-              processPid={null}
-              processName={null}
-              sshMethod={null}
-              sshSignature={null}
-              text={null}
-              userDomain={null}
-              userName={null}
-              workingDirectory={null}
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual('[hostname-123]');
-    });
-
-    test('it can return the host, message', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericLine
-              contextId="[context-123]"
-              hostName="[hostname-123]"
-              id="[id-123]"
-              message="[message-123]"
-              outcome={null}
-              packageName={null}
-              packageSummary={null}
-              packageVersion={null}
-              processExecutable={null}
-              processPid={null}
-              processName={null}
-              sshMethod={null}
-              sshSignature={null}
-              text={null}
-              userDomain={null}
-              userName={null}
-              workingDirectory={null}
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual('[hostname-123][message-123]');
-    });
-
-    test('it can return the host, message, outcome', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericLine
-              contextId="[context-123]"
-              hostName="[hostname-123]"
-              id="[id-123]"
-              message="[message-123]"
-              outcome="[outcome-123]"
-              packageName={null}
-              packageSummary={null}
-              packageVersion={null}
-              processExecutable={null}
-              processPid={null}
-              processName={null}
-              sshMethod={null}
-              sshSignature={null}
-              text={null}
-              userDomain={null}
-              userName={null}
-              workingDirectory={null}
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual('[hostname-123]with result[outcome-123][message-123]');
-    });
-
-    test('it can return the host, message, outcome, packageName', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericLine
-              contextId="[context-123]"
-              hostName="[hostname-123]"
-              id="[id-123]"
-              message="[message-123]"
-              outcome="[outcome-123]"
-              packageName="[packageName-123]"
-              packageSummary={null}
-              packageVersion={null}
-              processExecutable={null}
-              processPid={null}
-              processName={null}
-              sshMethod={null}
-              sshSignature={null}
-              text={null}
-              userDomain={null}
-              userName={null}
-              workingDirectory={null}
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        '[hostname-123]with result[outcome-123][packageName-123][message-123]'
-      );
-    });
-
-    test('it can return the host, message, outcome, packageName, pacakgeSummary', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericLine
-              contextId="[context-123]"
-              hostName="[hostname-123]"
-              id="[id-123]"
-              message="[message-123]"
-              outcome="[outcome-123]"
-              packageName="[packageName-123]"
-              packageSummary="[packageSummary-123]"
-              packageVersion={null}
-              processExecutable={null}
-              processPid={null}
-              processName={null}
-              sshMethod={null}
-              sshSignature={null}
-              text={null}
-              userDomain={null}
-              userName={null}
-              workingDirectory={null}
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        '[hostname-123]with result[outcome-123][packageName-123][packageSummary-123][message-123]'
-      );
-    });
-
-    test('it can return the host, message, outcome, packageName, pacakgeSummary, packageVersion', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericLine
-              contextId="[context-123]"
-              hostName="[hostname-123]"
-              id="[id-123]"
-              message="[message-123]"
-              outcome="[outcome-123]"
-              packageName="[packageName-123]"
-              packageSummary="[packageSummary-123]"
-              packageVersion="[packageVersion-123]"
-              processExecutable={null}
-              processPid={null}
-              processName={null}
-              sshMethod={null}
-              sshSignature={null}
-              text={null}
-              userDomain={null}
-              userName={null}
-              workingDirectory={null}
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        '[hostname-123]with result[outcome-123][packageName-123][packageVersion-123][packageSummary-123][message-123]'
-      );
-    });
-
-    test('it can return the host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericLine
-              contextId="[context-123]"
-              hostName="[hostname-123]"
-              id="[id-123]"
-              message="[message-123]"
-              outcome="[outcome-123]"
-              packageName="[packageName-123]"
-              packageSummary="[packageSummary-123]"
-              packageVersion="[packageVersion-123]"
-              processExecutable="[processExecutable-123]"
-              processPid={null}
-              processName={null}
-              sshMethod={null}
-              sshSignature={null}
-              text={null}
-              userDomain={null}
-              userName={null}
-              workingDirectory={null}
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        '[hostname-123][processExecutable-123]with result[outcome-123][packageName-123][packageVersion-123][packageSummary-123][message-123]'
-      );
-    });
-
-    test('it can return the host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processPid', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericLine
-              contextId="[context-123]"
-              hostName="[hostname-123]"
-              id="[id-123]"
-              message="[message-123]"
-              outcome="[outcome-123]"
-              packageName="[packageName-123]"
-              packageSummary="[packageSummary-123]"
-              packageVersion="[packageVersion-123]"
-              processExecutable="[processExecutable-123]"
-              processPid={123}
-              processName={null}
-              sshMethod={null}
-              sshSignature={null}
-              text={null}
-              userDomain={null}
-              userName={null}
-              workingDirectory={null}
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        '[hostname-123][processExecutable-123](123)with result[outcome-123][packageName-123][packageVersion-123][packageSummary-123][message-123]'
-      );
-    });
-
-    test('it can return the host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processPid, processName', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericLine
-              contextId="[context-123]"
-              hostName="[hostname-123]"
-              id="[id-123]"
-              message="[message-123]"
-              outcome="[outcome-123]"
-              packageName="[packageName-123]"
-              packageSummary="[packageSummary-123]"
-              packageVersion="[packageVersion-123]"
-              processExecutable="[processExecutable-123]"
-              processPid={123}
-              processName="[processName-123]"
-              sshMethod={null}
-              sshSignature={null}
-              text={null}
-              userDomain={null}
-              userName={null}
-              workingDirectory={null}
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        '[hostname-123][processName-123](123)with result[outcome-123][packageName-123][packageVersion-123][packageSummary-123][message-123]'
-      );
-    });
-
-    test('it can return the host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processPid, processName, sshMethod', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericLine
-              contextId="[context-123]"
-              hostName="[hostname-123]"
-              id="[id-123]"
-              message="[message-123]"
-              outcome="[outcome-123]"
-              packageName="[packageName-123]"
-              packageSummary="[packageSummary-123]"
-              packageVersion="[packageVersion-123]"
-              processExecutable="[processExecutable-123]"
-              processPid={123}
-              processName="[processName-123]"
-              sshMethod="[sshMethod-123]"
-              sshSignature={null}
-              text={null}
-              userDomain={null}
-              userName={null}
-              workingDirectory={null}
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        '[hostname-123][processName-123](123)with result[outcome-123][sshMethod-123][packageName-123][packageVersion-123][packageSummary-123][message-123]'
-      );
-    });
-
-    test('it can return the host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processPid, processName, sshMethod, sshSignature', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericLine
-              contextId="[context-123]"
-              hostName="[hostname-123]"
-              id="[id-123]"
-              message="[message-123]"
-              outcome="[outcome-123]"
-              packageName="[packageName-123]"
-              packageSummary="[packageSummary-123]"
-              packageVersion="[packageVersion-123]"
-              processExecutable="[processExecutable-123]"
-              processPid={123}
-              processName="[processName-123]"
-              sshMethod="[sshMethod-123]"
-              sshSignature="[sshSignature-123]"
-              text={null}
-              userDomain={null}
-              userName={null}
-              workingDirectory={null}
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        '[hostname-123][processName-123](123)with result[outcome-123][sshSignature-123][sshMethod-123][packageName-123][packageVersion-123][packageSummary-123][message-123]'
-      );
-    });
-
-    test('it can return the host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processPid, processName, sshMethod, sshSignature, text', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericLine
-              contextId="[context-123]"
-              hostName="[hostname-123]"
-              id="[id-123]"
-              message="[message-123]"
-              outcome="[outcome-123]"
-              packageName="[packageName-123]"
-              packageSummary="[packageSummary-123]"
-              packageVersion="[packageVersion-123]"
-              processExecutable="[processExecutable-123]"
-              processPid={123}
-              processName="[processName-123]"
-              sshMethod="[sshMethod-123]"
-              sshSignature="[sshSignature-123]"
-              text="[text-123]"
-              userDomain={null}
-              userName={null}
-              workingDirectory={null}
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        '[hostname-123][text-123][processName-123](123)with result[outcome-123][sshSignature-123][sshMethod-123][packageName-123][packageVersion-123][packageSummary-123][message-123]'
-      );
-    });
-
-    test('it can return the host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processPid, processName, sshMethod, sshSignature, text, userDomain, username', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericLine
-              contextId="[context-123]"
-              hostName="[hostname-123]"
-              id="[id-123]"
-              message="[message-123]"
-              outcome="[outcome-123]"
-              packageName="[packageName-123]"
-              packageSummary="[packageSummary-123]"
-              packageVersion="[packageVersion-123]"
-              processExecutable="[processExecutable-123]"
-              processPid={123}
-              processName="[processName-123]"
-              sshMethod="[sshMethod-123]"
-              sshSignature="[sshSignature-123]"
-              text="[text-123]"
-              userDomain="[userDomain-123]"
-              userName="[username-123]"
-              workingDirectory={null}
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        '[username-123]\\[userDomain-123]@[hostname-123][text-123][processName-123](123)with result[outcome-123][sshSignature-123][sshMethod-123][packageName-123][packageVersion-123][packageSummary-123][message-123]'
-      );
-    });
-
-    test('it can return the host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processPid, processName, sshMethod, sshSignature, text, userDomain, username, working-directory', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericLine
-              contextId="[context-123]"
-              hostName="[hostname-123]"
-              id="[id-123]"
-              message="[message-123]"
-              outcome="[outcome-123]"
-              packageName="[packageName-123]"
-              packageSummary="[packageSummary-123]"
-              packageVersion="[packageVersion-123]"
-              processExecutable="[processExecutable-123]"
-              processPid={123}
-              processName="[processName-123]"
-              sshMethod="[sshMethod-123]"
-              sshSignature="[sshSignature-123]"
-              text="[text-123]"
-              userDomain="[userDomain-123]"
-              userName="[username-123]"
-              workingDirectory="[working-directory-123]"
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        '[username-123]\\[userDomain-123]@[hostname-123]in[working-directory-123][text-123][processName-123](123)with result[outcome-123][sshSignature-123][sshMethod-123][packageName-123][packageVersion-123][packageSummary-123][message-123]'
-      );
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/system/generic_details.tsx b/x-pack/plugins/siem/public/components/timeline/body/renderers/system/generic_details.tsx
deleted file mode 100644
index 2ad3eb46814542..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/system/generic_details.tsx
+++ /dev/null
@@ -1,189 +0,0 @@
-/*
- * 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 { EuiFlexGroup, EuiSpacer } from '@elastic/eui';
-import { get } from 'lodash/fp';
-import React from 'react';
-
-import { BrowserFields } from '../../../../../containers/source';
-import { Ecs } from '../../../../../graphql/types';
-import { DraggableBadge } from '../../../../draggables';
-import { OverflowField } from '../../../../tables/helpers';
-
-import * as i18n from './translations';
-import { NetflowRenderer } from '../netflow';
-import { UserHostWorkingDir } from '../user_host_working_dir';
-import { Details, TokensFlexItem } from '../helpers';
-import { ProcessDraggable } from '../process_draggable';
-import { Package } from './package';
-import { AuthSsh } from './auth_ssh';
-import { Badge } from '../../../../page';
-
-interface Props {
-  contextId: string;
-  hostName: string | null | undefined;
-  id: string;
-  message: string | null | undefined;
-  outcome: string | null | undefined;
-  packageName: string | null | undefined;
-  packageSummary: string | null | undefined;
-  packageVersion: string | null | undefined;
-  processExecutable: string | null | undefined;
-  processPid: number | null | undefined;
-  processName: string | null | undefined;
-  sshMethod: string | null | undefined;
-  sshSignature: string | null | undefined;
-  text: string | null | undefined;
-  userDomain: string | null | undefined;
-  userName: string | null | undefined;
-  workingDirectory: string | null | undefined;
-}
-
-export const SystemGenericLine = React.memo<Props>(
-  ({
-    contextId,
-    hostName,
-    id,
-    message,
-    outcome,
-    packageName,
-    packageSummary,
-    packageVersion,
-    processPid,
-    processName,
-    processExecutable,
-    sshSignature,
-    sshMethod,
-    text,
-    userDomain,
-    userName,
-    workingDirectory,
-  }) => (
-    <>
-      <EuiFlexGroup alignItems="center" justifyContent="center" gutterSize="none" wrap={true}>
-        <UserHostWorkingDir
-          contextId={contextId}
-          eventId={id}
-          userDomain={userDomain}
-          userName={userName}
-          hostName={hostName}
-          workingDirectory={workingDirectory}
-        />
-        <TokensFlexItem grow={false} component="span">
-          {text}
-        </TokensFlexItem>
-        <TokensFlexItem grow={false} component="span">
-          <ProcessDraggable
-            contextId={contextId}
-            endgamePid={undefined}
-            endgameProcessName={undefined}
-            eventId={id}
-            processPid={processPid}
-            processName={processName}
-            processExecutable={processExecutable}
-          />
-        </TokensFlexItem>
-        {outcome != null && (
-          <TokensFlexItem grow={false} component="span">
-            {i18n.WITH_RESULT}
-          </TokensFlexItem>
-        )}
-        <TokensFlexItem grow={false} component="span">
-          <DraggableBadge
-            contextId={contextId}
-            eventId={id}
-            field="event.outcome"
-            queryValue={outcome}
-            value={outcome}
-          />
-        </TokensFlexItem>
-        <AuthSsh
-          contextId={contextId}
-          eventId={id}
-          sshSignature={sshSignature}
-          sshMethod={sshMethod}
-        />
-        <Package
-          contextId={contextId}
-          eventId={id}
-          packageName={packageName}
-          packageSummary={packageSummary}
-          packageVersion={packageVersion}
-        />
-      </EuiFlexGroup>
-      {message != null && (
-        <>
-          <EuiSpacer size="xs" />
-          <EuiFlexGroup justifyContent="center" gutterSize="none" wrap={true}>
-            <TokensFlexItem grow={false} component="span">
-              <Badge iconType="editorComment" color="hollow" title="">
-                <OverflowField value={message} />
-              </Badge>
-            </TokensFlexItem>
-          </EuiFlexGroup>
-        </>
-      )}
-    </>
-  )
-);
-
-SystemGenericLine.displayName = 'SystemGenericLine';
-
-interface GenericDetailsProps {
-  browserFields: BrowserFields;
-  data: Ecs;
-  contextId: string;
-  text: string;
-  timelineId: string;
-}
-
-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;
-    const hostName: string | null | undefined = get('host.name[0]', data);
-    const userDomain: string | null | undefined = get('user.domain[0]', data);
-    const userName: string | null | undefined = get('user.name[0]', data);
-    const outcome: string | null | undefined = get('event.outcome[0]', data);
-    const packageName: string | null | undefined = get('system.audit.package.name[0]', data);
-    const packageSummary: string | null | undefined = get('system.audit.package.summary[0]', data);
-    const packageVersion: string | null | undefined = get('system.audit.package.version[0]', data);
-    const processPid: number | null | undefined = get('process.pid[0]', data);
-    const processName: string | null | undefined = get('process.name[0]', data);
-    const processExecutable: string | null | undefined = get('process.executable[0]', data);
-    const sshSignature: string | null | undefined = get('system.auth.ssh.signature[0]', data);
-    const sshMethod: string | null | undefined = get('system.auth.ssh.method[0]', data);
-    const workingDirectory: string | null | undefined = get('process.working_directory[0]', data);
-
-    return (
-      <Details>
-        <SystemGenericLine
-          contextId={contextId}
-          hostName={hostName}
-          id={id}
-          message={message}
-          outcome={outcome}
-          packageName={packageName}
-          packageSummary={packageSummary}
-          packageVersion={packageVersion}
-          processExecutable={processExecutable}
-          processPid={processPid}
-          processName={processName}
-          sshMethod={sshMethod}
-          sshSignature={sshSignature}
-          text={text}
-          userDomain={userDomain}
-          userName={userName}
-          workingDirectory={workingDirectory}
-        />
-        <EuiSpacer size="s" />
-        <NetflowRenderer data={data} timelineId={timelineId} />
-      </Details>
-    );
-  }
-);
-
-SystemGenericDetails.displayName = 'SystemGenericDetails';
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/system/generic_file_details.test.tsx b/x-pack/plugins/siem/public/components/timeline/body/renderers/system/generic_file_details.test.tsx
deleted file mode 100644
index cab7191c13aef5..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/system/generic_file_details.test.tsx
+++ /dev/null
@@ -1,1599 +0,0 @@
-/*
- * 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 { shallow } from 'enzyme';
-import React from 'react';
-
-import { BrowserFields } from '../../../../../containers/source';
-import { mockBrowserFields } from '../../../../../containers/source/mock';
-import { mockTimelineData, TestProviders } from '../../../../../mock';
-import { SystemGenericFileDetails, SystemGenericFileLine } from './generic_file_details';
-import { useMountAppended } from '../../../../../utils/use_mount_appended';
-
-describe('SystemGenericFileDetails', () => {
-  const mount = useMountAppended();
-
-  describe('rendering', () => {
-    test('it renders the default SystemGenericDetails', () => {
-      // 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(
-        <SystemGenericFileDetails
-          contextId="[contextid-123]"
-          text="[generic-text-123]"
-          browserFields={browserFields}
-          data={mockTimelineData[29].ecs}
-          timelineId="test"
-        />
-      );
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    test('it returns system rendering if the data does contain system data', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <SystemGenericFileDetails
-            contextId="[contextid-123]"
-            text="[generic-text-123]"
-            browserFields={mockBrowserFields}
-            data={mockTimelineData[29].ecs}
-            timelineId="test"
-          />
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        'Evan@zeek-london[generic-text-123](6278)with resultfailureSource128.199.212.120'
-      );
-    });
-  });
-
-  describe('#SystemGenericFileLine', () => {
-    test('it returns pretty output if you send in all your happy path data', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericFileLine
-              id="[id-123]"
-              contextId="[context-123]"
-              endgameExitCode="[endgameExitCode-123]"
-              endgameFileName="[endgameFileName-123]"
-              endgameFilePath="[endgameFilePath-123]"
-              endgameParentProcessName="[endgameParentProcessName-123]"
-              endgamePid={789}
-              endgameProcessName="[endgameProcessName-123]"
-              eventAction="[eventAction-123]"
-              fileName="[fileName-123]"
-              filePath="[filePath-123]"
-              hostName="[hostname-123]"
-              message="[message-123]"
-              outcome="[outcome-123]"
-              processTitle="[some-title-123]"
-              args={['[arg-1]', '[arg-2]', '[arg-3]']}
-              packageName="[packageName-123]"
-              packageSummary="[packageSummary-123]"
-              packageVersion="[packageVersion-123]"
-              processExecutable="[packageExecutable=123]"
-              processHashMd5="[processHashMd5-123]"
-              processHashSha1="[processHashSha1-123]"
-              processHashSha256="[processHashSha256-123]"
-              processPid={123}
-              processPpid={456}
-              processName="[processName-123]"
-              showMessage={true}
-              sshMethod="[sshMethod-123]"
-              sshSignature="[sshSignature-123]"
-              text="[generic-text-123]"
-              userDomain="[userDomain-123]"
-              userName="[username-123]"
-              workingDirectory="[working-directory-123]"
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        '[username-123]\\[userDomain-123]@[hostname-123]in[working-directory-123][generic-text-123][fileName-123]in[filePath-123][processName-123](123)[arg-1][arg-2][arg-3][some-title-123]with exit code[endgameExitCode-123]via parent process[endgameParentProcessName-123](456)with result[outcome-123][sshSignature-123][sshMethod-123][packageName-123][packageVersion-123][packageSummary-123][processHashSha256-123][processHashSha1-123][processHashMd5-123][message-123]'
-      );
-    });
-
-    test('it returns nothing if data is all null', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericFileLine
-              contextId="[context-123]"
-              endgameExitCode={null}
-              endgameFileName={null}
-              endgameFilePath={null}
-              endgameParentProcessName={null}
-              endgamePid={null}
-              endgameProcessName={null}
-              eventAction={null}
-              fileName={null}
-              filePath={null}
-              hostName={null}
-              id="[id-123]"
-              message={null}
-              outcome={null}
-              packageName={null}
-              packageSummary={null}
-              packageVersion={null}
-              processExecutable={null}
-              processHashMd5={null}
-              processHashSha1={null}
-              processHashSha256={null}
-              processPid={null}
-              processPpid={null}
-              processName={null}
-              showMessage={true}
-              sshMethod={null}
-              processTitle={null}
-              args={null}
-              sshSignature={null}
-              text={null}
-              userDomain={null}
-              userName={null}
-              workingDirectory={null}
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual('an unknown process');
-    });
-
-    test('it can return only the host name', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericFileLine
-              contextId="[context-123]"
-              endgameExitCode={null}
-              endgameFileName={null}
-              endgameFilePath={null}
-              endgameParentProcessName={null}
-              endgamePid={null}
-              endgameProcessName={null}
-              eventAction={null}
-              fileName={null}
-              filePath={null}
-              hostName="[hostname-123]"
-              id="[id-123]"
-              message={null}
-              outcome={null}
-              packageName={null}
-              packageSummary={null}
-              packageVersion={null}
-              processExecutable={null}
-              processHashMd5={null}
-              processHashSha1={null}
-              processHashSha256={null}
-              processPid={null}
-              processPpid={null}
-              processName={null}
-              showMessage={true}
-              sshMethod={null}
-              sshSignature={null}
-              text={null}
-              userDomain={null}
-              userName={null}
-              workingDirectory={null}
-              processTitle={null}
-              args={null}
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual('[hostname-123]an unknown process');
-    });
-
-    test('it can return the host, message', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericFileLine
-              contextId="[context-123]"
-              endgameExitCode={null}
-              endgameFileName={null}
-              endgameFilePath={null}
-              endgameParentProcessName={null}
-              endgamePid={null}
-              endgameProcessName={null}
-              eventAction={null}
-              fileName={null}
-              filePath={null}
-              hostName="[hostname-123]"
-              id="[id-123]"
-              message="[message-123]"
-              outcome={null}
-              packageName={null}
-              packageSummary={null}
-              packageVersion={null}
-              processExecutable={null}
-              processHashMd5={null}
-              processHashSha1={null}
-              processHashSha256={null}
-              processPid={null}
-              processPpid={null}
-              processName={null}
-              showMessage={true}
-              sshMethod={null}
-              sshSignature={null}
-              text={null}
-              userDomain={null}
-              userName={null}
-              workingDirectory={null}
-              processTitle={null}
-              args={null}
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual('[hostname-123]an unknown process[message-123]');
-    });
-
-    test('it can return the host, message, outcome', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericFileLine
-              contextId="[context-123]"
-              endgameExitCode={null}
-              endgameFileName={null}
-              endgameFilePath={null}
-              endgameParentProcessName={null}
-              endgamePid={null}
-              endgameProcessName={null}
-              eventAction={null}
-              fileName={null}
-              filePath={null}
-              hostName="[hostname-123]"
-              id="[id-123]"
-              message="[message-123]"
-              outcome="[outcome-123]"
-              packageName={null}
-              packageSummary={null}
-              packageVersion={null}
-              processExecutable={null}
-              processHashMd5={null}
-              processHashSha1={null}
-              processHashSha256={null}
-              processPid={null}
-              processPpid={null}
-              processName={null}
-              showMessage={true}
-              sshMethod={null}
-              sshSignature={null}
-              text={null}
-              userDomain={null}
-              userName={null}
-              workingDirectory={null}
-              processTitle={null}
-              args={null}
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        '[hostname-123]an unknown processwith result[outcome-123][message-123]'
-      );
-    });
-
-    test('it can return the host, message, outcome, packageName', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericFileLine
-              contextId="[context-123]"
-              endgameExitCode={null}
-              endgameFileName={null}
-              endgameFilePath={null}
-              endgameParentProcessName={null}
-              endgamePid={null}
-              endgameProcessName={null}
-              eventAction={null}
-              fileName={null}
-              filePath={null}
-              hostName="[hostname-123]"
-              id="[id-123]"
-              message="[message-123]"
-              outcome="[outcome-123]"
-              packageName="[packageName-123]"
-              packageSummary={null}
-              packageVersion={null}
-              processExecutable={null}
-              processHashMd5={null}
-              processHashSha1={null}
-              processHashSha256={null}
-              processPid={null}
-              processPpid={null}
-              processName={null}
-              showMessage={true}
-              sshMethod={null}
-              sshSignature={null}
-              text={null}
-              userDomain={null}
-              userName={null}
-              workingDirectory={null}
-              processTitle={null}
-              args={null}
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        '[hostname-123]an unknown processwith result[outcome-123][packageName-123][message-123]'
-      );
-    });
-
-    test('it can return the host, message, outcome, packageName, pacakgeSummary', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericFileLine
-              contextId="[context-123]"
-              endgameExitCode={null}
-              endgameFileName={null}
-              endgameFilePath={null}
-              endgameParentProcessName={null}
-              endgamePid={null}
-              endgameProcessName={null}
-              eventAction={null}
-              fileName={null}
-              filePath={null}
-              hostName="[hostname-123]"
-              id="[id-123]"
-              message="[message-123]"
-              outcome="[outcome-123]"
-              packageName="[packageName-123]"
-              packageSummary="[packageSummary-123]"
-              packageVersion={null}
-              processExecutable={null}
-              processHashMd5={null}
-              processHashSha1={null}
-              processHashSha256={null}
-              processPid={null}
-              processPpid={null}
-              processName={null}
-              showMessage={true}
-              sshMethod={null}
-              sshSignature={null}
-              text={null}
-              userDomain={null}
-              userName={null}
-              workingDirectory={null}
-              processTitle={null}
-              args={null}
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        '[hostname-123]an unknown processwith result[outcome-123][packageName-123][packageSummary-123][message-123]'
-      );
-    });
-
-    test('it can return the host, message, outcome, packageName, pacakgeSummary, packageVersion', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericFileLine
-              contextId="[context-123]"
-              endgameExitCode={null}
-              endgameFileName={null}
-              endgameFilePath={null}
-              endgameParentProcessName={null}
-              endgamePid={null}
-              endgameProcessName={null}
-              eventAction={null}
-              fileName={null}
-              filePath={null}
-              hostName="[hostname-123]"
-              id="[id-123]"
-              message="[message-123]"
-              outcome="[outcome-123]"
-              packageName="[packageName-123]"
-              packageSummary="[packageSummary-123]"
-              packageVersion="[packageVersion-123]"
-              processExecutable={null}
-              processHashMd5={null}
-              processHashSha1={null}
-              processHashSha256={null}
-              processPid={null}
-              processPpid={null}
-              processName={null}
-              showMessage={true}
-              sshMethod={null}
-              sshSignature={null}
-              text={null}
-              userDomain={null}
-              userName={null}
-              workingDirectory={null}
-              processTitle={null}
-              args={null}
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        '[hostname-123]an unknown processwith result[outcome-123][packageName-123][packageVersion-123][packageSummary-123][message-123]'
-      );
-    });
-
-    test('it can return the host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericFileLine
-              contextId="[context-123]"
-              endgameExitCode={null}
-              endgameFileName={null}
-              endgameFilePath={null}
-              endgameParentProcessName={null}
-              endgamePid={null}
-              endgameProcessName={null}
-              eventAction={null}
-              fileName={null}
-              filePath={null}
-              hostName="[hostname-123]"
-              id="[id-123]"
-              message="[message-123]"
-              outcome="[outcome-123]"
-              packageName="[packageName-123]"
-              packageSummary="[packageSummary-123]"
-              packageVersion="[packageVersion-123]"
-              processExecutable="[packageVersion-123]"
-              processHashMd5={null}
-              processHashSha1={null}
-              processHashSha256={null}
-              processPid={null}
-              processPpid={null}
-              processName={null}
-              showMessage={true}
-              sshMethod={null}
-              sshSignature={null}
-              text={null}
-              userDomain={null}
-              userName={null}
-              workingDirectory={null}
-              processTitle={null}
-              args={null}
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        '[hostname-123][packageVersion-123]with result[outcome-123][packageName-123][packageVersion-123][packageSummary-123][message-123]'
-      );
-    });
-
-    test('it can return the host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processHashMd5', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericFileLine
-              contextId="[context-123]"
-              endgameExitCode={null}
-              endgameFileName={null}
-              endgameFilePath={null}
-              endgameParentProcessName={null}
-              endgamePid={null}
-              endgameProcessName={null}
-              eventAction={null}
-              fileName={null}
-              filePath={null}
-              hostName="[hostname-123]"
-              id="[id-123]"
-              message="[message-123]"
-              outcome="[outcome-123]"
-              packageName="[packageName-123]"
-              packageSummary="[packageSummary-123]"
-              packageVersion="[packageVersion-123]"
-              processExecutable="[packageVersion-123]"
-              processHashMd5="[processHashMd5-123]"
-              processHashSha1={null}
-              processHashSha256={null}
-              processPid={null}
-              processPpid={null}
-              processName={null}
-              showMessage={true}
-              sshMethod={null}
-              sshSignature={null}
-              text={null}
-              userDomain={null}
-              userName={null}
-              workingDirectory={null}
-              processTitle={null}
-              args={null}
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        '[hostname-123][packageVersion-123]with result[outcome-123][packageName-123][packageVersion-123][packageSummary-123][processHashMd5-123][message-123]'
-      );
-    });
-
-    test('it can return the host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processHashMd5, processHashSha1', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericFileLine
-              contextId="[context-123]"
-              endgameExitCode={null}
-              endgameFileName={null}
-              endgameFilePath={null}
-              endgameParentProcessName={null}
-              endgamePid={null}
-              endgameProcessName={null}
-              eventAction={null}
-              fileName={null}
-              filePath={null}
-              hostName="[hostname-123]"
-              id="[id-123]"
-              message="[message-123]"
-              outcome="[outcome-123]"
-              packageName="[packageName-123]"
-              packageSummary="[packageSummary-123]"
-              packageVersion="[packageVersion-123]"
-              processExecutable="[packageVersion-123]"
-              processHashMd5="[processHashMd5-123]"
-              processHashSha1="[processHashSha1-123]"
-              processHashSha256={null}
-              processPid={null}
-              processPpid={null}
-              processName={null}
-              showMessage={true}
-              sshMethod={null}
-              sshSignature={null}
-              text={null}
-              userDomain={null}
-              userName={null}
-              workingDirectory={null}
-              processTitle={null}
-              args={null}
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        '[hostname-123][packageVersion-123]with result[outcome-123][packageName-123][packageVersion-123][packageSummary-123][processHashSha1-123][processHashMd5-123][message-123]'
-      );
-    });
-
-    test('it can return the host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processHashMd5, processHashSha1, processHashSha256', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericFileLine
-              contextId="[context-123]"
-              endgameExitCode={null}
-              endgameFileName={null}
-              endgameFilePath={null}
-              endgameParentProcessName={null}
-              endgamePid={null}
-              endgameProcessName={null}
-              eventAction={null}
-              fileName={null}
-              filePath={null}
-              hostName="[hostname-123]"
-              id="[id-123]"
-              message="[message-123]"
-              outcome="[outcome-123]"
-              packageName="[packageName-123]"
-              packageSummary="[packageSummary-123]"
-              packageVersion="[packageVersion-123]"
-              processExecutable="[packageVersion-123]"
-              processHashMd5="[processHashMd5-123]"
-              processHashSha1="[processHashSha1-123]"
-              processHashSha256="[processHashSha256-123]"
-              processPid={null}
-              processPpid={null}
-              processName={null}
-              showMessage={true}
-              sshMethod={null}
-              sshSignature={null}
-              text={null}
-              userDomain={null}
-              userName={null}
-              workingDirectory={null}
-              processTitle={null}
-              args={null}
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        '[hostname-123][packageVersion-123]with result[outcome-123][packageName-123][packageVersion-123][packageSummary-123][processHashSha256-123][processHashSha1-123][processHashMd5-123][message-123]'
-      );
-    });
-
-    test('it can return the host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processHashMd5, processHashSha1, processHashSha256, processPid', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericFileLine
-              contextId="[context-123]"
-              endgameExitCode={null}
-              endgameFileName={null}
-              endgameFilePath={null}
-              endgameParentProcessName={null}
-              endgamePid={null}
-              endgameProcessName={null}
-              eventAction={null}
-              fileName={null}
-              filePath={null}
-              hostName="[hostname-123]"
-              id="[id-123]"
-              message="[message-123]"
-              outcome="[outcome-123]"
-              packageName="[packageName-123]"
-              packageSummary="[packageSummary-123]"
-              packageVersion="[packageVersion-123]"
-              processExecutable="[processExecutable-123]"
-              processHashMd5="[processHashMd5-123]"
-              processHashSha1="[processHashSha1-123]"
-              processHashSha256="[processHashSha256-123]"
-              processPid={123}
-              processPpid={null}
-              processName={null}
-              showMessage={true}
-              sshMethod={null}
-              sshSignature={null}
-              text={null}
-              userDomain={null}
-              userName={null}
-              workingDirectory={null}
-              processTitle={null}
-              args={null}
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        '[hostname-123][processExecutable-123](123)with result[outcome-123][packageName-123][packageVersion-123][packageSummary-123][processHashSha256-123][processHashSha1-123][processHashMd5-123][message-123]'
-      );
-    });
-
-    test('it can return the host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processHashMd5, processHashSha1, processHashSha256, processPid, processPpid, processName', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericFileLine
-              contextId="[context-123]"
-              endgameExitCode={null}
-              endgameFileName={null}
-              endgameFilePath={null}
-              endgameParentProcessName={null}
-              endgamePid={null}
-              endgameProcessName={null}
-              eventAction={null}
-              fileName={null}
-              filePath={null}
-              hostName="[hostname-123]"
-              id="[id-123]"
-              message="[message-123]"
-              outcome="[outcome-123]"
-              packageName="[packageName-123]"
-              packageSummary="[packageSummary-123]"
-              packageVersion="[packageVersion-123]"
-              processExecutable="[packageVersion-123]"
-              processHashMd5="[processHashMd5-123]"
-              processHashSha1="[processHashSha1-123]"
-              processHashSha256="[processHashSha256-123]"
-              processPid={123}
-              processPpid={456}
-              processName="[processName-123]"
-              showMessage={true}
-              sshMethod={null}
-              sshSignature={null}
-              text={null}
-              userDomain={null}
-              userName={null}
-              workingDirectory={null}
-              processTitle={null}
-              args={null}
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        '[hostname-123][processName-123](123)via parent process(456)with result[outcome-123][packageName-123][packageVersion-123][packageSummary-123][processHashSha256-123][processHashSha1-123][processHashMd5-123][message-123]'
-      );
-    });
-
-    test('it can return the endgameExitCode, endgameParentProcessName, eventAction, host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processHashMd5, processHashSha1, processHashSha256, processPid, processPpid, processName, sshMethod', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericFileLine
-              contextId="[context-123]"
-              endgameExitCode="[endgameExitCode-123]"
-              endgameFileName={null}
-              endgameFilePath={null}
-              endgameParentProcessName="[endgameParentProcessName-123]"
-              endgamePid={null}
-              endgameProcessName={null}
-              eventAction="[eventAction-123]"
-              fileName={null}
-              filePath={null}
-              hostName="[hostname-123]"
-              id="[id-123]"
-              message="[message-123]"
-              outcome="[outcome-123]"
-              packageName="[packageName-123]"
-              packageSummary="[packageSummary-123]"
-              packageVersion="[packageVersion-123]"
-              processExecutable="[packageVersion-123]"
-              processHashMd5="[processHashMd5-123]"
-              processHashSha1="[processHashSha1-123]"
-              processHashSha256="[processHashSha256-123]"
-              processPid={123}
-              processPpid={456}
-              processName="[processName-123]"
-              showMessage={true}
-              sshMethod="[sshMethod-123]"
-              sshSignature={null}
-              text={null}
-              userDomain={null}
-              userName={null}
-              workingDirectory={null}
-              processTitle={null}
-              args={null}
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        '[hostname-123][processName-123](123)with exit code[endgameExitCode-123]via parent process[endgameParentProcessName-123](456)with result[outcome-123][sshMethod-123][packageName-123][packageVersion-123][packageSummary-123][processHashSha256-123][processHashSha1-123][processHashMd5-123][message-123]'
-      );
-    });
-
-    test('it can return the endgameExitCode, endgameParentProcessName, eventAction, host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processHashMd5, processHashSha1, processHashSha256, processPid, processPpid, processName, sshMethod, sshSignature', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericFileLine
-              contextId="[context-123]"
-              endgameExitCode="[endgameExitCode-123]"
-              endgameFileName={null}
-              endgameFilePath={null}
-              endgameParentProcessName="[endgameParentProcessName-123]"
-              endgamePid={null}
-              endgameProcessName={null}
-              eventAction="[eventAction-123]"
-              fileName={null}
-              filePath={null}
-              hostName="[hostname-123]"
-              id="[id-123]"
-              message="[message-123]"
-              outcome="[outcome-123]"
-              packageName="[packageName-123]"
-              packageSummary="[packageSummary-123]"
-              packageVersion="[packageVersion-123]"
-              processExecutable="[packageVersion-123]"
-              processHashMd5="[processHashMd5-123]"
-              processHashSha1="[processHashSha1-123]"
-              processHashSha256="[processHashSha256-123]"
-              processPid={123}
-              processPpid={456}
-              processName="[processName-123]"
-              showMessage={true}
-              sshMethod="[sshMethod-123]"
-              sshSignature="[sshSignature-123]"
-              text={null}
-              userDomain={null}
-              userName={null}
-              workingDirectory={null}
-              processTitle={null}
-              args={null}
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        '[hostname-123][processName-123](123)with exit code[endgameExitCode-123]via parent process[endgameParentProcessName-123](456)with result[outcome-123][sshSignature-123][sshMethod-123][packageName-123][packageVersion-123][packageSummary-123][processHashSha256-123][processHashSha1-123][processHashMd5-123][message-123]'
-      );
-    });
-
-    test('it can return the endgameExitCode, endgameParentProcessName, eventAction, host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processHashMd5, processHashSha1, processHashSha256, processPid, processPpid, processName, sshMethod, sshSignature, text', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericFileLine
-              contextId="[context-123]"
-              endgameExitCode="[endgameExitCode-123]"
-              endgameFileName={null}
-              endgameFilePath={null}
-              endgameParentProcessName="[endgameParentProcessName-123]"
-              endgamePid={null}
-              endgameProcessName={null}
-              eventAction="[eventAction-123]"
-              fileName={null}
-              filePath={null}
-              hostName="[hostname-123]"
-              id="[id-123]"
-              message="[message-123]"
-              outcome="[outcome-123]"
-              packageName="[packageName-123]"
-              packageSummary="[packageSummary-123]"
-              packageVersion="[packageVersion-123]"
-              processExecutable="[packageVersion-123]"
-              processHashMd5="[processHashMd5-123]"
-              processHashSha1="[processHashSha1-123]"
-              processHashSha256="[processHashSha256-123]"
-              processPid={123}
-              processPpid={456}
-              processName="[processName-123]"
-              showMessage={true}
-              sshMethod="[sshMethod-123]"
-              sshSignature="[sshSignature-123]"
-              text="[text-123]"
-              userDomain={null}
-              userName={null}
-              workingDirectory={null}
-              processTitle={null}
-              args={null}
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        '[hostname-123][text-123][processName-123](123)with exit code[endgameExitCode-123]via parent process[endgameParentProcessName-123](456)with result[outcome-123][sshSignature-123][sshMethod-123][packageName-123][packageVersion-123][packageSummary-123][processHashSha256-123][processHashSha1-123][processHashMd5-123][message-123]'
-      );
-    });
-
-    test('it can return the endgameExitCode, endgameParentProcessName, eventAction, host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processHashMd5, processHashSha1, processHashSha256, processPid, processPpid, processName, sshMethod, sshSignature, text, userDomain', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericFileLine
-              contextId="[context-123]"
-              endgameExitCode="[endgameExitCode-123]"
-              endgameFileName={null}
-              endgameFilePath={null}
-              endgameParentProcessName="[endgameParentProcessName-123]"
-              endgamePid={null}
-              endgameProcessName={null}
-              eventAction="[eventAction-123]"
-              fileName={null}
-              filePath={null}
-              hostName="[hostname-123]"
-              id="[id-123]"
-              message="[message-123]"
-              outcome="[outcome-123]"
-              packageName="[packageName-123]"
-              packageSummary="[packageSummary-123]"
-              packageVersion="[packageVersion-123]"
-              processExecutable="[packageVersion-123]"
-              processHashMd5="[processHashMd5-123]"
-              processHashSha1="[processHashSha1-123]"
-              processHashSha256="[processHashSha256-123]"
-              processPid={123}
-              processPpid={456}
-              processName="[processName-123]"
-              showMessage={true}
-              sshMethod="[sshMethod-123]"
-              sshSignature="[sshSignature-123]"
-              text="[text-123]"
-              userDomain="[userDomain-123]"
-              userName={null}
-              workingDirectory={null}
-              processTitle={null}
-              args={null}
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        '\\[userDomain-123][hostname-123][text-123][processName-123](123)with exit code[endgameExitCode-123]via parent process[endgameParentProcessName-123](456)with result[outcome-123][sshSignature-123][sshMethod-123][packageName-123][packageVersion-123][packageSummary-123][processHashSha256-123][processHashSha1-123][processHashMd5-123][message-123]'
-      );
-    });
-
-    test('it can return the endgameExitCode, endgameParentProcessName, eventAction, host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processHashMd5, processHashSha1, processHashSha256, processPid, processPpid, processName, sshMethod, sshSignature, text, userDomain, username', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericFileLine
-              contextId="[context-123]"
-              endgameExitCode="[endgameExitCode-123]"
-              endgameFileName={null}
-              endgameFilePath={null}
-              endgameParentProcessName="[endgameParentProcessName-123]"
-              endgamePid={null}
-              endgameProcessName={null}
-              eventAction="[eventAction-123]"
-              fileName={null}
-              filePath={null}
-              hostName="[hostname-123]"
-              id="[id-123]"
-              message="[message-123]"
-              outcome="[outcome-123]"
-              packageName="[packageName-123]"
-              packageSummary="[packageSummary-123]"
-              packageVersion="[packageVersion-123]"
-              processExecutable="[packageVersion-123]"
-              processHashMd5="[processHashMd5-123]"
-              processHashSha1="[processHashSha1-123]"
-              processHashSha256="[processHashSha256-123]"
-              processPid={123}
-              processPpid={456}
-              processName="[processName-123]"
-              showMessage={true}
-              sshMethod="[sshMethod-123]"
-              sshSignature="[sshSignature-123]"
-              text="[text-123]"
-              userDomain="[userDomain-123]"
-              userName="[username-123]"
-              workingDirectory={null}
-              processTitle={null}
-              args={null}
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        '[username-123]\\[userDomain-123]@[hostname-123][text-123][processName-123](123)with exit code[endgameExitCode-123]via parent process[endgameParentProcessName-123](456)with result[outcome-123][sshSignature-123][sshMethod-123][packageName-123][packageVersion-123][packageSummary-123][processHashSha256-123][processHashSha1-123][processHashMd5-123][message-123]'
-      );
-    });
-
-    test('it can return the endgameExitCode, endgameParentProcessName, eventAction, host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processHashMd5, processHashSha1, processHashSha256, processPid, processPpid, processName, sshMethod, sshSignature, text, userDomain, username, working-directory', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericFileLine
-              contextId="[context-123]"
-              endgameExitCode="[endgameExitCode-123]"
-              endgameFileName={null}
-              endgameFilePath={null}
-              endgameParentProcessName="[endgameParentProcessName-123]"
-              endgamePid={null}
-              endgameProcessName={null}
-              eventAction="[eventAction-123]"
-              fileName={null}
-              filePath={null}
-              hostName="[hostname-123]"
-              id="[id-123]"
-              message="[message-123]"
-              outcome="[outcome-123]"
-              packageName="[packageName-123]"
-              packageSummary="[packageSummary-123]"
-              packageVersion="[packageVersion-123]"
-              processExecutable="[packageVersion-123]"
-              processHashMd5="[processHashMd5-123]"
-              processHashSha1="[processHashSha1-123]"
-              processHashSha256="[processHashSha256-123]"
-              processPid={123}
-              processPpid={456}
-              processName="[processName-123]"
-              showMessage={true}
-              sshMethod="[sshMethod-123]"
-              sshSignature="[sshSignature-123]"
-              text="[text-123]"
-              userDomain="[userDomain-123]"
-              userName="[username-123]"
-              workingDirectory="[working-directory-123]"
-              processTitle={null}
-              args={null}
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        '[username-123]\\[userDomain-123]@[hostname-123]in[working-directory-123][text-123][processName-123](123)with exit code[endgameExitCode-123]via parent process[endgameParentProcessName-123](456)with result[outcome-123][sshSignature-123][sshMethod-123][packageName-123][packageVersion-123][packageSummary-123][processHashSha256-123][processHashSha1-123][processHashMd5-123][message-123]'
-      );
-    });
-
-    test('it can return the endgameExitCode, endgameParentProcessName, eventAction, host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processHashMd5, processHashSha1, processHashSha256, processPid, processPpid, processName, sshMethod, sshSignature, text, userDomain, username, working-directory, process-title', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericFileLine
-              contextId="[context-123]"
-              endgameExitCode="[endgameExitCode-123]"
-              endgameFileName={null}
-              endgameFilePath={null}
-              endgameParentProcessName="[endgameParentProcessName-123]"
-              endgamePid={null}
-              endgameProcessName={null}
-              eventAction="[eventAction-123]"
-              fileName={null}
-              filePath={null}
-              hostName="[hostname-123]"
-              id="[id-123]"
-              message="[message-123]"
-              outcome="[outcome-123]"
-              packageName="[packageName-123]"
-              packageSummary="[packageSummary-123]"
-              packageVersion="[packageVersion-123]"
-              processExecutable="[packageVersion-123]"
-              processHashMd5="[processHashMd5-123]"
-              processHashSha1="[processHashSha1-123]"
-              processHashSha256="[processHashSha256-123]"
-              processPid={123}
-              processPpid={456}
-              processName="[processName-123]"
-              showMessage={true}
-              sshMethod="[sshMethod-123]"
-              sshSignature="[sshSignature-123]"
-              text="[text-123]"
-              userDomain="[userDomain-123]"
-              userName="[username-123]"
-              workingDirectory="[working-directory-123]"
-              processTitle="[process-title-123]"
-              args={null}
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        '[username-123]\\[userDomain-123]@[hostname-123]in[working-directory-123][text-123][processName-123](123)[process-title-123]with exit code[endgameExitCode-123]via parent process[endgameParentProcessName-123](456)with result[outcome-123][sshSignature-123][sshMethod-123][packageName-123][packageVersion-123][packageSummary-123][processHashSha256-123][processHashSha1-123][processHashMd5-123][message-123]'
-      );
-    });
-
-    test('it can return the endgameExitCode, endgameParentProcessName, eventAction, host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processHashMd5, processHashSha1, processHashSha256, processPid, processPpid, processName, sshMethod, sshSignature, text, userDomain, username, working-directory, process-title, args', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericFileLine
-              contextId="[context-123]"
-              endgameExitCode="[endgameExitCode-123]"
-              endgameFileName={null}
-              endgameFilePath={null}
-              endgameParentProcessName="[endgameParentProcessName-123]"
-              endgamePid={null}
-              endgameProcessName={null}
-              eventAction="[eventAction-123]"
-              fileName={null}
-              filePath={null}
-              hostName="[hostname-123]"
-              id="[id-123]"
-              message="[message-123]"
-              outcome="[outcome-123]"
-              packageName="[packageName-123]"
-              packageSummary="[packageSummary-123]"
-              packageVersion="[packageVersion-123]"
-              processExecutable="[packageVersion-123]"
-              processHashMd5="[processHashMd5-123]"
-              processHashSha1="[processHashSha1-123]"
-              processHashSha256="[processHashSha256-123]"
-              processPid={123}
-              processPpid={456}
-              processName="[processName-123]"
-              showMessage={true}
-              sshMethod="[sshMethod-123]"
-              sshSignature="[sshSignature-123]"
-              text="[text-123]"
-              userDomain="[userDomain-123]"
-              userName="[username-123]"
-              workingDirectory="[working-directory-123]"
-              processTitle="[process-title-123]"
-              args={['[arg-1]', '[arg-2]', '[arg-3]']}
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual(
-        '[username-123]\\[userDomain-123]@[hostname-123]in[working-directory-123][text-123][processName-123](123)[arg-1][arg-2][arg-3][process-title-123]with exit code[endgameExitCode-123]via parent process[endgameParentProcessName-123](456)with result[outcome-123][sshSignature-123][sshMethod-123][packageName-123][packageVersion-123][packageSummary-123][processHashSha256-123][processHashSha1-123][processHashMd5-123][message-123]'
-      );
-    });
-
-    test('it renders a FileDraggable when endgameFileName and endgameFilePath are provided, but fileName and filePath are NOT provided', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericFileLine
-              contextId="[context-123]"
-              endgameExitCode={undefined}
-              endgameFileName="[endgameFileName]"
-              endgameFilePath="[endgameFilePath]"
-              endgameParentProcessName={undefined}
-              endgamePid={undefined}
-              endgameProcessName={undefined}
-              eventAction={undefined}
-              fileName={undefined}
-              filePath={undefined}
-              hostName={undefined}
-              id="[id-123]"
-              message={undefined}
-              outcome={undefined}
-              packageName={undefined}
-              packageSummary={undefined}
-              packageVersion={undefined}
-              processExecutable={undefined}
-              processHashMd5={undefined}
-              processHashSha1={undefined}
-              processHashSha256={undefined}
-              processPid={undefined}
-              processPpid={undefined}
-              processName={undefined}
-              showMessage={true}
-              sshMethod={undefined}
-              processTitle={undefined}
-              args={undefined}
-              sshSignature={undefined}
-              text={undefined}
-              userDomain={undefined}
-              userName={undefined}
-              workingDirectory={undefined}
-            />
-          </div>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toEqual('[endgameFileName]in[endgameFilePath]an unknown process');
-    });
-
-    test('it prefers to render fileName and filePath over endgameFileName and endgameFilePath respectfully when all of those fields are provided', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericFileLine
-              contextId="[context-123]"
-              endgameExitCode={undefined}
-              endgameFileName="[endgameFileName]"
-              endgameFilePath="[endgameFilePath]"
-              endgameParentProcessName={undefined}
-              endgamePid={undefined}
-              endgameProcessName={undefined}
-              eventAction={undefined}
-              fileName="[fileName]"
-              filePath="[filePath]"
-              hostName={undefined}
-              id="[id-123]"
-              message={undefined}
-              outcome={undefined}
-              packageName={undefined}
-              packageSummary={undefined}
-              packageVersion={undefined}
-              processExecutable={undefined}
-              processHashMd5={undefined}
-              processHashSha1={undefined}
-              processHashSha256={undefined}
-              processPid={undefined}
-              processPpid={undefined}
-              processName={undefined}
-              showMessage={true}
-              sshMethod={undefined}
-              processTitle={undefined}
-              args={undefined}
-              sshSignature={undefined}
-              text={undefined}
-              userDomain={undefined}
-              userName={undefined}
-              workingDirectory={undefined}
-            />
-          </div>
-        </TestProviders>
-      );
-
-      expect(wrapper.text()).toEqual('[fileName]in[filePath]an unknown process');
-    });
-
-    ['file_create_event', 'created', 'file_delete_event', 'deleted'].forEach(eventAction => {
-      test(`it renders the text "via" when eventAction is ${eventAction}`, () => {
-        const wrapper = mount(
-          <TestProviders>
-            <div>
-              <SystemGenericFileLine
-                contextId="[context-123]"
-                endgameExitCode={undefined}
-                endgameFileName={undefined}
-                endgameFilePath={undefined}
-                endgameParentProcessName={undefined}
-                endgamePid={undefined}
-                endgameProcessName={undefined}
-                eventAction={eventAction}
-                fileName={undefined}
-                filePath={undefined}
-                hostName={undefined}
-                id="[id-123]"
-                message={undefined}
-                outcome={undefined}
-                packageName={undefined}
-                packageSummary={undefined}
-                packageVersion={undefined}
-                processExecutable={undefined}
-                processHashMd5={undefined}
-                processHashSha1={undefined}
-                processHashSha256={undefined}
-                processPid={undefined}
-                processPpid={undefined}
-                processName={undefined}
-                showMessage={true}
-                sshMethod={undefined}
-                processTitle={undefined}
-                args={undefined}
-                sshSignature={undefined}
-                text={undefined}
-                userDomain={undefined}
-                userName={undefined}
-                workingDirectory={undefined}
-              />
-            </div>
-          </TestProviders>
-        );
-
-        expect(wrapper.text().includes('via')).toBe(true);
-      });
-    });
-
-    test('it does NOT render the text "via" when eventAction is not a whitelisted action', () => {
-      const eventAction = 'a_non_whitelisted_event_action';
-
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericFileLine
-              contextId="[context-123]"
-              endgameExitCode={undefined}
-              endgameFileName={undefined}
-              endgameFilePath={undefined}
-              endgameParentProcessName={undefined}
-              endgamePid={undefined}
-              endgameProcessName={undefined}
-              eventAction={eventAction}
-              fileName={undefined}
-              filePath={undefined}
-              hostName={undefined}
-              id="[id-123]"
-              message={undefined}
-              outcome={undefined}
-              packageName={undefined}
-              packageSummary={undefined}
-              packageVersion={undefined}
-              processExecutable={undefined}
-              processHashMd5={undefined}
-              processHashSha1={undefined}
-              processHashSha256={undefined}
-              processPid={undefined}
-              processPpid={undefined}
-              processName={undefined}
-              showMessage={true}
-              sshMethod={undefined}
-              processTitle={undefined}
-              args={undefined}
-              sshSignature={undefined}
-              text={undefined}
-              userDomain={undefined}
-              userName={undefined}
-              workingDirectory={undefined}
-            />
-          </div>
-        </TestProviders>
-      );
-
-      expect(wrapper.text().includes('via')).toBe(false);
-    });
-
-    test('it renders a ParentProcessDraggable when eventAction is NOT "process_stopped" and NOT "termination_event"', () => {
-      const eventAction = 'something_else';
-
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericFileLine
-              contextId="[context-123]"
-              endgameExitCode={undefined}
-              endgameFileName={undefined}
-              endgameFilePath={undefined}
-              endgameParentProcessName="[endgameParentProcessName]"
-              endgamePid={undefined}
-              endgameProcessName={undefined}
-              eventAction={eventAction}
-              fileName={undefined}
-              filePath={undefined}
-              hostName={undefined}
-              id="[id-123]"
-              message={undefined}
-              outcome={undefined}
-              packageName={undefined}
-              packageSummary={undefined}
-              packageVersion={undefined}
-              processExecutable={undefined}
-              processHashMd5={undefined}
-              processHashSha1={undefined}
-              processHashSha256={undefined}
-              processPid={undefined}
-              processPpid={456}
-              processName={undefined}
-              showMessage={true}
-              sshMethod={undefined}
-              processTitle={undefined}
-              args={undefined}
-              sshSignature={undefined}
-              text={undefined}
-              userDomain={undefined}
-              userName={undefined}
-              workingDirectory={undefined}
-            />
-          </div>
-        </TestProviders>
-      );
-
-      expect(wrapper.text()).toEqual(
-        'an unknown processvia parent process[endgameParentProcessName](456)'
-      );
-    });
-
-    test('it does NOT render a ParentProcessDraggable when eventAction is "process_stopped"', () => {
-      const eventAction = 'process_stopped';
-
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericFileLine
-              contextId="[context-123]"
-              endgameExitCode={undefined}
-              endgameFileName={undefined}
-              endgameFilePath={undefined}
-              endgameParentProcessName="[endgameParentProcessName]"
-              endgamePid={undefined}
-              endgameProcessName={undefined}
-              eventAction={eventAction}
-              fileName={undefined}
-              filePath={undefined}
-              hostName={undefined}
-              id="[id-123]"
-              message={undefined}
-              outcome={undefined}
-              packageName={undefined}
-              packageSummary={undefined}
-              packageVersion={undefined}
-              processExecutable={undefined}
-              processHashMd5={undefined}
-              processHashSha1={undefined}
-              processHashSha256={undefined}
-              processPid={undefined}
-              processPpid={456}
-              processName={undefined}
-              showMessage={true}
-              sshMethod={undefined}
-              processTitle={undefined}
-              args={undefined}
-              sshSignature={undefined}
-              text={undefined}
-              userDomain={undefined}
-              userName={undefined}
-              workingDirectory={undefined}
-            />
-          </div>
-        </TestProviders>
-      );
-
-      expect(wrapper.text()).toEqual('an unknown process');
-    });
-
-    test('it does NOT render a ParentProcessDraggable when eventAction is "termination_event"', () => {
-      const eventAction = 'termination_event';
-
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericFileLine
-              contextId="[context-123]"
-              endgameExitCode={undefined}
-              endgameFileName={undefined}
-              endgameFilePath={undefined}
-              endgameParentProcessName="[endgameParentProcessName]"
-              endgamePid={undefined}
-              endgameProcessName={undefined}
-              eventAction={eventAction}
-              fileName={undefined}
-              filePath={undefined}
-              hostName={undefined}
-              id="[id-123]"
-              message={undefined}
-              outcome={undefined}
-              packageName={undefined}
-              packageSummary={undefined}
-              packageVersion={undefined}
-              processExecutable={undefined}
-              processHashMd5={undefined}
-              processHashSha1={undefined}
-              processHashSha256={undefined}
-              processPid={undefined}
-              processPpid={456}
-              processName={undefined}
-              showMessage={true}
-              sshMethod={undefined}
-              processTitle={undefined}
-              args={undefined}
-              sshSignature={undefined}
-              text={undefined}
-              userDomain={undefined}
-              userName={undefined}
-              workingDirectory={undefined}
-            />
-          </div>
-        </TestProviders>
-      );
-
-      expect(wrapper.text()).toEqual('an unknown process');
-    });
-
-    test('it returns renders the message when showMessage is true', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericFileLine
-              contextId="[context-123]"
-              endgameExitCode={undefined}
-              endgameFileName={undefined}
-              endgameFilePath={undefined}
-              endgameParentProcessName={undefined}
-              endgamePid={undefined}
-              endgameProcessName={undefined}
-              eventAction={undefined}
-              fileName={undefined}
-              filePath={undefined}
-              hostName={undefined}
-              id="[id-123]"
-              message="[message]"
-              outcome={undefined}
-              packageName={undefined}
-              packageSummary={undefined}
-              packageVersion={undefined}
-              processExecutable={undefined}
-              processHashMd5={undefined}
-              processHashSha1={undefined}
-              processHashSha256={undefined}
-              processPid={undefined}
-              processPpid={undefined}
-              processName={undefined}
-              showMessage={true}
-              sshMethod={undefined}
-              processTitle={undefined}
-              args={undefined}
-              sshSignature={undefined}
-              text={undefined}
-              userDomain={undefined}
-              userName={undefined}
-              workingDirectory={undefined}
-            />
-          </div>
-        </TestProviders>
-      );
-
-      expect(wrapper.text()).toEqual('an unknown process[message]');
-    });
-
-    test('it does NOT render the message when showMessage is false', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericFileLine
-              contextId="[context-123]"
-              endgameExitCode={undefined}
-              endgameFileName={undefined}
-              endgameFilePath={undefined}
-              endgameParentProcessName={undefined}
-              endgamePid={undefined}
-              endgameProcessName={undefined}
-              eventAction={undefined}
-              fileName={undefined}
-              filePath={undefined}
-              hostName={undefined}
-              id="[id-123]"
-              message="[message]"
-              outcome={undefined}
-              packageName={undefined}
-              packageSummary={undefined}
-              packageVersion={undefined}
-              processExecutable={undefined}
-              processHashMd5={undefined}
-              processHashSha1={undefined}
-              processHashSha256={undefined}
-              processPid={undefined}
-              processPpid={undefined}
-              processName={undefined}
-              showMessage={false}
-              sshMethod={undefined}
-              processTitle={undefined}
-              args={undefined}
-              sshSignature={undefined}
-              text={undefined}
-              userDomain={undefined}
-              userName={undefined}
-              workingDirectory={undefined}
-            />
-          </div>
-        </TestProviders>
-      );
-
-      expect(wrapper.text()).toEqual('an unknown process');
-    });
-
-    test('it renders a ProcessDraggableWithNonExistentProcess when endgamePid and endgameProcessName are provided, but processPid and processName are NOT provided', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericFileLine
-              contextId="[context-123]"
-              endgameExitCode={undefined}
-              endgameFileName={undefined}
-              endgameFilePath={undefined}
-              endgameParentProcessName={undefined}
-              endgamePid={789}
-              endgameProcessName="[endgameProcessName]"
-              eventAction={undefined}
-              fileName={undefined}
-              filePath={undefined}
-              hostName={undefined}
-              id="[id-123]"
-              message={undefined}
-              outcome={undefined}
-              packageName={undefined}
-              packageSummary={undefined}
-              packageVersion={undefined}
-              processExecutable={undefined}
-              processHashMd5={undefined}
-              processHashSha1={undefined}
-              processHashSha256={undefined}
-              processPid={undefined}
-              processPpid={undefined}
-              processName={undefined}
-              showMessage={true}
-              sshMethod={undefined}
-              processTitle={undefined}
-              args={undefined}
-              sshSignature={undefined}
-              text={undefined}
-              userDomain={undefined}
-              userName={undefined}
-              workingDirectory={undefined}
-            />
-          </div>
-        </TestProviders>
-      );
-
-      expect(wrapper.text()).toEqual('[endgameProcessName](789)');
-    });
-
-    test('it prefers to render processName and processPid over endgameProcessName and endgamePid respectfully when all of those fields are provided', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <div>
-            <SystemGenericFileLine
-              contextId="[context-123]"
-              endgameExitCode={undefined}
-              endgameFileName={undefined}
-              endgameFilePath={undefined}
-              endgameParentProcessName={undefined}
-              endgamePid={789}
-              endgameProcessName="[endgameProcessName]"
-              eventAction={undefined}
-              fileName={undefined}
-              filePath={undefined}
-              hostName={undefined}
-              id="[id-123]"
-              message={undefined}
-              outcome={undefined}
-              packageName={undefined}
-              packageSummary={undefined}
-              packageVersion={undefined}
-              processExecutable={undefined}
-              processHashMd5={undefined}
-              processHashSha1={undefined}
-              processHashSha256={undefined}
-              processPid={123}
-              processPpid={undefined}
-              processName="[processName]"
-              showMessage={true}
-              sshMethod={undefined}
-              processTitle={undefined}
-              args={undefined}
-              sshSignature={undefined}
-              text={undefined}
-              userDomain={undefined}
-              userName={undefined}
-              workingDirectory={undefined}
-            />
-          </div>
-        </TestProviders>
-      );
-
-      expect(wrapper.text()).toEqual('[processName](123)');
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/system/generic_file_details.tsx b/x-pack/plugins/siem/public/components/timeline/body/renderers/system/generic_file_details.tsx
deleted file mode 100644
index ef7c3b3ccf8591..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/system/generic_file_details.tsx
+++ /dev/null
@@ -1,298 +0,0 @@
-/*
- * 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 { EuiFlexGroup, EuiSpacer } from '@elastic/eui';
-import { get } from 'lodash/fp';
-import React from 'react';
-
-import { BrowserFields } from '../../../../../containers/source';
-import { Ecs } from '../../../../../graphql/types';
-import { DraggableBadge } from '../../../../draggables';
-import { OverflowField } from '../../../../tables/helpers';
-
-import * as i18n from './translations';
-import { NetflowRenderer } from '../netflow';
-import { UserHostWorkingDir } from '../user_host_working_dir';
-import { Details, isProcessStoppedOrTerminationEvent, showVia, TokensFlexItem } from '../helpers';
-import { ProcessDraggableWithNonExistentProcess } from '../process_draggable';
-import { Args } from '../args';
-import { AuthSsh } from './auth_ssh';
-import { ExitCodeDraggable } from '../exit_code_draggable';
-import { FileDraggable } from '../file_draggable';
-import { Package } from './package';
-import { Badge } from '../../../../page';
-import { ParentProcessDraggable } from '../parent_process_draggable';
-import { ProcessHash } from '../process_hash';
-
-interface Props {
-  args: string[] | null | undefined;
-  contextId: string;
-  endgameExitCode: string | null | undefined;
-  endgameFileName: string | null | undefined;
-  endgameFilePath: string | null | undefined;
-  endgameParentProcessName: string | null | undefined;
-  endgamePid: number | null | undefined;
-  endgameProcessName: string | null | undefined;
-  eventAction: string | null | undefined;
-  fileName: string | null | undefined;
-  filePath: string | null | undefined;
-  hostName: string | null | undefined;
-  id: string;
-  message: string | null | undefined;
-  outcome: string | null | undefined;
-  packageName: string | null | undefined;
-  packageSummary: string | null | undefined;
-  packageVersion: string | null | undefined;
-  processName: string | null | undefined;
-  processPid: number | null | undefined;
-  processPpid: number | null | undefined;
-  processExecutable: string | null | undefined;
-  processHashMd5: string | null | undefined;
-  processHashSha1: string | null | undefined;
-  processHashSha256: string | null | undefined;
-  processTitle: string | null | undefined;
-  showMessage: boolean;
-  sshSignature: string | null | undefined;
-  sshMethod: string | null | undefined;
-  text: string | null | undefined;
-  userDomain: string | null | undefined;
-  userName: string | null | undefined;
-  workingDirectory: string | null | undefined;
-}
-
-export const SystemGenericFileLine = React.memo<Props>(
-  ({
-    args,
-    contextId,
-    endgameExitCode,
-    endgameFileName,
-    endgameFilePath,
-    endgameParentProcessName,
-    endgamePid,
-    endgameProcessName,
-    eventAction,
-    fileName,
-    filePath,
-    hostName,
-    id,
-    message,
-    outcome,
-    packageName,
-    packageSummary,
-    packageVersion,
-    processExecutable,
-    processHashMd5,
-    processHashSha1,
-    processHashSha256,
-    processName,
-    processPid,
-    processPpid,
-    processTitle,
-    showMessage,
-    sshSignature,
-    sshMethod,
-    text,
-    userDomain,
-    userName,
-    workingDirectory,
-  }) => (
-    <>
-      <EuiFlexGroup alignItems="center" justifyContent="center" gutterSize="none" wrap={true}>
-        <UserHostWorkingDir
-          eventId={id}
-          contextId={contextId}
-          userDomain={userDomain}
-          userName={userName}
-          workingDirectory={workingDirectory}
-          hostName={hostName}
-        />
-        <TokensFlexItem grow={false} component="span">
-          {text}
-        </TokensFlexItem>
-        <FileDraggable
-          contextId={contextId}
-          endgameFileName={endgameFileName}
-          endgameFilePath={endgameFilePath}
-          eventId={id}
-          fileName={fileName}
-          filePath={filePath}
-        />
-        {showVia(eventAction) && (
-          <TokensFlexItem data-test-subj="via" grow={false} component="span">
-            {i18n.VIA}
-          </TokensFlexItem>
-        )}
-        <TokensFlexItem grow={false} component="span">
-          <ProcessDraggableWithNonExistentProcess
-            contextId={contextId}
-            endgamePid={endgamePid}
-            endgameProcessName={endgameProcessName}
-            eventId={id}
-            processPid={processPid}
-            processName={processName}
-            processExecutable={processExecutable}
-          />
-        </TokensFlexItem>
-        <Args args={args} contextId={contextId} eventId={id} processTitle={processTitle} />
-        <ExitCodeDraggable
-          contextId={contextId}
-          endgameExitCode={endgameExitCode}
-          eventId={id}
-          text={i18n.WITH_EXIT_CODE}
-        />
-        {!isProcessStoppedOrTerminationEvent(eventAction) && (
-          <ParentProcessDraggable
-            contextId={contextId}
-            endgameParentProcessName={endgameParentProcessName}
-            eventId={id}
-            processPpid={processPpid}
-            text={i18n.VIA_PARENT_PROCESS}
-          />
-        )}
-        {outcome != null && (
-          <TokensFlexItem grow={false} component="span">
-            {i18n.WITH_RESULT}
-          </TokensFlexItem>
-        )}
-        <TokensFlexItem grow={false} component="span">
-          <DraggableBadge
-            contextId={contextId}
-            eventId={id}
-            field="event.outcome"
-            queryValue={outcome}
-            value={outcome}
-          />
-        </TokensFlexItem>
-        <AuthSsh
-          contextId={contextId}
-          eventId={id}
-          sshSignature={sshSignature}
-          sshMethod={sshMethod}
-        />
-        <Package
-          contextId={contextId}
-          eventId={id}
-          packageName={packageName}
-          packageSummary={packageSummary}
-          packageVersion={packageVersion}
-        />
-      </EuiFlexGroup>
-      <ProcessHash
-        contextId={contextId}
-        eventId={id}
-        processHashMd5={processHashMd5}
-        processHashSha1={processHashSha1}
-        processHashSha256={processHashSha256}
-      />
-
-      {message != null && showMessage && (
-        <>
-          <EuiSpacer size="xs" />
-          <EuiFlexGroup justifyContent="center" gutterSize="none" wrap={true}>
-            <TokensFlexItem grow={false} component="span">
-              <Badge iconType="editorComment" color="hollow" title="">
-                <OverflowField value={message} />
-              </Badge>
-            </TokensFlexItem>
-          </EuiFlexGroup>
-        </>
-      )}
-    </>
-  )
-);
-
-SystemGenericFileLine.displayName = 'SystemGenericFileLine';
-
-interface GenericDetailsProps {
-  browserFields: BrowserFields;
-  data: Ecs;
-  contextId: string;
-  showMessage?: boolean;
-  text: string;
-  timelineId: string;
-}
-
-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;
-    const hostName: string | null | undefined = get('host.name[0]', data);
-    const endgameExitCode: string | null | undefined = get('endgame.exit_code[0]', data);
-    const endgameFileName: string | null | undefined = get('endgame.file_name[0]', data);
-    const endgameFilePath: string | null | undefined = get('endgame.file_path[0]', data);
-    const endgameParentProcessName: string | null | undefined = get(
-      'endgame.parent_process_name[0]',
-      data
-    );
-    const endgamePid: number | null | undefined = get('endgame.pid[0]', data);
-    const endgameProcessName: string | null | undefined = get('endgame.process_name[0]', data);
-    const eventAction: string | null | undefined = get('event.action[0]', data);
-    const fileName: string | null | undefined = get('file.name[0]', data);
-    const filePath: string | null | undefined = get('file.path[0]', data);
-    const userDomain: string | null | undefined = get('user.domain[0]', data);
-    const userName: string | null | undefined = get('user.name[0]', data);
-    const outcome: string | null | undefined = get('event.outcome[0]', data);
-    const packageName: string | null | undefined = get('system.audit.package.name[0]', data);
-    const packageSummary: string | null | undefined = get('system.audit.package.summary[0]', data);
-    const packageVersion: string | null | undefined = get('system.audit.package.version[0]', data);
-    const processHashMd5: string | null | undefined = get('process.hash.md5[0]', data);
-    const processHashSha1: string | null | undefined = get('process.hash.sha1[0]', data);
-    const processHashSha256: string | null | undefined = get('process.hash.sha256', data);
-    const processPid: number | null | undefined = get('process.pid[0]', data);
-    const processPpid: number | null | undefined = get('process.ppid[0]', data);
-    const processName: string | null | undefined = get('process.name[0]', data);
-    const sshSignature: string | null | undefined = get('system.auth.ssh.signature[0]', data);
-    const sshMethod: string | null | undefined = get('system.auth.ssh.method[0]', data);
-    const processExecutable: string | null | undefined = get('process.executable[0]', data);
-    const processTitle: string | null | undefined = get('process.title[0]', data);
-    const workingDirectory: string | null | undefined = get('process.working_directory[0]', data);
-    const args: string[] | null | undefined = get('process.args', data);
-
-    return (
-      <Details>
-        <SystemGenericFileLine
-          id={id}
-          contextId={contextId}
-          text={text}
-          hostName={hostName}
-          endgameExitCode={endgameExitCode}
-          endgameFileName={endgameFileName}
-          endgameFilePath={endgameFilePath}
-          endgameParentProcessName={endgameParentProcessName}
-          endgamePid={endgamePid}
-          endgameProcessName={endgameProcessName}
-          eventAction={eventAction}
-          fileName={fileName}
-          filePath={filePath}
-          userDomain={userDomain}
-          userName={userName}
-          message={message}
-          processTitle={processTitle}
-          workingDirectory={workingDirectory}
-          args={args}
-          packageName={packageName}
-          packageSummary={packageSummary}
-          packageVersion={packageVersion}
-          processHashMd5={processHashMd5}
-          processHashSha1={processHashSha1}
-          processHashSha256={processHashSha256}
-          processName={processName}
-          processPid={processPid}
-          processPpid={processPpid}
-          processExecutable={processExecutable}
-          showMessage={showMessage}
-          sshSignature={sshSignature}
-          sshMethod={sshMethod}
-          outcome={outcome}
-        />
-        <EuiSpacer size="s" />
-        <NetflowRenderer data={data} timelineId={timelineId} />
-      </Details>
-    );
-  }
-);
-
-SystemGenericFileDetails.displayName = 'SystemGenericFileDetails';
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/system/generic_row_renderer.test.tsx b/x-pack/plugins/siem/public/components/timeline/body/renderers/system/generic_row_renderer.test.tsx
deleted file mode 100644
index 2f5fa76855f2be..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/system/generic_row_renderer.test.tsx
+++ /dev/null
@@ -1,936 +0,0 @@
-/*
- * 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 { shallow } from 'enzyme';
-import { cloneDeep } from 'lodash/fp';
-import React from 'react';
-
-import { BrowserFields } from '../../../../../containers/source';
-import { mockBrowserFields } from '../../../../../containers/source/mock';
-import { Ecs } from '../../../../../graphql/types';
-import {
-  mockDnsEvent,
-  mockFimFileCreatedEvent,
-  mockFimFileDeletedEvent,
-  mockSocketClosedEvent,
-  mockSocketOpenedEvent,
-  mockTimelineData,
-  TestProviders,
-} from '../../../../../mock';
-import {
-  mockEndgameAdminLogon,
-  mockEndgameCreationEvent,
-  mockEndgameDnsRequest,
-  mockEndgameExplicitUserLogon,
-  mockEndgameFileCreateEvent,
-  mockEndgameFileDeleteEvent,
-  mockEndgameIpv4ConnectionAcceptEvent,
-  mockEndgameIpv6ConnectionAcceptEvent,
-  mockEndgameIpv4DisconnectReceivedEvent,
-  mockEndgameIpv6DisconnectReceivedEvent,
-  mockEndgameTerminationEvent,
-  mockEndgameUserLogoff,
-  mockEndgameUserLogon,
-} from '../../../../../mock/mock_endgame_ecs_data';
-import { useMountAppended } from '../../../../../utils/use_mount_appended';
-import { RowRenderer } from '../row_renderer';
-import {
-  createDnsRowRenderer,
-  createEndgameProcessRowRenderer,
-  createFimRowRenderer,
-  createGenericSystemRowRenderer,
-  createGenericFileRowRenderer,
-  createSecurityEventRowRenderer,
-  createSocketRowRenderer,
-} from './generic_row_renderer';
-import * as i18n from './translations';
-
-jest.mock('../../../../../pages/overview/events_by_dataset');
-
-describe('GenericRowRenderer', () => {
-  const mount = useMountAppended();
-
-  describe('#createGenericSystemRowRenderer', () => {
-    let nonSystem: Ecs;
-    let system: Ecs;
-    let connectedToRenderer: RowRenderer;
-    beforeEach(() => {
-      nonSystem = cloneDeep(mockTimelineData[0].ecs);
-      system = cloneDeep(mockTimelineData[29].ecs);
-      connectedToRenderer = createGenericSystemRowRenderer({
-        actionName: 'process_started',
-        text: 'some text',
-      });
-    });
-    test('renders correctly against snapshot', () => {
-      // I cannot and do not want to use BrowserFields mocks for the snapshot tests as they are too heavy
-      const browserFields: BrowserFields = {};
-      const children = connectedToRenderer.renderRow({
-        browserFields,
-        data: system,
-        timelineId: 'test',
-      });
-
-      const wrapper = shallow(<span>{children}</span>);
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    test('should return false if not a system datum', () => {
-      expect(connectedToRenderer.isInstance(nonSystem)).toBe(false);
-    });
-
-    test('should return true if it is a system datum', () => {
-      expect(connectedToRenderer.isInstance(system)).toBe(true);
-    });
-
-    test('should return false when action is set to some other value', () => {
-      if (system.event != null && system.event.action != null) {
-        system.event.action[0] = 'some other value';
-        expect(connectedToRenderer.isInstance(system)).toBe(false);
-      } else {
-        // if system.event or system.event.action is not defined in the mock
-        // then we will get an error here
-        expect(system.event).toBeDefined();
-      }
-    });
-    test('should render a system row', () => {
-      const children = connectedToRenderer.renderRow({
-        browserFields: mockBrowserFields,
-        data: system,
-        timelineId: 'test',
-      });
-      const wrapper = mount(
-        <TestProviders>
-          <span>{children}</span>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toContain(
-        'Evan@zeek-londonsome text(6278)with resultfailureSource128.199.212.120'
-      );
-    });
-  });
-
-  describe('#createGenericFileRowRenderer', () => {
-    let nonSystem: Ecs;
-    let systemFile: Ecs;
-    let fileToRenderer: RowRenderer;
-
-    beforeEach(() => {
-      nonSystem = cloneDeep(mockTimelineData[0].ecs);
-      systemFile = cloneDeep(mockTimelineData[28].ecs);
-      fileToRenderer = createGenericFileRowRenderer({
-        actionName: 'user_login',
-        text: 'some text',
-      });
-    });
-
-    test('renders correctly against snapshot', () => {
-      // I cannot and do not want to use BrowserFields mocks for the snapshot tests as they are too heavy
-      const browserFields: BrowserFields = {};
-      const children = fileToRenderer.renderRow({
-        browserFields,
-        data: systemFile,
-        timelineId: 'test',
-      });
-
-      const wrapper = shallow(<span>{children}</span>);
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    test('should return false if not a auditd datum', () => {
-      expect(fileToRenderer.isInstance(nonSystem)).toBe(false);
-    });
-
-    test('should return true if it is a auditd datum', () => {
-      expect(fileToRenderer.isInstance(systemFile)).toBe(true);
-    });
-
-    test('should return false when action is set to some other value', () => {
-      if (systemFile.event != null && systemFile.event.action != null) {
-        systemFile.event.action[0] = 'some other value';
-        expect(fileToRenderer.isInstance(systemFile)).toBe(false);
-      } else {
-        expect(systemFile.event).toBeDefined();
-      }
-    });
-
-    test('should render a system row', () => {
-      const children = fileToRenderer.renderRow({
-        browserFields: mockBrowserFields,
-        data: systemFile,
-        timelineId: 'test',
-      });
-      const wrapper = mount(
-        <TestProviders>
-          <span>{children}</span>
-        </TestProviders>
-      );
-      expect(wrapper.text()).toContain(
-        'Braden@zeek-londonsome text(6278)with resultfailureSource128.199.212.120'
-      );
-    });
-  });
-
-  describe('#createEndgameProcessRowRenderer', () => {
-    test('it renders an endgame process creation_event', () => {
-      const actionName = 'creation_event';
-      const text = i18n.PROCESS_STARTED;
-      const endgameCreationEvent = {
-        ...mockEndgameCreationEvent,
-      };
-
-      const endgameProcessCreationEventRowRenderer = createEndgameProcessRowRenderer({
-        actionName,
-        text,
-      });
-
-      const wrapper = mount(
-        <TestProviders>
-          {endgameProcessCreationEventRowRenderer.isInstance(endgameCreationEvent) &&
-            endgameProcessCreationEventRowRenderer.renderRow({
-              browserFields: mockBrowserFields,
-              data: endgameCreationEvent,
-              timelineId: 'test',
-            })}
-        </TestProviders>
-      );
-
-      expect(wrapper.text()).toEqual(
-        'Arun\\Anvi-Acer@HD-obe-8bf77f54started processMicrosoft.Photos.exe(441684)C:\\Program Files\\WindowsApps\\Microsoft.Windows.Photos_2018.18091.17210.0_x64__8wekyb3d8bbwe\\Microsoft.Photos.exe-ServerName:App.AppXzst44mncqdg84v7sv6p7yznqwssy6f7f.mcavia parent processsvchost.exe(8)d4c97ed46046893141652e2ec0056a698f6445109949d7fcabbce331146889ee12563599116157778a22600d2a163d8112aed84562d06d7235b37895b68de56687895743'
-      );
-    });
-
-    test('it renders an endgame process termination_event', () => {
-      const actionName = 'termination_event';
-      const text = i18n.TERMINATED_PROCESS;
-      const endgameTerminationEvent = {
-        ...mockEndgameTerminationEvent,
-      };
-
-      const endgameProcessTerminationEventRowRenderer = createEndgameProcessRowRenderer({
-        actionName,
-        text,
-      });
-
-      const wrapper = mount(
-        <TestProviders>
-          {endgameProcessTerminationEventRowRenderer.isInstance(endgameTerminationEvent) &&
-            endgameProcessTerminationEventRowRenderer.renderRow({
-              browserFields: mockBrowserFields,
-              data: endgameTerminationEvent,
-              timelineId: 'test',
-            })}
-        </TestProviders>
-      );
-
-      expect(wrapper.text()).toEqual(
-        'Arun\\Anvi-Acer@HD-obe-8bf77f54terminated processRuntimeBroker.exe(442384)with exit code087976f3430cc99bc939e0694247c0759961a49832b87218f4313d6fc0bc3a776797255e72d5ed5c058d4785950eba7abaa057653bd4401441a21bf1abce6404f4231db4d'
-      );
-    });
-
-    test('it does NOT render the event if the action name does not match', () => {
-      const actionName = 'does_not_match';
-      const text = i18n.PROCESS_STARTED;
-      const endgameCreationEvent = {
-        ...mockEndgameCreationEvent,
-      };
-
-      const endgameProcessCreationEventRowRenderer = createEndgameProcessRowRenderer({
-        actionName,
-        text,
-      });
-
-      const wrapper = mount(
-        <TestProviders>
-          {endgameProcessCreationEventRowRenderer.isInstance(endgameCreationEvent) &&
-            endgameProcessCreationEventRowRenderer.renderRow({
-              browserFields: mockBrowserFields,
-              data: endgameCreationEvent,
-              timelineId: 'test',
-            })}
-        </TestProviders>
-      );
-
-      expect(wrapper.text()).toEqual('');
-    });
-
-    test('it does NOT render the event when the event category is NOT process', () => {
-      const actionName = 'creation_event';
-      const text = i18n.PROCESS_STARTED;
-      const endgameCreationEvent = {
-        ...mockEndgameCreationEvent,
-        event: {
-          ...mockEndgameCreationEvent.event,
-          category: ['something_else'],
-        },
-      };
-
-      const endgameProcessCreationEventRowRenderer = createEndgameProcessRowRenderer({
-        actionName,
-        text,
-      });
-
-      const wrapper = mount(
-        <TestProviders>
-          {endgameProcessCreationEventRowRenderer.isInstance(endgameCreationEvent) &&
-            endgameProcessCreationEventRowRenderer.renderRow({
-              browserFields: mockBrowserFields,
-              data: endgameCreationEvent,
-              timelineId: 'test',
-            })}
-        </TestProviders>
-      );
-
-      expect(wrapper.text()).toEqual('');
-    });
-
-    test('it does NOT render the event when both the action name and event category do NOT match', () => {
-      const actionName = 'does_not_match';
-      const text = i18n.PROCESS_STARTED;
-      const endgameCreationEvent = {
-        ...mockEndgameCreationEvent,
-        event: {
-          ...mockEndgameCreationEvent.event,
-          category: ['something_else'],
-        },
-      };
-
-      const endgameProcessCreationEventRowRenderer = createEndgameProcessRowRenderer({
-        actionName,
-        text,
-      });
-
-      const wrapper = mount(
-        <TestProviders>
-          {endgameProcessCreationEventRowRenderer.isInstance(endgameCreationEvent) &&
-            endgameProcessCreationEventRowRenderer.renderRow({
-              browserFields: mockBrowserFields,
-              data: endgameCreationEvent,
-              timelineId: 'test',
-            })}
-        </TestProviders>
-      );
-
-      expect(wrapper.text()).toEqual('');
-    });
-  });
-
-  describe('#createFimRowRenderer', () => {
-    test('it renders an endgame file_create_event', () => {
-      const actionName = 'file_create_event';
-      const text = i18n.CREATED_FILE;
-      const endgameFileCreateEvent = {
-        ...mockEndgameFileCreateEvent,
-      };
-
-      const endgameFileCreateEventRowRenderer = createFimRowRenderer({
-        actionName,
-        text,
-      });
-
-      const wrapper = mount(
-        <TestProviders>
-          {endgameFileCreateEventRowRenderer.isInstance(endgameFileCreateEvent) &&
-            endgameFileCreateEventRowRenderer.renderRow({
-              browserFields: mockBrowserFields,
-              data: endgameFileCreateEvent,
-              timelineId: 'test',
-            })}
-        </TestProviders>
-      );
-
-      expect(wrapper.text()).toEqual(
-        'Arun\\Anvi-Acer@HD-obe-8bf77f54created a fileinC:\\Users\\Arun\\AppData\\Local\\Google\\Chrome\\User Data\\Default\\63d78c21-e593-4484-b7a9-db33cd522ddc.tmpviachrome.exe(11620)'
-      );
-    });
-
-    test('it renders an endgame file_delete_event', () => {
-      const actionName = 'file_delete_event';
-      const text = i18n.DELETED_FILE;
-      const endgameFileDeleteEvent = {
-        ...mockEndgameFileDeleteEvent,
-      };
-
-      const endgameFileDeleteEventRowRenderer = createFimRowRenderer({
-        actionName,
-        text,
-      });
-
-      const wrapper = mount(
-        <TestProviders>
-          {endgameFileDeleteEventRowRenderer.isInstance(endgameFileDeleteEvent) &&
-            endgameFileDeleteEventRowRenderer.renderRow({
-              browserFields: mockBrowserFields,
-              data: endgameFileDeleteEvent,
-              timelineId: 'test',
-            })}
-        </TestProviders>
-      );
-
-      expect(wrapper.text()).toEqual(
-        'SYSTEM\\NT AUTHORITY@HD-v1s-d2118419deleted a filetmp000002f6inC:\\Windows\\TEMP\\tmp00000404\\tmp000002f6viaAmSvc.exe(1084)'
-      );
-    });
-
-    test('it renders a FIM (non-endgame) file created event', () => {
-      const actionName = 'created';
-      const text = i18n.CREATED_FILE;
-      const fimFileCreatedEvent = {
-        ...mockFimFileCreatedEvent,
-      };
-
-      const fileCreatedEventRowRenderer = createFimRowRenderer({
-        actionName,
-        text,
-      });
-
-      const wrapper = mount(
-        <TestProviders>
-          {fileCreatedEventRowRenderer.isInstance(fimFileCreatedEvent) &&
-            fileCreatedEventRowRenderer.renderRow({
-              browserFields: mockBrowserFields,
-              data: fimFileCreatedEvent,
-              timelineId: 'test',
-            })}
-        </TestProviders>
-      );
-
-      expect(wrapper.text()).toEqual('foohostcreated a filein/etc/subgidviaan unknown process');
-    });
-
-    test('it renders a FIM (non-endgame) file deleted event', () => {
-      const actionName = 'deleted';
-      const text = i18n.DELETED_FILE;
-      const fimFileDeletedEvent = {
-        ...mockFimFileDeletedEvent,
-      };
-
-      const fileDeletedEventRowRenderer = createFimRowRenderer({
-        actionName,
-        text,
-      });
-
-      const wrapper = mount(
-        <TestProviders>
-          {fileDeletedEventRowRenderer.isInstance(fimFileDeletedEvent) &&
-            fileDeletedEventRowRenderer.renderRow({
-              browserFields: mockBrowserFields,
-              data: fimFileDeletedEvent,
-              timelineId: 'test',
-            })}
-        </TestProviders>
-      );
-
-      expect(wrapper.text()).toEqual(
-        'foohostdeleted a filein/etc/gshadow.lockviaan unknown process'
-      );
-    });
-
-    test('it does NOT render an event if the action name does not match', () => {
-      const actionName = 'does_not_match';
-      const text = i18n.CREATED_FILE;
-      const endgameFileCreateEvent = {
-        ...mockEndgameFileCreateEvent,
-      };
-
-      const endgameFileCreateEventRowRenderer = createFimRowRenderer({
-        actionName,
-        text,
-      });
-
-      const wrapper = mount(
-        <TestProviders>
-          {endgameFileCreateEventRowRenderer.isInstance(endgameFileCreateEvent) &&
-            endgameFileCreateEventRowRenderer.renderRow({
-              browserFields: mockBrowserFields,
-              data: endgameFileCreateEvent,
-              timelineId: 'test',
-            })}
-        </TestProviders>
-      );
-
-      expect(wrapper.text()).toEqual('');
-    });
-
-    test('it does NOT render an Endgame file_create_event when category is NOT file', () => {
-      const actionName = 'file_create_event';
-      const text = i18n.CREATED_FILE;
-      const endgameFileCreateEvent = {
-        ...mockEndgameFileCreateEvent,
-        event: {
-          ...mockEndgameFileCreateEvent.event,
-          category: ['something_else'],
-        },
-      };
-
-      const endgameFileCreateEventRowRenderer = createFimRowRenderer({
-        actionName,
-        text,
-      });
-
-      const wrapper = mount(
-        <TestProviders>
-          {endgameFileCreateEventRowRenderer.isInstance(endgameFileCreateEvent) &&
-            endgameFileCreateEventRowRenderer.renderRow({
-              browserFields: mockBrowserFields,
-              data: endgameFileCreateEvent,
-              timelineId: 'test',
-            })}
-        </TestProviders>
-      );
-
-      expect(wrapper.text()).toEqual('');
-    });
-
-    test('it does NOT render a FIM (non-Endgame) file created event when the event dataset is NOT file', () => {
-      const actionName = 'created';
-      const text = i18n.CREATED_FILE;
-      const fimFileCreatedEvent = {
-        ...mockFimFileCreatedEvent,
-        event: {
-          ...mockEndgameFileCreateEvent.event,
-          dataset: ['something_else'],
-        },
-      };
-
-      const fileCreatedEventRowRenderer = createFimRowRenderer({
-        actionName,
-        text,
-      });
-
-      const wrapper = mount(
-        <TestProviders>
-          {fileCreatedEventRowRenderer.isInstance(fimFileCreatedEvent) &&
-            fileCreatedEventRowRenderer.renderRow({
-              browserFields: mockBrowserFields,
-              data: fimFileCreatedEvent,
-              timelineId: 'test',
-            })}
-        </TestProviders>
-      );
-
-      expect(wrapper.text()).toEqual('');
-    });
-  });
-
-  describe('#createSocketRowRenderer', () => {
-    test('it renders an Endgame ipv4_connection_accept_event', () => {
-      const actionName = 'ipv4_connection_accept_event';
-      const text = i18n.ACCEPTED_A_CONNECTION_VIA;
-      const ipv4ConnectionAcceptEvent = {
-        ...mockEndgameIpv4ConnectionAcceptEvent,
-      };
-
-      const endgameIpv4ConnectionAcceptEventRowRenderer = createSocketRowRenderer({
-        actionName,
-        text,
-      });
-
-      const wrapper = mount(
-        <TestProviders>
-          {endgameIpv4ConnectionAcceptEventRowRenderer.isInstance(ipv4ConnectionAcceptEvent) &&
-            endgameIpv4ConnectionAcceptEventRowRenderer.renderRow({
-              browserFields: mockBrowserFields,
-              data: ipv4ConnectionAcceptEvent,
-              timelineId: 'test',
-            })}
-        </TestProviders>
-      );
-
-      expect(wrapper.text()).toEqual(
-        'SYSTEM\\NT AUTHORITY@HD-gqf-0af7b4feaccepted a connection viaAmSvc.exe(1084)tcp1:network-community_idSource127.0.0.1:49306Destination127.0.0.1:49305'
-      );
-    });
-
-    test('it renders an Endgame ipv6_connection_accept_event', () => {
-      const actionName = 'ipv6_connection_accept_event';
-      const text = i18n.ACCEPTED_A_CONNECTION_VIA;
-      const ipv6ConnectionAcceptEvent = {
-        ...mockEndgameIpv6ConnectionAcceptEvent,
-      };
-
-      const endgameIpv6ConnectionAcceptEventRowRenderer = createSocketRowRenderer({
-        actionName,
-        text,
-      });
-
-      const wrapper = mount(
-        <TestProviders>
-          {endgameIpv6ConnectionAcceptEventRowRenderer.isInstance(ipv6ConnectionAcceptEvent) &&
-            endgameIpv6ConnectionAcceptEventRowRenderer.renderRow({
-              browserFields: mockBrowserFields,
-              data: ipv6ConnectionAcceptEvent,
-              timelineId: 'test',
-            })}
-        </TestProviders>
-      );
-
-      expect(wrapper.text()).toEqual(
-        'SYSTEM\\NT AUTHORITY@HD-55b-3ec87f66accepted a connection via(4)tcp1:network-community_idSource::1:51324Destination::1:5357'
-      );
-    });
-
-    test('it renders an Endgame ipv4_disconnect_received_event', () => {
-      const actionName = 'ipv4_disconnect_received_event';
-      const text = i18n.DISCONNECTED_VIA;
-      const ipv4DisconnectReceivedEvent = {
-        ...mockEndgameIpv4DisconnectReceivedEvent,
-      };
-
-      const endgameIpv4DisconnectReceivedEventRowRenderer = createSocketRowRenderer({
-        actionName,
-        text,
-      });
-
-      const wrapper = mount(
-        <TestProviders>
-          {endgameIpv4DisconnectReceivedEventRowRenderer.isInstance(ipv4DisconnectReceivedEvent) &&
-            endgameIpv4DisconnectReceivedEventRowRenderer.renderRow({
-              browserFields: mockBrowserFields,
-              data: ipv4DisconnectReceivedEvent,
-              timelineId: 'test',
-            })}
-        </TestProviders>
-      );
-
-      expect(wrapper.text()).toEqual(
-        'Arun\\Anvi-Acer@HD-obe-8bf77f54disconnected viachrome.exe(11620)8.1KBtcp1:LxYHJJv98b2O0fNccXu6HheXmwk=Source192.168.0.6:59356(25.78%)2.1KB(74.22%)6KBDestination10.156.162.53:443'
-      );
-    });
-
-    test('it renders an Endgame ipv6_disconnect_received_event', () => {
-      const actionName = 'ipv6_disconnect_received_event';
-      const text = i18n.DISCONNECTED_VIA;
-      const ipv6DisconnectReceivedEvent = {
-        ...mockEndgameIpv6DisconnectReceivedEvent,
-      };
-
-      const endgameIpv6DisconnectReceivedEventRowRenderer = createSocketRowRenderer({
-        actionName,
-        text,
-      });
-
-      const wrapper = mount(
-        <TestProviders>
-          {endgameIpv6DisconnectReceivedEventRowRenderer.isInstance(ipv6DisconnectReceivedEvent) &&
-            endgameIpv6DisconnectReceivedEventRowRenderer.renderRow({
-              browserFields: mockBrowserFields,
-              data: ipv6DisconnectReceivedEvent,
-              timelineId: 'test',
-            })}
-        </TestProviders>
-      );
-
-      expect(wrapper.text()).toEqual(
-        'SYSTEM\\NT AUTHORITY@HD-55b-3ec87f66disconnected via(4)7.9KBtcp1:ZylzQhsB1dcptA2t4DY8S6l9o8E=Source::1:51338(96.92%)7.7KB(3.08%)249BDestination::1:2869'
-      );
-    });
-
-    test('it renders a (non-Endgame) socket_opened event', () => {
-      const actionName = 'socket_opened';
-      const text = i18n.SOCKET_OPENED;
-      const socketOpenedEvent = {
-        ...mockSocketOpenedEvent,
-      };
-
-      const socketOpenedEventRowRenderer = createSocketRowRenderer({
-        actionName,
-        text,
-      });
-
-      const wrapper = mount(
-        <TestProviders>
-          {socketOpenedEventRowRenderer.isInstance(socketOpenedEvent) &&
-            socketOpenedEventRowRenderer.renderRow({
-              browserFields: mockBrowserFields,
-              data: socketOpenedEvent,
-              timelineId: 'test',
-            })}
-        </TestProviders>
-      );
-
-      expect(wrapper.text()).toEqual(
-        'root@foohostopened a socket withgoogle_accounts(2166)Outbound socket (10.4.20.1:59554 -> 10.1.2.3:80) Ooutboundtcp1:network-community_idSource10.4.20.1:59554Destination10.1.2.3:80'
-      );
-    });
-
-    test('it renders a (non-Endgame) socket_closed event', () => {
-      const actionName = 'socket_closed';
-      const text = i18n.SOCKET_CLOSED;
-      const socketClosedEvent = {
-        ...mockSocketClosedEvent,
-      };
-
-      const socketClosedEventRowRenderer = createSocketRowRenderer({
-        actionName,
-        text,
-      });
-
-      const wrapper = mount(
-        <TestProviders>
-          {socketClosedEventRowRenderer.isInstance(socketClosedEvent) &&
-            socketClosedEventRowRenderer.renderRow({
-              browserFields: mockBrowserFields,
-              data: socketClosedEvent,
-              timelineId: 'test',
-            })}
-        </TestProviders>
-      );
-
-      expect(wrapper.text()).toEqual(
-        'root@foohostclosed a socket withgoogle_accounts(2166)Outbound socket (10.4.20.1:59508 -> 10.1.2.3:80) Coutboundtcp1:network-community_idSource10.4.20.1:59508Destination10.1.2.3:80'
-      );
-    });
-
-    test('it does NOT render an event if the action name does not match', () => {
-      const actionName = 'does_not_match';
-      const text = i18n.ACCEPTED_A_CONNECTION_VIA;
-      const ipv4ConnectionAcceptEvent = {
-        ...mockEndgameIpv4ConnectionAcceptEvent,
-      };
-
-      const endgameIpv4ConnectionAcceptEventRowRenderer = createSocketRowRenderer({
-        actionName,
-        text,
-      });
-
-      const wrapper = mount(
-        <TestProviders>
-          {endgameIpv4ConnectionAcceptEventRowRenderer.isInstance(ipv4ConnectionAcceptEvent) &&
-            endgameIpv4ConnectionAcceptEventRowRenderer.renderRow({
-              browserFields: mockBrowserFields,
-              data: ipv4ConnectionAcceptEvent,
-              timelineId: 'test',
-            })}
-        </TestProviders>
-      );
-
-      expect(wrapper.text()).toEqual('');
-    });
-  });
-
-  describe('#createSecurityEventRowRenderer', () => {
-    test('it renders an Endgame user_logon event', () => {
-      const actionName = 'user_logon';
-      const userLogonEvent = {
-        ...mockEndgameUserLogon,
-      };
-
-      const userLogonEventRowRenderer = createSecurityEventRowRenderer({ actionName });
-
-      const wrapper = mount(
-        <TestProviders>
-          {userLogonEventRowRenderer.isInstance(userLogonEvent) &&
-            userLogonEventRowRenderer.renderRow({
-              browserFields: mockBrowserFields,
-              data: userLogonEvent,
-              timelineId: 'test',
-            })}
-        </TestProviders>
-      );
-
-      expect(wrapper.text()).toEqual(
-        'SYSTEM\\NT AUTHORITY@HD-v1s-d2118419successfully logged inusing logon type5 - Service(target logon ID0x3e7)viaC:\\Windows\\System32\\services.exe(432)as requested by subjectWIN-Q3DOP1UKA81$(subject logon ID0x3e7)4624'
-      );
-    });
-
-    test('it renders an Endgame admin_logon event', () => {
-      const actionName = 'admin_logon';
-      const adminLogonEvent = {
-        ...mockEndgameAdminLogon,
-      };
-
-      const adminLogonEventRowRenderer = createSecurityEventRowRenderer({ actionName });
-
-      const wrapper = mount(
-        <TestProviders>
-          {adminLogonEventRowRenderer.isInstance(adminLogonEvent) &&
-            adminLogonEventRowRenderer.renderRow({
-              browserFields: mockBrowserFields,
-              data: adminLogonEvent,
-              timelineId: 'test',
-            })}
-        </TestProviders>
-      );
-
-      expect(wrapper.text()).toEqual(
-        'With special privileges,SYSTEM\\NT AUTHORITY@HD-obe-8bf77f54successfully logged inviaC:\\Windows\\System32\\lsass.exe(964)as requested by subjectSYSTEM\\NT AUTHORITY4672'
-      );
-    });
-
-    test('it renders an Endgame explicit_user_logon event', () => {
-      const actionName = 'explicit_user_logon';
-      const explicitUserLogonEvent = {
-        ...mockEndgameExplicitUserLogon,
-      };
-
-      const explicitUserLogonEventRowRenderer = createSecurityEventRowRenderer({ actionName });
-
-      const wrapper = mount(
-        <TestProviders>
-          {explicitUserLogonEventRowRenderer.isInstance(explicitUserLogonEvent) &&
-            explicitUserLogonEventRowRenderer.renderRow({
-              browserFields: mockBrowserFields,
-              data: explicitUserLogonEvent,
-              timelineId: 'test',
-            })}
-        </TestProviders>
-      );
-
-      expect(wrapper.text()).toEqual(
-        'A login was attempted using explicit credentialsArun\\Anvi-AcertoHD-55b-3ec87f66viaC:\\Windows\\System32\\svchost.exe(1736)as requested by subjectANVI-ACER$\\WORKGROUP(subject logon ID0x3e7)4648'
-      );
-    });
-
-    test('it renders an Endgame user_logoff event', () => {
-      const actionName = 'user_logoff';
-      const userLogoffEvent = {
-        ...mockEndgameUserLogoff,
-      };
-
-      const userLogoffEventRowRenderer = createSecurityEventRowRenderer({ actionName });
-
-      const wrapper = mount(
-        <TestProviders>
-          {userLogoffEventRowRenderer.isInstance(userLogoffEvent) &&
-            userLogoffEventRowRenderer.renderRow({
-              browserFields: mockBrowserFields,
-              data: userLogoffEvent,
-              timelineId: 'test',
-            })}
-        </TestProviders>
-      );
-
-      expect(wrapper.text()).toEqual(
-        'Arun\\Anvi-Acer@HD-55b-3ec87f66logged offusing logon type2 - Interactive(target logon ID0x16db41e)viaC:\\Windows\\System32\\lsass.exe(964)4634'
-      );
-    });
-
-    test('it does NOT render an event if the action name does not match', () => {
-      const actionName = 'does_not_match';
-      const userLogonEvent = {
-        ...mockEndgameUserLogon,
-      };
-
-      const userLogonEventRowRenderer = createSecurityEventRowRenderer({ actionName });
-
-      const wrapper = mount(
-        <TestProviders>
-          {userLogonEventRowRenderer.isInstance(userLogonEvent) &&
-            userLogonEventRowRenderer.renderRow({
-              browserFields: mockBrowserFields,
-              data: userLogonEvent,
-              timelineId: 'test',
-            })}
-        </TestProviders>
-      );
-
-      expect(wrapper.text()).toEqual('');
-    });
-  });
-
-  describe('#createDnsRowRenderer', () => {
-    test('it renders an Endgame DNS request_event', () => {
-      const requestEvent = {
-        ...mockEndgameDnsRequest,
-      };
-
-      const dnsRowRenderer = createDnsRowRenderer();
-
-      const wrapper = mount(
-        <TestProviders>
-          {dnsRowRenderer.isInstance(requestEvent) &&
-            dnsRowRenderer.renderRow({
-              browserFields: mockBrowserFields,
-              data: requestEvent,
-              timelineId: 'test',
-            })}
-        </TestProviders>
-      );
-
-      expect(wrapper.text()).toEqual(
-        'SYSTEM\\NT AUTHORITY@HD-obe-8bf77f54asked forupdate.googleapis.comwith question typeA, which resolved to10.100.197.67viaGoogleUpdate.exe(443192)3008dns'
-      );
-    });
-
-    test('it renders a non-Endgame DNS event', () => {
-      const dnsEvent = {
-        ...mockDnsEvent,
-      };
-
-      const dnsRowRenderer = createDnsRowRenderer();
-
-      const wrapper = mount(
-        <TestProviders>
-          {dnsRowRenderer.isInstance(dnsEvent) &&
-            dnsRowRenderer.renderRow({
-              browserFields: mockBrowserFields,
-              data: dnsEvent,
-              timelineId: 'test',
-            })}
-        </TestProviders>
-      );
-
-      expect(wrapper.text()).toEqual(
-        'iot.example.comasked forlookup.example.comwith question typeA, which resolved to10.1.2.3(response code:NOERROR)viaan unknown process6.937500msOct 8, 2019 @ 10:05:23.241Oct 8, 2019 @ 10:05:23.248outbounddns177Budp1:network-community_idSource10.9.9.9:58732(22.60%)40B(77.40%)137BDestination10.1.1.1:53OceaniaAustralia🇦🇺AU'
-      );
-    });
-
-    test('it does NOT render an event if dns.question.type is not provided', () => {
-      const requestEvent = {
-        ...mockEndgameDnsRequest,
-        dns: {
-          ...mockDnsEvent.dns,
-          question: {
-            name: ['lookup.example.com'],
-          },
-        },
-      };
-
-      const dnsRowRenderer = createDnsRowRenderer();
-
-      const wrapper = mount(
-        <TestProviders>
-          {dnsRowRenderer.isInstance(requestEvent) &&
-            dnsRowRenderer.renderRow({
-              browserFields: mockBrowserFields,
-              data: requestEvent,
-              timelineId: 'test',
-            })}
-        </TestProviders>
-      );
-
-      expect(wrapper.text()).toEqual('');
-    });
-
-    test('it does NOT render an event if dns.question.name is not provided', () => {
-      const requestEvent = {
-        ...mockEndgameDnsRequest,
-        dns: {
-          ...mockDnsEvent.dns,
-          question: {
-            type: ['A'],
-          },
-        },
-      };
-
-      const dnsRowRenderer = createDnsRowRenderer();
-
-      const wrapper = mount(
-        <TestProviders>
-          {dnsRowRenderer.isInstance(requestEvent) &&
-            dnsRowRenderer.renderRow({
-              browserFields: mockBrowserFields,
-              data: requestEvent,
-              timelineId: 'test',
-            })}
-        </TestProviders>
-      );
-
-      expect(wrapper.text()).toEqual('');
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/timeline/body/sort/index.ts b/x-pack/plugins/siem/public/components/timeline/body/sort/index.ts
deleted file mode 100644
index 4a55ba8e1e8eea..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/body/sort/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * 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 { Direction } from '../../../../graphql/types';
-import { ColumnId } from '../column_id';
-
-/** Specifies a column's sort direction */
-export type SortDirection = 'none' | Direction;
-
-/** Specifies which column the timeline is sorted on */
-export interface Sort {
-  columnId: ColumnId;
-  sortDirection: SortDirection;
-}
diff --git a/x-pack/plugins/siem/public/components/timeline/data_providers/index.tsx b/x-pack/plugins/siem/public/components/timeline/data_providers/index.tsx
deleted file mode 100644
index caead394db051b..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/data_providers/index.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-/*
- * 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 { rgba } from 'polished';
-import React from 'react';
-import styled from 'styled-components';
-
-import { BrowserFields } from '../../../containers/source';
-import { DroppableWrapper } from '../../drag_and_drop/droppable_wrapper';
-import {
-  droppableTimelineProvidersPrefix,
-  IS_DRAGGING_CLASS_NAME,
-} from '../../drag_and_drop/helpers';
-import {
-  OnDataProviderEdited,
-  OnDataProviderRemoved,
-  OnToggleDataProviderEnabled,
-  OnToggleDataProviderExcluded,
-} from '../events';
-import { TimelineContext } from '../timeline_context';
-
-import { DataProvider } from './data_provider';
-import { Empty } from './empty';
-import { Providers } from './providers';
-
-interface Props {
-  browserFields: BrowserFields;
-  id: string;
-  dataProviders: DataProvider[];
-  onDataProviderEdited: OnDataProviderEdited;
-  onDataProviderRemoved: OnDataProviderRemoved;
-  onToggleDataProviderEnabled: OnToggleDataProviderEnabled;
-  onToggleDataProviderExcluded: OnToggleDataProviderExcluded;
-  show: boolean;
-}
-
-const DropTargetDataProvidersContainer = styled.div`
-  padding: 2px 0 4px 0;
-
-  .${IS_DRAGGING_CLASS_NAME} & .drop-target-data-providers {
-    background: ${({ theme }) => rgba(theme.eui.euiColorSuccess, 0.1)};
-    border: 0.2rem dashed ${({ theme }) => theme.eui.euiColorSuccess};
-
-    & .euiTextColor--subdued {
-      color: ${({ theme }) => theme.eui.euiColorSuccess};
-    }
-
-    & .euiFormHelpText {
-      color: ${({ theme }) => theme.eui.euiColorSuccess};
-    }
-  }
-`;
-
-const DropTargetDataProviders = styled.div`
-  position: relative;
-  border: 0.2rem dashed ${props => props.theme.eui.euiColorMediumShade};
-  border-radius: 5px;
-  margin: 5px 0 5px 0;
-  min-height: 100px;
-  overflow-y: auto;
-  background-color: ${props => props.theme.eui.euiFormBackgroundColor};
-`;
-
-DropTargetDataProviders.displayName = 'DropTargetDataProviders';
-
-const getDroppableId = (id: string): string => `${droppableTimelineProvidersPrefix}${id}`;
-
-/**
- * Renders the data providers section of the timeline.
- *
- * The data providers section is a drop target where users
- * can drag-and drop new data providers into the timeline.
- *
- * It renders an interactive card representation of the
- * data providers. It also provides uniform
- * UI controls for the following actions:
- * 1) removing a data provider
- * 2) temporarily disabling a data provider
- * 3) applying boolean negation to the data provider
- *
- * Given an empty collection of DataProvider[], it prompts
- * the user to drop anything with a facet count into
- * the data pro section.
- */
-export const DataProviders = React.memo<Props>(
-  ({
-    browserFields,
-    id,
-    dataProviders,
-    onDataProviderEdited,
-    onDataProviderRemoved,
-    onToggleDataProviderEnabled,
-    onToggleDataProviderExcluded,
-    show,
-  }) => {
-    return (
-      <DropTargetDataProvidersContainer className="drop-target-data-providers-container">
-        <DropTargetDataProviders
-          className="drop-target-data-providers"
-          data-test-subj="dataProviders"
-        >
-          <TimelineContext.Consumer>
-            {({ isLoading }) => (
-              <>
-                {dataProviders != null && dataProviders.length ? (
-                  <Providers
-                    browserFields={browserFields}
-                    id={id}
-                    dataProviders={dataProviders}
-                    onDataProviderEdited={onDataProviderEdited}
-                    onDataProviderRemoved={onDataProviderRemoved}
-                    onToggleDataProviderEnabled={onToggleDataProviderEnabled}
-                    onToggleDataProviderExcluded={onToggleDataProviderExcluded}
-                  />
-                ) : (
-                  <DroppableWrapper
-                    isDropDisabled={!show || isLoading}
-                    droppableId={getDroppableId(id)}
-                  >
-                    <Empty />
-                  </DroppableWrapper>
-                )}
-              </>
-            )}
-          </TimelineContext.Consumer>
-        </DropTargetDataProviders>
-      </DropTargetDataProvidersContainer>
-    );
-  }
-);
-
-DataProviders.displayName = 'DataProviders';
diff --git a/x-pack/plugins/siem/public/components/timeline/expandable_event/index.tsx b/x-pack/plugins/siem/public/components/timeline/expandable_event/index.tsx
deleted file mode 100644
index 218d4db9901cbf..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/expandable_event/index.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-/*
- * 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 styled from 'styled-components';
-
-import { BrowserFields } from '../../../containers/source';
-import { ColumnHeaderOptions } from '../../../store/timeline/model';
-import { DetailItem } from '../../../graphql/types';
-import { StatefulEventDetails } from '../../event_details/stateful_event_details';
-import { LazyAccordion } from '../../lazy_accordion';
-import { OnUpdateColumns } from '../events';
-
-const ExpandableDetails = styled.div<{ hideExpandButton: boolean }>`
-  ${({ hideExpandButton }) =>
-    hideExpandButton
-      ? `
-  .euiAccordion__button {
-    display: none;
-  }
-  `
-      : ''};
-`;
-
-ExpandableDetails.displayName = 'ExpandableDetails';
-
-interface Props {
-  browserFields: BrowserFields;
-  columnHeaders: ColumnHeaderOptions[];
-  id: string;
-  event: DetailItem[];
-  forceExpand?: boolean;
-  hideExpandButton?: boolean;
-  onUpdateColumns: OnUpdateColumns;
-  timelineId: string;
-  toggleColumn: (column: ColumnHeaderOptions) => void;
-}
-
-export const ExpandableEvent = React.memo<Props>(
-  ({
-    browserFields,
-    columnHeaders,
-    event,
-    forceExpand = false,
-    id,
-    timelineId,
-    toggleColumn,
-    onUpdateColumns,
-  }) => (
-    <ExpandableDetails hideExpandButton={true}>
-      <LazyAccordion
-        id={`timeline-${timelineId}-row-${id}`}
-        renderExpandedContent={() => (
-          <StatefulEventDetails
-            browserFields={browserFields}
-            columnHeaders={columnHeaders}
-            data={event}
-            id={id}
-            onUpdateColumns={onUpdateColumns}
-            timelineId={timelineId}
-            toggleColumn={toggleColumn}
-          />
-        )}
-        forceExpand={forceExpand}
-        paddingSize="none"
-      />
-    </ExpandableDetails>
-  )
-);
-
-ExpandableEvent.displayName = 'ExpandableEvent';
diff --git a/x-pack/plugins/siem/public/components/timeline/footer/index.test.tsx b/x-pack/plugins/siem/public/components/timeline/footer/index.test.tsx
deleted file mode 100644
index d54a4cee83e527..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/footer/index.test.tsx
+++ /dev/null
@@ -1,287 +0,0 @@
-/*
- * 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 { mount, shallow } from 'enzyme';
-import { getOr } from 'lodash/fp';
-import React from 'react';
-
-import { TestProviders } from '../../../mock/test_providers';
-
-import { FooterComponent, PagingControlComponent } from './index';
-import { mockData } from './mock';
-
-describe('Footer Timeline Component', () => {
-  const loadMore = jest.fn();
-  const onChangeItemsPerPage = jest.fn();
-  const getUpdatedAt = () => 1546878704036;
-
-  describe('rendering', () => {
-    test('it renders the default timeline footer', () => {
-      const wrapper = shallow(
-        <FooterComponent
-          serverSideEventCount={mockData.Events.totalCount}
-          hasNextPage={getOr(false, 'hasNextPage', mockData.Events.pageInfo)!}
-          height={100}
-          isLive={false}
-          isLoading={false}
-          itemsCount={mockData.Events.edges.length}
-          itemsPerPage={2}
-          itemsPerPageOptions={[1, 5, 10, 20]}
-          onChangeItemsPerPage={onChangeItemsPerPage}
-          onLoadMore={loadMore}
-          nextCursor={getOr(null, 'endCursor.value', mockData.Events.pageInfo)!}
-          tieBreaker={getOr(null, 'endCursor.tiebreaker', mockData.Events.pageInfo)}
-          getUpdatedAt={getUpdatedAt}
-        />
-      );
-
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    test('it renders the loading panel at the beginning ', () => {
-      const wrapper = mount(
-        <FooterComponent
-          serverSideEventCount={mockData.Events.totalCount}
-          hasNextPage={false}
-          height={100}
-          isLive={false}
-          isLoading={true}
-          itemsCount={mockData.Events.edges.length}
-          itemsPerPage={2}
-          itemsPerPageOptions={[1, 5, 10, 20]}
-          onChangeItemsPerPage={onChangeItemsPerPage}
-          onLoadMore={loadMore}
-          nextCursor={getOr(null, 'endCursor.value', mockData.Events.pageInfo)!}
-          tieBreaker={getOr(null, 'endCursor.tiebreaker', mockData.Events.pageInfo)}
-          getUpdatedAt={getUpdatedAt}
-        />
-      );
-
-      expect(wrapper.find('[data-test-subj="LoadingPanelTimeline"]').exists()).toBeTruthy();
-    });
-
-    test('it renders the loadMore button if need to fetch more', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <FooterComponent
-            serverSideEventCount={mockData.Events.totalCount}
-            hasNextPage={getOr(false, 'hasNextPage', mockData.Events.pageInfo)!}
-            height={100}
-            isLive={false}
-            isLoading={false}
-            itemsCount={mockData.Events.edges.length}
-            itemsPerPage={2}
-            itemsPerPageOptions={[1, 5, 10, 20]}
-            onChangeItemsPerPage={onChangeItemsPerPage}
-            onLoadMore={loadMore}
-            nextCursor={getOr(null, 'endCursor.value', mockData.Events.pageInfo)!}
-            tieBreaker={getOr(null, 'endCursor.tiebreaker', mockData.Events.pageInfo)}
-            getUpdatedAt={getUpdatedAt}
-          />
-        </TestProviders>
-      );
-
-      expect(wrapper.find('[data-test-subj="TimelineMoreButton"]').exists()).toBeTruthy();
-    });
-
-    test('it renders the Loading... in the more load button when fetching new data', () => {
-      const wrapper = shallow(
-        <PagingControlComponent
-          hasNextPage={getOr(false, 'hasNextPage', mockData.Events.pageInfo)!}
-          loadMore={loadMore}
-          isLoading={true}
-        />
-      );
-
-      const loadButton = wrapper
-        .find('[data-test-subj="TimelineMoreButton"]')
-        .dive()
-        .text();
-      expect(wrapper.find('[data-test-subj="LoadingPanelTimeline"]').exists()).toBeFalsy();
-      expect(loadButton).toContain('Loading...');
-    });
-
-    test('it renders the Load More in the more load button when fetching new data', () => {
-      const wrapper = shallow(
-        <PagingControlComponent
-          hasNextPage={getOr(false, 'hasNextPage', mockData.Events.pageInfo)!}
-          loadMore={loadMore}
-          isLoading={false}
-        />
-      );
-
-      const loadButton = wrapper
-        .find('[data-test-subj="TimelineMoreButton"]')
-        .dive()
-        .text();
-      expect(loadButton).toContain('Load more');
-    });
-
-    test('it does NOT render the loadMore button because there is nothing else to fetch', () => {
-      const wrapper = mount(
-        <FooterComponent
-          serverSideEventCount={mockData.Events.totalCount}
-          hasNextPage={false}
-          height={100}
-          isLive={false}
-          isLoading={true}
-          itemsCount={mockData.Events.edges.length}
-          itemsPerPage={2}
-          itemsPerPageOptions={[1, 5, 10, 20]}
-          onChangeItemsPerPage={onChangeItemsPerPage}
-          onLoadMore={loadMore}
-          nextCursor={getOr(null, 'endCursor.value', mockData.Events.pageInfo)!}
-          tieBreaker={getOr(null, 'endCursor.tiebreaker', mockData.Events.pageInfo)}
-          getUpdatedAt={getUpdatedAt}
-        />
-      );
-
-      expect(wrapper.find('[data-test-subj="TimelineMoreButton"]').exists()).toBeFalsy();
-    });
-
-    test('it render popover to select new itemsPerPage in timeline', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <FooterComponent
-            serverSideEventCount={mockData.Events.totalCount}
-            hasNextPage={getOr(false, 'hasNextPage', mockData.Events.pageInfo)!}
-            height={100}
-            isLive={false}
-            isLoading={false}
-            itemsCount={mockData.Events.edges.length}
-            itemsPerPage={1}
-            itemsPerPageOptions={[1, 5, 10, 20]}
-            onChangeItemsPerPage={onChangeItemsPerPage}
-            onLoadMore={loadMore}
-            nextCursor={getOr(null, 'endCursor.value', mockData.Events.pageInfo)!}
-            tieBreaker={getOr(null, 'endCursor.tiebreaker', mockData.Events.pageInfo)}
-            getUpdatedAt={getUpdatedAt}
-          />
-        </TestProviders>
-      );
-
-      wrapper
-        .find('[data-test-subj="timelineSizeRowPopover"] button')
-        .first()
-        .simulate('click');
-      expect(wrapper.find('[data-test-subj="timelinePickSizeRow"]').exists()).toBeTruthy();
-    });
-  });
-
-  describe('Events', () => {
-    test('should call loadmore when clicking on the button load more', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <FooterComponent
-            serverSideEventCount={mockData.Events.totalCount}
-            hasNextPage={getOr(false, 'hasNextPage', mockData.Events.pageInfo)!}
-            height={100}
-            isLive={false}
-            isLoading={false}
-            itemsCount={mockData.Events.edges.length}
-            itemsPerPage={2}
-            itemsPerPageOptions={[1, 5, 10, 20]}
-            onChangeItemsPerPage={onChangeItemsPerPage}
-            onLoadMore={loadMore}
-            nextCursor={getOr(null, 'endCursor.value', mockData.Events.pageInfo)!}
-            tieBreaker={getOr(null, 'endCursor.tiebreaker', mockData.Events.pageInfo)}
-            getUpdatedAt={getUpdatedAt}
-          />
-        </TestProviders>
-      );
-
-      wrapper
-        .find('[data-test-subj="TimelineMoreButton"]')
-        .first()
-        .simulate('click');
-
-      expect(loadMore).toBeCalled();
-    });
-
-    test('Should call onChangeItemsPerPage when you pick a new limit', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <FooterComponent
-            serverSideEventCount={mockData.Events.totalCount}
-            hasNextPage={getOr(false, 'hasNextPage', mockData.Events.pageInfo)!}
-            height={100}
-            isLive={false}
-            isLoading={false}
-            itemsCount={mockData.Events.edges.length}
-            itemsPerPage={1}
-            itemsPerPageOptions={[1, 5, 10, 20]}
-            onChangeItemsPerPage={onChangeItemsPerPage}
-            onLoadMore={loadMore}
-            nextCursor={getOr(null, 'endCursor.value', mockData.Events.pageInfo)!}
-            tieBreaker={getOr(null, 'endCursor.tiebreaker', mockData.Events.pageInfo)}
-            getUpdatedAt={getUpdatedAt}
-          />
-        </TestProviders>
-      );
-
-      wrapper
-        .find('[data-test-subj="timelineSizeRowPopover"] button')
-        .first()
-        .simulate('click');
-      wrapper.update();
-      wrapper
-        .find('[data-test-subj="timelinePickSizeRow"] button')
-        .first()
-        .simulate('click');
-      expect(onChangeItemsPerPage).toBeCalled();
-    });
-
-    test('it does render the auto-refresh message instead of load more button when stream live is on', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <FooterComponent
-            serverSideEventCount={mockData.Events.totalCount}
-            hasNextPage={getOr(false, 'hasNextPage', mockData.Events.pageInfo)!}
-            height={100}
-            isLive={true}
-            isLoading={false}
-            itemsCount={mockData.Events.edges.length}
-            itemsPerPage={2}
-            itemsPerPageOptions={[1, 5, 10, 20]}
-            onChangeItemsPerPage={onChangeItemsPerPage}
-            onLoadMore={loadMore}
-            nextCursor={getOr(null, 'endCursor.value', mockData.Events.pageInfo)!}
-            tieBreaker={getOr(null, 'endCursor.tiebreaker', mockData.Events.pageInfo)}
-            getUpdatedAt={getUpdatedAt}
-          />
-        </TestProviders>
-      );
-
-      expect(wrapper.find('[data-test-subj="paging-control"]').exists()).toBeFalsy();
-      expect(wrapper.find('[data-test-subj="is-live-on-message"]').exists()).toBeTruthy();
-    });
-
-    test('it does render the load more button when stream live is off', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <FooterComponent
-            serverSideEventCount={mockData.Events.totalCount}
-            hasNextPage={getOr(false, 'hasNextPage', mockData.Events.pageInfo)!}
-            height={100}
-            isLive={false}
-            isLoading={false}
-            itemsCount={mockData.Events.edges.length}
-            itemsPerPage={2}
-            itemsPerPageOptions={[1, 5, 10, 20]}
-            onChangeItemsPerPage={onChangeItemsPerPage}
-            onLoadMore={loadMore}
-            nextCursor={getOr(null, 'endCursor.value', mockData.Events.pageInfo)!}
-            tieBreaker={getOr(null, 'endCursor.tiebreaker', mockData.Events.pageInfo)}
-            getUpdatedAt={getUpdatedAt}
-          />
-        </TestProviders>
-      );
-
-      expect(wrapper.find('[data-test-subj="paging-control"]').exists()).toBeTruthy();
-      expect(wrapper.find('[data-test-subj="is-live-on-message"]').exists()).toBeFalsy();
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/timeline/footer/index.tsx b/x-pack/plugins/siem/public/components/timeline/footer/index.tsx
deleted file mode 100644
index 7a025e96e57f29..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/footer/index.tsx
+++ /dev/null
@@ -1,368 +0,0 @@
-/*
- * 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 {
-  EuiBadge,
-  EuiButton,
-  EuiButtonEmpty,
-  EuiContextMenuItem,
-  EuiContextMenuPanel,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiIconTip,
-  EuiPopover,
-  EuiText,
-  EuiToolTip,
-  EuiPopoverProps,
-} from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n/react';
-import React, { FC, useCallback, useEffect, useState, useMemo } from 'react';
-import styled from 'styled-components';
-
-import { LoadingPanel } from '../../loading';
-import { OnChangeItemsPerPage, OnLoadMore } from '../events';
-
-import { LastUpdatedAt } from './last_updated';
-import * as i18n from './translations';
-import { useTimelineTypeContext } from '../timeline_context';
-import { useEventDetailsWidthContext } from '../../events_viewer/event_details_width_context';
-
-export const isCompactFooter = (width: number): boolean => width < 600;
-
-interface FixedWidthLastUpdatedContainerProps {
-  updatedAt: number;
-}
-
-const FixedWidthLastUpdatedContainer = React.memo<FixedWidthLastUpdatedContainerProps>(
-  ({ updatedAt }) => {
-    const width = useEventDetailsWidthContext();
-    const compact = useMemo(() => isCompactFooter(width), [width]);
-
-    return (
-      <FixedWidthLastUpdated data-test-subj="fixed-width-last-updated" compact={compact}>
-        <LastUpdatedAt updatedAt={updatedAt} compact={compact} />
-      </FixedWidthLastUpdated>
-    );
-  }
-);
-
-FixedWidthLastUpdatedContainer.displayName = 'FixedWidthLastUpdatedContainer';
-
-const FixedWidthLastUpdated = styled.div<{ compact?: boolean }>`
-  width: ${({ compact }) => (!compact ? 200 : 25)}px;
-  overflow: hidden;
-  text-align: end;
-`;
-
-FixedWidthLastUpdated.displayName = 'FixedWidthLastUpdated';
-
-interface HeightProp {
-  height: number;
-}
-
-const FooterContainer = styled(EuiFlexGroup).attrs<HeightProp>(({ height }) => ({
-  style: {
-    height: `${height}px`,
-  },
-}))<HeightProp>`
-  flex: 0;
-`;
-
-FooterContainer.displayName = 'FooterContainer';
-
-const FooterFlexGroup = styled(EuiFlexGroup)`
-  height: 35px;
-  width: 100%;
-`;
-
-FooterFlexGroup.displayName = 'FooterFlexGroup';
-
-const LoadingPanelContainer = styled.div`
-  padding-top: 3px;
-`;
-
-LoadingPanelContainer.displayName = 'LoadingPanelContainer';
-
-const PopoverRowItems = styled((EuiPopover as unknown) as FC)<
-  EuiPopoverProps & {
-    className?: string;
-    id?: string;
-  }
->`
-  .euiButtonEmpty__content {
-    padding: 0px 0px;
-  }
-`;
-
-PopoverRowItems.displayName = 'PopoverRowItems';
-
-export const ServerSideEventCount = styled.div`
-  margin: 0 5px 0 5px;
-`;
-
-ServerSideEventCount.displayName = 'ServerSideEventCount';
-
-/** The height of the footer, exported for use in height calculations */
-export const footerHeight = 40; // px
-
-/** Displays the server-side count of events */
-export const EventsCountComponent = ({
-  closePopover,
-  isOpen,
-  items,
-  itemsCount,
-  onClick,
-  serverSideEventCount,
-}: {
-  closePopover: () => void;
-  isOpen: boolean;
-  items: React.ReactElement[];
-  itemsCount: number;
-  onClick: () => void;
-  serverSideEventCount: number;
-}) => {
-  const timelineTypeContext = useTimelineTypeContext();
-  return (
-    <h5>
-      <PopoverRowItems
-        className="footer-popover"
-        id="customizablePagination"
-        data-test-subj="timelineSizeRowPopover"
-        button={
-          <>
-            <EuiBadge data-test-subj="local-events-count" color="hollow">
-              {itemsCount}
-              <EuiButtonEmpty
-                size="s"
-                color="text"
-                iconType="arrowDown"
-                iconSide="right"
-                onClick={onClick}
-              />
-            </EuiBadge>
-            {` ${i18n.OF} `}
-          </>
-        }
-        isOpen={isOpen}
-        closePopover={closePopover}
-        panelPaddingSize="none"
-      >
-        <EuiContextMenuPanel items={items} data-test-subj="timelinePickSizeRow" />
-      </PopoverRowItems>
-      <EuiToolTip
-        content={`${serverSideEventCount} ${timelineTypeContext.footerText ??
-          i18n.TOTAL_COUNT_OF_EVENTS}`}
-      >
-        <ServerSideEventCount>
-          <EuiBadge color="hollow" data-test-subj="server-side-event-count">
-            {serverSideEventCount}
-          </EuiBadge>{' '}
-          {timelineTypeContext.documentType ?? i18n.EVENTS}
-        </ServerSideEventCount>
-      </EuiToolTip>
-    </h5>
-  );
-};
-
-EventsCountComponent.displayName = 'EventsCountComponent';
-
-export const EventsCount = React.memo(EventsCountComponent);
-
-EventsCount.displayName = 'EventsCount';
-
-export const PagingControlComponent = ({
-  hasNextPage,
-  isLoading,
-  loadMore,
-}: {
-  hasNextPage: boolean;
-  isLoading: boolean;
-  loadMore: () => void;
-}) => (
-  <>
-    {hasNextPage && (
-      <EuiButton
-        data-test-subj="TimelineMoreButton"
-        isLoading={isLoading}
-        onClick={loadMore}
-        size="s"
-      >
-        {isLoading ? `${i18n.LOADING}...` : i18n.LOAD_MORE}
-      </EuiButton>
-    )}
-  </>
-);
-
-PagingControlComponent.displayName = 'PagingControlComponent';
-
-export const PagingControl = React.memo(PagingControlComponent);
-
-PagingControl.displayName = 'PagingControl';
-
-interface FooterProps {
-  getUpdatedAt: () => number;
-  hasNextPage: boolean;
-  height: number;
-  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 = ({
-  getUpdatedAt,
-  hasNextPage,
-  height,
-  isLive,
-  isLoading,
-  itemsCount,
-  itemsPerPage,
-  itemsPerPageOptions,
-  nextCursor,
-  onChangeItemsPerPage,
-  onLoadMore,
-  serverSideEventCount,
-  tieBreaker,
-}: FooterProps) => {
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-  const [paginationLoading, setPaginationLoading] = useState(false);
-  const [updatedAt, setUpdatedAt] = useState<number | null>(null);
-  const timelineTypeContext = useTimelineTypeContext();
-
-  const loadMore = useCallback(() => {
-    setPaginationLoading(true);
-    onLoadMore(nextCursor, tieBreaker);
-  }, [nextCursor, tieBreaker, onLoadMore, setPaginationLoading]);
-
-  const onButtonClick = useCallback(() => setIsPopoverOpen(!isPopoverOpen), [
-    isPopoverOpen,
-    setIsPopoverOpen,
-  ]);
-  const closePopover = useCallback(() => setIsPopoverOpen(false), [setIsPopoverOpen]);
-
-  useEffect(() => {
-    if (paginationLoading && !isLoading) {
-      setPaginationLoading(false);
-      setUpdatedAt(getUpdatedAt());
-    }
-
-    if (updatedAt === null || !isLoading) {
-      setUpdatedAt(getUpdatedAt());
-    }
-  }, [isLoading]);
-
-  if (isLoading && !paginationLoading) {
-    return (
-      <LoadingPanelContainer>
-        <LoadingPanel
-          data-test-subj="LoadingPanelTimeline"
-          height="35px"
-          showBorder={false}
-          text={`${timelineTypeContext.loadingText ?? i18n.LOADING_TIMELINE_DATA}...`}
-          width="100%"
-        />
-      </LoadingPanelContainer>
-    );
-  }
-
-  const rowItems =
-    itemsPerPageOptions &&
-    itemsPerPageOptions.map(item => (
-      <EuiContextMenuItem
-        key={item}
-        icon={itemsPerPage === item ? 'check' : 'empty'}
-        onClick={() => {
-          closePopover();
-          onChangeItemsPerPage(item);
-        }}
-      >
-        {`${item} ${i18n.ROWS}`}
-      </EuiContextMenuItem>
-    ));
-
-  return (
-    <FooterContainer
-      data-test-subj="timeline-footer"
-      direction="column"
-      gutterSize="none"
-      height={height}
-      justifyContent="spaceAround"
-    >
-      <FooterFlexGroup
-        alignItems="center"
-        data-test-subj="footer-flex-group"
-        direction="row"
-        gutterSize="none"
-        justifyContent="spaceBetween"
-      >
-        <EuiFlexItem data-test-subj="event-count-container" grow={false}>
-          <EuiFlexGroup
-            alignItems="center"
-            data-test-subj="events-count"
-            direction="row"
-            gutterSize="none"
-          >
-            <EventsCount
-              closePopover={closePopover}
-              isOpen={isPopoverOpen}
-              items={rowItems}
-              itemsCount={itemsCount}
-              onClick={onButtonClick}
-              serverSideEventCount={serverSideEventCount}
-            />
-          </EuiFlexGroup>
-        </EuiFlexItem>
-
-        <EuiFlexItem data-test-subj="paging-control-container" grow={false}>
-          {isLive ? (
-            <EuiText size="s" data-test-subj="is-live-on-message">
-              <b>
-                {i18n.AUTO_REFRESH_ACTIVE}{' '}
-                <EuiIconTip
-                  color="subdued"
-                  content={
-                    <FormattedMessage
-                      id="xpack.siem.footer.autoRefreshActiveTooltip"
-                      defaultMessage="While auto-refresh is enabled, timeline will show you the latest {numberOfItems} events that match your query."
-                      values={{
-                        numberOfItems: itemsCount,
-                      }}
-                    />
-                  }
-                  type="iInCircle"
-                />
-              </b>
-            </EuiText>
-          ) : (
-            <PagingControl
-              data-test-subj="paging-control"
-              hasNextPage={hasNextPage}
-              isLoading={isLoading}
-              loadMore={loadMore}
-            />
-          )}
-        </EuiFlexItem>
-
-        <EuiFlexItem data-test-subj="last-updated-container" grow={false}>
-          <FixedWidthLastUpdatedContainer updatedAt={updatedAt || getUpdatedAt()} />
-        </EuiFlexItem>
-      </FooterFlexGroup>
-    </FooterContainer>
-  );
-};
-
-FooterComponent.displayName = 'FooterComponent';
-
-export const Footer = React.memo(FooterComponent);
-
-Footer.displayName = 'Footer';
diff --git a/x-pack/plugins/siem/public/components/timeline/footer/mock.ts b/x-pack/plugins/siem/public/components/timeline/footer/mock.ts
deleted file mode 100644
index f6aaf9475f2c4e..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/footer/mock.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-/*
- * 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 { EventsTimelineData } from '../../../graphql/types';
-
-export const mockData: { Events: EventsTimelineData } = {
-  Events: {
-    totalCount: 15546,
-    pageInfo: {
-      hasNextPage: true,
-      endCursor: {
-        value: '1546878704036',
-        tiebreaker: '10624',
-      },
-    },
-    edges: [
-      {
-        cursor: {
-          value: '1546878704036',
-          tiebreaker: '10656',
-        },
-        node: {
-          _id: 'Fo8nKWgBiyhPd5Zo3cib',
-          timestamp: '2019-01-07T16:31:44.036Z',
-          _index: 'auditbeat-7.0.0-2019.01.07',
-          destination: {
-            ip: ['24.168.54.169'],
-            port: [62123],
-          },
-          event: {
-            category: null,
-            id: null,
-            module: ['system'],
-            severity: null,
-            type: null,
-          },
-          geo: null,
-          host: {
-            name: ['siem-general'],
-            ip: null,
-          },
-          source: {
-            ip: ['10.142.0.6'],
-            port: [9200],
-          },
-          suricata: null,
-        },
-      },
-      {
-        cursor: {
-          value: '1546878704036',
-          tiebreaker: '10624',
-        },
-        node: {
-          _id: 'F48nKWgBiyhPd5Zo3cib',
-          timestamp: '2019-01-07T16:31:44.036Z',
-          _index: 'auditbeat-7.0.0-2019.01.07',
-          destination: {
-            ip: ['24.168.54.169'],
-            port: [62145],
-          },
-          event: {
-            category: null,
-            id: null,
-            module: ['system'],
-            severity: null,
-            type: null,
-          },
-          geo: null,
-          host: {
-            name: ['siem-general'],
-            ip: null,
-          },
-          source: {
-            ip: ['10.142.0.6'],
-            port: [9200],
-          },
-          suricata: null,
-        },
-      },
-    ],
-  },
-};
diff --git a/x-pack/plugins/siem/public/components/timeline/header/index.test.tsx b/x-pack/plugins/siem/public/components/timeline/header/index.test.tsx
deleted file mode 100644
index 7da76df4977684..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/header/index.test.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-/*
- * 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 { shallow } from 'enzyme';
-import React from 'react';
-
-import { mockIndexPattern } from '../../../mock';
-import { createKibanaCoreStartMock } from '../../../mock/kibana_core';
-import { TestProviders } from '../../../mock/test_providers';
-import { FilterManager } from '../../../../../../../src/plugins/data/public';
-import { mockDataProviders } from '../data_providers/mock/mock_data_providers';
-import { useMountAppended } from '../../../utils/use_mount_appended';
-
-import { TimelineHeader } from '.';
-
-const mockUiSettingsForFilterManager = createKibanaCoreStartMock().uiSettings;
-
-jest.mock('../../../lib/kibana');
-
-describe('Header', () => {
-  const indexPattern = mockIndexPattern;
-  const mount = useMountAppended();
-
-  describe('rendering', () => {
-    test('renders correctly against snapshot', () => {
-      const wrapper = shallow(
-        <TimelineHeader
-          browserFields={{}}
-          dataProviders={mockDataProviders}
-          filterManager={new FilterManager(mockUiSettingsForFilterManager)}
-          id="foo"
-          indexPattern={indexPattern}
-          onDataProviderEdited={jest.fn()}
-          onDataProviderRemoved={jest.fn()}
-          onToggleDataProviderEnabled={jest.fn()}
-          onToggleDataProviderExcluded={jest.fn()}
-          show={true}
-          showCallOutUnauthorizedMsg={false}
-        />
-      );
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    test('it renders the data providers', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <TimelineHeader
-            browserFields={{}}
-            dataProviders={mockDataProviders}
-            filterManager={new FilterManager(mockUiSettingsForFilterManager)}
-            id="foo"
-            indexPattern={indexPattern}
-            onDataProviderEdited={jest.fn()}
-            onDataProviderRemoved={jest.fn()}
-            onToggleDataProviderEnabled={jest.fn()}
-            onToggleDataProviderExcluded={jest.fn()}
-            show={true}
-            showCallOutUnauthorizedMsg={false}
-          />
-        </TestProviders>
-      );
-
-      expect(wrapper.find('[data-test-subj="dataProviders"]').exists()).toEqual(true);
-    });
-
-    test('it renders the unauthorized call out providers', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <TimelineHeader
-            browserFields={{}}
-            dataProviders={mockDataProviders}
-            filterManager={new FilterManager(mockUiSettingsForFilterManager)}
-            id="foo"
-            indexPattern={indexPattern}
-            onDataProviderEdited={jest.fn()}
-            onDataProviderRemoved={jest.fn()}
-            onToggleDataProviderEnabled={jest.fn()}
-            onToggleDataProviderExcluded={jest.fn()}
-            show={true}
-            showCallOutUnauthorizedMsg={true}
-          />
-        </TestProviders>
-      );
-
-      expect(wrapper.find('[data-test-subj="timelineCallOutUnauthorized"]').exists()).toEqual(true);
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/timeline/header/index.tsx b/x-pack/plugins/siem/public/components/timeline/header/index.tsx
deleted file mode 100644
index 58e6b6e8372495..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/header/index.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-/*
- * 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 { EuiCallOut } from '@elastic/eui';
-import React from 'react';
-import { FilterManager, IIndexPattern } from 'src/plugins/data/public';
-import deepEqual from 'fast-deep-equal';
-
-import { DataProviders } from '../data_providers';
-import { DataProvider } from '../data_providers/data_provider';
-import {
-  OnDataProviderEdited,
-  OnDataProviderRemoved,
-  OnToggleDataProviderEnabled,
-  OnToggleDataProviderExcluded,
-} from '../events';
-import { StatefulSearchOrFilter } from '../search_or_filter';
-import { BrowserFields } from '../../../containers/source';
-
-import * as i18n from './translations';
-
-interface Props {
-  browserFields: BrowserFields;
-  dataProviders: DataProvider[];
-  filterManager: FilterManager;
-  id: string;
-  indexPattern: IIndexPattern;
-  onDataProviderEdited: OnDataProviderEdited;
-  onDataProviderRemoved: OnDataProviderRemoved;
-  onToggleDataProviderEnabled: OnToggleDataProviderEnabled;
-  onToggleDataProviderExcluded: OnToggleDataProviderExcluded;
-  show: boolean;
-  showCallOutUnauthorizedMsg: boolean;
-}
-
-const TimelineHeaderComponent: React.FC<Props> = ({
-  browserFields,
-  id,
-  indexPattern,
-  dataProviders,
-  filterManager,
-  onDataProviderEdited,
-  onDataProviderRemoved,
-  onToggleDataProviderEnabled,
-  onToggleDataProviderExcluded,
-  show,
-  showCallOutUnauthorizedMsg,
-}) => (
-  <>
-    {showCallOutUnauthorizedMsg && (
-      <EuiCallOut
-        data-test-subj="timelineCallOutUnauthorized"
-        title={i18n.CALL_OUT_UNAUTHORIZED_MSG}
-        color="warning"
-        iconType="alert"
-        size="s"
-      />
-    )}
-    {show && (
-      <DataProviders
-        browserFields={browserFields}
-        id={id}
-        dataProviders={dataProviders}
-        onDataProviderEdited={onDataProviderEdited}
-        onDataProviderRemoved={onDataProviderRemoved}
-        onToggleDataProviderEnabled={onToggleDataProviderEnabled}
-        onToggleDataProviderExcluded={onToggleDataProviderExcluded}
-        show={show}
-      />
-    )}
-
-    <StatefulSearchOrFilter
-      browserFields={browserFields}
-      filterManager={filterManager}
-      indexPattern={indexPattern}
-      timelineId={id}
-    />
-  </>
-);
-
-export const TimelineHeader = React.memo(
-  TimelineHeaderComponent,
-  (prevProps, nextProps) =>
-    deepEqual(prevProps.browserFields, nextProps.browserFields) &&
-    prevProps.id === nextProps.id &&
-    deepEqual(prevProps.indexPattern, nextProps.indexPattern) &&
-    deepEqual(prevProps.dataProviders, nextProps.dataProviders) &&
-    prevProps.filterManager === nextProps.filterManager &&
-    prevProps.onDataProviderEdited === nextProps.onDataProviderEdited &&
-    prevProps.onDataProviderRemoved === nextProps.onDataProviderRemoved &&
-    prevProps.onToggleDataProviderEnabled === nextProps.onToggleDataProviderEnabled &&
-    prevProps.onToggleDataProviderExcluded === nextProps.onToggleDataProviderExcluded &&
-    prevProps.show === nextProps.show &&
-    prevProps.showCallOutUnauthorizedMsg === nextProps.showCallOutUnauthorizedMsg
-);
diff --git a/x-pack/plugins/siem/public/components/timeline/helpers.test.tsx b/x-pack/plugins/siem/public/components/timeline/helpers.test.tsx
deleted file mode 100644
index fc5a8ae924f828..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/helpers.test.tsx
+++ /dev/null
@@ -1,398 +0,0 @@
-/*
- * 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 { cloneDeep } from 'lodash/fp';
-import { mockIndexPattern } from '../../mock';
-
-import { mockDataProviders } from './data_providers/mock/mock_data_providers';
-import { buildGlobalQuery, combineQueries } from './helpers';
-import { mockBrowserFields } from '../../containers/source/mock';
-import { EsQueryConfig, Filter, esFilters } from '../../../../../../src/plugins/data/public';
-
-const cleanUpKqlQuery = (str: string) => str.replace(/\n/g, '').replace(/\s\s+/g, ' ');
-const startDate = new Date('2018-03-23T18:49:23.132Z').valueOf();
-const endDate = new Date('2018-03-24T03:33:52.253Z').valueOf();
-
-describe('Build KQL Query', () => {
-  test('Build KQL query with one data provider', () => {
-    const dataProviders = mockDataProviders.slice(0, 1);
-    const kqlQuery = buildGlobalQuery(dataProviders, mockBrowserFields);
-    expect(cleanUpKqlQuery(kqlQuery)).toEqual('name : "Provider 1"');
-  });
-
-  test('Build KQL query with one data provider as timestamp (string input)', () => {
-    const dataProviders = cloneDeep(mockDataProviders.slice(0, 1));
-    dataProviders[0].queryMatch.field = '@timestamp';
-    dataProviders[0].queryMatch.value = '2018-03-23T23:36:23.232Z';
-    const kqlQuery = buildGlobalQuery(dataProviders, mockBrowserFields);
-    expect(cleanUpKqlQuery(kqlQuery)).toEqual('@timestamp: 1521848183232');
-  });
-
-  test('Buld KQL query with one data provider as timestamp (numeric input)', () => {
-    const dataProviders = cloneDeep(mockDataProviders.slice(0, 1));
-    dataProviders[0].queryMatch.field = '@timestamp';
-    dataProviders[0].queryMatch.value = 1521848183232;
-    const kqlQuery = buildGlobalQuery(dataProviders, mockBrowserFields);
-    expect(cleanUpKqlQuery(kqlQuery)).toEqual('@timestamp: 1521848183232');
-  });
-
-  test('Build KQL query with one data provider as date type (string input)', () => {
-    const dataProviders = cloneDeep(mockDataProviders.slice(0, 1));
-    dataProviders[0].queryMatch.field = 'event.end';
-    dataProviders[0].queryMatch.value = '2018-03-23T23:36:23.232Z';
-    const kqlQuery = buildGlobalQuery(dataProviders, mockBrowserFields);
-    expect(cleanUpKqlQuery(kqlQuery)).toEqual('event.end: 1521848183232');
-  });
-
-  test('Buld KQL query with one data provider as date type (numeric input)', () => {
-    const dataProviders = cloneDeep(mockDataProviders.slice(0, 1));
-    dataProviders[0].queryMatch.field = 'event.end';
-    dataProviders[0].queryMatch.value = 1521848183232;
-    const kqlQuery = buildGlobalQuery(dataProviders, mockBrowserFields);
-    expect(cleanUpKqlQuery(kqlQuery)).toEqual('event.end: 1521848183232');
-  });
-
-  test('Build KQL query with two data provider', () => {
-    const dataProviders = mockDataProviders.slice(0, 2);
-    const kqlQuery = buildGlobalQuery(dataProviders, mockBrowserFields);
-    expect(cleanUpKqlQuery(kqlQuery)).toEqual('(name : "Provider 1") or (name : "Provider 2" )');
-  });
-
-  test('Build KQL query with one data provider and one and', () => {
-    const dataProviders = cloneDeep(mockDataProviders.slice(0, 1));
-    dataProviders[0].and = mockDataProviders.slice(1, 2);
-    const kqlQuery = buildGlobalQuery(dataProviders, mockBrowserFields);
-    expect(cleanUpKqlQuery(kqlQuery)).toEqual('name : "Provider 1" and name : "Provider 2"');
-  });
-
-  test('Build KQL query with one data provider and one and as timestamp (string input)', () => {
-    const dataProviders = cloneDeep(mockDataProviders.slice(0, 1));
-    dataProviders[0].and = cloneDeep(mockDataProviders.slice(1, 2));
-    dataProviders[0].and[0].queryMatch.field = '@timestamp';
-    dataProviders[0].and[0].queryMatch.value = '2018-03-23T23:36:23.232Z';
-    const kqlQuery = buildGlobalQuery(dataProviders, mockBrowserFields);
-    expect(cleanUpKqlQuery(kqlQuery)).toEqual('name : "Provider 1" and @timestamp: 1521848183232');
-  });
-
-  test('Build KQL query with one data provider and one and as timestamp (numeric input)', () => {
-    const dataProviders = cloneDeep(mockDataProviders.slice(0, 1));
-    dataProviders[0].and = cloneDeep(mockDataProviders.slice(1, 2));
-    dataProviders[0].and[0].queryMatch.field = '@timestamp';
-    dataProviders[0].and[0].queryMatch.value = 1521848183232;
-    const kqlQuery = buildGlobalQuery(dataProviders, mockBrowserFields);
-    expect(cleanUpKqlQuery(kqlQuery)).toEqual('name : "Provider 1" and @timestamp: 1521848183232');
-  });
-
-  test('Build KQL query with one data provider and one and as date type (string input)', () => {
-    const dataProviders = cloneDeep(mockDataProviders.slice(0, 1));
-    dataProviders[0].and = cloneDeep(mockDataProviders.slice(1, 2));
-    dataProviders[0].and[0].queryMatch.field = 'event.end';
-    dataProviders[0].and[0].queryMatch.value = '2018-03-23T23:36:23.232Z';
-    const kqlQuery = buildGlobalQuery(dataProviders, mockBrowserFields);
-    expect(cleanUpKqlQuery(kqlQuery)).toEqual('name : "Provider 1" and event.end: 1521848183232');
-  });
-
-  test('Build KQL query with one data provider and one and as date type (numeric input)', () => {
-    const dataProviders = cloneDeep(mockDataProviders.slice(0, 1));
-    dataProviders[0].and = cloneDeep(mockDataProviders.slice(1, 2));
-    dataProviders[0].and[0].queryMatch.field = 'event.end';
-    dataProviders[0].and[0].queryMatch.value = 1521848183232;
-    const kqlQuery = buildGlobalQuery(dataProviders, mockBrowserFields);
-    expect(cleanUpKqlQuery(kqlQuery)).toEqual('name : "Provider 1" and event.end: 1521848183232');
-  });
-
-  test('Build KQL query with two data provider and multiple and', () => {
-    const dataProviders = cloneDeep(mockDataProviders.slice(0, 2));
-    dataProviders[0].and = mockDataProviders.slice(2, 4);
-    dataProviders[1].and = mockDataProviders.slice(4, 5);
-    const kqlQuery = buildGlobalQuery(dataProviders, mockBrowserFields);
-    expect(cleanUpKqlQuery(kqlQuery)).toEqual(
-      '(name : "Provider 1" and name : "Provider 3" and name : "Provider 4") or (name : "Provider 2" and name : "Provider 5")'
-    );
-  });
-});
-
-describe('Combined Queries', () => {
-  const config: EsQueryConfig = {
-    allowLeadingWildcards: true,
-    queryStringOptions: {},
-    ignoreFilterIfFieldNotInIndex: true,
-    dateFormatTZ: 'America/New_York',
-  };
-  test('No Data Provider & No kqlQuery & and isEventViewer is false', () => {
-    expect(
-      combineQueries({
-        config,
-        dataProviders: [],
-        indexPattern: mockIndexPattern,
-        browserFields: mockBrowserFields,
-        filters: [],
-        kqlQuery: { query: '', language: 'kuery' },
-        kqlMode: 'search',
-        start: startDate,
-        end: endDate,
-      })
-    ).toBeNull();
-  });
-
-  test('No Data Provider & No kqlQuery & isEventViewer is true', () => {
-    const isEventViewer = true;
-    expect(
-      combineQueries({
-        config,
-        dataProviders: [],
-        indexPattern: mockIndexPattern,
-        browserFields: mockBrowserFields,
-        filters: [],
-        kqlQuery: { query: '', language: 'kuery' },
-        kqlMode: 'search',
-        start: startDate,
-        end: endDate,
-        isEventViewer,
-      })
-    ).toEqual({
-      filterQuery:
-        '{"bool":{"must":[],"filter":[{"bool":{"filter":[{"bool":{"should":[{"range":{"@timestamp":{"gte":1521830963132}}}],"minimum_should_match":1}},{"bool":{"should":[{"range":{"@timestamp":{"lte":1521862432253}}}],"minimum_should_match":1}}]}}],"should":[],"must_not":[]}}',
-    });
-  });
-
-  test('No Data Provider & No kqlQuery & with Filters', () => {
-    const isEventViewer = true;
-    expect(
-      combineQueries({
-        config,
-        dataProviders: [],
-        indexPattern: mockIndexPattern,
-        browserFields: mockBrowserFields,
-        filters: [
-          {
-            $state: { store: esFilters.FilterStateStore.APP_STATE },
-            meta: {
-              alias: null,
-              disabled: false,
-              key: 'event.category',
-              negate: false,
-              params: { query: 'file' },
-              type: 'phrase',
-            },
-            query: { match_phrase: { 'event.category': 'file' } },
-          },
-          {
-            $state: { store: esFilters.FilterStateStore.APP_STATE },
-            meta: {
-              alias: null,
-              disabled: false,
-              key: 'host.name',
-              negate: false,
-              type: 'exists',
-              value: 'exists',
-            },
-            exists: { field: 'host.name' },
-          } as Filter,
-        ],
-        kqlQuery: { query: '', language: 'kuery' },
-        kqlMode: 'search',
-        start: startDate,
-        end: endDate,
-        isEventViewer,
-      })
-    ).toEqual({
-      filterQuery:
-        '{"bool":{"must":[],"filter":[{"bool":{"filter":[{"bool":{"should":[{"range":{"@timestamp":{"gte":1521830963132}}}],"minimum_should_match":1}},{"bool":{"should":[{"range":{"@timestamp":{"lte":1521862432253}}}],"minimum_should_match":1}}]}},{"exists":{"field":"host.name"}}],"should":[],"must_not":[]}}',
-    });
-  });
-
-  test('Only Data Provider', () => {
-    const dataProviders = mockDataProviders.slice(0, 1);
-    const { filterQuery } = combineQueries({
-      config,
-      dataProviders,
-      indexPattern: mockIndexPattern,
-      browserFields: mockBrowserFields,
-      filters: [],
-      kqlQuery: { query: '', language: 'kuery' },
-      kqlMode: 'search',
-      start: startDate,
-      end: endDate,
-    })!;
-    expect(filterQuery).toEqual(
-      '{"bool":{"must":[],"filter":[{"bool":{"filter":[{"bool":{"should":[{"match_phrase":{"name":"Provider 1"}}],"minimum_should_match":1}},{"bool":{"filter":[{"bool":{"should":[{"range":{"@timestamp":{"gte":1521830963132}}}],"minimum_should_match":1}},{"bool":{"should":[{"range":{"@timestamp":{"lte":1521862432253}}}],"minimum_should_match":1}}]}}]}}],"should":[],"must_not":[]}}'
-    );
-  });
-
-  test('Only Data Provider with timestamp (string input)', () => {
-    const dataProviders = cloneDeep(mockDataProviders.slice(0, 1));
-    dataProviders[0].queryMatch.field = '@timestamp';
-    dataProviders[0].queryMatch.value = '2018-03-23T23:36:23.232Z';
-    const { filterQuery } = combineQueries({
-      config,
-      dataProviders,
-      indexPattern: mockIndexPattern,
-      browserFields: mockBrowserFields,
-      filters: [],
-      kqlQuery: { query: '', language: 'kuery' },
-      kqlMode: 'search',
-      start: startDate,
-      end: endDate,
-    })!;
-    expect(filterQuery).toEqual(
-      '{"bool":{"must":[],"filter":[{"bool":{"filter":[{"bool":{"should":[{"range":{"@timestamp":{"gte":1521848183232,"lte":1521848183232}}}],"minimum_should_match":1}},{"bool":{"filter":[{"bool":{"should":[{"range":{"@timestamp":{"gte":1521830963132}}}],"minimum_should_match":1}},{"bool":{"should":[{"range":{"@timestamp":{"lte":1521862432253}}}],"minimum_should_match":1}}]}}]}}],"should":[],"must_not":[]}}'
-    );
-  });
-
-  test('Only Data Provider with timestamp (numeric input)', () => {
-    const dataProviders = cloneDeep(mockDataProviders.slice(0, 1));
-    dataProviders[0].queryMatch.field = '@timestamp';
-    dataProviders[0].queryMatch.value = 1521848183232;
-    const { filterQuery } = combineQueries({
-      config,
-      dataProviders,
-      indexPattern: mockIndexPattern,
-      browserFields: mockBrowserFields,
-      filters: [],
-      kqlQuery: { query: '', language: 'kuery' },
-      kqlMode: 'search',
-      start: startDate,
-      end: endDate,
-    })!;
-    expect(filterQuery).toEqual(
-      '{"bool":{"must":[],"filter":[{"bool":{"filter":[{"bool":{"should":[{"range":{"@timestamp":{"gte":1521848183232,"lte":1521848183232}}}],"minimum_should_match":1}},{"bool":{"filter":[{"bool":{"should":[{"range":{"@timestamp":{"gte":1521830963132}}}],"minimum_should_match":1}},{"bool":{"should":[{"range":{"@timestamp":{"lte":1521862432253}}}],"minimum_should_match":1}}]}}]}}],"should":[],"must_not":[]}}'
-    );
-  });
-
-  test('Only Data Provider with a date type (string input)', () => {
-    const dataProviders = cloneDeep(mockDataProviders.slice(0, 1));
-    dataProviders[0].queryMatch.field = 'event.end';
-    dataProviders[0].queryMatch.value = '2018-03-23T23:36:23.232Z';
-    const { filterQuery } = combineQueries({
-      config,
-      dataProviders,
-      indexPattern: mockIndexPattern,
-      browserFields: mockBrowserFields,
-      filters: [],
-      kqlQuery: { query: '', language: 'kuery' },
-      kqlMode: 'search',
-      start: startDate,
-      end: endDate,
-    })!;
-    expect(filterQuery).toEqual(
-      '{"bool":{"must":[],"filter":[{"bool":{"filter":[{"bool":{"should":[{"match":{"event.end":1521848183232}}],"minimum_should_match":1}},{"bool":{"filter":[{"bool":{"should":[{"range":{"@timestamp":{"gte":1521830963132}}}],"minimum_should_match":1}},{"bool":{"should":[{"range":{"@timestamp":{"lte":1521862432253}}}],"minimum_should_match":1}}]}}]}}],"should":[],"must_not":[]}}'
-    );
-  });
-
-  test('Only Data Provider with date type (numeric input)', () => {
-    const dataProviders = cloneDeep(mockDataProviders.slice(0, 1));
-    dataProviders[0].queryMatch.field = 'event.end';
-    dataProviders[0].queryMatch.value = 1521848183232;
-    const { filterQuery } = combineQueries({
-      config,
-      dataProviders,
-      indexPattern: mockIndexPattern,
-      browserFields: mockBrowserFields,
-      filters: [],
-      kqlQuery: { query: '', language: 'kuery' },
-      kqlMode: 'search',
-      start: startDate,
-      end: endDate,
-    })!;
-    expect(filterQuery).toEqual(
-      '{"bool":{"must":[],"filter":[{"bool":{"filter":[{"bool":{"should":[{"match":{"event.end":1521848183232}}],"minimum_should_match":1}},{"bool":{"filter":[{"bool":{"should":[{"range":{"@timestamp":{"gte":1521830963132}}}],"minimum_should_match":1}},{"bool":{"should":[{"range":{"@timestamp":{"lte":1521862432253}}}],"minimum_should_match":1}}]}}]}}],"should":[],"must_not":[]}}'
-    );
-  });
-
-  test('Only KQL search/filter query', () => {
-    const { filterQuery } = combineQueries({
-      config,
-      dataProviders: [],
-      indexPattern: mockIndexPattern,
-      browserFields: mockBrowserFields,
-      filters: [],
-      kqlQuery: { query: 'host.name: "host-1"', language: 'kuery' },
-      kqlMode: 'search',
-      start: startDate,
-      end: endDate,
-    })!;
-    expect(filterQuery).toEqual(
-      '{"bool":{"must":[],"filter":[{"bool":{"filter":[{"bool":{"should":[{"match_phrase":{"host.name":"host-1"}}],"minimum_should_match":1}},{"bool":{"filter":[{"bool":{"should":[{"range":{"@timestamp":{"gte":1521830963132}}}],"minimum_should_match":1}},{"bool":{"should":[{"range":{"@timestamp":{"lte":1521862432253}}}],"minimum_should_match":1}}]}}]}}],"should":[],"must_not":[]}}'
-    );
-  });
-
-  test('Data Provider & KQL search query', () => {
-    const dataProviders = mockDataProviders.slice(0, 1);
-    const { filterQuery } = combineQueries({
-      config,
-      dataProviders,
-      indexPattern: mockIndexPattern,
-      browserFields: mockBrowserFields,
-      filters: [],
-      kqlQuery: { query: 'host.name: "host-1"', language: 'kuery' },
-      kqlMode: 'search',
-      start: startDate,
-      end: endDate,
-    })!;
-    expect(filterQuery).toEqual(
-      '{"bool":{"must":[],"filter":[{"bool":{"filter":[{"bool":{"should":[{"bool":{"should":[{"match_phrase":{"name":"Provider 1"}}],"minimum_should_match":1}},{"bool":{"should":[{"match_phrase":{"host.name":"host-1"}}],"minimum_should_match":1}}],"minimum_should_match":1}},{"bool":{"filter":[{"bool":{"should":[{"range":{"@timestamp":{"gte":1521830963132}}}],"minimum_should_match":1}},{"bool":{"should":[{"range":{"@timestamp":{"lte":1521862432253}}}],"minimum_should_match":1}}]}}]}}],"should":[],"must_not":[]}}'
-    );
-  });
-
-  test('Data Provider & KQL filter query', () => {
-    const dataProviders = mockDataProviders.slice(0, 1);
-    const { filterQuery } = combineQueries({
-      config,
-      dataProviders,
-      indexPattern: mockIndexPattern,
-      browserFields: mockBrowserFields,
-      filters: [],
-      kqlQuery: { query: 'host.name: "host-1"', language: 'kuery' },
-      kqlMode: 'filter',
-      start: startDate,
-      end: endDate,
-    })!;
-    expect(filterQuery).toEqual(
-      '{"bool":{"must":[],"filter":[{"bool":{"filter":[{"bool":{"filter":[{"bool":{"should":[{"match_phrase":{"name":"Provider 1"}}],"minimum_should_match":1}},{"bool":{"should":[{"match_phrase":{"host.name":"host-1"}}],"minimum_should_match":1}}]}},{"bool":{"filter":[{"bool":{"should":[{"range":{"@timestamp":{"gte":1521830963132}}}],"minimum_should_match":1}},{"bool":{"should":[{"range":{"@timestamp":{"lte":1521862432253}}}],"minimum_should_match":1}}]}}]}}],"should":[],"must_not":[]}}'
-    );
-  });
-
-  test('Data Provider & KQL search query multiple', () => {
-    const dataProviders = cloneDeep(mockDataProviders.slice(0, 2));
-    dataProviders[0].and = mockDataProviders.slice(2, 4);
-    dataProviders[1].and = mockDataProviders.slice(4, 5);
-    const { filterQuery } = combineQueries({
-      config,
-      dataProviders,
-      indexPattern: mockIndexPattern,
-      browserFields: mockBrowserFields,
-      filters: [],
-      kqlQuery: { query: 'host.name: "host-1"', language: 'kuery' },
-      kqlMode: 'search',
-      start: startDate,
-      end: endDate,
-    })!;
-    expect(filterQuery).toEqual(
-      '{"bool":{"must":[],"filter":[{"bool":{"filter":[{"bool":{"should":[{"bool":{"should":[{"bool":{"filter":[{"bool":{"should":[{"match_phrase":{"name":"Provider 1"}}],"minimum_should_match":1}},{"bool":{"filter":[{"bool":{"should":[{"match_phrase":{"name":"Provider 3"}}],"minimum_should_match":1}},{"bool":{"should":[{"match_phrase":{"name":"Provider 4"}}],"minimum_should_match":1}}]}}]}},{"bool":{"filter":[{"bool":{"should":[{"match_phrase":{"name":"Provider 2"}}],"minimum_should_match":1}},{"bool":{"should":[{"match_phrase":{"name":"Provider 5"}}],"minimum_should_match":1}}]}}],"minimum_should_match":1}},{"bool":{"should":[{"match_phrase":{"host.name":"host-1"}}],"minimum_should_match":1}}],"minimum_should_match":1}},{"bool":{"filter":[{"bool":{"should":[{"range":{"@timestamp":{"gte":1521830963132}}}],"minimum_should_match":1}},{"bool":{"should":[{"range":{"@timestamp":{"lte":1521862432253}}}],"minimum_should_match":1}}]}}]}}],"should":[],"must_not":[]}}'
-    );
-  });
-
-  test('Data Provider & KQL filter query multiple', () => {
-    const dataProviders = cloneDeep(mockDataProviders.slice(0, 2));
-    dataProviders[0].and = mockDataProviders.slice(2, 4);
-    dataProviders[1].and = mockDataProviders.slice(4, 5);
-    const { filterQuery } = combineQueries({
-      config,
-      dataProviders,
-      indexPattern: mockIndexPattern,
-      browserFields: mockBrowserFields,
-      filters: [],
-      kqlQuery: { query: 'host.name: "host-1"', language: 'kuery' },
-      kqlMode: 'filter',
-      start: startDate,
-      end: endDate,
-    })!;
-    expect(filterQuery).toEqual(
-      '{"bool":{"must":[],"filter":[{"bool":{"filter":[{"bool":{"filter":[{"bool":{"should":[{"bool":{"filter":[{"bool":{"should":[{"match_phrase":{"name":"Provider 1"}}],"minimum_should_match":1}},{"bool":{"filter":[{"bool":{"should":[{"match_phrase":{"name":"Provider 3"}}],"minimum_should_match":1}},{"bool":{"should":[{"match_phrase":{"name":"Provider 4"}}],"minimum_should_match":1}}]}}]}},{"bool":{"filter":[{"bool":{"should":[{"match_phrase":{"name":"Provider 2"}}],"minimum_should_match":1}},{"bool":{"should":[{"match_phrase":{"name":"Provider 5"}}],"minimum_should_match":1}}]}}],"minimum_should_match":1}},{"bool":{"should":[{"match_phrase":{"host.name":"host-1"}}],"minimum_should_match":1}}]}},{"bool":{"filter":[{"bool":{"should":[{"range":{"@timestamp":{"gte":1521830963132}}}],"minimum_should_match":1}},{"bool":{"should":[{"range":{"@timestamp":{"lte":1521862432253}}}],"minimum_should_match":1}}]}}]}}],"should":[],"must_not":[]}}'
-    );
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/timeline/helpers.tsx b/x-pack/plugins/siem/public/components/timeline/helpers.tsx
deleted file mode 100644
index 53ab7d81cadc26..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/helpers.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-/*
- * 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 { isEmpty, isNumber, get } from 'lodash/fp';
-import memoizeOne from 'memoize-one';
-
-import { escapeQueryValue, convertToBuildEsQuery } from '../../lib/keury';
-
-import { DataProvider, DataProvidersAnd, EXISTS_OPERATOR } from './data_providers/data_provider';
-import { BrowserFields } from '../../containers/source';
-import {
-  IIndexPattern,
-  Query,
-  EsQueryConfig,
-  Filter,
-} from '../../../../../../src/plugins/data/public';
-
-const convertDateFieldToQuery = (field: string, value: string | number) =>
-  `${field}: ${isNumber(value) ? value : new Date(value).valueOf()}`;
-
-const getBaseFields = memoizeOne((browserFields: BrowserFields): string[] => {
-  const baseFields = get('base', browserFields);
-  if (baseFields != null && baseFields.fields != null) {
-    return Object.keys(baseFields.fields);
-  }
-  return [];
-});
-
-const getBrowserFieldPath = (field: string, browserFields: BrowserFields) => {
-  const splitFields = field.split('.');
-  const baseFields = getBaseFields(browserFields);
-  if (baseFields.includes(field)) {
-    return ['base', 'fields', field];
-  }
-  return [splitFields[0], 'fields', field];
-};
-
-const checkIfFieldTypeIsDate = (field: string, browserFields: BrowserFields) => {
-  const pathBrowserField = getBrowserFieldPath(field, browserFields);
-  const browserField = get(pathBrowserField, browserFields);
-  if (browserField != null && browserField.type === 'date') {
-    return true;
-  }
-  return false;
-};
-
-const buildQueryMatch = (
-  dataProvider: DataProvider | DataProvidersAnd,
-  browserFields: BrowserFields
-) =>
-  `${dataProvider.excluded ? 'NOT ' : ''}${
-    dataProvider.queryMatch.operator !== EXISTS_OPERATOR
-      ? checkIfFieldTypeIsDate(dataProvider.queryMatch.field, browserFields)
-        ? convertDateFieldToQuery(dataProvider.queryMatch.field, dataProvider.queryMatch.value)
-        : `${dataProvider.queryMatch.field} : ${
-            isNumber(dataProvider.queryMatch.value)
-              ? dataProvider.queryMatch.value
-              : escapeQueryValue(dataProvider.queryMatch.value)
-          }`
-      : `${dataProvider.queryMatch.field} ${EXISTS_OPERATOR}`
-  }`.trim();
-
-const buildQueryForAndProvider = (
-  dataAndProviders: DataProvidersAnd[],
-  browserFields: BrowserFields
-) =>
-  dataAndProviders
-    .reduce((andQuery, andDataProvider) => {
-      const prepend = (q: string) => `${q !== '' ? `${q} and ` : ''}`;
-      return andDataProvider.enabled
-        ? `${prepend(andQuery)} ${buildQueryMatch(andDataProvider, browserFields)}`
-        : andQuery;
-    }, '')
-    .trim();
-
-export const buildGlobalQuery = (dataProviders: DataProvider[], browserFields: BrowserFields) =>
-  dataProviders
-    .reduce((query, dataProvider: DataProvider, i) => {
-      const prepend = (q: string) => `${q !== '' ? `(${q}) or ` : ''}`;
-      const openParen = i > 0 ? '(' : '';
-      const closeParen = i > 0 ? ')' : '';
-      return dataProvider.enabled
-        ? `${prepend(query)}${openParen}${buildQueryMatch(dataProvider, browserFields)}
-        ${
-          dataProvider.and.length > 0
-            ? ` and ${buildQueryForAndProvider(dataProvider.and, browserFields)}`
-            : ''
-        }${closeParen}`.trim()
-        : query;
-    }, '')
-    .trim();
-
-export const combineQueries = ({
-  config,
-  dataProviders,
-  indexPattern,
-  browserFields,
-  filters = [],
-  kqlQuery,
-  kqlMode,
-  start,
-  end,
-  isEventViewer,
-}: {
-  config: EsQueryConfig;
-  dataProviders: DataProvider[];
-  indexPattern: IIndexPattern;
-  browserFields: BrowserFields;
-  filters: Filter[];
-  kqlQuery: Query;
-  kqlMode: string;
-  start: number;
-  end: number;
-  isEventViewer?: boolean;
-}): { filterQuery: string } | null => {
-  const kuery: Query = { query: '', language: kqlQuery.language };
-  if (isEmpty(dataProviders) && isEmpty(kqlQuery.query) && isEmpty(filters) && !isEventViewer) {
-    return null;
-  } else if (isEmpty(dataProviders) && isEmpty(kqlQuery.query) && isEventViewer) {
-    kuery.query = `@timestamp >= ${start} and @timestamp <= ${end}`;
-    return {
-      filterQuery: convertToBuildEsQuery({ config, queries: [kuery], indexPattern, filters }),
-    };
-  } else if (isEmpty(dataProviders) && isEmpty(kqlQuery.query) && !isEmpty(filters)) {
-    kuery.query = `@timestamp >= ${start} and @timestamp <= ${end}`;
-    return {
-      filterQuery: convertToBuildEsQuery({ config, queries: [kuery], indexPattern, filters }),
-    };
-  } else if (isEmpty(dataProviders) && !isEmpty(kqlQuery.query)) {
-    kuery.query = `(${kqlQuery.query}) and @timestamp >= ${start} and @timestamp <= ${end}`;
-    return {
-      filterQuery: convertToBuildEsQuery({ config, queries: [kuery], indexPattern, filters }),
-    };
-  } else if (!isEmpty(dataProviders) && isEmpty(kqlQuery)) {
-    kuery.query = `(${buildGlobalQuery(
-      dataProviders,
-      browserFields
-    )}) and @timestamp >= ${start} and @timestamp <= ${end}`;
-    return {
-      filterQuery: convertToBuildEsQuery({ config, queries: [kuery], indexPattern, filters }),
-    };
-  }
-  const operatorKqlQuery = kqlMode === 'filter' ? 'and' : 'or';
-  const postpend = (q: string) => `${!isEmpty(q) ? ` ${operatorKqlQuery} (${q})` : ''}`;
-  kuery.query = `((${buildGlobalQuery(dataProviders, browserFields)})${postpend(
-    kqlQuery.query as string
-  )}) and @timestamp >= ${start} and @timestamp <= ${end}`;
-  return {
-    filterQuery: convertToBuildEsQuery({ config, queries: [kuery], indexPattern, filters }),
-  };
-};
-
-/**
- * The CSS class name of a "stateful event", which appears in both
- * the `Timeline` and the `Events Viewer` widget
- */
-export const STATEFUL_EVENT_CSS_CLASS_NAME = 'event-column-view';
diff --git a/x-pack/plugins/siem/public/components/timeline/index.tsx b/x-pack/plugins/siem/public/components/timeline/index.tsx
deleted file mode 100644
index bebc6f9b654c58..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/index.tsx
+++ /dev/null
@@ -1,277 +0,0 @@
-/*
- * 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, { useEffect, useCallback, useMemo } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
-import deepEqual from 'fast-deep-equal';
-
-import { WithSource } from '../../containers/source';
-import { useSignalIndex } from '../../containers/detection_engine/signals/use_signal_index';
-import { inputsModel, inputsSelectors, State, timelineSelectors } from '../../store';
-import { timelineActions } from '../../store/actions';
-import { ColumnHeaderOptions, TimelineModel } from '../../store/timeline/model';
-import { timelineDefaults } from '../../store/timeline/defaults';
-import { defaultHeaders } from './body/column_headers/default_headers';
-import {
-  OnChangeItemsPerPage,
-  OnDataProviderRemoved,
-  OnDataProviderEdited,
-  OnToggleDataProviderEnabled,
-  OnToggleDataProviderExcluded,
-} from './events';
-import { Timeline } from './timeline';
-
-export interface OwnProps {
-  id: string;
-  onClose: () => void;
-  usersViewing: string[];
-}
-
-type Props = OwnProps & PropsFromRedux;
-
-const StatefulTimelineComponent = React.memo<Props>(
-  ({
-    columns,
-    createTimeline,
-    dataProviders,
-    eventType,
-    end,
-    filters,
-    id,
-    isLive,
-    itemsPerPage,
-    itemsPerPageOptions,
-    kqlMode,
-    kqlQueryExpression,
-    onClose,
-    onDataProviderEdited,
-    removeColumn,
-    removeProvider,
-    show,
-    showCallOutUnauthorizedMsg,
-    sort,
-    start,
-    updateDataProviderEnabled,
-    updateDataProviderExcluded,
-    updateItemsPerPage,
-    upsertColumn,
-    usersViewing,
-  }) => {
-    const { loading, signalIndexExists, signalIndexName } = useSignalIndex();
-
-    const indexToAdd = useMemo<string[]>(() => {
-      if (
-        eventType &&
-        signalIndexExists &&
-        signalIndexName != null &&
-        ['signal', 'all'].includes(eventType)
-      ) {
-        return [signalIndexName];
-      }
-      return [];
-    }, [eventType, signalIndexExists, signalIndexName]);
-
-    const onDataProviderRemoved: OnDataProviderRemoved = useCallback(
-      (providerId: string, andProviderId?: string) =>
-        removeProvider!({ id, providerId, andProviderId }),
-      [id]
-    );
-
-    const onToggleDataProviderEnabled: OnToggleDataProviderEnabled = useCallback(
-      ({ providerId, enabled, andProviderId }) =>
-        updateDataProviderEnabled!({
-          id,
-          enabled,
-          providerId,
-          andProviderId,
-        }),
-      [id]
-    );
-
-    const onToggleDataProviderExcluded: OnToggleDataProviderExcluded = useCallback(
-      ({ providerId, excluded, andProviderId }) =>
-        updateDataProviderExcluded!({
-          id,
-          excluded,
-          providerId,
-          andProviderId,
-        }),
-      [id]
-    );
-
-    const onDataProviderEditedLocal: OnDataProviderEdited = useCallback(
-      ({ andProviderId, excluded, field, operator, providerId, value }) =>
-        onDataProviderEdited!({
-          andProviderId,
-          excluded,
-          field,
-          id,
-          operator,
-          providerId,
-          value,
-        }),
-      [id]
-    );
-
-    const onChangeItemsPerPage: OnChangeItemsPerPage = useCallback(
-      itemsChangedPerPage => updateItemsPerPage!({ id, itemsPerPage: itemsChangedPerPage }),
-      [id]
-    );
-
-    const toggleColumn = useCallback(
-      (column: ColumnHeaderOptions) => {
-        const exists = columns.findIndex(c => c.id === column.id) !== -1;
-
-        if (!exists && upsertColumn != null) {
-          upsertColumn({
-            column,
-            id,
-            index: 1,
-          });
-        }
-
-        if (exists && removeColumn != null) {
-          removeColumn({
-            columnId: column.id,
-            id,
-          });
-        }
-      },
-      [columns, id]
-    );
-
-    useEffect(() => {
-      if (createTimeline != null) {
-        createTimeline({ id, columns: defaultHeaders, show: false });
-      }
-    }, []);
-
-    return (
-      <WithSource sourceId="default" indexToAdd={indexToAdd}>
-        {({ indexPattern, browserFields }) => (
-          <Timeline
-            browserFields={browserFields}
-            columns={columns}
-            dataProviders={dataProviders!}
-            end={end}
-            eventType={eventType}
-            filters={filters}
-            id={id}
-            indexPattern={indexPattern}
-            indexToAdd={indexToAdd}
-            isLive={isLive}
-            itemsPerPage={itemsPerPage!}
-            itemsPerPageOptions={itemsPerPageOptions!}
-            kqlMode={kqlMode}
-            kqlQueryExpression={kqlQueryExpression}
-            loadingIndexName={loading}
-            onChangeItemsPerPage={onChangeItemsPerPage}
-            onClose={onClose}
-            onDataProviderEdited={onDataProviderEditedLocal}
-            onDataProviderRemoved={onDataProviderRemoved}
-            onToggleDataProviderEnabled={onToggleDataProviderEnabled}
-            onToggleDataProviderExcluded={onToggleDataProviderExcluded}
-            show={show!}
-            showCallOutUnauthorizedMsg={showCallOutUnauthorizedMsg}
-            sort={sort!}
-            start={start}
-            toggleColumn={toggleColumn}
-            usersViewing={usersViewing}
-          />
-        )}
-      </WithSource>
-    );
-  },
-  (prevProps, nextProps) => {
-    return (
-      prevProps.eventType === nextProps.eventType &&
-      prevProps.end === nextProps.end &&
-      prevProps.id === nextProps.id &&
-      prevProps.isLive === nextProps.isLive &&
-      prevProps.itemsPerPage === nextProps.itemsPerPage &&
-      prevProps.kqlMode === nextProps.kqlMode &&
-      prevProps.kqlQueryExpression === nextProps.kqlQueryExpression &&
-      prevProps.show === nextProps.show &&
-      prevProps.showCallOutUnauthorizedMsg === nextProps.showCallOutUnauthorizedMsg &&
-      prevProps.start === nextProps.start &&
-      deepEqual(prevProps.columns, nextProps.columns) &&
-      deepEqual(prevProps.dataProviders, nextProps.dataProviders) &&
-      deepEqual(prevProps.filters, nextProps.filters) &&
-      deepEqual(prevProps.itemsPerPageOptions, nextProps.itemsPerPageOptions) &&
-      deepEqual(prevProps.sort, nextProps.sort) &&
-      deepEqual(prevProps.usersViewing, nextProps.usersViewing)
-    );
-  }
-);
-
-StatefulTimelineComponent.displayName = 'StatefulTimelineComponent';
-
-const makeMapStateToProps = () => {
-  const getShowCallOutUnauthorizedMsg = timelineSelectors.getShowCallOutUnauthorizedMsg();
-  const getTimeline = timelineSelectors.getTimelineByIdSelector();
-  const getKqlQueryTimeline = timelineSelectors.getKqlFilterQuerySelector();
-  const getInputsTimeline = inputsSelectors.getTimelineSelector();
-  const mapStateToProps = (state: State, { id }: OwnProps) => {
-    const timeline: TimelineModel = getTimeline(state, id) ?? timelineDefaults;
-    const input: inputsModel.InputsRange = getInputsTimeline(state);
-    const {
-      columns,
-      dataProviders,
-      eventType,
-      filters,
-      itemsPerPage,
-      itemsPerPageOptions,
-      kqlMode,
-      show,
-      sort,
-    } = timeline;
-    const kqlQueryExpression = getKqlQueryTimeline(state, id)!;
-
-    const timelineFilter = kqlMode === 'filter' ? filters || [] : [];
-
-    return {
-      columns,
-      dataProviders,
-      eventType,
-      end: input.timerange.to,
-      filters: timelineFilter,
-      id,
-      isLive: input.policy.kind === 'interval',
-      itemsPerPage,
-      itemsPerPageOptions,
-      kqlMode,
-      kqlQueryExpression,
-      show,
-      showCallOutUnauthorizedMsg: getShowCallOutUnauthorizedMsg(state),
-      sort,
-      start: input.timerange.from,
-    };
-  };
-  return mapStateToProps;
-};
-
-const mapDispatchToProps = {
-  addProvider: timelineActions.addProvider,
-  createTimeline: timelineActions.createTimeline,
-  onDataProviderEdited: timelineActions.dataProviderEdited,
-  removeColumn: timelineActions.removeColumn,
-  removeProvider: timelineActions.removeProvider,
-  updateColumns: timelineActions.updateColumns,
-  updateDataProviderEnabled: timelineActions.updateDataProviderEnabled,
-  updateDataProviderExcluded: timelineActions.updateDataProviderExcluded,
-  updateDataProviderKqlQuery: timelineActions.updateDataProviderKqlQuery,
-  updateHighlightedDropAndProviderId: timelineActions.updateHighlightedDropAndProviderId,
-  updateItemsPerPage: timelineActions.updateItemsPerPage,
-  updateItemsPerPageOptions: timelineActions.updateItemsPerPageOptions,
-  updateSort: timelineActions.updateSort,
-  upsertColumn: timelineActions.upsertColumn,
-};
-
-const connector = connect(makeMapStateToProps, mapDispatchToProps);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-export const StatefulTimeline = connector(StatefulTimelineComponent);
diff --git a/x-pack/plugins/siem/public/components/timeline/insert_timeline_popover/index.test.tsx b/x-pack/plugins/siem/public/components/timeline/insert_timeline_popover/index.test.tsx
deleted file mode 100644
index c5aea833a4b2f9..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/insert_timeline_popover/index.test.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-/*
- * 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 { mount } from 'enzyme';
-/* eslint-disable @kbn/eslint/module_migration */
-import routeData from 'react-router';
-/* eslint-enable @kbn/eslint/module_migration */
-import { InsertTimelinePopoverComponent } from './';
-
-const mockDispatch = jest.fn();
-jest.mock('react-redux', () => {
-  const reactRedux = jest.requireActual('react-redux');
-  return {
-    ...reactRedux,
-    useDispatch: () => mockDispatch,
-  };
-});
-const mockLocation = {
-  pathname: '/apath',
-  hash: '',
-  search: '',
-  state: '',
-};
-const mockLocationWithState = {
-  ...mockLocation,
-  state: {
-    insertTimeline: {
-      timelineId: 'timeline-id',
-      timelineSavedObjectId: '34578-3497-5893-47589-34759',
-      timelineTitle: 'Timeline title',
-    },
-  },
-};
-
-const onTimelineChange = jest.fn();
-const defaultProps = {
-  isDisabled: false,
-  onTimelineChange,
-};
-
-describe('Insert timeline popover ', () => {
-  beforeEach(() => {
-    jest.resetAllMocks();
-  });
-
-  it('should insert a timeline when passed in the router state', () => {
-    jest.spyOn(routeData, 'useLocation').mockReturnValue(mockLocationWithState);
-    mount(<InsertTimelinePopoverComponent {...defaultProps} />);
-    expect(mockDispatch).toBeCalledWith({
-      payload: { id: 'timeline-id', show: false },
-      type: 'x-pack/siem/local/timeline/SHOW_TIMELINE',
-    });
-    expect(onTimelineChange).toBeCalledWith('Timeline title', '34578-3497-5893-47589-34759');
-  });
-  it('should do nothing when router state', () => {
-    jest.spyOn(routeData, 'useLocation').mockReturnValue(mockLocation);
-    mount(<InsertTimelinePopoverComponent {...defaultProps} />);
-    expect(mockDispatch).toHaveBeenCalledTimes(0);
-    expect(onTimelineChange).toHaveBeenCalledTimes(0);
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/timeline/insert_timeline_popover/index.tsx b/x-pack/plugins/siem/public/components/timeline/insert_timeline_popover/index.tsx
deleted file mode 100644
index 573e010868babd..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/insert_timeline_popover/index.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-/*
- * 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 { EuiButtonIcon, EuiPopover, EuiSelectableOption, EuiToolTip } from '@elastic/eui';
-import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
-import { useLocation } from 'react-router-dom';
-import { useDispatch } from 'react-redux';
-
-import { OpenTimelineResult } from '../../open_timeline/types';
-import { SelectableTimeline } from '../selectable_timeline';
-import * as i18n from '../translations';
-import { timelineActions } from '../../../store/timeline';
-
-interface InsertTimelinePopoverProps {
-  isDisabled: boolean;
-  hideUntitled?: boolean;
-  onTimelineChange: (timelineTitle: string, timelineId: string | null) => void;
-}
-
-interface RouterState {
-  insertTimeline: {
-    timelineId: string;
-    timelineSavedObjectId: string;
-    timelineTitle: string;
-  };
-}
-
-type Props = InsertTimelinePopoverProps;
-
-export const InsertTimelinePopoverComponent: React.FC<Props> = ({
-  isDisabled,
-  hideUntitled = false,
-  onTimelineChange,
-}) => {
-  const dispatch = useDispatch();
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-  const { state } = useLocation();
-  const [routerState, setRouterState] = useState<RouterState | null>(state ?? null);
-
-  useEffect(() => {
-    if (routerState && routerState.insertTimeline) {
-      dispatch(
-        timelineActions.showTimeline({ id: routerState.insertTimeline.timelineId, show: false })
-      );
-      onTimelineChange(
-        routerState.insertTimeline.timelineTitle,
-        routerState.insertTimeline.timelineSavedObjectId
-      );
-      setRouterState(null);
-    }
-  }, [routerState]);
-
-  const handleClosePopover = useCallback(() => {
-    setIsPopoverOpen(false);
-  }, []);
-
-  const handleOpenPopover = useCallback(() => {
-    setIsPopoverOpen(true);
-  }, []);
-
-  const insertTimelineButton = useMemo(
-    () => (
-      <EuiToolTip position="top" content={<p>{i18n.INSERT_TIMELINE}</p>}>
-        <EuiButtonIcon
-          aria-label={i18n.INSERT_TIMELINE}
-          data-test-subj="insert-timeline-button"
-          iconType="timeline"
-          isDisabled={isDisabled}
-          onClick={handleOpenPopover}
-        />
-      </EuiToolTip>
-    ),
-    [handleOpenPopover, isDisabled]
-  );
-
-  const handleGetSelectableOptions = useCallback(
-    ({ timelines }) => [
-      ...timelines.map(
-        (t: OpenTimelineResult, index: number) =>
-          ({
-            description: t.description,
-            favorite: t.favorite,
-            label: t.title,
-            id: t.savedObjectId,
-            key: `${t.title}-${index}`,
-            title: t.title,
-            checked: undefined,
-          } as EuiSelectableOption)
-      ),
-    ],
-    []
-  );
-
-  return (
-    <EuiPopover
-      data-test-subj="insert-timeline-popover"
-      id="searchTimelinePopover"
-      button={insertTimelineButton}
-      isOpen={isPopoverOpen}
-      closePopover={handleClosePopover}
-    >
-      <SelectableTimeline
-        hideUntitled={hideUntitled}
-        getSelectableOptions={handleGetSelectableOptions}
-        onClosePopover={handleClosePopover}
-        onTimelineChange={onTimelineChange}
-      />
-    </EuiPopover>
-  );
-};
-
-export const InsertTimelinePopover = memo(InsertTimelinePopoverComponent);
diff --git a/x-pack/plugins/siem/public/components/timeline/properties/helpers.tsx b/x-pack/plugins/siem/public/components/timeline/properties/helpers.tsx
deleted file mode 100644
index 4c64c8a100b41a..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/properties/helpers.tsx
+++ /dev/null
@@ -1,327 +0,0 @@
-/*
- * 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 {
-  EuiBadge,
-  EuiButton,
-  EuiButtonEmpty,
-  EuiButtonIcon,
-  EuiFieldText,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiIcon,
-  EuiModal,
-  EuiOverlayMask,
-  EuiToolTip,
-} from '@elastic/eui';
-import React, { useCallback } from 'react';
-import uuid from 'uuid';
-import styled from 'styled-components';
-import { useHistory } from 'react-router-dom';
-import { useSelector } from 'react-redux';
-
-import { Note } from '../../../lib/note';
-import { Notes } from '../../notes';
-import { AssociateNote, UpdateNote } from '../../notes/helpers';
-import { NOTES_PANEL_WIDTH } from './notes_size';
-import { ButtonContainer, DescriptionContainer, LabelText, NameField, StyledStar } from './styles';
-import * as i18n from './translations';
-import { SiemPageName } from '../../../pages/home/types';
-import { timelineSelectors } from '../../../store/timeline';
-import { State } from '../../../store';
-
-export const historyToolTip = 'The chronological history of actions related to this timeline';
-export const streamLiveToolTip = 'Update the Timeline as new data arrives';
-export const newTimelineToolTip = 'Create a new timeline';
-
-const NotesCountBadge = (styled(EuiBadge)`
-  margin-left: 5px;
-` as unknown) as typeof EuiBadge;
-
-NotesCountBadge.displayName = 'NotesCountBadge';
-
-type CreateTimeline = ({ id, show }: { id: string; show?: boolean }) => void;
-type UpdateIsFavorite = ({ id, isFavorite }: { id: string; isFavorite: boolean }) => void;
-type UpdateTitle = ({ id, title }: { id: string; title: string }) => void;
-type UpdateDescription = ({ id, description }: { id: string; description: string }) => void;
-
-export const StarIcon = React.memo<{
-  isFavorite: boolean;
-  timelineId: string;
-  updateIsFavorite: UpdateIsFavorite;
-}>(({ isFavorite, timelineId: id, updateIsFavorite }) => (
-  // TODO: 1 error is: Visible, non-interactive elements with click handlers must have at least one keyboard listener
-  // TODO: 2 error is: Elements with the 'button' interactive role must be focusable
-  // TODO: Investigate this error
-  // eslint-disable-next-line
-  <div role="button" onClick={() => updateIsFavorite({ id, isFavorite: !isFavorite })}>
-    {isFavorite ? (
-      <EuiToolTip data-test-subj="timeline-favorite-filled-star-tool-tip" content={i18n.FAVORITE}>
-        <StyledStar data-test-subj="timeline-favorite-filled-star" type="starFilled" size="l" />
-      </EuiToolTip>
-    ) : (
-      <EuiToolTip content={i18n.NOT_A_FAVORITE}>
-        <StyledStar data-test-subj="timeline-favorite-empty-star" type="starEmpty" size="l" />
-      </EuiToolTip>
-    )}
-  </div>
-));
-StarIcon.displayName = 'StarIcon';
-
-interface DescriptionProps {
-  description: string;
-  timelineId: string;
-  updateDescription: UpdateDescription;
-}
-
-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';
-
-interface NewCaseProps {
-  onClosePopover: () => void;
-  timelineId: string;
-  timelineTitle: string;
-}
-
-export const NewCase = React.memo<NewCaseProps>(({ onClosePopover, timelineId, timelineTitle }) => {
-  const history = useHistory();
-  const { savedObjectId } = useSelector((state: State) =>
-    timelineSelectors.selectTimeline(state, timelineId)
-  );
-  const handleClick = useCallback(() => {
-    onClosePopover();
-    history.push({
-      pathname: `/${SiemPageName.case}/create`,
-      state: {
-        insertTimeline: {
-          timelineId,
-          timelineSavedObjectId: savedObjectId,
-          timelineTitle: timelineTitle.length > 0 ? timelineTitle : i18n.UNTITLED_TIMELINE,
-        },
-      },
-    });
-  }, [onClosePopover, history, timelineId, timelineTitle]);
-
-  return (
-    <EuiButtonEmpty
-      data-test-subj="attach-timeline-case"
-      color="text"
-      iconSide="left"
-      iconType="paperClip"
-      onClick={handleClick}
-    >
-      {i18n.ATTACH_TIMELINE_TO_NEW_CASE}
-    </EuiButtonEmpty>
-  );
-});
-NewCase.displayName = 'NewCase';
-
-interface NewTimelineProps {
-  createTimeline: CreateTimeline;
-  onClosePopover: () => void;
-  timelineId: string;
-}
-
-export const NewTimeline = React.memo<NewTimelineProps>(
-  ({ createTimeline, onClosePopover, timelineId }) => {
-    const handleClick = useCallback(() => {
-      createTimeline({ id: timelineId, show: true });
-      onClosePopover();
-    }, [createTimeline, timelineId, onClosePopover]);
-
-    return (
-      <EuiButtonEmpty
-        data-test-subj="timeline-new"
-        color="text"
-        iconSide="left"
-        iconType="plusInCircle"
-        onClick={handleClick}
-      >
-        {i18n.NEW_TIMELINE}
-      </EuiButtonEmpty>
-    );
-  }
-);
-NewTimeline.displayName = 'NewTimeline';
-
-interface NotesButtonProps {
-  animate?: boolean;
-  associateNote: AssociateNote;
-  getNotesByIds: (noteIds: string[]) => Note[];
-  noteIds: string[];
-  size: 's' | 'l';
-  showNotes: boolean;
-  toggleShowNotes: () => void;
-  text?: string;
-  toolTip?: string;
-  updateNote: UpdateNote;
-}
-
-const getNewNoteId = (): string => uuid.v4();
-
-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';
-
-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 = React.memo<NotesButtonProps>(
-  ({
-    animate = true,
-    associateNote,
-    getNotesByIds,
-    noteIds,
-    showNotes,
-    size,
-    toggleShowNotes,
-    text,
-    updateNote,
-  }) => (
-    <ButtonContainer animate={animate} data-test-subj="timeline-notes-button-container">
-      <>
-        {size === 'l' ? (
-          <LargeNotesButton noteIds={noteIds} text={text} toggleShowNotes={toggleShowNotes} />
-        ) : (
-          <SmallNotesButton noteIds={noteIds} toggleShowNotes={toggleShowNotes} />
-        )}
-        {size === 'l' && showNotes ? (
-          <EuiOverlayMask>
-            <EuiModal maxWidth={NOTES_PANEL_WIDTH} onClose={toggleShowNotes}>
-              <Notes
-                associateNote={associateNote}
-                getNotesByIds={getNotesByIds}
-                noteIds={noteIds}
-                getNewNoteId={getNewNoteId}
-                updateNote={updateNote}
-              />
-            </EuiModal>
-          </EuiOverlayMask>
-        ) : null}
-      </>
-    </ButtonContainer>
-  )
-);
-NotesButtonComponent.displayName = 'NotesButtonComponent';
-
-export const NotesButton = React.memo<NotesButtonProps>(
-  ({
-    animate = true,
-    associateNote,
-    getNotesByIds,
-    noteIds,
-    showNotes,
-    size,
-    toggleShowNotes,
-    toolTip,
-    text,
-    updateNote,
-  }) =>
-    showNotes ? (
-      <NotesButtonComponent
-        animate={animate}
-        associateNote={associateNote}
-        getNotesByIds={getNotesByIds}
-        noteIds={noteIds}
-        showNotes={showNotes}
-        size={size}
-        toggleShowNotes={toggleShowNotes}
-        text={text}
-        updateNote={updateNote}
-      />
-    ) : (
-      <EuiToolTip content={toolTip || ''} data-test-subj="timeline-notes-tool-tip">
-        <NotesButtonComponent
-          animate={animate}
-          associateNote={associateNote}
-          getNotesByIds={getNotesByIds}
-          noteIds={noteIds}
-          showNotes={showNotes}
-          size={size}
-          toggleShowNotes={toggleShowNotes}
-          text={text}
-          updateNote={updateNote}
-        />
-      </EuiToolTip>
-    )
-);
-NotesButton.displayName = 'NotesButton';
diff --git a/x-pack/plugins/siem/public/components/timeline/properties/index.test.tsx b/x-pack/plugins/siem/public/components/timeline/properties/index.test.tsx
deleted file mode 100644
index e942c8f36dc837..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/properties/index.test.tsx
+++ /dev/null
@@ -1,466 +0,0 @@
-/*
- * 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 { mount } from 'enzyme';
-import React from 'react';
-import { Provider as ReduxStoreProvider } from 'react-redux';
-
-import { mockGlobalState, apolloClientObservable } from '../../../mock';
-import { createStore, State } from '../../../store';
-import { useThrottledResizeObserver } from '../../utils';
-
-import { Properties, showDescriptionThreshold, showNotesThreshold } from '.';
-
-jest.mock('../../../lib/kibana');
-
-let mockedWidth = 1000;
-jest.mock('../../utils');
-(useThrottledResizeObserver as jest.Mock).mockImplementation(() => ({
-  width: mockedWidth,
-}));
-
-describe('Properties', () => {
-  const usersViewing = ['elastic'];
-
-  const state: State = mockGlobalState;
-  let store = createStore(state, apolloClientObservable);
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-    store = createStore(state, apolloClientObservable);
-    mockedWidth = 1000;
-  });
-
-  test('renders correctly', () => {
-    const wrapper = mount(
-      <ReduxStoreProvider store={store}>
-        <Properties
-          associateNote={jest.fn()}
-          createTimeline={jest.fn()}
-          isDataInTimeline={false}
-          isDatepickerLocked={false}
-          isFavorite={false}
-          title=""
-          description=""
-          getNotesByIds={jest.fn()}
-          noteIds={[]}
-          timelineId="abc"
-          toggleLock={jest.fn()}
-          updateDescription={jest.fn()}
-          updateIsFavorite={jest.fn()}
-          updateTitle={jest.fn()}
-          updateNote={jest.fn()}
-          usersViewing={usersViewing}
-        />
-      </ReduxStoreProvider>
-    );
-    expect(wrapper.find('[data-test-subj="timeline-properties"]').exists()).toEqual(true);
-  });
-
-  test('it renders an empty star icon when it is NOT a favorite', () => {
-    const wrapper = mount(
-      <ReduxStoreProvider store={store}>
-        <Properties
-          associateNote={jest.fn()}
-          createTimeline={jest.fn()}
-          isDataInTimeline={false}
-          isDatepickerLocked={false}
-          isFavorite={false}
-          title=""
-          description=""
-          getNotesByIds={jest.fn()}
-          noteIds={[]}
-          timelineId="abc"
-          toggleLock={jest.fn()}
-          updateDescription={jest.fn()}
-          updateIsFavorite={jest.fn()}
-          updateTitle={jest.fn()}
-          updateNote={jest.fn()}
-          usersViewing={usersViewing}
-        />
-      </ReduxStoreProvider>
-    );
-
-    expect(wrapper.find('[data-test-subj="timeline-favorite-empty-star"]').exists()).toEqual(true);
-  });
-
-  test('it renders a filled star icon when it is a favorite', () => {
-    const wrapper = mount(
-      <ReduxStoreProvider store={store}>
-        <Properties
-          associateNote={jest.fn()}
-          createTimeline={jest.fn()}
-          isDataInTimeline={false}
-          isDatepickerLocked={false}
-          isFavorite={true}
-          title=""
-          description=""
-          getNotesByIds={jest.fn()}
-          noteIds={[]}
-          timelineId="abc"
-          toggleLock={jest.fn()}
-          updateDescription={jest.fn()}
-          updateIsFavorite={jest.fn()}
-          updateTitle={jest.fn()}
-          updateNote={jest.fn()}
-          usersViewing={usersViewing}
-        />
-      </ReduxStoreProvider>
-    );
-
-    expect(wrapper.find('[data-test-subj="timeline-favorite-filled-star"]').exists()).toEqual(true);
-  });
-
-  test('it renders the title of the timeline', () => {
-    const title = 'foozle';
-
-    const wrapper = mount(
-      <ReduxStoreProvider store={store}>
-        <Properties
-          associateNote={jest.fn()}
-          createTimeline={jest.fn()}
-          isDataInTimeline={false}
-          isDatepickerLocked={false}
-          isFavorite={false}
-          title={title}
-          description=""
-          getNotesByIds={jest.fn()}
-          noteIds={[]}
-          timelineId="abc"
-          toggleLock={jest.fn()}
-          updateDescription={jest.fn()}
-          updateIsFavorite={jest.fn()}
-          updateTitle={jest.fn()}
-          updateNote={jest.fn()}
-          usersViewing={usersViewing}
-        />
-      </ReduxStoreProvider>
-    );
-
-    expect(
-      wrapper
-        .find('[data-test-subj="timeline-title"]')
-        .first()
-        .props().value
-    ).toEqual(title);
-  });
-
-  test('it renders the date picker with the lock icon', () => {
-    const wrapper = mount(
-      <ReduxStoreProvider store={store}>
-        <Properties
-          associateNote={jest.fn()}
-          createTimeline={jest.fn()}
-          isDataInTimeline={false}
-          isDatepickerLocked={false}
-          isFavorite={false}
-          title=""
-          description=""
-          getNotesByIds={jest.fn()}
-          noteIds={[]}
-          timelineId="abc"
-          toggleLock={jest.fn()}
-          updateDescription={jest.fn()}
-          updateIsFavorite={jest.fn()}
-          updateTitle={jest.fn()}
-          updateNote={jest.fn()}
-          usersViewing={usersViewing}
-        />
-      </ReduxStoreProvider>
-    );
-
-    expect(
-      wrapper
-        .find('[data-test-subj="properties-left"]')
-        .find('[data-test-subj="timeline-date-picker-container"]')
-        .exists()
-    ).toEqual(true);
-  });
-
-  test('it renders the lock icon when isDatepickerLocked is true', () => {
-    const wrapper = mount(
-      <ReduxStoreProvider store={store}>
-        <Properties
-          associateNote={jest.fn()}
-          createTimeline={jest.fn()}
-          isDataInTimeline={false}
-          isDatepickerLocked={true}
-          isFavorite={false}
-          title=""
-          description=""
-          getNotesByIds={jest.fn()}
-          noteIds={[]}
-          timelineId="abc"
-          toggleLock={jest.fn()}
-          updateDescription={jest.fn()}
-          updateIsFavorite={jest.fn()}
-          updateTitle={jest.fn()}
-          updateNote={jest.fn()}
-          usersViewing={usersViewing}
-        />
-      </ReduxStoreProvider>
-    );
-    expect(
-      wrapper
-        .find('[data-test-subj="properties-left"]')
-        .find('[data-test-subj="timeline-date-picker-lock-button"]')
-        .exists()
-    ).toEqual(true);
-  });
-
-  test('it renders the unlock icon when isDatepickerLocked is false', () => {
-    const wrapper = mount(
-      <ReduxStoreProvider store={store}>
-        <Properties
-          associateNote={jest.fn()}
-          createTimeline={jest.fn()}
-          isDataInTimeline={false}
-          isDatepickerLocked={false}
-          isFavorite={false}
-          title=""
-          description=""
-          getNotesByIds={jest.fn()}
-          noteIds={[]}
-          timelineId="abc"
-          toggleLock={jest.fn()}
-          updateDescription={jest.fn()}
-          updateIsFavorite={jest.fn()}
-          updateTitle={jest.fn()}
-          updateNote={jest.fn()}
-          usersViewing={usersViewing}
-        />
-      </ReduxStoreProvider>
-    );
-    expect(
-      wrapper
-        .find('[data-test-subj="properties-left"]')
-        .find('[data-test-subj="timeline-date-picker-unlock-button"]')
-        .exists()
-    ).toEqual(true);
-  });
-
-  test('it renders a description on the left when the width is at least as wide as the threshold', () => {
-    const description = 'strange';
-    mockedWidth = showDescriptionThreshold;
-
-    const wrapper = mount(
-      <ReduxStoreProvider store={store}>
-        <Properties
-          associateNote={jest.fn()}
-          createTimeline={jest.fn()}
-          isDataInTimeline={false}
-          isDatepickerLocked={false}
-          isFavorite={false}
-          title=""
-          description={description}
-          getNotesByIds={jest.fn()}
-          noteIds={[]}
-          timelineId="abc"
-          toggleLock={jest.fn()}
-          updateDescription={jest.fn()}
-          updateIsFavorite={jest.fn()}
-          updateTitle={jest.fn()}
-          updateNote={jest.fn()}
-          usersViewing={usersViewing}
-        />
-      </ReduxStoreProvider>
-    );
-
-    expect(
-      wrapper
-        .find('[data-test-subj="properties-left"]')
-        .find('[data-test-subj="timeline-description"]')
-        .first()
-        .props().value
-    ).toEqual(description);
-  });
-
-  test('it does NOT render a description on the left when the width is less than the threshold', () => {
-    const description = 'strange';
-    mockedWidth = showDescriptionThreshold - 1;
-
-    const wrapper = mount(
-      <ReduxStoreProvider store={store}>
-        <Properties
-          associateNote={jest.fn()}
-          createTimeline={jest.fn()}
-          isDataInTimeline={false}
-          isDatepickerLocked={false}
-          isFavorite={false}
-          title=""
-          description={description}
-          getNotesByIds={jest.fn()}
-          noteIds={[]}
-          timelineId="abc"
-          toggleLock={jest.fn()}
-          updateDescription={jest.fn()}
-          updateIsFavorite={jest.fn()}
-          updateTitle={jest.fn()}
-          updateNote={jest.fn()}
-          usersViewing={usersViewing}
-        />
-      </ReduxStoreProvider>
-    );
-
-    expect(
-      wrapper
-        .find('[data-test-subj="properties-left"]')
-        .find('[data-test-subj="timeline-description"]')
-        .exists()
-    ).toEqual(false);
-  });
-
-  test('it renders a notes button on the left when the width is at least as wide as the threshold', () => {
-    mockedWidth = showNotesThreshold;
-
-    const wrapper = mount(
-      <ReduxStoreProvider store={store}>
-        <Properties
-          associateNote={jest.fn()}
-          createTimeline={jest.fn()}
-          isDataInTimeline={false}
-          isDatepickerLocked={false}
-          isFavorite={false}
-          title=""
-          description=""
-          getNotesByIds={jest.fn()}
-          noteIds={[]}
-          timelineId="abc"
-          toggleLock={jest.fn()}
-          updateDescription={jest.fn()}
-          updateIsFavorite={jest.fn()}
-          updateTitle={jest.fn()}
-          updateNote={jest.fn()}
-          usersViewing={usersViewing}
-        />
-      </ReduxStoreProvider>
-    );
-
-    expect(
-      wrapper
-        .find('[data-test-subj="properties-left"]')
-        .find('[data-test-subj="timeline-notes-button-large"]')
-        .exists()
-    ).toEqual(true);
-  });
-
-  test('it does NOT render a a notes button on the left when the width is less than the threshold', () => {
-    mockedWidth = showNotesThreshold - 1;
-
-    const wrapper = mount(
-      <ReduxStoreProvider store={store}>
-        <Properties
-          associateNote={jest.fn()}
-          createTimeline={jest.fn()}
-          isDataInTimeline={false}
-          isDatepickerLocked={false}
-          isFavorite={false}
-          title=""
-          description=""
-          getNotesByIds={jest.fn()}
-          noteIds={[]}
-          timelineId="abc"
-          toggleLock={jest.fn()}
-          updateDescription={jest.fn()}
-          updateIsFavorite={jest.fn()}
-          updateTitle={jest.fn()}
-          updateNote={jest.fn()}
-          usersViewing={usersViewing}
-        />
-      </ReduxStoreProvider>
-    );
-
-    expect(
-      wrapper
-        .find('[data-test-subj="properties-left"]')
-        .find('[data-test-subj="timeline-notes-button-large"]')
-        .exists()
-    ).toEqual(false);
-  });
-
-  test('it renders a settings icon', () => {
-    const wrapper = mount(
-      <ReduxStoreProvider store={store}>
-        <Properties
-          associateNote={jest.fn()}
-          createTimeline={jest.fn()}
-          isDataInTimeline={false}
-          isDatepickerLocked={false}
-          isFavorite={false}
-          title=""
-          description=""
-          getNotesByIds={jest.fn()}
-          noteIds={[]}
-          timelineId="abc"
-          toggleLock={jest.fn()}
-          updateDescription={jest.fn()}
-          updateIsFavorite={jest.fn()}
-          updateTitle={jest.fn()}
-          updateNote={jest.fn()}
-          usersViewing={usersViewing}
-        />
-      </ReduxStoreProvider>
-    );
-
-    expect(wrapper.find('[data-test-subj="settings-gear"]').exists()).toEqual(true);
-  });
-
-  test('it renders an avatar for the current user viewing the timeline when it has a title', () => {
-    const title = 'port scan';
-
-    const wrapper = mount(
-      <ReduxStoreProvider store={store}>
-        <Properties
-          associateNote={jest.fn()}
-          createTimeline={jest.fn()}
-          isDataInTimeline={false}
-          isDatepickerLocked={false}
-          isFavorite={false}
-          title={title}
-          description=""
-          getNotesByIds={jest.fn()}
-          noteIds={[]}
-          timelineId="abc"
-          toggleLock={jest.fn()}
-          updateDescription={jest.fn()}
-          updateIsFavorite={jest.fn()}
-          updateTitle={jest.fn()}
-          updateNote={jest.fn()}
-          usersViewing={usersViewing}
-        />
-      </ReduxStoreProvider>
-    );
-
-    expect(wrapper.find('[data-test-subj="avatar"]').exists()).toEqual(true);
-  });
-
-  test('it does NOT render an avatar for the current user viewing the timeline when it does NOT have a title', () => {
-    const wrapper = mount(
-      <ReduxStoreProvider store={store}>
-        <Properties
-          associateNote={jest.fn()}
-          createTimeline={jest.fn()}
-          isDataInTimeline={false}
-          isDatepickerLocked={false}
-          isFavorite={false}
-          title=""
-          description=""
-          getNotesByIds={jest.fn()}
-          noteIds={[]}
-          timelineId="abc"
-          toggleLock={jest.fn()}
-          updateDescription={jest.fn()}
-          updateIsFavorite={jest.fn()}
-          updateTitle={jest.fn()}
-          updateNote={jest.fn()}
-          usersViewing={usersViewing}
-        />
-      </ReduxStoreProvider>
-    );
-
-    expect(wrapper.find('[data-test-subj="avatar"]').exists()).toEqual(false);
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/timeline/properties/index.tsx b/x-pack/plugins/siem/public/components/timeline/properties/index.tsx
deleted file mode 100644
index 0080fcb1e69242..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/properties/index.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-/*
- * 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, { useState, useCallback, useMemo } from 'react';
-
-import { useThrottledResizeObserver } from '../../utils';
-import { Note } from '../../../lib/note';
-import { InputsModelId } from '../../../store/inputs/constants';
-import { AssociateNote, UpdateNote } from '../../notes/helpers';
-
-import { TimelineProperties } from './styles';
-import { PropertiesRight } from './properties_right';
-import { PropertiesLeft } from './properties_left';
-
-type CreateTimeline = ({ id, show }: { id: string; show?: boolean }) => void;
-type UpdateIsFavorite = ({ id, isFavorite }: { id: string; isFavorite: boolean }) => void;
-type UpdateTitle = ({ id, title }: { id: string; title: string }) => void;
-type UpdateDescription = ({ id, description }: { id: string; description: string }) => void;
-type ToggleLock = ({ linkToId }: { linkToId: InputsModelId }) => void;
-
-interface Props {
-  associateNote: AssociateNote;
-  createTimeline: CreateTimeline;
-  description: string;
-  getNotesByIds: (noteIds: string[]) => Note[];
-  isDataInTimeline: boolean;
-  isDatepickerLocked: boolean;
-  isFavorite: boolean;
-  noteIds: string[];
-  timelineId: string;
-  title: string;
-  toggleLock: ToggleLock;
-  updateDescription: UpdateDescription;
-  updateIsFavorite: UpdateIsFavorite;
-  updateNote: UpdateNote;
-  updateTitle: UpdateTitle;
-  usersViewing: string[];
-}
-
-const rightGutter = 60; // px
-export const datePickerThreshold = 600;
-export const showNotesThreshold = 810;
-export const showDescriptionThreshold = 970;
-
-const starIconWidth = 30;
-const nameWidth = 155;
-const descriptionWidth = 165;
-const noteWidth = 130;
-const settingsWidth = 55;
-
-/** Displays the properties of a timeline, i.e. name, description, notes, etc */
-export const Properties = React.memo<Props>(
-  ({
-    associateNote,
-    createTimeline,
-    description,
-    getNotesByIds,
-    isDataInTimeline,
-    isDatepickerLocked,
-    isFavorite,
-    noteIds,
-    timelineId,
-    title,
-    toggleLock,
-    updateDescription,
-    updateIsFavorite,
-    updateNote,
-    updateTitle,
-    usersViewing,
-  }) => {
-    const { ref, width = 0 } = useThrottledResizeObserver(300);
-    const [showActions, setShowActions] = useState(false);
-    const [showNotes, setShowNotes] = useState(false);
-    const [showTimelineModal, setShowTimelineModal] = useState(false);
-
-    const onButtonClick = useCallback(() => setShowActions(!showActions), [showActions]);
-    const onToggleShowNotes = useCallback(() => setShowNotes(!showNotes), [showNotes]);
-    const onClosePopover = useCallback(() => setShowActions(false), []);
-    const onCloseTimelineModal = useCallback(() => setShowTimelineModal(false), []);
-    const onToggleLock = useCallback(() => toggleLock({ linkToId: 'timeline' }), [toggleLock]);
-    const onOpenTimelineModal = useCallback(() => {
-      onClosePopover();
-      setShowTimelineModal(true);
-    }, []);
-
-    const datePickerWidth = useMemo(
-      () =>
-        width -
-        rightGutter -
-        starIconWidth -
-        nameWidth -
-        (width >= showDescriptionThreshold ? descriptionWidth : 0) -
-        noteWidth -
-        settingsWidth,
-      [width]
-    );
-
-    return (
-      <TimelineProperties ref={ref} data-test-subj="timeline-properties">
-        <PropertiesLeft
-          associateNote={associateNote}
-          datePickerWidth={
-            datePickerWidth > datePickerThreshold ? datePickerThreshold : datePickerWidth
-          }
-          description={description}
-          getNotesByIds={getNotesByIds}
-          isDatepickerLocked={isDatepickerLocked}
-          isFavorite={isFavorite}
-          noteIds={noteIds}
-          onToggleShowNotes={onToggleShowNotes}
-          showDescription={width >= showDescriptionThreshold}
-          showNotes={showNotes}
-          showNotesFromWidth={width >= showNotesThreshold}
-          timelineId={timelineId}
-          title={title}
-          toggleLock={onToggleLock}
-          updateDescription={updateDescription}
-          updateIsFavorite={updateIsFavorite}
-          updateNote={updateNote}
-          updateTitle={updateTitle}
-        />
-        <PropertiesRight
-          associateNote={associateNote}
-          createTimeline={createTimeline}
-          description={description}
-          getNotesByIds={getNotesByIds}
-          isDataInTimeline={isDataInTimeline}
-          noteIds={noteIds}
-          onButtonClick={onButtonClick}
-          onClosePopover={onClosePopover}
-          onCloseTimelineModal={onCloseTimelineModal}
-          onOpenTimelineModal={onOpenTimelineModal}
-          onToggleShowNotes={onToggleShowNotes}
-          showActions={showActions}
-          showDescription={width < showDescriptionThreshold}
-          showNotes={showNotes}
-          showNotesFromWidth={width < showNotesThreshold}
-          showTimelineModal={showTimelineModal}
-          showUsersView={title.length > 0}
-          timelineId={timelineId}
-          title={title}
-          updateDescription={updateDescription}
-          updateNote={updateNote}
-          usersViewing={usersViewing}
-        />
-      </TimelineProperties>
-    );
-  }
-);
-
-Properties.displayName = 'Properties';
diff --git a/x-pack/plugins/siem/public/components/timeline/query_bar/index.test.tsx b/x-pack/plugins/siem/public/components/timeline/query_bar/index.test.tsx
deleted file mode 100644
index a78e5b8e1d2264..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/query_bar/index.test.tsx
+++ /dev/null
@@ -1,409 +0,0 @@
-/*
- * 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 { mount } from 'enzyme';
-import React from 'react';
-
-import { DEFAULT_FROM, DEFAULT_TO } from '../../../../common/constants';
-import { mockBrowserFields } from '../../../containers/source/mock';
-import { convertKueryToElasticSearchQuery } from '../../../lib/keury';
-import { mockIndexPattern, TestProviders } from '../../../mock';
-import { createKibanaCoreStartMock } from '../../../mock/kibana_core';
-import { QueryBar } from '../../query_bar';
-import { FilterManager } from '../../../../../../../src/plugins/data/public';
-import { mockDataProviders } from '../data_providers/mock/mock_data_providers';
-import { buildGlobalQuery } from '../helpers';
-
-import { QueryBarTimeline, QueryBarTimelineComponentProps, getDataProviderFilter } from './index';
-
-const mockUiSettingsForFilterManager = createKibanaCoreStartMock().uiSettings;
-
-jest.mock('../../../lib/kibana');
-
-describe('Timeline QueryBar ', () => {
-  // We are doing that because we need to wrapped this component with redux
-  // and redux does not like to be updated and since we need to update our
-  // child component (BODY) and we do not want to scare anyone with this error
-  // we are hiding it!!!
-  // eslint-disable-next-line no-console
-  const originalError = console.error;
-  beforeAll(() => {
-    // eslint-disable-next-line no-console
-    console.error = (...args: string[]) => {
-      if (/<Provider> does not support changing `store` on the fly/.test(args[0])) {
-        return;
-      }
-      originalError.call(console, ...args);
-    };
-  });
-
-  const mockApplyKqlFilterQuery = jest.fn();
-  const mockSetFilters = jest.fn();
-  const mockSetKqlFilterQueryDraft = jest.fn();
-  const mockSetSavedQueryId = jest.fn();
-  const mockUpdateReduxTime = jest.fn();
-
-  beforeEach(() => {
-    mockApplyKqlFilterQuery.mockClear();
-    mockSetFilters.mockClear();
-    mockSetKqlFilterQueryDraft.mockClear();
-    mockSetSavedQueryId.mockClear();
-    mockUpdateReduxTime.mockClear();
-  });
-
-  test('check if we format the appropriate props to QueryBar', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <QueryBarTimeline
-          applyKqlFilterQuery={mockApplyKqlFilterQuery}
-          browserFields={mockBrowserFields}
-          dataProviders={mockDataProviders}
-          filters={[]}
-          filterManager={new FilterManager(mockUiSettingsForFilterManager)}
-          filterQuery={{ expression: 'here: query', kind: 'kuery' }}
-          filterQueryDraft={{ expression: 'here: query', kind: 'kuery' }}
-          from={0}
-          fromStr={DEFAULT_FROM}
-          to={1}
-          toStr={DEFAULT_TO}
-          kqlMode="search"
-          indexPattern={mockIndexPattern}
-          isRefreshPaused={true}
-          refreshInterval={3000}
-          savedQueryId={null}
-          setFilters={mockSetFilters}
-          setKqlFilterQueryDraft={mockSetKqlFilterQueryDraft}
-          setSavedQueryId={mockSetSavedQueryId}
-          timelineId="timline-real-id"
-          updateReduxTime={mockUpdateReduxTime}
-        />
-      </TestProviders>
-    );
-    const queryBarProps = wrapper.find(QueryBar).props();
-
-    expect(queryBarProps.dateRangeFrom).toEqual('now-24h');
-    expect(queryBarProps.dateRangeTo).toEqual('now');
-    expect(queryBarProps.filterQuery).toEqual({ query: 'here: query', language: 'kuery' });
-    expect(queryBarProps.savedQuery).toEqual(null);
-  });
-
-  describe('#onChangeQuery', () => {
-    test(' is the only reference that changed when filterQueryDraft props get updated', () => {
-      const Proxy = (props: QueryBarTimelineComponentProps) => (
-        <TestProviders>
-          <QueryBarTimeline {...props} />
-        </TestProviders>
-      );
-
-      const wrapper = mount(
-        <Proxy
-          applyKqlFilterQuery={mockApplyKqlFilterQuery}
-          browserFields={mockBrowserFields}
-          dataProviders={mockDataProviders}
-          filters={[]}
-          filterManager={new FilterManager(mockUiSettingsForFilterManager)}
-          filterQuery={{ expression: 'here: query', kind: 'kuery' }}
-          filterQueryDraft={{ expression: 'here: query', kind: 'kuery' }}
-          from={0}
-          fromStr={DEFAULT_FROM}
-          to={1}
-          toStr={DEFAULT_TO}
-          kqlMode="search"
-          indexPattern={mockIndexPattern}
-          isRefreshPaused={true}
-          refreshInterval={3000}
-          savedQueryId={null}
-          setFilters={mockSetFilters}
-          setKqlFilterQueryDraft={mockSetKqlFilterQueryDraft}
-          setSavedQueryId={mockSetSavedQueryId}
-          timelineId="timeline-real-id"
-          updateReduxTime={mockUpdateReduxTime}
-        />
-      );
-      const queryBarProps = wrapper.find(QueryBar).props();
-      const onChangedQueryRef = queryBarProps.onChangedQuery;
-      const onSubmitQueryRef = queryBarProps.onSubmitQuery;
-      const onSavedQueryRef = queryBarProps.onSavedQuery;
-
-      wrapper.setProps({ filterQueryDraft: { expression: 'new: one', kind: 'kuery' } });
-      wrapper.update();
-
-      expect(onChangedQueryRef).not.toEqual(wrapper.find(QueryBar).props().onChangedQuery);
-      expect(onSubmitQueryRef).toEqual(wrapper.find(QueryBar).props().onSubmitQuery);
-      expect(onSavedQueryRef).toEqual(wrapper.find(QueryBar).props().onSavedQuery);
-    });
-  });
-
-  describe('#onSubmitQuery', () => {
-    test(' is the only reference that changed when filterQuery props get updated', () => {
-      const Proxy = (props: QueryBarTimelineComponentProps) => (
-        <TestProviders>
-          <QueryBarTimeline {...props} />
-        </TestProviders>
-      );
-
-      const wrapper = mount(
-        <Proxy
-          applyKqlFilterQuery={mockApplyKqlFilterQuery}
-          browserFields={mockBrowserFields}
-          dataProviders={mockDataProviders}
-          filters={[]}
-          filterManager={new FilterManager(mockUiSettingsForFilterManager)}
-          filterQuery={{ expression: 'here: query', kind: 'kuery' }}
-          filterQueryDraft={{ expression: 'here: query', kind: 'kuery' }}
-          from={0}
-          fromStr={DEFAULT_FROM}
-          to={1}
-          toStr={DEFAULT_TO}
-          kqlMode="search"
-          indexPattern={mockIndexPattern}
-          isRefreshPaused={true}
-          refreshInterval={3000}
-          savedQueryId={null}
-          setFilters={mockSetFilters}
-          setKqlFilterQueryDraft={mockSetKqlFilterQueryDraft}
-          setSavedQueryId={mockSetSavedQueryId}
-          timelineId="timeline-real-id"
-          updateReduxTime={mockUpdateReduxTime}
-        />
-      );
-      const queryBarProps = wrapper.find(QueryBar).props();
-      const onChangedQueryRef = queryBarProps.onChangedQuery;
-      const onSubmitQueryRef = queryBarProps.onSubmitQuery;
-      const onSavedQueryRef = queryBarProps.onSavedQuery;
-
-      wrapper.setProps({ filterQuery: { expression: 'new: one', kind: 'kuery' } });
-      wrapper.update();
-
-      expect(onSubmitQueryRef).not.toEqual(wrapper.find(QueryBar).props().onSubmitQuery);
-      expect(onChangedQueryRef).toEqual(wrapper.find(QueryBar).props().onChangedQuery);
-      expect(onSavedQueryRef).toEqual(wrapper.find(QueryBar).props().onSavedQuery);
-    });
-
-    test(' is only reference that changed when timelineId props get updated', () => {
-      const Proxy = (props: QueryBarTimelineComponentProps) => (
-        <TestProviders>
-          <QueryBarTimeline {...props} />
-        </TestProviders>
-      );
-
-      const wrapper = mount(
-        <Proxy
-          applyKqlFilterQuery={mockApplyKqlFilterQuery}
-          browserFields={mockBrowserFields}
-          dataProviders={mockDataProviders}
-          filters={[]}
-          filterManager={new FilterManager(mockUiSettingsForFilterManager)}
-          filterQuery={{ expression: 'here: query', kind: 'kuery' }}
-          filterQueryDraft={{ expression: 'here: query', kind: 'kuery' }}
-          from={0}
-          fromStr={DEFAULT_FROM}
-          to={1}
-          toStr={DEFAULT_TO}
-          kqlMode="search"
-          indexPattern={mockIndexPattern}
-          isRefreshPaused={true}
-          refreshInterval={3000}
-          savedQueryId={null}
-          setFilters={mockSetFilters}
-          setKqlFilterQueryDraft={mockSetKqlFilterQueryDraft}
-          setSavedQueryId={mockSetSavedQueryId}
-          timelineId="timeline-real-id"
-          updateReduxTime={mockUpdateReduxTime}
-        />
-      );
-      const queryBarProps = wrapper.find(QueryBar).props();
-      const onChangedQueryRef = queryBarProps.onChangedQuery;
-      const onSubmitQueryRef = queryBarProps.onSubmitQuery;
-      const onSavedQueryRef = queryBarProps.onSavedQuery;
-
-      wrapper.setProps({ timelineId: 'new-timeline' });
-      wrapper.update();
-
-      expect(onSubmitQueryRef).not.toEqual(wrapper.find(QueryBar).props().onSubmitQuery);
-      expect(onChangedQueryRef).toEqual(wrapper.find(QueryBar).props().onChangedQuery);
-      expect(onSavedQueryRef).toEqual(wrapper.find(QueryBar).props().onSavedQuery);
-    });
-  });
-
-  describe('#onSavedQuery', () => {
-    test('is only reference that changed when dataProviders props get updated', () => {
-      const Proxy = (props: QueryBarTimelineComponentProps) => (
-        <TestProviders>
-          <QueryBarTimeline {...props} />
-        </TestProviders>
-      );
-
-      const wrapper = mount(
-        <Proxy
-          applyKqlFilterQuery={mockApplyKqlFilterQuery}
-          browserFields={mockBrowserFields}
-          dataProviders={mockDataProviders}
-          filters={[]}
-          filterManager={new FilterManager(mockUiSettingsForFilterManager)}
-          filterQuery={{ expression: 'here: query', kind: 'kuery' }}
-          filterQueryDraft={{ expression: 'here: query', kind: 'kuery' }}
-          from={0}
-          fromStr={DEFAULT_FROM}
-          to={1}
-          toStr={DEFAULT_TO}
-          kqlMode="search"
-          indexPattern={mockIndexPattern}
-          isRefreshPaused={true}
-          refreshInterval={3000}
-          savedQueryId={null}
-          setFilters={mockSetFilters}
-          setKqlFilterQueryDraft={mockSetKqlFilterQueryDraft}
-          setSavedQueryId={mockSetSavedQueryId}
-          timelineId="timeline-real-id"
-          updateReduxTime={mockUpdateReduxTime}
-        />
-      );
-      const queryBarProps = wrapper.find(QueryBar).props();
-      const onChangedQueryRef = queryBarProps.onChangedQuery;
-      const onSubmitQueryRef = queryBarProps.onSubmitQuery;
-      const onSavedQueryRef = queryBarProps.onSavedQuery;
-
-      wrapper.setProps({ dataProviders: mockDataProviders.slice(1, 0) });
-      wrapper.update();
-
-      expect(onSavedQueryRef).not.toEqual(wrapper.find(QueryBar).props().onSavedQuery);
-      expect(onChangedQueryRef).toEqual(wrapper.find(QueryBar).props().onChangedQuery);
-      expect(onSubmitQueryRef).toEqual(wrapper.find(QueryBar).props().onSubmitQuery);
-    });
-
-    test('is only reference that changed when savedQueryId props get updated', () => {
-      const Proxy = (props: QueryBarTimelineComponentProps) => (
-        <TestProviders>
-          <QueryBarTimeline {...props} />
-        </TestProviders>
-      );
-
-      const wrapper = mount(
-        <Proxy
-          applyKqlFilterQuery={mockApplyKqlFilterQuery}
-          browserFields={mockBrowserFields}
-          dataProviders={mockDataProviders}
-          filters={[]}
-          filterManager={new FilterManager(mockUiSettingsForFilterManager)}
-          filterQuery={{ expression: 'here: query', kind: 'kuery' }}
-          filterQueryDraft={{ expression: 'here: query', kind: 'kuery' }}
-          from={0}
-          fromStr={DEFAULT_FROM}
-          to={1}
-          toStr={DEFAULT_TO}
-          kqlMode="search"
-          indexPattern={mockIndexPattern}
-          isRefreshPaused={true}
-          refreshInterval={3000}
-          savedQueryId={null}
-          setFilters={mockSetFilters}
-          setKqlFilterQueryDraft={mockSetKqlFilterQueryDraft}
-          setSavedQueryId={mockSetSavedQueryId}
-          timelineId="timeline-real-id"
-          updateReduxTime={mockUpdateReduxTime}
-        />
-      );
-      const queryBarProps = wrapper.find(QueryBar).props();
-      const onChangedQueryRef = queryBarProps.onChangedQuery;
-      const onSubmitQueryRef = queryBarProps.onSubmitQuery;
-      const onSavedQueryRef = queryBarProps.onSavedQuery;
-
-      wrapper.setProps({
-        savedQueryId: 'new',
-      });
-      wrapper.update();
-
-      expect(onSavedQueryRef).not.toEqual(wrapper.find(QueryBar).props().onSavedQuery);
-      expect(onChangedQueryRef).toEqual(wrapper.find(QueryBar).props().onChangedQuery);
-      expect(onSubmitQueryRef).toEqual(wrapper.find(QueryBar).props().onSubmitQuery);
-    });
-  });
-
-  describe('#getDataProviderFilter', () => {
-    test('returns valid data provider filter with a simple bool data provider', () => {
-      const dataProvidersDsl = convertKueryToElasticSearchQuery(
-        buildGlobalQuery(mockDataProviders.slice(0, 1), mockBrowserFields),
-        mockIndexPattern
-      );
-      const filter = getDataProviderFilter(dataProvidersDsl);
-      expect(filter).toEqual({
-        $state: {
-          store: 'appState',
-        },
-        bool: {
-          minimum_should_match: 1,
-          should: [
-            {
-              match_phrase: {
-                name: 'Provider 1',
-              },
-            },
-          ],
-        },
-        meta: {
-          alias: 'timeline-filter-drop-area',
-          controlledBy: 'timeline-filter-drop-area',
-          disabled: false,
-          key: 'bool',
-          negate: false,
-          type: 'custom',
-          value:
-            '{"bool":{"should":[{"match_phrase":{"name":"Provider 1"}}],"minimum_should_match":1}}',
-        },
-      });
-    });
-
-    test('returns valid data provider filter with an exists operator', () => {
-      const dataProvidersDsl = convertKueryToElasticSearchQuery(
-        buildGlobalQuery(
-          [
-            {
-              id: `id-exists`,
-              name,
-              enabled: true,
-              excluded: false,
-              kqlQuery: '',
-              queryMatch: {
-                field: 'host.name',
-                value: '',
-                operator: ':*',
-              },
-              and: [],
-            },
-          ],
-          mockBrowserFields
-        ),
-        mockIndexPattern
-      );
-      const filter = getDataProviderFilter(dataProvidersDsl);
-      expect(filter).toEqual({
-        $state: {
-          store: 'appState',
-        },
-        bool: {
-          minimum_should_match: 1,
-          should: [
-            {
-              exists: {
-                field: 'host.name',
-              },
-            },
-          ],
-        },
-        meta: {
-          alias: 'timeline-filter-drop-area',
-          controlledBy: 'timeline-filter-drop-area',
-          disabled: false,
-          key: 'bool',
-          negate: false,
-          type: 'custom',
-          value: '{"bool":{"should":[{"exists":{"field":"host.name"}}],"minimum_should_match":1}}',
-        },
-      });
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/timeline/query_bar/index.tsx b/x-pack/plugins/siem/public/components/timeline/query_bar/index.tsx
deleted file mode 100644
index 7d2b4f71183dde..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/query_bar/index.tsx
+++ /dev/null
@@ -1,319 +0,0 @@
-/*
- * 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 { isEmpty } from 'lodash/fp';
-import React, { memo, useCallback, useState, useEffect } from 'react';
-import { Subscription } from 'rxjs';
-import deepEqual from 'fast-deep-equal';
-
-import {
-  IIndexPattern,
-  Query,
-  Filter,
-  esFilters,
-  FilterManager,
-  SavedQuery,
-  SavedQueryTimeFilter,
-} from '../../../../../../../src/plugins/data/public';
-
-import { BrowserFields } from '../../../containers/source';
-import { convertKueryToElasticSearchQuery } from '../../../lib/keury';
-import { KueryFilterQuery, KueryFilterQueryKind } from '../../../store';
-import { KqlMode } from '../../../store/timeline/model';
-import { useSavedQueryServices } from '../../../utils/saved_query_services';
-import { DispatchUpdateReduxTime } from '../../super_date_picker';
-import { QueryBar } from '../../query_bar';
-import { DataProvider } from '../data_providers/data_provider';
-import { buildGlobalQuery } from '../helpers';
-
-export interface QueryBarTimelineComponentProps {
-  applyKqlFilterQuery: (expression: string, kind: KueryFilterQueryKind) => void;
-  browserFields: BrowserFields;
-  dataProviders: DataProvider[];
-  filters: Filter[];
-  filterManager: FilterManager;
-  filterQuery: KueryFilterQuery;
-  filterQueryDraft: KueryFilterQuery;
-  from: number;
-  fromStr: string;
-  kqlMode: KqlMode;
-  indexPattern: IIndexPattern;
-  isRefreshPaused: boolean;
-  refreshInterval: number;
-  savedQueryId: string | null;
-  setFilters: (filters: Filter[]) => void;
-  setKqlFilterQueryDraft: (expression: string, kind: KueryFilterQueryKind) => void;
-  setSavedQueryId: (savedQueryId: string | null) => void;
-  timelineId: string;
-  to: number;
-  toStr: string;
-  updateReduxTime: DispatchUpdateReduxTime;
-}
-
-const timelineFilterDropArea = 'timeline-filter-drop-area';
-
-export const QueryBarTimeline = memo<QueryBarTimelineComponentProps>(
-  ({
-    applyKqlFilterQuery,
-    browserFields,
-    dataProviders,
-    filters,
-    filterManager,
-    filterQuery,
-    filterQueryDraft,
-    from,
-    fromStr,
-    kqlMode,
-    indexPattern,
-    isRefreshPaused,
-    savedQueryId,
-    setFilters,
-    setKqlFilterQueryDraft,
-    setSavedQueryId,
-    refreshInterval,
-    timelineId,
-    to,
-    toStr,
-    updateReduxTime,
-  }) => {
-    const [dateRangeFrom, setDateRangeFrom] = useState<string>(
-      fromStr != null ? fromStr : new Date(from).toISOString()
-    );
-    const [dateRangeTo, setDateRangTo] = useState<string>(
-      toStr != null ? toStr : new Date(to).toISOString()
-    );
-
-    const [savedQuery, setSavedQuery] = useState<SavedQuery | null>(null);
-    const [filterQueryConverted, setFilterQueryConverted] = useState<Query>({
-      query: filterQuery != null ? filterQuery.expression : '',
-      language: filterQuery != null ? filterQuery.kind : 'kuery',
-    });
-    const [queryBarFilters, setQueryBarFilters] = useState<Filter[]>([]);
-    const [dataProvidersDsl, setDataProvidersDsl] = useState<string>(
-      convertKueryToElasticSearchQuery(buildGlobalQuery(dataProviders, browserFields), indexPattern)
-    );
-    const savedQueryServices = useSavedQueryServices();
-
-    useEffect(() => {
-      let isSubscribed = true;
-      const subscriptions = new Subscription();
-      filterManager.setFilters(filters);
-
-      subscriptions.add(
-        filterManager.getUpdates$().subscribe({
-          next: () => {
-            if (isSubscribed) {
-              const filterWithoutDropArea = filterManager
-                .getFilters()
-                .filter((f: Filter) => f.meta.controlledBy !== timelineFilterDropArea);
-              setFilters(filterWithoutDropArea);
-              setQueryBarFilters(filterWithoutDropArea);
-            }
-          },
-        })
-      );
-
-      return () => {
-        isSubscribed = false;
-        subscriptions.unsubscribe();
-      };
-    }, []);
-
-    useEffect(() => {
-      const filterWithoutDropArea = filterManager
-        .getFilters()
-        .filter((f: Filter) => f.meta.controlledBy !== timelineFilterDropArea);
-      if (!deepEqual(filters, filterWithoutDropArea)) {
-        filterManager.setFilters(filters);
-      }
-    }, [filters]);
-
-    useEffect(() => {
-      setFilterQueryConverted({
-        query: filterQuery != null ? filterQuery.expression : '',
-        language: filterQuery != null ? filterQuery.kind : 'kuery',
-      });
-    }, [filterQuery]);
-
-    useEffect(() => {
-      setDataProvidersDsl(
-        convertKueryToElasticSearchQuery(
-          buildGlobalQuery(dataProviders, browserFields),
-          indexPattern
-        )
-      );
-    }, [dataProviders, browserFields, indexPattern]);
-
-    useEffect(() => {
-      if (fromStr != null && toStr != null) {
-        setDateRangeFrom(fromStr);
-        setDateRangTo(toStr);
-      } else if (from != null && to != null) {
-        setDateRangeFrom(new Date(from).toISOString());
-        setDateRangTo(new Date(to).toISOString());
-      }
-    }, [from, fromStr, to, toStr]);
-
-    useEffect(() => {
-      let isSubscribed = true;
-      async function setSavedQueryByServices() {
-        if (savedQueryId != null && savedQueryServices != null) {
-          try {
-            // The getSavedQuery function will throw a promise rejection in
-            // src/legacy/core_plugins/data/public/search/search_bar/lib/saved_query_service.ts
-            // if the savedObjectsClient is undefined. This is happening in a test
-            // so I wrapped this in a try catch to keep the unhandled promise rejection
-            // warning from appearing in tests.
-            const mySavedQuery = await savedQueryServices.getSavedQuery(savedQueryId);
-            if (isSubscribed && mySavedQuery != null) {
-              setSavedQuery({
-                ...mySavedQuery,
-                attributes: {
-                  ...mySavedQuery.attributes,
-                  filters: filters.filter(f => f.meta.controlledBy !== timelineFilterDropArea),
-                },
-              });
-            }
-          } catch (exc) {
-            setSavedQuery(null);
-          }
-        } else if (isSubscribed) {
-          setSavedQuery(null);
-        }
-      }
-      setSavedQueryByServices();
-      return () => {
-        isSubscribed = false;
-      };
-    }, [savedQueryId]);
-
-    const onChangedQuery = useCallback(
-      (newQuery: Query) => {
-        if (
-          filterQueryDraft == null ||
-          (filterQueryDraft != null && filterQueryDraft.expression !== newQuery.query) ||
-          filterQueryDraft.kind !== newQuery.language
-        ) {
-          setKqlFilterQueryDraft(
-            newQuery.query as string,
-            newQuery.language as KueryFilterQueryKind
-          );
-        }
-      },
-      [filterQueryDraft]
-    );
-
-    const onSubmitQuery = useCallback(
-      (newQuery: Query, timefilter?: SavedQueryTimeFilter) => {
-        if (
-          filterQuery == null ||
-          (filterQuery != null && filterQuery.expression !== newQuery.query) ||
-          filterQuery.kind !== newQuery.language
-        ) {
-          setKqlFilterQueryDraft(
-            newQuery.query as string,
-            newQuery.language as KueryFilterQueryKind
-          );
-          applyKqlFilterQuery(newQuery.query as string, newQuery.language as KueryFilterQueryKind);
-        }
-        if (timefilter != null) {
-          const isQuickSelection = timefilter.from.includes('now') || timefilter.to.includes('now');
-
-          updateReduxTime({
-            id: 'timeline',
-            end: timefilter.to,
-            start: timefilter.from,
-            isInvalid: false,
-            isQuickSelection,
-            timelineId,
-          });
-        }
-      },
-      [filterQuery, timelineId]
-    );
-
-    const onSavedQuery = useCallback(
-      (newSavedQuery: SavedQuery | null) => {
-        if (newSavedQuery != null) {
-          if (newSavedQuery.id !== savedQueryId) {
-            setSavedQueryId(newSavedQuery.id);
-          }
-          if (savedQueryServices != null && dataProvidersDsl !== '') {
-            const dataProviderFilterExists =
-              newSavedQuery.attributes.filters != null
-                ? newSavedQuery.attributes.filters.findIndex(
-                    f => f.meta.controlledBy === timelineFilterDropArea
-                  )
-                : -1;
-            savedQueryServices.saveQuery(
-              {
-                ...newSavedQuery.attributes,
-                filters:
-                  newSavedQuery.attributes.filters != null
-                    ? dataProviderFilterExists > -1
-                      ? [
-                          ...newSavedQuery.attributes.filters.slice(0, dataProviderFilterExists),
-                          getDataProviderFilter(dataProvidersDsl),
-                          ...newSavedQuery.attributes.filters.slice(dataProviderFilterExists + 1),
-                        ]
-                      : [
-                          ...newSavedQuery.attributes.filters,
-                          getDataProviderFilter(dataProvidersDsl),
-                        ]
-                    : [],
-              },
-              {
-                overwrite: true,
-              }
-            );
-          }
-        } else {
-          setSavedQueryId(null);
-        }
-      },
-      [dataProvidersDsl, savedQueryId, savedQueryServices]
-    );
-
-    return (
-      <QueryBar
-        dateRangeFrom={dateRangeFrom}
-        dateRangeTo={dateRangeTo}
-        hideSavedQuery={kqlMode === 'search'}
-        indexPattern={indexPattern}
-        isRefreshPaused={isRefreshPaused}
-        filterQuery={filterQueryConverted}
-        filterManager={filterManager}
-        filters={queryBarFilters}
-        onChangedQuery={onChangedQuery}
-        onSubmitQuery={onSubmitQuery}
-        refreshInterval={refreshInterval}
-        savedQuery={savedQuery}
-        onSavedQuery={onSavedQuery}
-        dataTestSubj={'timelineQueryInput'}
-      />
-    );
-  }
-);
-
-export const getDataProviderFilter = (dataProviderDsl: string): Filter => {
-  const dslObject = JSON.parse(dataProviderDsl);
-  const key = Object.keys(dslObject);
-  return {
-    ...dslObject,
-    meta: {
-      alias: timelineFilterDropArea,
-      controlledBy: timelineFilterDropArea,
-      negate: false,
-      disabled: false,
-      type: 'custom',
-      key: isEmpty(key) ? 'bool' : key[0],
-      value: dataProviderDsl,
-    },
-    $state: {
-      store: esFilters.FilterStateStore.APP_STATE,
-    },
-  };
-};
diff --git a/x-pack/plugins/siem/public/components/timeline/search_or_filter/helpers.tsx b/x-pack/plugins/siem/public/components/timeline/search_or_filter/helpers.tsx
deleted file mode 100644
index 5db453988cbb8e..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/search_or_filter/helpers.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-/*
- * 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 { EuiSpacer, EuiText } from '@elastic/eui';
-import React from 'react';
-import styled from 'styled-components';
-
-import { AndOrBadge } from '../../and_or_badge';
-
-import * as i18n from './translations';
-import { KqlMode } from '../../../store/timeline/model';
-
-const AndOrContainer = styled.div`
-  position: relative;
-  top: -1px;
-`;
-
-AndOrContainer.displayName = 'AndOrContainer';
-
-interface ModeProperties {
-  mode: KqlMode;
-  description: string;
-  kqlBarTooltip: string;
-  placeholder: string;
-  selectText: string;
-}
-
-export const modes: { [key in KqlMode]: ModeProperties } = {
-  filter: {
-    mode: 'filter',
-    description: i18n.FILTER_DESCRIPTION,
-    kqlBarTooltip: i18n.FILTER_KQL_TOOLTIP,
-    placeholder: i18n.FILTER_KQL_PLACEHOLDER,
-    selectText: i18n.FILTER_KQL_SELECTED_TEXT,
-  },
-  search: {
-    mode: 'search',
-    description: i18n.SEARCH_DESCRIPTION,
-    kqlBarTooltip: i18n.SEARCH_KQL_TOOLTIP,
-    placeholder: i18n.SEARCH_KQL_PLACEHOLDER,
-    selectText: i18n.SEARCH_KQL_SELECTED_TEXT,
-  },
-};
-
-export const options = [
-  {
-    value: modes.filter.mode,
-    inputDisplay: (
-      <AndOrContainer>
-        <AndOrBadge type="and" />
-        {modes.filter.selectText}
-      </AndOrContainer>
-    ),
-    dropdownDisplay: (
-      <>
-        <AndOrBadge type="and" />
-        <strong>{modes.filter.selectText}</strong>
-        <EuiSpacer size="xs" />
-        <EuiText size="s" color="subdued">
-          <p className="euiTextColor--subdued">{modes.filter.description}</p>
-        </EuiText>
-      </>
-    ),
-  },
-  {
-    value: modes.search.mode,
-    inputDisplay: (
-      <AndOrContainer>
-        <AndOrBadge type="or" />
-        {modes.search.selectText}
-      </AndOrContainer>
-    ),
-    dropdownDisplay: (
-      <>
-        <AndOrBadge type="or" />
-        <strong>{modes.search.selectText}</strong>
-        <EuiSpacer size="xs" />
-        <EuiText size="s" color="subdued">
-          <p className="euiTextColor--subdued">{modes.search.description}</p>
-        </EuiText>
-      </>
-    ),
-  },
-];
-
-export const getPlaceholderText = (kqlMode: KqlMode): string =>
-  kqlMode === 'filter' ? i18n.FILTER_KQL_PLACEHOLDER : i18n.SEARCH_KQL_PLACEHOLDER;
diff --git a/x-pack/plugins/siem/public/components/timeline/search_or_filter/index.tsx b/x-pack/plugins/siem/public/components/timeline/search_or_filter/index.tsx
deleted file mode 100644
index fa92ef9ce59652..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/search_or_filter/index.tsx
+++ /dev/null
@@ -1,239 +0,0 @@
-/*
- * 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 { getOr } from 'lodash/fp';
-import React, { useCallback } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
-import { Dispatch } from 'redux';
-import deepEqual from 'fast-deep-equal';
-
-import { Filter, FilterManager, IIndexPattern } from '../../../../../../../src/plugins/data/public';
-import { BrowserFields } from '../../../containers/source';
-import { convertKueryToElasticSearchQuery } from '../../../lib/keury';
-import {
-  KueryFilterQuery,
-  SerializedFilterQuery,
-  State,
-  timelineSelectors,
-  inputsModel,
-  inputsSelectors,
-} from '../../../store';
-import { timelineActions } from '../../../store/actions';
-import { KqlMode, TimelineModel, EventType } from '../../../store/timeline/model';
-import { timelineDefaults } from '../../../store/timeline/defaults';
-import { dispatchUpdateReduxTime } from '../../super_date_picker';
-import { SearchOrFilter } from './search_or_filter';
-
-interface OwnProps {
-  browserFields: BrowserFields;
-  filterManager: FilterManager;
-  indexPattern: IIndexPattern;
-  timelineId: string;
-}
-
-type Props = OwnProps & PropsFromRedux;
-
-const StatefulSearchOrFilterComponent = React.memo<Props>(
-  ({
-    applyKqlFilterQuery,
-    browserFields,
-    dataProviders,
-    eventType,
-    filters,
-    filterManager,
-    filterQuery,
-    filterQueryDraft,
-    from,
-    fromStr,
-    indexPattern,
-    isRefreshPaused,
-    kqlMode,
-    refreshInterval,
-    savedQueryId,
-    setFilters,
-    setKqlFilterQueryDraft,
-    setSavedQueryId,
-    timelineId,
-    to,
-    toStr,
-    updateEventType,
-    updateKqlMode,
-    updateReduxTime,
-  }) => {
-    const applyFilterQueryFromKueryExpression = useCallback(
-      (expression: string, kind) =>
-        applyKqlFilterQuery({
-          id: timelineId,
-          filterQuery: {
-            kuery: {
-              kind,
-              expression,
-            },
-            serializedQuery: convertKueryToElasticSearchQuery(expression, indexPattern),
-          },
-        }),
-      [indexPattern, timelineId]
-    );
-
-    const setFilterQueryDraftFromKueryExpression = useCallback(
-      (expression: string, kind) =>
-        setKqlFilterQueryDraft({
-          id: timelineId,
-          filterQueryDraft: {
-            kind,
-            expression,
-          },
-        }),
-      [timelineId]
-    );
-
-    const setFiltersInTimeline = useCallback(
-      (newFilters: Filter[]) =>
-        setFilters({
-          id: timelineId,
-          filters: newFilters,
-        }),
-      [timelineId]
-    );
-
-    const setSavedQueryInTimeline = useCallback(
-      (newSavedQueryId: string | null) =>
-        setSavedQueryId({
-          id: timelineId,
-          savedQueryId: newSavedQueryId,
-        }),
-      [timelineId]
-    );
-
-    const handleUpdateEventType = useCallback(
-      (newEventType: EventType) =>
-        updateEventType({
-          id: timelineId,
-          eventType: newEventType,
-        }),
-      [timelineId]
-    );
-
-    return (
-      <SearchOrFilter
-        applyKqlFilterQuery={applyFilterQueryFromKueryExpression}
-        browserFields={browserFields}
-        dataProviders={dataProviders}
-        eventType={eventType}
-        filters={filters}
-        filterManager={filterManager}
-        filterQuery={filterQuery}
-        filterQueryDraft={filterQueryDraft}
-        from={from}
-        fromStr={fromStr}
-        indexPattern={indexPattern}
-        isRefreshPaused={isRefreshPaused}
-        kqlMode={kqlMode!}
-        refreshInterval={refreshInterval}
-        savedQueryId={savedQueryId}
-        setFilters={setFiltersInTimeline}
-        setKqlFilterQueryDraft={setFilterQueryDraftFromKueryExpression!}
-        setSavedQueryId={setSavedQueryInTimeline}
-        timelineId={timelineId}
-        to={to}
-        toStr={toStr}
-        updateEventType={handleUpdateEventType}
-        updateKqlMode={updateKqlMode!}
-        updateReduxTime={updateReduxTime}
-      />
-    );
-  },
-  (prevProps, nextProps) => {
-    return (
-      prevProps.eventType === nextProps.eventType &&
-      prevProps.filterManager === nextProps.filterManager &&
-      prevProps.from === nextProps.from &&
-      prevProps.fromStr === nextProps.fromStr &&
-      prevProps.to === nextProps.to &&
-      prevProps.toStr === nextProps.toStr &&
-      prevProps.isRefreshPaused === nextProps.isRefreshPaused &&
-      prevProps.refreshInterval === nextProps.refreshInterval &&
-      prevProps.timelineId === nextProps.timelineId &&
-      deepEqual(prevProps.browserFields, nextProps.browserFields) &&
-      deepEqual(prevProps.dataProviders, nextProps.dataProviders) &&
-      deepEqual(prevProps.filters, nextProps.filters) &&
-      deepEqual(prevProps.filterQuery, nextProps.filterQuery) &&
-      deepEqual(prevProps.filterQueryDraft, nextProps.filterQueryDraft) &&
-      deepEqual(prevProps.indexPattern, nextProps.indexPattern) &&
-      deepEqual(prevProps.kqlMode, nextProps.kqlMode) &&
-      deepEqual(prevProps.savedQueryId, nextProps.savedQueryId) &&
-      deepEqual(prevProps.timelineId, nextProps.timelineId)
-    );
-  }
-);
-StatefulSearchOrFilterComponent.displayName = 'StatefulSearchOrFilterComponent';
-
-const makeMapStateToProps = () => {
-  const getTimeline = timelineSelectors.getTimelineByIdSelector();
-  const getKqlFilterQueryDraft = timelineSelectors.getKqlFilterQueryDraftSelector();
-  const getKqlFilterQuery = timelineSelectors.getKqlFilterKuerySelector();
-  const getInputsTimeline = inputsSelectors.getTimelineSelector();
-  const getInputsPolicy = inputsSelectors.getTimelinePolicySelector();
-  const mapStateToProps = (state: State, { timelineId }: OwnProps) => {
-    const timeline: TimelineModel = getTimeline(state, timelineId) ?? timelineDefaults;
-    const input: inputsModel.InputsRange = getInputsTimeline(state);
-    const policy: inputsModel.Policy = getInputsPolicy(state);
-    return {
-      dataProviders: timeline.dataProviders,
-      eventType: timeline.eventType ?? 'raw',
-      filterQuery: getKqlFilterQuery(state, timelineId)!,
-      filterQueryDraft: getKqlFilterQueryDraft(state, timelineId)!,
-      filters: timeline.filters!,
-      from: input.timerange.from,
-      fromStr: input.timerange.fromStr!,
-      isRefreshPaused: policy.kind === 'manual',
-      kqlMode: getOr('filter', 'kqlMode', timeline),
-      refreshInterval: policy.duration,
-      savedQueryId: getOr(null, 'savedQueryId', timeline),
-      to: input.timerange.to,
-      toStr: input.timerange.toStr!,
-    };
-  };
-  return mapStateToProps;
-};
-
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  applyKqlFilterQuery: ({ id, filterQuery }: { id: string; filterQuery: SerializedFilterQuery }) =>
-    dispatch(
-      timelineActions.applyKqlFilterQuery({
-        id,
-        filterQuery,
-      })
-    ),
-  updateEventType: ({ id, eventType }: { id: string; eventType: EventType }) =>
-    dispatch(timelineActions.updateEventType({ id, eventType })),
-  updateKqlMode: ({ id, kqlMode }: { id: string; kqlMode: KqlMode }) =>
-    dispatch(timelineActions.updateKqlMode({ id, kqlMode })),
-  setKqlFilterQueryDraft: ({
-    id,
-    filterQueryDraft,
-  }: {
-    id: string;
-    filterQueryDraft: KueryFilterQuery;
-  }) =>
-    dispatch(
-      timelineActions.setKqlFilterQueryDraft({
-        id,
-        filterQueryDraft,
-      })
-    ),
-  setSavedQueryId: ({ id, savedQueryId }: { id: string; savedQueryId: string | null }) =>
-    dispatch(timelineActions.setSavedQueryId({ id, savedQueryId })),
-  setFilters: ({ id, filters }: { id: string; filters: Filter[] }) =>
-    dispatch(timelineActions.setFilters({ id, filters })),
-  updateReduxTime: dispatchUpdateReduxTime(dispatch),
-});
-
-export const connector = connect(makeMapStateToProps, mapDispatchToProps);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-export const StatefulSearchOrFilter = connector(StatefulSearchOrFilterComponent);
diff --git a/x-pack/plugins/siem/public/components/timeline/selectable_timeline/index.tsx b/x-pack/plugins/siem/public/components/timeline/selectable_timeline/index.tsx
deleted file mode 100644
index 964bb2061333d4..00000000000000
--- a/x-pack/plugins/siem/public/components/timeline/selectable_timeline/index.tsx
+++ /dev/null
@@ -1,288 +0,0 @@
-/*
- * 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 {
-  EuiSelectable,
-  EuiHighlight,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiIcon,
-  EuiTextColor,
-  EuiSelectableOption,
-  EuiPortal,
-  EuiFilterGroup,
-  EuiFilterButton,
-} from '@elastic/eui';
-import { isEmpty } from 'lodash/fp';
-import React, { memo, useCallback, useMemo, useState, useEffect } from 'react';
-import { ListProps } from 'react-virtualized';
-import styled from 'styled-components';
-
-import { useGetAllTimeline } from '../../../containers/timeline/all';
-import { SortFieldTimeline, Direction } from '../../../graphql/types';
-import { TimelineType, TimelineTypeLiteralWithNull } from '../../../../common/types/timeline';
-
-import { isUntitled } from '../../open_timeline/helpers';
-import * as i18nTimeline from '../../open_timeline/translations';
-import { OpenTimelineResult } from '../../open_timeline/types';
-import { getEmptyTagValue } from '../../empty_value';
-
-import * as i18n from '../translations';
-
-const MyEuiFlexItem = styled(EuiFlexItem)`
-  display: inline-block;
-  max-width: 296px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-
-const MyEuiFlexGroup = styled(EuiFlexGroup)`
-  padding 0px 4px;
-`;
-
-const EuiSelectableContainer = styled.div<{ isLoading: boolean }>`
-  .euiSelectable {
-    .euiFormControlLayout__childrenWrapper {
-      display: flex;
-    }
-    ${({ isLoading }) => `${
-      isLoading
-        ? `
-      .euiFormControlLayoutIcons {
-        display: none;
-      }
-      .euiFormControlLayoutIcons.euiFormControlLayoutIcons--right {
-        display: block;
-        left: 12px;
-        top: 12px;
-      }`
-        : ''
-    }
-    `}
-  }
-`;
-
-const ORIGINAL_PAGE_SIZE = 50;
-const POPOVER_HEIGHT = 260;
-const TIMELINE_ITEM_HEIGHT = 50;
-
-export interface GetSelectableOptions {
-  timelines: OpenTimelineResult[];
-  onlyFavorites: boolean;
-  timelineType?: TimelineTypeLiteralWithNull;
-  searchTimelineValue: string;
-}
-
-interface SelectableTimelineProps {
-  hideUntitled?: boolean;
-  getSelectableOptions: ({
-    timelines,
-    onlyFavorites,
-    timelineType,
-    searchTimelineValue,
-  }: GetSelectableOptions) => EuiSelectableOption[];
-  onClosePopover: () => void;
-  onTimelineChange: (timelineTitle: string, timelineId: string | null) => void;
-}
-
-const SelectableTimelineComponent: React.FC<SelectableTimelineProps> = ({
-  hideUntitled = false,
-  getSelectableOptions,
-  onClosePopover,
-  onTimelineChange,
-}) => {
-  const [pageSize, setPageSize] = useState(ORIGINAL_PAGE_SIZE);
-  const [heightTrigger, setHeightTrigger] = useState(0);
-  const [searchTimelineValue, setSearchTimelineValue] = useState('');
-  const [onlyFavorites, setOnlyFavorites] = useState(false);
-  const [searchRef, setSearchRef] = useState<HTMLElement | null>(null);
-  const { fetchAllTimeline, timelines, loading, totalCount: timelineCount } = useGetAllTimeline();
-
-  const onSearchTimeline = useCallback(val => {
-    setSearchTimelineValue(val);
-  }, []);
-
-  const handleOnToggleOnlyFavorites = useCallback(() => {
-    setOnlyFavorites(!onlyFavorites);
-  }, [onlyFavorites]);
-
-  const handleOnScroll = useCallback(
-    (
-      totalTimelines: number,
-      totalCount: number,
-      {
-        clientHeight,
-        scrollHeight,
-        scrollTop,
-      }: {
-        clientHeight: number;
-        scrollHeight: number;
-        scrollTop: number;
-      }
-    ) => {
-      if (totalTimelines < totalCount) {
-        const clientHeightTrigger = clientHeight * 1.2;
-        if (
-          scrollTop > 10 &&
-          scrollHeight - scrollTop < clientHeightTrigger &&
-          scrollHeight > heightTrigger
-        ) {
-          setHeightTrigger(scrollHeight);
-          setPageSize(pageSize + ORIGINAL_PAGE_SIZE);
-        }
-      }
-    },
-    [heightTrigger, pageSize]
-  );
-
-  const renderTimelineOption = useCallback((option, searchValue) => {
-    return (
-      <EuiFlexGroup
-        gutterSize="s"
-        justifyContent="spaceBetween"
-        alignItems="center"
-        responsive={false}
-      >
-        <EuiFlexItem grow={false}>
-          <EuiIcon type={`${option.checked === 'on' ? 'check' : 'none'}`} color="primary" />
-        </EuiFlexItem>
-        <EuiFlexItem grow={true}>
-          <EuiFlexGroup gutterSize="none" direction="column">
-            <MyEuiFlexItem data-test-subj="timeline" grow={false}>
-              <EuiHighlight search={searchValue}>
-                {isUntitled(option) ? i18nTimeline.UNTITLED_TIMELINE : option.title}
-              </EuiHighlight>
-            </MyEuiFlexItem>
-            <MyEuiFlexItem grow={false}>
-              <EuiTextColor color="subdued" component="span">
-                <small>
-                  {option.description != null && option.description.trim().length > 0
-                    ? option.description
-                    : getEmptyTagValue()}
-                </small>
-              </EuiTextColor>
-            </MyEuiFlexItem>
-          </EuiFlexGroup>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiIcon
-            type={`${
-              option.favorite != null && isEmpty(option.favorite) ? 'starEmpty' : 'starFilled'
-            }`}
-          />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    );
-  }, []);
-
-  const handleTimelineChange = useCallback(
-    options => {
-      const selectedTimeline = options.filter(
-        (option: { checked: string }) => option.checked === 'on'
-      );
-      if (selectedTimeline != null && selectedTimeline.length > 0) {
-        onTimelineChange(
-          isEmpty(selectedTimeline[0].title)
-            ? i18nTimeline.UNTITLED_TIMELINE
-            : selectedTimeline[0].title,
-          selectedTimeline[0].id === '-1' ? null : selectedTimeline[0].id
-        );
-      }
-      onClosePopover();
-    },
-    [onClosePopover, onTimelineChange]
-  );
-
-  const favoritePortal = useMemo(
-    () =>
-      searchRef != null ? (
-        <EuiPortal insert={{ sibling: searchRef, position: 'after' }}>
-          <MyEuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
-            <EuiFlexItem grow={false}>
-              <EuiFilterGroup>
-                <EuiFilterButton
-                  size="l"
-                  data-test-subj="only-favorites-toggle"
-                  hasActiveFilters={onlyFavorites}
-                  onClick={handleOnToggleOnlyFavorites}
-                >
-                  {i18nTimeline.ONLY_FAVORITES}
-                </EuiFilterButton>
-              </EuiFilterGroup>
-            </EuiFlexItem>
-          </MyEuiFlexGroup>
-        </EuiPortal>
-      ) : null,
-    [searchRef, onlyFavorites, handleOnToggleOnlyFavorites]
-  );
-
-  useEffect(() => {
-    fetchAllTimeline({
-      pageInfo: {
-        pageIndex: 1,
-        pageSize,
-      },
-      search: searchTimelineValue,
-      sort: {
-        sortField: SortFieldTimeline.updated,
-        sortOrder: Direction.desc,
-      },
-      onlyUserFavorite: onlyFavorites,
-      timelineType: TimelineType.default,
-    });
-  }, [onlyFavorites, pageSize, searchTimelineValue]);
-
-  return (
-    <EuiSelectableContainer isLoading={loading}>
-      <EuiSelectable
-        height={POPOVER_HEIGHT}
-        isLoading={loading && timelines.length === 0}
-        listProps={{
-          rowHeight: TIMELINE_ITEM_HEIGHT,
-          showIcons: false,
-          virtualizedProps: ({
-            onScroll: handleOnScroll.bind(
-              null,
-              timelines.filter(t => !hideUntitled || t.title !== '').length,
-              timelineCount
-            ),
-          } as unknown) as ListProps,
-        }}
-        renderOption={renderTimelineOption}
-        onChange={handleTimelineChange}
-        searchable
-        searchProps={{
-          'data-test-subj': 'timeline-super-select-search-box',
-          isLoading: loading,
-          placeholder: i18n.SEARCH_BOX_TIMELINE_PLACEHOLDER,
-          onSearch: onSearchTimeline,
-          incremental: false,
-          inputRef: (ref: HTMLElement) => {
-            setSearchRef(ref);
-          },
-        }}
-        singleSelection={true}
-        options={getSelectableOptions({
-          timelines,
-          onlyFavorites,
-          searchTimelineValue,
-          timelineType: TimelineType.default,
-        })}
-      >
-        {(list, search) => (
-          <>
-            {search}
-            {favoritePortal}
-            {list}
-          </>
-        )}
-      </EuiSelectable>
-    </EuiSelectableContainer>
-  );
-};
-
-export const SelectableTimeline = memo(SelectableTimelineComponent);
diff --git a/x-pack/plugins/siem/public/components/top_n/helpers.ts b/x-pack/plugins/siem/public/components/top_n/helpers.ts
deleted file mode 100644
index 8d9ae48d29b691..00000000000000
--- a/x-pack/plugins/siem/public/components/top_n/helpers.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-/*
- * 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 { EventType } from '../../store/timeline/model';
-
-import * as i18n from './translations';
-
-export interface TopNOption {
-  inputDisplay: string;
-  value: EventType;
-  'data-test-subj': string;
-}
-
-/** A (stable) array containing only the 'All events' option */
-export const allEvents: TopNOption[] = [
-  {
-    value: 'all',
-    inputDisplay: i18n.ALL_EVENTS,
-    'data-test-subj': 'option-all',
-  },
-];
-
-/** A (stable) array containing only the 'Raw events' option */
-export const rawEvents: TopNOption[] = [
-  {
-    value: 'raw',
-    inputDisplay: i18n.RAW_EVENTS,
-    'data-test-subj': 'option-raw',
-  },
-];
-
-/** A (stable) array containing only the 'Signal events' option */
-export const signalEvents: TopNOption[] = [
-  {
-    value: 'signal',
-    inputDisplay: i18n.SIGNAL_EVENTS,
-    'data-test-subj': 'option-signal',
-  },
-];
-
-/** A (stable) array containing the default Top N options */
-export const defaultOptions = [...rawEvents, ...signalEvents];
-
-/**
- * Returns the options to be displayed in a Top N view select. When
- * an `activeTimelineEventType` is provided, an array containing
- * just one option (corresponding to `activeTimelineEventType`)
- * will be returned, to ensure the data displayed in the Top N
- * is always in sync with the `EventType` chosen by the user in
- * the active timeline.
- */
-export const getOptions = (activeTimelineEventType?: EventType): TopNOption[] => {
-  switch (activeTimelineEventType) {
-    case 'all':
-      return allEvents;
-    case 'raw':
-      return rawEvents;
-    case 'signal':
-      return signalEvents;
-    default:
-      return defaultOptions;
-  }
-};
diff --git a/x-pack/plugins/siem/public/components/top_n/index.test.tsx b/x-pack/plugins/siem/public/components/top_n/index.test.tsx
deleted file mode 100644
index 9325dcf499b2b4..00000000000000
--- a/x-pack/plugins/siem/public/components/top_n/index.test.tsx
+++ /dev/null
@@ -1,379 +0,0 @@
-/*
- * 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 { mount, ReactWrapper } from 'enzyme';
-import React from 'react';
-
-import { mockBrowserFields } from '../../containers/source/mock';
-import { apolloClientObservable, mockGlobalState, TestProviders } from '../../mock';
-import { createKibanaCoreStartMock } from '../../mock/kibana_core';
-import { FilterManager } from '../../../../../../src/plugins/data/public';
-import { createStore, State } from '../../store';
-import { TimelineContext, TimelineTypeContext } from '../timeline/timeline_context';
-
-import { Props } from './top_n';
-import { ACTIVE_TIMELINE_REDUX_ID, StatefulTopN } from '.';
-
-jest.mock('../../lib/kibana');
-
-const mockUiSettingsForFilterManager = createKibanaCoreStartMock().uiSettings;
-
-const field = 'process.name';
-const value = 'nice';
-
-const state: State = {
-  ...mockGlobalState,
-  inputs: {
-    ...mockGlobalState.inputs,
-    global: {
-      ...mockGlobalState.inputs.global,
-      query: {
-        query: 'host.name : end*',
-        language: 'kuery',
-      },
-      filters: [
-        {
-          meta: {
-            alias: null,
-            negate: false,
-            disabled: false,
-            type: 'phrase',
-            key: 'host.os.name',
-            params: {
-              query: 'Linux',
-            },
-          },
-          query: {
-            match: {
-              'host.os.name': {
-                query: 'Linux',
-                type: 'phrase',
-              },
-            },
-          },
-        },
-      ],
-    },
-    timeline: {
-      ...mockGlobalState.inputs.timeline,
-      timerange: {
-        kind: 'relative',
-        fromStr: 'now-24h',
-        toStr: 'now',
-        from: 1586835969047,
-        to: 1586922369047,
-      },
-    },
-  },
-  timeline: {
-    ...mockGlobalState.timeline,
-    timelineById: {
-      [ACTIVE_TIMELINE_REDUX_ID]: {
-        ...mockGlobalState.timeline.timelineById.test,
-        id: ACTIVE_TIMELINE_REDUX_ID,
-        dataProviders: [
-          {
-            id:
-              'draggable-badge-default-draggable-netflow-renderer-timeline-1-_qpBe3EBD7k-aQQL7v7--_qpBe3EBD7k-aQQL7v7--network_transport-tcp',
-            name: 'tcp',
-            enabled: true,
-            excluded: false,
-            kqlQuery: '',
-            queryMatch: {
-              field: 'network.transport',
-              value: 'tcp',
-              operator: ':',
-            },
-            and: [],
-          },
-        ],
-        eventType: 'all',
-        filters: [
-          {
-            meta: {
-              alias: null,
-              disabled: false,
-              key: 'source.port',
-              negate: false,
-              params: {
-                query: '30045',
-              },
-              type: 'phrase',
-            },
-            query: {
-              match: {
-                'source.port': {
-                  query: '30045',
-                  type: 'phrase',
-                },
-              },
-            },
-          },
-        ],
-        kqlMode: 'filter',
-        kqlQuery: {
-          filterQuery: {
-            kuery: {
-              kind: 'kuery',
-              expression: 'host.name : *',
-            },
-            serializedQuery:
-              '{"bool":{"should":[{"exists":{"field":"host.name"}}],"minimum_should_match":1}}',
-          },
-          filterQueryDraft: {
-            kind: 'kuery',
-            expression: 'host.name : *',
-          },
-        },
-      },
-    },
-  },
-};
-const store = createStore(state, apolloClientObservable);
-
-describe('StatefulTopN', () => {
-  // Suppress warnings about "react-beautiful-dnd"
-  /* eslint-disable no-console */
-  const originalError = console.error;
-  const originalWarn = console.warn;
-  beforeAll(() => {
-    console.warn = jest.fn();
-    console.error = jest.fn();
-  });
-  afterAll(() => {
-    console.error = originalError;
-    console.warn = originalWarn;
-  });
-
-  describe('rendering in a global NON-timeline context', () => {
-    let wrapper: ReactWrapper;
-
-    beforeEach(() => {
-      wrapper = mount(
-        <TestProviders store={store}>
-          <StatefulTopN
-            browserFields={mockBrowserFields}
-            field={field}
-            toggleTopN={jest.fn()}
-            onFilterAdded={jest.fn()}
-            value={value}
-          />
-        </TestProviders>
-      );
-    });
-
-    test('it has undefined combinedQueries when rendering in a global context', () => {
-      const props = wrapper
-        .find('[data-test-subj="top-n"]')
-        .first()
-        .props() as Props;
-
-      expect(props.combinedQueries).toBeUndefined();
-    });
-
-    test(`defaults to the 'Raw events' view when rendering in a global context`, () => {
-      const props = wrapper
-        .find('[data-test-subj="top-n"]')
-        .first()
-        .props() as Props;
-
-      expect(props.defaultView).toEqual('raw');
-    });
-
-    test(`provides a 'deleteQuery' when rendering in a global context`, () => {
-      const props = wrapper
-        .find('[data-test-subj="top-n"]')
-        .first()
-        .props() as Props;
-
-      expect(props.deleteQuery).toBeDefined();
-    });
-
-    test(`provides filters from Redux state (inputs > global > filters) when rendering in a global context`, () => {
-      const props = wrapper
-        .find('[data-test-subj="top-n"]')
-        .first()
-        .props() as Props;
-
-      expect(props.filters).toEqual([
-        {
-          meta: {
-            alias: null,
-            negate: false,
-            disabled: false,
-            type: 'phrase',
-            key: 'host.os.name',
-            params: { query: 'Linux' },
-          },
-          query: { match: { 'host.os.name': { query: 'Linux', type: 'phrase' } } },
-        },
-      ]);
-    });
-
-    test(`provides 'from' via GlobalTime when rendering in a global context`, () => {
-      const props = wrapper
-        .find('[data-test-subj="top-n"]')
-        .first()
-        .props() as Props;
-
-      expect(props.from).toEqual(0);
-    });
-
-    test('provides the global query from Redux state (inputs > global > query) when rendering in a global context', () => {
-      const props = wrapper
-        .find('[data-test-subj="top-n"]')
-        .first()
-        .props() as Props;
-
-      expect(props.query).toEqual({ query: 'host.name : end*', language: 'kuery' });
-    });
-
-    test(`provides a 'global' 'setAbsoluteRangeDatePickerTarget' when rendering in a global context`, () => {
-      const props = wrapper
-        .find('[data-test-subj="top-n"]')
-        .first()
-        .props() as Props;
-
-      expect(props.setAbsoluteRangeDatePickerTarget).toEqual('global');
-    });
-
-    test(`provides 'to' via GlobalTime when rendering in a global context`, () => {
-      const props = wrapper
-        .find('[data-test-subj="top-n"]')
-        .first()
-        .props() as Props;
-
-      expect(props.to).toEqual(1);
-    });
-  });
-
-  describe('rendering in a timeline context', () => {
-    let filterManager: FilterManager;
-    let wrapper: ReactWrapper;
-
-    beforeEach(() => {
-      filterManager = new FilterManager(mockUiSettingsForFilterManager);
-
-      wrapper = mount(
-        <TestProviders store={store}>
-          <TimelineContext.Provider value={{ filterManager, isLoading: false }}>
-            <TimelineTypeContext.Provider value={{ id: ACTIVE_TIMELINE_REDUX_ID }}>
-              <StatefulTopN
-                browserFields={mockBrowserFields}
-                field={field}
-                toggleTopN={jest.fn()}
-                onFilterAdded={jest.fn()}
-                value={value}
-              />
-            </TimelineTypeContext.Provider>
-          </TimelineContext.Provider>
-        </TestProviders>
-      );
-    });
-
-    test('it has a combinedQueries value from Redux state composed of the timeline [data providers + kql + filter-bar-filters] when rendering in a timeline context', () => {
-      const props = wrapper
-        .find('[data-test-subj="top-n"]')
-        .first()
-        .props() as Props;
-
-      expect(props.combinedQueries).toEqual(
-        '{"bool":{"must":[],"filter":[{"bool":{"filter":[{"bool":{"filter":[{"bool":{"should":[{"match_phrase":{"network.transport":"tcp"}}],"minimum_should_match":1}},{"bool":{"should":[{"exists":{"field":"host.name"}}],"minimum_should_match":1}}]}},{"bool":{"filter":[{"bool":{"should":[{"range":{"@timestamp":{"gte":1586835969047}}}],"minimum_should_match":1}},{"bool":{"should":[{"range":{"@timestamp":{"lte":1586922369047}}}],"minimum_should_match":1}}]}}]}},{"match_phrase":{"source.port":{"query":"30045"}}}],"should":[],"must_not":[]}}'
-      );
-    });
-
-    test('it provides only one view option that matches the `eventType` from redux when rendering in the context of the active timeline', () => {
-      const props = wrapper
-        .find('[data-test-subj="top-n"]')
-        .first()
-        .props() as Props;
-
-      expect(props.defaultView).toEqual('all');
-    });
-
-    test(`provides an undefined 'deleteQuery' when rendering in a timeline context`, () => {
-      const props = wrapper
-        .find('[data-test-subj="top-n"]')
-        .first()
-        .props() as Props;
-
-      expect(props.deleteQuery).toBeUndefined();
-    });
-
-    test(`provides empty filters when rendering in a timeline context`, () => {
-      const props = wrapper
-        .find('[data-test-subj="top-n"]')
-        .first()
-        .props() as Props;
-
-      expect(props.filters).toEqual([]);
-    });
-
-    test(`provides 'from' via redux state (inputs > timeline > timerange) when rendering in a timeline context`, () => {
-      const props = wrapper
-        .find('[data-test-subj="top-n"]')
-        .first()
-        .props() as Props;
-
-      expect(props.from).toEqual(1586835969047);
-    });
-
-    test('provides an empty query when rendering in a timeline context', () => {
-      const props = wrapper
-        .find('[data-test-subj="top-n"]')
-        .first()
-        .props() as Props;
-
-      expect(props.query).toEqual({ query: '', language: 'kuery' });
-    });
-
-    test(`provides a 'timeline' 'setAbsoluteRangeDatePickerTarget' when rendering in a timeline context`, () => {
-      const props = wrapper
-        .find('[data-test-subj="top-n"]')
-        .first()
-        .props() as Props;
-
-      expect(props.setAbsoluteRangeDatePickerTarget).toEqual('timeline');
-    });
-
-    test(`provides 'to' via redux state (inputs > timeline > timerange) when rendering in a timeline context`, () => {
-      const props = wrapper
-        .find('[data-test-subj="top-n"]')
-        .first()
-        .props() as Props;
-
-      expect(props.to).toEqual(1586922369047);
-    });
-  });
-
-  test(`defaults to the 'Signals events' option when rendering in a NON-active timeline context (e.g. the Signals table on the Detections page) when 'documentType' from 'useTimelineTypeContext()' is 'signals'`, () => {
-    const filterManager = new FilterManager(mockUiSettingsForFilterManager);
-    const wrapper = mount(
-      <TestProviders store={store}>
-        <TimelineContext.Provider value={{ filterManager, isLoading: false }}>
-          <TimelineTypeContext.Provider
-            value={{ documentType: 'signals', id: ACTIVE_TIMELINE_REDUX_ID }}
-          >
-            <StatefulTopN
-              browserFields={mockBrowserFields}
-              field={field}
-              toggleTopN={jest.fn()}
-              onFilterAdded={jest.fn()}
-              value={value}
-            />
-          </TimelineTypeContext.Provider>
-        </TimelineContext.Provider>
-      </TestProviders>
-    );
-
-    const props = wrapper
-      .find('[data-test-subj="top-n"]')
-      .first()
-      .props() as Props;
-
-    expect(props.defaultView).toEqual('signal');
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/top_n/index.tsx b/x-pack/plugins/siem/public/components/top_n/index.tsx
deleted file mode 100644
index 9863df42f101d3..00000000000000
--- a/x-pack/plugins/siem/public/components/top_n/index.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-/*
- * 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 { connect, ConnectedProps } from 'react-redux';
-
-import { GlobalTime } from '../../containers/global_time';
-import { BrowserFields, WithSource } from '../../containers/source';
-import { useKibana } from '../../lib/kibana';
-import { esQuery, Filter, Query } from '../../../../../../src/plugins/data/public';
-import { inputsModel, inputsSelectors, State, timelineSelectors } from '../../store';
-import { setAbsoluteRangeDatePicker as dispatchSetAbsoluteRangeDatePicker } from '../../store/inputs/actions';
-import { timelineDefaults } from '../../store/timeline/defaults';
-import { TimelineModel } from '../../store/timeline/model';
-import { combineQueries } from '../timeline/helpers';
-import { useTimelineTypeContext } from '../timeline/timeline_context';
-
-import { getOptions } from './helpers';
-import { TopN } from './top_n';
-
-/** The currently active timeline always has this Redux ID */
-export const ACTIVE_TIMELINE_REDUX_ID = 'timeline-1';
-
-const EMPTY_FILTERS: Filter[] = [];
-const EMPTY_QUERY: Query = { query: '', language: 'kuery' };
-
-const makeMapStateToProps = () => {
-  const getGlobalQuerySelector = inputsSelectors.globalQuerySelector();
-  const getGlobalFiltersQuerySelector = inputsSelectors.globalFiltersQuerySelector();
-  const getTimeline = timelineSelectors.getTimelineByIdSelector();
-  const getInputsTimeline = inputsSelectors.getTimelineSelector();
-  const getKqlQueryTimeline = timelineSelectors.getKqlFilterQuerySelector();
-
-  // The mapped Redux state provided to this component includes the global
-  // filters that appear at the top of most views in the app, and all the
-  // filters in the active timeline:
-  const mapStateToProps = (state: State) => {
-    const activeTimeline: TimelineModel =
-      getTimeline(state, ACTIVE_TIMELINE_REDUX_ID) ?? timelineDefaults;
-    const activeTimelineFilters = activeTimeline.filters ?? EMPTY_FILTERS;
-    const activeTimelineInput: inputsModel.InputsRange = getInputsTimeline(state);
-
-    return {
-      activeTimelineEventType: activeTimeline.eventType,
-      activeTimelineFilters,
-      activeTimelineFrom: activeTimelineInput.timerange.from,
-      activeTimelineKqlQueryExpression: getKqlQueryTimeline(state, ACTIVE_TIMELINE_REDUX_ID),
-      activeTimelineTo: activeTimelineInput.timerange.to,
-      dataProviders: activeTimeline.dataProviders,
-      globalQuery: getGlobalQuerySelector(state),
-      globalFilters: getGlobalFiltersQuerySelector(state),
-      kqlMode: activeTimeline.kqlMode,
-    };
-  };
-
-  return mapStateToProps;
-};
-
-const mapDispatchToProps = { setAbsoluteRangeDatePicker: dispatchSetAbsoluteRangeDatePicker };
-
-const connector = connect(makeMapStateToProps, mapDispatchToProps);
-
-interface OwnProps {
-  browserFields: BrowserFields;
-  field: string;
-  toggleTopN: () => void;
-  onFilterAdded?: () => void;
-  value?: string[] | string | null;
-}
-type PropsFromRedux = ConnectedProps<typeof connector>;
-type Props = OwnProps & PropsFromRedux;
-
-const StatefulTopNComponent: React.FC<Props> = ({
-  activeTimelineEventType,
-  activeTimelineFilters,
-  activeTimelineFrom,
-  activeTimelineKqlQueryExpression,
-  activeTimelineTo,
-  browserFields,
-  dataProviders,
-  field,
-  globalFilters = EMPTY_FILTERS,
-  globalQuery = EMPTY_QUERY,
-  kqlMode,
-  onFilterAdded,
-  setAbsoluteRangeDatePicker,
-  toggleTopN,
-  value,
-}) => {
-  const kibana = useKibana();
-
-  //  Regarding data from useTimelineTypeContext:
-  //  * `documentType` (e.g. 'signals') may only be populated in some views,
-  //    e.g. the `Signals` view on the `Detections` page.
-  //  * `id` (`timelineId`) may only be populated when we are rendered in the
-  //    context of the active timeline.
-  //  * `indexToAdd`, which enables the signals index to be appended to
-  //    the `indexPattern` returned by `WithSource`, may only be populated when
-  //    this component is rendered in the context of the active timeline. This
-  //    behavior enables the 'All events' view by appending the signals index
-  //    to the index pattern.
-  const { documentType, id: timelineId, indexToAdd } = useTimelineTypeContext();
-
-  const options = getOptions(
-    timelineId === ACTIVE_TIMELINE_REDUX_ID ? activeTimelineEventType : undefined
-  );
-
-  return (
-    <GlobalTime>
-      {({ from, deleteQuery, setQuery, to }) => (
-        <WithSource sourceId="default" indexToAdd={indexToAdd}>
-          {({ indexPattern }) => (
-            <TopN
-              combinedQueries={
-                timelineId === ACTIVE_TIMELINE_REDUX_ID
-                  ? combineQueries({
-                      browserFields,
-                      config: esQuery.getEsQueryConfig(kibana.services.uiSettings),
-                      dataProviders,
-                      end: activeTimelineTo,
-                      filters: activeTimelineFilters,
-                      indexPattern,
-                      kqlMode,
-                      kqlQuery: {
-                        language: 'kuery',
-                        query: activeTimelineKqlQueryExpression ?? '',
-                      },
-                      start: activeTimelineFrom,
-                    })?.filterQuery
-                  : undefined
-              }
-              data-test-subj="top-n"
-              defaultView={
-                documentType?.toLocaleLowerCase() === 'signals' ? 'signal' : options[0].value
-              }
-              deleteQuery={timelineId === ACTIVE_TIMELINE_REDUX_ID ? undefined : deleteQuery}
-              field={field}
-              filters={timelineId === ACTIVE_TIMELINE_REDUX_ID ? EMPTY_FILTERS : globalFilters}
-              from={timelineId === ACTIVE_TIMELINE_REDUX_ID ? activeTimelineFrom : from}
-              indexPattern={indexPattern}
-              indexToAdd={indexToAdd}
-              options={options}
-              query={timelineId === ACTIVE_TIMELINE_REDUX_ID ? EMPTY_QUERY : globalQuery}
-              setAbsoluteRangeDatePicker={setAbsoluteRangeDatePicker}
-              setAbsoluteRangeDatePickerTarget={
-                timelineId === ACTIVE_TIMELINE_REDUX_ID ? 'timeline' : 'global'
-              }
-              setQuery={setQuery}
-              to={timelineId === ACTIVE_TIMELINE_REDUX_ID ? activeTimelineTo : to}
-              toggleTopN={toggleTopN}
-              onFilterAdded={onFilterAdded}
-              value={value}
-            />
-          )}
-        </WithSource>
-      )}
-    </GlobalTime>
-  );
-};
-
-StatefulTopNComponent.displayName = 'StatefulTopNComponent';
-
-export const StatefulTopN = connector(React.memo(StatefulTopNComponent));
diff --git a/x-pack/plugins/siem/public/components/url_state/helpers.test.ts b/x-pack/plugins/siem/public/components/url_state/helpers.test.ts
deleted file mode 100644
index c6c18d4c25a747..00000000000000
--- a/x-pack/plugins/siem/public/components/url_state/helpers.test.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * 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 { navTabs } from '../../pages/home/home_navigations';
-import { getTitle } from './helpers';
-import { HostsType } from '../../store/hosts/model';
-
-describe('Helpers Url_State', () => {
-  describe('getTitle', () => {
-    test('host page name', () => {
-      const result = getTitle('hosts', undefined, navTabs);
-      expect(result).toEqual('Hosts');
-    });
-    test('network page name', () => {
-      const result = getTitle('network', undefined, navTabs);
-      expect(result).toEqual('Network');
-    });
-    test('overview page name', () => {
-      const result = getTitle('overview', undefined, navTabs);
-      expect(result).toEqual('Overview');
-    });
-    test('timelines page name', () => {
-      const result = getTitle('timelines', undefined, navTabs);
-      expect(result).toEqual('Timelines');
-    });
-    test('details page name', () => {
-      const result = getTitle('hosts', HostsType.details, navTabs);
-      expect(result).toEqual(HostsType.details);
-    });
-    test('Not existing', () => {
-      const result = getTitle('IamHereButNotReally', undefined, navTabs);
-      expect(result).toEqual('');
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/url_state/helpers.ts b/x-pack/plugins/siem/public/components/url_state/helpers.ts
deleted file mode 100644
index 62196b90e5e6f2..00000000000000
--- a/x-pack/plugins/siem/public/components/url_state/helpers.ts
+++ /dev/null
@@ -1,260 +0,0 @@
-/*
- * 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 { isEmpty } from 'lodash/fp';
-import { parse, stringify } from 'query-string';
-import { decode, encode } from 'rison-node';
-import * as H from 'history';
-
-import { Query, Filter } from '../../../../../../src/plugins/data/public';
-import { url } from '../../../../../../src/plugins/kibana_utils/public';
-
-import { SiemPageName } from '../../pages/home/types';
-import { inputsSelectors, State, timelineSelectors } from '../../store';
-import { UrlInputsModel } from '../../store/inputs/model';
-import { TimelineUrl } from '../../store/timeline/model';
-import { formatDate } from '../super_date_picker';
-import { NavTab } from '../navigation/types';
-import { CONSTANTS, UrlStateType } from './constants';
-import { ReplaceStateInLocation, UpdateUrlStateString } from './types';
-
-export const decodeRisonUrlState = <T>(value: string | undefined): T | null => {
-  try {
-    return value ? ((decode(value) as unknown) as T) : null;
-  } catch (error) {
-    if (error instanceof Error && error.message.startsWith('rison decoder error')) {
-      return null;
-    }
-    throw error;
-  }
-};
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const encodeRisonUrlState = (state: any) => encode(state);
-
-export const getQueryStringFromLocation = (search: string) => search.substring(1);
-
-export const getParamFromQueryString = (queryString: string, key: string) => {
-  const parsedQueryString = parse(queryString, { sort: false });
-  const queryParam = parsedQueryString[key];
-
-  return Array.isArray(queryParam) ? queryParam[0] : queryParam;
-};
-
-export const replaceStateKeyInQueryString = <T>(stateKey: string, urlState: T) => (
-  queryString: string
-): string => {
-  const previousQueryValues = parse(queryString, { sort: false });
-  if (urlState == null || (typeof urlState === 'string' && urlState === '')) {
-    delete previousQueryValues[stateKey];
-
-    return stringify(url.encodeQuery(previousQueryValues), { sort: false, encode: false });
-  }
-
-  // ಠ_ಠ Code was copied from x-pack/legacy/plugins/infra/public/utils/url_state.tsx ಠ_ಠ
-  // Remove this if these utilities are promoted to kibana core
-  const encodedUrlState =
-    typeof urlState !== 'undefined' ? encodeRisonUrlState(urlState) : undefined;
-
-  return stringify(
-    url.encodeQuery({
-      ...previousQueryValues,
-      [stateKey]: encodedUrlState,
-    }),
-    { sort: false, encode: false }
-  );
-};
-
-export const replaceQueryStringInLocation = (
-  location: H.Location,
-  queryString: string
-): H.Location => {
-  if (queryString === getQueryStringFromLocation(location.search)) {
-    return location;
-  } else {
-    return {
-      ...location,
-      search: `?${queryString}`,
-    };
-  }
-};
-
-export const getUrlType = (pageName: string): UrlStateType => {
-  if (pageName === SiemPageName.overview) {
-    return 'overview';
-  } else if (pageName === SiemPageName.hosts) {
-    return 'host';
-  } else if (pageName === SiemPageName.network) {
-    return 'network';
-  } else if (pageName === SiemPageName.detections) {
-    return 'detections';
-  } else if (pageName === SiemPageName.timelines) {
-    return 'timeline';
-  } else if (pageName === SiemPageName.case) {
-    return 'case';
-  }
-  return 'overview';
-};
-
-export const getTitle = (
-  pageName: string,
-  detailName: string | undefined,
-  navTabs: Record<string, NavTab>
-): string => {
-  if (detailName != null) return detailName;
-  return navTabs[pageName] != null ? navTabs[pageName].name : '';
-};
-
-export const makeMapStateToProps = () => {
-  const getInputsSelector = inputsSelectors.inputsSelector();
-  const getGlobalQuerySelector = inputsSelectors.globalQuerySelector();
-  const getGlobalFiltersQuerySelector = inputsSelectors.globalFiltersQuerySelector();
-  const getGlobalSavedQuerySelector = inputsSelectors.globalSavedQuerySelector();
-  const getTimelines = timelineSelectors.getTimelines();
-  const mapStateToProps = (state: State) => {
-    const inputState = getInputsSelector(state);
-    const { linkTo: globalLinkTo, timerange: globalTimerange } = inputState.global;
-    const { linkTo: timelineLinkTo, timerange: timelineTimerange } = inputState.timeline;
-
-    const timeline = Object.entries(getTimelines(state)).reduce(
-      (obj, [timelineId, timelineObj]) => ({
-        id: timelineObj.savedObjectId != null ? timelineObj.savedObjectId : '',
-        isOpen: timelineObj.show,
-      }),
-      { id: '', isOpen: false }
-    );
-
-    let searchAttr: {
-      [CONSTANTS.appQuery]?: Query;
-      [CONSTANTS.filters]?: Filter[];
-      [CONSTANTS.savedQuery]?: string;
-    } = {
-      [CONSTANTS.appQuery]: getGlobalQuerySelector(state),
-      [CONSTANTS.filters]: getGlobalFiltersQuerySelector(state),
-    };
-    const savedQuery = getGlobalSavedQuerySelector(state);
-    if (savedQuery != null && savedQuery.id !== '') {
-      searchAttr = {
-        [CONSTANTS.savedQuery]: savedQuery.id,
-      };
-    }
-
-    return {
-      urlState: {
-        ...searchAttr,
-        [CONSTANTS.timerange]: {
-          global: {
-            [CONSTANTS.timerange]: globalTimerange,
-            linkTo: globalLinkTo,
-          },
-          timeline: {
-            [CONSTANTS.timerange]: timelineTimerange,
-            linkTo: timelineLinkTo,
-          },
-        },
-        [CONSTANTS.timeline]: timeline,
-      },
-    };
-  };
-
-  return mapStateToProps;
-};
-
-export const updateTimerangeUrl = (
-  timeRange: UrlInputsModel,
-  isInitializing: boolean
-): UrlInputsModel => {
-  if (timeRange.global.timerange.kind === 'relative') {
-    timeRange.global.timerange.from = formatDate(timeRange.global.timerange.fromStr);
-    timeRange.global.timerange.to = formatDate(timeRange.global.timerange.toStr, { roundUp: true });
-  }
-  if (timeRange.timeline.timerange.kind === 'relative' && isInitializing) {
-    timeRange.timeline.timerange.from = formatDate(timeRange.timeline.timerange.fromStr);
-    timeRange.timeline.timerange.to = formatDate(timeRange.timeline.timerange.toStr, {
-      roundUp: true,
-    });
-  }
-  return timeRange;
-};
-
-export const updateUrlStateString = ({
-  isInitializing,
-  history,
-  newUrlStateString,
-  pathName,
-  search,
-  updateTimerange,
-  urlKey,
-}: UpdateUrlStateString): string => {
-  if (urlKey === CONSTANTS.appQuery) {
-    const queryState = decodeRisonUrlState<Query>(newUrlStateString);
-    if (queryState != null && queryState.query === '') {
-      return replaceStateInLocation({
-        history,
-        pathName,
-        search,
-        urlStateToReplace: '',
-        urlStateKey: urlKey,
-      });
-    }
-  } else if (urlKey === CONSTANTS.timerange && updateTimerange) {
-    const queryState = decodeRisonUrlState<UrlInputsModel>(newUrlStateString);
-    if (queryState != null && queryState.global != null) {
-      return replaceStateInLocation({
-        history,
-        pathName,
-        search,
-        urlStateToReplace: updateTimerangeUrl(queryState, isInitializing),
-        urlStateKey: urlKey,
-      });
-    }
-  } else if (urlKey === CONSTANTS.filters) {
-    const queryState = decodeRisonUrlState<Filter[]>(newUrlStateString);
-    if (isEmpty(queryState)) {
-      return replaceStateInLocation({
-        history,
-        pathName,
-        search,
-        urlStateToReplace: '',
-        urlStateKey: urlKey,
-      });
-    }
-  } else if (urlKey === CONSTANTS.timeline) {
-    const queryState = decodeRisonUrlState<TimelineUrl>(newUrlStateString);
-    if (queryState != null && queryState.id === '') {
-      return replaceStateInLocation({
-        history,
-        pathName,
-        search,
-        urlStateToReplace: '',
-        urlStateKey: urlKey,
-      });
-    }
-  }
-  return search;
-};
-
-export const replaceStateInLocation = <T>({
-  history,
-  urlStateToReplace,
-  urlStateKey,
-  pathName,
-  search,
-}: ReplaceStateInLocation<T>) => {
-  const newLocation = replaceQueryStringInLocation(
-    {
-      hash: '',
-      pathname: pathName,
-      search,
-      state: '',
-    },
-    replaceStateKeyInQueryString(urlStateKey, urlStateToReplace)(getQueryStringFromLocation(search))
-  );
-  if (history) {
-    history.replace(newLocation);
-  }
-  return newLocation.search;
-};
diff --git a/x-pack/plugins/siem/public/components/url_state/index.test.tsx b/x-pack/plugins/siem/public/components/url_state/index.test.tsx
deleted file mode 100644
index 4d2a717153894e..00000000000000
--- a/x-pack/plugins/siem/public/components/url_state/index.test.tsx
+++ /dev/null
@@ -1,221 +0,0 @@
-/*
- * 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 { mount } from 'enzyme';
-import React from 'react';
-
-import { HookWrapper } from '../../mock';
-import { SiemPageName } from '../../pages/home/types';
-import { RouteSpyState } from '../../utils/route/types';
-import { CONSTANTS } from './constants';
-import {
-  getMockPropsObj,
-  mockHistory,
-  mockSetFilterQuery,
-  mockSetAbsoluteRangeDatePicker,
-  mockSetRelativeRangeDatePicker,
-  testCases,
-} from './test_dependencies';
-import { UrlStateContainerPropTypes } from './types';
-import { useUrlStateHooks } from './use_url_state';
-import { wait } from '../../lib/helpers';
-
-let mockProps: UrlStateContainerPropTypes;
-
-const mockRouteSpy: RouteSpyState = {
-  pageName: SiemPageName.network,
-  detailName: undefined,
-  tabName: undefined,
-  search: '',
-  pathName: '/network',
-};
-jest.mock('../../utils/route/use_route_spy', () => ({
-  useRouteSpy: () => [mockRouteSpy],
-}));
-
-jest.mock('../super_date_picker', () => ({
-  formatDate: (date: string) => {
-    return 11223344556677;
-  },
-}));
-
-jest.mock('../../lib/kibana', () => ({
-  useKibana: () => ({
-    services: {
-      data: {
-        query: {
-          filterManager: {},
-          savedQueries: {},
-        },
-      },
-    },
-  }),
-}));
-
-describe('UrlStateContainer', () => {
-  afterEach(() => {
-    jest.resetAllMocks();
-  });
-  describe('handleInitialize', () => {
-    describe('URL state updates redux', () => {
-      describe('relative timerange actions are called with correct data on component mount', () => {
-        test.each(testCases)(
-          '%o',
-          (page, namespaceLower, namespaceUpper, examplePath, type, pageName, detailName) => {
-            mockProps = getMockPropsObj({
-              page,
-              examplePath,
-              namespaceLower,
-              pageName,
-              detailName,
-            }).relativeTimeSearch.undefinedQuery;
-            mount(<HookWrapper hookProps={mockProps} hook={args => useUrlStateHooks(args)} />);
-
-            expect(mockSetRelativeRangeDatePicker.mock.calls[1][0]).toEqual({
-              from: 11223344556677,
-              fromStr: 'now-1d/d',
-              kind: 'relative',
-              to: 11223344556677,
-              toStr: 'now-1d/d',
-              id: 'global',
-            });
-
-            expect(mockSetRelativeRangeDatePicker.mock.calls[0][0]).toEqual({
-              from: 11223344556677,
-              fromStr: 'now-15m',
-              kind: 'relative',
-              to: 11223344556677,
-              toStr: 'now',
-              id: 'timeline',
-            });
-          }
-        );
-      });
-
-      describe('absolute timerange actions are called with correct data on component mount', () => {
-        test.each(testCases)(
-          '%o',
-          (page, namespaceLower, namespaceUpper, examplePath, type, pageName, detailName) => {
-            mockProps = getMockPropsObj({ page, examplePath, namespaceLower, pageName, detailName })
-              .absoluteTimeSearch.undefinedQuery;
-            mount(<HookWrapper hookProps={mockProps} hook={args => useUrlStateHooks(args)} />);
-
-            expect(mockSetAbsoluteRangeDatePicker.mock.calls[1][0]).toEqual({
-              from: 1556736012685,
-              kind: 'absolute',
-              to: 1556822416082,
-              id: 'global',
-            });
-
-            expect(mockSetAbsoluteRangeDatePicker.mock.calls[0][0]).toEqual({
-              from: 1556736012685,
-              kind: 'absolute',
-              to: 1556822416082,
-              id: 'timeline',
-            });
-          }
-        );
-      });
-
-      describe('appQuery action is called with correct data on component mount', () => {
-        test.each(testCases.slice(0, 4))(
-          ' %o',
-          (page, namespaceLower, namespaceUpper, examplePath, type, pageName, detailName) => {
-            mockProps = getMockPropsObj({ page, examplePath, namespaceLower, pageName, detailName })
-              .relativeTimeSearch.undefinedQuery;
-            mount(<HookWrapper hookProps={mockProps} hook={args => useUrlStateHooks(args)} />);
-
-            expect(mockSetFilterQuery.mock.calls[0][0]).toEqual({
-              id: 'global',
-              language: 'kuery',
-              query: 'host.name:"siem-es"',
-            });
-          }
-        );
-      });
-    });
-
-    describe('Redux updates URL state', () => {
-      describe('appQuery url state is set from redux data on component mount', () => {
-        test.each(testCases)(
-          '%o',
-          (page, namespaceLower, namespaceUpper, examplePath, type, pageName, detailName) => {
-            mockProps = getMockPropsObj({
-              page,
-              examplePath,
-              namespaceLower,
-              pageName,
-              detailName,
-            }).noSearch.definedQuery;
-            mount(<HookWrapper hookProps={mockProps} hook={args => useUrlStateHooks(args)} />);
-
-            expect(
-              mockHistory.replace.mock.calls[mockHistory.replace.mock.calls.length - 1][0]
-            ).toEqual({
-              hash: '',
-              pathname: examplePath,
-              search: `?query=(language:kuery,query:'host.name:%22siem-es%22')&timerange=(global:(linkTo:!(timeline),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)),timeline:(linkTo:!(global),timerange:(from:1558048243696,fromStr:now-24h,kind:relative,to:1558134643697,toStr:now)))`,
-              state: '',
-            });
-          }
-        );
-      });
-    });
-  });
-
-  describe('After Initialization, keep Relative Date up to date for global only on detections page', () => {
-    test.each(testCases)(
-      '%o',
-      async (page, namespaceLower, namespaceUpper, examplePath, type, pageName, detailName) => {
-        mockProps = getMockPropsObj({
-          page,
-          examplePath,
-          namespaceLower,
-          pageName,
-          detailName,
-        }).relativeTimeSearch.undefinedQuery;
-        const wrapper = mount(
-          <HookWrapper hookProps={mockProps} hook={args => useUrlStateHooks(args)} />
-        );
-
-        wrapper.setProps({
-          hookProps: getMockPropsObj({
-            page: CONSTANTS.hostsPage,
-            examplePath: '/hosts',
-            namespaceLower: 'hosts',
-            pageName: SiemPageName.hosts,
-            detailName: undefined,
-          }).relativeTimeSearch.undefinedQuery,
-        });
-        wrapper.update();
-        await wait();
-
-        if (CONSTANTS.detectionsPage === page) {
-          expect(mockSetRelativeRangeDatePicker.mock.calls[3][0]).toEqual({
-            from: 11223344556677,
-            fromStr: 'now-1d/d',
-            kind: 'relative',
-            to: 11223344556677,
-            toStr: 'now-1d/d',
-            id: 'global',
-          });
-
-          expect(mockSetRelativeRangeDatePicker.mock.calls[2][0]).toEqual({
-            from: 1558732849370,
-            fromStr: 'now-15m',
-            kind: 'relative',
-            to: 1558733749370,
-            toStr: 'now',
-            id: 'timeline',
-          });
-        } else {
-          // There is no change in url state, so that's expected we only have two actions
-          expect(mockSetRelativeRangeDatePicker.mock.calls.length).toEqual(2);
-        }
-      }
-    );
-  });
-});
diff --git a/x-pack/plugins/siem/public/components/url_state/index.tsx b/x-pack/plugins/siem/public/components/url_state/index.tsx
deleted file mode 100644
index 294e41a1faa7b4..00000000000000
--- a/x-pack/plugins/siem/public/components/url_state/index.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-/*
- * 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 { compose, Dispatch } from 'redux';
-import { connect } from 'react-redux';
-import deepEqual from 'fast-deep-equal';
-
-import { timelineActions } from '../../store/actions';
-import { RouteSpyState } from '../../utils/route/types';
-import { useRouteSpy } from '../../utils/route/use_route_spy';
-
-import { UrlStateContainerPropTypes, UrlStateProps } from './types';
-import { useUrlStateHooks } from './use_url_state';
-import { dispatchUpdateTimeline } from '../open_timeline/helpers';
-import { dispatchSetInitialStateFromUrl } from './initialize_redux_by_url';
-import { makeMapStateToProps } from './helpers';
-
-export const UrlStateContainer: React.FC<UrlStateContainerPropTypes> = (
-  props: UrlStateContainerPropTypes
-) => {
-  useUrlStateHooks(props);
-  return null;
-};
-
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  setInitialStateFromUrl: dispatchSetInitialStateFromUrl(dispatch),
-  updateTimeline: dispatchUpdateTimeline(dispatch),
-  updateTimelineIsLoading: ({ id, isLoading }: { id: string; isLoading: boolean }) =>
-    dispatch(timelineActions.updateIsLoading({ id, isLoading })),
-});
-
-export const UrlStateRedux = compose<React.ComponentClass<UrlStateProps & RouteSpyState>>(
-  connect(makeMapStateToProps, mapDispatchToProps)
-)(
-  React.memo(
-    UrlStateContainer,
-    (prevProps, nextProps) =>
-      prevProps.pathName === nextProps.pathName && deepEqual(prevProps.urlState, nextProps.urlState)
-  )
-);
-
-const UseUrlStateComponent: React.FC<UrlStateProps> = props => {
-  const [routeProps] = useRouteSpy();
-  const urlStateReduxProps: RouteSpyState & UrlStateProps = {
-    ...routeProps,
-    ...props,
-  };
-  return <UrlStateRedux {...urlStateReduxProps} />;
-};
-
-export const UseUrlState = React.memo(UseUrlStateComponent);
diff --git a/x-pack/plugins/siem/public/components/url_state/types.ts b/x-pack/plugins/siem/public/components/url_state/types.ts
deleted file mode 100644
index 9d8a4a8e6a9087..00000000000000
--- a/x-pack/plugins/siem/public/components/url_state/types.ts
+++ /dev/null
@@ -1,177 +0,0 @@
-/*
- * 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 ApolloClient from 'apollo-client';
-import * as H from 'history';
-import { ActionCreator } from 'typescript-fsa';
-import {
-  IIndexPattern,
-  Query,
-  Filter,
-  FilterManager,
-  SavedQueryService,
-} from 'src/plugins/data/public';
-
-import { UrlInputsModel } from '../../store/inputs/model';
-import { TimelineUrl } from '../../store/timeline/model';
-import { RouteSpyState } from '../../utils/route/types';
-import { DispatchUpdateTimeline } from '../open_timeline/types';
-import { NavTab } from '../navigation/types';
-
-import { CONSTANTS, UrlStateType } from './constants';
-
-export const ALL_URL_STATE_KEYS: KeyUrlState[] = [
-  CONSTANTS.appQuery,
-  CONSTANTS.filters,
-  CONSTANTS.savedQuery,
-  CONSTANTS.timerange,
-  CONSTANTS.timeline,
-];
-
-export const URL_STATE_KEYS: Record<UrlStateType, KeyUrlState[]> = {
-  detections: [
-    CONSTANTS.appQuery,
-    CONSTANTS.filters,
-    CONSTANTS.savedQuery,
-    CONSTANTS.timerange,
-    CONSTANTS.timeline,
-  ],
-  host: [
-    CONSTANTS.appQuery,
-    CONSTANTS.filters,
-    CONSTANTS.savedQuery,
-    CONSTANTS.timerange,
-    CONSTANTS.timeline,
-  ],
-  network: [
-    CONSTANTS.appQuery,
-    CONSTANTS.filters,
-    CONSTANTS.savedQuery,
-    CONSTANTS.timerange,
-    CONSTANTS.timeline,
-  ],
-  overview: [
-    CONSTANTS.appQuery,
-    CONSTANTS.filters,
-    CONSTANTS.savedQuery,
-    CONSTANTS.timerange,
-    CONSTANTS.timeline,
-  ],
-  timeline: [
-    CONSTANTS.appQuery,
-    CONSTANTS.filters,
-    CONSTANTS.savedQuery,
-    CONSTANTS.timerange,
-    CONSTANTS.timeline,
-  ],
-  case: [
-    CONSTANTS.appQuery,
-    CONSTANTS.filters,
-    CONSTANTS.savedQuery,
-    CONSTANTS.timerange,
-    CONSTANTS.timeline,
-  ],
-};
-
-export type LocationTypes =
-  | CONSTANTS.caseDetails
-  | CONSTANTS.casePage
-  | CONSTANTS.detectionsPage
-  | CONSTANTS.hostsDetails
-  | CONSTANTS.hostsPage
-  | CONSTANTS.networkDetails
-  | CONSTANTS.networkPage
-  | CONSTANTS.overviewPage
-  | CONSTANTS.timelinePage
-  | CONSTANTS.unknown;
-
-export interface UrlState {
-  [CONSTANTS.appQuery]?: Query;
-  [CONSTANTS.filters]?: Filter[];
-  [CONSTANTS.savedQuery]?: string;
-  [CONSTANTS.timerange]: UrlInputsModel;
-  [CONSTANTS.timeline]: TimelineUrl;
-}
-export type KeyUrlState = keyof UrlState;
-
-export interface UrlStateProps {
-  navTabs: Record<string, NavTab>;
-  indexPattern?: IIndexPattern;
-  mapToUrlState?: (value: string) => UrlState;
-  onChange?: (urlState: UrlState, previousUrlState: UrlState) => void;
-  onInitialize?: (urlState: UrlState) => void;
-}
-
-export interface UrlStateStateToPropsType {
-  urlState: UrlState;
-}
-
-export interface UpdateTimelineIsLoading {
-  id: string;
-  isLoading: boolean;
-}
-
-export interface UrlStateDispatchToPropsType {
-  setInitialStateFromUrl: DispatchSetInitialStateFromUrl;
-  updateTimeline: DispatchUpdateTimeline;
-  updateTimelineIsLoading: ActionCreator<UpdateTimelineIsLoading>;
-}
-
-export type UrlStateContainerPropTypes = RouteSpyState &
-  UrlStateStateToPropsType &
-  UrlStateDispatchToPropsType &
-  UrlStateProps;
-
-export interface PreviousLocationUrlState {
-  pathName: string | undefined;
-  pageName: string | undefined;
-  urlState: UrlState;
-}
-
-export interface UrlStateToRedux {
-  urlKey: KeyUrlState;
-  newUrlStateString: string;
-}
-
-export interface SetInitialStateFromUrl<TCache> {
-  apolloClient: ApolloClient<TCache> | ApolloClient<{}> | undefined;
-  detailName: string | undefined;
-  filterManager: FilterManager;
-  indexPattern: IIndexPattern | undefined;
-  pageName: string;
-  savedQueries: SavedQueryService;
-  updateTimeline: DispatchUpdateTimeline;
-  updateTimelineIsLoading: ActionCreator<UpdateTimelineIsLoading>;
-  urlStateToUpdate: UrlStateToRedux[];
-}
-
-export type DispatchSetInitialStateFromUrl = <TCache>({
-  apolloClient,
-  detailName,
-  indexPattern,
-  pageName,
-  updateTimeline,
-  updateTimelineIsLoading,
-  urlStateToUpdate,
-}: SetInitialStateFromUrl<TCache>) => () => void;
-
-export interface ReplaceStateInLocation<T> {
-  history?: H.History;
-  urlStateToReplace: T;
-  urlStateKey: string;
-  pathName: string;
-  search: string;
-}
-
-export interface UpdateUrlStateString {
-  isInitializing: boolean;
-  history?: H.History;
-  newUrlStateString: string;
-  pathName: string;
-  search: string;
-  updateTimerange: boolean;
-  urlKey: KeyUrlState;
-}
diff --git a/x-pack/plugins/siem/public/containers/anomalies/anomalies_query_tab_body/histogram_configs.ts b/x-pack/plugins/siem/public/containers/anomalies/anomalies_query_tab_body/histogram_configs.ts
deleted file mode 100644
index f63349d3e573ad..00000000000000
--- a/x-pack/plugins/siem/public/containers/anomalies/anomalies_query_tab_body/histogram_configs.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * 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 * as i18n from './translations';
-import {
-  MatrixHistogramOption,
-  MatrixHisrogramConfigs,
-} from '../../../components/matrix_histogram/types';
-import { HistogramType } from '../../../graphql/types';
-
-export const anomaliesStackByOptions: MatrixHistogramOption[] = [
-  {
-    text: i18n.ANOMALIES_STACK_BY_JOB_ID,
-    value: 'job_id',
-  },
-];
-
-const DEFAULT_STACK_BY = i18n.ANOMALIES_STACK_BY_JOB_ID;
-
-export const histogramConfigs: MatrixHisrogramConfigs = {
-  defaultStackByOption:
-    anomaliesStackByOptions.find(o => o.text === DEFAULT_STACK_BY) ?? anomaliesStackByOptions[0],
-  errorMessage: i18n.ERROR_FETCHING_ANOMALIES_DATA,
-  hideHistogramIfEmpty: true,
-  histogramType: HistogramType.anomalies,
-  stackByOptions: anomaliesStackByOptions,
-  subtitle: undefined,
-  title: i18n.ANOMALIES_TITLE,
-};
diff --git a/x-pack/plugins/siem/public/containers/anomalies/anomalies_query_tab_body/index.tsx b/x-pack/plugins/siem/public/containers/anomalies/anomalies_query_tab_body/index.tsx
deleted file mode 100644
index 2bbb4cde92b151..00000000000000
--- a/x-pack/plugins/siem/public/containers/anomalies/anomalies_query_tab_body/index.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-/*
- * 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, { useEffect } from 'react';
-
-import { DEFAULT_ANOMALY_SCORE } from '../../../../common/constants';
-import { AnomaliesQueryTabBodyProps } from './types';
-import { getAnomaliesFilterQuery } from './utils';
-import { useSiemJobs } from '../../../components/ml_popover/hooks/use_siem_jobs';
-import { useUiSetting$ } from '../../../lib/kibana';
-import { MatrixHistogramContainer } from '../../../components/matrix_histogram';
-import { histogramConfigs } from './histogram_configs';
-const ID = 'anomaliesOverTimeQuery';
-
-export const AnomaliesQueryTabBody = ({
-  deleteQuery,
-  endDate,
-  setQuery,
-  skip,
-  startDate,
-  type,
-  narrowDateRange,
-  filterQuery,
-  anomaliesFilterQuery,
-  AnomaliesTableComponent,
-  flowTarget,
-  ip,
-}: AnomaliesQueryTabBodyProps) => {
-  useEffect(() => {
-    return () => {
-      if (deleteQuery) {
-        deleteQuery({ id: ID });
-      }
-    };
-  }, []);
-
-  const [, siemJobs] = useSiemJobs(true);
-  const [anomalyScore] = useUiSetting$<number>(DEFAULT_ANOMALY_SCORE);
-
-  const mergedFilterQuery = getAnomaliesFilterQuery(
-    filterQuery,
-    anomaliesFilterQuery,
-    siemJobs,
-    anomalyScore,
-    flowTarget,
-    ip
-  );
-
-  return (
-    <>
-      <MatrixHistogramContainer
-        endDate={endDate}
-        filterQuery={mergedFilterQuery}
-        id={ID}
-        setQuery={setQuery}
-        sourceId="default"
-        startDate={startDate}
-        type={type}
-        {...histogramConfigs}
-      />
-      <AnomaliesTableComponent
-        startDate={startDate}
-        endDate={endDate}
-        skip={skip}
-        type={type as never}
-        narrowDateRange={narrowDateRange}
-        flowTarget={flowTarget}
-        ip={ip}
-      />
-    </>
-  );
-};
-
-AnomaliesQueryTabBody.displayName = 'AnomaliesQueryTabBody';
diff --git a/x-pack/plugins/siem/public/containers/anomalies/anomalies_query_tab_body/types.ts b/x-pack/plugins/siem/public/containers/anomalies/anomalies_query_tab_body/types.ts
deleted file mode 100644
index f6cae81e3c6c4b..00000000000000
--- a/x-pack/plugins/siem/public/containers/anomalies/anomalies_query_tab_body/types.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
- * 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 { ESTermQuery } from '../../../../common/typed_json';
-import { NarrowDateRange } from '../../../components/ml/types';
-import { UpdateDateRange } from '../../../components/charts/common';
-import { SetQuery } from '../../../pages/hosts/navigation/types';
-import { FlowTarget } from '../../../graphql/types';
-import { HostsType } from '../../../store/hosts/model';
-import { NetworkType } from '../../../store/network/model';
-import { AnomaliesHostTable } from '../../../components/ml/tables/anomalies_host_table';
-import { AnomaliesNetworkTable } from '../../../components/ml/tables/anomalies_network_table';
-
-interface QueryTabBodyProps {
-  type: HostsType | NetworkType;
-  filterQuery?: string | ESTermQuery;
-}
-
-export type AnomaliesQueryTabBodyProps = QueryTabBodyProps & {
-  anomaliesFilterQuery?: object;
-  AnomaliesTableComponent: typeof AnomaliesHostTable | typeof AnomaliesNetworkTable;
-  deleteQuery?: ({ id }: { id: string }) => void;
-  endDate: number;
-  flowTarget?: FlowTarget;
-  narrowDateRange: NarrowDateRange;
-  setQuery: SetQuery;
-  startDate: number;
-  skip: boolean;
-  updateDateRange?: UpdateDateRange;
-  hideHistogramIfEmpty?: boolean;
-  ip?: string;
-};
diff --git a/x-pack/plugins/siem/public/containers/anomalies/anomalies_query_tab_body/utils.ts b/x-pack/plugins/siem/public/containers/anomalies/anomalies_query_tab_body/utils.ts
deleted file mode 100644
index 790a797b2fead4..00000000000000
--- a/x-pack/plugins/siem/public/containers/anomalies/anomalies_query_tab_body/utils.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-/*
- * 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 deepmerge from 'deepmerge';
-
-import { ESTermQuery } from '../../../../common/typed_json';
-import { createFilter } from '../../helpers';
-import { SiemJob } from '../../../components/ml_popover/types';
-import { FlowTarget } from '../../../graphql/types';
-
-export const getAnomaliesFilterQuery = (
-  filterQuery: string | ESTermQuery | undefined,
-  anomaliesFilterQuery: object = {},
-  siemJobs: SiemJob[] = [],
-  anomalyScore: number,
-  flowTarget?: FlowTarget,
-  ip?: string
-): string => {
-  const siemJobIds = siemJobs
-    .filter(job => job.isInstalled)
-    .map(job => job.id)
-    .map(jobId => ({
-      match_phrase: {
-        job_id: jobId,
-      },
-    }));
-
-  const filterQueryString = createFilter(filterQuery);
-  const filterQueryObject = filterQueryString ? JSON.parse(filterQueryString) : {};
-  const mergedFilterQuery = deepmerge.all([
-    filterQueryObject,
-    anomaliesFilterQuery,
-    {
-      bool: {
-        filter: [
-          {
-            bool: {
-              should: siemJobIds,
-              minimum_should_match: 1,
-            },
-          },
-          {
-            match_phrase: {
-              result_type: 'record',
-            },
-          },
-          flowTarget &&
-            ip && {
-              match_phrase: {
-                [`${flowTarget}.ip`]: ip,
-              },
-            },
-          {
-            range: {
-              record_score: {
-                gte: anomalyScore,
-              },
-            },
-          },
-        ],
-      },
-    },
-  ]);
-
-  return JSON.stringify(mergedFilterQuery);
-};
diff --git a/x-pack/plugins/siem/public/containers/authentications/index.tsx b/x-pack/plugins/siem/public/containers/authentications/index.tsx
deleted file mode 100644
index 6d4a88c45a7681..00000000000000
--- a/x-pack/plugins/siem/public/containers/authentications/index.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-/*
- * 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 { getOr } from 'lodash/fp';
-import React from 'react';
-import { Query } from 'react-apollo';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-
-import { DEFAULT_INDEX_KEY } from '../../../common/constants';
-import {
-  AuthenticationsEdges,
-  GetAuthenticationsQuery,
-  PageInfoPaginated,
-} from '../../graphql/types';
-import { hostsModel, hostsSelectors, inputsModel, State, inputsSelectors } from '../../store';
-import { createFilter, getDefaultFetchPolicy } from '../helpers';
-import { generateTablePaginationOptions } from '../../components/paginated_table/helpers';
-import { withKibana, WithKibanaProps } from '../../lib/kibana';
-import { QueryTemplatePaginated, QueryTemplatePaginatedProps } from '../query_template_paginated';
-
-import { authenticationsQuery } from './index.gql_query';
-
-const ID = 'authenticationQuery';
-
-export interface AuthenticationArgs {
-  authentications: AuthenticationsEdges[];
-  id: string;
-  inspect: inputsModel.InspectQuery;
-  isInspected: boolean;
-  loading: boolean;
-  loadPage: (newActivePage: number) => void;
-  pageInfo: PageInfoPaginated;
-  refetch: inputsModel.Refetch;
-  totalCount: number;
-}
-
-export interface OwnProps extends QueryTemplatePaginatedProps {
-  children: (args: AuthenticationArgs) => React.ReactNode;
-  type: hostsModel.HostsType;
-}
-
-export interface AuthenticationsComponentReduxProps {
-  activePage: number;
-  isInspected: boolean;
-  limit: number;
-}
-
-type AuthenticationsProps = OwnProps & AuthenticationsComponentReduxProps & WithKibanaProps;
-
-class AuthenticationsComponentQuery extends QueryTemplatePaginated<
-  AuthenticationsProps,
-  GetAuthenticationsQuery.Query,
-  GetAuthenticationsQuery.Variables
-> {
-  public render() {
-    const {
-      activePage,
-      children,
-      endDate,
-      filterQuery,
-      id = ID,
-      isInspected,
-      kibana,
-      limit,
-      skip,
-      sourceId,
-      startDate,
-    } = this.props;
-    const variables: GetAuthenticationsQuery.Variables = {
-      sourceId,
-      timerange: {
-        interval: '12h',
-        from: startDate!,
-        to: endDate!,
-      },
-      pagination: generateTablePaginationOptions(activePage, limit),
-      filterQuery: createFilter(filterQuery),
-      defaultIndex: kibana.services.uiSettings.get<string[]>(DEFAULT_INDEX_KEY),
-      inspect: isInspected,
-    };
-    return (
-      <Query<GetAuthenticationsQuery.Query, GetAuthenticationsQuery.Variables>
-        query={authenticationsQuery}
-        fetchPolicy={getDefaultFetchPolicy()}
-        notifyOnNetworkStatusChange
-        skip={skip}
-        variables={variables}
-      >
-        {({ data, loading, fetchMore, networkStatus, refetch }) => {
-          const authentications = getOr([], 'source.Authentications.edges', data);
-          this.setFetchMore(fetchMore);
-          this.setFetchMoreOptions((newActivePage: number) => ({
-            variables: {
-              pagination: generateTablePaginationOptions(newActivePage, limit),
-            },
-            updateQuery: (prev, { fetchMoreResult }) => {
-              if (!fetchMoreResult) {
-                return prev;
-              }
-              return {
-                ...fetchMoreResult,
-                source: {
-                  ...fetchMoreResult.source,
-                  Authentications: {
-                    ...fetchMoreResult.source.Authentications,
-                    edges: [...fetchMoreResult.source.Authentications.edges],
-                  },
-                },
-              };
-            },
-          }));
-          const isLoading = this.isItAValidLoading(loading, variables, networkStatus);
-          return children({
-            authentications,
-            id,
-            inspect: getOr(null, 'source.Authentications.inspect', data),
-            isInspected,
-            loading: isLoading,
-            loadPage: this.wrappedLoadMore,
-            pageInfo: getOr({}, 'source.Authentications.pageInfo', data),
-            refetch: this.memoizedRefetchQuery(variables, limit, refetch),
-            totalCount: getOr(-1, 'source.Authentications.totalCount', data),
-          });
-        }}
-      </Query>
-    );
-  }
-}
-
-const makeMapStateToProps = () => {
-  const getAuthenticationsSelector = hostsSelectors.authenticationsSelector();
-  const getQuery = inputsSelectors.globalQueryByIdSelector();
-  const mapStateToProps = (state: State, { type, id = ID }: OwnProps) => {
-    const { isInspected } = getQuery(state, id);
-    return {
-      ...getAuthenticationsSelector(state, type),
-      isInspected,
-    };
-  };
-  return mapStateToProps;
-};
-
-export const AuthenticationsQuery = compose<React.ComponentClass<OwnProps>>(
-  connect(makeMapStateToProps),
-  withKibana
-)(AuthenticationsComponentQuery);
diff --git a/x-pack/plugins/siem/public/containers/case/api.ts b/x-pack/plugins/siem/public/containers/case/api.ts
deleted file mode 100644
index 438eae9d88a448..00000000000000
--- a/x-pack/plugins/siem/public/containers/case/api.ts
+++ /dev/null
@@ -1,268 +0,0 @@
-/*
- * 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 {
-  CaseResponse,
-  CasesResponse,
-  CasesFindResponse,
-  CasePatchRequest,
-  CasePostRequest,
-  CasesStatusResponse,
-  CommentRequest,
-  User,
-  CaseUserActionsResponse,
-  CaseExternalServiceRequest,
-  ServiceConnectorCaseParams,
-  ServiceConnectorCaseResponse,
-  ActionTypeExecutorResult,
-} from '../../../../case/common/api';
-
-import {
-  CASE_STATUS_URL,
-  CASES_URL,
-  CASE_TAGS_URL,
-  CASE_REPORTERS_URL,
-  ACTION_TYPES_URL,
-  ACTION_URL,
-} from '../../../../case/common/constants';
-
-import {
-  getCaseDetailsUrl,
-  getCaseUserActionUrl,
-  getCaseCommentsUrl,
-} from '../../../../case/common/api/helpers';
-
-import { KibanaServices } from '../../lib/kibana';
-
-import {
-  ActionLicense,
-  AllCases,
-  BulkUpdateStatus,
-  Case,
-  CasesStatus,
-  FetchCasesProps,
-  SortFieldCase,
-  CaseUserActions,
-} from './types';
-
-import {
-  convertToCamelCase,
-  convertAllCasesToCamel,
-  convertArrayToCamelCase,
-  decodeCaseResponse,
-  decodeCasesResponse,
-  decodeCasesFindResponse,
-  decodeCasesStatusResponse,
-  decodeCaseUserActionsResponse,
-  decodeServiceConnectorCaseResponse,
-} from './utils';
-
-import * as i18n from './translations';
-
-export const getCase = async (
-  caseId: string,
-  includeComments: boolean = true,
-  signal: AbortSignal
-): Promise<Case> => {
-  const response = await KibanaServices.get().http.fetch<CaseResponse>(getCaseDetailsUrl(caseId), {
-    method: 'GET',
-    query: {
-      includeComments,
-    },
-    signal,
-  });
-  return convertToCamelCase<CaseResponse, Case>(decodeCaseResponse(response));
-};
-
-export const getCasesStatus = async (signal: AbortSignal): Promise<CasesStatus> => {
-  const response = await KibanaServices.get().http.fetch<CasesStatusResponse>(CASE_STATUS_URL, {
-    method: 'GET',
-    signal,
-  });
-  return convertToCamelCase<CasesStatusResponse, CasesStatus>(decodeCasesStatusResponse(response));
-};
-
-export const getTags = async (signal: AbortSignal): Promise<string[]> => {
-  const response = await KibanaServices.get().http.fetch<string[]>(CASE_TAGS_URL, {
-    method: 'GET',
-    signal,
-  });
-  return response ?? [];
-};
-
-export const getReporters = async (signal: AbortSignal): Promise<User[]> => {
-  const response = await KibanaServices.get().http.fetch<User[]>(CASE_REPORTERS_URL, {
-    method: 'GET',
-    signal,
-  });
-  return response ?? [];
-};
-
-export const getCaseUserActions = async (
-  caseId: string,
-  signal: AbortSignal
-): Promise<CaseUserActions[]> => {
-  const response = await KibanaServices.get().http.fetch<CaseUserActionsResponse>(
-    getCaseUserActionUrl(caseId),
-    {
-      method: 'GET',
-      signal,
-    }
-  );
-  return convertArrayToCamelCase(decodeCaseUserActionsResponse(response)) as CaseUserActions[];
-};
-
-export const getCases = async ({
-  filterOptions = {
-    search: '',
-    reporters: [],
-    status: 'open',
-    tags: [],
-  },
-  queryParams = {
-    page: 1,
-    perPage: 20,
-    sortField: SortFieldCase.createdAt,
-    sortOrder: 'desc',
-  },
-  signal,
-}: FetchCasesProps): Promise<AllCases> => {
-  const query = {
-    reporters: filterOptions.reporters.map(r => r.username ?? '').filter(r => r !== ''),
-    tags: filterOptions.tags,
-    ...(filterOptions.status !== '' ? { status: filterOptions.status } : {}),
-    ...(filterOptions.search.length > 0 ? { search: filterOptions.search } : {}),
-    ...queryParams,
-  };
-  const response = await KibanaServices.get().http.fetch<CasesFindResponse>(`${CASES_URL}/_find`, {
-    method: 'GET',
-    query,
-    signal,
-  });
-  return convertAllCasesToCamel(decodeCasesFindResponse(response));
-};
-
-export const postCase = async (newCase: CasePostRequest, signal: AbortSignal): Promise<Case> => {
-  const response = await KibanaServices.get().http.fetch<CaseResponse>(CASES_URL, {
-    method: 'POST',
-    body: JSON.stringify(newCase),
-    signal,
-  });
-  return convertToCamelCase<CaseResponse, Case>(decodeCaseResponse(response));
-};
-
-export const patchCase = async (
-  caseId: string,
-  updatedCase: Pick<CasePatchRequest, 'description' | 'status' | 'tags' | 'title'>,
-  version: string,
-  signal: AbortSignal
-): Promise<Case[]> => {
-  const response = await KibanaServices.get().http.fetch<CasesResponse>(CASES_URL, {
-    method: 'PATCH',
-    body: JSON.stringify({ cases: [{ ...updatedCase, id: caseId, version }] }),
-    signal,
-  });
-  return convertToCamelCase<CasesResponse, Case[]>(decodeCasesResponse(response));
-};
-
-export const patchCasesStatus = async (
-  cases: BulkUpdateStatus[],
-  signal: AbortSignal
-): Promise<Case[]> => {
-  const response = await KibanaServices.get().http.fetch<CasesResponse>(CASES_URL, {
-    method: 'PATCH',
-    body: JSON.stringify({ cases }),
-    signal,
-  });
-  return convertToCamelCase<CasesResponse, Case[]>(decodeCasesResponse(response));
-};
-
-export const postComment = async (
-  newComment: CommentRequest,
-  caseId: string,
-  signal: AbortSignal
-): Promise<Case> => {
-  const response = await KibanaServices.get().http.fetch<CaseResponse>(
-    `${CASES_URL}/${caseId}/comments`,
-    {
-      method: 'POST',
-      body: JSON.stringify(newComment),
-      signal,
-    }
-  );
-  return convertToCamelCase<CaseResponse, Case>(decodeCaseResponse(response));
-};
-
-export const patchComment = async (
-  caseId: string,
-  commentId: string,
-  commentUpdate: string,
-  version: string,
-  signal: AbortSignal
-): Promise<Case> => {
-  const response = await KibanaServices.get().http.fetch<CaseResponse>(getCaseCommentsUrl(caseId), {
-    method: 'PATCH',
-    body: JSON.stringify({ comment: commentUpdate, id: commentId, version }),
-    signal,
-  });
-  return convertToCamelCase<CaseResponse, Case>(decodeCaseResponse(response));
-};
-
-export const deleteCases = async (caseIds: string[], signal: AbortSignal): Promise<string> => {
-  const response = await KibanaServices.get().http.fetch<string>(CASES_URL, {
-    method: 'DELETE',
-    query: { ids: JSON.stringify(caseIds) },
-    signal,
-  });
-  return response;
-};
-
-export const pushCase = async (
-  caseId: string,
-  push: CaseExternalServiceRequest,
-  signal: AbortSignal
-): Promise<Case> => {
-  const response = await KibanaServices.get().http.fetch<CaseResponse>(
-    `${getCaseDetailsUrl(caseId)}/_push`,
-    {
-      method: 'POST',
-      body: JSON.stringify(push),
-      signal,
-    }
-  );
-  return convertToCamelCase<CaseResponse, Case>(decodeCaseResponse(response));
-};
-
-export const pushToService = async (
-  connectorId: string,
-  casePushParams: ServiceConnectorCaseParams,
-  signal: AbortSignal
-): Promise<ServiceConnectorCaseResponse> => {
-  const response = await KibanaServices.get().http.fetch<ActionTypeExecutorResult>(
-    `${ACTION_URL}/${connectorId}/_execute`,
-    {
-      method: 'POST',
-      body: JSON.stringify({
-        params: { subAction: 'pushToService', subActionParams: casePushParams },
-      }),
-      signal,
-    }
-  );
-
-  if (response.status === 'error') {
-    throw new Error(response.serviceMessage ?? response.message ?? i18n.ERROR_PUSH_TO_SERVICE);
-  }
-
-  return decodeServiceConnectorCaseResponse(response.data);
-};
-
-export const getActionLicense = async (signal: AbortSignal): Promise<ActionLicense[]> => {
-  const response = await KibanaServices.get().http.fetch<ActionLicense[]>(ACTION_TYPES_URL, {
-    method: 'GET',
-    signal,
-  });
-  return response;
-};
diff --git a/x-pack/plugins/siem/public/containers/case/configure/api.test.ts b/x-pack/plugins/siem/public/containers/case/configure/api.test.ts
deleted file mode 100644
index ef0e51fb1c24db..00000000000000
--- a/x-pack/plugins/siem/public/containers/case/configure/api.test.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-/*
- * 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 { KibanaServices } from '../../../lib/kibana';
-import { fetchConnectors, getCaseConfigure, postCaseConfigure, patchCaseConfigure } from './api';
-import {
-  connectorsMock,
-  caseConfigurationMock,
-  caseConfigurationResposeMock,
-  caseConfigurationCamelCaseResponseMock,
-} from './mock';
-
-const abortCtrl = new AbortController();
-const mockKibanaServices = KibanaServices.get as jest.Mock;
-jest.mock('../../../lib/kibana');
-
-const fetchMock = jest.fn();
-mockKibanaServices.mockReturnValue({ http: { fetch: fetchMock } });
-
-describe('Case Configuration API', () => {
-  describe('fetch connectors', () => {
-    beforeEach(() => {
-      fetchMock.mockClear();
-      fetchMock.mockResolvedValue(connectorsMock);
-    });
-
-    test('check url, method, signal', async () => {
-      await fetchConnectors({ signal: abortCtrl.signal });
-      expect(fetchMock).toHaveBeenCalledWith('/api/cases/configure/connectors/_find', {
-        method: 'GET',
-        signal: abortCtrl.signal,
-      });
-    });
-
-    test('happy path', async () => {
-      const resp = await fetchConnectors({ signal: abortCtrl.signal });
-      expect(resp).toEqual(connectorsMock);
-    });
-  });
-
-  describe('fetch configuration', () => {
-    beforeEach(() => {
-      fetchMock.mockClear();
-      fetchMock.mockResolvedValue(caseConfigurationResposeMock);
-    });
-
-    test('check url, method, signal', async () => {
-      await getCaseConfigure({ signal: abortCtrl.signal });
-      expect(fetchMock).toHaveBeenCalledWith('/api/cases/configure', {
-        method: 'GET',
-        signal: abortCtrl.signal,
-      });
-    });
-
-    test('happy path', async () => {
-      const resp = await getCaseConfigure({ signal: abortCtrl.signal });
-      expect(resp).toEqual(caseConfigurationCamelCaseResponseMock);
-    });
-
-    test('return null on empty response', async () => {
-      fetchMock.mockResolvedValue({});
-      const resp = await getCaseConfigure({ signal: abortCtrl.signal });
-      expect(resp).toBe(null);
-    });
-  });
-
-  describe('create configuration', () => {
-    beforeEach(() => {
-      fetchMock.mockClear();
-      fetchMock.mockResolvedValue(caseConfigurationResposeMock);
-    });
-
-    test('check url, body, method, signal', async () => {
-      await postCaseConfigure(caseConfigurationMock, abortCtrl.signal);
-      expect(fetchMock).toHaveBeenCalledWith('/api/cases/configure', {
-        body:
-          '{"connector_id":"123","connector_name":"My Connector","closure_type":"close-by-user"}',
-        method: 'POST',
-        signal: abortCtrl.signal,
-      });
-    });
-
-    test('happy path', async () => {
-      const resp = await postCaseConfigure(caseConfigurationMock, abortCtrl.signal);
-      expect(resp).toEqual(caseConfigurationCamelCaseResponseMock);
-    });
-  });
-
-  describe('update configuration', () => {
-    beforeEach(() => {
-      fetchMock.mockClear();
-      fetchMock.mockResolvedValue(caseConfigurationResposeMock);
-    });
-
-    test('check url, body, method, signal', async () => {
-      await patchCaseConfigure({ connector_id: '456', version: 'WzHJ12' }, abortCtrl.signal);
-      expect(fetchMock).toHaveBeenCalledWith('/api/cases/configure', {
-        body: '{"connector_id":"456","version":"WzHJ12"}',
-        method: 'PATCH',
-        signal: abortCtrl.signal,
-      });
-    });
-
-    test('happy path', async () => {
-      const resp = await patchCaseConfigure(
-        { connector_id: '456', version: 'WzHJ12' },
-        abortCtrl.signal
-      );
-      expect(resp).toEqual(caseConfigurationCamelCaseResponseMock);
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/containers/case/configure/api.ts b/x-pack/plugins/siem/public/containers/case/configure/api.ts
deleted file mode 100644
index 4f516764e46f3d..00000000000000
--- a/x-pack/plugins/siem/public/containers/case/configure/api.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-/*
- * 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 { isEmpty } from 'lodash/fp';
-import {
-  Connector,
-  CasesConfigurePatch,
-  CasesConfigureResponse,
-  CasesConfigureRequest,
-} from '../../../../../case/common/api';
-import { KibanaServices } from '../../../lib/kibana';
-
-import {
-  CASE_CONFIGURE_CONNECTORS_URL,
-  CASE_CONFIGURE_URL,
-} from '../../../../../case/common/constants';
-
-import { ApiProps } from '../types';
-import { convertToCamelCase, decodeCaseConfigureResponse } from '../utils';
-import { CaseConfigure } from './types';
-
-export const fetchConnectors = async ({ signal }: ApiProps): Promise<Connector[]> => {
-  const response = await KibanaServices.get().http.fetch(`${CASE_CONFIGURE_CONNECTORS_URL}/_find`, {
-    method: 'GET',
-    signal,
-  });
-
-  return response;
-};
-
-export const getCaseConfigure = async ({ signal }: ApiProps): Promise<CaseConfigure | null> => {
-  const response = await KibanaServices.get().http.fetch<CasesConfigureResponse>(
-    CASE_CONFIGURE_URL,
-    {
-      method: 'GET',
-      signal,
-    }
-  );
-
-  return !isEmpty(response)
-    ? convertToCamelCase<CasesConfigureResponse, CaseConfigure>(
-        decodeCaseConfigureResponse(response)
-      )
-    : null;
-};
-
-export const postCaseConfigure = async (
-  caseConfiguration: CasesConfigureRequest,
-  signal: AbortSignal
-): Promise<CaseConfigure> => {
-  const response = await KibanaServices.get().http.fetch<CasesConfigureResponse>(
-    CASE_CONFIGURE_URL,
-    {
-      method: 'POST',
-      body: JSON.stringify(caseConfiguration),
-      signal,
-    }
-  );
-  return convertToCamelCase<CasesConfigureResponse, CaseConfigure>(
-    decodeCaseConfigureResponse(response)
-  );
-};
-
-export const patchCaseConfigure = async (
-  caseConfiguration: CasesConfigurePatch,
-  signal: AbortSignal
-): Promise<CaseConfigure> => {
-  const response = await KibanaServices.get().http.fetch<CasesConfigureResponse>(
-    CASE_CONFIGURE_URL,
-    {
-      method: 'PATCH',
-      body: JSON.stringify(caseConfiguration),
-      signal,
-    }
-  );
-  return convertToCamelCase<CasesConfigureResponse, CaseConfigure>(
-    decodeCaseConfigureResponse(response)
-  );
-};
diff --git a/x-pack/plugins/siem/public/containers/case/utils.ts b/x-pack/plugins/siem/public/containers/case/utils.ts
deleted file mode 100644
index 15e514d6ea8b30..00000000000000
--- a/x-pack/plugins/siem/public/containers/case/utils.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-/*
- * 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 { camelCase, isArray, isObject, set } from 'lodash';
-import { fold } from 'fp-ts/lib/Either';
-import { identity } from 'fp-ts/lib/function';
-import { pipe } from 'fp-ts/lib/pipeable';
-
-import {
-  CasesFindResponse,
-  CasesFindResponseRt,
-  CaseResponse,
-  CaseResponseRt,
-  CasesResponse,
-  CasesResponseRt,
-  CasesStatusResponseRt,
-  CasesStatusResponse,
-  throwErrors,
-  CasesConfigureResponse,
-  CaseConfigureResponseRt,
-  CaseUserActionsResponse,
-  CaseUserActionsResponseRt,
-  ServiceConnectorCaseResponseRt,
-  ServiceConnectorCaseResponse,
-} from '../../../../case/common/api';
-import { ToasterError } from '../../components/toasters';
-import { AllCases, Case } from './types';
-
-export const getTypedPayload = <T>(a: unknown): T => a as T;
-
-export const parseString = (params: string) => {
-  try {
-    return JSON.parse(params);
-  } catch {
-    return null;
-  }
-};
-
-export const convertArrayToCamelCase = (arrayOfSnakes: unknown[]): unknown[] =>
-  arrayOfSnakes.reduce((acc: unknown[], value) => {
-    if (isArray(value)) {
-      return [...acc, convertArrayToCamelCase(value)];
-    } else if (isObject(value)) {
-      return [...acc, convertToCamelCase(value)];
-    } else {
-      return [...acc, value];
-    }
-  }, []);
-
-export const convertToCamelCase = <T, U extends {}>(snakeCase: T): U =>
-  Object.entries(snakeCase).reduce((acc, [key, value]) => {
-    if (isArray(value)) {
-      set(acc, camelCase(key), convertArrayToCamelCase(value));
-    } else if (isObject(value)) {
-      set(acc, camelCase(key), convertToCamelCase(value));
-    } else {
-      set(acc, camelCase(key), value);
-    }
-    return acc;
-  }, {} as U);
-
-export const convertAllCasesToCamel = (snakeCases: CasesFindResponse): AllCases => ({
-  cases: snakeCases.cases.map(snakeCase => convertToCamelCase<CaseResponse, Case>(snakeCase)),
-  countClosedCases: snakeCases.count_closed_cases,
-  countOpenCases: snakeCases.count_open_cases,
-  page: snakeCases.page,
-  perPage: snakeCases.per_page,
-  total: snakeCases.total,
-});
-
-export const decodeCasesStatusResponse = (respCase?: CasesStatusResponse) =>
-  pipe(
-    CasesStatusResponseRt.decode(respCase),
-    fold(throwErrors(createToasterPlainError), identity)
-  );
-
-export const createToasterPlainError = (message: string) => new ToasterError([message]);
-
-export const decodeCaseResponse = (respCase?: CaseResponse) =>
-  pipe(CaseResponseRt.decode(respCase), fold(throwErrors(createToasterPlainError), identity));
-
-export const decodeCasesResponse = (respCase?: CasesResponse) =>
-  pipe(CasesResponseRt.decode(respCase), fold(throwErrors(createToasterPlainError), identity));
-
-export const decodeCasesFindResponse = (respCases?: CasesFindResponse) =>
-  pipe(CasesFindResponseRt.decode(respCases), fold(throwErrors(createToasterPlainError), identity));
-
-export const decodeCaseConfigureResponse = (respCase?: CasesConfigureResponse) =>
-  pipe(
-    CaseConfigureResponseRt.decode(respCase),
-    fold(throwErrors(createToasterPlainError), identity)
-  );
-
-export const decodeCaseUserActionsResponse = (respUserActions?: CaseUserActionsResponse) =>
-  pipe(
-    CaseUserActionsResponseRt.decode(respUserActions),
-    fold(throwErrors(createToasterPlainError), identity)
-  );
-
-export const decodeServiceConnectorCaseResponse = (respPushCase?: ServiceConnectorCaseResponse) =>
-  pipe(
-    ServiceConnectorCaseResponseRt.decode(respPushCase),
-    fold(throwErrors(createToasterPlainError), identity)
-  );
diff --git a/x-pack/plugins/siem/public/containers/detection_engine/rules/api.test.ts b/x-pack/plugins/siem/public/containers/detection_engine/rules/api.test.ts
deleted file mode 100644
index 9eb4acbdb61641..00000000000000
--- a/x-pack/plugins/siem/public/containers/detection_engine/rules/api.test.ts
+++ /dev/null
@@ -1,559 +0,0 @@
-/*
- * 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 { KibanaServices } from '../../../lib/kibana';
-import {
-  addRule,
-  fetchRules,
-  fetchRuleById,
-  enableRules,
-  deleteRules,
-  duplicateRules,
-  createPrepackagedRules,
-  importRules,
-  exportRules,
-  getRuleStatusById,
-  fetchTags,
-  getPrePackagedRulesStatus,
-} from './api';
-import { ruleMock, rulesMock } from './mock';
-
-const abortCtrl = new AbortController();
-const mockKibanaServices = KibanaServices.get as jest.Mock;
-jest.mock('../../../lib/kibana');
-
-const fetchMock = jest.fn();
-mockKibanaServices.mockReturnValue({ http: { fetch: fetchMock } });
-
-describe('Detections Rules API', () => {
-  describe('addRule', () => {
-    beforeEach(() => {
-      fetchMock.mockClear();
-      fetchMock.mockResolvedValue(ruleMock);
-    });
-
-    test('check parameter url, body', async () => {
-      await addRule({ rule: ruleMock, signal: abortCtrl.signal });
-      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules', {
-        body:
-          '{"description":"some desc","enabled":true,"false_positives":[],"filters":[],"from":"now-360s","index":["apm-*-transaction*","auditbeat-*","endgame-*","filebeat-*","packetbeat-*","winlogbeat-*"],"interval":"5m","rule_id":"bbd3106e-b4b5-4d7c-a1a2-47531d6a2baf","language":"kuery","risk_score":75,"name":"Test rule","query":"user.email: \'root@elastic.co\'","references":[],"severity":"high","tags":["APM"],"to":"now","type":"query","threat":[],"throttle":null}',
-        method: 'POST',
-        signal: abortCtrl.signal,
-      });
-    });
-
-    test('happy path', async () => {
-      const ruleResp = await addRule({ rule: ruleMock, signal: abortCtrl.signal });
-      expect(ruleResp).toEqual(ruleMock);
-    });
-  });
-
-  describe('fetchRules', () => {
-    beforeEach(() => {
-      fetchMock.mockClear();
-      fetchMock.mockResolvedValue(rulesMock);
-    });
-
-    test('check parameter url, query without any options', async () => {
-      await fetchRules({ signal: abortCtrl.signal });
-      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/_find', {
-        method: 'GET',
-        query: {
-          page: 1,
-          per_page: 20,
-          sort_field: 'enabled',
-          sort_order: 'desc',
-        },
-        signal: abortCtrl.signal,
-      });
-    });
-
-    test('check parameter url, query with a filter', async () => {
-      await fetchRules({
-        filterOptions: {
-          filter: 'hello world',
-          sortField: 'enabled',
-          sortOrder: 'desc',
-          showCustomRules: false,
-          showElasticRules: false,
-          tags: [],
-        },
-        signal: abortCtrl.signal,
-      });
-
-      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/_find', {
-        method: 'GET',
-        query: {
-          filter: 'alert.attributes.name: hello world',
-          page: 1,
-          per_page: 20,
-          sort_field: 'enabled',
-          sort_order: 'desc',
-        },
-        signal: abortCtrl.signal,
-      });
-    });
-
-    test('check parameter url, query with showCustomRules', async () => {
-      await fetchRules({
-        filterOptions: {
-          filter: '',
-          sortField: 'enabled',
-          sortOrder: 'desc',
-          showCustomRules: true,
-          showElasticRules: false,
-          tags: [],
-        },
-        signal: abortCtrl.signal,
-      });
-
-      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/_find', {
-        method: 'GET',
-        query: {
-          filter: 'alert.attributes.tags: "__internal_immutable:false"',
-          page: 1,
-          per_page: 20,
-          sort_field: 'enabled',
-          sort_order: 'desc',
-        },
-        signal: abortCtrl.signal,
-      });
-    });
-
-    test('check parameter url, query with showElasticRules', async () => {
-      await fetchRules({
-        filterOptions: {
-          filter: '',
-          sortField: 'enabled',
-          sortOrder: 'desc',
-          showCustomRules: false,
-          showElasticRules: true,
-          tags: [],
-        },
-        signal: abortCtrl.signal,
-      });
-
-      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/_find', {
-        method: 'GET',
-        query: {
-          filter: 'alert.attributes.tags: "__internal_immutable:true"',
-          page: 1,
-          per_page: 20,
-          sort_field: 'enabled',
-          sort_order: 'desc',
-        },
-        signal: abortCtrl.signal,
-      });
-    });
-
-    test('check parameter url, query with tags', async () => {
-      await fetchRules({
-        filterOptions: {
-          filter: '',
-          sortField: 'enabled',
-          sortOrder: 'desc',
-          showCustomRules: false,
-          showElasticRules: false,
-          tags: ['hello', 'world'],
-        },
-        signal: abortCtrl.signal,
-      });
-
-      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/_find', {
-        method: 'GET',
-        query: {
-          filter: 'alert.attributes.tags: hello AND alert.attributes.tags: world',
-          page: 1,
-          per_page: 20,
-          sort_field: 'enabled',
-          sort_order: 'desc',
-        },
-        signal: abortCtrl.signal,
-      });
-    });
-
-    test('check parameter url, query with all options', async () => {
-      await fetchRules({
-        filterOptions: {
-          filter: 'ruleName',
-          sortField: 'enabled',
-          sortOrder: 'desc',
-          showCustomRules: true,
-          showElasticRules: true,
-          tags: ['hello', 'world'],
-        },
-        signal: abortCtrl.signal,
-      });
-      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/_find', {
-        method: 'GET',
-        query: {
-          filter:
-            'alert.attributes.name: ruleName AND alert.attributes.tags: "__internal_immutable:false" AND alert.attributes.tags: "__internal_immutable:true" AND alert.attributes.tags: hello AND alert.attributes.tags: world',
-          page: 1,
-          per_page: 20,
-          sort_field: 'enabled',
-          sort_order: 'desc',
-        },
-        signal: abortCtrl.signal,
-      });
-    });
-
-    test('happy path', async () => {
-      const rulesResp = await fetchRules({ signal: abortCtrl.signal });
-      expect(rulesResp).toEqual(rulesMock);
-    });
-  });
-
-  describe('fetchRuleById', () => {
-    beforeEach(() => {
-      fetchMock.mockClear();
-      fetchMock.mockResolvedValue(ruleMock);
-    });
-
-    test('check parameter url, query', async () => {
-      await fetchRuleById({ id: 'mySuperRuleId', signal: abortCtrl.signal });
-      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules', {
-        query: {
-          id: 'mySuperRuleId',
-        },
-        method: 'GET',
-        signal: abortCtrl.signal,
-      });
-    });
-
-    test('happy path', async () => {
-      const ruleResp = await fetchRuleById({ id: 'mySuperRuleId', signal: abortCtrl.signal });
-      expect(ruleResp).toEqual(ruleMock);
-    });
-  });
-
-  describe('enableRules', () => {
-    beforeEach(() => {
-      fetchMock.mockClear();
-      fetchMock.mockResolvedValue(rulesMock);
-    });
-
-    test('check parameter url, body when enabling rules', async () => {
-      await enableRules({ ids: ['mySuperRuleId', 'mySuperRuleId_II'], enabled: true });
-      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/_bulk_update', {
-        body: '[{"id":"mySuperRuleId","enabled":true},{"id":"mySuperRuleId_II","enabled":true}]',
-        method: 'PATCH',
-      });
-    });
-    test('check parameter url, body when disabling rules', async () => {
-      await enableRules({ ids: ['mySuperRuleId', 'mySuperRuleId_II'], enabled: false });
-      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/_bulk_update', {
-        body: '[{"id":"mySuperRuleId","enabled":false},{"id":"mySuperRuleId_II","enabled":false}]',
-        method: 'PATCH',
-      });
-    });
-    test('happy path', async () => {
-      const ruleResp = await enableRules({
-        ids: ['mySuperRuleId', 'mySuperRuleId_II'],
-        enabled: true,
-      });
-      expect(ruleResp).toEqual(rulesMock);
-    });
-  });
-
-  describe('deleteRules', () => {
-    beforeEach(() => {
-      fetchMock.mockClear();
-      fetchMock.mockResolvedValue(rulesMock);
-    });
-
-    test('check parameter url, body when deleting rules', async () => {
-      await deleteRules({ ids: ['mySuperRuleId', 'mySuperRuleId_II'] });
-      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/_bulk_delete', {
-        body: '[{"id":"mySuperRuleId"},{"id":"mySuperRuleId_II"}]',
-        method: 'DELETE',
-      });
-    });
-
-    test('happy path', async () => {
-      const ruleResp = await deleteRules({
-        ids: ['mySuperRuleId', 'mySuperRuleId_II'],
-      });
-      expect(ruleResp).toEqual(rulesMock);
-    });
-  });
-
-  describe('duplicateRules', () => {
-    beforeEach(() => {
-      fetchMock.mockClear();
-      fetchMock.mockResolvedValue(rulesMock);
-    });
-
-    test('check parameter url, body when duplicating rules', async () => {
-      await duplicateRules({ rules: rulesMock.data });
-      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/_bulk_create', {
-        body:
-          '[{"actions":[],"description":"Elastic Endpoint detected Credential Dumping. Click the Elastic Endpoint icon in the event.module column or the link in the rule.reference column in the External Alerts tab of the SIEM Detections page for additional information.","enabled":false,"false_positives":[],"from":"now-660s","index":["endgame-*"],"interval":"10m","language":"kuery","output_index":".siem-signals-default","max_signals":100,"risk_score":73,"name":"Credential Dumping - Detected - Elastic Endpoint [Duplicate]","query":"event.kind:alert and event.module:endgame and event.action:cred_theft_event and endgame.metadata.type:detection","filters":[],"references":[],"severity":"high","tags":["Elastic","Endpoint"],"to":"now","type":"query","threat":[],"throttle":null,"version":1},{"actions":[],"description":"Elastic Endpoint detected an Adversary Behavior. Click the Elastic Endpoint icon in the event.module column or the link in the rule.reference column in the External Alerts tab of the SIEM Detections page for additional information.","enabled":false,"false_positives":[],"from":"now-660s","index":["endgame-*"],"interval":"10m","language":"kuery","output_index":".siem-signals-default","max_signals":100,"risk_score":47,"name":"Adversary Behavior - Detected - Elastic Endpoint [Duplicate]","query":"event.kind:alert and event.module:endgame and event.action:rules_engine_event","filters":[],"references":[],"severity":"medium","tags":["Elastic","Endpoint"],"to":"now","type":"query","threat":[],"throttle":null,"version":1}]',
-        method: 'POST',
-      });
-    });
-
-    test('happy path', async () => {
-      const ruleResp = await duplicateRules({ rules: rulesMock.data });
-      expect(ruleResp).toEqual(rulesMock);
-    });
-  });
-
-  describe('createPrepackagedRules', () => {
-    beforeEach(() => {
-      fetchMock.mockClear();
-      fetchMock.mockResolvedValue('unknown');
-    });
-
-    test('check parameter url when creating pre-packaged rules', async () => {
-      await createPrepackagedRules({ signal: abortCtrl.signal });
-      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/prepackaged', {
-        signal: abortCtrl.signal,
-        method: 'PUT',
-      });
-    });
-    test('happy path', async () => {
-      const resp = await createPrepackagedRules({ signal: abortCtrl.signal });
-      expect(resp).toEqual(true);
-    });
-  });
-
-  describe('importRules', () => {
-    const fileToImport: File = {
-      lastModified: 33,
-      name: 'fileToImport',
-      size: 89,
-      type: 'json',
-      arrayBuffer: jest.fn(),
-      slice: jest.fn(),
-      stream: jest.fn(),
-      text: jest.fn(),
-    } as File;
-    const formData = new FormData();
-    formData.append('file', fileToImport);
-
-    beforeEach(() => {
-      fetchMock.mockClear();
-      fetchMock.mockResolvedValue('unknown');
-    });
-
-    test('check parameter url, body and query when importing rules', async () => {
-      await importRules({ fileToImport, signal: abortCtrl.signal });
-      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/_import', {
-        signal: abortCtrl.signal,
-        method: 'POST',
-        body: formData,
-        headers: {
-          'Content-Type': undefined,
-        },
-        query: {
-          overwrite: false,
-        },
-      });
-    });
-
-    test('check parameter url, body and query when importing rules with overwrite', async () => {
-      await importRules({ fileToImport, overwrite: true, signal: abortCtrl.signal });
-      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/_import', {
-        signal: abortCtrl.signal,
-        method: 'POST',
-        body: formData,
-        headers: {
-          'Content-Type': undefined,
-        },
-        query: {
-          overwrite: true,
-        },
-      });
-    });
-
-    test('happy path', async () => {
-      fetchMock.mockResolvedValue({
-        success: true,
-        success_count: 33,
-        errors: [],
-      });
-      const resp = await importRules({ fileToImport, signal: abortCtrl.signal });
-      expect(resp).toEqual({
-        success: true,
-        success_count: 33,
-        errors: [],
-      });
-    });
-  });
-
-  describe('exportRules', () => {
-    const blob: Blob = {
-      size: 89,
-      type: 'json',
-      arrayBuffer: jest.fn(),
-      slice: jest.fn(),
-      stream: jest.fn(),
-      text: jest.fn(),
-    } as Blob;
-
-    beforeEach(() => {
-      fetchMock.mockClear();
-      fetchMock.mockResolvedValue(blob);
-    });
-
-    test('check parameter url, body and query when exporting rules', async () => {
-      await exportRules({
-        ids: ['mySuperRuleId', 'mySuperRuleId_II'],
-        signal: abortCtrl.signal,
-      });
-      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/_export', {
-        signal: abortCtrl.signal,
-        method: 'POST',
-        body: '{"objects":[{"rule_id":"mySuperRuleId"},{"rule_id":"mySuperRuleId_II"}]}',
-        query: {
-          exclude_export_details: false,
-          file_name: 'rules_export.ndjson',
-        },
-      });
-    });
-
-    test('check parameter url, body and query when exporting rules with excludeExportDetails', async () => {
-      await exportRules({
-        excludeExportDetails: true,
-        ids: ['mySuperRuleId', 'mySuperRuleId_II'],
-        signal: abortCtrl.signal,
-      });
-      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/_export', {
-        signal: abortCtrl.signal,
-        method: 'POST',
-        body: '{"objects":[{"rule_id":"mySuperRuleId"},{"rule_id":"mySuperRuleId_II"}]}',
-        query: {
-          exclude_export_details: true,
-          file_name: 'rules_export.ndjson',
-        },
-      });
-    });
-
-    test('check parameter url, body and query when exporting rules with fileName', async () => {
-      await exportRules({
-        filename: 'myFileName.ndjson',
-        ids: ['mySuperRuleId', 'mySuperRuleId_II'],
-        signal: abortCtrl.signal,
-      });
-      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/_export', {
-        signal: abortCtrl.signal,
-        method: 'POST',
-        body: '{"objects":[{"rule_id":"mySuperRuleId"},{"rule_id":"mySuperRuleId_II"}]}',
-        query: {
-          exclude_export_details: false,
-          file_name: 'myFileName.ndjson',
-        },
-      });
-    });
-
-    test('check parameter url, body and query when exporting rules with all options', async () => {
-      await exportRules({
-        excludeExportDetails: true,
-        filename: 'myFileName.ndjson',
-        ids: ['mySuperRuleId', 'mySuperRuleId_II'],
-        signal: abortCtrl.signal,
-      });
-      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/_export', {
-        signal: abortCtrl.signal,
-        method: 'POST',
-        body: '{"objects":[{"rule_id":"mySuperRuleId"},{"rule_id":"mySuperRuleId_II"}]}',
-        query: {
-          exclude_export_details: true,
-          file_name: 'myFileName.ndjson',
-        },
-      });
-    });
-
-    test('happy path', async () => {
-      const resp = await exportRules({
-        ids: ['mySuperRuleId', 'mySuperRuleId_II'],
-        signal: abortCtrl.signal,
-      });
-      expect(resp).toEqual(blob);
-    });
-  });
-
-  describe('getRuleStatusById', () => {
-    const statusMock = {
-      myRule: {
-        current_status: {
-          alert_id: 'alertId',
-          status_date: 'mm/dd/yyyyTHH:MM:sssz',
-          status: 'succeeded',
-          last_failure_at: null,
-          last_success_at: 'mm/dd/yyyyTHH:MM:sssz',
-          last_failure_message: null,
-          last_success_message: 'it is a success',
-        },
-        failures: [],
-      },
-    };
-
-    beforeEach(() => {
-      fetchMock.mockClear();
-      fetchMock.mockResolvedValue(statusMock);
-    });
-
-    test('check parameter url, query', async () => {
-      await getRuleStatusById({ id: 'mySuperRuleId', signal: abortCtrl.signal });
-      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/_find_statuses', {
-        body: '{"ids":["mySuperRuleId"]}',
-        method: 'POST',
-        signal: abortCtrl.signal,
-      });
-    });
-
-    test('happy path', async () => {
-      const ruleResp = await getRuleStatusById({ id: 'mySuperRuleId', signal: abortCtrl.signal });
-      expect(ruleResp).toEqual(statusMock);
-    });
-  });
-
-  describe('fetchTags', () => {
-    beforeEach(() => {
-      fetchMock.mockClear();
-      fetchMock.mockResolvedValue(['some', 'tags']);
-    });
-
-    test('check parameter url when fetching tags', async () => {
-      await fetchTags({ signal: abortCtrl.signal });
-      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/tags', {
-        signal: abortCtrl.signal,
-        method: 'GET',
-      });
-    });
-
-    test('happy path', async () => {
-      const resp = await fetchTags({ signal: abortCtrl.signal });
-      expect(resp).toEqual(['some', 'tags']);
-    });
-  });
-
-  describe('getPrePackagedRulesStatus', () => {
-    const prePackagedRulesStatus = {
-      rules_custom_installed: 33,
-      rules_installed: 12,
-      rules_not_installed: 0,
-      rules_not_updated: 2,
-    };
-    beforeEach(() => {
-      fetchMock.mockClear();
-      fetchMock.mockResolvedValue(prePackagedRulesStatus);
-    });
-    test('check parameter url when fetching tags', async () => {
-      await getPrePackagedRulesStatus({ signal: abortCtrl.signal });
-      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/prepackaged/_status', {
-        signal: abortCtrl.signal,
-        method: 'GET',
-      });
-    });
-    test('happy path', async () => {
-      const resp = await getPrePackagedRulesStatus({ signal: abortCtrl.signal });
-      expect(resp).toEqual(prePackagedRulesStatus);
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/containers/detection_engine/rules/api.ts b/x-pack/plugins/siem/public/containers/detection_engine/rules/api.ts
deleted file mode 100644
index c1fadf289ef4d9..00000000000000
--- a/x-pack/plugins/siem/public/containers/detection_engine/rules/api.ts
+++ /dev/null
@@ -1,331 +0,0 @@
-/*
- * 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 {
-  DETECTION_ENGINE_RULES_URL,
-  DETECTION_ENGINE_PREPACKAGED_URL,
-  DETECTION_ENGINE_RULES_STATUS_URL,
-  DETECTION_ENGINE_PREPACKAGED_RULES_STATUS_URL,
-  DETECTION_ENGINE_TAGS_URL,
-} from '../../../../common/constants';
-import {
-  AddRulesProps,
-  DeleteRulesProps,
-  DuplicateRulesProps,
-  EnableRulesProps,
-  FetchRulesProps,
-  FetchRulesResponse,
-  NewRule,
-  Rule,
-  FetchRuleProps,
-  BasicFetchProps,
-  ImportDataProps,
-  ExportDocumentsProps,
-  RuleStatusResponse,
-  ImportDataResponse,
-  PrePackagedRulesStatusResponse,
-  BulkRuleResponse,
-} from './types';
-import { KibanaServices } from '../../../lib/kibana';
-import * as i18n from '../../../pages/detection_engine/rules/translations';
-
-/**
- * Add provided Rule
- *
- * @param rule to add
- * @param signal to cancel request
- *
- * @throws An error if response is not OK
- */
-export const addRule = async ({ rule, signal }: AddRulesProps): Promise<NewRule> =>
-  KibanaServices.get().http.fetch<NewRule>(DETECTION_ENGINE_RULES_URL, {
-    method: rule.id != null ? 'PUT' : 'POST',
-    body: JSON.stringify(rule),
-    signal,
-  });
-
-/**
- * Fetches all rules from the Detection Engine API
- *
- * @param filterOptions desired filters (e.g. filter/sortField/sortOrder)
- * @param pagination desired pagination options (e.g. page/perPage)
- * @param signal to cancel request
- *
- * @throws An error if response is not OK
- */
-export const fetchRules = async ({
-  filterOptions = {
-    filter: '',
-    sortField: 'enabled',
-    sortOrder: 'desc',
-    showCustomRules: false,
-    showElasticRules: false,
-    tags: [],
-  },
-  pagination = {
-    page: 1,
-    perPage: 20,
-    total: 0,
-  },
-  signal,
-}: FetchRulesProps): Promise<FetchRulesResponse> => {
-  const filters = [
-    ...(filterOptions.filter.length ? [`alert.attributes.name: ${filterOptions.filter}`] : []),
-    ...(filterOptions.showCustomRules
-      ? [`alert.attributes.tags: "__internal_immutable:false"`]
-      : []),
-    ...(filterOptions.showElasticRules
-      ? [`alert.attributes.tags: "__internal_immutable:true"`]
-      : []),
-    ...(filterOptions.tags?.map(t => `alert.attributes.tags: ${t}`) ?? []),
-  ];
-
-  const query = {
-    page: pagination.page,
-    per_page: pagination.perPage,
-    sort_field: filterOptions.sortField,
-    sort_order: filterOptions.sortOrder,
-    ...(filters.length ? { filter: filters.join(' AND ') } : {}),
-  };
-
-  return KibanaServices.get().http.fetch<FetchRulesResponse>(
-    `${DETECTION_ENGINE_RULES_URL}/_find`,
-    {
-      method: 'GET',
-      query,
-      signal,
-    }
-  );
-};
-
-/**
- * Fetch a Rule by providing a Rule ID
- *
- * @param id Rule ID's (not rule_id)
- * @param signal to cancel request
- *
- * @throws An error if response is not OK
- */
-export const fetchRuleById = async ({ id, signal }: FetchRuleProps): Promise<Rule> =>
-  KibanaServices.get().http.fetch<Rule>(DETECTION_ENGINE_RULES_URL, {
-    method: 'GET',
-    query: { id },
-    signal,
-  });
-
-/**
- * Enables/Disables provided Rule ID's
- *
- * @param ids array of Rule ID's (not rule_id) to enable/disable
- * @param enabled to enable or disable
- *
- * @throws An error if response is not OK
- */
-export const enableRules = async ({ ids, enabled }: EnableRulesProps): Promise<BulkRuleResponse> =>
-  KibanaServices.get().http.fetch<BulkRuleResponse>(`${DETECTION_ENGINE_RULES_URL}/_bulk_update`, {
-    method: 'PATCH',
-    body: JSON.stringify(ids.map(id => ({ id, enabled }))),
-  });
-
-/**
- * Deletes provided Rule ID's
- *
- * @param ids array of Rule ID's (not rule_id) to delete
- *
- * @throws An error if response is not OK
- */
-export const deleteRules = async ({ ids }: DeleteRulesProps): Promise<BulkRuleResponse> =>
-  KibanaServices.get().http.fetch<Rule[]>(`${DETECTION_ENGINE_RULES_URL}/_bulk_delete`, {
-    method: 'DELETE',
-    body: JSON.stringify(ids.map(id => ({ id }))),
-  });
-
-/**
- * Duplicates provided Rules
- *
- * @param rules to duplicate
- *
- * @throws An error if response is not OK
- */
-export const duplicateRules = async ({ rules }: DuplicateRulesProps): Promise<BulkRuleResponse> =>
-  KibanaServices.get().http.fetch<Rule[]>(`${DETECTION_ENGINE_RULES_URL}/_bulk_create`, {
-    method: 'POST',
-    body: JSON.stringify(
-      rules.map(rule => ({
-        ...rule,
-        name: `${rule.name} [${i18n.DUPLICATE}]`,
-        created_at: undefined,
-        created_by: undefined,
-        id: undefined,
-        rule_id: undefined,
-        updated_at: undefined,
-        updated_by: undefined,
-        enabled: rule.enabled,
-        immutable: undefined,
-        last_success_at: undefined,
-        last_success_message: undefined,
-        last_failure_at: undefined,
-        last_failure_message: undefined,
-        status: undefined,
-        status_date: undefined,
-      }))
-    ),
-  });
-
-/**
- * Create Prepackaged Rules
- *
- * @param signal AbortSignal for cancelling request
- *
- * @throws An error if response is not OK
- */
-export const createPrepackagedRules = async ({ signal }: BasicFetchProps): Promise<boolean> => {
-  await KibanaServices.get().http.fetch<unknown>(DETECTION_ENGINE_PREPACKAGED_URL, {
-    method: 'PUT',
-    signal,
-  });
-
-  return true;
-};
-
-/**
- * Imports rules in the same format as exported via the _export API
- *
- * @param fileToImport File to upload containing rules to import
- * @param overwrite whether or not to overwrite rules with the same ruleId
- * @param signal AbortSignal for cancelling request
- *
- * @throws An error if response is not OK
- */
-export const importRules = async ({
-  fileToImport,
-  overwrite = false,
-  signal,
-}: ImportDataProps): Promise<ImportDataResponse> => {
-  const formData = new FormData();
-  formData.append('file', fileToImport);
-
-  return KibanaServices.get().http.fetch<ImportDataResponse>(
-    `${DETECTION_ENGINE_RULES_URL}/_import`,
-    {
-      method: 'POST',
-      headers: { 'Content-Type': undefined },
-      query: { overwrite },
-      body: formData,
-      signal,
-    }
-  );
-};
-
-/**
- * Export rules from the server as a file download
- *
- * @param excludeExportDetails whether or not to exclude additional details at bottom of exported file (defaults to false)
- * @param filename of exported rules. Be sure to include `.ndjson` extension! (defaults to localized `rules_export.ndjson`)
- * @param ruleIds array of rule_id's (not id!) to export (empty array exports _all_ rules)
- * @param signal AbortSignal for cancelling request
- *
- * @throws An error if response is not OK
- */
-export const exportRules = async ({
-  excludeExportDetails = false,
-  filename = `${i18n.EXPORT_FILENAME}.ndjson`,
-  ids = [],
-  signal,
-}: ExportDocumentsProps): Promise<Blob> => {
-  const body =
-    ids.length > 0 ? JSON.stringify({ objects: ids.map(rule => ({ rule_id: rule })) }) : undefined;
-
-  return KibanaServices.get().http.fetch<Blob>(`${DETECTION_ENGINE_RULES_URL}/_export`, {
-    method: 'POST',
-    body,
-    query: {
-      exclude_export_details: excludeExportDetails,
-      file_name: filename,
-    },
-    signal,
-  });
-};
-
-/**
- * Get Rule Status provided Rule ID
- *
- * @param id string of Rule ID's (not rule_id)
- * @param signal AbortSignal for cancelling request
- *
- * @throws An error if response is not OK
- */
-export const getRuleStatusById = async ({
-  id,
-  signal,
-}: {
-  id: string;
-  signal: AbortSignal;
-}): Promise<RuleStatusResponse> =>
-  KibanaServices.get().http.fetch<RuleStatusResponse>(DETECTION_ENGINE_RULES_STATUS_URL, {
-    method: 'POST',
-    body: JSON.stringify({ ids: [id] }),
-    signal,
-  });
-
-/**
- * Return rule statuses given list of alert ids
- *
- * @param ids array of string of Rule ID's (not rule_id)
- * @param signal AbortSignal for cancelling request
- *
- * @throws An error if response is not OK
- */
-export const getRulesStatusByIds = async ({
-  ids,
-  signal,
-}: {
-  ids: string[];
-  signal: AbortSignal;
-}): Promise<RuleStatusResponse> => {
-  const res = await KibanaServices.get().http.fetch<RuleStatusResponse>(
-    DETECTION_ENGINE_RULES_STATUS_URL,
-    {
-      method: 'POST',
-      body: JSON.stringify({ ids }),
-      signal,
-    }
-  );
-  return res;
-};
-
-/**
- * Fetch all unique Tags used by Rules
- *
- * @param signal to cancel request
- *
- * @throws An error if response is not OK
- */
-export const fetchTags = async ({ signal }: { signal: AbortSignal }): Promise<string[]> =>
-  KibanaServices.get().http.fetch<string[]>(DETECTION_ENGINE_TAGS_URL, {
-    method: 'GET',
-    signal,
-  });
-
-/**
- * Get pre packaged rules Status
- *
- * @param signal AbortSignal for cancelling request
- *
- * @throws An error if response is not OK
- */
-export const getPrePackagedRulesStatus = async ({
-  signal,
-}: {
-  signal: AbortSignal;
-}): Promise<PrePackagedRulesStatusResponse> =>
-  KibanaServices.get().http.fetch<PrePackagedRulesStatusResponse>(
-    DETECTION_ENGINE_PREPACKAGED_RULES_STATUS_URL,
-    {
-      method: 'GET',
-      signal,
-    }
-  );
diff --git a/x-pack/plugins/siem/public/containers/detection_engine/rules/types.ts b/x-pack/plugins/siem/public/containers/detection_engine/rules/types.ts
deleted file mode 100644
index f89d21ef1aeb19..00000000000000
--- a/x-pack/plugins/siem/public/containers/detection_engine/rules/types.ts
+++ /dev/null
@@ -1,246 +0,0 @@
-/*
- * 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 * as t from 'io-ts';
-
-import { RuleTypeSchema } from '../../../../common/detection_engine/types';
-
-/**
- * Params is an "record", since it is a type of AlertActionParams which is action templates.
- * @see x-pack/plugins/alerting/common/alert.ts
- */
-export const action = t.exact(
-  t.type({
-    group: t.string,
-    id: t.string,
-    action_type_id: t.string,
-    params: t.record(t.string, t.any),
-  })
-);
-
-export const NewRuleSchema = t.intersection([
-  t.type({
-    description: t.string,
-    enabled: t.boolean,
-    interval: t.string,
-    name: t.string,
-    risk_score: t.number,
-    severity: t.string,
-    type: RuleTypeSchema,
-  }),
-  t.partial({
-    actions: t.array(action),
-    anomaly_threshold: t.number,
-    created_by: t.string,
-    false_positives: t.array(t.string),
-    filters: t.array(t.unknown),
-    from: t.string,
-    id: t.string,
-    index: t.array(t.string),
-    language: t.string,
-    machine_learning_job_id: t.string,
-    max_signals: t.number,
-    query: t.string,
-    references: t.array(t.string),
-    rule_id: t.string,
-    saved_id: t.string,
-    tags: t.array(t.string),
-    threat: t.array(t.unknown),
-    throttle: t.union([t.string, t.null]),
-    to: t.string,
-    updated_by: t.string,
-    note: t.string,
-  }),
-]);
-
-export const NewRulesSchema = t.array(NewRuleSchema);
-export type NewRule = t.TypeOf<typeof NewRuleSchema>;
-
-export interface AddRulesProps {
-  rule: NewRule;
-  signal: AbortSignal;
-}
-
-const MetaRule = t.intersection([
-  t.type({
-    from: t.string,
-  }),
-  t.partial({
-    throttle: t.string,
-    kibana_siem_app_url: t.string,
-  }),
-]);
-
-export const RuleSchema = t.intersection([
-  t.type({
-    created_at: t.string,
-    created_by: t.string,
-    description: t.string,
-    enabled: t.boolean,
-    false_positives: t.array(t.string),
-    from: t.string,
-    id: t.string,
-    interval: t.string,
-    immutable: t.boolean,
-    name: t.string,
-    max_signals: t.number,
-    references: t.array(t.string),
-    risk_score: t.number,
-    rule_id: t.string,
-    severity: t.string,
-    tags: t.array(t.string),
-    type: RuleTypeSchema,
-    to: t.string,
-    threat: t.array(t.unknown),
-    updated_at: t.string,
-    updated_by: t.string,
-    actions: t.array(action),
-    throttle: t.union([t.string, t.null]),
-  }),
-  t.partial({
-    anomaly_threshold: t.number,
-    filters: t.array(t.unknown),
-    index: t.array(t.string),
-    language: t.string,
-    last_failure_at: t.string,
-    last_failure_message: t.string,
-    meta: MetaRule,
-    machine_learning_job_id: t.string,
-    output_index: t.string,
-    query: t.string,
-    saved_id: t.string,
-    status: t.string,
-    status_date: t.string,
-    timeline_id: t.string,
-    timeline_title: t.string,
-    note: t.string,
-    version: t.number,
-  }),
-]);
-
-export const RulesSchema = t.array(RuleSchema);
-
-export type Rule = t.TypeOf<typeof RuleSchema>;
-export type Rules = t.TypeOf<typeof RulesSchema>;
-
-export interface RuleError {
-  id?: string;
-  rule_id?: string;
-  error: { status_code: number; message: string };
-}
-
-export type BulkRuleResponse = Array<Rule | RuleError>;
-
-export interface RuleResponseBuckets {
-  rules: Rule[];
-  errors: RuleError[];
-}
-
-export interface PaginationOptions {
-  page: number;
-  perPage: number;
-  total: number;
-}
-
-export interface FetchRulesProps {
-  pagination?: PaginationOptions;
-  filterOptions?: FilterOptions;
-  signal: AbortSignal;
-}
-
-export interface FilterOptions {
-  filter: string;
-  sortField: string;
-  sortOrder: 'asc' | 'desc';
-  showCustomRules?: boolean;
-  showElasticRules?: boolean;
-  tags?: string[];
-}
-
-export interface FetchRulesResponse {
-  page: number;
-  perPage: number;
-  total: number;
-  data: Rule[];
-}
-
-export interface FetchRuleProps {
-  id: string;
-  signal: AbortSignal;
-}
-
-export interface EnableRulesProps {
-  ids: string[];
-  enabled: boolean;
-}
-
-export interface DeleteRulesProps {
-  ids: string[];
-}
-
-export interface DuplicateRulesProps {
-  rules: Rule[];
-}
-
-export interface BasicFetchProps {
-  signal: AbortSignal;
-}
-
-export interface ImportDataProps {
-  fileToImport: File;
-  overwrite?: boolean;
-  signal: AbortSignal;
-}
-
-export interface ImportRulesResponseError {
-  rule_id: string;
-  error: {
-    status_code: number;
-    message: string;
-  };
-}
-
-export interface ImportDataResponse {
-  success: boolean;
-  success_count: number;
-  errors: ImportRulesResponseError[];
-}
-
-export interface ExportDocumentsProps {
-  ids: string[];
-  filename?: string;
-  excludeExportDetails?: boolean;
-  signal: AbortSignal;
-}
-
-export interface RuleStatus {
-  current_status: RuleInfoStatus;
-  failures: RuleInfoStatus[];
-}
-
-export type RuleStatusType = 'executing' | 'failed' | 'going to run' | 'succeeded';
-export interface RuleInfoStatus {
-  alert_id: string;
-  status_date: string;
-  status: RuleStatusType | null;
-  last_failure_at: string | null;
-  last_success_at: string | null;
-  last_failure_message: string | null;
-  last_success_message: string | null;
-  last_look_back_date: string | null | undefined;
-  gap: string | null | undefined;
-  bulk_create_time_durations: string[] | null | undefined;
-  search_after_time_durations: string[] | null | undefined;
-}
-
-export type RuleStatusResponse = Record<string, RuleStatus>;
-
-export interface PrePackagedRulesStatusResponse {
-  rules_custom_installed: number;
-  rules_installed: number;
-  rules_not_installed: number;
-  rules_not_updated: number;
-}
diff --git a/x-pack/plugins/siem/public/containers/detection_engine/signals/api.test.ts b/x-pack/plugins/siem/public/containers/detection_engine/signals/api.test.ts
deleted file mode 100644
index c011ecffb35bcd..00000000000000
--- a/x-pack/plugins/siem/public/containers/detection_engine/signals/api.test.ts
+++ /dev/null
@@ -1,165 +0,0 @@
-/*
- * 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 { KibanaServices } from '../../../lib/kibana';
-import {
-  signalsMock,
-  mockSignalsQuery,
-  mockStatusSignalQuery,
-  mockSignalIndex,
-  mockUserPrivilege,
-} from './mock';
-import {
-  fetchQuerySignals,
-  updateSignalStatus,
-  getSignalIndex,
-  getUserPrivilege,
-  createSignalIndex,
-} from './api';
-
-const abortCtrl = new AbortController();
-const mockKibanaServices = KibanaServices.get as jest.Mock;
-jest.mock('../../../lib/kibana');
-
-const fetchMock = jest.fn();
-mockKibanaServices.mockReturnValue({ http: { fetch: fetchMock } });
-
-describe('Detections Signals API', () => {
-  describe('fetchQuerySignals', () => {
-    beforeEach(() => {
-      fetchMock.mockClear();
-      fetchMock.mockResolvedValue(signalsMock);
-    });
-
-    test('check parameter url, body', async () => {
-      await fetchQuerySignals({ query: mockSignalsQuery, signal: abortCtrl.signal });
-      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/signals/search', {
-        body:
-          '{"aggs":{"signalsByGrouping":{"terms":{"field":"signal.rule.risk_score","missing":"All others","order":{"_count":"desc"},"size":10},"aggs":{"signals":{"date_histogram":{"field":"@timestamp","fixed_interval":"81000000ms","min_doc_count":0,"extended_bounds":{"min":1579644343954,"max":1582236343955}}}}}},"query":{"bool":{"filter":[{"bool":{"must":[],"filter":[{"match_all":{}}],"should":[],"must_not":[]}},{"range":{"@timestamp":{"gte":1579644343954,"lte":1582236343955}}}]}}}',
-        method: 'POST',
-        signal: abortCtrl.signal,
-      });
-    });
-
-    test('happy path', async () => {
-      const signalsResp = await fetchQuerySignals({
-        query: mockSignalsQuery,
-        signal: abortCtrl.signal,
-      });
-      expect(signalsResp).toEqual(signalsMock);
-    });
-  });
-
-  describe('updateSignalStatus', () => {
-    beforeEach(() => {
-      fetchMock.mockClear();
-      fetchMock.mockResolvedValue({});
-    });
-
-    test('check parameter url, body when closing a signal', async () => {
-      await updateSignalStatus({
-        query: mockStatusSignalQuery,
-        signal: abortCtrl.signal,
-        status: 'closed',
-      });
-      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/signals/status', {
-        body:
-          '{"status":"closed","bool":{"filter":{"terms":{"_id":["b4ee5c32e3a321057edcc953ca17228c6fdfe5ba43fdbbdaffa8cefa11605cc5"]}}}}',
-        method: 'POST',
-        signal: abortCtrl.signal,
-      });
-    });
-
-    test('check parameter url, body when opening a signal', async () => {
-      await updateSignalStatus({
-        query: mockStatusSignalQuery,
-        signal: abortCtrl.signal,
-        status: 'open',
-      });
-      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/signals/status', {
-        body:
-          '{"status":"open","bool":{"filter":{"terms":{"_id":["b4ee5c32e3a321057edcc953ca17228c6fdfe5ba43fdbbdaffa8cefa11605cc5"]}}}}',
-        method: 'POST',
-        signal: abortCtrl.signal,
-      });
-    });
-
-    test('happy path', async () => {
-      const signalsResp = await updateSignalStatus({
-        query: mockStatusSignalQuery,
-        signal: abortCtrl.signal,
-        status: 'open',
-      });
-      expect(signalsResp).toEqual({});
-    });
-  });
-
-  describe('getSignalIndex', () => {
-    beforeEach(() => {
-      fetchMock.mockClear();
-      fetchMock.mockResolvedValue(mockSignalIndex);
-    });
-
-    test('check parameter url', async () => {
-      await getSignalIndex({ signal: abortCtrl.signal });
-      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/index', {
-        method: 'GET',
-        signal: abortCtrl.signal,
-      });
-    });
-
-    test('happy path', async () => {
-      const signalsResp = await getSignalIndex({
-        signal: abortCtrl.signal,
-      });
-      expect(signalsResp).toEqual(mockSignalIndex);
-    });
-  });
-
-  describe('getUserPrivilege', () => {
-    beforeEach(() => {
-      fetchMock.mockClear();
-      fetchMock.mockResolvedValue(mockUserPrivilege);
-    });
-
-    test('check parameter url', async () => {
-      await getUserPrivilege({ signal: abortCtrl.signal });
-      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/privileges', {
-        method: 'GET',
-        signal: abortCtrl.signal,
-      });
-    });
-
-    test('happy path', async () => {
-      const signalsResp = await getUserPrivilege({
-        signal: abortCtrl.signal,
-      });
-      expect(signalsResp).toEqual(mockUserPrivilege);
-    });
-  });
-
-  describe('createSignalIndex', () => {
-    beforeEach(() => {
-      fetchMock.mockClear();
-      fetchMock.mockResolvedValue(mockSignalIndex);
-    });
-
-    test('check parameter url', async () => {
-      await createSignalIndex({ signal: abortCtrl.signal });
-      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/index', {
-        method: 'POST',
-        signal: abortCtrl.signal,
-      });
-    });
-
-    test('happy path', async () => {
-      const signalsResp = await createSignalIndex({
-        signal: abortCtrl.signal,
-      });
-      expect(signalsResp).toEqual(mockSignalIndex);
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/containers/detection_engine/signals/api.ts b/x-pack/plugins/siem/public/containers/detection_engine/signals/api.ts
deleted file mode 100644
index 1397e4a8696be8..00000000000000
--- a/x-pack/plugins/siem/public/containers/detection_engine/signals/api.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-/*
- * 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 {
-  DETECTION_ENGINE_QUERY_SIGNALS_URL,
-  DETECTION_ENGINE_SIGNALS_STATUS_URL,
-  DETECTION_ENGINE_INDEX_URL,
-  DETECTION_ENGINE_PRIVILEGES_URL,
-} from '../../../../common/constants';
-import { KibanaServices } from '../../../lib/kibana';
-import {
-  BasicSignals,
-  Privilege,
-  QuerySignals,
-  SignalSearchResponse,
-  SignalsIndex,
-  UpdateSignalStatusProps,
-} from './types';
-
-/**
- * Fetch Signals by providing a query
- *
- * @param query String to match a dsl
- * @param signal to cancel request
- *
- * @throws An error if response is not OK
- */
-export const fetchQuerySignals = async <Hit, Aggregations>({
-  query,
-  signal,
-}: QuerySignals): Promise<SignalSearchResponse<Hit, Aggregations>> =>
-  KibanaServices.get().http.fetch<SignalSearchResponse<Hit, Aggregations>>(
-    DETECTION_ENGINE_QUERY_SIGNALS_URL,
-    {
-      method: 'POST',
-      body: JSON.stringify(query),
-      signal,
-    }
-  );
-
-/**
- * Update signal status by query
- *
- * @param query of signals to update
- * @param status to update to('open' / 'closed')
- * @param signal AbortSignal for cancelling request
- *
- * @throws An error if response is not OK
- */
-export const updateSignalStatus = async ({
-  query,
-  status,
-  signal,
-}: UpdateSignalStatusProps): Promise<unknown> =>
-  KibanaServices.get().http.fetch(DETECTION_ENGINE_SIGNALS_STATUS_URL, {
-    method: 'POST',
-    body: JSON.stringify({ status, ...query }),
-    signal,
-  });
-
-/**
- * Fetch Signal Index
- *
- * @param signal AbortSignal for cancelling request
- *
- * @throws An error if response is not OK
- */
-export const getSignalIndex = async ({ signal }: BasicSignals): Promise<SignalsIndex> =>
-  KibanaServices.get().http.fetch<SignalsIndex>(DETECTION_ENGINE_INDEX_URL, {
-    method: 'GET',
-    signal,
-  });
-
-/**
- * Get User Privileges
- *
- * @param signal AbortSignal for cancelling request
- *
- * @throws An error if response is not OK
- */
-export const getUserPrivilege = async ({ signal }: BasicSignals): Promise<Privilege> =>
-  KibanaServices.get().http.fetch<Privilege>(DETECTION_ENGINE_PRIVILEGES_URL, {
-    method: 'GET',
-    signal,
-  });
-
-/**
- * Create Signal Index if needed it
- *
- * @param signal AbortSignal for cancelling request
- *
- * @throws An error if response is not OK
- */
-export const createSignalIndex = async ({ signal }: BasicSignals): Promise<SignalsIndex> =>
-  KibanaServices.get().http.fetch<SignalsIndex>(DETECTION_ENGINE_INDEX_URL, {
-    method: 'POST',
-    signal,
-  });
diff --git a/x-pack/plugins/siem/public/containers/events/last_event_time/index.ts b/x-pack/plugins/siem/public/containers/events/last_event_time/index.ts
deleted file mode 100644
index 9cae503d309408..00000000000000
--- a/x-pack/plugins/siem/public/containers/events/last_event_time/index.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-/*
- * 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 { get } from 'lodash/fp';
-import React, { useEffect, useState } from 'react';
-
-import { DEFAULT_INDEX_KEY } from '../../../../common/constants';
-import { GetLastEventTimeQuery, LastEventIndexKey, LastTimeDetails } from '../../../graphql/types';
-import { inputsModel } from '../../../store';
-import { QueryTemplateProps } from '../../query_template';
-import { useUiSetting$ } from '../../../lib/kibana';
-
-import { LastEventTimeGqlQuery } from './last_event_time.gql_query';
-import { useApolloClient } from '../../../utils/apollo_context';
-
-export interface LastEventTimeArgs {
-  id: string;
-  errorMessage: string;
-  lastSeen: Date;
-  loading: boolean;
-  refetch: inputsModel.Refetch;
-}
-
-export interface OwnProps extends QueryTemplateProps {
-  children: (args: LastEventTimeArgs) => React.ReactNode;
-  indexKey: LastEventIndexKey;
-}
-
-export function useLastEventTimeQuery<TCache = object>(
-  indexKey: LastEventIndexKey,
-  details: LastTimeDetails,
-  sourceId: string
-) {
-  const [loading, updateLoading] = useState(false);
-  const [lastSeen, updateLastSeen] = useState<number | null>(null);
-  const [errorMessage, updateErrorMessage] = useState<string | null>(null);
-  const [currentIndexKey, updateCurrentIndexKey] = useState<LastEventIndexKey | null>(null);
-  const [defaultIndex] = useUiSetting$<string[]>(DEFAULT_INDEX_KEY);
-  const apolloClient = useApolloClient();
-  async function fetchLastEventTime(signal: AbortSignal) {
-    updateLoading(true);
-    if (apolloClient) {
-      apolloClient
-        .query<GetLastEventTimeQuery.Query, GetLastEventTimeQuery.Variables>({
-          query: LastEventTimeGqlQuery,
-          fetchPolicy: 'cache-first',
-          variables: {
-            sourceId,
-            indexKey,
-            details,
-            defaultIndex,
-          },
-          context: {
-            fetchOptions: {
-              signal,
-            },
-          },
-        })
-        .then(
-          result => {
-            updateLoading(false);
-            updateLastSeen(get('data.source.LastEventTime.lastSeen', result));
-            updateErrorMessage(null);
-            updateCurrentIndexKey(currentIndexKey);
-          },
-          error => {
-            updateLoading(false);
-            updateLastSeen(null);
-            updateErrorMessage(error.message);
-          }
-        );
-    }
-  }
-
-  useEffect(() => {
-    const abortCtrl = new AbortController();
-    const signal = abortCtrl.signal;
-    fetchLastEventTime(signal);
-    return () => abortCtrl.abort();
-  }, [apolloClient, indexKey, details.hostName, details.ip]);
-
-  return { lastSeen, loading, errorMessage };
-}
diff --git a/x-pack/plugins/siem/public/containers/events/last_event_time/mock.ts b/x-pack/plugins/siem/public/containers/events/last_event_time/mock.ts
deleted file mode 100644
index 43f55dfcf27776..00000000000000
--- a/x-pack/plugins/siem/public/containers/events/last_event_time/mock.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-/*
- * 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 { DEFAULT_INDEX_PATTERN } from '../../../../common/constants';
-import { GetLastEventTimeQuery, LastEventIndexKey } from '../../../graphql/types';
-
-import { LastEventTimeGqlQuery } from './last_event_time.gql_query';
-
-interface MockLastEventTimeQuery {
-  request: {
-    query: GetLastEventTimeQuery.Query;
-    variables: GetLastEventTimeQuery.Variables;
-  };
-  result: {
-    data?: {
-      source: {
-        id: string;
-        LastEventTime: {
-          lastSeen: string | null;
-          errorMessage: string | null;
-        };
-      };
-    };
-    errors?: [{ message: string }];
-  };
-}
-
-const getTimeTwelveMinutesAgo = () => {
-  const d = new Date();
-  const ts = d.getTime();
-  const twelveMinutes = ts - 12 * 60 * 1000;
-  return new Date(twelveMinutes).toISOString();
-};
-
-export const mockLastEventTimeQuery: MockLastEventTimeQuery[] = [
-  {
-    request: {
-      query: LastEventTimeGqlQuery,
-      variables: {
-        sourceId: 'default',
-        indexKey: LastEventIndexKey.hosts,
-        details: {},
-        defaultIndex: DEFAULT_INDEX_PATTERN,
-      },
-    },
-    result: {
-      data: {
-        source: {
-          id: 'default',
-          LastEventTime: {
-            lastSeen: getTimeTwelveMinutesAgo(),
-            errorMessage: null,
-          },
-        },
-      },
-    },
-  },
-];
diff --git a/x-pack/plugins/siem/public/containers/helpers.test.ts b/x-pack/plugins/siem/public/containers/helpers.test.ts
deleted file mode 100644
index 5d378d79acc7a4..00000000000000
--- a/x-pack/plugins/siem/public/containers/helpers.test.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
- * 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 { ESQuery } from '../../common/typed_json';
-
-import { createFilter } from './helpers';
-
-describe('Helpers', () => {
-  describe('#createFilter', () => {
-    test('if it is a string it returns untouched', () => {
-      const filter = createFilter('even invalid strings return the same');
-      expect(filter).toBe('even invalid strings return the same');
-    });
-
-    test('if it is an ESQuery object it will be returned as a string', () => {
-      const query: ESQuery = { term: { 'host.id': 'host-value' } };
-      const filter = createFilter(query);
-      expect(filter).toBe(JSON.stringify(query));
-    });
-
-    test('if it is undefined, then undefined is returned', () => {
-      const filter = createFilter(undefined);
-      expect(filter).toBe(undefined);
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/containers/helpers.ts b/x-pack/plugins/siem/public/containers/helpers.ts
deleted file mode 100644
index 5f66e3f4b88d4d..00000000000000
--- a/x-pack/plugins/siem/public/containers/helpers.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/*
- * 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 { FetchPolicy } from 'apollo-client';
-import { isString } from 'lodash/fp';
-
-import { ESQuery } from '../../common/typed_json';
-
-export const createFilter = (filterQuery: ESQuery | string | undefined) =>
-  isString(filterQuery) ? filterQuery : JSON.stringify(filterQuery);
-
-export const getDefaultFetchPolicy = (): FetchPolicy => 'cache-and-network';
diff --git a/x-pack/plugins/siem/public/containers/hosts/first_last_seen/index.ts b/x-pack/plugins/siem/public/containers/hosts/first_last_seen/index.ts
deleted file mode 100644
index a460fa8999b57b..00000000000000
--- a/x-pack/plugins/siem/public/containers/hosts/first_last_seen/index.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-/*
- * 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 ApolloClient from 'apollo-client';
-import { get } from 'lodash/fp';
-import React, { useEffect, useState } from 'react';
-
-import { DEFAULT_INDEX_KEY } from '../../../../common/constants';
-import { useUiSetting$ } from '../../../lib/kibana';
-import { GetHostFirstLastSeenQuery } from '../../../graphql/types';
-import { inputsModel } from '../../../store';
-import { QueryTemplateProps } from '../../query_template';
-
-import { HostFirstLastSeenGqlQuery } from './first_last_seen.gql_query';
-
-export interface FirstLastSeenHostArgs {
-  id: string;
-  errorMessage: string;
-  firstSeen: Date;
-  lastSeen: Date;
-  loading: boolean;
-  refetch: inputsModel.Refetch;
-}
-
-export interface OwnProps extends QueryTemplateProps {
-  children: (args: FirstLastSeenHostArgs) => React.ReactNode;
-  hostName: string;
-}
-
-export function useFirstLastSeenHostQuery<TCache = object>(
-  hostName: string,
-  sourceId: string,
-  apolloClient: ApolloClient<TCache>
-) {
-  const [loading, updateLoading] = useState(false);
-  const [firstSeen, updateFirstSeen] = useState<Date | null>(null);
-  const [lastSeen, updateLastSeen] = useState<Date | null>(null);
-  const [errorMessage, updateErrorMessage] = useState<string | null>(null);
-  const [defaultIndex] = useUiSetting$<string[]>(DEFAULT_INDEX_KEY);
-
-  async function fetchFirstLastSeenHost(signal: AbortSignal) {
-    updateLoading(true);
-    return apolloClient
-      .query<GetHostFirstLastSeenQuery.Query, GetHostFirstLastSeenQuery.Variables>({
-        query: HostFirstLastSeenGqlQuery,
-        fetchPolicy: 'cache-first',
-        variables: {
-          sourceId,
-          hostName,
-          defaultIndex,
-        },
-        context: {
-          fetchOptions: {
-            signal,
-          },
-        },
-      })
-      .then(
-        result => {
-          updateLoading(false);
-          updateFirstSeen(get('data.source.HostFirstLastSeen.firstSeen', result));
-          updateLastSeen(get('data.source.HostFirstLastSeen.lastSeen', result));
-          updateErrorMessage(null);
-        },
-        error => {
-          updateLoading(false);
-          updateFirstSeen(null);
-          updateLastSeen(null);
-          updateErrorMessage(error.message);
-        }
-      );
-  }
-
-  useEffect(() => {
-    const abortCtrl = new AbortController();
-    const signal = abortCtrl.signal;
-    fetchFirstLastSeenHost(signal);
-    return () => abortCtrl.abort();
-  }, []);
-
-  return { firstSeen, lastSeen, loading, errorMessage };
-}
diff --git a/x-pack/plugins/siem/public/containers/hosts/first_last_seen/mock.ts b/x-pack/plugins/siem/public/containers/hosts/first_last_seen/mock.ts
deleted file mode 100644
index f59df84dacc1b1..00000000000000
--- a/x-pack/plugins/siem/public/containers/hosts/first_last_seen/mock.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-/*
- * 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 { DEFAULT_INDEX_PATTERN } from '../../../../common/constants';
-import { GetHostFirstLastSeenQuery } from '../../../graphql/types';
-
-import { HostFirstLastSeenGqlQuery } from './first_last_seen.gql_query';
-
-interface MockedProvidedQuery {
-  request: {
-    query: GetHostFirstLastSeenQuery.Query;
-    variables: GetHostFirstLastSeenQuery.Variables;
-  };
-  result: {
-    data?: {
-      source: {
-        id: string;
-        HostFirstLastSeen: {
-          firstSeen: string | null;
-          lastSeen: string | null;
-        };
-      };
-    };
-    errors?: [{ message: string }];
-  };
-}
-export const mockFirstLastSeenHostQuery: MockedProvidedQuery[] = [
-  {
-    request: {
-      query: HostFirstLastSeenGqlQuery,
-      variables: {
-        sourceId: 'default',
-        hostName: 'kibana-siem',
-        defaultIndex: DEFAULT_INDEX_PATTERN,
-      },
-    },
-    result: {
-      data: {
-        source: {
-          id: 'default',
-          HostFirstLastSeen: {
-            firstSeen: '2019-04-08T16:09:40.692Z',
-            lastSeen: '2019-04-08T18:35:45.064Z',
-          },
-        },
-      },
-    },
-  },
-];
diff --git a/x-pack/plugins/siem/public/containers/hosts/index.tsx b/x-pack/plugins/siem/public/containers/hosts/index.tsx
deleted file mode 100644
index 733c2224d840a7..00000000000000
--- a/x-pack/plugins/siem/public/containers/hosts/index.tsx
+++ /dev/null
@@ -1,183 +0,0 @@
-/*
- * 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 { get, getOr } from 'lodash/fp';
-import memoizeOne from 'memoize-one';
-import React from 'react';
-import { Query } from 'react-apollo';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-
-import { DEFAULT_INDEX_KEY } from '../../../common/constants';
-import {
-  Direction,
-  GetHostsTableQuery,
-  HostsEdges,
-  HostsFields,
-  PageInfoPaginated,
-} from '../../graphql/types';
-import { hostsModel, hostsSelectors, inputsModel, State, inputsSelectors } from '../../store';
-import { createFilter, getDefaultFetchPolicy } from '../helpers';
-import { QueryTemplatePaginated, QueryTemplatePaginatedProps } from '../query_template_paginated';
-import { withKibana, WithKibanaProps } from '../../lib/kibana';
-
-import { HostsTableQuery } from './hosts_table.gql_query';
-import { generateTablePaginationOptions } from '../../components/paginated_table/helpers';
-
-const ID = 'hostsQuery';
-
-export interface HostsArgs {
-  endDate: number;
-  hosts: HostsEdges[];
-  id: string;
-  inspect: inputsModel.InspectQuery;
-  isInspected: boolean;
-  loading: boolean;
-  loadPage: (newActivePage: number) => void;
-  pageInfo: PageInfoPaginated;
-  refetch: inputsModel.Refetch;
-  startDate: number;
-  totalCount: number;
-}
-
-export interface OwnProps extends QueryTemplatePaginatedProps {
-  children: (args: HostsArgs) => React.ReactNode;
-  type: hostsModel.HostsType;
-  startDate: number;
-  endDate: number;
-}
-
-export interface HostsComponentReduxProps {
-  activePage: number;
-  isInspected: boolean;
-  limit: number;
-  sortField: HostsFields;
-  direction: Direction;
-}
-
-type HostsProps = OwnProps & HostsComponentReduxProps & WithKibanaProps;
-
-class HostsComponentQuery extends QueryTemplatePaginated<
-  HostsProps,
-  GetHostsTableQuery.Query,
-  GetHostsTableQuery.Variables
-> {
-  private memoizedHosts: (
-    variables: string,
-    data: GetHostsTableQuery.Source | undefined
-  ) => HostsEdges[];
-
-  constructor(props: HostsProps) {
-    super(props);
-    this.memoizedHosts = memoizeOne(this.getHosts);
-  }
-
-  public render() {
-    const {
-      activePage,
-      id = ID,
-      isInspected,
-      children,
-      direction,
-      filterQuery,
-      endDate,
-      kibana,
-      limit,
-      startDate,
-      skip,
-      sourceId,
-      sortField,
-    } = this.props;
-    const defaultIndex = kibana.services.uiSettings.get<string[]>(DEFAULT_INDEX_KEY);
-
-    const variables: GetHostsTableQuery.Variables = {
-      sourceId,
-      timerange: {
-        interval: '12h',
-        from: startDate,
-        to: endDate,
-      },
-      sort: {
-        direction,
-        field: sortField,
-      },
-      pagination: generateTablePaginationOptions(activePage, limit),
-      filterQuery: createFilter(filterQuery),
-      defaultIndex,
-      inspect: isInspected,
-    };
-    return (
-      <Query<GetHostsTableQuery.Query, GetHostsTableQuery.Variables>
-        query={HostsTableQuery}
-        fetchPolicy={getDefaultFetchPolicy()}
-        notifyOnNetworkStatusChange
-        variables={variables}
-        skip={skip}
-      >
-        {({ data, loading, fetchMore, networkStatus, refetch }) => {
-          this.setFetchMore(fetchMore);
-          this.setFetchMoreOptions((newActivePage: number) => ({
-            variables: {
-              pagination: generateTablePaginationOptions(newActivePage, limit),
-            },
-            updateQuery: (prev, { fetchMoreResult }) => {
-              if (!fetchMoreResult) {
-                return prev;
-              }
-              return {
-                ...fetchMoreResult,
-                source: {
-                  ...fetchMoreResult.source,
-                  Hosts: {
-                    ...fetchMoreResult.source.Hosts,
-                    edges: [...fetchMoreResult.source.Hosts.edges],
-                  },
-                },
-              };
-            },
-          }));
-          const isLoading = this.isItAValidLoading(loading, variables, networkStatus);
-          return children({
-            endDate,
-            hosts: this.memoizedHosts(JSON.stringify(variables), get('source', data)),
-            id,
-            inspect: getOr(null, 'source.Hosts.inspect', data),
-            isInspected,
-            loading: isLoading,
-            loadPage: this.wrappedLoadMore,
-            pageInfo: getOr({}, 'source.Hosts.pageInfo', data),
-            refetch: this.memoizedRefetchQuery(variables, limit, refetch),
-            startDate,
-            totalCount: getOr(-1, 'source.Hosts.totalCount', data),
-          });
-        }}
-      </Query>
-    );
-  }
-
-  private getHosts = (
-    variables: string,
-    source: GetHostsTableQuery.Source | undefined
-  ): HostsEdges[] => getOr([], 'Hosts.edges', source);
-}
-
-const makeMapStateToProps = () => {
-  const getHostsSelector = hostsSelectors.hostsSelector();
-  const getQuery = inputsSelectors.globalQueryByIdSelector();
-  const mapStateToProps = (state: State, { type, id = ID }: OwnProps) => {
-    const { isInspected } = getQuery(state, id);
-    return {
-      ...getHostsSelector(state, type),
-      isInspected,
-    };
-  };
-  return mapStateToProps;
-};
-
-export const HostsQuery = compose<React.ComponentClass<OwnProps>>(
-  connect(makeMapStateToProps),
-  withKibana
-)(HostsComponentQuery);
diff --git a/x-pack/plugins/siem/public/containers/hosts/overview/index.tsx b/x-pack/plugins/siem/public/containers/hosts/overview/index.tsx
deleted file mode 100644
index 5057e872b53131..00000000000000
--- a/x-pack/plugins/siem/public/containers/hosts/overview/index.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-/*
- * 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 { getOr } from 'lodash/fp';
-import React from 'react';
-import { Query } from 'react-apollo';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-
-import { DEFAULT_INDEX_KEY } from '../../../../common/constants';
-import { inputsModel, inputsSelectors, State } from '../../../store';
-import { getDefaultFetchPolicy } from '../../helpers';
-import { QueryTemplate, QueryTemplateProps } from '../../query_template';
-import { withKibana, WithKibanaProps } from '../../../lib/kibana';
-
-import { HostOverviewQuery } from './host_overview.gql_query';
-import { GetHostOverviewQuery, HostItem } from '../../../graphql/types';
-
-const ID = 'hostOverviewQuery';
-
-export interface HostOverviewArgs {
-  id: string;
-  inspect: inputsModel.InspectQuery;
-  hostOverview: HostItem;
-  loading: boolean;
-  refetch: inputsModel.Refetch;
-  startDate: number;
-  endDate: number;
-}
-
-export interface HostOverviewReduxProps {
-  isInspected: boolean;
-}
-
-export interface OwnProps extends QueryTemplateProps {
-  children: (args: HostOverviewArgs) => React.ReactNode;
-  hostName: string;
-  startDate: number;
-  endDate: number;
-}
-
-type HostsOverViewProps = OwnProps & HostOverviewReduxProps & WithKibanaProps;
-
-class HostOverviewByNameComponentQuery extends QueryTemplate<
-  HostsOverViewProps,
-  GetHostOverviewQuery.Query,
-  GetHostOverviewQuery.Variables
-> {
-  public render() {
-    const {
-      id = ID,
-      isInspected,
-      children,
-      hostName,
-      kibana,
-      skip,
-      sourceId,
-      startDate,
-      endDate,
-    } = this.props;
-    return (
-      <Query<GetHostOverviewQuery.Query, GetHostOverviewQuery.Variables>
-        query={HostOverviewQuery}
-        fetchPolicy={getDefaultFetchPolicy()}
-        notifyOnNetworkStatusChange
-        skip={skip}
-        variables={{
-          sourceId,
-          hostName,
-          timerange: {
-            interval: '12h',
-            from: startDate,
-            to: endDate,
-          },
-          defaultIndex: kibana.services.uiSettings.get<string[]>(DEFAULT_INDEX_KEY),
-          inspect: isInspected,
-        }}
-      >
-        {({ data, loading, refetch }) => {
-          const hostOverview = getOr([], 'source.HostOverview', data);
-          return children({
-            id,
-            inspect: getOr(null, 'source.HostOverview.inspect', data),
-            refetch,
-            loading,
-            hostOverview,
-            startDate,
-            endDate,
-          });
-        }}
-      </Query>
-    );
-  }
-}
-
-const makeMapStateToProps = () => {
-  const getQuery = inputsSelectors.globalQueryByIdSelector();
-  const mapStateToProps = (state: State, { id = ID }: OwnProps) => {
-    const { isInspected } = getQuery(state, id);
-    return {
-      isInspected,
-    };
-  };
-  return mapStateToProps;
-};
-
-export const HostOverviewByNameQuery = compose<React.ComponentClass<OwnProps>>(
-  connect(makeMapStateToProps),
-  withKibana
-)(HostOverviewByNameComponentQuery);
diff --git a/x-pack/plugins/siem/public/containers/ip_overview/index.tsx b/x-pack/plugins/siem/public/containers/ip_overview/index.tsx
deleted file mode 100644
index ade94c430c6efb..00000000000000
--- a/x-pack/plugins/siem/public/containers/ip_overview/index.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-/*
- * 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 { getOr } from 'lodash/fp';
-import React from 'react';
-import { Query } from 'react-apollo';
-import { connect, ConnectedProps } from 'react-redux';
-
-import { DEFAULT_INDEX_KEY } from '../../../common/constants';
-import { GetIpOverviewQuery, IpOverviewData } from '../../graphql/types';
-import { networkModel, inputsModel, inputsSelectors, State } from '../../store';
-import { useUiSetting } from '../../lib/kibana';
-import { createFilter, getDefaultFetchPolicy } from '../helpers';
-import { QueryTemplateProps } from '../query_template';
-
-import { ipOverviewQuery } from './index.gql_query';
-
-const ID = 'ipOverviewQuery';
-
-export interface IpOverviewArgs {
-  id: string;
-  inspect: inputsModel.InspectQuery;
-  ipOverviewData: IpOverviewData;
-  loading: boolean;
-  refetch: inputsModel.Refetch;
-}
-
-export interface IpOverviewProps extends QueryTemplateProps {
-  children: (args: IpOverviewArgs) => React.ReactNode;
-  type: networkModel.NetworkType;
-  ip: string;
-}
-
-const IpOverviewComponentQuery = React.memo<IpOverviewProps & PropsFromRedux>(
-  ({ id = ID, isInspected, children, filterQuery, skip, sourceId, ip }) => (
-    <Query<GetIpOverviewQuery.Query, GetIpOverviewQuery.Variables>
-      query={ipOverviewQuery}
-      fetchPolicy={getDefaultFetchPolicy()}
-      notifyOnNetworkStatusChange
-      skip={skip}
-      variables={{
-        sourceId,
-        filterQuery: createFilter(filterQuery),
-        ip,
-        defaultIndex: useUiSetting<string[]>(DEFAULT_INDEX_KEY),
-        inspect: isInspected,
-      }}
-    >
-      {({ data, loading, refetch }) => {
-        const init: IpOverviewData = { host: {} };
-        const ipOverviewData: IpOverviewData = getOr(init, 'source.IpOverview', data);
-        return children({
-          id,
-          inspect: getOr(null, 'source.IpOverview.inspect', data),
-          ipOverviewData,
-          loading,
-          refetch,
-        });
-      }}
-    </Query>
-  )
-);
-
-IpOverviewComponentQuery.displayName = 'IpOverviewComponentQuery';
-
-const makeMapStateToProps = () => {
-  const getQuery = inputsSelectors.globalQueryByIdSelector();
-  const mapStateToProps = (state: State, { id = ID }: IpOverviewProps) => {
-    const { isInspected } = getQuery(state, id);
-    return {
-      isInspected,
-    };
-  };
-  return mapStateToProps;
-};
-
-const connector = connect(makeMapStateToProps);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-export const IpOverviewQuery = connector(IpOverviewComponentQuery);
diff --git a/x-pack/plugins/siem/public/containers/kpi_host_details/index.tsx b/x-pack/plugins/siem/public/containers/kpi_host_details/index.tsx
deleted file mode 100644
index de9d54b1a185c8..00000000000000
--- a/x-pack/plugins/siem/public/containers/kpi_host_details/index.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-/*
- * 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 { getOr } from 'lodash/fp';
-import React from 'react';
-import { Query } from 'react-apollo';
-import { connect, ConnectedProps } from 'react-redux';
-
-import { DEFAULT_INDEX_KEY } from '../../../common/constants';
-import { KpiHostDetailsData, GetKpiHostDetailsQuery } from '../../graphql/types';
-import { inputsModel, inputsSelectors, State } from '../../store';
-import { useUiSetting } from '../../lib/kibana';
-import { createFilter, getDefaultFetchPolicy } from '../helpers';
-import { QueryTemplateProps } from '../query_template';
-
-import { kpiHostDetailsQuery } from './index.gql_query';
-
-const ID = 'kpiHostDetailsQuery';
-
-export interface KpiHostDetailsArgs {
-  id: string;
-  inspect: inputsModel.InspectQuery;
-  kpiHostDetails: KpiHostDetailsData;
-  loading: boolean;
-  refetch: inputsModel.Refetch;
-}
-
-export interface QueryKpiHostDetailsProps extends QueryTemplateProps {
-  children: (args: KpiHostDetailsArgs) => React.ReactNode;
-}
-
-const KpiHostDetailsComponentQuery = React.memo<QueryKpiHostDetailsProps & PropsFromRedux>(
-  ({ id = ID, children, endDate, filterQuery, isInspected, skip, sourceId, startDate }) => (
-    <Query<GetKpiHostDetailsQuery.Query, GetKpiHostDetailsQuery.Variables>
-      query={kpiHostDetailsQuery}
-      fetchPolicy={getDefaultFetchPolicy()}
-      notifyOnNetworkStatusChange
-      skip={skip}
-      variables={{
-        sourceId,
-        timerange: {
-          interval: '12h',
-          from: startDate!,
-          to: endDate!,
-        },
-        filterQuery: createFilter(filterQuery),
-        defaultIndex: useUiSetting<string[]>(DEFAULT_INDEX_KEY),
-        inspect: isInspected,
-      }}
-    >
-      {({ data, loading, refetch }) => {
-        const kpiHostDetails = getOr({}, `source.KpiHostDetails`, data);
-        return children({
-          id,
-          inspect: getOr(null, 'source.KpiHostDetails.inspect', data),
-          kpiHostDetails,
-          loading,
-          refetch,
-        });
-      }}
-    </Query>
-  )
-);
-
-KpiHostDetailsComponentQuery.displayName = 'KpiHostDetailsComponentQuery';
-
-const makeMapStateToProps = () => {
-  const getQuery = inputsSelectors.globalQueryByIdSelector();
-  const mapStateToProps = (state: State, { id = ID }: QueryKpiHostDetailsProps) => {
-    const { isInspected } = getQuery(state, id);
-    return {
-      isInspected,
-    };
-  };
-  return mapStateToProps;
-};
-
-const connector = connect(makeMapStateToProps);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-export const KpiHostDetailsQuery = connector(KpiHostDetailsComponentQuery);
diff --git a/x-pack/plugins/siem/public/containers/kpi_hosts/index.tsx b/x-pack/plugins/siem/public/containers/kpi_hosts/index.tsx
deleted file mode 100644
index 5be2423e8a162a..00000000000000
--- a/x-pack/plugins/siem/public/containers/kpi_hosts/index.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-/*
- * 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 { getOr } from 'lodash/fp';
-import React from 'react';
-import { Query } from 'react-apollo';
-import { connect, ConnectedProps } from 'react-redux';
-
-import { DEFAULT_INDEX_KEY } from '../../../common/constants';
-import { GetKpiHostsQuery, KpiHostsData } from '../../graphql/types';
-import { inputsModel, inputsSelectors, State } from '../../store';
-import { useUiSetting } from '../../lib/kibana';
-import { createFilter, getDefaultFetchPolicy } from '../helpers';
-import { QueryTemplateProps } from '../query_template';
-
-import { kpiHostsQuery } from './index.gql_query';
-
-const ID = 'kpiHostsQuery';
-
-export interface KpiHostsArgs {
-  id: string;
-  inspect: inputsModel.InspectQuery;
-  kpiHosts: KpiHostsData;
-  loading: boolean;
-  refetch: inputsModel.Refetch;
-}
-
-export interface KpiHostsProps extends QueryTemplateProps {
-  children: (args: KpiHostsArgs) => React.ReactNode;
-}
-
-const KpiHostsComponentQuery = React.memo<KpiHostsProps & PropsFromRedux>(
-  ({ id = ID, children, endDate, filterQuery, isInspected, skip, sourceId, startDate }) => (
-    <Query<GetKpiHostsQuery.Query, GetKpiHostsQuery.Variables>
-      query={kpiHostsQuery}
-      fetchPolicy={getDefaultFetchPolicy()}
-      notifyOnNetworkStatusChange
-      skip={skip}
-      variables={{
-        sourceId,
-        timerange: {
-          interval: '12h',
-          from: startDate!,
-          to: endDate!,
-        },
-        filterQuery: createFilter(filterQuery),
-        defaultIndex: useUiSetting<string[]>(DEFAULT_INDEX_KEY),
-        inspect: isInspected,
-      }}
-    >
-      {({ data, loading, refetch }) => {
-        const kpiHosts = getOr({}, `source.KpiHosts`, data);
-        return children({
-          id,
-          inspect: getOr(null, 'source.KpiHosts.inspect', data),
-          kpiHosts,
-          loading,
-          refetch,
-        });
-      }}
-    </Query>
-  )
-);
-
-KpiHostsComponentQuery.displayName = 'KpiHostsComponentQuery';
-
-const makeMapStateToProps = () => {
-  const getQuery = inputsSelectors.globalQueryByIdSelector();
-  const mapStateToProps = (state: State, { id = ID }: KpiHostsProps) => {
-    const { isInspected } = getQuery(state, id);
-    return {
-      isInspected,
-    };
-  };
-  return mapStateToProps;
-};
-
-const connector = connect(makeMapStateToProps);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-export const KpiHostsQuery = connector(KpiHostsComponentQuery);
diff --git a/x-pack/plugins/siem/public/containers/kpi_network/index.tsx b/x-pack/plugins/siem/public/containers/kpi_network/index.tsx
deleted file mode 100644
index 338cdc39b178c1..00000000000000
--- a/x-pack/plugins/siem/public/containers/kpi_network/index.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-/*
- * 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 { getOr } from 'lodash/fp';
-import React from 'react';
-import { Query } from 'react-apollo';
-import { connect, ConnectedProps } from 'react-redux';
-
-import { DEFAULT_INDEX_KEY } from '../../../common/constants';
-import { GetKpiNetworkQuery, KpiNetworkData } from '../../graphql/types';
-import { inputsModel, inputsSelectors, State } from '../../store';
-import { useUiSetting } from '../../lib/kibana';
-import { createFilter, getDefaultFetchPolicy } from '../helpers';
-import { QueryTemplateProps } from '../query_template';
-
-import { kpiNetworkQuery } from './index.gql_query';
-
-const ID = 'kpiNetworkQuery';
-
-export interface KpiNetworkArgs {
-  id: string;
-  inspect: inputsModel.InspectQuery;
-  kpiNetwork: KpiNetworkData;
-  loading: boolean;
-  refetch: inputsModel.Refetch;
-}
-
-export interface KpiNetworkProps extends QueryTemplateProps {
-  children: (args: KpiNetworkArgs) => React.ReactNode;
-}
-
-const KpiNetworkComponentQuery = React.memo<KpiNetworkProps & PropsFromRedux>(
-  ({ id = ID, children, filterQuery, isInspected, skip, sourceId, startDate, endDate }) => (
-    <Query<GetKpiNetworkQuery.Query, GetKpiNetworkQuery.Variables>
-      query={kpiNetworkQuery}
-      fetchPolicy={getDefaultFetchPolicy()}
-      notifyOnNetworkStatusChange
-      skip={skip}
-      variables={{
-        sourceId,
-        timerange: {
-          interval: '12h',
-          from: startDate!,
-          to: endDate!,
-        },
-        filterQuery: createFilter(filterQuery),
-        defaultIndex: useUiSetting<string[]>(DEFAULT_INDEX_KEY),
-        inspect: isInspected,
-      }}
-    >
-      {({ data, loading, refetch }) => {
-        const kpiNetwork = getOr({}, `source.KpiNetwork`, data);
-        return children({
-          id,
-          inspect: getOr(null, 'source.KpiNetwork.inspect', data),
-          kpiNetwork,
-          loading,
-          refetch,
-        });
-      }}
-    </Query>
-  )
-);
-
-KpiNetworkComponentQuery.displayName = 'KpiNetworkComponentQuery';
-
-const makeMapStateToProps = () => {
-  const getQuery = inputsSelectors.globalQueryByIdSelector();
-  const mapStateToProps = (state: State, { id = ID }: KpiNetworkProps) => {
-    const { isInspected } = getQuery(state, id);
-    return {
-      isInspected,
-    };
-  };
-  return mapStateToProps;
-};
-
-const connector = connect(makeMapStateToProps);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-export const KpiNetworkQuery = connector(KpiNetworkComponentQuery);
diff --git a/x-pack/plugins/siem/public/containers/kuery_autocompletion/index.tsx b/x-pack/plugins/siem/public/containers/kuery_autocompletion/index.tsx
deleted file mode 100644
index 6120538a01e78b..00000000000000
--- a/x-pack/plugins/siem/public/containers/kuery_autocompletion/index.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-/*
- * 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, { useState } from 'react';
-import { QuerySuggestion, IIndexPattern } from '../../../../../../src/plugins/data/public';
-import { useKibana } from '../../lib/kibana';
-
-type RendererResult = React.ReactElement<JSX.Element> | null;
-type RendererFunction<RenderArgs, Result = RendererResult> = (args: RenderArgs) => Result;
-
-interface KueryAutocompletionLifecycleProps {
-  children: RendererFunction<{
-    isLoadingSuggestions: boolean;
-    loadSuggestions: (expression: string, cursorPosition: number, maxSuggestions?: number) => void;
-    suggestions: QuerySuggestion[];
-  }>;
-  indexPattern: IIndexPattern;
-}
-
-interface KueryAutocompletionCurrentRequest {
-  expression: string;
-  cursorPosition: number;
-}
-
-export const KueryAutocompletion = React.memo<KueryAutocompletionLifecycleProps>(
-  ({ children, indexPattern }) => {
-    const [currentRequest, setCurrentRequest] = useState<KueryAutocompletionCurrentRequest | null>(
-      null
-    );
-    const [suggestions, setSuggestions] = useState<QuerySuggestion[]>([]);
-    const kibana = useKibana();
-    const loadSuggestions = async (
-      expression: string,
-      cursorPosition: number,
-      maxSuggestions?: number
-    ) => {
-      const language = 'kuery';
-
-      if (!kibana.services.data.autocomplete.hasQuerySuggestions(language)) {
-        return;
-      }
-
-      const futureRequest = {
-        expression,
-        cursorPosition,
-      };
-      setCurrentRequest({
-        expression,
-        cursorPosition,
-      });
-      setSuggestions([]);
-
-      if (
-        futureRequest &&
-        futureRequest.expression !== (currentRequest && currentRequest.expression) &&
-        futureRequest.cursorPosition !== (currentRequest && currentRequest.cursorPosition)
-      ) {
-        const newSuggestions =
-          (await kibana.services.data.autocomplete.getQuerySuggestions({
-            language: 'kuery',
-            indexPatterns: [indexPattern],
-            boolFilter: [],
-            query: expression,
-            selectionStart: cursorPosition,
-            selectionEnd: cursorPosition,
-          })) || [];
-
-        setCurrentRequest(null);
-        setSuggestions(maxSuggestions ? newSuggestions.slice(0, maxSuggestions) : newSuggestions);
-      }
-    };
-
-    return children({
-      isLoadingSuggestions: currentRequest !== null,
-      loadSuggestions,
-      suggestions,
-    });
-  }
-);
-
-KueryAutocompletion.displayName = 'KueryAutocompletion';
diff --git a/x-pack/plugins/siem/public/containers/matrix_histogram/index.test.tsx b/x-pack/plugins/siem/public/containers/matrix_histogram/index.test.tsx
deleted file mode 100644
index 80899a061e7c16..00000000000000
--- a/x-pack/plugins/siem/public/containers/matrix_histogram/index.test.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-/*
- * 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 { useQuery } from '.';
-import { mount } from 'enzyme';
-import React from 'react';
-import { useApolloClient } from '../../utils/apollo_context';
-import { errorToToaster } from '../../components/toasters';
-import { MatrixOverTimeHistogramData, HistogramType } from '../../graphql/types';
-import { InspectQuery, Refetch } from '../../store/inputs/model';
-
-const mockQuery = jest.fn().mockResolvedValue({
-  data: {
-    source: {
-      MatrixHistogram: {
-        matrixHistogramData: [{}],
-        totalCount: 1,
-        inspect: false,
-      },
-    },
-  },
-});
-
-const mockRejectQuery = jest.fn().mockRejectedValue(new Error());
-jest.mock('../../utils/apollo_context', () => ({
-  useApolloClient: jest.fn(),
-}));
-
-jest.mock('../../lib/kibana', () => {
-  return {
-    useUiSetting$: jest.fn().mockReturnValue(['mockDefaultIndex']),
-  };
-});
-
-jest.mock('./index.gql_query', () => {
-  return {
-    MatrixHistogramGqlQuery: 'mockGqlQuery',
-  };
-});
-
-jest.mock('../../components/toasters/', () => ({
-  useStateToaster: () => [jest.fn(), jest.fn()],
-  errorToToaster: jest.fn(),
-}));
-
-describe('useQuery', () => {
-  let result: {
-    data: MatrixOverTimeHistogramData[] | null;
-    loading: boolean;
-    inspect: InspectQuery | null;
-    totalCount: number;
-    refetch: Refetch | undefined;
-  };
-  describe('happy path', () => {
-    beforeAll(() => {
-      (useApolloClient as jest.Mock).mockReturnValue({
-        query: mockQuery,
-      });
-      const TestComponent = () => {
-        result = useQuery({
-          endDate: 100,
-          errorMessage: 'fakeErrorMsg',
-          filterQuery: '',
-          histogramType: HistogramType.alerts,
-          isInspected: false,
-          stackByField: 'fakeField',
-          startDate: 0,
-        });
-
-        return <div />;
-      };
-
-      mount(<TestComponent />);
-    });
-
-    test('should set variables', () => {
-      expect(mockQuery).toBeCalledWith({
-        query: 'mockGqlQuery',
-        fetchPolicy: 'network-only',
-        variables: {
-          filterQuery: '',
-          sourceId: 'default',
-          timerange: {
-            interval: '12h',
-            from: 0,
-            to: 100,
-          },
-          defaultIndex: 'mockDefaultIndex',
-          inspect: false,
-          stackByField: 'fakeField',
-          histogramType: 'alerts',
-        },
-        context: {
-          fetchOptions: {
-            abortSignal: new AbortController().signal,
-          },
-        },
-      });
-    });
-
-    test('should setData', () => {
-      expect(result.data).toEqual([{}]);
-    });
-
-    test('should set total count', () => {
-      expect(result.totalCount).toEqual(1);
-    });
-
-    test('should set inspect', () => {
-      expect(result.inspect).toEqual(false);
-    });
-  });
-
-  describe('failure path', () => {
-    beforeAll(() => {
-      mockQuery.mockClear();
-      (useApolloClient as jest.Mock).mockReset();
-      (useApolloClient as jest.Mock).mockReturnValue({
-        query: mockRejectQuery,
-      });
-      const TestComponent = () => {
-        result = useQuery({
-          endDate: 100,
-          errorMessage: 'fakeErrorMsg',
-          filterQuery: '',
-          histogramType: HistogramType.alerts,
-          isInspected: false,
-          stackByField: 'fakeField',
-          startDate: 0,
-        });
-
-        return <div />;
-      };
-
-      mount(<TestComponent />);
-    });
-
-    test('should setData', () => {
-      expect(result.data).toEqual(null);
-    });
-
-    test('should set total count', () => {
-      expect(result.totalCount).toEqual(-1);
-    });
-
-    test('should set inspect', () => {
-      expect(result.inspect).toEqual(null);
-    });
-
-    test('should set error to toster', () => {
-      expect(errorToToaster).toHaveBeenCalled();
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/containers/matrix_histogram/index.ts b/x-pack/plugins/siem/public/containers/matrix_histogram/index.ts
deleted file mode 100644
index 18bb611191bbc8..00000000000000
--- a/x-pack/plugins/siem/public/containers/matrix_histogram/index.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-/*
- * 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 { isEmpty } from 'lodash/fp';
-import { useEffect, useMemo, useState, useRef } from 'react';
-
-import { DEFAULT_INDEX_KEY } from '../../../common/constants';
-import { MatrixHistogramQueryProps } from '../../components/matrix_histogram/types';
-import { errorToToaster, useStateToaster } from '../../components/toasters';
-import { useUiSetting$ } from '../../lib/kibana';
-import { createFilter } from '../helpers';
-import { useApolloClient } from '../../utils/apollo_context';
-import { inputsModel } from '../../store';
-import { MatrixHistogramGqlQuery } from './index.gql_query';
-import { GetMatrixHistogramQuery, MatrixOverTimeHistogramData } from '../../graphql/types';
-
-export const useQuery = <Hit, Aggs, TCache = object>({
-  endDate,
-  errorMessage,
-  filterQuery,
-  histogramType,
-  indexToAdd,
-  isInspected,
-  stackByField,
-  startDate,
-}: MatrixHistogramQueryProps) => {
-  const [configIndex] = useUiSetting$<string[]>(DEFAULT_INDEX_KEY);
-  const defaultIndex = useMemo<string[]>(() => {
-    if (indexToAdd != null && !isEmpty(indexToAdd)) {
-      return [...configIndex, ...indexToAdd];
-    }
-    return configIndex;
-  }, [configIndex, indexToAdd]);
-
-  const [, dispatchToaster] = useStateToaster();
-  const refetch = useRef<inputsModel.Refetch>();
-  const [loading, setLoading] = useState<boolean>(false);
-  const [data, setData] = useState<MatrixOverTimeHistogramData[] | null>(null);
-  const [inspect, setInspect] = useState<inputsModel.InspectQuery | null>(null);
-  const [totalCount, setTotalCount] = useState<number>(-1);
-  const apolloClient = useApolloClient();
-
-  useEffect(() => {
-    const matrixHistogramVariables: GetMatrixHistogramQuery.Variables = {
-      filterQuery: createFilter(filterQuery),
-      sourceId: 'default',
-      timerange: {
-        interval: '12h',
-        from: startDate!,
-        to: endDate!,
-      },
-      defaultIndex,
-      inspect: isInspected,
-      stackByField,
-      histogramType,
-    };
-    let isSubscribed = true;
-    const abortCtrl = new AbortController();
-    const abortSignal = abortCtrl.signal;
-
-    async function fetchData() {
-      if (!apolloClient) return null;
-      setLoading(true);
-      return apolloClient
-        .query<GetMatrixHistogramQuery.Query, GetMatrixHistogramQuery.Variables>({
-          query: MatrixHistogramGqlQuery,
-          fetchPolicy: 'network-only',
-          variables: matrixHistogramVariables,
-          context: {
-            fetchOptions: {
-              abortSignal,
-            },
-          },
-        })
-        .then(
-          result => {
-            if (isSubscribed) {
-              const source = result?.data?.source?.MatrixHistogram ?? {};
-              setData(source?.matrixHistogramData ?? []);
-              setTotalCount(source?.totalCount ?? -1);
-              setInspect(source?.inspect ?? null);
-              setLoading(false);
-            }
-          },
-          error => {
-            if (isSubscribed) {
-              setData(null);
-              setTotalCount(-1);
-              setInspect(null);
-              setLoading(false);
-              errorToToaster({ title: errorMessage, error, dispatchToaster });
-            }
-          }
-        );
-    }
-    refetch.current = fetchData;
-    fetchData();
-    return () => {
-      isSubscribed = false;
-      abortCtrl.abort();
-    };
-  }, [
-    defaultIndex,
-    errorMessage,
-    filterQuery,
-    histogramType,
-    indexToAdd,
-    isInspected,
-    stackByField,
-    startDate,
-    endDate,
-    data,
-  ]);
-
-  return { data, loading, inspect, totalCount, refetch: refetch.current };
-};
diff --git a/x-pack/plugins/siem/public/containers/network_dns/index.tsx b/x-pack/plugins/siem/public/containers/network_dns/index.tsx
deleted file mode 100644
index 04c8783c30a0ff..00000000000000
--- a/x-pack/plugins/siem/public/containers/network_dns/index.tsx
+++ /dev/null
@@ -1,209 +0,0 @@
-/*
- * 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 { getOr } from 'lodash/fp';
-import React from 'react';
-import { Query } from 'react-apollo';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-
-import { DocumentNode } from 'graphql';
-import { ScaleType } from '@elastic/charts';
-import { DEFAULT_INDEX_KEY } from '../../../common/constants';
-import {
-  GetNetworkDnsQuery,
-  NetworkDnsEdges,
-  NetworkDnsSortField,
-  PageInfoPaginated,
-  MatrixOverOrdinalHistogramData,
-} from '../../graphql/types';
-import { inputsModel, networkModel, networkSelectors, State, inputsSelectors } from '../../store';
-import { withKibana, WithKibanaProps } from '../../lib/kibana';
-import { generateTablePaginationOptions } from '../../components/paginated_table/helpers';
-import { createFilter, getDefaultFetchPolicy } from '../helpers';
-import { QueryTemplatePaginated, QueryTemplatePaginatedProps } from '../query_template_paginated';
-import { networkDnsQuery } from './index.gql_query';
-import { DEFAULT_TABLE_ACTIVE_PAGE, DEFAULT_TABLE_LIMIT } from '../../store/constants';
-import { MatrixHistogram } from '../../components/matrix_histogram';
-import { MatrixHistogramOption, GetSubTitle } from '../../components/matrix_histogram/types';
-import { UpdateDateRange } from '../../components/charts/common';
-import { SetQuery } from '../../pages/hosts/navigation/types';
-
-const ID = 'networkDnsQuery';
-export const HISTOGRAM_ID = 'networkDnsHistogramQuery';
-export interface NetworkDnsArgs {
-  id: string;
-  inspect: inputsModel.InspectQuery;
-  isInspected: boolean;
-  loading: boolean;
-  loadPage: (newActivePage: number) => void;
-  networkDns: NetworkDnsEdges[];
-  pageInfo: PageInfoPaginated;
-  refetch: inputsModel.Refetch;
-  stackByField?: string;
-  totalCount: number;
-  histogram: MatrixOverOrdinalHistogramData[];
-}
-
-export interface OwnProps extends QueryTemplatePaginatedProps {
-  children: (args: NetworkDnsArgs) => React.ReactNode;
-  type: networkModel.NetworkType;
-}
-
-interface DnsHistogramOwnProps extends QueryTemplatePaginatedProps {
-  dataKey: string | string[];
-  defaultStackByOption: MatrixHistogramOption;
-  errorMessage: string;
-  isDnsHistogram?: boolean;
-  query: DocumentNode;
-  scaleType: ScaleType;
-  setQuery: SetQuery;
-  showLegend?: boolean;
-  stackByOptions: MatrixHistogramOption[];
-  subtitle?: string | GetSubTitle;
-  title: string;
-  type: networkModel.NetworkType;
-  updateDateRange: UpdateDateRange;
-  yTickFormatter?: (value: number) => string;
-}
-
-export interface NetworkDnsComponentReduxProps {
-  activePage: number;
-  sort: NetworkDnsSortField;
-  isInspected: boolean;
-  isPtrIncluded: boolean;
-  limit: number;
-}
-
-type NetworkDnsProps = OwnProps & NetworkDnsComponentReduxProps & WithKibanaProps;
-
-export class NetworkDnsComponentQuery extends QueryTemplatePaginated<
-  NetworkDnsProps,
-  GetNetworkDnsQuery.Query,
-  GetNetworkDnsQuery.Variables
-> {
-  public render() {
-    const {
-      activePage,
-      children,
-      sort,
-      endDate,
-      filterQuery,
-      id = ID,
-      isInspected,
-      isPtrIncluded,
-      kibana,
-      limit,
-      skip,
-      sourceId,
-      startDate,
-    } = this.props;
-    const variables: GetNetworkDnsQuery.Variables = {
-      defaultIndex: kibana.services.uiSettings.get<string[]>(DEFAULT_INDEX_KEY),
-      filterQuery: createFilter(filterQuery),
-      inspect: isInspected,
-      isPtrIncluded,
-      pagination: generateTablePaginationOptions(activePage, limit),
-      sort,
-      sourceId,
-      timerange: {
-        interval: '12h',
-        from: startDate!,
-        to: endDate!,
-      },
-    };
-
-    return (
-      <Query<GetNetworkDnsQuery.Query, GetNetworkDnsQuery.Variables>
-        fetchPolicy={getDefaultFetchPolicy()}
-        notifyOnNetworkStatusChange
-        query={networkDnsQuery}
-        skip={skip}
-        variables={variables}
-      >
-        {({ data, loading, fetchMore, networkStatus, refetch }) => {
-          const networkDns = getOr([], `source.NetworkDns.edges`, data);
-          this.setFetchMore(fetchMore);
-          this.setFetchMoreOptions((newActivePage: number) => ({
-            variables: {
-              pagination: generateTablePaginationOptions(newActivePage, limit),
-            },
-            updateQuery: (prev, { fetchMoreResult }) => {
-              if (!fetchMoreResult) {
-                return prev;
-              }
-              return {
-                ...fetchMoreResult,
-                source: {
-                  ...fetchMoreResult.source,
-                  NetworkDns: {
-                    ...fetchMoreResult.source.NetworkDns,
-                    edges: [...fetchMoreResult.source.NetworkDns.edges],
-                  },
-                },
-              };
-            },
-          }));
-          const isLoading = this.isItAValidLoading(loading, variables, networkStatus);
-          return children({
-            id,
-            inspect: getOr(null, 'source.NetworkDns.inspect', data),
-            isInspected,
-            loading: isLoading,
-            loadPage: this.wrappedLoadMore,
-            networkDns,
-            pageInfo: getOr({}, 'source.NetworkDns.pageInfo', data),
-            refetch: this.memoizedRefetchQuery(variables, limit, refetch),
-            totalCount: getOr(-1, 'source.NetworkDns.totalCount', data),
-            histogram: getOr(null, 'source.NetworkDns.histogram', data),
-          });
-        }}
-      </Query>
-    );
-  }
-}
-
-const makeMapStateToProps = () => {
-  const getNetworkDnsSelector = networkSelectors.dnsSelector();
-  const getQuery = inputsSelectors.globalQueryByIdSelector();
-  const mapStateToProps = (state: State, { id = ID }: OwnProps) => {
-    const { isInspected } = getQuery(state, id);
-    return {
-      ...getNetworkDnsSelector(state),
-      isInspected,
-      id,
-    };
-  };
-
-  return mapStateToProps;
-};
-
-const makeMapHistogramStateToProps = () => {
-  const getNetworkDnsSelector = networkSelectors.dnsSelector();
-  const getQuery = inputsSelectors.globalQueryByIdSelector();
-  const mapStateToProps = (state: State, { id = HISTOGRAM_ID }: DnsHistogramOwnProps) => {
-    const { isInspected } = getQuery(state, id);
-    return {
-      ...getNetworkDnsSelector(state),
-      activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-      limit: DEFAULT_TABLE_LIMIT,
-      isInspected,
-      id,
-    };
-  };
-
-  return mapStateToProps;
-};
-
-export const NetworkDnsQuery = compose<React.ComponentClass<OwnProps>>(
-  connect(makeMapStateToProps),
-  withKibana
-)(NetworkDnsComponentQuery);
-
-export const NetworkDnsHistogramQuery = compose<React.ComponentClass<DnsHistogramOwnProps>>(
-  connect(makeMapHistogramStateToProps),
-  withKibana
-)(MatrixHistogram);
diff --git a/x-pack/plugins/siem/public/containers/network_http/index.tsx b/x-pack/plugins/siem/public/containers/network_http/index.tsx
deleted file mode 100644
index bf4e64f63d5599..00000000000000
--- a/x-pack/plugins/siem/public/containers/network_http/index.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-/*
- * 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 { getOr } from 'lodash/fp';
-import React from 'react';
-import { Query } from 'react-apollo';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-
-import { DEFAULT_INDEX_KEY } from '../../../common/constants';
-import {
-  GetNetworkHttpQuery,
-  NetworkHttpEdges,
-  NetworkHttpSortField,
-  PageInfoPaginated,
-} from '../../graphql/types';
-import { inputsModel, inputsSelectors, networkModel, networkSelectors, State } from '../../store';
-import { withKibana, WithKibanaProps } from '../../lib/kibana';
-import { generateTablePaginationOptions } from '../../components/paginated_table/helpers';
-import { createFilter, getDefaultFetchPolicy } from '../helpers';
-import { QueryTemplatePaginated, QueryTemplatePaginatedProps } from '../query_template_paginated';
-import { networkHttpQuery } from './index.gql_query';
-
-const ID = 'networkHttpQuery';
-
-export interface NetworkHttpArgs {
-  id: string;
-  ip?: string;
-  inspect: inputsModel.InspectQuery;
-  isInspected: boolean;
-  loading: boolean;
-  loadPage: (newActivePage: number) => void;
-  networkHttp: NetworkHttpEdges[];
-  pageInfo: PageInfoPaginated;
-  refetch: inputsModel.Refetch;
-  totalCount: number;
-}
-
-export interface OwnProps extends QueryTemplatePaginatedProps {
-  children: (args: NetworkHttpArgs) => React.ReactNode;
-  ip?: string;
-  type: networkModel.NetworkType;
-}
-
-export interface NetworkHttpComponentReduxProps {
-  activePage: number;
-  isInspected: boolean;
-  limit: number;
-  sort: NetworkHttpSortField;
-}
-
-type NetworkHttpProps = OwnProps & NetworkHttpComponentReduxProps & WithKibanaProps;
-
-class NetworkHttpComponentQuery extends QueryTemplatePaginated<
-  NetworkHttpProps,
-  GetNetworkHttpQuery.Query,
-  GetNetworkHttpQuery.Variables
-> {
-  public render() {
-    const {
-      activePage,
-      children,
-      endDate,
-      filterQuery,
-      id = ID,
-      ip,
-      isInspected,
-      kibana,
-      limit,
-      skip,
-      sourceId,
-      sort,
-      startDate,
-    } = this.props;
-    const variables: GetNetworkHttpQuery.Variables = {
-      defaultIndex: kibana.services.uiSettings.get<string[]>(DEFAULT_INDEX_KEY),
-      filterQuery: createFilter(filterQuery),
-      inspect: isInspected,
-      ip,
-      pagination: generateTablePaginationOptions(activePage, limit),
-      sort,
-      sourceId,
-      timerange: {
-        interval: '12h',
-        from: startDate!,
-        to: endDate!,
-      },
-    };
-    return (
-      <Query<GetNetworkHttpQuery.Query, GetNetworkHttpQuery.Variables>
-        fetchPolicy={getDefaultFetchPolicy()}
-        notifyOnNetworkStatusChange
-        query={networkHttpQuery}
-        skip={skip}
-        variables={variables}
-      >
-        {({ data, loading, fetchMore, networkStatus, refetch }) => {
-          const networkHttp = getOr([], `source.NetworkHttp.edges`, data);
-          this.setFetchMore(fetchMore);
-          this.setFetchMoreOptions((newActivePage: number) => ({
-            variables: {
-              pagination: generateTablePaginationOptions(newActivePage, limit),
-            },
-            updateQuery: (prev, { fetchMoreResult }) => {
-              if (!fetchMoreResult) {
-                return prev;
-              }
-              return {
-                ...fetchMoreResult,
-                source: {
-                  ...fetchMoreResult.source,
-                  NetworkHttp: {
-                    ...fetchMoreResult.source.NetworkHttp,
-                    edges: [...fetchMoreResult.source.NetworkHttp.edges],
-                  },
-                },
-              };
-            },
-          }));
-          const isLoading = this.isItAValidLoading(loading, variables, networkStatus);
-          return children({
-            id,
-            inspect: getOr(null, 'source.NetworkHttp.inspect', data),
-            isInspected,
-            loading: isLoading,
-            loadPage: this.wrappedLoadMore,
-            networkHttp,
-            pageInfo: getOr({}, 'source.NetworkHttp.pageInfo', data),
-            refetch: this.memoizedRefetchQuery(variables, limit, refetch),
-            totalCount: getOr(-1, 'source.NetworkHttp.totalCount', data),
-          });
-        }}
-      </Query>
-    );
-  }
-}
-
-const makeMapStateToProps = () => {
-  const getHttpSelector = networkSelectors.httpSelector();
-  const getQuery = inputsSelectors.globalQueryByIdSelector();
-  return (state: State, { id = ID, type }: OwnProps) => {
-    const { isInspected } = getQuery(state, id);
-    return {
-      ...getHttpSelector(state, type),
-      isInspected,
-    };
-  };
-};
-
-export const NetworkHttpQuery = compose<React.ComponentClass<OwnProps>>(
-  connect(makeMapStateToProps),
-  withKibana
-)(NetworkHttpComponentQuery);
diff --git a/x-pack/plugins/siem/public/containers/network_top_countries/index.tsx b/x-pack/plugins/siem/public/containers/network_top_countries/index.tsx
deleted file mode 100644
index bd1e1a002bbcdc..00000000000000
--- a/x-pack/plugins/siem/public/containers/network_top_countries/index.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-/*
- * 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 { getOr } from 'lodash/fp';
-import React from 'react';
-import { Query } from 'react-apollo';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-
-import { DEFAULT_INDEX_KEY } from '../../../common/constants';
-import {
-  FlowTargetSourceDest,
-  GetNetworkTopCountriesQuery,
-  NetworkTopCountriesEdges,
-  NetworkTopTablesSortField,
-  PageInfoPaginated,
-} from '../../graphql/types';
-import { inputsModel, inputsSelectors, networkModel, networkSelectors, State } from '../../store';
-import { withKibana, WithKibanaProps } from '../../lib/kibana';
-import { generateTablePaginationOptions } from '../../components/paginated_table/helpers';
-import { createFilter, getDefaultFetchPolicy } from '../helpers';
-import { QueryTemplatePaginated, QueryTemplatePaginatedProps } from '../query_template_paginated';
-import { networkTopCountriesQuery } from './index.gql_query';
-
-const ID = 'networkTopCountriesQuery';
-
-export interface NetworkTopCountriesArgs {
-  id: string;
-  ip?: string;
-  inspect: inputsModel.InspectQuery;
-  isInspected: boolean;
-  loading: boolean;
-  loadPage: (newActivePage: number) => void;
-  networkTopCountries: NetworkTopCountriesEdges[];
-  pageInfo: PageInfoPaginated;
-  refetch: inputsModel.Refetch;
-  totalCount: number;
-}
-
-export interface OwnProps extends QueryTemplatePaginatedProps {
-  children: (args: NetworkTopCountriesArgs) => React.ReactNode;
-  flowTarget: FlowTargetSourceDest;
-  ip?: string;
-  type: networkModel.NetworkType;
-}
-
-export interface NetworkTopCountriesComponentReduxProps {
-  activePage: number;
-  isInspected: boolean;
-  limit: number;
-  sort: NetworkTopTablesSortField;
-}
-
-type NetworkTopCountriesProps = OwnProps & NetworkTopCountriesComponentReduxProps & WithKibanaProps;
-
-class NetworkTopCountriesComponentQuery extends QueryTemplatePaginated<
-  NetworkTopCountriesProps,
-  GetNetworkTopCountriesQuery.Query,
-  GetNetworkTopCountriesQuery.Variables
-> {
-  public render() {
-    const {
-      activePage,
-      children,
-      endDate,
-      flowTarget,
-      filterQuery,
-      kibana,
-      id = `${ID}-${flowTarget}`,
-      ip,
-      isInspected,
-      limit,
-      skip,
-      sourceId,
-      startDate,
-      sort,
-    } = this.props;
-    const variables: GetNetworkTopCountriesQuery.Variables = {
-      defaultIndex: kibana.services.uiSettings.get<string[]>(DEFAULT_INDEX_KEY),
-      filterQuery: createFilter(filterQuery),
-      flowTarget,
-      inspect: isInspected,
-      ip,
-      pagination: generateTablePaginationOptions(activePage, limit),
-      sort,
-      sourceId,
-      timerange: {
-        interval: '12h',
-        from: startDate!,
-        to: endDate!,
-      },
-    };
-    return (
-      <Query<GetNetworkTopCountriesQuery.Query, GetNetworkTopCountriesQuery.Variables>
-        fetchPolicy={getDefaultFetchPolicy()}
-        notifyOnNetworkStatusChange
-        query={networkTopCountriesQuery}
-        skip={skip}
-        variables={variables}
-      >
-        {({ data, loading, fetchMore, networkStatus, refetch }) => {
-          const networkTopCountries = getOr([], `source.NetworkTopCountries.edges`, data);
-          this.setFetchMore(fetchMore);
-          this.setFetchMoreOptions((newActivePage: number) => ({
-            variables: {
-              pagination: generateTablePaginationOptions(newActivePage, limit),
-            },
-            updateQuery: (prev, { fetchMoreResult }) => {
-              if (!fetchMoreResult) {
-                return prev;
-              }
-              return {
-                ...fetchMoreResult,
-                source: {
-                  ...fetchMoreResult.source,
-                  NetworkTopCountries: {
-                    ...fetchMoreResult.source.NetworkTopCountries,
-                    edges: [...fetchMoreResult.source.NetworkTopCountries.edges],
-                  },
-                },
-              };
-            },
-          }));
-          const isLoading = this.isItAValidLoading(loading, variables, networkStatus);
-          return children({
-            id,
-            inspect: getOr(null, 'source.NetworkTopCountries.inspect', data),
-            isInspected,
-            loading: isLoading,
-            loadPage: this.wrappedLoadMore,
-            networkTopCountries,
-            pageInfo: getOr({}, 'source.NetworkTopCountries.pageInfo', data),
-            refetch: this.memoizedRefetchQuery(variables, limit, refetch),
-            totalCount: getOr(-1, 'source.NetworkTopCountries.totalCount', data),
-          });
-        }}
-      </Query>
-    );
-  }
-}
-
-const makeMapStateToProps = () => {
-  const getTopCountriesSelector = networkSelectors.topCountriesSelector();
-  const getQuery = inputsSelectors.globalQueryByIdSelector();
-  return (state: State, { flowTarget, id = `${ID}-${flowTarget}`, type }: OwnProps) => {
-    const { isInspected } = getQuery(state, id);
-    return {
-      ...getTopCountriesSelector(state, type, flowTarget),
-      isInspected,
-    };
-  };
-};
-
-export const NetworkTopCountriesQuery = compose<React.ComponentClass<OwnProps>>(
-  connect(makeMapStateToProps),
-  withKibana
-)(NetworkTopCountriesComponentQuery);
diff --git a/x-pack/plugins/siem/public/containers/network_top_n_flow/index.tsx b/x-pack/plugins/siem/public/containers/network_top_n_flow/index.tsx
deleted file mode 100644
index f0f1f8257f29f1..00000000000000
--- a/x-pack/plugins/siem/public/containers/network_top_n_flow/index.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-/*
- * 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 { getOr } from 'lodash/fp';
-import React from 'react';
-import { Query } from 'react-apollo';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-
-import { DEFAULT_INDEX_KEY } from '../../../common/constants';
-import {
-  FlowTargetSourceDest,
-  GetNetworkTopNFlowQuery,
-  NetworkTopNFlowEdges,
-  NetworkTopTablesSortField,
-  PageInfoPaginated,
-} from '../../graphql/types';
-import { withKibana, WithKibanaProps } from '../../lib/kibana';
-import { inputsModel, inputsSelectors, networkModel, networkSelectors, State } from '../../store';
-import { generateTablePaginationOptions } from '../../components/paginated_table/helpers';
-import { createFilter, getDefaultFetchPolicy } from '../helpers';
-import { QueryTemplatePaginated, QueryTemplatePaginatedProps } from '../query_template_paginated';
-import { networkTopNFlowQuery } from './index.gql_query';
-
-const ID = 'networkTopNFlowQuery';
-
-export interface NetworkTopNFlowArgs {
-  id: string;
-  ip?: string;
-  inspect: inputsModel.InspectQuery;
-  isInspected: boolean;
-  loading: boolean;
-  loadPage: (newActivePage: number) => void;
-  networkTopNFlow: NetworkTopNFlowEdges[];
-  pageInfo: PageInfoPaginated;
-  refetch: inputsModel.Refetch;
-  totalCount: number;
-}
-
-export interface OwnProps extends QueryTemplatePaginatedProps {
-  children: (args: NetworkTopNFlowArgs) => React.ReactNode;
-  flowTarget: FlowTargetSourceDest;
-  ip?: string;
-  type: networkModel.NetworkType;
-}
-
-export interface NetworkTopNFlowComponentReduxProps {
-  activePage: number;
-  isInspected: boolean;
-  limit: number;
-  sort: NetworkTopTablesSortField;
-}
-
-type NetworkTopNFlowProps = OwnProps & NetworkTopNFlowComponentReduxProps & WithKibanaProps;
-
-class NetworkTopNFlowComponentQuery extends QueryTemplatePaginated<
-  NetworkTopNFlowProps,
-  GetNetworkTopNFlowQuery.Query,
-  GetNetworkTopNFlowQuery.Variables
-> {
-  public render() {
-    const {
-      activePage,
-      children,
-      endDate,
-      flowTarget,
-      filterQuery,
-      kibana,
-      id = `${ID}-${flowTarget}`,
-      ip,
-      isInspected,
-      limit,
-      skip,
-      sourceId,
-      startDate,
-      sort,
-    } = this.props;
-    const variables: GetNetworkTopNFlowQuery.Variables = {
-      defaultIndex: kibana.services.uiSettings.get<string[]>(DEFAULT_INDEX_KEY),
-      filterQuery: createFilter(filterQuery),
-      flowTarget,
-      inspect: isInspected,
-      ip,
-      pagination: generateTablePaginationOptions(activePage, limit),
-      sort,
-      sourceId,
-      timerange: {
-        interval: '12h',
-        from: startDate!,
-        to: endDate!,
-      },
-    };
-    return (
-      <Query<GetNetworkTopNFlowQuery.Query, GetNetworkTopNFlowQuery.Variables>
-        fetchPolicy={getDefaultFetchPolicy()}
-        notifyOnNetworkStatusChange
-        query={networkTopNFlowQuery}
-        skip={skip}
-        variables={variables}
-      >
-        {({ data, loading, fetchMore, networkStatus, refetch }) => {
-          const networkTopNFlow = getOr([], `source.NetworkTopNFlow.edges`, data);
-          this.setFetchMore(fetchMore);
-          this.setFetchMoreOptions((newActivePage: number) => ({
-            variables: {
-              pagination: generateTablePaginationOptions(newActivePage, limit),
-            },
-            updateQuery: (prev, { fetchMoreResult }) => {
-              if (!fetchMoreResult) {
-                return prev;
-              }
-              return {
-                ...fetchMoreResult,
-                source: {
-                  ...fetchMoreResult.source,
-                  NetworkTopNFlow: {
-                    ...fetchMoreResult.source.NetworkTopNFlow,
-                    edges: [...fetchMoreResult.source.NetworkTopNFlow.edges],
-                  },
-                },
-              };
-            },
-          }));
-          const isLoading = this.isItAValidLoading(loading, variables, networkStatus);
-          return children({
-            id,
-            inspect: getOr(null, 'source.NetworkTopNFlow.inspect', data),
-            isInspected,
-            loading: isLoading,
-            loadPage: this.wrappedLoadMore,
-            networkTopNFlow,
-            pageInfo: getOr({}, 'source.NetworkTopNFlow.pageInfo', data),
-            refetch: this.memoizedRefetchQuery(variables, limit, refetch),
-            totalCount: getOr(-1, 'source.NetworkTopNFlow.totalCount', data),
-          });
-        }}
-      </Query>
-    );
-  }
-}
-
-const makeMapStateToProps = () => {
-  const getTopNFlowSelector = networkSelectors.topNFlowSelector();
-  const getQuery = inputsSelectors.globalQueryByIdSelector();
-  return (state: State, { flowTarget, id = `${ID}-${flowTarget}`, type }: OwnProps) => {
-    const { isInspected } = getQuery(state, id);
-    return {
-      ...getTopNFlowSelector(state, type, flowTarget),
-      isInspected,
-    };
-  };
-};
-
-export const NetworkTopNFlowQuery = compose<React.ComponentClass<OwnProps>>(
-  connect(makeMapStateToProps),
-  withKibana
-)(NetworkTopNFlowComponentQuery);
diff --git a/x-pack/plugins/siem/public/containers/overview/overview_host/index.tsx b/x-pack/plugins/siem/public/containers/overview/overview_host/index.tsx
deleted file mode 100644
index 2dd9ccf24d802f..00000000000000
--- a/x-pack/plugins/siem/public/containers/overview/overview_host/index.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-/*
- * 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 { getOr } from 'lodash/fp';
-import React from 'react';
-import { Query } from 'react-apollo';
-import { connect, ConnectedProps } from 'react-redux';
-
-import { DEFAULT_INDEX_KEY } from '../../../../common/constants';
-import { GetOverviewHostQuery, OverviewHostData } from '../../../graphql/types';
-import { useUiSetting } from '../../../lib/kibana';
-import { inputsModel, inputsSelectors } from '../../../store/inputs';
-import { State } from '../../../store';
-import { createFilter, getDefaultFetchPolicy } from '../../helpers';
-import { QueryTemplateProps } from '../../query_template';
-
-import { overviewHostQuery } from './index.gql_query';
-
-export const ID = 'overviewHostQuery';
-
-export interface OverviewHostArgs {
-  id: string;
-  inspect: inputsModel.InspectQuery;
-  loading: boolean;
-  overviewHost: OverviewHostData;
-  refetch: inputsModel.Refetch;
-}
-
-export interface OverviewHostProps extends QueryTemplateProps {
-  children: (args: OverviewHostArgs) => React.ReactNode;
-  sourceId: string;
-  endDate: number;
-  startDate: number;
-}
-
-const OverviewHostComponentQuery = React.memo<OverviewHostProps & PropsFromRedux>(
-  ({ id = ID, children, filterQuery, isInspected, sourceId, startDate, endDate }) => {
-    return (
-      <Query<GetOverviewHostQuery.Query, GetOverviewHostQuery.Variables>
-        query={overviewHostQuery}
-        fetchPolicy={getDefaultFetchPolicy()}
-        variables={{
-          sourceId,
-          timerange: {
-            interval: '12h',
-            from: startDate,
-            to: endDate,
-          },
-          filterQuery: createFilter(filterQuery),
-          defaultIndex: useUiSetting<string[]>(DEFAULT_INDEX_KEY),
-          inspect: isInspected,
-        }}
-      >
-        {({ data, loading, refetch }) => {
-          const overviewHost = getOr({}, `source.OverviewHost`, data);
-          return children({
-            id,
-            inspect: getOr(null, 'source.OverviewHost.inspect', data),
-            overviewHost,
-            loading,
-            refetch,
-          });
-        }}
-      </Query>
-    );
-  }
-);
-
-OverviewHostComponentQuery.displayName = 'OverviewHostComponentQuery';
-
-const makeMapStateToProps = () => {
-  const getQuery = inputsSelectors.globalQueryByIdSelector();
-  const mapStateToProps = (state: State, { id = ID }: OverviewHostProps) => {
-    const { isInspected } = getQuery(state, id);
-    return {
-      isInspected,
-    };
-  };
-  return mapStateToProps;
-};
-
-const connector = connect(makeMapStateToProps);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-export const OverviewHostQuery = connector(OverviewHostComponentQuery);
diff --git a/x-pack/plugins/siem/public/containers/overview/overview_network/index.tsx b/x-pack/plugins/siem/public/containers/overview/overview_network/index.tsx
deleted file mode 100644
index d0acd41c224a5f..00000000000000
--- a/x-pack/plugins/siem/public/containers/overview/overview_network/index.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-/*
- * 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 { getOr } from 'lodash/fp';
-import React from 'react';
-import { Query } from 'react-apollo';
-import { connect, ConnectedProps } from 'react-redux';
-
-import { DEFAULT_INDEX_KEY } from '../../../../common/constants';
-import { GetOverviewNetworkQuery, OverviewNetworkData } from '../../../graphql/types';
-import { useUiSetting } from '../../../lib/kibana';
-import { State } from '../../../store';
-import { inputsModel, inputsSelectors } from '../../../store/inputs';
-import { createFilter, getDefaultFetchPolicy } from '../../helpers';
-import { QueryTemplateProps } from '../../query_template';
-
-import { overviewNetworkQuery } from './index.gql_query';
-
-export const ID = 'overviewNetworkQuery';
-
-export interface OverviewNetworkArgs {
-  id: string;
-  inspect: inputsModel.InspectQuery;
-  overviewNetwork: OverviewNetworkData;
-  loading: boolean;
-  refetch: inputsModel.Refetch;
-}
-
-export interface OverviewNetworkProps extends QueryTemplateProps {
-  children: (args: OverviewNetworkArgs) => React.ReactNode;
-  sourceId: string;
-  endDate: number;
-  startDate: number;
-}
-
-export const OverviewNetworkComponentQuery = React.memo<OverviewNetworkProps & PropsFromRedux>(
-  ({ 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: useUiSetting<string[]>(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';
-
-const makeMapStateToProps = () => {
-  const getQuery = inputsSelectors.globalQueryByIdSelector();
-  const mapStateToProps = (state: State, { id = ID }: OverviewNetworkProps) => {
-    const { isInspected } = getQuery(state, id);
-    return {
-      isInspected,
-    };
-  };
-  return mapStateToProps;
-};
-
-const connector = connect(makeMapStateToProps);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-export const OverviewNetworkQuery = connector(OverviewNetworkComponentQuery);
diff --git a/x-pack/plugins/siem/public/containers/source/index.tsx b/x-pack/plugins/siem/public/containers/source/index.tsx
deleted file mode 100644
index e9359fdb195877..00000000000000
--- a/x-pack/plugins/siem/public/containers/source/index.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-/*
- * 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 { isUndefined } from 'lodash';
-import { get, keyBy, pick, set, isEmpty } from 'lodash/fp';
-import { Query } from 'react-apollo';
-import React, { useEffect, useMemo, useState } from 'react';
-import memoizeOne from 'memoize-one';
-import { IIndexPattern } from 'src/plugins/data/public';
-
-import { DEFAULT_INDEX_KEY } from '../../../common/constants';
-import { useUiSetting$ } from '../../lib/kibana';
-
-import { IndexField, SourceQuery } from '../../graphql/types';
-
-import { sourceQuery } from './index.gql_query';
-import { useApolloClient } from '../../utils/apollo_context';
-
-export { sourceQuery };
-
-export interface BrowserField {
-  aggregatable: boolean;
-  category: string;
-  description: string | null;
-  example: string | number | null;
-  fields: Readonly<Record<string, Partial<BrowserField>>>;
-  format: string;
-  indexes: string[];
-  name: string;
-  searchable: boolean;
-  type: string;
-}
-
-export type BrowserFields = Readonly<Record<string, Partial<BrowserField>>>;
-
-export const getAllBrowserFields = (browserFields: BrowserFields): Array<Partial<BrowserField>> =>
-  Object.values(browserFields).reduce<Array<Partial<BrowserField>>>(
-    (acc, namespace) => [
-      ...acc,
-      ...Object.values(namespace.fields != null ? namespace.fields : {}),
-    ],
-    []
-  );
-
-export const getAllFieldsByName = (
-  browserFields: BrowserFields
-): { [fieldName: string]: Partial<BrowserField> } =>
-  keyBy('name', getAllBrowserFields(browserFields));
-
-interface WithSourceArgs {
-  indicesExist: boolean;
-  browserFields: BrowserFields;
-  indexPattern: IIndexPattern;
-}
-
-interface WithSourceProps {
-  children: (args: WithSourceArgs) => React.ReactNode;
-  indexToAdd?: string[] | null;
-  sourceId: string;
-}
-
-export const getIndexFields = memoizeOne(
-  (title: string, fields: IndexField[]): IIndexPattern =>
-    fields && fields.length > 0
-      ? {
-          fields: fields.map(field => pick(['name', 'searchable', 'type', 'aggregatable'], field)),
-          title,
-        }
-      : { fields: [], title }
-);
-
-export const getBrowserFields = memoizeOne(
-  (title: string, fields: IndexField[]): BrowserFields =>
-    fields && fields.length > 0
-      ? fields.reduce<BrowserFields>(
-          (accumulator: BrowserFields, field: IndexField) =>
-            set([field.category, 'fields', field.name], field, accumulator),
-          {}
-        )
-      : {}
-);
-
-export const WithSource = React.memo<WithSourceProps>(({ children, indexToAdd, sourceId }) => {
-  const [configIndex] = useUiSetting$<string[]>(DEFAULT_INDEX_KEY);
-  const defaultIndex = useMemo<string[]>(() => {
-    if (indexToAdd != null && !isEmpty(indexToAdd)) {
-      return [...configIndex, ...indexToAdd];
-    }
-    return configIndex;
-  }, [configIndex, indexToAdd]);
-
-  return (
-    <Query<SourceQuery.Query, SourceQuery.Variables>
-      query={sourceQuery}
-      fetchPolicy="cache-first"
-      notifyOnNetworkStatusChange
-      variables={{
-        sourceId,
-        defaultIndex,
-      }}
-    >
-      {({ data }) =>
-        children({
-          indicesExist: get('source.status.indicesExist', data),
-          browserFields: getBrowserFields(
-            defaultIndex.join(),
-            get('source.status.indexFields', data)
-          ),
-          indexPattern: getIndexFields(defaultIndex.join(), get('source.status.indexFields', data)),
-        })
-      }
-    </Query>
-  );
-});
-
-WithSource.displayName = 'WithSource';
-
-export const indicesExistOrDataTemporarilyUnavailable = (indicesExist: boolean | undefined) =>
-  indicesExist || isUndefined(indicesExist);
-
-export const useWithSource = (sourceId: string, indices: string[]) => {
-  const [loading, updateLoading] = useState(false);
-  const [indicesExist, setIndicesExist] = useState<boolean | undefined | null>(undefined);
-  const [browserFields, setBrowserFields] = useState<BrowserFields | null>(null);
-  const [indexPattern, setIndexPattern] = useState<IIndexPattern | null>(null);
-  const [errorMessage, updateErrorMessage] = useState<string | null>(null);
-
-  const apolloClient = useApolloClient();
-  async function fetchSource(signal: AbortSignal) {
-    updateLoading(true);
-    if (apolloClient) {
-      apolloClient
-        .query<SourceQuery.Query, SourceQuery.Variables>({
-          query: sourceQuery,
-          fetchPolicy: 'cache-first',
-          variables: {
-            sourceId,
-            defaultIndex: indices,
-          },
-          context: {
-            fetchOptions: {
-              signal,
-            },
-          },
-        })
-        .then(
-          result => {
-            updateLoading(false);
-            updateErrorMessage(null);
-            setIndicesExist(get('data.source.status.indicesExist', result));
-            setBrowserFields(
-              getBrowserFields(indices.join(), get('data.source.status.indexFields', result))
-            );
-            setIndexPattern(
-              getIndexFields(indices.join(), get('data.source.status.indexFields', result))
-            );
-          },
-          error => {
-            updateLoading(false);
-            updateErrorMessage(error.message);
-          }
-        );
-    }
-  }
-
-  useEffect(() => {
-    const abortCtrl = new AbortController();
-    const signal = abortCtrl.signal;
-    fetchSource(signal);
-    return () => abortCtrl.abort();
-  }, [apolloClient, sourceId, indices]);
-
-  return { indicesExist, browserFields, indexPattern, loading, errorMessage };
-};
diff --git a/x-pack/plugins/siem/public/containers/source/mock.ts b/x-pack/plugins/siem/public/containers/source/mock.ts
deleted file mode 100644
index 092aad9e7400cc..00000000000000
--- a/x-pack/plugins/siem/public/containers/source/mock.ts
+++ /dev/null
@@ -1,699 +0,0 @@
-/*
- * 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 { DEFAULT_INDEX_PATTERN } from '../../../common/constants';
-
-import { BrowserFields } from '.';
-import { sourceQuery } from './index.gql_query';
-
-export const mocksSource = [
-  {
-    request: {
-      query: sourceQuery,
-      variables: {
-        sourceId: 'default',
-        defaultIndex: DEFAULT_INDEX_PATTERN,
-      },
-    },
-    result: {
-      data: {
-        source: {
-          id: 'default',
-          configuration: {},
-          status: {
-            indicesExist: true,
-            winlogbeatIndices: [
-              'winlogbeat-7.0.0-2019.02.17',
-              'winlogbeat-7.0.0-2019.02.18',
-              'winlogbeat-7.0.0-2019.02.19',
-              'winlogbeat-7.0.0-2019.02.20',
-              'winlogbeat-7.0.0-2019.02.21',
-              'winlogbeat-7.0.0-2019.02.21-000001',
-              'winlogbeat-7.0.0-2019.02.22',
-              'winlogbeat-8.0.0-2019.02.19-000001',
-            ],
-            auditbeatIndices: [
-              'auditbeat-7.0.0-2019.02.17',
-              'auditbeat-7.0.0-2019.02.18',
-              'auditbeat-7.0.0-2019.02.19',
-              'auditbeat-7.0.0-2019.02.20',
-              'auditbeat-7.0.0-2019.02.21',
-              'auditbeat-7.0.0-2019.02.21-000001',
-              'auditbeat-7.0.0-2019.02.22',
-              'auditbeat-8.0.0-2019.02.19-000001',
-            ],
-            filebeatIndices: [
-              'filebeat-7.0.0-iot-2019.06',
-              'filebeat-7.0.0-iot-2019.07',
-              'filebeat-7.0.0-iot-2019.08',
-              'filebeat-7.0.0-iot-2019.09',
-              'filebeat-7.0.0-iot-2019.10',
-              'filebeat-8.0.0-2019.02.19-000001',
-            ],
-            indexFields: [
-              {
-                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: ['auditbeat', 'filebeat', 'packetbeat'],
-                name: '@timestamp',
-                searchable: true,
-                type: 'date',
-                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: ['auditbeat', 'filebeat', 'packetbeat'],
-                name: 'agent.ephemeral_id',
-                searchable: true,
-                type: 'string',
-                aggregatable: true,
-              },
-              {
-                category: 'agent',
-                description: null,
-                example: null,
-                format: '',
-                indexes: ['auditbeat', 'filebeat', 'packetbeat'],
-                name: 'agent.hostname',
-                searchable: true,
-                type: 'string',
-                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: ['auditbeat', 'filebeat', 'packetbeat'],
-                name: 'agent.id',
-                searchable: true,
-                type: 'string',
-                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: ['auditbeat', 'filebeat', 'packetbeat'],
-                name: 'agent.name',
-                searchable: true,
-                type: 'string',
-                aggregatable: true,
-              },
-              {
-                category: 'auditd',
-                description: null,
-                example: null,
-                format: '',
-                indexes: ['auditbeat'],
-                name: 'auditd.data.a0',
-                searchable: true,
-                type: 'string',
-                aggregatable: true,
-              },
-              {
-                category: 'auditd',
-                description: null,
-                example: null,
-                format: '',
-                indexes: ['auditbeat'],
-                name: 'auditd.data.a1',
-                searchable: true,
-                type: 'string',
-                aggregatable: true,
-              },
-              {
-                category: 'auditd',
-                description: null,
-                example: null,
-                format: '',
-                indexes: ['auditbeat'],
-                name: 'auditd.data.a2',
-                searchable: true,
-                type: 'string',
-                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: ['auditbeat', 'filebeat', 'packetbeat'],
-                name: 'client.address',
-                searchable: true,
-                type: 'string',
-                aggregatable: true,
-              },
-              {
-                category: 'client',
-                description: 'Bytes sent from the client to the server.',
-                example: '184',
-                format: '',
-                indexes: ['auditbeat', 'filebeat', 'packetbeat'],
-                name: 'client.bytes',
-                searchable: true,
-                type: 'number',
-                aggregatable: true,
-              },
-              {
-                category: 'client',
-                description: 'Client domain.',
-                example: null,
-                format: '',
-                indexes: ['auditbeat', 'filebeat', 'packetbeat'],
-                name: 'client.domain',
-                searchable: true,
-                type: 'string',
-                aggregatable: true,
-              },
-              {
-                category: 'client',
-                description: 'Country ISO code.',
-                example: 'CA',
-                format: '',
-                indexes: ['auditbeat', 'filebeat', 'packetbeat'],
-                name: 'client.geo.country_iso_code',
-                searchable: true,
-                type: 'string',
-                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: ['auditbeat', 'filebeat', 'packetbeat'],
-                name: 'cloud.account.id',
-                searchable: true,
-                type: 'string',
-                aggregatable: true,
-              },
-              {
-                category: 'cloud',
-                description: 'Availability zone in which this host is running.',
-                example: 'us-east-1c',
-                format: '',
-                indexes: ['auditbeat', 'filebeat', 'packetbeat'],
-                name: 'cloud.availability_zone',
-                searchable: true,
-                type: 'string',
-                aggregatable: true,
-              },
-              {
-                category: 'container',
-                description: 'Unique container id.',
-                example: null,
-                format: '',
-                indexes: ['auditbeat', 'filebeat', 'packetbeat'],
-                name: 'container.id',
-                searchable: true,
-                type: 'string',
-                aggregatable: true,
-              },
-              {
-                category: 'container',
-                description: 'Name of the image the container was built on.',
-                example: null,
-                format: '',
-                indexes: ['auditbeat', 'filebeat', 'packetbeat'],
-                name: 'container.image.name',
-                searchable: true,
-                type: 'string',
-                aggregatable: true,
-              },
-              {
-                category: 'container',
-                description: 'Container image tag.',
-                example: null,
-                format: '',
-                indexes: ['auditbeat', 'filebeat', 'packetbeat'],
-                name: 'container.image.tag',
-                searchable: true,
-                type: 'string',
-                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: ['auditbeat', 'filebeat', 'packetbeat'],
-                name: 'destination.address',
-                searchable: true,
-                type: 'string',
-                aggregatable: true,
-              },
-              {
-                category: 'destination',
-                description: 'Bytes sent from the destination to the source.',
-                example: '184',
-                format: '',
-                indexes: ['auditbeat', 'filebeat', 'packetbeat'],
-                name: 'destination.bytes',
-                searchable: true,
-                type: 'number',
-                aggregatable: true,
-              },
-              {
-                category: 'destination',
-                description: 'Destination domain.',
-                example: null,
-                format: '',
-                indexes: ['auditbeat', 'filebeat', 'packetbeat'],
-                name: 'destination.domain',
-                searchable: true,
-                type: 'string',
-                aggregatable: true,
-              },
-              {
-                aggregatable: true,
-                category: 'destination',
-                description:
-                  'IP address of the destination. Can be one or multiple IPv4 or IPv6 addresses.',
-                example: '',
-                format: '',
-                indexes: ['auditbeat', 'filebeat', 'packetbeat'],
-                name: 'destination.ip',
-                searchable: true,
-                type: 'ip',
-              },
-              {
-                aggregatable: true,
-                category: 'destination',
-                description: 'Port of the destination.',
-                example: '',
-                format: '',
-                indexes: ['auditbeat', 'filebeat', 'packetbeat'],
-                name: 'destination.port',
-                searchable: true,
-                type: 'long',
-              },
-              {
-                aggregatable: true,
-                category: 'source',
-                description:
-                  'IP address of the source. Can be one or multiple IPv4 or IPv6 addresses.',
-                example: '',
-                format: '',
-                indexes: ['auditbeat', 'filebeat', 'packetbeat'],
-                name: 'source.ip',
-                searchable: true,
-                type: 'ip',
-              },
-              {
-                aggregatable: true,
-                category: 'source',
-                description: 'Port of the source.',
-                example: '',
-                format: '',
-                indexes: ['auditbeat', 'filebeat', 'packetbeat'],
-                name: 'source.port',
-                searchable: true,
-                type: 'long',
-              },
-              {
-                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: DEFAULT_INDEX_PATTERN,
-                name: 'event.end',
-                searchable: true,
-                type: 'date',
-              },
-            ],
-          },
-        },
-      },
-    },
-  },
-];
-
-export const mockIndexFields = [
-  { aggregatable: true, name: '@timestamp', searchable: true, type: 'date' },
-  { aggregatable: true, name: 'agent.ephemeral_id', searchable: true, type: 'string' },
-  { aggregatable: true, name: 'agent.hostname', searchable: true, type: 'string' },
-  { aggregatable: true, name: 'agent.id', searchable: true, type: 'string' },
-  { aggregatable: true, name: 'agent.name', searchable: true, type: 'string' },
-  { aggregatable: true, name: 'auditd.data.a0', searchable: true, type: 'string' },
-  { aggregatable: true, name: 'auditd.data.a1', searchable: true, type: 'string' },
-  { aggregatable: true, name: 'auditd.data.a2', searchable: true, type: 'string' },
-  { aggregatable: true, name: 'client.address', searchable: true, type: 'string' },
-  { aggregatable: true, name: 'client.bytes', searchable: true, type: 'number' },
-  { aggregatable: true, name: 'client.domain', searchable: true, type: 'string' },
-  { aggregatable: true, name: 'client.geo.country_iso_code', searchable: true, type: 'string' },
-  { aggregatable: true, name: 'cloud.account.id', searchable: true, type: 'string' },
-  { aggregatable: true, name: 'cloud.availability_zone', searchable: true, type: 'string' },
-  { aggregatable: true, name: 'container.id', searchable: true, type: 'string' },
-  { aggregatable: true, name: 'container.image.name', searchable: true, type: 'string' },
-  { aggregatable: true, name: 'container.image.tag', searchable: true, type: 'string' },
-  { aggregatable: true, name: 'destination.address', searchable: true, type: 'string' },
-  { aggregatable: true, name: 'destination.bytes', searchable: true, type: 'number' },
-  { aggregatable: true, name: 'destination.domain', searchable: true, type: 'string' },
-  { aggregatable: true, name: 'destination.ip', searchable: true, type: 'ip' },
-  { aggregatable: true, name: 'destination.port', searchable: true, type: 'long' },
-  { aggregatable: true, name: 'source.ip', searchable: true, type: 'ip' },
-  { aggregatable: true, name: 'source.port', searchable: true, type: 'long' },
-  { aggregatable: true, name: 'event.end', searchable: true, type: 'date' },
-];
-
-export const mockBrowserFields: BrowserFields = {
-  agent: {
-    fields: {
-      'agent.ephemeral_id': {
-        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: ['auditbeat', 'filebeat', 'packetbeat'],
-        name: 'agent.ephemeral_id',
-        searchable: true,
-        type: 'string',
-      },
-      'agent.hostname': {
-        aggregatable: true,
-        category: 'agent',
-        description: null,
-        example: null,
-        format: '',
-        indexes: ['auditbeat', 'filebeat', 'packetbeat'],
-        name: 'agent.hostname',
-        searchable: true,
-        type: 'string',
-      },
-      'agent.id': {
-        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: ['auditbeat', 'filebeat', 'packetbeat'],
-        name: 'agent.id',
-        searchable: true,
-        type: 'string',
-      },
-      'agent.name': {
-        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: ['auditbeat', 'filebeat', 'packetbeat'],
-        name: 'agent.name',
-        searchable: true,
-        type: 'string',
-      },
-    },
-  },
-  auditd: {
-    fields: {
-      'auditd.data.a0': {
-        aggregatable: true,
-        category: 'auditd',
-        description: null,
-        example: null,
-        format: '',
-        indexes: ['auditbeat'],
-        name: 'auditd.data.a0',
-        searchable: true,
-        type: 'string',
-      },
-      'auditd.data.a1': {
-        aggregatable: true,
-        category: 'auditd',
-        description: null,
-        example: null,
-        format: '',
-        indexes: ['auditbeat'],
-        name: 'auditd.data.a1',
-        searchable: true,
-        type: 'string',
-      },
-      'auditd.data.a2': {
-        aggregatable: true,
-        category: 'auditd',
-        description: null,
-        example: null,
-        format: '',
-        indexes: ['auditbeat'],
-        name: 'auditd.data.a2',
-        searchable: true,
-        type: 'string',
-      },
-    },
-  },
-  base: {
-    fields: {
-      '@timestamp': {
-        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: ['auditbeat', 'filebeat', 'packetbeat'],
-        name: '@timestamp',
-        searchable: true,
-        type: 'date',
-      },
-    },
-  },
-  client: {
-    fields: {
-      'client.address': {
-        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: ['auditbeat', 'filebeat', 'packetbeat'],
-        name: 'client.address',
-        searchable: true,
-        type: 'string',
-      },
-      'client.bytes': {
-        aggregatable: true,
-        category: 'client',
-        description: 'Bytes sent from the client to the server.',
-        example: '184',
-        format: '',
-        indexes: ['auditbeat', 'filebeat', 'packetbeat'],
-        name: 'client.bytes',
-        searchable: true,
-        type: 'number',
-      },
-      'client.domain': {
-        aggregatable: true,
-        category: 'client',
-        description: 'Client domain.',
-        example: null,
-        format: '',
-        indexes: ['auditbeat', 'filebeat', 'packetbeat'],
-        name: 'client.domain',
-        searchable: true,
-        type: 'string',
-      },
-      'client.geo.country_iso_code': {
-        aggregatable: true,
-        category: 'client',
-        description: 'Country ISO code.',
-        example: 'CA',
-        format: '',
-        indexes: ['auditbeat', 'filebeat', 'packetbeat'],
-        name: 'client.geo.country_iso_code',
-        searchable: true,
-        type: 'string',
-      },
-    },
-  },
-  cloud: {
-    fields: {
-      'cloud.account.id': {
-        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: ['auditbeat', 'filebeat', 'packetbeat'],
-        name: 'cloud.account.id',
-        searchable: true,
-        type: 'string',
-      },
-      'cloud.availability_zone': {
-        aggregatable: true,
-        category: 'cloud',
-        description: 'Availability zone in which this host is running.',
-        example: 'us-east-1c',
-        format: '',
-        indexes: ['auditbeat', 'filebeat', 'packetbeat'],
-        name: 'cloud.availability_zone',
-        searchable: true,
-        type: 'string',
-      },
-    },
-  },
-  container: {
-    fields: {
-      'container.id': {
-        aggregatable: true,
-        category: 'container',
-        description: 'Unique container id.',
-        example: null,
-        format: '',
-        indexes: ['auditbeat', 'filebeat', 'packetbeat'],
-        name: 'container.id',
-        searchable: true,
-        type: 'string',
-      },
-      'container.image.name': {
-        aggregatable: true,
-        category: 'container',
-        description: 'Name of the image the container was built on.',
-        example: null,
-        format: '',
-        indexes: ['auditbeat', 'filebeat', 'packetbeat'],
-        name: 'container.image.name',
-        searchable: true,
-        type: 'string',
-      },
-      'container.image.tag': {
-        aggregatable: true,
-        category: 'container',
-        description: 'Container image tag.',
-        example: null,
-        format: '',
-        indexes: ['auditbeat', 'filebeat', 'packetbeat'],
-        name: 'container.image.tag',
-        searchable: true,
-        type: 'string',
-      },
-    },
-  },
-  destination: {
-    fields: {
-      'destination.address': {
-        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: ['auditbeat', 'filebeat', 'packetbeat'],
-        name: 'destination.address',
-        searchable: true,
-        type: 'string',
-      },
-      'destination.bytes': {
-        aggregatable: true,
-        category: 'destination',
-        description: 'Bytes sent from the destination to the source.',
-        example: '184',
-        format: '',
-        indexes: ['auditbeat', 'filebeat', 'packetbeat'],
-        name: 'destination.bytes',
-        searchable: true,
-        type: 'number',
-      },
-      'destination.domain': {
-        aggregatable: true,
-        category: 'destination',
-        description: 'Destination domain.',
-        example: null,
-        format: '',
-        indexes: ['auditbeat', 'filebeat', 'packetbeat'],
-        name: 'destination.domain',
-        searchable: true,
-        type: 'string',
-      },
-      'destination.ip': {
-        aggregatable: true,
-        category: 'destination',
-        description:
-          'IP address of the destination. Can be one or multiple IPv4 or IPv6 addresses.',
-        example: '',
-        format: '',
-        indexes: ['auditbeat', 'filebeat', 'packetbeat'],
-        name: 'destination.ip',
-        searchable: true,
-        type: 'ip',
-      },
-      'destination.port': {
-        aggregatable: true,
-        category: 'destination',
-        description: 'Port of the destination.',
-        example: '',
-        format: '',
-        indexes: ['auditbeat', 'filebeat', 'packetbeat'],
-        name: 'destination.port',
-        searchable: true,
-        type: 'long',
-      },
-    },
-  },
-  event: {
-    fields: {
-      'event.end': {
-        category: 'event',
-        description:
-          'event.end contains the date when the event ended or when the activity was last observed.',
-        example: null,
-        format: '',
-        indexes: DEFAULT_INDEX_PATTERN,
-        name: 'event.end',
-        searchable: true,
-        type: 'date',
-        aggregatable: true,
-      },
-    },
-  },
-  source: {
-    fields: {
-      'source.ip': {
-        aggregatable: true,
-        category: 'source',
-        description: 'IP address of the source. Can be one or multiple IPv4 or IPv6 addresses.',
-        example: '',
-        format: '',
-        indexes: ['auditbeat', 'filebeat', 'packetbeat'],
-        name: 'source.ip',
-        searchable: true,
-        type: 'ip',
-      },
-      'source.port': {
-        aggregatable: true,
-        category: 'source',
-        description: 'Port of the source.',
-        example: '',
-        format: '',
-        indexes: ['auditbeat', 'filebeat', 'packetbeat'],
-        name: 'source.port',
-        searchable: true,
-        type: 'long',
-      },
-    },
-  },
-};
diff --git a/x-pack/plugins/siem/public/containers/timeline/all/index.tsx b/x-pack/plugins/siem/public/containers/timeline/all/index.tsx
deleted file mode 100644
index e1d1edc1a8cecb..00000000000000
--- a/x-pack/plugins/siem/public/containers/timeline/all/index.tsx
+++ /dev/null
@@ -1,184 +0,0 @@
-/*
- * 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 { getOr, noop } from 'lodash/fp';
-import memoizeOne from 'memoize-one';
-import { useCallback, useState, useEffect } from 'react';
-import { useDispatch } from 'react-redux';
-
-import { OpenTimelineResult } from '../../../components/open_timeline/types';
-import { errorToToaster, useStateToaster } from '../../../components/toasters';
-import {
-  GetAllTimeline,
-  PageInfoTimeline,
-  SortTimeline,
-  TimelineResult,
-} from '../../../graphql/types';
-import { inputsActions } from '../../../store/inputs';
-import { useApolloClient } from '../../../utils/apollo_context';
-
-import { allTimelinesQuery } from './index.gql_query';
-import * as i18n from '../../../pages/timelines/translations';
-import { TimelineTypeLiteralWithNull } from '../../../../common/types/timeline';
-
-export interface AllTimelinesArgs {
-  fetchAllTimeline: ({
-    onlyUserFavorite,
-    pageInfo,
-    search,
-    sort,
-    timelineType,
-  }: AllTimelinesVariables) => void;
-  timelines: OpenTimelineResult[];
-  loading: boolean;
-  totalCount: number;
-}
-
-export interface AllTimelinesVariables {
-  onlyUserFavorite: boolean;
-  pageInfo: PageInfoTimeline;
-  search: string;
-  sort: SortTimeline;
-  timelineType: TimelineTypeLiteralWithNull;
-}
-
-export const ALL_TIMELINE_QUERY_ID = 'FETCH_ALL_TIMELINES';
-
-export const getAllTimeline = memoizeOne(
-  (variables: string, timelines: TimelineResult[]): OpenTimelineResult[] =>
-    timelines.map(timeline => ({
-      created: timeline.created,
-      description: timeline.description,
-      eventIdToNoteIds:
-        timeline.eventIdToNoteIds != null
-          ? timeline.eventIdToNoteIds.reduce((acc, note) => {
-              if (note.eventId != null) {
-                const notes = getOr([], note.eventId, acc);
-                return { ...acc, [note.eventId]: [...notes, note.noteId] };
-              }
-              return acc;
-            }, {})
-          : null,
-      favorite: timeline.favorite,
-      noteIds: timeline.noteIds,
-      notes:
-        timeline.notes != null
-          ? timeline.notes.map(note => ({ ...note, savedObjectId: note.noteId }))
-          : null,
-      pinnedEventIds:
-        timeline.pinnedEventIds != null
-          ? timeline.pinnedEventIds.reduce(
-              (acc, pinnedEventId) => ({ ...acc, [pinnedEventId]: true }),
-              {}
-            )
-          : null,
-      savedObjectId: timeline.savedObjectId,
-      title: timeline.title,
-      updated: timeline.updated,
-      updatedBy: timeline.updatedBy,
-    }))
-);
-
-export const useGetAllTimeline = (): AllTimelinesArgs => {
-  const dispatch = useDispatch();
-  const apolloClient = useApolloClient();
-  const [, dispatchToaster] = useStateToaster();
-  const [allTimelines, setAllTimelines] = useState<AllTimelinesArgs>({
-    fetchAllTimeline: noop,
-    loading: false,
-    totalCount: 0,
-    timelines: [],
-  });
-
-  const fetchAllTimeline = useCallback(
-    async ({ onlyUserFavorite, pageInfo, search, sort, timelineType }: AllTimelinesVariables) => {
-      let didCancel = false;
-      const abortCtrl = new AbortController();
-
-      const fetchData = async () => {
-        try {
-          if (apolloClient != null) {
-            setAllTimelines({
-              ...allTimelines,
-              loading: true,
-            });
-
-            const variables: GetAllTimeline.Variables = {
-              onlyUserFavorite,
-              pageInfo,
-              search,
-              sort,
-              timelineType,
-            };
-            const response = await apolloClient.query<
-              GetAllTimeline.Query,
-              GetAllTimeline.Variables
-            >({
-              query: allTimelinesQuery,
-              fetchPolicy: 'network-only',
-              variables,
-              context: {
-                fetchOptions: {
-                  abortSignal: abortCtrl.signal,
-                },
-              },
-            });
-            const totalCount = response?.data?.getAllTimeline?.totalCount ?? 0;
-            const timelines = response?.data?.getAllTimeline?.timeline ?? [];
-            if (!didCancel) {
-              dispatch(
-                inputsActions.setQuery({
-                  inputId: 'global',
-                  id: ALL_TIMELINE_QUERY_ID,
-                  loading: false,
-                  refetch: fetchData,
-                  inspect: null,
-                })
-              );
-              setAllTimelines({
-                fetchAllTimeline,
-                loading: false,
-                totalCount,
-                timelines: getAllTimeline(JSON.stringify(variables), timelines as TimelineResult[]),
-              });
-            }
-          }
-        } catch (error) {
-          if (!didCancel) {
-            errorToToaster({
-              title: i18n.ERROR_FETCHING_TIMELINES_TITLE,
-              error: error.body && error.body.message ? new Error(error.body.message) : error,
-              dispatchToaster,
-            });
-            setAllTimelines({
-              fetchAllTimeline,
-              loading: false,
-              totalCount: 0,
-              timelines: [],
-            });
-          }
-        }
-      };
-      fetchData();
-      return () => {
-        didCancel = true;
-        abortCtrl.abort();
-      };
-    },
-    [apolloClient, allTimelines]
-  );
-
-  useEffect(() => {
-    return () => {
-      dispatch(inputsActions.deleteOneQuery({ inputId: 'global', id: ALL_TIMELINE_QUERY_ID }));
-    };
-  }, [dispatch]);
-
-  return {
-    ...allTimelines,
-    fetchAllTimeline,
-  };
-};
diff --git a/x-pack/plugins/siem/public/containers/timeline/api.ts b/x-pack/plugins/siem/public/containers/timeline/api.ts
deleted file mode 100644
index 023e2e6af9f88e..00000000000000
--- a/x-pack/plugins/siem/public/containers/timeline/api.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-/*
- * 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 { fold } from 'fp-ts/lib/Either';
-import { identity } from 'fp-ts/lib/function';
-import { pipe } from 'fp-ts/lib/pipeable';
-
-import { throwErrors } from '../../../../case/common/api';
-import {
-  SavedTimeline,
-  TimelineResponse,
-  TimelineResponseType,
-} from '../../../common/types/timeline';
-import { TIMELINE_URL, TIMELINE_IMPORT_URL, TIMELINE_EXPORT_URL } from '../../../common/constants';
-
-import { KibanaServices } from '../../lib/kibana';
-import { ExportSelectedData } from '../../components/generic_downloader';
-
-import { createToasterPlainError } from '../case/utils';
-import { ImportDataProps, ImportDataResponse } from '../detection_engine/rules';
-
-interface RequestPostTimeline {
-  timeline: SavedTimeline;
-  signal?: AbortSignal;
-}
-
-interface RequestPatchTimeline<T = string> extends RequestPostTimeline {
-  timelineId: T;
-  version: T;
-}
-
-type RequestPersistTimeline = RequestPostTimeline & Partial<RequestPatchTimeline<null | string>>;
-
-const decodeTimelineResponse = (respTimeline?: TimelineResponse) =>
-  pipe(
-    TimelineResponseType.decode(respTimeline),
-    fold(throwErrors(createToasterPlainError), identity)
-  );
-
-const postTimeline = async ({ timeline }: RequestPostTimeline): Promise<TimelineResponse> => {
-  const response = await KibanaServices.get().http.post<TimelineResponse>(TIMELINE_URL, {
-    method: 'POST',
-    body: JSON.stringify({ timeline }),
-  });
-
-  return decodeTimelineResponse(response);
-};
-
-const patchTimeline = async ({
-  timelineId,
-  timeline,
-  version,
-}: RequestPatchTimeline): Promise<TimelineResponse> => {
-  const response = await KibanaServices.get().http.patch<TimelineResponse>(TIMELINE_URL, {
-    method: 'PATCH',
-    body: JSON.stringify({ timeline, timelineId, version }),
-  });
-
-  return decodeTimelineResponse(response);
-};
-
-export const persistTimeline = async ({
-  timelineId,
-  timeline,
-  version,
-}: RequestPersistTimeline): Promise<TimelineResponse> => {
-  if (timelineId == null) {
-    return postTimeline({ timeline });
-  }
-  return patchTimeline({
-    timelineId,
-    timeline,
-    version: version ?? '',
-  });
-};
-
-export const importTimelines = async ({
-  fileToImport,
-  overwrite = false,
-  signal,
-}: ImportDataProps): Promise<ImportDataResponse> => {
-  const formData = new FormData();
-  formData.append('file', fileToImport);
-
-  return KibanaServices.get().http.fetch<ImportDataResponse>(`${TIMELINE_IMPORT_URL}`, {
-    method: 'POST',
-    headers: { 'Content-Type': undefined },
-    query: { overwrite },
-    body: formData,
-    signal,
-  });
-};
-
-export const exportSelectedTimeline: ExportSelectedData = async ({
-  excludeExportDetails = false,
-  filename = `timelines_export.ndjson`,
-  ids = [],
-  signal,
-}): Promise<Blob> => {
-  const body = ids.length > 0 ? JSON.stringify({ ids }) : undefined;
-  const response = await KibanaServices.get().http.fetch<Blob>(`${TIMELINE_EXPORT_URL}`, {
-    method: 'POST',
-    body,
-    query: {
-      exclude_export_details: excludeExportDetails,
-      file_name: filename,
-    },
-    signal,
-    asResponse: true,
-  });
-
-  return response.body!;
-};
diff --git a/x-pack/plugins/siem/public/containers/timeline/details/index.tsx b/x-pack/plugins/siem/public/containers/timeline/details/index.tsx
deleted file mode 100644
index cf1b8954307e7b..00000000000000
--- a/x-pack/plugins/siem/public/containers/timeline/details/index.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-/*
- * 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 { getOr } from 'lodash/fp';
-import memoizeOne from 'memoize-one';
-import React from 'react';
-import { Query } from 'react-apollo';
-
-import { DEFAULT_INDEX_KEY } from '../../../../common/constants';
-import { DetailItem, GetTimelineDetailsQuery } from '../../../graphql/types';
-import { useUiSetting } from '../../../lib/kibana';
-
-import { timelineDetailsQuery } from './index.gql_query';
-
-export interface EventsArgs {
-  detailsData: DetailItem[] | null;
-  loading: boolean;
-}
-
-export interface TimelineDetailsProps {
-  children?: (args: EventsArgs) => React.ReactElement;
-  indexName: string;
-  eventId: string;
-  executeQuery: boolean;
-  sourceId: string;
-}
-
-const getDetailsEvent = memoizeOne(
-  (variables: string, detail: DetailItem[]): DetailItem[] => detail
-);
-
-const TimelineDetailsQueryComponent: React.FC<TimelineDetailsProps> = ({
-  children,
-  indexName,
-  eventId,
-  executeQuery,
-  sourceId,
-}) => {
-  const variables: GetTimelineDetailsQuery.Variables = {
-    sourceId,
-    indexName,
-    eventId,
-    defaultIndex: useUiSetting<string[]>(DEFAULT_INDEX_KEY),
-  };
-  return executeQuery ? (
-    <Query<GetTimelineDetailsQuery.Query, GetTimelineDetailsQuery.Variables>
-      query={timelineDetailsQuery}
-      fetchPolicy="network-only"
-      notifyOnNetworkStatusChange
-      variables={variables}
-    >
-      {({ data, loading, refetch }) =>
-        children!({
-          loading,
-          detailsData: getDetailsEvent(
-            JSON.stringify(variables),
-            getOr([], 'source.TimelineDetails.data', data)
-          ),
-        })
-      }
-    </Query>
-  ) : (
-    children!({ loading: false, detailsData: null })
-  );
-};
-
-export const TimelineDetailsQuery = React.memo(TimelineDetailsQueryComponent);
diff --git a/x-pack/plugins/siem/public/containers/timeline/index.tsx b/x-pack/plugins/siem/public/containers/timeline/index.tsx
deleted file mode 100644
index 6e09e124696b6f..00000000000000
--- a/x-pack/plugins/siem/public/containers/timeline/index.tsx
+++ /dev/null
@@ -1,199 +0,0 @@
-/*
- * 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 { getOr, uniqBy } from 'lodash/fp';
-import memoizeOne from 'memoize-one';
-import React from 'react';
-import { Query } from 'react-apollo';
-import { compose, Dispatch } from 'redux';
-import { connect, ConnectedProps } from 'react-redux';
-
-import { DEFAULT_INDEX_KEY } from '../../../common/constants';
-import { IIndexPattern } from '../../../../../../src/plugins/data/common/index_patterns';
-import {
-  GetTimelineQuery,
-  PageInfo,
-  SortField,
-  TimelineEdges,
-  TimelineItem,
-} from '../../graphql/types';
-import { inputsModel, inputsSelectors, State } from '../../store';
-import { withKibana, WithKibanaProps } from '../../lib/kibana';
-import { createFilter } from '../helpers';
-import { QueryTemplate, QueryTemplateProps } from '../query_template';
-import { EventType } from '../../store/timeline/model';
-import { timelineQuery } from './index.gql_query';
-import { timelineActions } from '../../store/timeline';
-import { SIGNALS_PAGE_TIMELINE_ID } from '../../pages/detection_engine/components/signals';
-
-export interface TimelineArgs {
-  events: TimelineItem[];
-  id: string;
-  inspect: inputsModel.InspectQuery;
-  loading: boolean;
-  loadMore: (cursor: string, tieBreaker: string) => void;
-  pageInfo: PageInfo;
-  refetch: inputsModel.Refetch;
-  totalCount: number;
-  getUpdatedAt: () => number;
-}
-
-export interface CustomReduxProps {
-  clearSignalsState: ({ id }: { id?: string }) => void;
-}
-
-export interface OwnProps extends QueryTemplateProps {
-  children?: (args: TimelineArgs) => React.ReactNode;
-  eventType?: EventType;
-  id: string;
-  indexPattern?: IIndexPattern;
-  indexToAdd?: string[];
-  limit: number;
-  sortField: SortField;
-  fields: string[];
-}
-
-type TimelineQueryProps = OwnProps & PropsFromRedux & WithKibanaProps & CustomReduxProps;
-
-class TimelineQueryComponent extends QueryTemplate<
-  TimelineQueryProps,
-  GetTimelineQuery.Query,
-  GetTimelineQuery.Variables
-> {
-  private updatedDate: number = Date.now();
-  private memoizedTimelineEvents: (variables: string, events: TimelineEdges[]) => TimelineItem[];
-
-  constructor(props: TimelineQueryProps) {
-    super(props);
-    this.memoizedTimelineEvents = memoizeOne(this.getTimelineEvents);
-  }
-
-  public render() {
-    const {
-      children,
-      clearSignalsState,
-      eventType = 'raw',
-      id,
-      indexPattern,
-      indexToAdd = [],
-      isInspected,
-      kibana,
-      limit,
-      fields,
-      filterQuery,
-      sourceId,
-      sortField,
-    } = this.props;
-    const defaultKibanaIndex = kibana.services.uiSettings.get<string[]>(DEFAULT_INDEX_KEY);
-    const defaultIndex =
-      indexPattern == null || (indexPattern != null && indexPattern.title === '')
-        ? [
-            ...(['all', 'raw'].includes(eventType) ? defaultKibanaIndex : []),
-            ...(['all', 'signal'].includes(eventType) ? indexToAdd : []),
-          ]
-        : indexPattern?.title.split(',') ?? [];
-    const variables: GetTimelineQuery.Variables = {
-      fieldRequested: fields,
-      filterQuery: createFilter(filterQuery),
-      sourceId,
-      pagination: { limit, cursor: null, tiebreaker: null },
-      sortField,
-      defaultIndex,
-      inspect: isInspected,
-    };
-
-    return (
-      <Query<GetTimelineQuery.Query, GetTimelineQuery.Variables>
-        query={timelineQuery}
-        fetchPolicy="network-only"
-        notifyOnNetworkStatusChange
-        variables={variables}
-      >
-        {({ data, loading, fetchMore, refetch }) => {
-          this.setRefetch(refetch);
-          this.setExecuteBeforeRefetch(clearSignalsState);
-          this.setExecuteBeforeFetchMore(clearSignalsState);
-
-          const timelineEdges = getOr([], 'source.Timeline.edges', data);
-          this.setFetchMore(fetchMore);
-          this.setFetchMoreOptions((newCursor: string, tiebreaker?: string) => ({
-            variables: {
-              pagination: {
-                cursor: newCursor,
-                tiebreaker,
-                limit,
-              },
-            },
-            updateQuery: (prev, { fetchMoreResult }) => {
-              if (!fetchMoreResult) {
-                return prev;
-              }
-              return {
-                ...fetchMoreResult,
-                source: {
-                  ...fetchMoreResult.source,
-                  Timeline: {
-                    ...fetchMoreResult.source.Timeline,
-                    edges: uniqBy('node._id', [
-                      ...prev.source.Timeline.edges,
-                      ...fetchMoreResult.source.Timeline.edges,
-                    ]),
-                  },
-                },
-              };
-            },
-          }));
-          this.updatedDate = Date.now();
-          return children!({
-            id,
-            inspect: getOr(null, 'source.Timeline.inspect', data),
-            refetch: this.wrappedRefetch,
-            loading,
-            totalCount: getOr(0, 'source.Timeline.totalCount', data),
-            pageInfo: getOr({}, 'source.Timeline.pageInfo', data),
-            events: this.memoizedTimelineEvents(JSON.stringify(variables), timelineEdges),
-            loadMore: this.wrappedLoadMore,
-            getUpdatedAt: this.getUpdatedAt,
-          });
-        }}
-      </Query>
-    );
-  }
-
-  private getUpdatedAt = () => this.updatedDate;
-
-  private getTimelineEvents = (variables: string, timelineEdges: TimelineEdges[]): TimelineItem[] =>
-    timelineEdges.map((e: TimelineEdges) => e.node);
-}
-
-const makeMapStateToProps = () => {
-  const getQuery = inputsSelectors.timelineQueryByIdSelector();
-  const mapStateToProps = (state: State, { id }: OwnProps) => {
-    const { isInspected } = getQuery(state, id);
-    return {
-      isInspected,
-    };
-  };
-  return mapStateToProps;
-};
-
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  clearSignalsState: ({ id }: { id?: string }) => {
-    if (id != null && id === SIGNALS_PAGE_TIMELINE_ID) {
-      dispatch(timelineActions.clearEventsLoading({ id }));
-      dispatch(timelineActions.clearEventsDeleted({ id }));
-    }
-  },
-});
-
-const connector = connect(makeMapStateToProps, mapDispatchToProps);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-export const TimelineQuery = compose<React.ComponentClass<OwnProps>>(
-  connector,
-  withKibana
-)(TimelineQueryComponent);
diff --git a/x-pack/plugins/siem/public/containers/tls/index.tsx b/x-pack/plugins/siem/public/containers/tls/index.tsx
deleted file mode 100644
index 3738355c8846eb..00000000000000
--- a/x-pack/plugins/siem/public/containers/tls/index.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-/*
- * 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 { getOr } from 'lodash/fp';
-import React from 'react';
-import { Query } from 'react-apollo';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-
-import { DEFAULT_INDEX_KEY } from '../../../common/constants';
-import {
-  PageInfoPaginated,
-  TlsEdges,
-  TlsSortField,
-  GetTlsQuery,
-  FlowTargetSourceDest,
-} from '../../graphql/types';
-import { inputsModel, networkModel, networkSelectors, State, inputsSelectors } from '../../store';
-import { withKibana, WithKibanaProps } from '../../lib/kibana';
-import { createFilter, getDefaultFetchPolicy } from '../helpers';
-import { generateTablePaginationOptions } from '../../components/paginated_table/helpers';
-import { QueryTemplatePaginated, QueryTemplatePaginatedProps } from '../query_template_paginated';
-import { tlsQuery } from './index.gql_query';
-
-const ID = 'tlsQuery';
-
-export interface TlsArgs {
-  id: string;
-  inspect: inputsModel.InspectQuery;
-  isInspected: boolean;
-  loading: boolean;
-  loadPage: (newActivePage: number) => void;
-  pageInfo: PageInfoPaginated;
-  refetch: inputsModel.Refetch;
-  tls: TlsEdges[];
-  totalCount: number;
-}
-
-export interface OwnProps extends QueryTemplatePaginatedProps {
-  children: (args: TlsArgs) => React.ReactNode;
-  flowTarget: FlowTargetSourceDest;
-  ip: string;
-  type: networkModel.NetworkType;
-}
-
-export interface TlsComponentReduxProps {
-  activePage: number;
-  isInspected: boolean;
-  limit: number;
-  sort: TlsSortField;
-}
-
-type TlsProps = OwnProps & TlsComponentReduxProps & WithKibanaProps;
-
-class TlsComponentQuery extends QueryTemplatePaginated<
-  TlsProps,
-  GetTlsQuery.Query,
-  GetTlsQuery.Variables
-> {
-  public render() {
-    const {
-      activePage,
-      children,
-      endDate,
-      filterQuery,
-      flowTarget,
-      id = ID,
-      ip,
-      isInspected,
-      kibana,
-      limit,
-      skip,
-      sourceId,
-      startDate,
-      sort,
-    } = this.props;
-    const variables: GetTlsQuery.Variables = {
-      defaultIndex: kibana.services.uiSettings.get<string[]>(DEFAULT_INDEX_KEY),
-      filterQuery: createFilter(filterQuery),
-      flowTarget,
-      inspect: isInspected,
-      ip,
-      pagination: generateTablePaginationOptions(activePage, limit),
-      sort,
-      sourceId,
-      timerange: {
-        interval: '12h',
-        from: startDate ? startDate : 0,
-        to: endDate ? endDate : Date.now(),
-      },
-    };
-    return (
-      <Query<GetTlsQuery.Query, GetTlsQuery.Variables>
-        query={tlsQuery}
-        fetchPolicy={getDefaultFetchPolicy()}
-        notifyOnNetworkStatusChange
-        skip={skip}
-        variables={variables}
-      >
-        {({ data, loading, fetchMore, networkStatus, refetch }) => {
-          const tls = getOr([], 'source.Tls.edges', data);
-          this.setFetchMore(fetchMore);
-          this.setFetchMoreOptions((newActivePage: number) => ({
-            variables: {
-              pagination: generateTablePaginationOptions(newActivePage, limit),
-            },
-            updateQuery: (prev, { fetchMoreResult }) => {
-              if (!fetchMoreResult) {
-                return prev;
-              }
-              return {
-                ...fetchMoreResult,
-                source: {
-                  ...fetchMoreResult.source,
-                  Tls: {
-                    ...fetchMoreResult.source.Tls,
-                    edges: [...fetchMoreResult.source.Tls.edges],
-                  },
-                },
-              };
-            },
-          }));
-          const isLoading = this.isItAValidLoading(loading, variables, networkStatus);
-          return children({
-            id,
-            inspect: getOr(null, 'source.Tls.inspect', data),
-            isInspected,
-            loading: isLoading,
-            loadPage: this.wrappedLoadMore,
-            pageInfo: getOr({}, 'source.Tls.pageInfo', data),
-            refetch: this.memoizedRefetchQuery(variables, limit, refetch),
-            tls,
-            totalCount: getOr(-1, 'source.Tls.totalCount', data),
-          });
-        }}
-      </Query>
-    );
-  }
-}
-
-const makeMapStateToProps = () => {
-  const getTlsSelector = networkSelectors.tlsSelector();
-  const getQuery = inputsSelectors.globalQueryByIdSelector();
-  return (state: State, { flowTarget, id = ID, type }: OwnProps) => {
-    const { isInspected } = getQuery(state, id);
-    return {
-      ...getTlsSelector(state, type, flowTarget),
-      isInspected,
-    };
-  };
-};
-
-export const TlsQuery = compose<React.ComponentClass<OwnProps>>(
-  connect(makeMapStateToProps),
-  withKibana
-)(TlsComponentQuery);
diff --git a/x-pack/plugins/siem/public/containers/uncommon_processes/index.tsx b/x-pack/plugins/siem/public/containers/uncommon_processes/index.tsx
deleted file mode 100644
index 0a2ce67d9be805..00000000000000
--- a/x-pack/plugins/siem/public/containers/uncommon_processes/index.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-/*
- * 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 { getOr } from 'lodash/fp';
-import React from 'react';
-import { Query } from 'react-apollo';
-import { connect, ConnectedProps } from 'react-redux';
-import { compose } from 'redux';
-
-import { DEFAULT_INDEX_KEY } from '../../../common/constants';
-import {
-  GetUncommonProcessesQuery,
-  PageInfoPaginated,
-  UncommonProcessesEdges,
-} from '../../graphql/types';
-import { hostsModel, hostsSelectors, inputsModel, State, inputsSelectors } from '../../store';
-import { withKibana, WithKibanaProps } from '../../lib/kibana';
-import { generateTablePaginationOptions } from '../../components/paginated_table/helpers';
-import { createFilter, getDefaultFetchPolicy } from '../helpers';
-import { QueryTemplatePaginated, QueryTemplatePaginatedProps } from '../query_template_paginated';
-
-import { uncommonProcessesQuery } from './index.gql_query';
-
-const ID = 'uncommonProcessesQuery';
-
-export interface UncommonProcessesArgs {
-  id: string;
-  inspect: inputsModel.InspectQuery;
-  isInspected: boolean;
-  loading: boolean;
-  loadPage: (newActivePage: number) => void;
-  pageInfo: PageInfoPaginated;
-  refetch: inputsModel.Refetch;
-  totalCount: number;
-  uncommonProcesses: UncommonProcessesEdges[];
-}
-
-export interface OwnProps extends QueryTemplatePaginatedProps {
-  children: (args: UncommonProcessesArgs) => React.ReactNode;
-  type: hostsModel.HostsType;
-}
-
-type UncommonProcessesProps = OwnProps & PropsFromRedux & WithKibanaProps;
-
-class UncommonProcessesComponentQuery extends QueryTemplatePaginated<
-  UncommonProcessesProps,
-  GetUncommonProcessesQuery.Query,
-  GetUncommonProcessesQuery.Variables
-> {
-  public render() {
-    const {
-      activePage,
-      children,
-      endDate,
-      filterQuery,
-      id = ID,
-      isInspected,
-      kibana,
-      limit,
-      skip,
-      sourceId,
-      startDate,
-    } = this.props;
-    const variables: GetUncommonProcessesQuery.Variables = {
-      defaultIndex: kibana.services.uiSettings.get<string[]>(DEFAULT_INDEX_KEY),
-      filterQuery: createFilter(filterQuery),
-      inspect: isInspected,
-      pagination: generateTablePaginationOptions(activePage, limit),
-      sourceId,
-      timerange: {
-        interval: '12h',
-        from: startDate!,
-        to: endDate!,
-      },
-    };
-    return (
-      <Query<GetUncommonProcessesQuery.Query, GetUncommonProcessesQuery.Variables>
-        query={uncommonProcessesQuery}
-        fetchPolicy={getDefaultFetchPolicy()}
-        notifyOnNetworkStatusChange
-        skip={skip}
-        variables={variables}
-      >
-        {({ data, loading, fetchMore, networkStatus, refetch }) => {
-          const uncommonProcesses = getOr([], 'source.UncommonProcesses.edges', data);
-          this.setFetchMore(fetchMore);
-          this.setFetchMoreOptions((newActivePage: number) => ({
-            variables: {
-              pagination: generateTablePaginationOptions(newActivePage, limit),
-            },
-            updateQuery: (prev, { fetchMoreResult }) => {
-              if (!fetchMoreResult) {
-                return prev;
-              }
-              return {
-                ...fetchMoreResult,
-                source: {
-                  ...fetchMoreResult.source,
-                  UncommonProcesses: {
-                    ...fetchMoreResult.source.UncommonProcesses,
-                    edges: [...fetchMoreResult.source.UncommonProcesses.edges],
-                  },
-                },
-              };
-            },
-          }));
-          const isLoading = this.isItAValidLoading(loading, variables, networkStatus);
-          return children({
-            id,
-            inspect: getOr(null, 'source.UncommonProcesses.inspect', data),
-            isInspected,
-            loading: isLoading,
-            loadPage: this.wrappedLoadMore,
-            pageInfo: getOr({}, 'source.UncommonProcesses.pageInfo', data),
-            refetch: this.memoizedRefetchQuery(variables, limit, refetch),
-            totalCount: getOr(-1, 'source.UncommonProcesses.totalCount', data),
-            uncommonProcesses,
-          });
-        }}
-      </Query>
-    );
-  }
-}
-
-const makeMapStateToProps = () => {
-  const getUncommonProcessesSelector = hostsSelectors.uncommonProcessesSelector();
-  const getQuery = inputsSelectors.globalQueryByIdSelector();
-  const mapStateToProps = (state: State, { type, id = ID }: OwnProps) => {
-    const { isInspected } = getQuery(state, id);
-    return {
-      ...getUncommonProcessesSelector(state, type),
-      isInspected,
-    };
-  };
-  return mapStateToProps;
-};
-
-const connector = connect(makeMapStateToProps);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-export const UncommonProcessesQuery = compose<React.ComponentClass<OwnProps>>(
-  connector,
-  withKibana
-)(UncommonProcessesComponentQuery);
diff --git a/x-pack/plugins/siem/public/containers/users/index.tsx b/x-pack/plugins/siem/public/containers/users/index.tsx
deleted file mode 100644
index 5f71449c524606..00000000000000
--- a/x-pack/plugins/siem/public/containers/users/index.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-/*
- * 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 { getOr } from 'lodash/fp';
-import React from 'react';
-import { Query } from 'react-apollo';
-import { connect, ConnectedProps } from 'react-redux';
-import { compose } from 'redux';
-
-import { DEFAULT_INDEX_KEY } from '../../../common/constants';
-import { GetUsersQuery, FlowTarget, PageInfoPaginated, UsersEdges } from '../../graphql/types';
-import { inputsModel, networkModel, networkSelectors, State, inputsSelectors } from '../../store';
-import { withKibana, WithKibanaProps } from '../../lib/kibana';
-import { createFilter, getDefaultFetchPolicy } from '../helpers';
-import { generateTablePaginationOptions } from '../../components/paginated_table/helpers';
-import { QueryTemplatePaginated, QueryTemplatePaginatedProps } from '../query_template_paginated';
-
-import { usersQuery } from './index.gql_query';
-
-const ID = 'usersQuery';
-
-export interface UsersArgs {
-  id: string;
-  inspect: inputsModel.InspectQuery;
-  isInspected: boolean;
-  loading: boolean;
-  loadPage: (newActivePage: number) => void;
-  pageInfo: PageInfoPaginated;
-  refetch: inputsModel.Refetch;
-  totalCount: number;
-  users: UsersEdges[];
-}
-
-export interface OwnProps extends QueryTemplatePaginatedProps {
-  children: (args: UsersArgs) => React.ReactNode;
-  flowTarget: FlowTarget;
-  ip: string;
-  type: networkModel.NetworkType;
-}
-
-type UsersProps = OwnProps & PropsFromRedux & WithKibanaProps;
-
-class UsersComponentQuery extends QueryTemplatePaginated<
-  UsersProps,
-  GetUsersQuery.Query,
-  GetUsersQuery.Variables
-> {
-  public render() {
-    const {
-      activePage,
-      children,
-      endDate,
-      filterQuery,
-      flowTarget,
-      id = ID,
-      ip,
-      isInspected,
-      kibana,
-      limit,
-      skip,
-      sourceId,
-      startDate,
-      sort,
-    } = this.props;
-    const variables: GetUsersQuery.Variables = {
-      defaultIndex: kibana.services.uiSettings.get<string[]>(DEFAULT_INDEX_KEY),
-      filterQuery: createFilter(filterQuery),
-      flowTarget,
-      inspect: isInspected,
-      ip,
-      pagination: generateTablePaginationOptions(activePage, limit),
-      sort,
-      sourceId,
-      timerange: {
-        interval: '12h',
-        from: startDate!,
-        to: endDate!,
-      },
-    };
-    return (
-      <Query<GetUsersQuery.Query, GetUsersQuery.Variables>
-        query={usersQuery}
-        fetchPolicy={getDefaultFetchPolicy()}
-        notifyOnNetworkStatusChange
-        skip={skip}
-        variables={variables}
-      >
-        {({ data, loading, fetchMore, networkStatus, refetch }) => {
-          const users = getOr([], `source.Users.edges`, data);
-          this.setFetchMore(fetchMore);
-          this.setFetchMoreOptions((newActivePage: number) => ({
-            variables: {
-              pagination: generateTablePaginationOptions(newActivePage, limit),
-            },
-            updateQuery: (prev, { fetchMoreResult }) => {
-              if (!fetchMoreResult) {
-                return prev;
-              }
-              return {
-                ...fetchMoreResult,
-                source: {
-                  ...fetchMoreResult.source,
-                  Users: {
-                    ...fetchMoreResult.source.Users,
-                    edges: [...fetchMoreResult.source.Users.edges],
-                  },
-                },
-              };
-            },
-          }));
-          const isLoading = this.isItAValidLoading(loading, variables, networkStatus);
-          return children({
-            id,
-            inspect: getOr(null, 'source.Users.inspect', data),
-            isInspected,
-            loading: isLoading,
-            loadPage: this.wrappedLoadMore,
-            pageInfo: getOr({}, 'source.Users.pageInfo', data),
-            refetch: this.memoizedRefetchQuery(variables, limit, refetch),
-            totalCount: getOr(-1, 'source.Users.totalCount', data),
-            users,
-          });
-        }}
-      </Query>
-    );
-  }
-}
-
-const makeMapStateToProps = () => {
-  const getUsersSelector = networkSelectors.usersSelector();
-  const getQuery = inputsSelectors.globalQueryByIdSelector();
-  const mapStateToProps = (state: State, { id = ID }: OwnProps) => {
-    const { isInspected } = getQuery(state, id);
-    return {
-      ...getUsersSelector(state),
-      isInspected,
-    };
-  };
-
-  return mapStateToProps;
-};
-
-const connector = connect(makeMapStateToProps);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-export const UsersQuery = compose<React.ComponentClass<OwnProps>>(
-  connector,
-  withKibana
-)(UsersComponentQuery);
diff --git a/x-pack/plugins/siem/public/hooks/types.ts b/x-pack/plugins/siem/public/hooks/types.ts
deleted file mode 100644
index 6527904964d000..00000000000000
--- a/x-pack/plugins/siem/public/hooks/types.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/*
- * 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 { SimpleSavedObject } from '../../../../../src/core/public';
-
-// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
-export type IndexPatternSavedObjectAttributes = { title: string };
-
-export type IndexPatternSavedObject = Pick<
-  SimpleSavedObject<IndexPatternSavedObjectAttributes>,
-  'type' | 'id' | 'attributes' | '_version'
->;
diff --git a/x-pack/plugins/siem/public/components/page/hosts/authentications_table/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/hosts/components/authentications_table/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/hosts/authentications_table/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/hosts/components/authentications_table/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/hosts/components/authentications_table/index.test.tsx b/x-pack/plugins/siem/public/hosts/components/authentications_table/index.test.tsx
new file mode 100644
index 00000000000000..2c39db2ab7340e
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/components/authentications_table/index.test.tsx
@@ -0,0 +1,85 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import { getOr } from 'lodash/fp';
+import React from 'react';
+import { Provider as ReduxStoreProvider } from 'react-redux';
+
+import { apolloClientObservable, mockGlobalState, SUB_PLUGINS_REDUCER } from '../../../common/mock';
+import { createStore, State } from '../../../common/store';
+import { hostsModel } from '../../store';
+import { mockData } from './mock';
+import * as i18n from './translations';
+import { AuthenticationTable, getAuthenticationColumnsCurated } from '.';
+
+describe('Authentication Table Component', () => {
+  const loadPage = jest.fn();
+  const state: State = mockGlobalState;
+
+  let store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable);
+
+  beforeEach(() => {
+    store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable);
+  });
+
+  describe('rendering', () => {
+    test('it renders the authentication table', () => {
+      const wrapper = shallow(
+        <ReduxStoreProvider store={store}>
+          <AuthenticationTable
+            data={mockData.Authentications.edges}
+            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.Authentications.pageInfo)}
+            id="authentication"
+            isInspect={false}
+            loading={false}
+            loadPage={loadPage}
+            showMorePagesIndicator={getOr(
+              false,
+              'showMorePagesIndicator',
+              mockData.Authentications.pageInfo
+            )}
+            totalCount={mockData.Authentications.totalCount}
+            type={hostsModel.HostsType.page}
+          />
+        </ReduxStoreProvider>
+      );
+
+      expect(wrapper.find('Connect(AuthenticationTableComponent)')).toMatchSnapshot();
+    });
+  });
+
+  describe('columns', () => {
+    test('on hosts page, we expect to get all columns', () => {
+      expect(getAuthenticationColumnsCurated(hostsModel.HostsType.page).length).toEqual(9);
+    });
+
+    test('on host details page, we expect to remove two columns', () => {
+      const columns = getAuthenticationColumnsCurated(hostsModel.HostsType.details);
+      expect(columns.length).toEqual(7);
+    });
+
+    test('on host details page, we should have Last Failed Destination column', () => {
+      const columns = getAuthenticationColumnsCurated(hostsModel.HostsType.page);
+      expect(columns.some(col => col.name === i18n.LAST_FAILED_DESTINATION)).toEqual(true);
+    });
+
+    test('on host details page, we should not have Last Failed Destination column', () => {
+      const columns = getAuthenticationColumnsCurated(hostsModel.HostsType.details);
+      expect(columns.some(col => col.name === i18n.LAST_FAILED_DESTINATION)).toEqual(false);
+    });
+
+    test('on host page, we should have Last Successful Destination column', () => {
+      const columns = getAuthenticationColumnsCurated(hostsModel.HostsType.page);
+      expect(columns.some(col => col.name === i18n.LAST_SUCCESSFUL_DESTINATION)).toEqual(true);
+    });
+
+    test('on host details page, we should not have Last Successful Destination column', () => {
+      const columns = getAuthenticationColumnsCurated(hostsModel.HostsType.details);
+      expect(columns.some(col => col.name === i18n.LAST_SUCCESSFUL_DESTINATION)).toEqual(false);
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/hosts/components/authentications_table/index.tsx b/x-pack/plugins/siem/public/hosts/components/authentications_table/index.tsx
new file mode 100644
index 00000000000000..ef28f268bb73a5
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/components/authentications_table/index.tsx
@@ -0,0 +1,349 @@
+/*
+ * 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.
+ */
+
+/* eslint-disable react/display-name */
+
+import { has } from 'lodash/fp';
+import React, { useCallback, useMemo } from 'react';
+import { connect, ConnectedProps } from 'react-redux';
+
+import { hostsActions, hostsModel, hostsSelectors } from '../../store';
+import { AuthenticationsEdges } from '../../../graphql/types';
+import { State } from '../../../common/store';
+import {
+  DragEffects,
+  DraggableWrapper,
+} from '../../../common/components/drag_and_drop/draggable_wrapper';
+import { escapeDataProviderId } from '../../../common/components/drag_and_drop/helpers';
+import { getEmptyTagValue } from '../../../common/components/empty_value';
+import { FormattedRelativePreferenceDate } from '../../../common/components/formatted_date';
+import { HostDetailsLink, IPDetailsLink } from '../../../common/components/links';
+import { Columns, ItemsPerRow, PaginatedTable } from '../../../common/components/paginated_table';
+import { IS_OPERATOR } from '../../../timelines/components/timeline/data_providers/data_provider';
+import { Provider } from '../../../timelines/components/timeline/data_providers/provider';
+
+import * as i18n from './translations';
+import { getRowItemDraggables } from '../../../common/components/tables/helpers';
+
+const tableType = hostsModel.HostsTableType.authentications;
+
+interface OwnProps {
+  data: AuthenticationsEdges[];
+  fakeTotalCount: number;
+  loading: boolean;
+  loadPage: (newActivePage: number) => void;
+  id: string;
+  isInspect: boolean;
+  showMorePagesIndicator: boolean;
+  totalCount: number;
+  type: hostsModel.HostsType;
+}
+
+export type AuthTableColumns = [
+  Columns<AuthenticationsEdges>,
+  Columns<AuthenticationsEdges>,
+  Columns<AuthenticationsEdges>,
+  Columns<AuthenticationsEdges>,
+  Columns<AuthenticationsEdges>,
+  Columns<AuthenticationsEdges>,
+  Columns<AuthenticationsEdges>,
+  Columns<AuthenticationsEdges>,
+  Columns<AuthenticationsEdges>
+];
+
+type AuthenticationTableProps = OwnProps & PropsFromRedux;
+
+const rowItems: ItemsPerRow[] = [
+  {
+    text: i18n.ROWS_5,
+    numberOfRow: 5,
+  },
+  {
+    text: i18n.ROWS_10,
+    numberOfRow: 10,
+  },
+];
+
+const AuthenticationTableComponent = React.memo<AuthenticationTableProps>(
+  ({
+    activePage,
+    data,
+    fakeTotalCount,
+    id,
+    isInspect,
+    limit,
+    loading,
+    loadPage,
+    showMorePagesIndicator,
+    totalCount,
+    type,
+    updateTableActivePage,
+    updateTableLimit,
+  }) => {
+    const updateLimitPagination = useCallback(
+      newLimit =>
+        updateTableLimit({
+          hostsType: type,
+          limit: newLimit,
+          tableType,
+        }),
+      [type, updateTableLimit]
+    );
+
+    const updateActivePage = useCallback(
+      newPage =>
+        updateTableActivePage({
+          activePage: newPage,
+          hostsType: type,
+          tableType,
+        }),
+      [type, updateTableActivePage]
+    );
+
+    const columns = useMemo(() => getAuthenticationColumnsCurated(type), [type]);
+
+    return (
+      <PaginatedTable
+        activePage={activePage}
+        columns={columns}
+        dataTestSubj={`table-${tableType}`}
+        headerCount={totalCount}
+        headerTitle={i18n.AUTHENTICATIONS}
+        headerUnit={i18n.UNIT(totalCount)}
+        id={id}
+        isInspect={isInspect}
+        itemsPerRow={rowItems}
+        limit={limit}
+        loading={loading}
+        loadPage={loadPage}
+        pageOfItems={data}
+        showMorePagesIndicator={showMorePagesIndicator}
+        totalCount={fakeTotalCount}
+        updateLimitPagination={updateLimitPagination}
+        updateActivePage={updateActivePage}
+      />
+    );
+  }
+);
+
+AuthenticationTableComponent.displayName = 'AuthenticationTableComponent';
+
+const makeMapStateToProps = () => {
+  const getAuthenticationsSelector = hostsSelectors.authenticationsSelector();
+  return (state: State, { type }: OwnProps) => {
+    return getAuthenticationsSelector(state, type);
+  };
+};
+
+const mapDispatchToProps = {
+  updateTableActivePage: hostsActions.updateTableActivePage,
+  updateTableLimit: hostsActions.updateTableLimit,
+};
+
+const connector = connect(makeMapStateToProps, mapDispatchToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export const AuthenticationTable = connector(AuthenticationTableComponent);
+
+const getAuthenticationColumns = (): AuthTableColumns => [
+  {
+    name: i18n.USER,
+    truncateText: false,
+    hideForMobile: false,
+    render: ({ node }) =>
+      getRowItemDraggables({
+        rowItems: node.user.name,
+        attrName: 'user.name',
+        idPrefix: `authentications-table-${node._id}-userName`,
+      }),
+  },
+  {
+    name: i18n.SUCCESSES,
+    truncateText: false,
+    hideForMobile: false,
+    render: ({ node }) => {
+      const id = escapeDataProviderId(
+        `authentications-table-${node._id}-node-successes-${node.successes}`
+      );
+      return (
+        <DraggableWrapper
+          key={id}
+          dataProvider={{
+            and: [],
+            enabled: true,
+            id,
+            name: 'authentication_success',
+            excluded: false,
+            kqlQuery: '',
+            queryMatch: {
+              field: 'event.type',
+              value: 'authentication_success',
+              operator: IS_OPERATOR,
+            },
+          }}
+          render={(dataProvider, _, snapshot) =>
+            snapshot.isDragging ? (
+              <DragEffects>
+                <Provider dataProvider={dataProvider} />
+              </DragEffects>
+            ) : (
+              node.successes
+            )
+          }
+        />
+      );
+    },
+    width: '8%',
+  },
+  {
+    name: i18n.FAILURES,
+    truncateText: false,
+    hideForMobile: false,
+    render: ({ node }) => {
+      const id = escapeDataProviderId(
+        `authentications-table-${node._id}-failures-${node.failures}`
+      );
+      return (
+        <DraggableWrapper
+          key={id}
+          dataProvider={{
+            and: [],
+            enabled: true,
+            id,
+            name: 'authentication_failure',
+            excluded: false,
+            kqlQuery: '',
+            queryMatch: {
+              field: 'event.type',
+              value: 'authentication_failure',
+              operator: IS_OPERATOR,
+            },
+          }}
+          render={(dataProvider, _, snapshot) =>
+            snapshot.isDragging ? (
+              <DragEffects>
+                <Provider dataProvider={dataProvider} />
+              </DragEffects>
+            ) : (
+              node.failures
+            )
+          }
+        />
+      );
+    },
+    width: '8%',
+  },
+  {
+    name: i18n.LAST_SUCCESSFUL_TIME,
+    truncateText: false,
+    hideForMobile: false,
+    render: ({ node }) =>
+      has('lastSuccess.timestamp', node) && node.lastSuccess!.timestamp != null ? (
+        <FormattedRelativePreferenceDate value={node.lastSuccess!.timestamp} />
+      ) : (
+        getEmptyTagValue()
+      ),
+  },
+  {
+    name: i18n.LAST_SUCCESSFUL_SOURCE,
+    truncateText: false,
+    hideForMobile: false,
+    render: ({ node }) =>
+      getRowItemDraggables({
+        rowItems:
+          node.lastSuccess != null &&
+          node.lastSuccess.source != null &&
+          node.lastSuccess.source.ip != null
+            ? node.lastSuccess.source.ip
+            : null,
+        attrName: 'source.ip',
+        idPrefix: `authentications-table-${node._id}-lastSuccessSource`,
+        render: item => <IPDetailsLink ip={item} />,
+      }),
+  },
+  {
+    name: i18n.LAST_SUCCESSFUL_DESTINATION,
+    truncateText: false,
+    hideForMobile: false,
+    render: ({ node }) =>
+      getRowItemDraggables({
+        rowItems:
+          node.lastSuccess != null &&
+          node.lastSuccess.host != null &&
+          node.lastSuccess.host.name != null
+            ? node.lastSuccess.host.name
+            : null,
+        attrName: 'host.name',
+        idPrefix: `authentications-table-${node._id}-lastSuccessfulDestination`,
+        render: item => <HostDetailsLink hostName={item} />,
+      }),
+  },
+  {
+    name: i18n.LAST_FAILED_TIME,
+    truncateText: false,
+    hideForMobile: false,
+    render: ({ node }) =>
+      has('lastFailure.timestamp', node) && node.lastFailure!.timestamp != null ? (
+        <FormattedRelativePreferenceDate value={node.lastFailure!.timestamp} />
+      ) : (
+        getEmptyTagValue()
+      ),
+  },
+  {
+    name: i18n.LAST_FAILED_SOURCE,
+    truncateText: false,
+    hideForMobile: false,
+    render: ({ node }) =>
+      getRowItemDraggables({
+        rowItems:
+          node.lastFailure != null &&
+          node.lastFailure.source != null &&
+          node.lastFailure.source.ip != null
+            ? node.lastFailure.source.ip
+            : null,
+        attrName: 'source.ip',
+        idPrefix: `authentications-table-${node._id}-lastFailureSource`,
+        render: item => <IPDetailsLink ip={item} />,
+      }),
+  },
+  {
+    name: i18n.LAST_FAILED_DESTINATION,
+    truncateText: false,
+    hideForMobile: false,
+    render: ({ node }) =>
+      getRowItemDraggables({
+        rowItems:
+          node.lastFailure != null &&
+          node.lastFailure.host != null &&
+          node.lastFailure.host.name != null
+            ? node.lastFailure.host.name
+            : null,
+        attrName: 'host.name',
+        idPrefix: `authentications-table-${node._id}-lastFailureDestination`,
+        render: item => <HostDetailsLink hostName={item} />,
+      }),
+  },
+];
+
+export const getAuthenticationColumnsCurated = (
+  pageType: hostsModel.HostsType
+): AuthTableColumns => {
+  const columns = getAuthenticationColumns();
+
+  // Columns to exclude from host details pages
+  if (pageType === hostsModel.HostsType.details) {
+    return [i18n.LAST_FAILED_DESTINATION, i18n.LAST_SUCCESSFUL_DESTINATION].reduce((acc, name) => {
+      acc.splice(
+        acc.findIndex(column => column.name === name),
+        1
+      );
+      return acc;
+    }, columns);
+  }
+
+  return columns;
+};
diff --git a/x-pack/plugins/siem/public/hosts/components/authentications_table/mock.ts b/x-pack/plugins/siem/public/hosts/components/authentications_table/mock.ts
new file mode 100644
index 00000000000000..84682fd14ac6ba
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/components/authentications_table/mock.ts
@@ -0,0 +1,82 @@
+/*
+ * 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 { AuthenticationsData } from '../../../graphql/types';
+
+export const mockData: { Authentications: AuthenticationsData } = {
+  Authentications: {
+    totalCount: 54,
+    edges: [
+      {
+        node: {
+          _id: 'cPsuhGcB0WOhS6qyTKC0',
+          failures: 10,
+          successes: 0,
+          user: { name: ['Evan Hassanabad'] },
+          lastSuccess: {
+            timestamp: '2019-01-23T22:35:32.222Z',
+            source: {
+              ip: ['127.0.0.1'],
+            },
+            host: {
+              id: ['host-id-1'],
+              name: ['host-1'],
+            },
+          },
+          lastFailure: {
+            timestamp: '2019-01-23T22:35:32.222Z',
+            source: {
+              ip: ['8.8.8.8'],
+            },
+            host: {
+              id: ['host-id-1'],
+              name: ['host-2'],
+            },
+          },
+        },
+        cursor: {
+          value: '98966fa2013c396155c460d35c0902be',
+        },
+      },
+      {
+        node: {
+          _id: 'KwQDiWcB0WOhS6qyXmrW',
+          failures: 10,
+          successes: 0,
+          user: { name: ['Braden Hassanabad'] },
+          lastSuccess: {
+            timestamp: '2019-01-23T22:35:32.222Z',
+            source: {
+              ip: ['127.0.0.1'],
+            },
+            host: {
+              id: ['host-id-1'],
+              name: ['host-1'],
+            },
+          },
+          lastFailure: {
+            timestamp: '2019-01-23T22:35:32.222Z',
+            source: {
+              ip: ['8.8.8.8'],
+            },
+            host: {
+              id: ['host-id-1'],
+              name: ['host-2'],
+            },
+          },
+        },
+        cursor: {
+          value: 'aa7ca589f1b8220002f2fc61c64cfbf1',
+        },
+      },
+    ],
+    pageInfo: {
+      activePage: 1,
+      fakeTotalCount: 50,
+      showMorePagesIndicator: true,
+    },
+  },
+};
diff --git a/x-pack/plugins/siem/public/components/page/hosts/authentications_table/translations.ts b/x-pack/plugins/siem/public/hosts/components/authentications_table/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/hosts/authentications_table/translations.ts
rename to x-pack/plugins/siem/public/hosts/components/authentications_table/translations.ts
diff --git a/x-pack/plugins/siem/public/hosts/components/first_last_seen_host/index.test.tsx b/x-pack/plugins/siem/public/hosts/components/first_last_seen_host/index.test.tsx
new file mode 100644
index 00000000000000..9715c1cb5c8b45
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/components/first_last_seen_host/index.test.tsx
@@ -0,0 +1,138 @@
+/*
+ * 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 { cloneDeep } from 'lodash/fp';
+import React from 'react';
+import { MockedProvider } from 'react-apollo/test-utils';
+import { render, act } from '@testing-library/react';
+
+import { mockFirstLastSeenHostQuery } from '../../containers/hosts/first_last_seen/mock';
+import { wait } from '../../../common/lib/helpers';
+import { TestProviders } from '../../../common/mock';
+
+import { FirstLastSeenHost, FirstLastSeenHostType } from '.';
+
+describe('FirstLastSeen Component', () => {
+  const firstSeen = 'Apr 8, 2019 @ 16:09:40.692';
+  const lastSeen = 'Apr 8, 2019 @ 18:35:45.064';
+
+  // Suppress warnings about "react-apollo" until we migrate to apollo@3
+  /* eslint-disable no-console */
+  const originalError = console.error;
+  beforeAll(() => {
+    console.error = jest.fn();
+  });
+  afterAll(() => {
+    console.error = originalError;
+  });
+
+  test('Loading', async () => {
+    const { container } = render(
+      <TestProviders>
+        <MockedProvider mocks={mockFirstLastSeenHostQuery} addTypename={false}>
+          <FirstLastSeenHost hostname="kibana-siem" type={FirstLastSeenHostType.FIRST_SEEN} />
+        </MockedProvider>
+      </TestProviders>
+    );
+    expect(container.innerHTML).toBe(
+      '<span class="euiLoadingSpinner euiLoadingSpinner--medium"></span>'
+    );
+  });
+
+  test('First Seen', async () => {
+    const { container } = render(
+      <TestProviders>
+        <MockedProvider mocks={mockFirstLastSeenHostQuery} addTypename={false}>
+          <FirstLastSeenHost hostname="kibana-siem" type={FirstLastSeenHostType.FIRST_SEEN} />
+        </MockedProvider>
+      </TestProviders>
+    );
+
+    await act(() => wait());
+
+    expect(container.innerHTML).toBe(
+      `<div class="euiText euiText--small"><span class="euiToolTipAnchor">${firstSeen}</span></div>`
+    );
+  });
+
+  test('Last Seen', async () => {
+    const { container } = render(
+      <TestProviders>
+        <MockedProvider mocks={mockFirstLastSeenHostQuery} addTypename={false}>
+          <FirstLastSeenHost hostname="kibana-siem" type={FirstLastSeenHostType.LAST_SEEN} />
+        </MockedProvider>
+      </TestProviders>
+    );
+    await act(() => wait());
+    expect(container.innerHTML).toBe(
+      `<div class="euiText euiText--small"><span class="euiToolTipAnchor">${lastSeen}</span></div>`
+    );
+  });
+
+  test('First Seen is empty but not Last Seen', async () => {
+    const badDateTime = cloneDeep(mockFirstLastSeenHostQuery);
+    badDateTime[0].result.data!.source.HostFirstLastSeen.firstSeen = null;
+    const { container } = render(
+      <TestProviders>
+        <MockedProvider mocks={badDateTime} addTypename={false}>
+          <FirstLastSeenHost hostname="kibana-siem" type={FirstLastSeenHostType.LAST_SEEN} />
+        </MockedProvider>
+      </TestProviders>
+    );
+
+    await act(() => wait());
+
+    expect(container.innerHTML).toBe(
+      `<div class="euiText euiText--small"><span class="euiToolTipAnchor">${lastSeen}</span></div>`
+    );
+  });
+
+  test('Last Seen is empty but not First Seen', async () => {
+    const badDateTime = cloneDeep(mockFirstLastSeenHostQuery);
+    badDateTime[0].result.data!.source.HostFirstLastSeen.lastSeen = null;
+    const { container } = render(
+      <TestProviders>
+        <MockedProvider mocks={badDateTime} addTypename={false}>
+          <FirstLastSeenHost hostname="kibana-siem" type={FirstLastSeenHostType.FIRST_SEEN} />
+        </MockedProvider>
+      </TestProviders>
+    );
+
+    await act(() => wait());
+
+    expect(container.innerHTML).toBe(
+      `<div class="euiText euiText--small"><span class="euiToolTipAnchor">${firstSeen}</span></div>`
+    );
+  });
+
+  test('First Seen With a bad date time string', async () => {
+    const badDateTime = cloneDeep(mockFirstLastSeenHostQuery);
+    badDateTime[0].result.data!.source.HostFirstLastSeen.firstSeen = 'something-invalid';
+    const { container } = render(
+      <TestProviders>
+        <MockedProvider mocks={badDateTime} addTypename={false}>
+          <FirstLastSeenHost hostname="kibana-siem" type={FirstLastSeenHostType.FIRST_SEEN} />
+        </MockedProvider>
+      </TestProviders>
+    );
+    await act(() => wait());
+    expect(container.textContent).toBe('something-invalid');
+  });
+
+  test('Last Seen With a bad date time string', async () => {
+    const badDateTime = cloneDeep(mockFirstLastSeenHostQuery);
+    badDateTime[0].result.data!.source.HostFirstLastSeen.lastSeen = 'something-invalid';
+    const { container } = render(
+      <TestProviders>
+        <MockedProvider mocks={badDateTime} addTypename={false}>
+          <FirstLastSeenHost hostname="kibana-siem" type={FirstLastSeenHostType.LAST_SEEN} />
+        </MockedProvider>
+      </TestProviders>
+    );
+    await act(() => wait());
+    expect(container.textContent).toBe('something-invalid');
+  });
+});
diff --git a/x-pack/plugins/siem/public/hosts/components/first_last_seen_host/index.tsx b/x-pack/plugins/siem/public/hosts/components/first_last_seen_host/index.tsx
new file mode 100644
index 00000000000000..05e65b496fae04
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/components/first_last_seen_host/index.tsx
@@ -0,0 +1,64 @@
+/*
+ * 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 { EuiIcon, EuiLoadingSpinner, EuiText, EuiToolTip } from '@elastic/eui';
+import React from 'react';
+import { ApolloConsumer } from 'react-apollo';
+
+import { useFirstLastSeenHostQuery } from '../../containers/hosts/first_last_seen';
+import { getEmptyTagValue } from '../../../common/components/empty_value';
+import { FormattedRelativePreferenceDate } from '../../../common/components/formatted_date';
+
+export enum FirstLastSeenHostType {
+  FIRST_SEEN = 'first-seen',
+  LAST_SEEN = 'last-seen',
+}
+
+export const FirstLastSeenHost = React.memo<{ hostname: string; type: FirstLastSeenHostType }>(
+  ({ hostname, type }) => {
+    return (
+      <ApolloConsumer>
+        {client => {
+          const { loading, firstSeen, lastSeen, errorMessage } = useFirstLastSeenHostQuery(
+            hostname,
+            'default',
+            client
+          );
+          if (errorMessage != null) {
+            return (
+              <EuiToolTip
+                position="top"
+                content={errorMessage}
+                data-test-subj="firstLastSeenErrorToolTip"
+                aria-label={`firstLastSeenError-${type}`}
+                id={`firstLastSeenError-${hostname}-${type}`}
+              >
+                <EuiIcon aria-describedby={`firstLastSeenError-${hostname}-${type}`} type="alert" />
+              </EuiToolTip>
+            );
+          }
+          const valueSeen = type === FirstLastSeenHostType.FIRST_SEEN ? firstSeen : lastSeen;
+          return (
+            <>
+              {loading && <EuiLoadingSpinner size="m" />}
+              {!loading && valueSeen != null && new Date(valueSeen).toString() === 'Invalid Date'
+                ? valueSeen
+                : !loading &&
+                  valueSeen != null && (
+                    <EuiText size="s">
+                      <FormattedRelativePreferenceDate value={`${valueSeen}`} />
+                    </EuiText>
+                  )}
+              {!loading && valueSeen == null && getEmptyTagValue()}
+            </>
+          );
+        }}
+      </ApolloConsumer>
+    );
+  }
+);
+
+FirstLastSeenHost.displayName = 'FirstLastSeenHost';
diff --git a/x-pack/plugins/siem/public/components/page/hosts/hosts_table/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/hosts/components/hosts_table/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/hosts/hosts_table/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/hosts/components/hosts_table/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/hosts/components/hosts_table/columns.tsx b/x-pack/plugins/siem/public/hosts/components/hosts_table/columns.tsx
new file mode 100644
index 00000000000000..6b3097e1feabb6
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/components/hosts_table/columns.tsx
@@ -0,0 +1,119 @@
+/*
+ * 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 { EuiIcon, EuiToolTip } from '@elastic/eui';
+import React from 'react';
+import {
+  DragEffects,
+  DraggableWrapper,
+} from '../../../common/components/drag_and_drop/draggable_wrapper';
+import { escapeDataProviderId } from '../../../common/components/drag_and_drop/helpers';
+import { getEmptyTagValue } from '../../../common/components/empty_value';
+import { HostDetailsLink } from '../../../common/components/links';
+import { FormattedRelativePreferenceDate } from '../../../common/components/formatted_date';
+import { IS_OPERATOR } from '../../../timelines/components/timeline/data_providers/data_provider';
+import { Provider } from '../../../timelines/components/timeline/data_providers/provider';
+import {
+  AddFilterToGlobalSearchBar,
+  createFilter,
+} from '../../../common/components/add_filter_to_global_search_bar';
+import { HostsTableColumns } from './';
+
+import * as i18n from './translations';
+
+export const getHostsColumns = (): HostsTableColumns => [
+  {
+    field: 'node.host.name',
+    name: i18n.NAME,
+    truncateText: false,
+    hideForMobile: false,
+    sortable: true,
+    render: hostName => {
+      if (hostName != null && hostName.length > 0) {
+        const id = escapeDataProviderId(`hosts-table-hostName-${hostName[0]}`);
+        return (
+          <DraggableWrapper
+            key={id}
+            dataProvider={{
+              and: [],
+              enabled: true,
+              excluded: false,
+              id,
+              name: hostName[0],
+              kqlQuery: '',
+              queryMatch: { field: 'host.name', value: hostName[0], operator: IS_OPERATOR },
+            }}
+            render={(dataProvider, _, snapshot) =>
+              snapshot.isDragging ? (
+                <DragEffects>
+                  <Provider dataProvider={dataProvider} />
+                </DragEffects>
+              ) : (
+                <HostDetailsLink hostName={hostName[0]} />
+              )
+            }
+          />
+        );
+      }
+      return getEmptyTagValue();
+    },
+    width: '35%',
+  },
+  {
+    field: 'node.lastSeen',
+    name: (
+      <EuiToolTip content={i18n.FIRST_LAST_SEEN_TOOLTIP}>
+        <>
+          {i18n.LAST_SEEN}{' '}
+          <EuiIcon size="s" color="subdued" type="iInCircle" className="eui-alignTop" />
+        </>
+      </EuiToolTip>
+    ),
+    truncateText: false,
+    hideForMobile: false,
+    sortable: true,
+    render: lastSeen => {
+      if (lastSeen != null) {
+        return <FormattedRelativePreferenceDate value={lastSeen} />;
+      }
+      return getEmptyTagValue();
+    },
+  },
+  {
+    field: 'node.host.os.name',
+    name: i18n.OS,
+    truncateText: false,
+    hideForMobile: false,
+    sortable: false,
+    render: hostOsName => {
+      if (hostOsName != null) {
+        return (
+          <AddFilterToGlobalSearchBar filter={createFilter('host.os.name', hostOsName)}>
+            <>{hostOsName}</>
+          </AddFilterToGlobalSearchBar>
+        );
+      }
+      return getEmptyTagValue();
+    },
+  },
+  {
+    field: 'node.host.os.version',
+    name: i18n.VERSION,
+    truncateText: false,
+    hideForMobile: false,
+    sortable: false,
+    render: hostOsVersion => {
+      if (hostOsVersion != null) {
+        return (
+          <AddFilterToGlobalSearchBar filter={createFilter('host.os.version', hostOsVersion)}>
+            <>{hostOsVersion}</>
+          </AddFilterToGlobalSearchBar>
+        );
+      }
+      return getEmptyTagValue();
+    },
+  },
+];
diff --git a/x-pack/plugins/siem/public/hosts/components/hosts_table/index.test.tsx b/x-pack/plugins/siem/public/hosts/components/hosts_table/index.test.tsx
new file mode 100644
index 00000000000000..8c1429174bd78e
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/components/hosts_table/index.test.tsx
@@ -0,0 +1,139 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import { getOr } from 'lodash/fp';
+import React from 'react';
+import { MockedProvider } from 'react-apollo/test-utils';
+
+import {
+  apolloClientObservable,
+  mockIndexPattern,
+  mockGlobalState,
+  TestProviders,
+  SUB_PLUGINS_REDUCER,
+} from '../../../common/mock';
+import { useMountAppended } from '../../../common/utils/use_mount_appended';
+import { createStore, State } from '../../../common/store';
+import { hostsModel } from '../../../hosts/store';
+import { HostsTableType } from '../../../hosts/store/model';
+import { HostsTable } from './index';
+import { mockData } from './mock';
+
+// Test will fail because we will to need to mock some core services to make the test work
+// For now let's forget about SiemSearchBar and QueryBar
+jest.mock('../../../common/components/search_bar', () => ({
+  SiemSearchBar: () => null,
+}));
+jest.mock('../../../common/components/query_bar', () => ({
+  QueryBar: () => null,
+}));
+
+describe('Hosts Table', () => {
+  const loadPage = jest.fn();
+  const state: State = mockGlobalState;
+
+  let store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable);
+  const mount = useMountAppended();
+
+  beforeEach(() => {
+    store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable);
+  });
+
+  describe('rendering', () => {
+    test('it renders the default Hosts table', () => {
+      const wrapper = shallow(
+        <TestProviders store={store}>
+          <HostsTable
+            data={mockData.Hosts.edges}
+            id="hostsQuery"
+            isInspect={false}
+            indexPattern={mockIndexPattern}
+            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.Hosts.pageInfo)}
+            loading={false}
+            loadPage={loadPage}
+            showMorePagesIndicator={getOr(false, 'showMorePagesIndicator', mockData.Hosts.pageInfo)}
+            totalCount={mockData.Hosts.totalCount}
+            type={hostsModel.HostsType.page}
+          />
+        </TestProviders>
+      );
+
+      expect(wrapper.find('HostsTable')).toMatchSnapshot();
+    });
+
+    describe('Sorting on Table', () => {
+      let wrapper: ReturnType<typeof mount>;
+
+      beforeEach(() => {
+        wrapper = mount(
+          <MockedProvider>
+            <TestProviders store={store}>
+              <HostsTable
+                id="hostsQuery"
+                indexPattern={mockIndexPattern}
+                isInspect={false}
+                loading={false}
+                data={mockData.Hosts.edges}
+                totalCount={mockData.Hosts.totalCount}
+                fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.Hosts.pageInfo)}
+                showMorePagesIndicator={getOr(
+                  false,
+                  'showMorePagesIndicator',
+                  mockData.Hosts.pageInfo
+                )}
+                loadPage={loadPage}
+                type={hostsModel.HostsType.page}
+              />
+            </TestProviders>
+          </MockedProvider>
+        );
+      });
+      test('Initial value of the store', () => {
+        expect(store.getState().hosts.page.queries[HostsTableType.hosts]).toEqual({
+          activePage: 0,
+          direction: 'desc',
+          sortField: 'lastSeen',
+          limit: 10,
+        });
+        expect(
+          wrapper
+            .find('.euiTable thead tr th button')
+            .at(1)
+            .text()
+        ).toEqual('Last seen Click to sort in ascending order');
+        expect(
+          wrapper
+            .find('.euiTable thead tr th button')
+            .at(1)
+            .find('svg')
+        ).toBeTruthy();
+      });
+
+      test('when you click on the column header, you should show the sorting icon', () => {
+        wrapper
+          .find('.euiTable thead tr th button')
+          .first()
+          .simulate('click');
+
+        wrapper.update();
+
+        expect(store.getState().hosts.page.queries[HostsTableType.hosts]).toEqual({
+          activePage: 0,
+          direction: 'asc',
+          sortField: 'hostName',
+          limit: 10,
+        });
+        expect(
+          wrapper
+            .find('.euiTable thead tr th button')
+            .first()
+            .text()
+        ).toEqual('Host nameClick to sort in descending order');
+      });
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/hosts/components/hosts_table/index.tsx b/x-pack/plugins/siem/public/hosts/components/hosts_table/index.tsx
new file mode 100644
index 00000000000000..550ee24f609226
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/components/hosts_table/index.tsx
@@ -0,0 +1,207 @@
+/*
+ * 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, { useMemo, useCallback } from 'react';
+import { connect, ConnectedProps } from 'react-redux';
+import { IIndexPattern } from 'src/plugins/data/public';
+
+import {
+  Direction,
+  HostFields,
+  HostItem,
+  HostsEdges,
+  HostsFields,
+  HostsSortField,
+  OsFields,
+} from '../../../graphql/types';
+import { assertUnreachable } from '../../../common/lib/helpers';
+import { State } from '../../../common/store';
+import {
+  Columns,
+  Criteria,
+  ItemsPerRow,
+  PaginatedTable,
+  SortingBasicTable,
+} from '../../../common/components/paginated_table';
+import { hostsActions, hostsModel, hostsSelectors } from '../../store';
+import { getHostsColumns } from './columns';
+import * as i18n from './translations';
+
+const tableType = hostsModel.HostsTableType.hosts;
+
+interface OwnProps {
+  data: HostsEdges[];
+  fakeTotalCount: number;
+  id: string;
+  indexPattern: IIndexPattern;
+  isInspect: boolean;
+  loading: boolean;
+  loadPage: (newActivePage: number) => void;
+  showMorePagesIndicator: boolean;
+  totalCount: number;
+  type: hostsModel.HostsType;
+}
+
+export type HostsTableColumns = [
+  Columns<HostFields['name']>,
+  Columns<HostItem['lastSeen']>,
+  Columns<OsFields['name']>,
+  Columns<OsFields['version']>
+];
+
+type HostsTableProps = OwnProps & PropsFromRedux;
+
+const rowItems: ItemsPerRow[] = [
+  {
+    text: i18n.ROWS_5,
+    numberOfRow: 5,
+  },
+  {
+    text: i18n.ROWS_10,
+    numberOfRow: 10,
+  },
+];
+const getSorting = (
+  trigger: string,
+  sortField: HostsFields,
+  direction: Direction
+): SortingBasicTable => ({ field: getNodeField(sortField), direction });
+
+const HostsTableComponent = React.memo<HostsTableProps>(
+  ({
+    activePage,
+    data,
+    direction,
+    fakeTotalCount,
+    id,
+    indexPattern,
+    isInspect,
+    limit,
+    loading,
+    loadPage,
+    showMorePagesIndicator,
+    sortField,
+    totalCount,
+    type,
+    updateHostsSort,
+    updateTableActivePage,
+    updateTableLimit,
+  }) => {
+    const updateLimitPagination = useCallback(
+      newLimit =>
+        updateTableLimit({
+          hostsType: type,
+          limit: newLimit,
+          tableType,
+        }),
+      [type, updateTableLimit]
+    );
+
+    const updateActivePage = useCallback(
+      newPage =>
+        updateTableActivePage({
+          activePage: newPage,
+          hostsType: type,
+          tableType,
+        }),
+      [type, updateTableActivePage]
+    );
+
+    const onChange = useCallback(
+      (criteria: Criteria) => {
+        if (criteria.sort != null) {
+          const sort: HostsSortField = {
+            field: getSortField(criteria.sort.field),
+            direction: criteria.sort.direction as Direction,
+          };
+          if (sort.direction !== direction || sort.field !== sortField) {
+            updateHostsSort({
+              sort,
+              hostsType: type,
+            });
+          }
+        }
+      },
+      [direction, sortField, type, updateHostsSort]
+    );
+
+    const hostsColumns = useMemo(() => getHostsColumns(), []);
+
+    const sorting = useMemo(() => getSorting(`${sortField}-${direction}`, sortField, direction), [
+      sortField,
+      direction,
+    ]);
+
+    return (
+      <PaginatedTable
+        activePage={activePage}
+        columns={hostsColumns}
+        dataTestSubj={`table-${tableType}`}
+        headerCount={totalCount}
+        headerTitle={i18n.HOSTS}
+        headerUnit={i18n.UNIT(totalCount)}
+        id={id}
+        isInspect={isInspect}
+        itemsPerRow={rowItems}
+        limit={limit}
+        loading={loading}
+        loadPage={loadPage}
+        onChange={onChange}
+        pageOfItems={data}
+        showMorePagesIndicator={showMorePagesIndicator}
+        sorting={sorting}
+        totalCount={fakeTotalCount}
+        updateLimitPagination={updateLimitPagination}
+        updateActivePage={updateActivePage}
+      />
+    );
+  }
+);
+
+HostsTableComponent.displayName = 'HostsTableComponent';
+
+const getSortField = (field: string): HostsFields => {
+  switch (field) {
+    case 'node.host.name':
+      return HostsFields.hostName;
+    case 'node.lastSeen':
+      return HostsFields.lastSeen;
+    default:
+      return HostsFields.lastSeen;
+  }
+};
+
+const getNodeField = (field: HostsFields): string => {
+  switch (field) {
+    case HostsFields.hostName:
+      return 'node.host.name';
+    case HostsFields.lastSeen:
+      return 'node.lastSeen';
+  }
+  assertUnreachable(field);
+};
+
+const makeMapStateToProps = () => {
+  const getHostsSelector = hostsSelectors.hostsSelector();
+  const mapStateToProps = (state: State, { type }: OwnProps) => {
+    return getHostsSelector(state, type);
+  };
+  return mapStateToProps;
+};
+
+const mapDispatchToProps = {
+  updateHostsSort: hostsActions.updateHostsSort,
+  updateTableActivePage: hostsActions.updateTableActivePage,
+  updateTableLimit: hostsActions.updateTableLimit,
+};
+
+const connector = connect(makeMapStateToProps, mapDispatchToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export const HostsTable = connector(HostsTableComponent);
+
+HostsTable.displayName = 'HostsTable';
diff --git a/x-pack/plugins/siem/public/hosts/components/hosts_table/mock.ts b/x-pack/plugins/siem/public/hosts/components/hosts_table/mock.ts
new file mode 100644
index 00000000000000..a3dd69be75cc67
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/components/hosts_table/mock.ts
@@ -0,0 +1,60 @@
+/*
+ * 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 { HostsData } from '../../../graphql/types';
+
+export const mockData: { Hosts: HostsData } = {
+  Hosts: {
+    totalCount: 4,
+    edges: [
+      {
+        node: {
+          _id: 'cPsuhGcB0WOhS6qyTKC0',
+          host: {
+            name: ['elrond.elstc.co'],
+            os: {
+              name: ['Ubuntu'],
+              version: ['18.04.1 LTS (Bionic Beaver)'],
+            },
+          },
+        },
+        cursor: {
+          value: '98966fa2013c396155c460d35c0902be',
+        },
+      },
+      {
+        node: {
+          _id: 'KwQDiWcB0WOhS6qyXmrW',
+          host: {
+            name: ['siem-kibana'],
+            os: {
+              name: ['Debian GNU/Linux'],
+              version: ['9 (stretch)'],
+            },
+          },
+          cloud: {
+            instance: {
+              id: ['423232333829362673777'],
+            },
+            machine: {
+              type: ['custom-4-16384'],
+            },
+            provider: ['gce'],
+            region: ['us-east-1'],
+          },
+        },
+        cursor: {
+          value: 'aa7ca589f1b8220002f2fc61c64cfbf1',
+        },
+      },
+    ],
+    pageInfo: {
+      activePage: 1,
+      fakeTotalCount: 50,
+      showMorePagesIndicator: true,
+    },
+  },
+};
diff --git a/x-pack/plugins/siem/public/components/page/hosts/hosts_table/translations.ts b/x-pack/plugins/siem/public/hosts/components/hosts_table/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/hosts/hosts_table/translations.ts
rename to x-pack/plugins/siem/public/hosts/components/hosts_table/translations.ts
diff --git a/x-pack/plugins/siem/public/components/page/hosts/kpi_hosts/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/hosts/components/kpi_hosts/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/hosts/kpi_hosts/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/hosts/components/kpi_hosts/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/hosts/components/kpi_hosts/index.test.tsx b/x-pack/plugins/siem/public/hosts/components/kpi_hosts/index.test.tsx
new file mode 100644
index 00000000000000..09e253ae56747d
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/components/kpi_hosts/index.test.tsx
@@ -0,0 +1,106 @@
+/*
+ * 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 { mockKpiHostsData, mockKpiHostDetailsData } from './mock';
+import React from 'react';
+import { shallow, ShallowWrapper } from 'enzyme';
+import { KpiHostsComponentBase } from '.';
+import * as statItems from '../../../common/components/stat_items';
+import { kpiHostsMapping } from './kpi_hosts_mapping';
+import { kpiHostDetailsMapping } from './kpi_host_details_mapping';
+
+describe('kpiHostsComponent', () => {
+  const ID = 'kpiHost';
+  const from = new Date('2019-06-15T06:00:00.000Z').valueOf();
+  const to = new Date('2019-06-18T06:00:00.000Z').valueOf();
+  const narrowDateRange = () => {};
+  describe('render', () => {
+    test('it should render spinner if it is loading', () => {
+      const wrapper: ShallowWrapper = shallow(
+        <KpiHostsComponentBase
+          data={mockKpiHostsData}
+          from={from}
+          id={ID}
+          loading={true}
+          to={to}
+          narrowDateRange={narrowDateRange}
+        />
+      );
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    test('it should render KpiHostsData', () => {
+      const wrapper: ShallowWrapper = shallow(
+        <KpiHostsComponentBase
+          data={mockKpiHostsData}
+          from={from}
+          id={ID}
+          loading={false}
+          to={to}
+          narrowDateRange={narrowDateRange}
+        />
+      );
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    test('it should render KpiHostDetailsData', () => {
+      const wrapper: ShallowWrapper = shallow(
+        <KpiHostsComponentBase
+          data={mockKpiHostDetailsData}
+          from={from}
+          id={ID}
+          loading={false}
+          to={to}
+          narrowDateRange={narrowDateRange}
+        />
+      );
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  const table = [
+    [mockKpiHostsData, kpiHostsMapping] as [typeof mockKpiHostsData, typeof kpiHostsMapping],
+    [mockKpiHostDetailsData, kpiHostDetailsMapping] as [
+      typeof mockKpiHostDetailsData,
+      typeof kpiHostDetailsMapping
+    ],
+  ];
+
+  describe.each(table)(
+    'it should handle KpiHostsProps and KpiHostDetailsProps',
+    (data, mapping) => {
+      let mockUseKpiMatrixStatus: jest.SpyInstance;
+      beforeAll(() => {
+        mockUseKpiMatrixStatus = jest.spyOn(statItems, 'useKpiMatrixStatus');
+      });
+
+      beforeEach(() => {
+        shallow(
+          <KpiHostsComponentBase
+            data={data}
+            from={from}
+            id={ID}
+            loading={false}
+            to={to}
+            narrowDateRange={narrowDateRange}
+          />
+        );
+      });
+
+      afterEach(() => {
+        mockUseKpiMatrixStatus.mockClear();
+      });
+
+      afterAll(() => {
+        mockUseKpiMatrixStatus.mockRestore();
+      });
+
+      test(`it should apply correct mapping by given data type`, () => {
+        expect(mockUseKpiMatrixStatus).toBeCalledWith(mapping, data, ID, from, to, narrowDateRange);
+      });
+    }
+  );
+});
diff --git a/x-pack/plugins/siem/public/hosts/components/kpi_hosts/index.tsx b/x-pack/plugins/siem/public/hosts/components/kpi_hosts/index.tsx
new file mode 100644
index 00000000000000..ba70df7d361d45
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/components/kpi_hosts/index.tsx
@@ -0,0 +1,84 @@
+/*
+ * 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 { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
+import React from 'react';
+import styled from 'styled-components';
+
+import { KpiHostsData, KpiHostDetailsData } from '../../../graphql/types';
+import {
+  StatItemsComponent,
+  StatItemsProps,
+  useKpiMatrixStatus,
+} from '../../../common/components/stat_items';
+import { kpiHostsMapping } from './kpi_hosts_mapping';
+import { kpiHostDetailsMapping } from './kpi_host_details_mapping';
+import { UpdateDateRange } from '../../../common/components/charts/common';
+
+const kpiWidgetHeight = 247;
+
+interface GenericKpiHostProps {
+  from: number;
+  id: string;
+  loading: boolean;
+  to: number;
+  narrowDateRange: UpdateDateRange;
+}
+
+interface KpiHostsProps extends GenericKpiHostProps {
+  data: KpiHostsData;
+}
+
+interface KpiHostDetailsProps extends GenericKpiHostProps {
+  data: KpiHostDetailsData;
+}
+
+const FlexGroupSpinner = styled(EuiFlexGroup)`
+   {
+    min-height: ${kpiWidgetHeight}px;
+  }
+`;
+
+FlexGroupSpinner.displayName = 'FlexGroupSpinner';
+
+export const KpiHostsComponentBase = ({
+  data,
+  from,
+  loading,
+  id,
+  to,
+  narrowDateRange,
+}: KpiHostsProps | KpiHostDetailsProps) => {
+  const mappings =
+    (data as KpiHostsData).hosts !== undefined ? kpiHostsMapping : kpiHostDetailsMapping;
+  const statItemsProps: StatItemsProps[] = useKpiMatrixStatus(
+    mappings,
+    data,
+    id,
+    from,
+    to,
+    narrowDateRange
+  );
+  return loading ? (
+    <FlexGroupSpinner justifyContent="center" alignItems="center">
+      <EuiFlexItem grow={false}>
+        <EuiLoadingSpinner size="xl" />
+      </EuiFlexItem>
+    </FlexGroupSpinner>
+  ) : (
+    <EuiFlexGroup>
+      {statItemsProps.map((mappedStatItemProps, idx) => {
+        return <StatItemsComponent {...mappedStatItemProps} />;
+      })}
+    </EuiFlexGroup>
+  );
+};
+
+KpiHostsComponentBase.displayName = 'KpiHostsComponentBase';
+
+export const KpiHostsComponent = React.memo(KpiHostsComponentBase);
+
+KpiHostsComponent.displayName = 'KpiHostsComponent';
diff --git a/x-pack/plugins/siem/public/components/page/hosts/kpi_hosts/kpi_host_details_mapping.ts b/x-pack/plugins/siem/public/hosts/components/kpi_hosts/kpi_host_details_mapping.ts
similarity index 96%
rename from x-pack/plugins/siem/public/components/page/hosts/kpi_hosts/kpi_host_details_mapping.ts
rename to x-pack/plugins/siem/public/hosts/components/kpi_hosts/kpi_host_details_mapping.ts
index 59f8e55c461060..b3e98b70c4cb0e 100644
--- a/x-pack/plugins/siem/public/components/page/hosts/kpi_hosts/kpi_host_details_mapping.ts
+++ b/x-pack/plugins/siem/public/hosts/components/kpi_hosts/kpi_host_details_mapping.ts
@@ -5,7 +5,7 @@
  */
 
 import * as i18n from './translations';
-import { StatItems } from '../../../stat_items';
+import { StatItems } from '../../../common/components/stat_items';
 import { KpiHostsChartColors } from './types';
 
 export const kpiHostDetailsMapping: Readonly<StatItems[]> = [
diff --git a/x-pack/plugins/siem/public/components/page/hosts/kpi_hosts/kpi_hosts_mapping.ts b/x-pack/plugins/siem/public/hosts/components/kpi_hosts/kpi_hosts_mapping.ts
similarity index 96%
rename from x-pack/plugins/siem/public/components/page/hosts/kpi_hosts/kpi_hosts_mapping.ts
rename to x-pack/plugins/siem/public/hosts/components/kpi_hosts/kpi_hosts_mapping.ts
index e2d6348d058409..78a9fd5b84d1fa 100644
--- a/x-pack/plugins/siem/public/components/page/hosts/kpi_hosts/kpi_hosts_mapping.ts
+++ b/x-pack/plugins/siem/public/hosts/components/kpi_hosts/kpi_hosts_mapping.ts
@@ -5,8 +5,8 @@
  */
 
 import * as i18n from './translations';
-import { StatItems } from '../../../stat_items';
 import { KpiHostsChartColors } from './types';
+import { StatItems } from '../../../common/components/stat_items';
 
 export const kpiHostsMapping: Readonly<StatItems[]> = [
   {
diff --git a/x-pack/plugins/siem/public/components/page/hosts/kpi_hosts/mock.tsx b/x-pack/plugins/siem/public/hosts/components/kpi_hosts/mock.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/hosts/kpi_hosts/mock.tsx
rename to x-pack/plugins/siem/public/hosts/components/kpi_hosts/mock.tsx
diff --git a/x-pack/plugins/siem/public/components/page/hosts/kpi_hosts/translations.ts b/x-pack/plugins/siem/public/hosts/components/kpi_hosts/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/hosts/kpi_hosts/translations.ts
rename to x-pack/plugins/siem/public/hosts/components/kpi_hosts/translations.ts
diff --git a/x-pack/plugins/siem/public/components/page/hosts/kpi_hosts/types.ts b/x-pack/plugins/siem/public/hosts/components/kpi_hosts/types.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/hosts/kpi_hosts/types.ts
rename to x-pack/plugins/siem/public/hosts/components/kpi_hosts/types.ts
diff --git a/x-pack/plugins/siem/public/components/page/hosts/uncommon_process_table/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/hosts/components/uncommon_process_table/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/hosts/uncommon_process_table/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/hosts/components/uncommon_process_table/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/hosts/components/uncommon_process_table/index.test.tsx b/x-pack/plugins/siem/public/hosts/components/uncommon_process_table/index.test.tsx
new file mode 100644
index 00000000000000..1fcb9b5ef621f5
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/components/uncommon_process_table/index.test.tsx
@@ -0,0 +1,345 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import { getOr } from 'lodash/fp';
+import React from 'react';
+
+import { TestProviders } from '../../../common/mock';
+import { hostsModel } from '../../store';
+import { getEmptyValue } from '../../../common/components/empty_value';
+import { useMountAppended } from '../../../common/utils/use_mount_appended';
+
+import { getArgs, UncommonProcessTable, getUncommonColumnsCurated } from '.';
+import { mockData } from './mock';
+import { HostsType } from '../../store/model';
+import * as i18n from './translations';
+
+describe('Uncommon Process Table Component', () => {
+  const loadPage = jest.fn();
+  const mount = useMountAppended();
+
+  describe('rendering', () => {
+    test('it renders the default Uncommon process table', () => {
+      const wrapper = shallow(
+        <TestProviders>
+          <UncommonProcessTable
+            data={mockData.UncommonProcess.edges}
+            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.UncommonProcess.pageInfo)}
+            id="uncommonProcess"
+            isInspect={false}
+            loading={false}
+            loadPage={loadPage}
+            showMorePagesIndicator={getOr(
+              false,
+              'showMorePagesIndicator',
+              mockData.UncommonProcess.pageInfo
+            )}
+            totalCount={mockData.UncommonProcess.totalCount}
+            type={hostsModel.HostsType.page}
+          />
+        </TestProviders>
+      );
+
+      expect(wrapper.find('UncommonProcessTable')).toMatchSnapshot();
+    });
+
+    test('it has a double dash (empty value) without any hosts at all', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <UncommonProcessTable
+            data={mockData.UncommonProcess.edges}
+            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.UncommonProcess.pageInfo)}
+            id="uncommonProcess"
+            isInspect={false}
+            loading={false}
+            loadPage={loadPage}
+            showMorePagesIndicator={getOr(
+              false,
+              'showMorePagesIndicator',
+              mockData.UncommonProcess.pageInfo
+            )}
+            totalCount={mockData.UncommonProcess.totalCount}
+            type={hostsModel.HostsType.page}
+          />
+        </TestProviders>
+      );
+      expect(
+        wrapper
+          .find('.euiTableRow')
+          .at(0)
+          .find('.euiTableRowCell')
+          .at(3)
+          .text()
+      ).toBe(`Host names${getEmptyValue()}`);
+    });
+
+    test('it has a single host without any extra comma when the number of hosts is exactly 1', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <UncommonProcessTable
+            data={mockData.UncommonProcess.edges}
+            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.UncommonProcess.pageInfo)}
+            id="uncommonProcess"
+            isInspect={false}
+            loading={false}
+            loadPage={loadPage}
+            showMorePagesIndicator={getOr(
+              false,
+              'showMorePagesIndicator',
+              mockData.UncommonProcess.pageInfo
+            )}
+            totalCount={mockData.UncommonProcess.totalCount}
+            type={hostsModel.HostsType.page}
+          />
+        </TestProviders>
+      );
+
+      expect(
+        wrapper
+          .find('.euiTableRow')
+          .at(1)
+          .find('.euiTableRowCell')
+          .at(3)
+          .text()
+      ).toBe('Host nameshello-world ');
+    });
+
+    test('it has a single link when the number of hosts is exactly 1', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <UncommonProcessTable
+            data={mockData.UncommonProcess.edges}
+            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.UncommonProcess.pageInfo)}
+            id="uncommonProcess"
+            isInspect={false}
+            loading={false}
+            loadPage={loadPage}
+            showMorePagesIndicator={getOr(
+              false,
+              'showMorePagesIndicator',
+              mockData.UncommonProcess.pageInfo
+            )}
+            totalCount={mockData.UncommonProcess.totalCount}
+            type={hostsModel.HostsType.page}
+          />
+        </TestProviders>
+      );
+
+      expect(
+        wrapper
+          .find('.euiTableRow')
+          .at(1)
+          .find('.euiTableRowCell')
+          .at(3)
+          .find('a').length
+      ).toBe(1);
+    });
+
+    test('it has a comma separated list of hosts when the number of hosts is greater than 1', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <UncommonProcessTable
+            data={mockData.UncommonProcess.edges}
+            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.UncommonProcess.pageInfo)}
+            id="uncommonProcess"
+            isInspect={false}
+            loading={false}
+            loadPage={loadPage}
+            showMorePagesIndicator={getOr(
+              false,
+              'showMorePagesIndicator',
+              mockData.UncommonProcess.pageInfo
+            )}
+            totalCount={mockData.UncommonProcess.totalCount}
+            type={hostsModel.HostsType.page}
+          />
+        </TestProviders>
+      );
+
+      expect(
+        wrapper
+          .find('.euiTableRow')
+          .at(2)
+          .find('.euiTableRowCell')
+          .at(3)
+          .text()
+      ).toBe('Host nameshello-world,hello-world-2 ');
+    });
+
+    test('it has 2 links when the number of hosts is equal to 2', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <UncommonProcessTable
+            data={mockData.UncommonProcess.edges}
+            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.UncommonProcess.pageInfo)}
+            id="uncommonProcess"
+            isInspect={false}
+            loading={false}
+            loadPage={loadPage}
+            showMorePagesIndicator={getOr(
+              false,
+              'showMorePagesIndicator',
+              mockData.UncommonProcess.pageInfo
+            )}
+            totalCount={mockData.UncommonProcess.totalCount}
+            type={hostsModel.HostsType.page}
+          />
+        </TestProviders>
+      );
+
+      expect(
+        wrapper
+          .find('.euiTableRow')
+          .at(2)
+          .find('.euiTableRowCell')
+          .at(3)
+          .find('a').length
+      ).toBe(2);
+    });
+
+    test('it is empty when all hosts are invalid because they do not contain an id and a name', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <UncommonProcessTable
+            data={mockData.UncommonProcess.edges}
+            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.UncommonProcess.pageInfo)}
+            id="uncommonProcess"
+            isInspect={false}
+            loading={false}
+            loadPage={loadPage}
+            showMorePagesIndicator={getOr(
+              false,
+              'showMorePagesIndicator',
+              mockData.UncommonProcess.pageInfo
+            )}
+            totalCount={mockData.UncommonProcess.totalCount}
+            type={hostsModel.HostsType.page}
+          />
+        </TestProviders>
+      );
+      expect(
+        wrapper
+          .find('.euiTableRow')
+          .at(3)
+          .find('.euiTableRowCell')
+          .at(3)
+          .text()
+      ).toBe(`Host names${getEmptyValue()}`);
+    });
+
+    test('it has no link when all hosts are invalid because they do not contain an id and a name', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <UncommonProcessTable
+            data={mockData.UncommonProcess.edges}
+            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.UncommonProcess.pageInfo)}
+            id="uncommonProcess"
+            isInspect={false}
+            loading={false}
+            loadPage={loadPage}
+            showMorePagesIndicator={getOr(
+              false,
+              'showMorePagesIndicator',
+              mockData.UncommonProcess.pageInfo
+            )}
+            totalCount={mockData.UncommonProcess.totalCount}
+            type={hostsModel.HostsType.page}
+          />
+        </TestProviders>
+      );
+      expect(
+        wrapper
+          .find('.euiTableRow')
+          .at(3)
+          .find('.euiTableRowCell')
+          .at(3)
+          .find('a').length
+      ).toBe(0);
+    });
+
+    test('it is returns two hosts when others are invalid because they do not contain an id and a name', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <UncommonProcessTable
+            data={mockData.UncommonProcess.edges}
+            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.UncommonProcess.pageInfo)}
+            id="uncommonProcess"
+            isInspect={false}
+            loading={false}
+            loadPage={loadPage}
+            showMorePagesIndicator={getOr(
+              false,
+              'showMorePagesIndicator',
+              mockData.UncommonProcess.pageInfo
+            )}
+            totalCount={mockData.UncommonProcess.totalCount}
+            type={hostsModel.HostsType.page}
+          />
+        </TestProviders>
+      );
+      expect(
+        wrapper
+          .find('.euiTableRow')
+          .at(4)
+          .find('.euiTableRowCell')
+          .at(3)
+          .text()
+      ).toBe('Host nameshello-world,hello-world-2 ');
+    });
+  });
+
+  describe('#getArgs', () => {
+    test('it works with string array', () => {
+      const args = ['1', '2', '3'];
+      expect(getArgs(args)).toEqual('1 2 3');
+    });
+
+    test('it returns null if empty array', () => {
+      const args: string[] = [];
+      expect(getArgs(args)).toEqual(null);
+    });
+
+    test('it returns null if given null', () => {
+      expect(getArgs(null)).toEqual(null);
+    });
+
+    test('it returns null if given undefined', () => {
+      expect(getArgs(undefined)).toEqual(null);
+    });
+  });
+
+  describe('#getUncommonColumnsCurated', () => {
+    test('on hosts page, we expect to get all columns', () => {
+      expect(getUncommonColumnsCurated(HostsType.page).length).toEqual(6);
+    });
+
+    test('on host details page, we expect to remove two columns', () => {
+      const columns = getUncommonColumnsCurated(HostsType.details);
+      expect(columns.length).toEqual(4);
+    });
+
+    test('on host page, we should have hosts', () => {
+      const columns = getUncommonColumnsCurated(HostsType.page);
+      expect(columns.some(col => col.name === i18n.HOSTS)).toEqual(true);
+    });
+
+    test('on host page, we should have number of hosts', () => {
+      const columns = getUncommonColumnsCurated(HostsType.page);
+      expect(columns.some(col => col.name === i18n.NUMBER_OF_HOSTS)).toEqual(true);
+    });
+
+    test('on host details page, we should not have hosts', () => {
+      const columns = getUncommonColumnsCurated(HostsType.details);
+      expect(columns.some(col => col.name === i18n.HOSTS)).toEqual(false);
+    });
+
+    test('on host details page, we should not have number of hosts', () => {
+      const columns = getUncommonColumnsCurated(HostsType.details);
+      expect(columns.some(col => col.name === i18n.NUMBER_OF_HOSTS)).toEqual(false);
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/hosts/components/uncommon_process_table/index.tsx b/x-pack/plugins/siem/public/hosts/components/uncommon_process_table/index.tsx
new file mode 100644
index 00000000000000..a34cfe3327a9d1
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/components/uncommon_process_table/index.tsx
@@ -0,0 +1,238 @@
+/*
+ * 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.
+ */
+
+/* eslint-disable react/display-name */
+
+import React, { useCallback, useMemo } from 'react';
+import { connect, ConnectedProps } from 'react-redux';
+
+import { UncommonProcessesEdges, UncommonProcessItem } from '../../../graphql/types';
+import { State } from '../../../common/store';
+import { hostsActions, hostsModel, hostsSelectors } from '../../store';
+import { defaultToEmptyTag, getEmptyValue } from '../../../common/components/empty_value';
+import { HostDetailsLink } from '../../../common/components/links';
+import { Columns, ItemsPerRow, PaginatedTable } from '../../../common/components/paginated_table';
+
+import * as i18n from './translations';
+import { getRowItemDraggables } from '../../../common/components/tables/helpers';
+import { HostsType } from '../../store/model';
+const tableType = hostsModel.HostsTableType.uncommonProcesses;
+interface OwnProps {
+  data: UncommonProcessesEdges[];
+  fakeTotalCount: number;
+  id: string;
+  isInspect: boolean;
+  loading: boolean;
+  loadPage: (newActivePage: number) => void;
+  showMorePagesIndicator: boolean;
+  totalCount: number;
+  type: hostsModel.HostsType;
+}
+
+export type UncommonProcessTableColumns = [
+  Columns<UncommonProcessesEdges>,
+  Columns<UncommonProcessesEdges>,
+  Columns<UncommonProcessesEdges>,
+  Columns<UncommonProcessesEdges>,
+  Columns<UncommonProcessesEdges>,
+  Columns<UncommonProcessesEdges>
+];
+
+type UncommonProcessTableProps = OwnProps & PropsFromRedux;
+
+const rowItems: ItemsPerRow[] = [
+  {
+    text: i18n.ROWS_5,
+    numberOfRow: 5,
+  },
+  {
+    text: i18n.ROWS_10,
+    numberOfRow: 10,
+  },
+];
+
+export const getArgs = (args: string[] | null | undefined): string | null => {
+  if (args != null && args.length !== 0) {
+    return args.join(' ');
+  } else {
+    return null;
+  }
+};
+
+const UncommonProcessTableComponent = React.memo<UncommonProcessTableProps>(
+  ({
+    activePage,
+    data,
+    fakeTotalCount,
+    id,
+    isInspect,
+    limit,
+    loading,
+    loadPage,
+    totalCount,
+    showMorePagesIndicator,
+    updateTableActivePage,
+    updateTableLimit,
+    type,
+  }) => {
+    const updateLimitPagination = useCallback(
+      newLimit =>
+        updateTableLimit({
+          hostsType: type,
+          limit: newLimit,
+          tableType,
+        }),
+      [type, updateTableLimit]
+    );
+
+    const updateActivePage = useCallback(
+      newPage =>
+        updateTableActivePage({
+          activePage: newPage,
+          hostsType: type,
+          tableType,
+        }),
+      [type, updateTableActivePage]
+    );
+
+    const columns = useMemo(() => getUncommonColumnsCurated(type), [type]);
+
+    return (
+      <PaginatedTable
+        activePage={activePage}
+        columns={columns}
+        dataTestSubj={`table-${tableType}`}
+        headerCount={totalCount}
+        headerTitle={i18n.UNCOMMON_PROCESSES}
+        headerUnit={i18n.UNIT(totalCount)}
+        id={id}
+        isInspect={isInspect}
+        itemsPerRow={rowItems}
+        limit={limit}
+        loading={loading}
+        loadPage={loadPage}
+        pageOfItems={data}
+        showMorePagesIndicator={showMorePagesIndicator}
+        totalCount={fakeTotalCount}
+        updateLimitPagination={updateLimitPagination}
+        updateActivePage={updateActivePage}
+      />
+    );
+  }
+);
+
+UncommonProcessTableComponent.displayName = 'UncommonProcessTableComponent';
+
+const makeMapStateToProps = () => {
+  const getUncommonProcessesSelector = hostsSelectors.uncommonProcessesSelector();
+  return (state: State, { type }: OwnProps) => getUncommonProcessesSelector(state, type);
+};
+
+const mapDispatchToProps = {
+  updateTableActivePage: hostsActions.updateTableActivePage,
+  updateTableLimit: hostsActions.updateTableLimit,
+};
+
+const connector = connect(makeMapStateToProps, mapDispatchToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export const UncommonProcessTable = connector(UncommonProcessTableComponent);
+
+UncommonProcessTable.displayName = 'UncommonProcessTable';
+
+const getUncommonColumns = (): UncommonProcessTableColumns => [
+  {
+    name: i18n.NAME,
+    truncateText: false,
+    hideForMobile: false,
+    render: ({ node }) =>
+      getRowItemDraggables({
+        rowItems: node.process.name,
+        attrName: 'process.name',
+        idPrefix: `uncommon-process-table-${node._id}-processName`,
+      }),
+    width: '20%',
+  },
+  {
+    align: 'right',
+    name: i18n.NUMBER_OF_HOSTS,
+    truncateText: false,
+    hideForMobile: false,
+    render: ({ node }) => <>{node.hosts != null ? node.hosts.length : getEmptyValue()}</>,
+    width: '8%',
+  },
+  {
+    align: 'right',
+    name: i18n.NUMBER_OF_INSTANCES,
+    truncateText: false,
+    hideForMobile: false,
+    render: ({ node }) => defaultToEmptyTag(node.instances),
+    width: '8%',
+  },
+  {
+    name: i18n.HOSTS,
+    truncateText: false,
+    hideForMobile: false,
+    render: ({ node }) =>
+      getRowItemDraggables({
+        rowItems: getHostNames(node),
+        attrName: 'host.name',
+        idPrefix: `uncommon-process-table-${node._id}-processHost`,
+        render: item => <HostDetailsLink hostName={item} />,
+      }),
+    width: '25%',
+  },
+  {
+    name: i18n.LAST_COMMAND,
+    truncateText: false,
+    hideForMobile: false,
+    render: ({ node }) =>
+      getRowItemDraggables({
+        rowItems: node.process != null ? node.process.args : null,
+        attrName: 'process.args',
+        idPrefix: `uncommon-process-table-${node._id}-processArgs`,
+        displayCount: 1, // TODO: Change this back once we have improved the UI
+      }),
+    width: '25%',
+  },
+  {
+    name: i18n.LAST_USER,
+    truncateText: false,
+    hideForMobile: false,
+    render: ({ node }) =>
+      getRowItemDraggables({
+        rowItems: node.user != null ? node.user.name : null,
+        attrName: 'user.name',
+        idPrefix: `uncommon-process-table-${node._id}-processUser`,
+      }),
+  },
+];
+
+export const getHostNames = (node: UncommonProcessItem): string[] => {
+  if (node.hosts != null) {
+    return node.hosts
+      .filter(host => host.name != null && host.name[0] != null)
+      .map(host => (host.name != null && host.name[0] != null ? host.name[0] : ''));
+  } else {
+    return [];
+  }
+};
+
+export const getUncommonColumnsCurated = (pageType: HostsType): UncommonProcessTableColumns => {
+  const columns: UncommonProcessTableColumns = getUncommonColumns();
+  if (pageType === HostsType.details) {
+    return [i18n.HOSTS, i18n.NUMBER_OF_HOSTS].reduce((acc, name) => {
+      acc.splice(
+        acc.findIndex(column => column.name === name),
+        1
+      );
+      return acc;
+    }, columns);
+  } else {
+    return columns;
+  }
+};
diff --git a/x-pack/plugins/siem/public/hosts/components/uncommon_process_table/mock.ts b/x-pack/plugins/siem/public/hosts/components/uncommon_process_table/mock.ts
new file mode 100644
index 00000000000000..52b835278634b0
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/components/uncommon_process_table/mock.ts
@@ -0,0 +1,119 @@
+/*
+ * 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 { UncommonProcessesData } from '../../../graphql/types';
+
+export const mockData: { UncommonProcess: UncommonProcessesData } = {
+  UncommonProcess: {
+    totalCount: 5,
+    edges: [
+      {
+        node: {
+          _id: 'cPsuhGcB0WOhS6qyTKC0',
+          process: {
+            title: ['Hello World'],
+            name: ['elrond.elstc.co'],
+          },
+          hosts: [],
+          instances: 93,
+          user: {
+            id: ['0'],
+            name: ['root'],
+          },
+        },
+        cursor: {
+          value: '98966fa2013c396155c460d35c0902be',
+        },
+      },
+      {
+        node: {
+          _id: 'cPsuhGcB0WOhS6qyTKC0',
+          process: {
+            title: ['Hello World'],
+            name: ['elrond.elstc.co'],
+          },
+          hosts: [{ id: ['host-id-1'], name: ['hello-world'] }],
+          instances: 93,
+          user: {
+            id: ['0'],
+            name: ['root'],
+          },
+        },
+        cursor: {
+          value: '98966fa2013c396155c460d35c0902be',
+        },
+      },
+      {
+        node: {
+          _id: 'KwQDiWcB0WOhS6qyXmrW',
+          process: {
+            title: ['Hello World'],
+            name: ['siem-kibana'],
+          },
+          hosts: [
+            { id: ['host-id-1'], name: ['hello-world'] },
+            { id: ['host-id-2'], name: ['hello-world-2'] },
+          ],
+          instances: 97,
+          user: {
+            id: ['1'],
+            name: ['Evan'],
+          },
+        },
+        cursor: {
+          value: 'aa7ca589f1b8220002f2fc61c64cfbf1',
+        },
+      },
+      {
+        node: {
+          _id: 'KwQDiWcB0WOhS6qyXmrW',
+          process: {
+            title: ['Hello World'],
+            name: ['siem-kibana'],
+          },
+          hosts: [{ ip: ['127.0.0.1'] }],
+          instances: 97,
+          user: {
+            id: ['1'],
+            name: ['Evan'],
+          },
+        },
+        cursor: {
+          value: 'aa7ca589f1b8220002f2fc61c64cfbf1',
+        },
+      },
+      {
+        node: {
+          _id: 'KwQDiWcB0WOhS6qyXmrW',
+          process: {
+            title: ['Hello World'],
+            name: ['siem-kibana'],
+          },
+          hosts: [
+            { ip: ['127.0.0.1'] },
+            { id: ['host-id-1'], name: ['hello-world'] },
+            { ip: ['127.0.0.1'] },
+            { id: ['host-id-2'], name: ['hello-world-2'] },
+            { ip: ['127.0.0.1'] },
+          ],
+          instances: 97,
+          user: {
+            id: ['1'],
+            name: ['Evan'],
+          },
+        },
+        cursor: {
+          value: 'aa7ca589f1b8220002f2fc61c64cfbf1',
+        },
+      },
+    ],
+    pageInfo: {
+      activePage: 1,
+      fakeTotalCount: 50,
+      showMorePagesIndicator: true,
+    },
+  },
+};
diff --git a/x-pack/plugins/siem/public/components/page/hosts/uncommon_process_table/translations.ts b/x-pack/plugins/siem/public/hosts/components/uncommon_process_table/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/hosts/uncommon_process_table/translations.ts
rename to x-pack/plugins/siem/public/hosts/components/uncommon_process_table/translations.ts
diff --git a/x-pack/plugins/siem/public/containers/authentications/index.gql_query.ts b/x-pack/plugins/siem/public/hosts/containers/authentications/index.gql_query.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/authentications/index.gql_query.ts
rename to x-pack/plugins/siem/public/hosts/containers/authentications/index.gql_query.ts
diff --git a/x-pack/plugins/siem/public/hosts/containers/authentications/index.tsx b/x-pack/plugins/siem/public/hosts/containers/authentications/index.tsx
new file mode 100644
index 00000000000000..bfada0583f8e95
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/containers/authentications/index.tsx
@@ -0,0 +1,153 @@
+/*
+ * 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 { getOr } from 'lodash/fp';
+import React from 'react';
+import { Query } from 'react-apollo';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+
+import { DEFAULT_INDEX_KEY } from '../../../../common/constants';
+import {
+  AuthenticationsEdges,
+  GetAuthenticationsQuery,
+  PageInfoPaginated,
+} from '../../../graphql/types';
+import { inputsModel, State, inputsSelectors } from '../../../common/store';
+import { createFilter, getDefaultFetchPolicy } from '../../../common/containers/helpers';
+import { generateTablePaginationOptions } from '../../../common/components/paginated_table/helpers';
+import { withKibana, WithKibanaProps } from '../../../common/lib/kibana';
+import {
+  QueryTemplatePaginated,
+  QueryTemplatePaginatedProps,
+} from '../../../common/containers/query_template_paginated';
+import { hostsModel, hostsSelectors } from '../../store';
+import { authenticationsQuery } from './index.gql_query';
+
+const ID = 'authenticationQuery';
+
+export interface AuthenticationArgs {
+  authentications: AuthenticationsEdges[];
+  id: string;
+  inspect: inputsModel.InspectQuery;
+  isInspected: boolean;
+  loading: boolean;
+  loadPage: (newActivePage: number) => void;
+  pageInfo: PageInfoPaginated;
+  refetch: inputsModel.Refetch;
+  totalCount: number;
+}
+
+export interface OwnProps extends QueryTemplatePaginatedProps {
+  children: (args: AuthenticationArgs) => React.ReactNode;
+  type: hostsModel.HostsType;
+}
+
+export interface AuthenticationsComponentReduxProps {
+  activePage: number;
+  isInspected: boolean;
+  limit: number;
+}
+
+type AuthenticationsProps = OwnProps & AuthenticationsComponentReduxProps & WithKibanaProps;
+
+class AuthenticationsComponentQuery extends QueryTemplatePaginated<
+  AuthenticationsProps,
+  GetAuthenticationsQuery.Query,
+  GetAuthenticationsQuery.Variables
+> {
+  public render() {
+    const {
+      activePage,
+      children,
+      endDate,
+      filterQuery,
+      id = ID,
+      isInspected,
+      kibana,
+      limit,
+      skip,
+      sourceId,
+      startDate,
+    } = this.props;
+    const variables: GetAuthenticationsQuery.Variables = {
+      sourceId,
+      timerange: {
+        interval: '12h',
+        from: startDate!,
+        to: endDate!,
+      },
+      pagination: generateTablePaginationOptions(activePage, limit),
+      filterQuery: createFilter(filterQuery),
+      defaultIndex: kibana.services.uiSettings.get<string[]>(DEFAULT_INDEX_KEY),
+      inspect: isInspected,
+    };
+    return (
+      <Query<GetAuthenticationsQuery.Query, GetAuthenticationsQuery.Variables>
+        query={authenticationsQuery}
+        fetchPolicy={getDefaultFetchPolicy()}
+        notifyOnNetworkStatusChange
+        skip={skip}
+        variables={variables}
+      >
+        {({ data, loading, fetchMore, networkStatus, refetch }) => {
+          const authentications = getOr([], 'source.Authentications.edges', data);
+          this.setFetchMore(fetchMore);
+          this.setFetchMoreOptions((newActivePage: number) => ({
+            variables: {
+              pagination: generateTablePaginationOptions(newActivePage, limit),
+            },
+            updateQuery: (prev, { fetchMoreResult }) => {
+              if (!fetchMoreResult) {
+                return prev;
+              }
+              return {
+                ...fetchMoreResult,
+                source: {
+                  ...fetchMoreResult.source,
+                  Authentications: {
+                    ...fetchMoreResult.source.Authentications,
+                    edges: [...fetchMoreResult.source.Authentications.edges],
+                  },
+                },
+              };
+            },
+          }));
+          const isLoading = this.isItAValidLoading(loading, variables, networkStatus);
+          return children({
+            authentications,
+            id,
+            inspect: getOr(null, 'source.Authentications.inspect', data),
+            isInspected,
+            loading: isLoading,
+            loadPage: this.wrappedLoadMore,
+            pageInfo: getOr({}, 'source.Authentications.pageInfo', data),
+            refetch: this.memoizedRefetchQuery(variables, limit, refetch),
+            totalCount: getOr(-1, 'source.Authentications.totalCount', data),
+          });
+        }}
+      </Query>
+    );
+  }
+}
+
+const makeMapStateToProps = () => {
+  const getAuthenticationsSelector = hostsSelectors.authenticationsSelector();
+  const getQuery = inputsSelectors.globalQueryByIdSelector();
+  const mapStateToProps = (state: State, { type, id = ID }: OwnProps) => {
+    const { isInspected } = getQuery(state, id);
+    return {
+      ...getAuthenticationsSelector(state, type),
+      isInspected,
+    };
+  };
+  return mapStateToProps;
+};
+
+export const AuthenticationsQuery = compose<React.ComponentClass<OwnProps>>(
+  connect(makeMapStateToProps),
+  withKibana
+)(AuthenticationsComponentQuery);
diff --git a/x-pack/plugins/siem/public/containers/hosts/first_last_seen/first_last_seen.gql_query.ts b/x-pack/plugins/siem/public/hosts/containers/hosts/first_last_seen/first_last_seen.gql_query.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/hosts/first_last_seen/first_last_seen.gql_query.ts
rename to x-pack/plugins/siem/public/hosts/containers/hosts/first_last_seen/first_last_seen.gql_query.ts
diff --git a/x-pack/plugins/siem/public/hosts/containers/hosts/first_last_seen/index.ts b/x-pack/plugins/siem/public/hosts/containers/hosts/first_last_seen/index.ts
new file mode 100644
index 00000000000000..54e9147be17c06
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/containers/hosts/first_last_seen/index.ts
@@ -0,0 +1,85 @@
+/*
+ * 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 ApolloClient from 'apollo-client';
+import { get } from 'lodash/fp';
+import React, { useEffect, useState } from 'react';
+
+import { DEFAULT_INDEX_KEY } from '../../../../../common/constants';
+import { useUiSetting$ } from '../../../../common/lib/kibana';
+import { GetHostFirstLastSeenQuery } from '../../../../graphql/types';
+import { inputsModel } from '../../../../common/store';
+import { QueryTemplateProps } from '../../../../common/containers/query_template';
+
+import { HostFirstLastSeenGqlQuery } from './first_last_seen.gql_query';
+
+export interface FirstLastSeenHostArgs {
+  id: string;
+  errorMessage: string;
+  firstSeen: Date;
+  lastSeen: Date;
+  loading: boolean;
+  refetch: inputsModel.Refetch;
+}
+
+export interface OwnProps extends QueryTemplateProps {
+  children: (args: FirstLastSeenHostArgs) => React.ReactNode;
+  hostName: string;
+}
+
+export function useFirstLastSeenHostQuery<TCache = object>(
+  hostName: string,
+  sourceId: string,
+  apolloClient: ApolloClient<TCache>
+) {
+  const [loading, updateLoading] = useState(false);
+  const [firstSeen, updateFirstSeen] = useState<Date | null>(null);
+  const [lastSeen, updateLastSeen] = useState<Date | null>(null);
+  const [errorMessage, updateErrorMessage] = useState<string | null>(null);
+  const [defaultIndex] = useUiSetting$<string[]>(DEFAULT_INDEX_KEY);
+
+  async function fetchFirstLastSeenHost(signal: AbortSignal) {
+    updateLoading(true);
+    return apolloClient
+      .query<GetHostFirstLastSeenQuery.Query, GetHostFirstLastSeenQuery.Variables>({
+        query: HostFirstLastSeenGqlQuery,
+        fetchPolicy: 'cache-first',
+        variables: {
+          sourceId,
+          hostName,
+          defaultIndex,
+        },
+        context: {
+          fetchOptions: {
+            signal,
+          },
+        },
+      })
+      .then(
+        result => {
+          updateLoading(false);
+          updateFirstSeen(get('data.source.HostFirstLastSeen.firstSeen', result));
+          updateLastSeen(get('data.source.HostFirstLastSeen.lastSeen', result));
+          updateErrorMessage(null);
+        },
+        error => {
+          updateLoading(false);
+          updateFirstSeen(null);
+          updateLastSeen(null);
+          updateErrorMessage(error.message);
+        }
+      );
+  }
+
+  useEffect(() => {
+    const abortCtrl = new AbortController();
+    const signal = abortCtrl.signal;
+    fetchFirstLastSeenHost(signal);
+    return () => abortCtrl.abort();
+  }, []);
+
+  return { firstSeen, lastSeen, loading, errorMessage };
+}
diff --git a/x-pack/plugins/siem/public/hosts/containers/hosts/first_last_seen/mock.ts b/x-pack/plugins/siem/public/hosts/containers/hosts/first_last_seen/mock.ts
new file mode 100644
index 00000000000000..51e484ffbd8599
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/containers/hosts/first_last_seen/mock.ts
@@ -0,0 +1,52 @@
+/*
+ * 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 { DEFAULT_INDEX_PATTERN } from '../../../../../common/constants';
+import { GetHostFirstLastSeenQuery } from '../../../../graphql/types';
+
+import { HostFirstLastSeenGqlQuery } from './first_last_seen.gql_query';
+
+interface MockedProvidedQuery {
+  request: {
+    query: GetHostFirstLastSeenQuery.Query;
+    variables: GetHostFirstLastSeenQuery.Variables;
+  };
+  result: {
+    data?: {
+      source: {
+        id: string;
+        HostFirstLastSeen: {
+          firstSeen: string | null;
+          lastSeen: string | null;
+        };
+      };
+    };
+    errors?: [{ message: string }];
+  };
+}
+export const mockFirstLastSeenHostQuery: MockedProvidedQuery[] = [
+  {
+    request: {
+      query: HostFirstLastSeenGqlQuery,
+      variables: {
+        sourceId: 'default',
+        hostName: 'kibana-siem',
+        defaultIndex: DEFAULT_INDEX_PATTERN,
+      },
+    },
+    result: {
+      data: {
+        source: {
+          id: 'default',
+          HostFirstLastSeen: {
+            firstSeen: '2019-04-08T16:09:40.692Z',
+            lastSeen: '2019-04-08T18:35:45.064Z',
+          },
+        },
+      },
+    },
+  },
+];
diff --git a/x-pack/plugins/siem/public/containers/hosts/hosts_table.gql_query.ts b/x-pack/plugins/siem/public/hosts/containers/hosts/hosts_table.gql_query.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/hosts/hosts_table.gql_query.ts
rename to x-pack/plugins/siem/public/hosts/containers/hosts/hosts_table.gql_query.ts
diff --git a/x-pack/plugins/siem/public/hosts/containers/hosts/index.tsx b/x-pack/plugins/siem/public/hosts/containers/hosts/index.tsx
new file mode 100644
index 00000000000000..70f21b6f23cc0d
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/containers/hosts/index.tsx
@@ -0,0 +1,186 @@
+/*
+ * 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 { get, getOr } from 'lodash/fp';
+import memoizeOne from 'memoize-one';
+import React from 'react';
+import { Query } from 'react-apollo';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+
+import { DEFAULT_INDEX_KEY } from '../../../../common/constants';
+import {
+  Direction,
+  GetHostsTableQuery,
+  HostsEdges,
+  HostsFields,
+  PageInfoPaginated,
+} from '../../../graphql/types';
+import { inputsModel, State, inputsSelectors } from '../../../common/store';
+import { createFilter, getDefaultFetchPolicy } from '../../../common/containers/helpers';
+import {
+  QueryTemplatePaginated,
+  QueryTemplatePaginatedProps,
+} from '../../../common/containers/query_template_paginated';
+import { withKibana, WithKibanaProps } from '../../../common/lib/kibana';
+import { hostsModel, hostsSelectors } from '../../store';
+import { HostsTableQuery } from './hosts_table.gql_query';
+import { generateTablePaginationOptions } from '../../../common/components/paginated_table/helpers';
+
+const ID = 'hostsQuery';
+
+export interface HostsArgs {
+  endDate: number;
+  hosts: HostsEdges[];
+  id: string;
+  inspect: inputsModel.InspectQuery;
+  isInspected: boolean;
+  loading: boolean;
+  loadPage: (newActivePage: number) => void;
+  pageInfo: PageInfoPaginated;
+  refetch: inputsModel.Refetch;
+  startDate: number;
+  totalCount: number;
+}
+
+export interface OwnProps extends QueryTemplatePaginatedProps {
+  children: (args: HostsArgs) => React.ReactNode;
+  type: hostsModel.HostsType;
+  startDate: number;
+  endDate: number;
+}
+
+export interface HostsComponentReduxProps {
+  activePage: number;
+  isInspected: boolean;
+  limit: number;
+  sortField: HostsFields;
+  direction: Direction;
+}
+
+type HostsProps = OwnProps & HostsComponentReduxProps & WithKibanaProps;
+
+class HostsComponentQuery extends QueryTemplatePaginated<
+  HostsProps,
+  GetHostsTableQuery.Query,
+  GetHostsTableQuery.Variables
+> {
+  private memoizedHosts: (
+    variables: string,
+    data: GetHostsTableQuery.Source | undefined
+  ) => HostsEdges[];
+
+  constructor(props: HostsProps) {
+    super(props);
+    this.memoizedHosts = memoizeOne(this.getHosts);
+  }
+
+  public render() {
+    const {
+      activePage,
+      id = ID,
+      isInspected,
+      children,
+      direction,
+      filterQuery,
+      endDate,
+      kibana,
+      limit,
+      startDate,
+      skip,
+      sourceId,
+      sortField,
+    } = this.props;
+    const defaultIndex = kibana.services.uiSettings.get<string[]>(DEFAULT_INDEX_KEY);
+
+    const variables: GetHostsTableQuery.Variables = {
+      sourceId,
+      timerange: {
+        interval: '12h',
+        from: startDate,
+        to: endDate,
+      },
+      sort: {
+        direction,
+        field: sortField,
+      },
+      pagination: generateTablePaginationOptions(activePage, limit),
+      filterQuery: createFilter(filterQuery),
+      defaultIndex,
+      inspect: isInspected,
+    };
+    return (
+      <Query<GetHostsTableQuery.Query, GetHostsTableQuery.Variables>
+        query={HostsTableQuery}
+        fetchPolicy={getDefaultFetchPolicy()}
+        notifyOnNetworkStatusChange
+        variables={variables}
+        skip={skip}
+      >
+        {({ data, loading, fetchMore, networkStatus, refetch }) => {
+          this.setFetchMore(fetchMore);
+          this.setFetchMoreOptions((newActivePage: number) => ({
+            variables: {
+              pagination: generateTablePaginationOptions(newActivePage, limit),
+            },
+            updateQuery: (prev, { fetchMoreResult }) => {
+              if (!fetchMoreResult) {
+                return prev;
+              }
+              return {
+                ...fetchMoreResult,
+                source: {
+                  ...fetchMoreResult.source,
+                  Hosts: {
+                    ...fetchMoreResult.source.Hosts,
+                    edges: [...fetchMoreResult.source.Hosts.edges],
+                  },
+                },
+              };
+            },
+          }));
+          const isLoading = this.isItAValidLoading(loading, variables, networkStatus);
+          return children({
+            endDate,
+            hosts: this.memoizedHosts(JSON.stringify(variables), get('source', data)),
+            id,
+            inspect: getOr(null, 'source.Hosts.inspect', data),
+            isInspected,
+            loading: isLoading,
+            loadPage: this.wrappedLoadMore,
+            pageInfo: getOr({}, 'source.Hosts.pageInfo', data),
+            refetch: this.memoizedRefetchQuery(variables, limit, refetch),
+            startDate,
+            totalCount: getOr(-1, 'source.Hosts.totalCount', data),
+          });
+        }}
+      </Query>
+    );
+  }
+
+  private getHosts = (
+    variables: string,
+    source: GetHostsTableQuery.Source | undefined
+  ): HostsEdges[] => getOr([], 'Hosts.edges', source);
+}
+
+const makeMapStateToProps = () => {
+  const getHostsSelector = hostsSelectors.hostsSelector();
+  const getQuery = inputsSelectors.globalQueryByIdSelector();
+  const mapStateToProps = (state: State, { type, id = ID }: OwnProps) => {
+    const { isInspected } = getQuery(state, id);
+    return {
+      ...getHostsSelector(state, type),
+      isInspected,
+    };
+  };
+  return mapStateToProps;
+};
+
+export const HostsQuery = compose<React.ComponentClass<OwnProps>>(
+  connect(makeMapStateToProps),
+  withKibana
+)(HostsComponentQuery);
diff --git a/x-pack/plugins/siem/public/containers/hosts/overview/host_overview.gql_query.ts b/x-pack/plugins/siem/public/hosts/containers/hosts/overview/host_overview.gql_query.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/hosts/overview/host_overview.gql_query.ts
rename to x-pack/plugins/siem/public/hosts/containers/hosts/overview/host_overview.gql_query.ts
diff --git a/x-pack/plugins/siem/public/hosts/containers/hosts/overview/index.tsx b/x-pack/plugins/siem/public/hosts/containers/hosts/overview/index.tsx
new file mode 100644
index 00000000000000..5267fff3a26d67
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/containers/hosts/overview/index.tsx
@@ -0,0 +1,113 @@
+/*
+ * 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 { getOr } from 'lodash/fp';
+import React from 'react';
+import { Query } from 'react-apollo';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+
+import { DEFAULT_INDEX_KEY } from '../../../../../common/constants';
+import { inputsModel, inputsSelectors, State } from '../../../../common/store';
+import { getDefaultFetchPolicy } from '../../../../common/containers/helpers';
+import { QueryTemplate, QueryTemplateProps } from '../../../../common/containers/query_template';
+import { withKibana, WithKibanaProps } from '../../../../common/lib/kibana';
+
+import { HostOverviewQuery } from './host_overview.gql_query';
+import { GetHostOverviewQuery, HostItem } from '../../../../graphql/types';
+
+const ID = 'hostOverviewQuery';
+
+export interface HostOverviewArgs {
+  id: string;
+  inspect: inputsModel.InspectQuery;
+  hostOverview: HostItem;
+  loading: boolean;
+  refetch: inputsModel.Refetch;
+  startDate: number;
+  endDate: number;
+}
+
+export interface HostOverviewReduxProps {
+  isInspected: boolean;
+}
+
+export interface OwnProps extends QueryTemplateProps {
+  children: (args: HostOverviewArgs) => React.ReactNode;
+  hostName: string;
+  startDate: number;
+  endDate: number;
+}
+
+type HostsOverViewProps = OwnProps & HostOverviewReduxProps & WithKibanaProps;
+
+class HostOverviewByNameComponentQuery extends QueryTemplate<
+  HostsOverViewProps,
+  GetHostOverviewQuery.Query,
+  GetHostOverviewQuery.Variables
+> {
+  public render() {
+    const {
+      id = ID,
+      isInspected,
+      children,
+      hostName,
+      kibana,
+      skip,
+      sourceId,
+      startDate,
+      endDate,
+    } = this.props;
+    return (
+      <Query<GetHostOverviewQuery.Query, GetHostOverviewQuery.Variables>
+        query={HostOverviewQuery}
+        fetchPolicy={getDefaultFetchPolicy()}
+        notifyOnNetworkStatusChange
+        skip={skip}
+        variables={{
+          sourceId,
+          hostName,
+          timerange: {
+            interval: '12h',
+            from: startDate,
+            to: endDate,
+          },
+          defaultIndex: kibana.services.uiSettings.get<string[]>(DEFAULT_INDEX_KEY),
+          inspect: isInspected,
+        }}
+      >
+        {({ data, loading, refetch }) => {
+          const hostOverview = getOr([], 'source.HostOverview', data);
+          return children({
+            id,
+            inspect: getOr(null, 'source.HostOverview.inspect', data),
+            refetch,
+            loading,
+            hostOverview,
+            startDate,
+            endDate,
+          });
+        }}
+      </Query>
+    );
+  }
+}
+
+const makeMapStateToProps = () => {
+  const getQuery = inputsSelectors.globalQueryByIdSelector();
+  const mapStateToProps = (state: State, { id = ID }: OwnProps) => {
+    const { isInspected } = getQuery(state, id);
+    return {
+      isInspected,
+    };
+  };
+  return mapStateToProps;
+};
+
+export const HostOverviewByNameQuery = compose<React.ComponentClass<OwnProps>>(
+  connect(makeMapStateToProps),
+  withKibana
+)(HostOverviewByNameComponentQuery);
diff --git a/x-pack/plugins/siem/public/containers/kpi_host_details/index.gql_query.tsx b/x-pack/plugins/siem/public/hosts/containers/kpi_host_details/index.gql_query.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/containers/kpi_host_details/index.gql_query.tsx
rename to x-pack/plugins/siem/public/hosts/containers/kpi_host_details/index.gql_query.tsx
diff --git a/x-pack/plugins/siem/public/hosts/containers/kpi_host_details/index.tsx b/x-pack/plugins/siem/public/hosts/containers/kpi_host_details/index.tsx
new file mode 100644
index 00000000000000..1551e7d7067146
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/containers/kpi_host_details/index.tsx
@@ -0,0 +1,85 @@
+/*
+ * 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 { getOr } from 'lodash/fp';
+import React from 'react';
+import { Query } from 'react-apollo';
+import { connect, ConnectedProps } from 'react-redux';
+
+import { DEFAULT_INDEX_KEY } from '../../../../common/constants';
+import { KpiHostDetailsData, GetKpiHostDetailsQuery } from '../../../graphql/types';
+import { inputsModel, inputsSelectors, State } from '../../../common/store';
+import { useUiSetting } from '../../../common/lib/kibana';
+import { createFilter, getDefaultFetchPolicy } from '../../../common/containers/helpers';
+import { QueryTemplateProps } from '../../../common/containers/query_template';
+
+import { kpiHostDetailsQuery } from './index.gql_query';
+
+const ID = 'kpiHostDetailsQuery';
+
+export interface KpiHostDetailsArgs {
+  id: string;
+  inspect: inputsModel.InspectQuery;
+  kpiHostDetails: KpiHostDetailsData;
+  loading: boolean;
+  refetch: inputsModel.Refetch;
+}
+
+export interface QueryKpiHostDetailsProps extends QueryTemplateProps {
+  children: (args: KpiHostDetailsArgs) => React.ReactNode;
+}
+
+const KpiHostDetailsComponentQuery = React.memo<QueryKpiHostDetailsProps & PropsFromRedux>(
+  ({ id = ID, children, endDate, filterQuery, isInspected, skip, sourceId, startDate }) => (
+    <Query<GetKpiHostDetailsQuery.Query, GetKpiHostDetailsQuery.Variables>
+      query={kpiHostDetailsQuery}
+      fetchPolicy={getDefaultFetchPolicy()}
+      notifyOnNetworkStatusChange
+      skip={skip}
+      variables={{
+        sourceId,
+        timerange: {
+          interval: '12h',
+          from: startDate!,
+          to: endDate!,
+        },
+        filterQuery: createFilter(filterQuery),
+        defaultIndex: useUiSetting<string[]>(DEFAULT_INDEX_KEY),
+        inspect: isInspected,
+      }}
+    >
+      {({ data, loading, refetch }) => {
+        const kpiHostDetails = getOr({}, `source.KpiHostDetails`, data);
+        return children({
+          id,
+          inspect: getOr(null, 'source.KpiHostDetails.inspect', data),
+          kpiHostDetails,
+          loading,
+          refetch,
+        });
+      }}
+    </Query>
+  )
+);
+
+KpiHostDetailsComponentQuery.displayName = 'KpiHostDetailsComponentQuery';
+
+const makeMapStateToProps = () => {
+  const getQuery = inputsSelectors.globalQueryByIdSelector();
+  const mapStateToProps = (state: State, { id = ID }: QueryKpiHostDetailsProps) => {
+    const { isInspected } = getQuery(state, id);
+    return {
+      isInspected,
+    };
+  };
+  return mapStateToProps;
+};
+
+const connector = connect(makeMapStateToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export const KpiHostDetailsQuery = connector(KpiHostDetailsComponentQuery);
diff --git a/x-pack/plugins/siem/public/containers/kpi_hosts/index.gql_query.ts b/x-pack/plugins/siem/public/hosts/containers/kpi_hosts/index.gql_query.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/kpi_hosts/index.gql_query.ts
rename to x-pack/plugins/siem/public/hosts/containers/kpi_hosts/index.gql_query.ts
diff --git a/x-pack/plugins/siem/public/hosts/containers/kpi_hosts/index.tsx b/x-pack/plugins/siem/public/hosts/containers/kpi_hosts/index.tsx
new file mode 100644
index 00000000000000..1a6df58f045976
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/containers/kpi_hosts/index.tsx
@@ -0,0 +1,85 @@
+/*
+ * 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 { getOr } from 'lodash/fp';
+import React from 'react';
+import { Query } from 'react-apollo';
+import { connect, ConnectedProps } from 'react-redux';
+
+import { DEFAULT_INDEX_KEY } from '../../../../common/constants';
+import { GetKpiHostsQuery, KpiHostsData } from '../../../graphql/types';
+import { inputsModel, inputsSelectors, State } from '../../../common/store';
+import { useUiSetting } from '../../../common/lib/kibana';
+import { createFilter, getDefaultFetchPolicy } from '../../../common/containers/helpers';
+import { QueryTemplateProps } from '../../../common/containers/query_template';
+
+import { kpiHostsQuery } from './index.gql_query';
+
+const ID = 'kpiHostsQuery';
+
+export interface KpiHostsArgs {
+  id: string;
+  inspect: inputsModel.InspectQuery;
+  kpiHosts: KpiHostsData;
+  loading: boolean;
+  refetch: inputsModel.Refetch;
+}
+
+export interface KpiHostsProps extends QueryTemplateProps {
+  children: (args: KpiHostsArgs) => React.ReactNode;
+}
+
+const KpiHostsComponentQuery = React.memo<KpiHostsProps & PropsFromRedux>(
+  ({ id = ID, children, endDate, filterQuery, isInspected, skip, sourceId, startDate }) => (
+    <Query<GetKpiHostsQuery.Query, GetKpiHostsQuery.Variables>
+      query={kpiHostsQuery}
+      fetchPolicy={getDefaultFetchPolicy()}
+      notifyOnNetworkStatusChange
+      skip={skip}
+      variables={{
+        sourceId,
+        timerange: {
+          interval: '12h',
+          from: startDate!,
+          to: endDate!,
+        },
+        filterQuery: createFilter(filterQuery),
+        defaultIndex: useUiSetting<string[]>(DEFAULT_INDEX_KEY),
+        inspect: isInspected,
+      }}
+    >
+      {({ data, loading, refetch }) => {
+        const kpiHosts = getOr({}, `source.KpiHosts`, data);
+        return children({
+          id,
+          inspect: getOr(null, 'source.KpiHosts.inspect', data),
+          kpiHosts,
+          loading,
+          refetch,
+        });
+      }}
+    </Query>
+  )
+);
+
+KpiHostsComponentQuery.displayName = 'KpiHostsComponentQuery';
+
+const makeMapStateToProps = () => {
+  const getQuery = inputsSelectors.globalQueryByIdSelector();
+  const mapStateToProps = (state: State, { id = ID }: KpiHostsProps) => {
+    const { isInspected } = getQuery(state, id);
+    return {
+      isInspected,
+    };
+  };
+  return mapStateToProps;
+};
+
+const connector = connect(makeMapStateToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export const KpiHostsQuery = connector(KpiHostsComponentQuery);
diff --git a/x-pack/plugins/siem/public/containers/uncommon_processes/index.gql_query.ts b/x-pack/plugins/siem/public/hosts/containers/uncommon_processes/index.gql_query.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/uncommon_processes/index.gql_query.ts
rename to x-pack/plugins/siem/public/hosts/containers/uncommon_processes/index.gql_query.ts
diff --git a/x-pack/plugins/siem/public/hosts/containers/uncommon_processes/index.tsx b/x-pack/plugins/siem/public/hosts/containers/uncommon_processes/index.tsx
new file mode 100644
index 00000000000000..f8e5b1bed73cd2
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/containers/uncommon_processes/index.tsx
@@ -0,0 +1,151 @@
+/*
+ * 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 { getOr } from 'lodash/fp';
+import React from 'react';
+import { Query } from 'react-apollo';
+import { connect, ConnectedProps } from 'react-redux';
+import { compose } from 'redux';
+
+import { DEFAULT_INDEX_KEY } from '../../../../common/constants';
+import {
+  GetUncommonProcessesQuery,
+  PageInfoPaginated,
+  UncommonProcessesEdges,
+} from '../../../graphql/types';
+import { inputsModel, State, inputsSelectors } from '../../../common/store';
+import { withKibana, WithKibanaProps } from '../../../common/lib/kibana';
+import { generateTablePaginationOptions } from '../../../common/components/paginated_table/helpers';
+import { createFilter, getDefaultFetchPolicy } from '../../../common/containers/helpers';
+import {
+  QueryTemplatePaginated,
+  QueryTemplatePaginatedProps,
+} from '../../../common/containers/query_template_paginated';
+import { hostsModel, hostsSelectors } from '../../store';
+import { uncommonProcessesQuery } from './index.gql_query';
+
+const ID = 'uncommonProcessesQuery';
+
+export interface UncommonProcessesArgs {
+  id: string;
+  inspect: inputsModel.InspectQuery;
+  isInspected: boolean;
+  loading: boolean;
+  loadPage: (newActivePage: number) => void;
+  pageInfo: PageInfoPaginated;
+  refetch: inputsModel.Refetch;
+  totalCount: number;
+  uncommonProcesses: UncommonProcessesEdges[];
+}
+
+export interface OwnProps extends QueryTemplatePaginatedProps {
+  children: (args: UncommonProcessesArgs) => React.ReactNode;
+  type: hostsModel.HostsType;
+}
+
+type UncommonProcessesProps = OwnProps & PropsFromRedux & WithKibanaProps;
+
+class UncommonProcessesComponentQuery extends QueryTemplatePaginated<
+  UncommonProcessesProps,
+  GetUncommonProcessesQuery.Query,
+  GetUncommonProcessesQuery.Variables
+> {
+  public render() {
+    const {
+      activePage,
+      children,
+      endDate,
+      filterQuery,
+      id = ID,
+      isInspected,
+      kibana,
+      limit,
+      skip,
+      sourceId,
+      startDate,
+    } = this.props;
+    const variables: GetUncommonProcessesQuery.Variables = {
+      defaultIndex: kibana.services.uiSettings.get<string[]>(DEFAULT_INDEX_KEY),
+      filterQuery: createFilter(filterQuery),
+      inspect: isInspected,
+      pagination: generateTablePaginationOptions(activePage, limit),
+      sourceId,
+      timerange: {
+        interval: '12h',
+        from: startDate!,
+        to: endDate!,
+      },
+    };
+    return (
+      <Query<GetUncommonProcessesQuery.Query, GetUncommonProcessesQuery.Variables>
+        query={uncommonProcessesQuery}
+        fetchPolicy={getDefaultFetchPolicy()}
+        notifyOnNetworkStatusChange
+        skip={skip}
+        variables={variables}
+      >
+        {({ data, loading, fetchMore, networkStatus, refetch }) => {
+          const uncommonProcesses = getOr([], 'source.UncommonProcesses.edges', data);
+          this.setFetchMore(fetchMore);
+          this.setFetchMoreOptions((newActivePage: number) => ({
+            variables: {
+              pagination: generateTablePaginationOptions(newActivePage, limit),
+            },
+            updateQuery: (prev, { fetchMoreResult }) => {
+              if (!fetchMoreResult) {
+                return prev;
+              }
+              return {
+                ...fetchMoreResult,
+                source: {
+                  ...fetchMoreResult.source,
+                  UncommonProcesses: {
+                    ...fetchMoreResult.source.UncommonProcesses,
+                    edges: [...fetchMoreResult.source.UncommonProcesses.edges],
+                  },
+                },
+              };
+            },
+          }));
+          const isLoading = this.isItAValidLoading(loading, variables, networkStatus);
+          return children({
+            id,
+            inspect: getOr(null, 'source.UncommonProcesses.inspect', data),
+            isInspected,
+            loading: isLoading,
+            loadPage: this.wrappedLoadMore,
+            pageInfo: getOr({}, 'source.UncommonProcesses.pageInfo', data),
+            refetch: this.memoizedRefetchQuery(variables, limit, refetch),
+            totalCount: getOr(-1, 'source.UncommonProcesses.totalCount', data),
+            uncommonProcesses,
+          });
+        }}
+      </Query>
+    );
+  }
+}
+
+const makeMapStateToProps = () => {
+  const getUncommonProcessesSelector = hostsSelectors.uncommonProcessesSelector();
+  const getQuery = inputsSelectors.globalQueryByIdSelector();
+  const mapStateToProps = (state: State, { type, id = ID }: OwnProps) => {
+    const { isInspected } = getQuery(state, id);
+    return {
+      ...getUncommonProcessesSelector(state, type),
+      isInspected,
+    };
+  };
+  return mapStateToProps;
+};
+
+const connector = connect(makeMapStateToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export const UncommonProcessesQuery = compose<React.ComponentClass<OwnProps>>(
+  connector,
+  withKibana
+)(UncommonProcessesComponentQuery);
diff --git a/x-pack/plugins/siem/public/hosts/index.ts b/x-pack/plugins/siem/public/hosts/index.ts
new file mode 100644
index 00000000000000..6f27428e71c27c
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/index.ts
@@ -0,0 +1,23 @@
+/*
+ * 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 { SecuritySubPluginWithStore } from '../app/types';
+import { getHostsRoutes } from './routes';
+import { initialHostsState, hostsReducer, HostsState } from './store';
+
+export class Hosts {
+  public setup() {}
+
+  public start(): SecuritySubPluginWithStore<'hosts', HostsState> {
+    return {
+      routes: getHostsRoutes(),
+      store: {
+        initialState: { hosts: initialHostsState },
+        reducer: { hosts: hostsReducer },
+      },
+    };
+  }
+}
diff --git a/x-pack/plugins/siem/public/pages/hosts/details/details_tabs.test.tsx b/x-pack/plugins/siem/public/hosts/pages/details/details_tabs.test.tsx
similarity index 92%
rename from x-pack/plugins/siem/public/pages/hosts/details/details_tabs.test.tsx
rename to x-pack/plugins/siem/public/hosts/pages/details/details_tabs.test.tsx
index 81c1b317d45965..fa76dc93375e01 100644
--- a/x-pack/plugins/siem/public/pages/hosts/details/details_tabs.test.tsx
+++ b/x-pack/plugins/siem/public/hosts/pages/details/details_tabs.test.tsx
@@ -9,16 +9,16 @@ import { IIndexPattern } from 'src/plugins/data/public';
 import { MemoryRouter } from 'react-router-dom';
 import useResizeObserver from 'use-resize-observer/polyfilled';
 
-import { mockIndexPattern } from '../../../mock/index_pattern';
-import { TestProviders } from '../../../mock/test_providers';
+import { mockIndexPattern } from '../../../common/mock/index_pattern';
+import { TestProviders } from '../../../common/mock/test_providers';
 import { HostDetailsTabs } from './details_tabs';
 import { HostDetailsTabsProps, SetAbsoluteRangeDatePicker } from './types';
 import { hostDetailsPagePath } from '../types';
 import { type } from './utils';
-import { useMountAppended } from '../../../utils/use_mount_appended';
+import { useMountAppended } from '../../../common/utils/use_mount_appended';
 import { getHostDetailsPageFilters } from './helpers';
 
-jest.mock('../../../containers/source', () => ({
+jest.mock('../../../common/containers/source', () => ({
   indicesExistOrDataTemporarilyUnavailable: () => true,
   WithSource: ({
     children,
@@ -29,10 +29,10 @@ jest.mock('../../../containers/source', () => ({
 
 // Test will fail because we will to need to mock some core services to make the test work
 // For now let's forget about SiemSearchBar and QueryBar
-jest.mock('../../../components/search_bar', () => ({
+jest.mock('../../../common/components/search_bar', () => ({
   SiemSearchBar: () => null,
 }));
-jest.mock('../../../components/query_bar', () => ({
+jest.mock('../../../common/components/query_bar', () => ({
   QueryBar: () => null,
 }));
 
diff --git a/x-pack/plugins/siem/public/pages/hosts/details/details_tabs.tsx b/x-pack/plugins/siem/public/hosts/pages/details/details_tabs.tsx
similarity index 85%
rename from x-pack/plugins/siem/public/pages/hosts/details/details_tabs.tsx
rename to x-pack/plugins/siem/public/hosts/pages/details/details_tabs.tsx
index d6c0211901ff05..505d0f37ca0392 100644
--- a/x-pack/plugins/siem/public/pages/hosts/details/details_tabs.tsx
+++ b/x-pack/plugins/siem/public/hosts/pages/details/details_tabs.tsx
@@ -7,12 +7,12 @@
 import React, { useCallback } from 'react';
 import { Route, Switch } from 'react-router-dom';
 
-import { UpdateDateRange } from '../../../components/charts/common';
-import { scoreIntervalToDateTime } from '../../../components/ml/score/score_interval_to_datetime';
-import { Anomaly } from '../../../components/ml/types';
-import { HostsTableType } from '../../../store/hosts/model';
-import { AnomaliesQueryTabBody } from '../../../containers/anomalies/anomalies_query_tab_body';
-import { AnomaliesHostTable } from '../../../components/ml/tables/anomalies_host_table';
+import { UpdateDateRange } from '../../../common/components/charts/common';
+import { scoreIntervalToDateTime } from '../../../common/components/ml/score/score_interval_to_datetime';
+import { Anomaly } from '../../../common/components/ml/types';
+import { HostsTableType } from '../../store/model';
+import { AnomaliesQueryTabBody } from '../../../common/containers/anomalies/anomalies_query_tab_body';
+import { AnomaliesHostTable } from '../../../common/components/ml/tables/anomalies_host_table';
 
 import { HostDetailsTabsProps } from './types';
 import { type } from './utils';
diff --git a/x-pack/plugins/siem/public/pages/hosts/details/helpers.test.ts b/x-pack/plugins/siem/public/hosts/pages/details/helpers.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/hosts/details/helpers.test.ts
rename to x-pack/plugins/siem/public/hosts/pages/details/helpers.test.ts
diff --git a/x-pack/plugins/siem/public/hosts/pages/details/helpers.ts b/x-pack/plugins/siem/public/hosts/pages/details/helpers.ts
new file mode 100644
index 00000000000000..9ec0084d708a02
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/pages/details/helpers.ts
@@ -0,0 +1,49 @@
+/*
+ * 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 { escapeQueryValue } from '../../../common/lib/keury';
+import { Filter } from '../../../../../../../src/plugins/data/public';
+
+/** Returns the kqlQueryExpression for the `Events` widget on the `Host Details` page */
+export const getHostDetailsEventsKqlQueryExpression = ({
+  filterQueryExpression,
+  hostName,
+}: {
+  filterQueryExpression: string;
+  hostName: string;
+}): string => {
+  if (filterQueryExpression.length) {
+    return `${filterQueryExpression}${
+      hostName.length ? ` and host.name: ${escapeQueryValue(hostName)}` : ''
+    }`;
+  } else {
+    return hostName.length ? `host.name: ${escapeQueryValue(hostName)}` : '';
+  }
+};
+
+export const getHostDetailsPageFilters = (hostName: string): Filter[] => [
+  {
+    meta: {
+      alias: null,
+      negate: false,
+      disabled: false,
+      type: 'phrase',
+      key: 'host.name',
+      value: hostName,
+      params: {
+        query: hostName,
+      },
+    },
+    query: {
+      match: {
+        'host.name': {
+          query: hostName,
+          type: 'phrase',
+        },
+      },
+    },
+  },
+];
diff --git a/x-pack/plugins/siem/public/hosts/pages/details/index.tsx b/x-pack/plugins/siem/public/hosts/pages/details/index.tsx
new file mode 100644
index 00000000000000..a5fabf4d515f86
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/pages/details/index.tsx
@@ -0,0 +1,237 @@
+/*
+ * 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 { EuiHorizontalRule, EuiSpacer } from '@elastic/eui';
+import React, { useEffect, useCallback, useMemo } from 'react';
+import { connect, ConnectedProps } from 'react-redux';
+import { StickyContainer } from 'react-sticky';
+
+import { UpdateDateRange } from '../../../common/components/charts/common';
+import { FiltersGlobal } from '../../../common/components/filters_global';
+import { HeaderPage } from '../../../common/components/header_page';
+import { LastEventTime } from '../../../common/components/last_event_time';
+import { AnomalyTableProvider } from '../../../common/components/ml/anomaly/anomaly_table_provider';
+import { hostToCriteria } from '../../../common/components/ml/criteria/host_to_criteria';
+import { hasMlUserPermissions } from '../../../../common/machine_learning/has_ml_user_permissions';
+import { useMlCapabilities } from '../../../common/components/ml_popover/hooks/use_ml_capabilities';
+import { scoreIntervalToDateTime } from '../../../common/components/ml/score/score_interval_to_datetime';
+import { SiemNavigation } from '../../../common/components/navigation';
+import { KpiHostsComponent } from '../../components/kpi_hosts';
+import { HostOverview } from '../../../overview/components/host_overview';
+import { manageQuery } from '../../../common/components/page/manage_query';
+import { SiemSearchBar } from '../../../common/components/search_bar';
+import { WrapperPage } from '../../../common/components/wrapper_page';
+import { HostOverviewByNameQuery } from '../../containers/hosts/overview';
+import { KpiHostDetailsQuery } from '../../containers/kpi_host_details';
+import {
+  indicesExistOrDataTemporarilyUnavailable,
+  WithSource,
+} from '../../../common/containers/source';
+import { LastEventIndexKey } from '../../../graphql/types';
+import { useKibana } from '../../../common/lib/kibana';
+import { convertToBuildEsQuery } from '../../../common/lib/keury';
+import { inputsSelectors, State } from '../../../common/store';
+import { setHostDetailsTablesActivePageToZero as dispatchHostDetailsTablesActivePageToZero } from '../../store/actions';
+import { setAbsoluteRangeDatePicker as dispatchAbsoluteRangeDatePicker } from '../../../common/store/inputs/actions';
+import { SpyRoute } from '../../../common/utils/route/spy_routes';
+import { esQuery, Filter } from '../../../../../../../src/plugins/data/public';
+
+import { HostsEmptyPage } from '../hosts_empty_page';
+import { HostDetailsTabs } from './details_tabs';
+import { navTabsHostDetails } from './nav_tabs';
+import { HostDetailsProps } from './types';
+import { type } from './utils';
+import { getHostDetailsPageFilters } from './helpers';
+
+const HostOverviewManage = manageQuery(HostOverview);
+const KpiHostDetailsManage = manageQuery(KpiHostsComponent);
+
+const HostDetailsComponent = React.memo<HostDetailsProps & PropsFromRedux>(
+  ({
+    filters,
+    from,
+    isInitializing,
+    query,
+    setAbsoluteRangeDatePicker,
+    setHostDetailsTablesActivePageToZero,
+    setQuery,
+    to,
+    detailName,
+    deleteQuery,
+    hostDetailsPagePath,
+  }) => {
+    useEffect(() => {
+      setHostDetailsTablesActivePageToZero();
+    }, [setHostDetailsTablesActivePageToZero, detailName]);
+    const capabilities = useMlCapabilities();
+    const kibana = useKibana();
+    const hostDetailsPageFilters: Filter[] = useMemo(() => getHostDetailsPageFilters(detailName), [
+      detailName,
+    ]);
+    const getFilters = () => [...hostDetailsPageFilters, ...filters];
+    const narrowDateRange = useCallback<UpdateDateRange>(
+      ({ x }) => {
+        if (!x) {
+          return;
+        }
+        const [min, max] = x;
+        setAbsoluteRangeDatePicker({ id: 'global', from: min, to: max });
+      },
+      [setAbsoluteRangeDatePicker]
+    );
+
+    return (
+      <>
+        <WithSource sourceId="default">
+          {({ indicesExist, indexPattern }) => {
+            const filterQuery = convertToBuildEsQuery({
+              config: esQuery.getEsQueryConfig(kibana.services.uiSettings),
+              indexPattern,
+              queries: [query],
+              filters: getFilters(),
+            });
+            return indicesExistOrDataTemporarilyUnavailable(indicesExist) ? (
+              <StickyContainer>
+                <FiltersGlobal>
+                  <SiemSearchBar indexPattern={indexPattern} id="global" />
+                </FiltersGlobal>
+
+                <WrapperPage>
+                  <HeaderPage
+                    border
+                    subtitle={
+                      <LastEventTime
+                        indexKey={LastEventIndexKey.hostDetails}
+                        hostName={detailName}
+                      />
+                    }
+                    title={detailName}
+                  />
+
+                  <HostOverviewByNameQuery
+                    sourceId="default"
+                    hostName={detailName}
+                    skip={isInitializing}
+                    startDate={from}
+                    endDate={to}
+                  >
+                    {({ hostOverview, loading, id, inspect, refetch }) => (
+                      <AnomalyTableProvider
+                        criteriaFields={hostToCriteria(hostOverview)}
+                        startDate={from}
+                        endDate={to}
+                        skip={isInitializing}
+                      >
+                        {({ isLoadingAnomaliesData, anomaliesData }) => (
+                          <HostOverviewManage
+                            id={id}
+                            inspect={inspect}
+                            refetch={refetch}
+                            setQuery={setQuery}
+                            data={hostOverview}
+                            anomaliesData={anomaliesData}
+                            isLoadingAnomaliesData={isLoadingAnomaliesData}
+                            loading={loading}
+                            startDate={from}
+                            endDate={to}
+                            narrowDateRange={(score, interval) => {
+                              const fromTo = scoreIntervalToDateTime(score, interval);
+                              setAbsoluteRangeDatePicker({
+                                id: 'global',
+                                from: fromTo.from,
+                                to: fromTo.to,
+                              });
+                            }}
+                          />
+                        )}
+                      </AnomalyTableProvider>
+                    )}
+                  </HostOverviewByNameQuery>
+
+                  <EuiHorizontalRule />
+
+                  <KpiHostDetailsQuery
+                    sourceId="default"
+                    filterQuery={filterQuery}
+                    skip={isInitializing}
+                    startDate={from}
+                    endDate={to}
+                  >
+                    {({ kpiHostDetails, id, inspect, loading, refetch }) => (
+                      <KpiHostDetailsManage
+                        data={kpiHostDetails}
+                        from={from}
+                        id={id}
+                        inspect={inspect}
+                        loading={loading}
+                        refetch={refetch}
+                        setQuery={setQuery}
+                        to={to}
+                        narrowDateRange={narrowDateRange}
+                      />
+                    )}
+                  </KpiHostDetailsQuery>
+
+                  <EuiSpacer />
+
+                  <SiemNavigation
+                    navTabs={navTabsHostDetails(detailName, hasMlUserPermissions(capabilities))}
+                  />
+
+                  <EuiSpacer />
+
+                  <HostDetailsTabs
+                    isInitializing={isInitializing}
+                    deleteQuery={deleteQuery}
+                    pageFilters={hostDetailsPageFilters}
+                    to={to}
+                    from={from}
+                    detailName={detailName}
+                    type={type}
+                    setQuery={setQuery}
+                    filterQuery={filterQuery}
+                    hostDetailsPagePath={hostDetailsPagePath}
+                    indexPattern={indexPattern}
+                    setAbsoluteRangeDatePicker={setAbsoluteRangeDatePicker}
+                  />
+                </WrapperPage>
+              </StickyContainer>
+            ) : (
+              <WrapperPage>
+                <HeaderPage border title={detailName} />
+
+                <HostsEmptyPage />
+              </WrapperPage>
+            );
+          }}
+        </WithSource>
+
+        <SpyRoute />
+      </>
+    );
+  }
+);
+HostDetailsComponent.displayName = 'HostDetailsComponent';
+
+export const makeMapStateToProps = () => {
+  const getGlobalQuerySelector = inputsSelectors.globalQuerySelector();
+  const getGlobalFiltersQuerySelector = inputsSelectors.globalFiltersQuerySelector();
+  return (state: State) => ({
+    query: getGlobalQuerySelector(state),
+    filters: getGlobalFiltersQuerySelector(state),
+  });
+};
+
+const mapDispatchToProps = {
+  setAbsoluteRangeDatePicker: dispatchAbsoluteRangeDatePicker,
+  setHostDetailsTablesActivePageToZero: dispatchHostDetailsTablesActivePageToZero,
+};
+
+const connector = connect(makeMapStateToProps, mapDispatchToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export const HostDetails = connector(HostDetailsComponent);
diff --git a/x-pack/plugins/siem/public/hosts/pages/details/nav_tabs.test.tsx b/x-pack/plugins/siem/public/hosts/pages/details/nav_tabs.test.tsx
new file mode 100644
index 00000000000000..0dd31dc9abce7f
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/pages/details/nav_tabs.test.tsx
@@ -0,0 +1,27 @@
+/*
+ * 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 { HostsTableType } from '../../store/model';
+import { navTabsHostDetails } from './nav_tabs';
+
+describe('navTabsHostDetails', () => {
+  const mockHostName = 'mockHostName';
+  test('it should skip anomalies tab if without mlUserPermission', () => {
+    const tabs = navTabsHostDetails(mockHostName, false);
+    expect(tabs).toHaveProperty(HostsTableType.authentications);
+    expect(tabs).toHaveProperty(HostsTableType.uncommonProcesses);
+    expect(tabs).not.toHaveProperty(HostsTableType.anomalies);
+    expect(tabs).toHaveProperty(HostsTableType.events);
+  });
+
+  test('it should display anomalies tab if with mlUserPermission', () => {
+    const tabs = navTabsHostDetails(mockHostName, true);
+    expect(tabs).toHaveProperty(HostsTableType.authentications);
+    expect(tabs).toHaveProperty(HostsTableType.uncommonProcesses);
+    expect(tabs).toHaveProperty(HostsTableType.anomalies);
+    expect(tabs).toHaveProperty(HostsTableType.events);
+  });
+});
diff --git a/x-pack/plugins/siem/public/hosts/pages/details/nav_tabs.tsx b/x-pack/plugins/siem/public/hosts/pages/details/nav_tabs.tsx
new file mode 100644
index 00000000000000..4d04d16580a638
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/pages/details/nav_tabs.tsx
@@ -0,0 +1,65 @@
+/*
+ * 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 { omit } from 'lodash/fp';
+import * as i18n from '../translations';
+import { HostDetailsNavTab } from './types';
+import { HostsTableType } from '../../store/model';
+import { SiemPageName } from '../../../app/types';
+
+const getTabsOnHostDetailsUrl = (hostName: string, tabName: HostsTableType) =>
+  `#/${SiemPageName.hosts}/${hostName}/${tabName}`;
+
+export const navTabsHostDetails = (
+  hostName: string,
+  hasMlUserPermissions: boolean
+): HostDetailsNavTab => {
+  const hostDetailsNavTabs = {
+    [HostsTableType.authentications]: {
+      id: HostsTableType.authentications,
+      name: i18n.NAVIGATION_AUTHENTICATIONS_TITLE,
+      href: getTabsOnHostDetailsUrl(hostName, HostsTableType.authentications),
+      disabled: false,
+      urlKey: 'host',
+      isDetailPage: true,
+    },
+    [HostsTableType.uncommonProcesses]: {
+      id: HostsTableType.uncommonProcesses,
+      name: i18n.NAVIGATION_UNCOMMON_PROCESSES_TITLE,
+      href: getTabsOnHostDetailsUrl(hostName, HostsTableType.uncommonProcesses),
+      disabled: false,
+      urlKey: 'host',
+      isDetailPage: true,
+    },
+    [HostsTableType.anomalies]: {
+      id: HostsTableType.anomalies,
+      name: i18n.NAVIGATION_ANOMALIES_TITLE,
+      href: getTabsOnHostDetailsUrl(hostName, HostsTableType.anomalies),
+      disabled: false,
+      urlKey: 'host',
+      isDetailPage: true,
+    },
+    [HostsTableType.events]: {
+      id: HostsTableType.events,
+      name: i18n.NAVIGATION_EVENTS_TITLE,
+      href: getTabsOnHostDetailsUrl(hostName, HostsTableType.events),
+      disabled: false,
+      urlKey: 'host',
+      isDetailPage: true,
+    },
+    [HostsTableType.alerts]: {
+      id: HostsTableType.alerts,
+      name: i18n.NAVIGATION_ALERTS_TITLE,
+      href: getTabsOnHostDetailsUrl(hostName, HostsTableType.alerts),
+      disabled: false,
+      urlKey: 'host',
+    },
+  };
+
+  return hasMlUserPermissions
+    ? hostDetailsNavTabs
+    : omit(HostsTableType.anomalies, hostDetailsNavTabs);
+};
diff --git a/x-pack/plugins/siem/public/hosts/pages/details/types.ts b/x-pack/plugins/siem/public/hosts/pages/details/types.ts
new file mode 100644
index 00000000000000..f145abed2d8ffc
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/pages/details/types.ts
@@ -0,0 +1,71 @@
+/*
+ * 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 { ActionCreator } from 'typescript-fsa';
+import { Query, IIndexPattern, Filter } from 'src/plugins/data/public';
+import { InputsModelId } from '../../../common/store/inputs/constants';
+import { HostComponentProps } from '../../../common/components/link_to/redirect_to_hosts';
+import { HostsTableType } from '../../store/model';
+import { HostsQueryProps } from '../types';
+import { NavTab } from '../../../common/components/navigation/types';
+import { KeyHostsNavTabWithoutMlPermission } from '../navigation/types';
+import { hostsModel } from '../../store';
+
+interface HostDetailsComponentReduxProps {
+  query: Query;
+  filters: Filter[];
+}
+
+interface HostBodyComponentDispatchProps {
+  setAbsoluteRangeDatePicker: ActionCreator<{
+    id: InputsModelId;
+    from: number;
+    to: number;
+  }>;
+  detailName: string;
+  hostDetailsPagePath: string;
+}
+
+interface HostDetailsComponentDispatchProps extends HostBodyComponentDispatchProps {
+  setHostDetailsTablesActivePageToZero: ActionCreator<null>;
+}
+
+export interface HostDetailsProps extends HostsQueryProps {
+  detailName: string;
+  hostDetailsPagePath: string;
+}
+
+export type HostDetailsComponentProps = HostDetailsComponentReduxProps &
+  HostDetailsComponentDispatchProps &
+  HostComponentProps &
+  HostsQueryProps;
+
+type KeyHostDetailsNavTabWithoutMlPermission = HostsTableType.authentications &
+  HostsTableType.uncommonProcesses &
+  HostsTableType.events;
+
+type KeyHostDetailsNavTabWithMlPermission = KeyHostsNavTabWithoutMlPermission &
+  HostsTableType.anomalies;
+
+type KeyHostDetailsNavTab =
+  | KeyHostDetailsNavTabWithoutMlPermission
+  | KeyHostDetailsNavTabWithMlPermission;
+
+export type HostDetailsNavTab = Record<KeyHostDetailsNavTab, NavTab>;
+
+export type HostDetailsTabsProps = HostBodyComponentDispatchProps &
+  HostsQueryProps & {
+    pageFilters?: Filter[];
+    filterQuery: string;
+    indexPattern: IIndexPattern;
+    type: hostsModel.HostsType;
+  };
+
+export type SetAbsoluteRangeDatePicker = ActionCreator<{
+  id: InputsModelId;
+  from: number;
+  to: number;
+}>;
diff --git a/x-pack/plugins/siem/public/hosts/pages/details/utils.ts b/x-pack/plugins/siem/public/hosts/pages/details/utils.ts
new file mode 100644
index 00000000000000..d45cb3368b4e19
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/pages/details/utils.ts
@@ -0,0 +1,62 @@
+/*
+ * 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 { get, isEmpty } from 'lodash/fp';
+
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { ChromeBreadcrumb } from '../../../../../../../src/core/public';
+import { hostsModel } from '../../store';
+import { HostsTableType } from '../../store/model';
+import {
+  getHostsUrl,
+  getHostDetailsUrl,
+} from '../../../common/components/link_to/redirect_to_hosts';
+
+import * as i18n from '../translations';
+import { HostRouteSpyState } from '../../../common/utils/route/types';
+
+export const type = hostsModel.HostsType.details;
+
+const TabNameMappedToI18nKey: Record<HostsTableType, string> = {
+  [HostsTableType.hosts]: i18n.NAVIGATION_ALL_HOSTS_TITLE,
+  [HostsTableType.authentications]: i18n.NAVIGATION_AUTHENTICATIONS_TITLE,
+  [HostsTableType.uncommonProcesses]: i18n.NAVIGATION_UNCOMMON_PROCESSES_TITLE,
+  [HostsTableType.anomalies]: i18n.NAVIGATION_ANOMALIES_TITLE,
+  [HostsTableType.events]: i18n.NAVIGATION_EVENTS_TITLE,
+  [HostsTableType.alerts]: i18n.NAVIGATION_ALERTS_TITLE,
+};
+
+export const getBreadcrumbs = (params: HostRouteSpyState, search: string[]): ChromeBreadcrumb[] => {
+  let breadcrumb = [
+    {
+      text: i18n.PAGE_TITLE,
+      href: `${getHostsUrl()}${!isEmpty(search[0]) ? search[0] : ''}`,
+    },
+  ];
+
+  if (params.detailName != null) {
+    breadcrumb = [
+      ...breadcrumb,
+      {
+        text: params.detailName,
+        href: `${getHostDetailsUrl(params.detailName)}${!isEmpty(search[1]) ? search[1] : ''}`,
+      },
+    ];
+  }
+  if (params.tabName != null) {
+    const tabName = get('tabName', params);
+    if (!tabName) return breadcrumb;
+
+    breadcrumb = [
+      ...breadcrumb,
+      {
+        text: TabNameMappedToI18nKey[tabName],
+        href: '',
+      },
+    ];
+  }
+  return breadcrumb;
+};
diff --git a/x-pack/plugins/siem/public/pages/hosts/hosts.test.tsx b/x-pack/plugins/siem/public/hosts/pages/hosts.test.tsx
similarity index 88%
rename from x-pack/plugins/siem/public/pages/hosts/hosts.test.tsx
rename to x-pack/plugins/siem/public/hosts/pages/hosts.test.tsx
index 6134c1dd6911a2..5cb35eaa775b6f 100644
--- a/x-pack/plugins/siem/public/pages/hosts/hosts.test.tsx
+++ b/x-pack/plugins/siem/public/hosts/pages/hosts.test.tsx
@@ -11,23 +11,28 @@ import { Router } from 'react-router-dom';
 import { MockedProvider } from 'react-apollo/test-utils';
 
 import { Filter } from '../../../../../../src/plugins/data/common/es_query';
-import '../../mock/match_media';
-import { mocksSource } from '../../containers/source/mock';
-import { wait } from '../../lib/helpers';
-import { apolloClientObservable, TestProviders, mockGlobalState } from '../../mock';
-import { SiemNavigation } from '../../components/navigation';
-import { inputsActions } from '../../store/inputs';
-import { State, createStore } from '../../store';
+import '../../common/mock/match_media';
+import { mocksSource } from '../../common/containers/source/mock';
+import { wait } from '../../common/lib/helpers';
+import {
+  apolloClientObservable,
+  TestProviders,
+  mockGlobalState,
+  SUB_PLUGINS_REDUCER,
+} from '../../common/mock';
+import { SiemNavigation } from '../../common/components/navigation';
+import { inputsActions } from '../../common/store/inputs';
+import { State, createStore } from '../../common/store';
 import { HostsComponentProps } from './types';
 import { Hosts } from './hosts';
 import { HostsTabs } from './hosts_tabs';
 
 // Test will fail because we will to need to mock some core services to make the test work
 // For now let's forget about SiemSearchBar and QueryBar
-jest.mock('../../components/search_bar', () => ({
+jest.mock('../../common/components/search_bar', () => ({
   SiemSearchBar: () => null,
 }));
-jest.mock('../../components/query_bar', () => ({
+jest.mock('../../common/components/query_bar', () => ({
   QueryBar: () => null,
 }));
 
@@ -166,7 +171,7 @@ describe('Hosts - rendering', () => {
     ];
     localSource[0].result.data.source.status.indicesExist = true;
     const myState: State = mockGlobalState;
-    const myStore = createStore(myState, apolloClientObservable);
+    const myStore = createStore(myState, SUB_PLUGINS_REDUCER, apolloClientObservable);
     const wrapper = mount(
       <TestProviders store={myStore}>
         <MockedProvider mocks={localSource} addTypename={false}>
diff --git a/x-pack/plugins/siem/public/pages/hosts/hosts.tsx b/x-pack/plugins/siem/public/hosts/pages/hosts.tsx
similarity index 81%
rename from x-pack/plugins/siem/public/pages/hosts/hosts.tsx
rename to x-pack/plugins/siem/public/hosts/pages/hosts.tsx
index 0e29d634d07a62..f7583f65a4fcd4 100644
--- a/x-pack/plugins/siem/public/pages/hosts/hosts.tsx
+++ b/x-pack/plugins/siem/public/hosts/pages/hosts.tsx
@@ -10,34 +10,38 @@ import { connect, ConnectedProps } from 'react-redux';
 import { StickyContainer } from 'react-sticky';
 
 import { useParams } from 'react-router-dom';
-import { UpdateDateRange } from '../../components/charts/common';
-import { FiltersGlobal } from '../../components/filters_global';
-import { HeaderPage } from '../../components/header_page';
-import { LastEventTime } from '../../components/last_event_time';
+import { UpdateDateRange } from '../../common/components/charts/common';
+import { FiltersGlobal } from '../../common/components/filters_global';
+import { HeaderPage } from '../../common/components/header_page';
+import { LastEventTime } from '../../common/components/last_event_time';
 import { hasMlUserPermissions } from '../../../common/machine_learning/has_ml_user_permissions';
-import { SiemNavigation } from '../../components/navigation';
-import { KpiHostsComponent } from '../../components/page/hosts';
-import { manageQuery } from '../../components/page/manage_query';
-import { SiemSearchBar } from '../../components/search_bar';
-import { WrapperPage } from '../../components/wrapper_page';
-import { KpiHostsQuery } from '../../containers/kpi_hosts';
-import { indicesExistOrDataTemporarilyUnavailable, WithSource } from '../../containers/source';
+import { SiemNavigation } from '../../common/components/navigation';
+import { KpiHostsComponent } from '../components/kpi_hosts';
+import { manageQuery } from '../../common/components/page/manage_query';
+import { SiemSearchBar } from '../../common/components/search_bar';
+import { WrapperPage } from '../../common/components/wrapper_page';
+import { KpiHostsQuery } from '../containers/kpi_hosts';
+import {
+  indicesExistOrDataTemporarilyUnavailable,
+  WithSource,
+} from '../../common/containers/source';
 import { LastEventIndexKey } from '../../graphql/types';
-import { useKibana } from '../../lib/kibana';
-import { convertToBuildEsQuery } from '../../lib/keury';
-import { inputsSelectors, State, hostsModel } from '../../store';
-import { setAbsoluteRangeDatePicker as dispatchSetAbsoluteRangeDatePicker } from '../../store/inputs/actions';
+import { useKibana } from '../../common/lib/kibana';
+import { convertToBuildEsQuery } from '../../common/lib/keury';
+import { inputsSelectors, State } from '../../common/store';
+import { setAbsoluteRangeDatePicker as dispatchSetAbsoluteRangeDatePicker } from '../../common/store/inputs/actions';
 
-import { SpyRoute } from '../../utils/route/spy_routes';
+import { SpyRoute } from '../../common/utils/route/spy_routes';
 import { esQuery } from '../../../../../../src/plugins/data/public';
-import { useMlCapabilities } from '../../components/ml_popover/hooks/use_ml_capabilities';
+import { useMlCapabilities } from '../../common/components/ml_popover/hooks/use_ml_capabilities';
 import { HostsEmptyPage } from './hosts_empty_page';
 import { HostsTabs } from './hosts_tabs';
 import { navTabsHosts } from './nav_tabs';
 import * as i18n from './translations';
 import { HostsComponentProps } from './types';
 import { filterHostData } from './navigation';
-import { HostsTableType } from '../../store/hosts/model';
+import { hostsModel } from '../store';
+import { HostsTableType } from '../store/model';
 
 const KpiHostsComponentManage = manageQuery(KpiHostsComponent);
 
diff --git a/x-pack/plugins/siem/public/pages/hosts/hosts_empty_page.tsx b/x-pack/plugins/siem/public/hosts/pages/hosts_empty_page.tsx
similarity index 85%
rename from x-pack/plugins/siem/public/pages/hosts/hosts_empty_page.tsx
rename to x-pack/plugins/siem/public/hosts/pages/hosts_empty_page.tsx
index bded0b90e187be..e52fc89678038f 100644
--- a/x-pack/plugins/siem/public/pages/hosts/hosts_empty_page.tsx
+++ b/x-pack/plugins/siem/public/hosts/pages/hosts_empty_page.tsx
@@ -6,10 +6,9 @@
 
 import React from 'react';
 
-import { EmptyPage } from '../../components/empty_page';
-import { useKibana } from '../../lib/kibana';
-
-import * as i18n from '../common/translations';
+import { EmptyPage } from '../../common/components/empty_page';
+import { useKibana } from '../../common/lib/kibana';
+import * as i18n from '../../common/translations';
 
 export const HostsEmptyPage = React.memo(() => {
   const { http, docLinks } = useKibana().services;
diff --git a/x-pack/plugins/siem/public/pages/hosts/hosts_tabs.tsx b/x-pack/plugins/siem/public/hosts/pages/hosts_tabs.tsx
similarity index 84%
rename from x-pack/plugins/siem/public/pages/hosts/hosts_tabs.tsx
rename to x-pack/plugins/siem/public/hosts/pages/hosts_tabs.tsx
index de25deeb5b477c..549c198a435263 100644
--- a/x-pack/plugins/siem/public/pages/hosts/hosts_tabs.tsx
+++ b/x-pack/plugins/siem/public/hosts/pages/hosts_tabs.tsx
@@ -8,12 +8,12 @@ import React, { memo, useCallback } from 'react';
 import { Route, Switch } from 'react-router-dom';
 
 import { HostsTabsProps } from './types';
-import { scoreIntervalToDateTime } from '../../components/ml/score/score_interval_to_datetime';
-import { Anomaly } from '../../components/ml/types';
-import { HostsTableType } from '../../store/hosts/model';
-import { AnomaliesQueryTabBody } from '../../containers/anomalies/anomalies_query_tab_body';
-import { AnomaliesHostTable } from '../../components/ml/tables/anomalies_host_table';
-import { UpdateDateRange } from '../../components/charts/common';
+import { scoreIntervalToDateTime } from '../../common/components/ml/score/score_interval_to_datetime';
+import { Anomaly } from '../../common/components/ml/types';
+import { HostsTableType } from '../store/model';
+import { AnomaliesQueryTabBody } from '../../common/containers/anomalies/anomalies_query_tab_body';
+import { AnomaliesHostTable } from '../../common/components/ml/tables/anomalies_host_table';
+import { UpdateDateRange } from '../../common/components/charts/common';
 
 import {
   HostsQueryTabBody,
diff --git a/x-pack/plugins/siem/public/hosts/pages/index.tsx b/x-pack/plugins/siem/public/hosts/pages/index.tsx
new file mode 100644
index 00000000000000..336abc60e5ba16
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/pages/index.tsx
@@ -0,0 +1,95 @@
+/*
+ * 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 { Redirect, Route, Switch, RouteComponentProps } from 'react-router-dom';
+
+import { HostDetails } from './details';
+import { HostsTableType } from '../store/model';
+
+import { GlobalTime } from '../../common/containers/global_time';
+import { SiemPageName } from '../../app/types';
+import { Hosts } from './hosts';
+import { hostsPagePath, hostDetailsPagePath } from './types';
+
+const getHostsTabPath = (pagePath: string) =>
+  `${pagePath}/:tabName(` +
+  `${HostsTableType.hosts}|` +
+  `${HostsTableType.authentications}|` +
+  `${HostsTableType.uncommonProcesses}|` +
+  `${HostsTableType.anomalies}|` +
+  `${HostsTableType.events}|` +
+  `${HostsTableType.alerts})`;
+
+const getHostDetailsTabPath = (pagePath: string) =>
+  `${hostDetailsPagePath}/:tabName(` +
+  `${HostsTableType.authentications}|` +
+  `${HostsTableType.uncommonProcesses}|` +
+  `${HostsTableType.anomalies}|` +
+  `${HostsTableType.events}|` +
+  `${HostsTableType.alerts})`;
+
+type Props = Partial<RouteComponentProps<{}>> & { url: string };
+
+export const HostsContainer = React.memo<Props>(({ url }) => (
+  <GlobalTime>
+    {({ to, from, setQuery, deleteQuery, isInitializing }) => (
+      <Switch>
+        <Route
+          strict
+          exact
+          path={getHostsTabPath(hostsPagePath)}
+          render={() => (
+            <Hosts
+              hostsPagePath={hostsPagePath}
+              from={from}
+              to={to}
+              setQuery={setQuery}
+              isInitializing={isInitializing}
+              deleteQuery={deleteQuery}
+            />
+          )}
+        />
+        <Route
+          strict
+          path={getHostDetailsTabPath(hostsPagePath)}
+          render={({
+            match: {
+              params: { detailName },
+            },
+          }) => (
+            <HostDetails
+              hostDetailsPagePath={hostDetailsPagePath}
+              detailName={detailName}
+              from={from}
+              to={to}
+              setQuery={setQuery}
+              isInitializing={isInitializing}
+              deleteQuery={deleteQuery}
+            />
+          )}
+        />
+        <Route
+          path={hostDetailsPagePath}
+          render={({
+            match: {
+              params: { detailName },
+            },
+            location: { search = '' },
+          }) => <Redirect to={`${url}/${detailName}/${HostsTableType.authentications}${search}`} />}
+        />
+        <Route
+          path={`${hostsPagePath}/`}
+          render={({ location: { search = '' } }) => (
+            <Redirect to={`/${SiemPageName.hosts}/${HostsTableType.hosts}${search}`} />
+          )}
+        />
+      </Switch>
+    )}
+  </GlobalTime>
+));
+
+HostsContainer.displayName = 'HostsContainer';
diff --git a/x-pack/plugins/siem/public/hosts/pages/nav_tabs.test.tsx b/x-pack/plugins/siem/public/hosts/pages/nav_tabs.test.tsx
new file mode 100644
index 00000000000000..745c454e13f5aa
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/pages/nav_tabs.test.tsx
@@ -0,0 +1,28 @@
+/*
+ * 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 { HostsTableType } from '../store/model';
+import { navTabsHosts } from './nav_tabs';
+
+describe('navTabsHosts', () => {
+  test('it should skip anomalies tab if without mlUserPermission', () => {
+    const tabs = navTabsHosts(false);
+    expect(tabs).toHaveProperty(HostsTableType.hosts);
+    expect(tabs).toHaveProperty(HostsTableType.authentications);
+    expect(tabs).toHaveProperty(HostsTableType.uncommonProcesses);
+    expect(tabs).not.toHaveProperty(HostsTableType.anomalies);
+    expect(tabs).toHaveProperty(HostsTableType.events);
+  });
+
+  test('it should display anomalies tab if with mlUserPermission', () => {
+    const tabs = navTabsHosts(true);
+    expect(tabs).toHaveProperty(HostsTableType.hosts);
+    expect(tabs).toHaveProperty(HostsTableType.authentications);
+    expect(tabs).toHaveProperty(HostsTableType.uncommonProcesses);
+    expect(tabs).toHaveProperty(HostsTableType.anomalies);
+    expect(tabs).toHaveProperty(HostsTableType.events);
+  });
+});
diff --git a/x-pack/plugins/siem/public/hosts/pages/nav_tabs.tsx b/x-pack/plugins/siem/public/hosts/pages/nav_tabs.tsx
new file mode 100644
index 00000000000000..9bab3f7efe74af
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/pages/nav_tabs.tsx
@@ -0,0 +1,62 @@
+/*
+ * 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 { omit } from 'lodash/fp';
+import * as i18n from './translations';
+import { HostsTableType } from '../store/model';
+import { HostsNavTab } from './navigation/types';
+import { SiemPageName } from '../../app/types';
+
+const getTabsOnHostsUrl = (tabName: HostsTableType) => `#/${SiemPageName.hosts}/${tabName}`;
+
+export const navTabsHosts = (hasMlUserPermissions: boolean): HostsNavTab => {
+  const hostsNavTabs = {
+    [HostsTableType.hosts]: {
+      id: HostsTableType.hosts,
+      name: i18n.NAVIGATION_ALL_HOSTS_TITLE,
+      href: getTabsOnHostsUrl(HostsTableType.hosts),
+      disabled: false,
+      urlKey: 'host',
+    },
+    [HostsTableType.authentications]: {
+      id: HostsTableType.authentications,
+      name: i18n.NAVIGATION_AUTHENTICATIONS_TITLE,
+      href: getTabsOnHostsUrl(HostsTableType.authentications),
+      disabled: false,
+      urlKey: 'host',
+    },
+    [HostsTableType.uncommonProcesses]: {
+      id: HostsTableType.uncommonProcesses,
+      name: i18n.NAVIGATION_UNCOMMON_PROCESSES_TITLE,
+      href: getTabsOnHostsUrl(HostsTableType.uncommonProcesses),
+      disabled: false,
+      urlKey: 'host',
+    },
+    [HostsTableType.anomalies]: {
+      id: HostsTableType.anomalies,
+      name: i18n.NAVIGATION_ANOMALIES_TITLE,
+      href: getTabsOnHostsUrl(HostsTableType.anomalies),
+      disabled: false,
+      urlKey: 'host',
+    },
+    [HostsTableType.events]: {
+      id: HostsTableType.events,
+      name: i18n.NAVIGATION_EVENTS_TITLE,
+      href: getTabsOnHostsUrl(HostsTableType.events),
+      disabled: false,
+      urlKey: 'host',
+    },
+    [HostsTableType.alerts]: {
+      id: HostsTableType.alerts,
+      name: i18n.NAVIGATION_ALERTS_TITLE,
+      href: getTabsOnHostsUrl(HostsTableType.alerts),
+      disabled: false,
+      urlKey: 'host',
+    },
+  };
+
+  return hasMlUserPermissions ? hostsNavTabs : omit([HostsTableType.anomalies], hostsNavTabs);
+};
diff --git a/x-pack/plugins/siem/public/hosts/pages/navigation/alerts_query_tab_body.tsx b/x-pack/plugins/siem/public/hosts/pages/navigation/alerts_query_tab_body.tsx
new file mode 100644
index 00000000000000..a0d8df6b87514b
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/pages/navigation/alerts_query_tab_body.tsx
@@ -0,0 +1,54 @@
+/*
+ * 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, { useMemo } from 'react';
+
+import { Filter } from '../../../../../../../src/plugins/data/public';
+import { AlertsView } from '../../../common/components/alerts_viewer';
+import { AlertsComponentQueryProps } from './types';
+
+export const filterHostData: Filter[] = [
+  {
+    query: {
+      bool: {
+        filter: [
+          {
+            bool: {
+              should: [
+                {
+                  exists: {
+                    field: 'host.name',
+                  },
+                },
+              ],
+              minimum_should_match: 1,
+            },
+          },
+        ],
+      },
+    },
+    meta: {
+      alias: '',
+      disabled: false,
+      key: 'bool',
+      negate: false,
+      type: 'custom',
+      value:
+        '{"query": {"bool": {"filter": [{"bool": {"should": [{"exists": {"field": "host.name"}}],"minimum_should_match": 1}}]}}}',
+    },
+  },
+];
+export const HostAlertsQueryTabBody = React.memo((alertsProps: AlertsComponentQueryProps) => {
+  const { pageFilters, ...rest } = alertsProps;
+  const hostPageFilters = useMemo(
+    () => (pageFilters != null ? [...filterHostData, ...pageFilters] : filterHostData),
+    [pageFilters]
+  );
+
+  return <AlertsView {...rest} pageFilters={hostPageFilters} />;
+});
+
+HostAlertsQueryTabBody.displayName = 'HostAlertsQueryTabBody';
diff --git a/x-pack/plugins/siem/public/pages/hosts/navigation/authentications_query_tab_body.tsx b/x-pack/plugins/siem/public/hosts/pages/navigation/authentications_query_tab_body.tsx
similarity index 86%
rename from x-pack/plugins/siem/public/pages/hosts/navigation/authentications_query_tab_body.tsx
rename to x-pack/plugins/siem/public/hosts/pages/navigation/authentications_query_tab_body.tsx
index 5a6759fd072217..ae7c0205acf56a 100644
--- a/x-pack/plugins/siem/public/pages/hosts/navigation/authentications_query_tab_body.tsx
+++ b/x-pack/plugins/siem/public/hosts/pages/navigation/authentications_query_tab_body.tsx
@@ -6,18 +6,18 @@
 
 import { getOr } from 'lodash/fp';
 import React, { useEffect } from 'react';
-import { AuthenticationTable } from '../../../components/page/hosts/authentications_table';
-import { manageQuery } from '../../../components/page/manage_query';
-import { AuthenticationsQuery } from '../../../containers/authentications';
+import { AuthenticationTable } from '../../components/authentications_table';
+import { manageQuery } from '../../../common/components/page/manage_query';
+import { AuthenticationsQuery } from '../../containers/authentications';
 import { HostsComponentsQueryProps } from './types';
-import { hostsModel } from '../../../store/hosts';
+import { hostsModel } from '../../store';
 import {
   MatrixHistogramOption,
   MatrixHistogramMappingTypes,
   MatrixHisrogramConfigs,
-} from '../../../components/matrix_histogram/types';
-import { MatrixHistogramContainer } from '../../../components/matrix_histogram';
-import { KpiHostsChartColors } from '../../../components/page/hosts/kpi_hosts/types';
+} from '../../../common/components/matrix_histogram/types';
+import { MatrixHistogramContainer } from '../../../common/components/matrix_histogram';
+import { KpiHostsChartColors } from '../../components/kpi_hosts/types';
 import * as i18n from '../translations';
 import { HistogramType } from '../../../graphql/types';
 
diff --git a/x-pack/plugins/siem/public/pages/hosts/navigation/events_query_tab_body.tsx b/x-pack/plugins/siem/public/hosts/pages/navigation/events_query_tab_body.tsx
similarity index 85%
rename from x-pack/plugins/siem/public/pages/hosts/navigation/events_query_tab_body.tsx
rename to x-pack/plugins/siem/public/hosts/pages/navigation/events_query_tab_body.tsx
index cb2c19c642bc45..6d2183a3a38d96 100644
--- a/x-pack/plugins/siem/public/pages/hosts/navigation/events_query_tab_body.tsx
+++ b/x-pack/plugins/siem/public/hosts/pages/navigation/events_query_tab_body.tsx
@@ -5,15 +5,15 @@
  */
 
 import React, { useEffect } from 'react';
-import { StatefulEventsViewer } from '../../../components/events_viewer';
+import { StatefulEventsViewer } from '../../../common/components/events_viewer';
 import { HostsComponentsQueryProps } from './types';
-import { hostsModel } from '../../../store/hosts';
-import { eventsDefaultModel } from '../../../components/events_viewer/default_model';
+import { hostsModel } from '../../store';
+import { eventsDefaultModel } from '../../../common/components/events_viewer/default_model';
 import {
   MatrixHistogramOption,
   MatrixHisrogramConfigs,
-} from '../../../components/matrix_histogram/types';
-import { MatrixHistogramContainer } from '../../../components/matrix_histogram';
+} from '../../../common/components/matrix_histogram/types';
+import { MatrixHistogramContainer } from '../../../common/components/matrix_histogram';
 import * as i18n from '../translations';
 import { HistogramType } from '../../../graphql/types';
 
diff --git a/x-pack/plugins/siem/public/pages/hosts/navigation/hosts_query_tab_body.tsx b/x-pack/plugins/siem/public/hosts/pages/navigation/hosts_query_tab_body.tsx
similarity index 88%
rename from x-pack/plugins/siem/public/pages/hosts/navigation/hosts_query_tab_body.tsx
rename to x-pack/plugins/siem/public/hosts/pages/navigation/hosts_query_tab_body.tsx
index 6c301d692d0e17..95be25a6c4fecf 100644
--- a/x-pack/plugins/siem/public/pages/hosts/navigation/hosts_query_tab_body.tsx
+++ b/x-pack/plugins/siem/public/hosts/pages/navigation/hosts_query_tab_body.tsx
@@ -6,10 +6,10 @@
 
 import { getOr } from 'lodash/fp';
 import React from 'react';
-import { HostsQuery } from '../../../containers/hosts';
+import { HostsQuery } from '../../containers/hosts';
 import { HostsComponentsQueryProps } from './types';
-import { HostsTable } from '../../../components/page/hosts';
-import { manageQuery } from '../../../components/page/manage_query';
+import { HostsTable } from '../../components/hosts_table';
+import { manageQuery } from '../../../common/components/page/manage_query';
 
 const HostsTableManage = manageQuery(HostsTable);
 
diff --git a/x-pack/plugins/siem/public/pages/hosts/navigation/index.ts b/x-pack/plugins/siem/public/hosts/pages/navigation/index.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/hosts/navigation/index.ts
rename to x-pack/plugins/siem/public/hosts/pages/navigation/index.ts
diff --git a/x-pack/plugins/siem/public/hosts/pages/navigation/types.ts b/x-pack/plugins/siem/public/hosts/pages/navigation/types.ts
new file mode 100644
index 00000000000000..76f56fe1718aa7
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/pages/navigation/types.ts
@@ -0,0 +1,61 @@
+/*
+ * 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 { ESTermQuery } from '../../../../common/typed_json';
+import { Filter, IIndexPattern } from '../../../../../../../src/plugins/data/public';
+import { NarrowDateRange } from '../../../common/components/ml/types';
+import { InspectQuery, Refetch } from '../../../common/store/inputs/model';
+
+import { HostsTableType, HostsType } from '../../store/model';
+import { NavTab } from '../../../common/components/navigation/types';
+import { UpdateDateRange } from '../../../common/components/charts/common';
+
+export type KeyHostsNavTabWithoutMlPermission = HostsTableType.hosts &
+  HostsTableType.authentications &
+  HostsTableType.uncommonProcesses &
+  HostsTableType.events;
+
+type KeyHostsNavTabWithMlPermission = KeyHostsNavTabWithoutMlPermission & HostsTableType.anomalies;
+
+type KeyHostsNavTab = KeyHostsNavTabWithoutMlPermission | KeyHostsNavTabWithMlPermission;
+
+export type HostsNavTab = Record<KeyHostsNavTab, NavTab>;
+
+export type SetQuery = ({
+  id,
+  inspect,
+  loading,
+  refetch,
+}: {
+  id: string;
+  inspect: InspectQuery | null;
+  loading: boolean;
+  refetch: Refetch;
+}) => void;
+
+export interface QueryTabBodyProps {
+  type: HostsType;
+  startDate: number;
+  endDate: number;
+  filterQuery?: string | ESTermQuery;
+}
+
+export type HostsComponentsQueryProps = QueryTabBodyProps & {
+  deleteQuery?: ({ id }: { id: string }) => void;
+  indexPattern: IIndexPattern;
+  pageFilters?: Filter[];
+  skip: boolean;
+  setQuery: SetQuery;
+  updateDateRange?: UpdateDateRange;
+  narrowDateRange?: NarrowDateRange;
+};
+
+export type AlertsComponentQueryProps = HostsComponentsQueryProps & {
+  filterQuery: string;
+  pageFilters?: Filter[];
+};
+
+export type CommonChildren = (args: HostsComponentsQueryProps) => JSX.Element;
diff --git a/x-pack/plugins/siem/public/pages/hosts/navigation/uncommon_process_query_tab_body.tsx b/x-pack/plugins/siem/public/hosts/pages/navigation/uncommon_process_query_tab_body.tsx
similarity index 86%
rename from x-pack/plugins/siem/public/pages/hosts/navigation/uncommon_process_query_tab_body.tsx
rename to x-pack/plugins/siem/public/hosts/pages/navigation/uncommon_process_query_tab_body.tsx
index 141e2e5a63684e..f1691dbaa04b45 100644
--- a/x-pack/plugins/siem/public/pages/hosts/navigation/uncommon_process_query_tab_body.tsx
+++ b/x-pack/plugins/siem/public/hosts/pages/navigation/uncommon_process_query_tab_body.tsx
@@ -6,10 +6,10 @@
 
 import { getOr } from 'lodash/fp';
 import React from 'react';
-import { UncommonProcessesQuery } from '../../../containers/uncommon_processes';
+import { UncommonProcessesQuery } from '../../containers/uncommon_processes';
 import { HostsComponentsQueryProps } from './types';
-import { UncommonProcessTable } from '../../../components/page/hosts';
-import { manageQuery } from '../../../components/page/manage_query';
+import { UncommonProcessTable } from '../../components/uncommon_process_table';
+import { manageQuery } from '../../../common/components/page/manage_query';
 
 const UncommonProcessTableManage = manageQuery(UncommonProcessTable);
 
diff --git a/x-pack/plugins/siem/public/pages/hosts/translations.ts b/x-pack/plugins/siem/public/hosts/pages/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/hosts/translations.ts
rename to x-pack/plugins/siem/public/hosts/pages/translations.ts
diff --git a/x-pack/plugins/siem/public/hosts/pages/types.ts b/x-pack/plugins/siem/public/hosts/pages/types.ts
new file mode 100644
index 00000000000000..229349f390ecdb
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/pages/types.ts
@@ -0,0 +1,31 @@
+/*
+ * 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 { IIndexPattern } from 'src/plugins/data/public';
+import { ActionCreator } from 'typescript-fsa';
+
+import { SiemPageName } from '../../app/types';
+import { hostsModel } from '../store';
+import { GlobalTimeArgs } from '../../common/containers/global_time';
+import { InputsModelId } from '../../common/store/inputs/constants';
+
+export const hostsPagePath = `/:pageName(${SiemPageName.hosts})`;
+export const hostDetailsPagePath = `${hostsPagePath}/:detailName`;
+
+export type HostsTabsProps = HostsComponentProps & {
+  filterQuery: string;
+  type: hostsModel.HostsType;
+  indexPattern: IIndexPattern;
+  setAbsoluteRangeDatePicker: ActionCreator<{
+    id: InputsModelId;
+    from: number;
+    to: number;
+  }>;
+};
+
+export type HostsQueryProps = GlobalTimeArgs;
+
+export type HostsComponentProps = HostsQueryProps & { hostsPagePath: string };
diff --git a/x-pack/plugins/siem/public/hosts/routes.tsx b/x-pack/plugins/siem/public/hosts/routes.tsx
new file mode 100644
index 00000000000000..93585fa0f83943
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/routes.tsx
@@ -0,0 +1,18 @@
+/*
+ * 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 { Route } from 'react-router-dom';
+
+import { HostsContainer } from './pages';
+import { SiemPageName } from '../app/types';
+
+export const getHostsRoutes = () => [
+  <Route
+    path={`/:pageName(${SiemPageName.hosts})`}
+    render={({ match }) => <HostsContainer url={match.url} />}
+  />,
+];
diff --git a/x-pack/plugins/siem/public/store/hosts/actions.ts b/x-pack/plugins/siem/public/hosts/store/actions.ts
similarity index 100%
rename from x-pack/plugins/siem/public/store/hosts/actions.ts
rename to x-pack/plugins/siem/public/hosts/store/actions.ts
diff --git a/x-pack/plugins/siem/public/hosts/store/helpers.test.ts b/x-pack/plugins/siem/public/hosts/store/helpers.test.ts
new file mode 100644
index 00000000000000..4894e6d4c8c573
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/store/helpers.test.ts
@@ -0,0 +1,127 @@
+/*
+ * 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 { Direction, HostsFields } from '../../graphql/types';
+import { DEFAULT_TABLE_LIMIT } from '../../common/store/constants';
+import { HostsModel, HostsTableType, HostsType } from './model';
+import { setHostsQueriesActivePageToZero } from './helpers';
+
+export const mockHostsState: HostsModel = {
+  page: {
+    queries: {
+      [HostsTableType.authentications]: {
+        activePage: 5,
+        limit: DEFAULT_TABLE_LIMIT,
+      },
+      [HostsTableType.hosts]: {
+        activePage: 9,
+        direction: Direction.desc,
+        limit: DEFAULT_TABLE_LIMIT,
+        sortField: HostsFields.lastSeen,
+      },
+      [HostsTableType.events]: {
+        activePage: 4,
+        limit: DEFAULT_TABLE_LIMIT,
+      },
+      [HostsTableType.uncommonProcesses]: {
+        activePage: 8,
+        limit: DEFAULT_TABLE_LIMIT,
+      },
+      [HostsTableType.anomalies]: null,
+      [HostsTableType.alerts]: {
+        activePage: 4,
+        limit: DEFAULT_TABLE_LIMIT,
+      },
+    },
+  },
+  details: {
+    queries: {
+      [HostsTableType.authentications]: {
+        activePage: 5,
+        limit: DEFAULT_TABLE_LIMIT,
+      },
+      [HostsTableType.hosts]: {
+        activePage: 9,
+        direction: Direction.desc,
+        limit: DEFAULT_TABLE_LIMIT,
+        sortField: HostsFields.lastSeen,
+      },
+      [HostsTableType.events]: {
+        activePage: 4,
+        limit: DEFAULT_TABLE_LIMIT,
+      },
+      [HostsTableType.uncommonProcesses]: {
+        activePage: 8,
+        limit: DEFAULT_TABLE_LIMIT,
+      },
+      [HostsTableType.anomalies]: null,
+      [HostsTableType.alerts]: {
+        activePage: 4,
+        limit: DEFAULT_TABLE_LIMIT,
+      },
+    },
+  },
+};
+
+describe('Hosts redux store', () => {
+  describe('#setHostsQueriesActivePageToZero', () => {
+    test('set activePage to zero for all queries in hosts page  ', () => {
+      expect(setHostsQueriesActivePageToZero(mockHostsState, HostsType.page)).toEqual({
+        allHosts: {
+          activePage: 0,
+          direction: 'desc',
+          limit: 10,
+          sortField: 'lastSeen',
+        },
+        anomalies: null,
+        authentications: {
+          activePage: 0,
+          limit: 10,
+        },
+        events: {
+          activePage: 0,
+          limit: 10,
+        },
+        uncommonProcesses: {
+          activePage: 0,
+          limit: 10,
+        },
+        alerts: {
+          activePage: 0,
+          limit: 10,
+        },
+      });
+    });
+
+    test('set activePage to zero for all queries in host details  ', () => {
+      expect(setHostsQueriesActivePageToZero(mockHostsState, HostsType.details)).toEqual({
+        allHosts: {
+          activePage: 0,
+          direction: 'desc',
+          limit: 10,
+          sortField: 'lastSeen',
+        },
+        anomalies: null,
+        authentications: {
+          activePage: 0,
+          limit: 10,
+        },
+        events: {
+          activePage: 0,
+          limit: 10,
+        },
+        uncommonProcesses: {
+          activePage: 0,
+          limit: 10,
+        },
+        alerts: {
+          activePage: 0,
+          limit: 10,
+        },
+      });
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/hosts/store/helpers.ts b/x-pack/plugins/siem/public/hosts/store/helpers.ts
new file mode 100644
index 00000000000000..771c3b1061b6ce
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/store/helpers.ts
@@ -0,0 +1,66 @@
+/*
+ * 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 { DEFAULT_TABLE_ACTIVE_PAGE } from '../../common/store/constants';
+
+import { HostsModel, HostsTableType, Queries, HostsType } from './model';
+
+export const setHostPageQueriesActivePageToZero = (state: HostsModel): Queries => ({
+  ...state.page.queries,
+  [HostsTableType.authentications]: {
+    ...state.page.queries[HostsTableType.authentications],
+    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+  },
+  [HostsTableType.hosts]: {
+    ...state.page.queries[HostsTableType.hosts],
+    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+  },
+  [HostsTableType.events]: {
+    ...state.page.queries[HostsTableType.events],
+    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+  },
+  [HostsTableType.uncommonProcesses]: {
+    ...state.page.queries[HostsTableType.uncommonProcesses],
+    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+  },
+  [HostsTableType.alerts]: {
+    ...state.page.queries[HostsTableType.alerts],
+    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+  },
+});
+
+export const setHostDetailsQueriesActivePageToZero = (state: HostsModel): Queries => ({
+  ...state.details.queries,
+  [HostsTableType.authentications]: {
+    ...state.details.queries[HostsTableType.authentications],
+    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+  },
+  [HostsTableType.hosts]: {
+    ...state.details.queries[HostsTableType.hosts],
+    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+  },
+  [HostsTableType.events]: {
+    ...state.details.queries[HostsTableType.events],
+    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+  },
+  [HostsTableType.uncommonProcesses]: {
+    ...state.details.queries[HostsTableType.uncommonProcesses],
+    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+  },
+  [HostsTableType.alerts]: {
+    ...state.page.queries[HostsTableType.alerts],
+    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+  },
+});
+
+export const setHostsQueriesActivePageToZero = (state: HostsModel, type: HostsType): Queries => {
+  if (type === HostsType.page) {
+    return setHostPageQueriesActivePageToZero(state);
+  } else if (type === HostsType.details) {
+    return setHostDetailsQueriesActivePageToZero(state);
+  }
+  throw new Error(`HostsType ${type} is unknown`);
+};
diff --git a/x-pack/plugins/siem/public/hosts/store/index.ts b/x-pack/plugins/siem/public/hosts/store/index.ts
new file mode 100644
index 00000000000000..89ad4a7602fe1c
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/store/index.ts
@@ -0,0 +1,21 @@
+/*
+ * 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 { Reducer, AnyAction } from 'redux';
+import * as hostsActions from './actions';
+import * as hostsModel from './model';
+import * as hostsSelectors from './selectors';
+
+export { hostsActions, hostsModel, hostsSelectors };
+export * from './reducer';
+
+export interface HostsPluginState {
+  hosts: hostsModel.HostsModel;
+}
+
+export interface HostsPluginReducer {
+  hosts: Reducer<hostsModel.HostsModel, AnyAction>;
+}
diff --git a/x-pack/plugins/siem/public/store/hosts/model.ts b/x-pack/plugins/siem/public/hosts/store/model.ts
similarity index 100%
rename from x-pack/plugins/siem/public/store/hosts/model.ts
rename to x-pack/plugins/siem/public/hosts/store/model.ts
diff --git a/x-pack/plugins/siem/public/hosts/store/reducer.ts b/x-pack/plugins/siem/public/hosts/store/reducer.ts
new file mode 100644
index 00000000000000..59277f64650e68
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/store/reducer.ts
@@ -0,0 +1,143 @@
+/*
+ * 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 { reducerWithInitialState } from 'typescript-fsa-reducers';
+
+import { Direction, HostsFields } from '../../graphql/types';
+import { DEFAULT_TABLE_ACTIVE_PAGE, DEFAULT_TABLE_LIMIT } from '../../common/store/constants';
+
+import {
+  setHostDetailsTablesActivePageToZero,
+  setHostTablesActivePageToZero,
+  updateHostsSort,
+  updateTableActivePage,
+  updateTableLimit,
+} from './actions';
+import {
+  setHostPageQueriesActivePageToZero,
+  setHostDetailsQueriesActivePageToZero,
+} from './helpers';
+import { HostsModel, HostsTableType } from './model';
+
+export type HostsState = HostsModel;
+
+export const initialHostsState: HostsState = {
+  page: {
+    queries: {
+      [HostsTableType.authentications]: {
+        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+        limit: DEFAULT_TABLE_LIMIT,
+      },
+      [HostsTableType.hosts]: {
+        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+        direction: Direction.desc,
+        limit: DEFAULT_TABLE_LIMIT,
+        sortField: HostsFields.lastSeen,
+      },
+      [HostsTableType.events]: {
+        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+        limit: DEFAULT_TABLE_LIMIT,
+      },
+      [HostsTableType.uncommonProcesses]: {
+        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+        limit: DEFAULT_TABLE_LIMIT,
+      },
+      [HostsTableType.anomalies]: null,
+      [HostsTableType.alerts]: {
+        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+        limit: DEFAULT_TABLE_LIMIT,
+      },
+    },
+  },
+  details: {
+    queries: {
+      [HostsTableType.authentications]: {
+        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+        limit: DEFAULT_TABLE_LIMIT,
+      },
+      [HostsTableType.hosts]: {
+        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+        direction: Direction.desc,
+        limit: DEFAULT_TABLE_LIMIT,
+        sortField: HostsFields.lastSeen,
+      },
+      [HostsTableType.events]: {
+        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+        limit: DEFAULT_TABLE_LIMIT,
+      },
+      [HostsTableType.uncommonProcesses]: {
+        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+        limit: DEFAULT_TABLE_LIMIT,
+      },
+      [HostsTableType.anomalies]: null,
+      [HostsTableType.alerts]: {
+        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+        limit: DEFAULT_TABLE_LIMIT,
+      },
+    },
+  },
+};
+
+export const hostsReducer = reducerWithInitialState(initialHostsState)
+  .case(setHostTablesActivePageToZero, state => ({
+    ...state,
+    page: {
+      ...state.page,
+      queries: setHostPageQueriesActivePageToZero(state),
+    },
+    details: {
+      ...state.details,
+      queries: setHostDetailsQueriesActivePageToZero(state),
+    },
+  }))
+  .case(setHostDetailsTablesActivePageToZero, state => ({
+    ...state,
+    details: {
+      ...state.details,
+      queries: setHostDetailsQueriesActivePageToZero(state),
+    },
+  }))
+  .case(updateTableActivePage, (state, { activePage, hostsType, tableType }) => ({
+    ...state,
+    [hostsType]: {
+      ...state[hostsType],
+      queries: {
+        ...state[hostsType].queries,
+        [tableType]: {
+          ...state[hostsType].queries[tableType],
+          activePage,
+        },
+      },
+    },
+  }))
+  .case(updateTableLimit, (state, { limit, hostsType, tableType }) => ({
+    ...state,
+    [hostsType]: {
+      ...state[hostsType],
+      queries: {
+        ...state[hostsType].queries,
+        [tableType]: {
+          ...state[hostsType].queries[tableType],
+          limit,
+        },
+      },
+    },
+  }))
+  .case(updateHostsSort, (state, { sort, hostsType }) => ({
+    ...state,
+    [hostsType]: {
+      ...state[hostsType],
+      queries: {
+        ...state[hostsType].queries,
+        [HostsTableType.hosts]: {
+          ...state[hostsType].queries[HostsTableType.hosts],
+          direction: sort.direction,
+          sortField: sort.field,
+        },
+      },
+    },
+  }))
+  .build();
diff --git a/x-pack/plugins/siem/public/hosts/store/selectors.ts b/x-pack/plugins/siem/public/hosts/store/selectors.ts
new file mode 100644
index 00000000000000..96cae534bb352d
--- /dev/null
+++ b/x-pack/plugins/siem/public/hosts/store/selectors.ts
@@ -0,0 +1,29 @@
+/*
+ * 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 { get } from 'lodash/fp';
+import { createSelector } from 'reselect';
+
+import { State } from '../../common/store/reducer';
+
+import { GenericHostsModel, HostsType, HostsTableType } from './model';
+
+const selectHosts = (state: State, hostsType: HostsType): GenericHostsModel =>
+  get(hostsType, state.hosts);
+
+export const authenticationsSelector = () =>
+  createSelector(selectHosts, hosts => hosts.queries.authentications);
+
+export const hostsSelector = () =>
+  createSelector(selectHosts, hosts => hosts.queries[HostsTableType.hosts]);
+
+export const eventsSelector = () => createSelector(selectHosts, hosts => hosts.queries.events);
+
+export const uncommonProcessesSelector = () =>
+  createSelector(selectHosts, hosts => hosts.queries.uncommonProcesses);
+
+export const alertsSelector = () =>
+  createSelector(selectHosts, hosts => hosts.queries[HostsTableType.alerts]);
diff --git a/x-pack/plugins/siem/public/lib/compose/helpers.test.ts b/x-pack/plugins/siem/public/lib/compose/helpers.test.ts
deleted file mode 100644
index af4521b4f6e2c6..00000000000000
--- a/x-pack/plugins/siem/public/lib/compose/helpers.test.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * 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 { InMemoryCache, IntrospectionFragmentMatcher } from 'apollo-cache-inmemory';
-import { errorLink, reTryOneTimeOnErrorLink } from '../../containers/errors';
-import { getLinks } from './helpers';
-import { withClientState } from 'apollo-link-state';
-import * as apolloLinkHttp from 'apollo-link-http';
-import introspectionQueryResultData from '../../graphql/introspection.json';
-
-jest.mock('apollo-cache-inmemory');
-jest.mock('apollo-link-http');
-jest.mock('apollo-link-state');
-jest.mock('../../containers/errors');
-const mockWithClientState = 'mockWithClientState';
-const mockHttpLink = { mockHttpLink: 'mockHttpLink' };
-
-// @ts-ignore
-withClientState.mockReturnValue(mockWithClientState);
-// @ts-ignore
-apolloLinkHttp.createHttpLink.mockImplementation(() => mockHttpLink);
-
-describe('getLinks helper', () => {
-  test('It should return links in correct order', () => {
-    const mockCache = new InMemoryCache({
-      dataIdFromObject: () => null,
-      fragmentMatcher: new IntrospectionFragmentMatcher({
-        introspectionQueryResultData,
-      }),
-    });
-    const links = getLinks(mockCache, 'basePath');
-    expect(links[0]).toEqual(errorLink);
-    expect(links[1]).toEqual(reTryOneTimeOnErrorLink);
-    expect(links[2]).toEqual(mockWithClientState);
-    expect(links[3]).toEqual(mockHttpLink);
-  });
-});
diff --git a/x-pack/plugins/siem/public/lib/connectors/components/connector_flyout/index.tsx b/x-pack/plugins/siem/public/lib/connectors/components/connector_flyout/index.tsx
deleted file mode 100644
index 10b1e75c6ea845..00000000000000
--- a/x-pack/plugins/siem/public/lib/connectors/components/connector_flyout/index.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-/*
- * 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, { useCallback, useEffect } from 'react';
-import { EuiFieldText, EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiSpacer } from '@elastic/eui';
-
-import { isEmpty, get } from 'lodash/fp';
-
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { ActionConnectorFieldsProps } from '../../../../../../triggers_actions_ui/public/types';
-import { FieldMapping } from '../../../../pages/case/components/configure_cases/field_mapping';
-
-import { CasesConfigurationMapping } from '../../../../containers/case/configure/types';
-
-import * as i18n from '../../translations';
-import { ActionConnector, ConnectorFlyoutHOCProps } from '../../types';
-import { createDefaultMapping } from '../../utils';
-import { connectorsConfiguration } from '../../config';
-
-export const withConnectorFlyout = <T extends ActionConnector>({
-  ConnectorFormComponent,
-  connectorActionTypeId,
-  secretKeys = [],
-  configKeys = [],
-}: ConnectorFlyoutHOCProps<T>) => {
-  const ConnectorFlyout: React.FC<ActionConnectorFieldsProps<T>> = ({
-    action,
-    editActionConfig,
-    editActionSecrets,
-    errors,
-  }) => {
-    /* We do not provide defaults values to the fields (like empty string for apiUrl) intentionally.
-   * If we do, errors will be shown the first time the flyout is open even though the user did not
-   * interact with the form. Also, we would like to show errors for empty fields provided by the user.
-  /*/
-    const { apiUrl, casesConfiguration: { mapping = [] } = {} } = action.config;
-    const configKeysWithDefault = [...configKeys, 'apiUrl'];
-
-    const isApiUrlInvalid: boolean = errors.apiUrl.length > 0 && apiUrl != null;
-
-    /**
-     * We need to distinguish between the add flyout and the edit flyout.
-     * useEffect will run only once on component mount.
-     * This guarantees that the function below will run only once.
-     * On the first render of the component the apiUrl can be either undefined or filled.
-     * If it is filled then we are on the edit flyout. Otherwise we are on the add flyout.
-     */
-
-    useEffect(() => {
-      if (!isEmpty(apiUrl)) {
-        secretKeys.forEach((key: string) => editActionSecrets(key, ''));
-      }
-    }, []);
-
-    if (isEmpty(mapping)) {
-      editActionConfig('casesConfiguration', {
-        ...action.config.casesConfiguration,
-        mapping: createDefaultMapping(connectorsConfiguration[connectorActionTypeId].fields),
-      });
-    }
-
-    const handleOnChangeActionConfig = useCallback(
-      (key: string, value: string) => editActionConfig(key, value),
-      []
-    );
-
-    const handleOnBlurActionConfig = useCallback(
-      (key: string) => {
-        if (configKeysWithDefault.includes(key) && get(key, action.config) == null) {
-          editActionConfig(key, '');
-        }
-      },
-      [action.config]
-    );
-
-    const handleOnChangeSecretConfig = useCallback(
-      (key: string, value: string) => editActionSecrets(key, value),
-      []
-    );
-
-    const handleOnBlurSecretConfig = useCallback(
-      (key: string) => {
-        if (secretKeys.includes(key) && get(key, action.secrets) == null) {
-          editActionSecrets(key, '');
-        }
-      },
-      [action.secrets]
-    );
-
-    const handleOnChangeMappingConfig = useCallback(
-      (newMapping: CasesConfigurationMapping[]) =>
-        editActionConfig('casesConfiguration', {
-          ...action.config.casesConfiguration,
-          mapping: newMapping,
-        }),
-      [action.config]
-    );
-
-    return (
-      <>
-        <EuiFlexGroup>
-          <EuiFlexItem>
-            <EuiFormRow
-              id="apiUrl"
-              fullWidth
-              error={errors.apiUrl}
-              isInvalid={isApiUrlInvalid}
-              label={i18n.API_URL_LABEL}
-            >
-              <EuiFieldText
-                fullWidth
-                isInvalid={isApiUrlInvalid}
-                name="apiUrl"
-                value={apiUrl || ''} // Needed to prevent uncontrolled input error when value is undefined
-                data-test-subj="apiUrlFromInput"
-                placeholder="https://<site-url>"
-                onChange={evt => handleOnChangeActionConfig('apiUrl', evt.target.value)}
-                onBlur={handleOnBlurActionConfig.bind(null, 'apiUrl')}
-              />
-            </EuiFormRow>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-        <EuiSpacer size="m" />
-        <ConnectorFormComponent
-          errors={errors}
-          action={action}
-          onChangeSecret={handleOnChangeSecretConfig}
-          onBlurSecret={handleOnBlurSecretConfig}
-          onChangeConfig={handleOnChangeActionConfig}
-          onBlurConfig={handleOnBlurActionConfig}
-        />
-        <EuiSpacer size="l" />
-        <EuiFlexGroup>
-          <EuiFlexItem>
-            <FieldMapping
-              disabled={true}
-              connectorActionTypeId={connectorActionTypeId}
-              mapping={mapping as CasesConfigurationMapping[]}
-              onChangeMapping={handleOnChangeMappingConfig}
-            />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </>
-    );
-  };
-
-  return ConnectorFlyout;
-};
diff --git a/x-pack/plugins/siem/public/lib/connectors/jira/index.tsx b/x-pack/plugins/siem/public/lib/connectors/jira/index.tsx
deleted file mode 100644
index 049ccb7cf17b7e..00000000000000
--- a/x-pack/plugins/siem/public/lib/connectors/jira/index.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-/*
- * 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 { lazy } from 'react';
-import {
-  ValidationResult,
-  // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-} from '../../../../../triggers_actions_ui/public/types';
-
-import { connector } from './config';
-import { createActionType } from '../utils';
-import logo from './logo.svg';
-import { JiraActionConnector } from './types';
-import * as i18n from './translations';
-
-interface Errors {
-  projectKey: string[];
-  email: string[];
-  apiToken: string[];
-}
-
-const validateConnector = (action: JiraActionConnector): ValidationResult => {
-  const errors: Errors = {
-    projectKey: [],
-    email: [],
-    apiToken: [],
-  };
-
-  if (!action.config.projectKey) {
-    errors.projectKey = [...errors.projectKey, i18n.JIRA_PROJECT_KEY_REQUIRED];
-  }
-
-  if (!action.secrets.email) {
-    errors.email = [...errors.email, i18n.EMAIL_REQUIRED];
-  }
-
-  if (!action.secrets.apiToken) {
-    errors.apiToken = [...errors.apiToken, i18n.API_TOKEN_REQUIRED];
-  }
-
-  return { errors };
-};
-
-export const getActionType = createActionType({
-  id: connector.id,
-  iconClass: logo,
-  selectMessage: i18n.JIRA_DESC,
-  actionTypeTitle: connector.name,
-  validateConnector,
-  actionConnectorFields: lazy(() => import('./flyout')),
-});
diff --git a/x-pack/plugins/siem/public/lib/connectors/jira/types.ts b/x-pack/plugins/siem/public/lib/connectors/jira/types.ts
deleted file mode 100644
index d6b8a6cadcb902..00000000000000
--- a/x-pack/plugins/siem/public/lib/connectors/jira/types.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-/*
- * 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.
- */
-
-/* eslint-disable no-restricted-imports */
-/* eslint-disable @kbn/eslint/no-restricted-paths */
-
-import {
-  JiraPublicConfigurationType,
-  JiraSecretConfigurationType,
-} from '../../../../../actions/server/builtin_action_types/jira/types';
-
-export { JiraFieldsType } from '../../../../../case/common/api/connectors';
-
-export * from '../types';
-
-export interface JiraActionConnector {
-  config: JiraPublicConfigurationType;
-  secrets: JiraSecretConfigurationType;
-}
diff --git a/x-pack/plugins/siem/public/lib/connectors/servicenow/index.tsx b/x-pack/plugins/siem/public/lib/connectors/servicenow/index.tsx
deleted file mode 100644
index 0a239648271d1a..00000000000000
--- a/x-pack/plugins/siem/public/lib/connectors/servicenow/index.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
- * 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 { lazy } from 'react';
-import {
-  ValidationResult,
-  // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-} from '../../../../../triggers_actions_ui/public/types';
-import { connector } from './config';
-import { createActionType } from '../utils';
-import logo from './logo.svg';
-import { ServiceNowActionConnector } from './types';
-import * as i18n from './translations';
-
-interface Errors {
-  username: string[];
-  password: string[];
-}
-
-const validateConnector = (action: ServiceNowActionConnector): ValidationResult => {
-  const errors: Errors = {
-    username: [],
-    password: [],
-  };
-
-  if (!action.secrets.username) {
-    errors.username = [...errors.username, i18n.USERNAME_REQUIRED];
-  }
-
-  if (!action.secrets.password) {
-    errors.password = [...errors.password, i18n.PASSWORD_REQUIRED];
-  }
-
-  return { errors };
-};
-
-export const getActionType = createActionType({
-  id: connector.id,
-  iconClass: logo,
-  selectMessage: i18n.SERVICENOW_DESC,
-  actionTypeTitle: connector.name,
-  validateConnector,
-  actionConnectorFields: lazy(() => import('./flyout')),
-});
diff --git a/x-pack/plugins/siem/public/lib/connectors/servicenow/types.ts b/x-pack/plugins/siem/public/lib/connectors/servicenow/types.ts
deleted file mode 100644
index 43da5624a497b4..00000000000000
--- a/x-pack/plugins/siem/public/lib/connectors/servicenow/types.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-/*
- * 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.
- */
-
-/* eslint-disable no-restricted-imports */
-/* eslint-disable @kbn/eslint/no-restricted-paths */
-
-import {
-  ServiceNowPublicConfigurationType,
-  ServiceNowSecretConfigurationType,
-} from '../../../../../actions/server/builtin_action_types/servicenow/types';
-
-export { ServiceNowFieldsType } from '../../../../../case/common/api/connectors';
-
-export * from '../types';
-
-export interface ServiceNowActionConnector {
-  config: ServiceNowPublicConfigurationType;
-  secrets: ServiceNowSecretConfigurationType;
-}
diff --git a/x-pack/plugins/siem/public/lib/connectors/types.ts b/x-pack/plugins/siem/public/lib/connectors/types.ts
deleted file mode 100644
index 3d3692c9806e48..00000000000000
--- a/x-pack/plugins/siem/public/lib/connectors/types.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-/*
- * 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.
- */
-
-/* eslint-disable no-restricted-imports */
-/* eslint-disable @kbn/eslint/no-restricted-paths */
-
-import { ActionType } from '../../../../triggers_actions_ui/public';
-import { IErrorObject } from '../../../../triggers_actions_ui/public/types';
-import { ExternalIncidentServiceConfiguration } from '../../../../actions/server/builtin_action_types/case/types';
-
-import { ActionType as ThirdPartySupportedActions, CaseField } from '../../../../case/common/api';
-
-export { ThirdPartyField as AllThirdPartyFields } from '../../../../case/common/api';
-
-export interface ThirdPartyField {
-  label: string;
-  validSourceFields: CaseField[];
-  defaultSourceField: CaseField;
-  defaultActionType: ThirdPartySupportedActions;
-}
-
-export interface ConnectorConfiguration extends ActionType {
-  logo: string;
-  fields: Record<string, ThirdPartyField>;
-}
-
-export interface ActionConnector {
-  config: ExternalIncidentServiceConfiguration;
-  secrets: {};
-}
-
-export interface ActionConnectorParams {
-  message: string;
-}
-
-export interface ActionConnectorValidationErrors {
-  apiUrl: string[];
-}
-
-export type Optional<T, K extends keyof T> = Omit<T, K> & Partial<T>;
-
-export interface ConnectorFlyoutFormProps<T> {
-  errors: IErrorObject;
-  action: T;
-  onChangeSecret: (key: string, value: string) => void;
-  onBlurSecret: (key: string) => void;
-  onChangeConfig: (key: string, value: string) => void;
-  onBlurConfig: (key: string) => void;
-}
-
-export interface ConnectorFlyoutHOCProps<T> {
-  ConnectorFormComponent: React.FC<ConnectorFlyoutFormProps<T>>;
-  connectorActionTypeId: string;
-  configKeys?: string[];
-  secretKeys?: string[];
-}
diff --git a/x-pack/plugins/siem/public/lib/connectors/utils.ts b/x-pack/plugins/siem/public/lib/connectors/utils.ts
deleted file mode 100644
index cc1608a05e2ce8..00000000000000
--- a/x-pack/plugins/siem/public/lib/connectors/utils.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-/*
- * 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 {
-  ActionTypeModel,
-  ValidationResult,
-  // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-} from '../../../../triggers_actions_ui/public/types';
-
-import {
-  ActionConnector,
-  ActionConnectorParams,
-  ActionConnectorValidationErrors,
-  Optional,
-  ThirdPartyField,
-} from './types';
-import { isUrlInvalid } from './validators';
-
-import * as i18n from './translations';
-import { CasesConfigurationMapping } from '../../containers/case/configure/types';
-
-export const createActionType = ({
-  id,
-  actionTypeTitle,
-  selectMessage,
-  iconClass,
-  validateConnector,
-  validateParams = connectorParamsValidator,
-  actionConnectorFields,
-  actionParamsFields = null,
-}: Optional<ActionTypeModel, 'validateParams' | 'actionParamsFields'>) => (): ActionTypeModel => {
-  return {
-    id,
-    iconClass,
-    selectMessage,
-    actionTypeTitle,
-    validateConnector: (action: ActionConnector): ValidationResult => {
-      const errors: ActionConnectorValidationErrors = {
-        apiUrl: [],
-      };
-
-      if (!action.config.apiUrl) {
-        errors.apiUrl = [...errors.apiUrl, i18n.API_URL_REQUIRED];
-      }
-
-      if (isUrlInvalid(action.config.apiUrl)) {
-        errors.apiUrl = [...errors.apiUrl, i18n.API_URL_INVALID];
-      }
-
-      return { errors: { ...errors, ...validateConnector(action).errors } };
-    },
-    validateParams,
-    actionConnectorFields,
-    actionParamsFields,
-  };
-};
-
-const connectorParamsValidator = (actionParams: ActionConnectorParams): ValidationResult => {
-  return { errors: {} };
-};
-
-export const createDefaultMapping = (
-  fields: Record<string, ThirdPartyField>
-): CasesConfigurationMapping[] =>
-  Object.keys(fields).map(
-    key =>
-      ({
-        source: fields[key].defaultSourceField,
-        target: key,
-        actionType: fields[key].defaultActionType,
-      } as CasesConfigurationMapping)
-  );
diff --git a/x-pack/plugins/siem/public/lib/keury/index.ts b/x-pack/plugins/siem/public/lib/keury/index.ts
deleted file mode 100644
index 810baa89cd60dc..00000000000000
--- a/x-pack/plugins/siem/public/lib/keury/index.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-/*
- * 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 { isEmpty, isString, flow } from 'lodash/fp';
-import {
-  EsQueryConfig,
-  Query,
-  Filter,
-  esQuery,
-  esKuery,
-  IIndexPattern,
-} from '../../../../../../src/plugins/data/public';
-
-import { JsonObject } from '../../../../../../src/plugins/kibana_utils/public';
-
-import { KueryFilterQuery } from '../../store';
-
-export const convertKueryToElasticSearchQuery = (
-  kueryExpression: string,
-  indexPattern?: IIndexPattern
-) => {
-  try {
-    return kueryExpression
-      ? JSON.stringify(
-          esKuery.toElasticsearchQuery(esKuery.fromKueryExpression(kueryExpression), indexPattern)
-        )
-      : '';
-  } catch (err) {
-    return '';
-  }
-};
-
-export const convertKueryToDslFilter = (
-  kueryExpression: string,
-  indexPattern: IIndexPattern
-): JsonObject => {
-  try {
-    return kueryExpression
-      ? esKuery.toElasticsearchQuery(esKuery.fromKueryExpression(kueryExpression), indexPattern)
-      : {};
-  } catch (err) {
-    return {};
-  }
-};
-
-export const escapeQueryValue = (val: number | string = ''): string | number => {
-  if (isString(val)) {
-    if (isEmpty(val)) {
-      return '""';
-    }
-    return `"${escapeKuery(val)}"`;
-  }
-
-  return val;
-};
-
-export const isFromKueryExpressionValid = (kqlFilterQuery: KueryFilterQuery | null): boolean => {
-  if (kqlFilterQuery && kqlFilterQuery.kind === 'kuery') {
-    try {
-      esKuery.fromKueryExpression(kqlFilterQuery.expression);
-    } catch (err) {
-      return false;
-    }
-  }
-  return true;
-};
-
-const escapeWhitespace = (val: string) =>
-  val
-    .replace(/\t/g, '\\t')
-    .replace(/\r/g, '\\r')
-    .replace(/\n/g, '\\n');
-
-// See the SpecialCharacter rule in kuery.peg
-const escapeSpecialCharacters = (val: string) => val.replace(/["]/g, '\\$&'); // $& means the whole matched string
-
-// See the Keyword rule in kuery.peg
-const escapeAndOr = (val: string) => val.replace(/(\s+)(and|or)(\s+)/gi, '$1\\$2$3');
-
-const escapeNot = (val: string) => val.replace(/not(\s+)/gi, '\\$&');
-
-export const escapeKuery = flow(escapeSpecialCharacters, escapeAndOr, escapeNot, escapeWhitespace);
-
-export const convertToBuildEsQuery = ({
-  config,
-  indexPattern,
-  queries,
-  filters,
-}: {
-  config: EsQueryConfig;
-  indexPattern: IIndexPattern;
-  queries: Query[];
-  filters: Filter[];
-}) => {
-  try {
-    return JSON.stringify(
-      esQuery.buildEsQuery(
-        indexPattern,
-        queries,
-        filters.filter(f => f.meta.disabled === false),
-        {
-          ...config,
-          dateFormatTZ: undefined,
-        }
-      )
-    );
-  } catch (exp) {
-    return '';
-  }
-};
diff --git a/x-pack/plugins/siem/public/lib/kibana/kibana_react.ts b/x-pack/plugins/siem/public/lib/kibana/kibana_react.ts
deleted file mode 100644
index 88be8d25e5840a..00000000000000
--- a/x-pack/plugins/siem/public/lib/kibana/kibana_react.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * 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 {
-  KibanaContextProvider,
-  KibanaReactContextValue,
-  useKibana,
-  useUiSetting,
-  useUiSetting$,
-  withKibana,
-} from '../../../../../../src/plugins/kibana_react/public';
-import { StartServices } from '../../plugin';
-
-export type KibanaContext = KibanaReactContextValue<StartServices>;
-export interface WithKibanaProps {
-  kibana: KibanaContext;
-}
-
-// eslint-disable-next-line react-hooks/rules-of-hooks
-const typedUseKibana = () => useKibana<StartServices>();
-
-export {
-  KibanaContextProvider,
-  typedUseKibana as useKibana,
-  useUiSetting,
-  useUiSetting$,
-  withKibana,
-};
diff --git a/x-pack/plugins/siem/public/lib/telemetry/index.ts b/x-pack/plugins/siem/public/lib/telemetry/index.ts
deleted file mode 100644
index 37d181e9b8ad73..00000000000000
--- a/x-pack/plugins/siem/public/lib/telemetry/index.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-/*
- * 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 { METRIC_TYPE, UiStatsMetricType } from '@kbn/analytics';
-
-import { SetupPlugins } from '../../plugin';
-export { telemetryMiddleware } from './middleware';
-
-export { METRIC_TYPE };
-
-type TrackFn = (type: UiStatsMetricType, event: string | string[], count?: number) => void;
-
-const noop = () => {};
-
-let _track: TrackFn;
-
-export const track: TrackFn = (type, event, count) => {
-  try {
-    _track(type, event, count);
-  } catch (error) {
-    // ignore failed tracking call
-  }
-};
-
-export const initTelemetry = (usageCollection: SetupPlugins['usageCollection'], appId: string) => {
-  _track = usageCollection?.reportUiStats?.bind(null, appId) ?? noop;
-};
-
-export enum TELEMETRY_EVENT {
-  // Detections
-  SIEM_RULE_ENABLED = 'siem_rule_enabled',
-  SIEM_RULE_DISABLED = 'siem_rule_disabled',
-  CUSTOM_RULE_ENABLED = 'custom_rule_enabled',
-  CUSTOM_RULE_DISABLED = 'custom_rule_disabled',
-
-  // ML
-  SIEM_JOB_ENABLED = 'siem_job_enabled',
-  SIEM_JOB_DISABLED = 'siem_job_disabled',
-  CUSTOM_JOB_ENABLED = 'custom_job_enabled',
-  CUSTOM_JOB_DISABLED = 'custom_job_disabled',
-  JOB_ENABLE_FAILURE = 'job_enable_failure',
-  JOB_DISABLE_FAILURE = 'job_disable_failure',
-
-  // Timeline
-  TIMELINE_OPENED = 'open_timeline',
-  TIMELINE_SAVED = 'timeline_saved',
-  TIMELINE_NAMED = 'timeline_named',
-
-  // UI Interactions
-  TAB_CLICKED = 'tab_',
-}
diff --git a/x-pack/plugins/siem/public/mock/kibana_core.ts b/x-pack/plugins/siem/public/mock/kibana_core.ts
deleted file mode 100644
index b175ddbf5106db..00000000000000
--- a/x-pack/plugins/siem/public/mock/kibana_core.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/*
- * 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 { coreMock } from '../../../../../src/core/public/mocks';
-import { dataPluginMock } from '../../../../../src/plugins/data/public/mocks';
-
-export const createKibanaCoreStartMock = () => coreMock.createStart();
-export const createKibanaPluginsStartMock = () => ({
-  data: dataPluginMock.createStartContract(),
-});
diff --git a/x-pack/plugins/siem/public/mock/kibana_react.ts b/x-pack/plugins/siem/public/mock/kibana_react.ts
deleted file mode 100644
index cebba3e237f986..00000000000000
--- a/x-pack/plugins/siem/public/mock/kibana_react.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-/*
- * 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.
- */
-
-/* eslint-disable react/display-name */
-
-import React from 'react';
-import { KibanaContextProvider } from '../../../../../src/plugins/kibana_react/public';
-
-import {
-  DEFAULT_SIEM_TIME_RANGE,
-  DEFAULT_SIEM_REFRESH_INTERVAL,
-  DEFAULT_INDEX_KEY,
-  DEFAULT_DATE_FORMAT,
-  DEFAULT_DATE_FORMAT_TZ,
-  DEFAULT_DARK_MODE,
-  DEFAULT_TIME_RANGE,
-  DEFAULT_REFRESH_RATE_INTERVAL,
-  DEFAULT_FROM,
-  DEFAULT_TO,
-  DEFAULT_INTERVAL_PAUSE,
-  DEFAULT_INTERVAL_VALUE,
-  DEFAULT_BYTES_FORMAT,
-  DEFAULT_INDEX_PATTERN,
-} from '../../common/constants';
-import { createKibanaCoreStartMock, createKibanaPluginsStartMock } from './kibana_core';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const mockUiSettings: Record<string, any> = {
-  [DEFAULT_TIME_RANGE]: { from: 'now-15m', to: 'now', mode: 'quick' },
-  [DEFAULT_REFRESH_RATE_INTERVAL]: { pause: false, value: 0 },
-  [DEFAULT_SIEM_TIME_RANGE]: {
-    from: DEFAULT_FROM,
-    to: DEFAULT_TO,
-  },
-  [DEFAULT_SIEM_REFRESH_INTERVAL]: {
-    pause: DEFAULT_INTERVAL_PAUSE,
-    value: DEFAULT_INTERVAL_VALUE,
-  },
-  [DEFAULT_INDEX_KEY]: DEFAULT_INDEX_PATTERN,
-  [DEFAULT_BYTES_FORMAT]: '0,0.[0]b',
-  [DEFAULT_DATE_FORMAT_TZ]: 'UTC',
-  [DEFAULT_DATE_FORMAT]: 'MMM D, YYYY @ HH:mm:ss.SSS',
-  [DEFAULT_DARK_MODE]: false,
-};
-
-export const createUseUiSettingMock = () => <T extends unknown = string>(
-  key: string,
-  defaultValue?: T
-): T => {
-  const result = mockUiSettings[key];
-
-  if (typeof result != null) return result;
-
-  if (defaultValue != null) {
-    return defaultValue;
-  }
-
-  throw new Error(`Unexpected config key: ${key}`);
-};
-
-export const createUseUiSetting$Mock = () => {
-  const useUiSettingMock = createUseUiSettingMock();
-
-  return <T extends unknown = string>(
-    key: string,
-    defaultValue?: T
-  ): [T, () => void] | undefined => [useUiSettingMock(key, defaultValue), jest.fn()];
-};
-
-export const createUseKibanaMock = () => {
-  const core = createKibanaCoreStartMock();
-  const plugins = createKibanaPluginsStartMock();
-  const useUiSetting = createUseUiSettingMock();
-
-  const services = {
-    ...core,
-    ...plugins,
-    uiSettings: {
-      ...core.uiSettings,
-      get: useUiSetting,
-    },
-  };
-
-  return () => ({ services });
-};
-
-export const createWithKibanaMock = () => {
-  const kibana = createUseKibanaMock()();
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return (Component: any) => (props: any) => {
-    return React.createElement(Component, { ...props, kibana });
-  };
-};
-
-export const createKibanaContextProviderMock = () => {
-  const kibana = createUseKibanaMock()();
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return ({ services, ...rest }: any) =>
-    React.createElement(KibanaContextProvider, {
-      ...rest,
-      services: { ...kibana.services, ...services },
-    });
-};
diff --git a/x-pack/plugins/siem/public/mock/utils.ts b/x-pack/plugins/siem/public/mock/utils.ts
deleted file mode 100644
index 6a372f163a648f..00000000000000
--- a/x-pack/plugins/siem/public/mock/utils.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/*
- * 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.
- */
-
-interface Global extends NodeJS.Global {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  window?: any;
-}
-
-export const globalNode: Global = global;
diff --git a/x-pack/plugins/siem/public/components/arrows/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/network/components/arrows/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/arrows/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/network/components/arrows/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/arrows/helpers.test.ts b/x-pack/plugins/siem/public/network/components/arrows/helpers.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/arrows/helpers.test.ts
rename to x-pack/plugins/siem/public/network/components/arrows/helpers.test.ts
diff --git a/x-pack/plugins/siem/public/components/arrows/helpers.ts b/x-pack/plugins/siem/public/network/components/arrows/helpers.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/arrows/helpers.ts
rename to x-pack/plugins/siem/public/network/components/arrows/helpers.ts
diff --git a/x-pack/plugins/siem/public/network/components/arrows/index.test.tsx b/x-pack/plugins/siem/public/network/components/arrows/index.test.tsx
new file mode 100644
index 00000000000000..e5fa1131c7c47c
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/arrows/index.test.tsx
@@ -0,0 +1,42 @@
+/*
+ * 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 { mount } from 'enzyme';
+import React from 'react';
+
+import { TestProviders } from '../../../common/mock';
+
+import { ArrowBody, ArrowHead } from '.';
+
+describe('arrows', () => {
+  describe('ArrowBody', () => {
+    test('renders correctly against snapshot', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <ArrowBody height={3} />
+        </TestProviders>
+      );
+      expect(wrapper.find('ArrowBody')).toMatchSnapshot();
+    });
+  });
+
+  describe('ArrowHead', () => {
+    test('it renders an arrow head icon', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <ArrowHead direction={'arrowLeft'} />
+        </TestProviders>
+      );
+
+      expect(
+        wrapper
+          .find('[data-test-subj="arrow-icon"]')
+          .first()
+          .exists()
+      ).toBe(true);
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/components/arrows/index.tsx b/x-pack/plugins/siem/public/network/components/arrows/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/arrows/index.tsx
rename to x-pack/plugins/siem/public/network/components/arrows/index.tsx
diff --git a/x-pack/plugins/siem/public/components/direction/direction.test.tsx b/x-pack/plugins/siem/public/network/components/direction/direction.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/direction/direction.test.tsx
rename to x-pack/plugins/siem/public/network/components/direction/direction.test.tsx
diff --git a/x-pack/plugins/siem/public/network/components/direction/index.tsx b/x-pack/plugins/siem/public/network/components/direction/index.tsx
new file mode 100644
index 00000000000000..c8e8f009339c12
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/direction/index.tsx
@@ -0,0 +1,73 @@
+/*
+ * 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 { NetworkDirectionEcs } from '../../../graphql/types';
+import { DraggableBadge } from '../../../common/components/draggables';
+import { NETWORK_DIRECTION_FIELD_NAME } from '../source_destination/field_names';
+
+export const INBOUND = 'inbound';
+export const OUTBOUND = 'outbound';
+
+export const EXTERNAL = 'external';
+export const INTERNAL = 'internal';
+
+export const INCOMING = 'incoming';
+export const OUTGOING = 'outgoing';
+
+export const LISTENING = 'listening';
+export const UNKNOWN = 'unknown';
+
+export const DEFAULT_ICON = 'questionInCircle';
+
+/** Returns an icon representing the value of `network.direction` */
+export const getDirectionIcon = (
+  networkDirection?: string | null
+): 'arrowUp' | 'arrowDown' | 'globe' | 'bullseye' | 'questionInCircle' => {
+  if (networkDirection == null) {
+    return DEFAULT_ICON;
+  }
+
+  const direction = `${networkDirection}`.toLowerCase();
+
+  switch (direction) {
+    case NetworkDirectionEcs.outbound:
+    case NetworkDirectionEcs.outgoing:
+      return 'arrowUp';
+    case NetworkDirectionEcs.inbound:
+    case NetworkDirectionEcs.incoming:
+    case NetworkDirectionEcs.listening:
+      return 'arrowDown';
+    case NetworkDirectionEcs.external:
+      return 'globe';
+    case NetworkDirectionEcs.internal:
+      return 'bullseye';
+    case NetworkDirectionEcs.unknown:
+    default:
+      return DEFAULT_ICON;
+  }
+};
+
+/**
+ * Renders a badge containing the value of `network.direction`
+ */
+export const DirectionBadge = React.memo<{
+  contextId: string;
+  direction?: string | null;
+  eventId: string;
+}>(({ contextId, eventId, direction }) => (
+  <DraggableBadge
+    contextId={contextId}
+    data-test-subj="network-direction"
+    eventId={eventId}
+    field={NETWORK_DIRECTION_FIELD_NAME}
+    iconType={getDirectionIcon(direction)}
+    value={direction}
+  />
+));
+
+DirectionBadge.displayName = 'DirectionBadge';
diff --git a/x-pack/plugins/siem/public/network/components/embeddables/__mocks__/mock.ts b/x-pack/plugins/siem/public/network/components/embeddables/__mocks__/mock.ts
new file mode 100644
index 00000000000000..bc1de567b60ae7
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/embeddables/__mocks__/mock.ts
@@ -0,0 +1,477 @@
+/*
+ * 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 { IndexPatternMapping } from '../types';
+import { IndexPatternSavedObject } from '../../../../common/hooks/types';
+
+export const mockIndexPatternIds: IndexPatternMapping[] = [
+  { title: 'filebeat-*', id: '8c7323ac-97ad-4b53-ac0a-40f8f691a918' },
+];
+
+export const mockAPMIndexPatternIds: IndexPatternMapping[] = [
+  { title: 'apm-*', id: '8c7323ac-97ad-4b53-ac0a-40f8f691a918' },
+];
+
+export const mockSourceLayer = {
+  sourceDescriptor: {
+    id: 'uuid.v4()',
+    type: 'ES_SEARCH',
+    applyGlobalQuery: true,
+    geoField: 'source.geo.location',
+    filterByMapBounds: false,
+    tooltipProperties: [
+      'host.name',
+      'source.ip',
+      'source.domain',
+      'source.geo.country_iso_code',
+      'source.as.organization.name',
+    ],
+    useTopHits: false,
+    topHitsTimeField: '@timestamp',
+    topHitsSize: 1,
+    indexPatternId: '8c7323ac-97ad-4b53-ac0a-40f8f691a918',
+  },
+  style: {
+    type: 'VECTOR',
+    properties: {
+      fillColor: {
+        type: 'STATIC',
+        options: { color: '#6092C0' },
+      },
+      lineColor: {
+        type: 'STATIC',
+        options: { color: '#FFFFFF' },
+      },
+      lineWidth: { type: 'STATIC', options: { size: 2 } },
+      iconSize: { type: 'STATIC', options: { size: 8 } },
+      iconOrientation: {
+        type: 'STATIC',
+        options: { orientation: 0 },
+      },
+      symbolizeAs: {
+        options: { value: 'icon' },
+      },
+      icon: {
+        type: 'STATIC',
+        options: { value: 'home' },
+      },
+    },
+  },
+  id: 'uuid.v4()',
+  label: `filebeat-* | Source Point`,
+  minZoom: 0,
+  maxZoom: 24,
+  alpha: 1,
+  visible: true,
+  type: 'VECTOR',
+  query: { query: '', language: 'kuery' },
+  joins: [],
+};
+
+export const mockDestinationLayer = {
+  sourceDescriptor: {
+    id: 'uuid.v4()',
+    type: 'ES_SEARCH',
+    applyGlobalQuery: true,
+    geoField: 'destination.geo.location',
+    filterByMapBounds: true,
+    tooltipProperties: [
+      'host.name',
+      'destination.ip',
+      'destination.domain',
+      'destination.geo.country_iso_code',
+      'destination.as.organization.name',
+    ],
+    useTopHits: false,
+    topHitsTimeField: '@timestamp',
+    topHitsSize: 1,
+    indexPatternId: '8c7323ac-97ad-4b53-ac0a-40f8f691a918',
+  },
+  style: {
+    type: 'VECTOR',
+    properties: {
+      fillColor: {
+        type: 'STATIC',
+        options: { color: '#D36086' },
+      },
+      lineColor: {
+        type: 'STATIC',
+        options: { color: '#FFFFFF' },
+      },
+      lineWidth: { type: 'STATIC', options: { size: 2 } },
+      iconSize: { type: 'STATIC', options: { size: 8 } },
+      iconOrientation: {
+        type: 'STATIC',
+        options: { orientation: 0 },
+      },
+      symbolizeAs: {
+        options: { value: 'icon' },
+      },
+      icon: {
+        type: 'STATIC',
+        options: { value: 'marker' },
+      },
+    },
+  },
+  id: 'uuid.v4()',
+  label: `filebeat-* | Destination Point`,
+  minZoom: 0,
+  maxZoom: 24,
+  alpha: 1,
+  visible: true,
+  type: 'VECTOR',
+  query: { query: '', language: 'kuery' },
+};
+
+export const mockClientLayer = {
+  sourceDescriptor: {
+    id: 'uuid.v4()',
+    type: 'ES_SEARCH',
+    applyGlobalQuery: true,
+    geoField: 'client.geo.location',
+    filterByMapBounds: false,
+    tooltipProperties: [
+      'host.name',
+      'client.ip',
+      'client.domain',
+      'client.geo.country_iso_code',
+      'client.as.organization.name',
+    ],
+    useTopHits: false,
+    topHitsTimeField: '@timestamp',
+    topHitsSize: 1,
+    indexPatternId: '8c7323ac-97ad-4b53-ac0a-40f8f691a918',
+  },
+  style: {
+    type: 'VECTOR',
+    properties: {
+      fillColor: {
+        type: 'STATIC',
+        options: { color: '#6092C0' },
+      },
+      lineColor: {
+        type: 'STATIC',
+        options: { color: '#FFFFFF' },
+      },
+      lineWidth: { type: 'STATIC', options: { size: 2 } },
+      iconSize: { type: 'STATIC', options: { size: 8 } },
+      iconOrientation: {
+        type: 'STATIC',
+        options: { orientation: 0 },
+      },
+      symbolizeAs: {
+        options: { value: 'icon' },
+      },
+      icon: {
+        type: 'STATIC',
+        options: { value: 'home' },
+      },
+    },
+  },
+  id: 'uuid.v4()',
+  label: `apm-* | Client Point`,
+  minZoom: 0,
+  maxZoom: 24,
+  alpha: 1,
+  visible: true,
+  type: 'VECTOR',
+  query: { query: '', language: 'kuery' },
+  joins: [],
+};
+
+export const mockServerLayer = {
+  sourceDescriptor: {
+    id: 'uuid.v4()',
+    type: 'ES_SEARCH',
+    applyGlobalQuery: true,
+    geoField: 'server.geo.location',
+    filterByMapBounds: true,
+    tooltipProperties: [
+      'host.name',
+      'server.ip',
+      'server.domain',
+      'server.geo.country_iso_code',
+      'server.as.organization.name',
+    ],
+    useTopHits: false,
+    topHitsTimeField: '@timestamp',
+    topHitsSize: 1,
+    indexPatternId: '8c7323ac-97ad-4b53-ac0a-40f8f691a918',
+  },
+  style: {
+    type: 'VECTOR',
+    properties: {
+      fillColor: {
+        type: 'STATIC',
+        options: { color: '#D36086' },
+      },
+      lineColor: {
+        type: 'STATIC',
+        options: { color: '#FFFFFF' },
+      },
+      lineWidth: { type: 'STATIC', options: { size: 2 } },
+      iconSize: { type: 'STATIC', options: { size: 8 } },
+      iconOrientation: {
+        type: 'STATIC',
+        options: { orientation: 0 },
+      },
+      symbolizeAs: {
+        options: { value: 'icon' },
+      },
+      icon: {
+        type: 'STATIC',
+        options: { value: 'marker' },
+      },
+    },
+  },
+  id: 'uuid.v4()',
+  label: `apm-* | Server Point`,
+  minZoom: 0,
+  maxZoom: 24,
+  alpha: 1,
+  visible: true,
+  type: 'VECTOR',
+  query: { query: '', language: 'kuery' },
+};
+
+export const mockLineLayer = {
+  sourceDescriptor: {
+    type: 'ES_PEW_PEW',
+    applyGlobalQuery: true,
+    id: 'uuid.v4()',
+    indexPatternId: '8c7323ac-97ad-4b53-ac0a-40f8f691a918',
+    sourceGeoField: 'source.geo.location',
+    destGeoField: 'destination.geo.location',
+    metrics: [
+      { type: 'sum', field: 'source.bytes', label: 'source.bytes' },
+      { type: 'sum', field: 'destination.bytes', label: 'destination.bytes' },
+    ],
+  },
+  style: {
+    type: 'VECTOR',
+    properties: {
+      fillColor: {
+        type: 'STATIC',
+        options: { color: '#1EA593' },
+      },
+      lineColor: {
+        type: 'STATIC',
+        options: { color: '#6092C0' },
+      },
+      lineWidth: {
+        type: 'DYNAMIC',
+        options: {
+          field: {
+            label: 'count',
+            name: 'doc_count',
+            origin: 'source',
+          },
+          minSize: 1,
+          maxSize: 8,
+          fieldMetaOptions: {
+            isEnabled: true,
+            sigma: 3,
+          },
+        },
+      },
+      iconSize: { type: 'STATIC', options: { size: 10 } },
+      iconOrientation: {
+        type: 'STATIC',
+        options: { orientation: 0 },
+      },
+      symbolizeAs: {
+        options: { value: 'icon' },
+      },
+      icon: {
+        type: 'STATIC',
+        options: { value: 'airfield' },
+      },
+    },
+  },
+  id: 'uuid.v4()',
+  label: `filebeat-* | Line`,
+  minZoom: 0,
+  maxZoom: 24,
+  alpha: 0.5,
+  visible: true,
+  type: 'VECTOR',
+  query: { query: '', language: 'kuery' },
+};
+
+export const mockClientServerLineLayer = {
+  sourceDescriptor: {
+    type: 'ES_PEW_PEW',
+    applyGlobalQuery: true,
+    id: 'uuid.v4()',
+    indexPatternId: '8c7323ac-97ad-4b53-ac0a-40f8f691a918',
+    sourceGeoField: 'client.geo.location',
+    destGeoField: 'server.geo.location',
+    metrics: [
+      { type: 'sum', field: 'client.bytes', label: 'client.bytes' },
+      { type: 'sum', field: 'server.bytes', label: 'server.bytes' },
+    ],
+  },
+  style: {
+    type: 'VECTOR',
+    properties: {
+      fillColor: {
+        type: 'STATIC',
+        options: { color: '#1EA593' },
+      },
+      lineColor: {
+        type: 'STATIC',
+        options: { color: '#6092C0' },
+      },
+      lineWidth: {
+        type: 'DYNAMIC',
+        options: {
+          field: {
+            label: 'count',
+            name: 'doc_count',
+            origin: 'source',
+          },
+          minSize: 1,
+          maxSize: 8,
+          fieldMetaOptions: {
+            isEnabled: true,
+            sigma: 3,
+          },
+        },
+      },
+      iconSize: { type: 'STATIC', options: { size: 10 } },
+      iconOrientation: {
+        type: 'STATIC',
+        options: { orientation: 0 },
+      },
+      symbolizeAs: {
+        options: { value: 'icon' },
+      },
+      icon: {
+        type: 'STATIC',
+        options: { value: 'airfield' },
+      },
+    },
+  },
+  id: 'uuid.v4()',
+  label: `apm-* | Line`,
+  minZoom: 0,
+  maxZoom: 24,
+  alpha: 0.5,
+  visible: true,
+  type: 'VECTOR',
+  query: { query: '', language: 'kuery' },
+};
+
+export const mockLayerList = [
+  {
+    sourceDescriptor: { type: 'EMS_TMS', isAutoSelect: true },
+    id: 'uuid.v4()',
+    label: null,
+    minZoom: 0,
+    maxZoom: 24,
+    alpha: 1,
+    visible: true,
+    style: null,
+    type: 'VECTOR_TILE',
+  },
+  mockLineLayer,
+  mockDestinationLayer,
+  mockSourceLayer,
+];
+
+export const mockLayerListDouble = [
+  {
+    sourceDescriptor: { type: 'EMS_TMS', isAutoSelect: true },
+    id: 'uuid.v4()',
+    label: null,
+    minZoom: 0,
+    maxZoom: 24,
+    alpha: 1,
+    visible: true,
+    style: null,
+    type: 'VECTOR_TILE',
+  },
+  mockLineLayer,
+  mockDestinationLayer,
+  mockSourceLayer,
+  mockLineLayer,
+  mockDestinationLayer,
+  mockSourceLayer,
+];
+
+export const mockLayerListMixed = [
+  {
+    sourceDescriptor: { type: 'EMS_TMS', isAutoSelect: true },
+    id: 'uuid.v4()',
+    label: null,
+    minZoom: 0,
+    maxZoom: 24,
+    alpha: 1,
+    visible: true,
+    style: null,
+    type: 'VECTOR_TILE',
+  },
+  mockLineLayer,
+  mockDestinationLayer,
+  mockSourceLayer,
+  mockClientServerLineLayer,
+  mockServerLayer,
+  mockClientLayer,
+];
+
+export const mockAPMIndexPattern: IndexPatternSavedObject = {
+  id: 'apm-*',
+  type: 'index-pattern',
+  _version: 'abc',
+  attributes: {
+    title: 'apm-*',
+  },
+};
+
+export const mockAPMRegexIndexPattern: IndexPatternSavedObject = {
+  id: 'apm-7.*',
+  type: 'index-pattern',
+  _version: 'abc',
+  attributes: {
+    title: 'apm-7.*',
+  },
+};
+
+export const mockFilebeatIndexPattern: IndexPatternSavedObject = {
+  id: 'filebeat-*',
+  type: 'index-pattern',
+  _version: 'abc',
+  attributes: {
+    title: 'filebeat-*',
+  },
+};
+
+export const mockAuditbeatIndexPattern: IndexPatternSavedObject = {
+  id: 'auditbeat-*',
+  type: 'index-pattern',
+  _version: 'abc',
+  attributes: {
+    title: 'auditbeat-*',
+  },
+};
+
+export const mockAPMTransactionIndexPattern: IndexPatternSavedObject = {
+  id: 'apm-*-transaction*',
+  type: 'index-pattern',
+  _version: 'abc',
+  attributes: {
+    title: 'apm-*-transaction*',
+  },
+};
+
+export const mockGlobIndexPattern: IndexPatternSavedObject = {
+  id: '*',
+  type: 'index-pattern',
+  _version: 'abc',
+  attributes: {
+    title: '*',
+  },
+};
diff --git a/x-pack/plugins/siem/public/components/embeddables/__snapshots__/embeddable.test.tsx.snap b/x-pack/plugins/siem/public/network/components/embeddables/__snapshots__/embeddable.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/embeddables/__snapshots__/embeddable.test.tsx.snap
rename to x-pack/plugins/siem/public/network/components/embeddables/__snapshots__/embeddable.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/embeddables/__snapshots__/embeddable_header.test.tsx.snap b/x-pack/plugins/siem/public/network/components/embeddables/__snapshots__/embeddable_header.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/embeddables/__snapshots__/embeddable_header.test.tsx.snap
rename to x-pack/plugins/siem/public/network/components/embeddables/__snapshots__/embeddable_header.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/embeddables/__snapshots__/embedded_map.test.tsx.snap b/x-pack/plugins/siem/public/network/components/embeddables/__snapshots__/embedded_map.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/embeddables/__snapshots__/embedded_map.test.tsx.snap
rename to x-pack/plugins/siem/public/network/components/embeddables/__snapshots__/embedded_map.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/embeddables/__snapshots__/index_patterns_missing_prompt.test.tsx.snap b/x-pack/plugins/siem/public/network/components/embeddables/__snapshots__/index_patterns_missing_prompt.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/embeddables/__snapshots__/index_patterns_missing_prompt.test.tsx.snap
rename to x-pack/plugins/siem/public/network/components/embeddables/__snapshots__/index_patterns_missing_prompt.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/embeddables/embeddable.test.tsx b/x-pack/plugins/siem/public/network/components/embeddables/embeddable.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/embeddables/embeddable.test.tsx
rename to x-pack/plugins/siem/public/network/components/embeddables/embeddable.test.tsx
diff --git a/x-pack/plugins/siem/public/components/embeddables/embeddable.tsx b/x-pack/plugins/siem/public/network/components/embeddables/embeddable.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/embeddables/embeddable.tsx
rename to x-pack/plugins/siem/public/network/components/embeddables/embeddable.tsx
diff --git a/x-pack/plugins/siem/public/components/embeddables/embeddable_header.test.tsx b/x-pack/plugins/siem/public/network/components/embeddables/embeddable_header.test.tsx
similarity index 96%
rename from x-pack/plugins/siem/public/components/embeddables/embeddable_header.test.tsx
rename to x-pack/plugins/siem/public/network/components/embeddables/embeddable_header.test.tsx
index 3b8e137618ab0c..ecbff02353fef5 100644
--- a/x-pack/plugins/siem/public/components/embeddables/embeddable_header.test.tsx
+++ b/x-pack/plugins/siem/public/network/components/embeddables/embeddable_header.test.tsx
@@ -7,7 +7,7 @@
 import { mount, shallow } from 'enzyme';
 import React from 'react';
 
-import { TestProviders } from '../../mock';
+import { TestProviders } from '../../../common/mock';
 import { EmbeddableHeader } from './embeddable_header';
 
 describe('EmbeddableHeader', () => {
diff --git a/x-pack/plugins/siem/public/components/embeddables/embeddable_header.tsx b/x-pack/plugins/siem/public/network/components/embeddables/embeddable_header.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/embeddables/embeddable_header.tsx
rename to x-pack/plugins/siem/public/network/components/embeddables/embeddable_header.tsx
diff --git a/x-pack/plugins/siem/public/components/embeddables/embedded_map.test.tsx b/x-pack/plugins/siem/public/network/components/embeddables/embedded_map.test.tsx
similarity index 85%
rename from x-pack/plugins/siem/public/components/embeddables/embedded_map.test.tsx
rename to x-pack/plugins/siem/public/network/components/embeddables/embedded_map.test.tsx
index a807b4d6a838bd..33eadad9aa774b 100644
--- a/x-pack/plugins/siem/public/components/embeddables/embedded_map.test.tsx
+++ b/x-pack/plugins/siem/public/network/components/embeddables/embedded_map.test.tsx
@@ -7,15 +7,15 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 
-import { useIndexPatterns } from '../../hooks/use_index_patterns';
+import { useIndexPatterns } from '../../../common/hooks/use_index_patterns';
 import { EmbeddedMapComponent } from './embedded_map';
 import { SetQuery } from './types';
 
 const mockUseIndexPatterns = useIndexPatterns as jest.Mock;
-jest.mock('../../hooks/use_index_patterns');
+jest.mock('../../../common/hooks/use_index_patterns');
 mockUseIndexPatterns.mockImplementation(() => [true, []]);
 
-jest.mock('../../lib/kibana');
+jest.mock('../../../common/lib/kibana');
 
 describe('EmbeddedMapComponent', () => {
   let setQuery: SetQuery;
diff --git a/x-pack/plugins/siem/public/components/embeddables/embedded_map.tsx b/x-pack/plugins/siem/public/network/components/embeddables/embedded_map.tsx
similarity index 89%
rename from x-pack/plugins/siem/public/components/embeddables/embedded_map.tsx
rename to x-pack/plugins/siem/public/network/components/embeddables/embedded_map.tsx
index d2dd3e54293414..2e9e13839d769a 100644
--- a/x-pack/plugins/siem/public/components/embeddables/embedded_map.tsx
+++ b/x-pack/plugins/siem/public/network/components/embeddables/embedded_map.tsx
@@ -9,12 +9,15 @@ import React, { useEffect, useState } from 'react';
 import { createPortalNode, InPortal } from 'react-reverse-portal';
 import styled, { css } from 'styled-components';
 
-import { EmbeddablePanel, ErrorEmbeddable } from '../../../../../../src/plugins/embeddable/public';
-import { DEFAULT_INDEX_KEY } from '../../../common/constants';
-import { getIndexPatternTitleIdMapping } from '../../hooks/api/helpers';
-import { useIndexPatterns } from '../../hooks/use_index_patterns';
-import { Loader } from '../loader';
-import { displayErrorToast, useStateToaster } from '../toasters';
+import {
+  EmbeddablePanel,
+  ErrorEmbeddable,
+} from '../../../../../../../src/plugins/embeddable/public';
+import { DEFAULT_INDEX_KEY } from '../../../../common/constants';
+import { getIndexPatternTitleIdMapping } from '../../../common/hooks/api/helpers';
+import { useIndexPatterns } from '../../../common/hooks/use_index_patterns';
+import { Loader } from '../../../common/components/loader';
+import { displayErrorToast, useStateToaster } from '../../../common/components/toasters';
 import { Embeddable } from './embeddable';
 import { EmbeddableHeader } from './embeddable_header';
 import { createEmbeddable, findMatchingIndexPatterns } from './embedded_map_helpers';
@@ -22,10 +25,10 @@ import { IndexPatternsMissingPrompt } from './index_patterns_missing_prompt';
 import { MapToolTip } from './map_tool_tip/map_tool_tip';
 import * as i18n from './translations';
 import { SetQuery } from './types';
-import { MapEmbeddable } from '../../../../../legacy/plugins/maps/public';
-import { Query, Filter } from '../../../../../../src/plugins/data/public';
-import { useKibana, useUiSetting$ } from '../../lib/kibana';
-import { getSavedObjectFinder } from '../../../../../../src/plugins/saved_objects/public';
+import { MapEmbeddable } from '../../../../../../legacy/plugins/maps/public';
+import { Query, Filter } from '../../../../../../../src/plugins/data/public';
+import { useKibana, useUiSetting$ } from '../../../common/lib/kibana';
+import { getSavedObjectFinder } from '../../../../../../../src/plugins/saved_objects/public';
 
 interface EmbeddableMapProps {
   maintainRatio?: boolean;
diff --git a/x-pack/plugins/siem/public/components/embeddables/embedded_map_helpers.test.tsx b/x-pack/plugins/siem/public/network/components/embeddables/embedded_map_helpers.test.tsx
similarity index 97%
rename from x-pack/plugins/siem/public/components/embeddables/embedded_map_helpers.test.tsx
rename to x-pack/plugins/siem/public/network/components/embeddables/embedded_map_helpers.test.tsx
index aaae43d9684af0..d42ac919e9af07 100644
--- a/x-pack/plugins/siem/public/components/embeddables/embedded_map_helpers.test.tsx
+++ b/x-pack/plugins/siem/public/network/components/embeddables/embedded_map_helpers.test.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { embeddablePluginMock } from '../../../../../../src/plugins/embeddable/public/mocks';
+import { embeddablePluginMock } from '../../../../../../../src/plugins/embeddable/public/mocks';
 import { createEmbeddable, findMatchingIndexPatterns } from './embedded_map_helpers';
 import { createPortalNode } from 'react-reverse-portal';
 import {
diff --git a/x-pack/plugins/siem/public/components/embeddables/embedded_map_helpers.tsx b/x-pack/plugins/siem/public/network/components/embeddables/embedded_map_helpers.tsx
similarity index 92%
rename from x-pack/plugins/siem/public/components/embeddables/embedded_map_helpers.tsx
rename to x-pack/plugins/siem/public/network/components/embeddables/embedded_map_helpers.tsx
index dd7e1cd6ea9bac..37da8abc029b11 100644
--- a/x-pack/plugins/siem/public/components/embeddables/embedded_map_helpers.tsx
+++ b/x-pack/plugins/siem/public/network/components/embeddables/embedded_map_helpers.tsx
@@ -10,22 +10,22 @@ import { OutPortal, PortalNode } from 'react-reverse-portal';
 import minimatch from 'minimatch';
 import { IndexPatternMapping, SetQuery } from './types';
 import { getLayerList } from './map_config';
-import { MAP_SAVED_OBJECT_TYPE } from '../../../../maps/public';
+import { MAP_SAVED_OBJECT_TYPE } from '../../../../../maps/public';
 import {
   MapEmbeddable,
   RenderTooltipContentParams,
   MapEmbeddableInput,
-} from '../../../../../legacy/plugins/maps/public';
+} from '../../../../../../legacy/plugins/maps/public';
 import * as i18n from './translations';
-import { Query, Filter } from '../../../../../../src/plugins/data/public';
+import { Query, Filter } from '../../../../../../../src/plugins/data/public';
 import {
   EmbeddableStart,
   isErrorEmbeddable,
   EmbeddableOutput,
   ViewMode,
   ErrorEmbeddable,
-} from '../../../../../../src/plugins/embeddable/public';
-import { IndexPatternSavedObject } from '../../hooks/types';
+} from '../../../../../../../src/plugins/embeddable/public';
+import { IndexPatternSavedObject } from '../../../common/hooks/types';
 
 /**
  * Creates MapEmbeddable with provided initial configuration
diff --git a/x-pack/plugins/siem/public/components/embeddables/index_patterns_missing_prompt.test.tsx b/x-pack/plugins/siem/public/network/components/embeddables/index_patterns_missing_prompt.test.tsx
similarity index 93%
rename from x-pack/plugins/siem/public/components/embeddables/index_patterns_missing_prompt.test.tsx
rename to x-pack/plugins/siem/public/network/components/embeddables/index_patterns_missing_prompt.test.tsx
index 4f617644a1fe14..af31cf64df84e6 100644
--- a/x-pack/plugins/siem/public/components/embeddables/index_patterns_missing_prompt.test.tsx
+++ b/x-pack/plugins/siem/public/network/components/embeddables/index_patterns_missing_prompt.test.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 
 import { IndexPatternsMissingPromptComponent } from './index_patterns_missing_prompt';
 
-jest.mock('../../lib/kibana');
+jest.mock('../../../common/lib/kibana');
 
 describe('IndexPatternsMissingPrompt', () => {
   test('renders correctly against snapshot', () => {
diff --git a/x-pack/plugins/siem/public/components/embeddables/index_patterns_missing_prompt.tsx b/x-pack/plugins/siem/public/network/components/embeddables/index_patterns_missing_prompt.tsx
similarity index 97%
rename from x-pack/plugins/siem/public/components/embeddables/index_patterns_missing_prompt.tsx
rename to x-pack/plugins/siem/public/network/components/embeddables/index_patterns_missing_prompt.tsx
index abd33505b67b99..aeed6fb2fe20e6 100644
--- a/x-pack/plugins/siem/public/components/embeddables/index_patterns_missing_prompt.tsx
+++ b/x-pack/plugins/siem/public/network/components/embeddables/index_patterns_missing_prompt.tsx
@@ -8,7 +8,7 @@ import { EuiButton, EuiCode, EuiEmptyPrompt } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React from 'react';
 
-import { useKibana, useBasePath } from '../../lib/kibana';
+import { useKibana, useBasePath } from '../../../common/lib/kibana';
 import * as i18n from './translations';
 
 export const IndexPatternsMissingPromptComponent = () => {
diff --git a/x-pack/plugins/siem/public/components/embeddables/map_config.test.ts b/x-pack/plugins/siem/public/network/components/embeddables/map_config.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/embeddables/map_config.test.ts
rename to x-pack/plugins/siem/public/network/components/embeddables/map_config.test.ts
diff --git a/x-pack/plugins/siem/public/components/embeddables/map_config.ts b/x-pack/plugins/siem/public/network/components/embeddables/map_config.ts
similarity index 99%
rename from x-pack/plugins/siem/public/components/embeddables/map_config.ts
rename to x-pack/plugins/siem/public/network/components/embeddables/map_config.ts
index 0d1cd515820c58..88bc6e69949841 100644
--- a/x-pack/plugins/siem/public/components/embeddables/map_config.ts
+++ b/x-pack/plugins/siem/public/network/components/embeddables/map_config.ts
@@ -13,7 +13,7 @@ import {
   LayerMappingDetails,
 } from './types';
 import * as i18n from './translations';
-import { SOURCE_TYPES } from '../../../../maps/common/constants';
+import { SOURCE_TYPES } from '../../../../../maps/common/constants';
 const euiVisColorPalette = euiPaletteColorBlind();
 
 // Update field mappings to modify what fields will be returned to map tooltip
diff --git a/x-pack/plugins/siem/public/components/embeddables/map_tool_tip/__snapshots__/line_tool_tip_content.test.tsx.snap b/x-pack/plugins/siem/public/network/components/embeddables/map_tool_tip/__snapshots__/line_tool_tip_content.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/embeddables/map_tool_tip/__snapshots__/line_tool_tip_content.test.tsx.snap
rename to x-pack/plugins/siem/public/network/components/embeddables/map_tool_tip/__snapshots__/line_tool_tip_content.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/embeddables/map_tool_tip/__snapshots__/map_tool_tip.test.tsx.snap b/x-pack/plugins/siem/public/network/components/embeddables/map_tool_tip/__snapshots__/map_tool_tip.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/embeddables/map_tool_tip/__snapshots__/map_tool_tip.test.tsx.snap
rename to x-pack/plugins/siem/public/network/components/embeddables/map_tool_tip/__snapshots__/map_tool_tip.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/embeddables/map_tool_tip/__snapshots__/point_tool_tip_content.test.tsx.snap b/x-pack/plugins/siem/public/network/components/embeddables/map_tool_tip/__snapshots__/point_tool_tip_content.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/embeddables/map_tool_tip/__snapshots__/point_tool_tip_content.test.tsx.snap
rename to x-pack/plugins/siem/public/network/components/embeddables/map_tool_tip/__snapshots__/point_tool_tip_content.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/embeddables/map_tool_tip/__snapshots__/tooltip_footer.test.tsx.snap b/x-pack/plugins/siem/public/network/components/embeddables/map_tool_tip/__snapshots__/tooltip_footer.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/embeddables/map_tool_tip/__snapshots__/tooltip_footer.test.tsx.snap
rename to x-pack/plugins/siem/public/network/components/embeddables/map_tool_tip/__snapshots__/tooltip_footer.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/embeddables/map_tool_tip/line_tool_tip_content.test.tsx b/x-pack/plugins/siem/public/network/components/embeddables/map_tool_tip/line_tool_tip_content.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/embeddables/map_tool_tip/line_tool_tip_content.test.tsx
rename to x-pack/plugins/siem/public/network/components/embeddables/map_tool_tip/line_tool_tip_content.test.tsx
diff --git a/x-pack/plugins/siem/public/components/embeddables/map_tool_tip/line_tool_tip_content.tsx b/x-pack/plugins/siem/public/network/components/embeddables/map_tool_tip/line_tool_tip_content.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/embeddables/map_tool_tip/line_tool_tip_content.tsx
rename to x-pack/plugins/siem/public/network/components/embeddables/map_tool_tip/line_tool_tip_content.tsx
diff --git a/x-pack/plugins/siem/public/components/embeddables/map_tool_tip/map_tool_tip.test.tsx b/x-pack/plugins/siem/public/network/components/embeddables/map_tool_tip/map_tool_tip.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/embeddables/map_tool_tip/map_tool_tip.test.tsx
rename to x-pack/plugins/siem/public/network/components/embeddables/map_tool_tip/map_tool_tip.test.tsx
diff --git a/x-pack/plugins/siem/public/components/embeddables/map_tool_tip/map_tool_tip.tsx b/x-pack/plugins/siem/public/network/components/embeddables/map_tool_tip/map_tool_tip.tsx
similarity index 98%
rename from x-pack/plugins/siem/public/components/embeddables/map_tool_tip/map_tool_tip.tsx
rename to x-pack/plugins/siem/public/network/components/embeddables/map_tool_tip/map_tool_tip.tsx
index fc55e3437dc218..0f38c350986b40 100644
--- a/x-pack/plugins/siem/public/components/embeddables/map_tool_tip/map_tool_tip.tsx
+++ b/x-pack/plugins/siem/public/network/components/embeddables/map_tool_tip/map_tool_tip.tsx
@@ -15,7 +15,7 @@ import { FeatureGeometry, FeatureProperty, MapToolTipProps } from '../types';
 import { ToolTipFooter } from './tooltip_footer';
 import { LineToolTipContent } from './line_tool_tip_content';
 import { PointToolTipContent } from './point_tool_tip_content';
-import { Loader } from '../../loader';
+import { Loader } from '../../../../common/components/loader';
 import * as i18n from '../translations';
 
 export const MapToolTipComponent = ({
diff --git a/x-pack/plugins/siem/public/components/embeddables/map_tool_tip/point_tool_tip_content.test.tsx b/x-pack/plugins/siem/public/network/components/embeddables/map_tool_tip/point_tool_tip_content.test.tsx
similarity index 89%
rename from x-pack/plugins/siem/public/components/embeddables/map_tool_tip/point_tool_tip_content.test.tsx
rename to x-pack/plugins/siem/public/network/components/embeddables/map_tool_tip/point_tool_tip_content.test.tsx
index c90af16b0d99a6..d5a7c51ccdeb8d 100644
--- a/x-pack/plugins/siem/public/components/embeddables/map_tool_tip/point_tool_tip_content.test.tsx
+++ b/x-pack/plugins/siem/public/network/components/embeddables/map_tool_tip/point_tool_tip_content.test.tsx
@@ -8,11 +8,11 @@ import { shallow } from 'enzyme';
 import React from 'react';
 import { FeatureProperty } from '../types';
 import { getRenderedFieldValue, PointToolTipContentComponent } from './point_tool_tip_content';
-import { TestProviders } from '../../../mock';
-import { getEmptyStringTag } from '../../empty_value';
-import { HostDetailsLink, IPDetailsLink } from '../../links';
-import { useMountAppended } from '../../../utils/use_mount_appended';
-import { FlowTarget } from '../../../graphql/types';
+import { TestProviders } from '../../../../common/mock';
+import { getEmptyStringTag } from '../../../../common/components/empty_value';
+import { HostDetailsLink, IPDetailsLink } from '../../../../common/components/links';
+import { useMountAppended } from '../../../../common/utils/use_mount_appended';
+import { FlowTarget } from '../../../../graphql/types';
 
 describe('PointToolTipContent', () => {
   const mount = useMountAppended();
diff --git a/x-pack/plugins/siem/public/components/embeddables/map_tool_tip/point_tool_tip_content.tsx b/x-pack/plugins/siem/public/network/components/embeddables/map_tool_tip/point_tool_tip_content.tsx
similarity index 81%
rename from x-pack/plugins/siem/public/components/embeddables/map_tool_tip/point_tool_tip_content.tsx
rename to x-pack/plugins/siem/public/network/components/embeddables/map_tool_tip/point_tool_tip_content.tsx
index c635061ca7b7a8..c691407f6166ec 100644
--- a/x-pack/plugins/siem/public/components/embeddables/map_tool_tip/point_tool_tip_content.tsx
+++ b/x-pack/plugins/siem/public/network/components/embeddables/map_tool_tip/point_tool_tip_content.tsx
@@ -9,13 +9,16 @@ import { sourceDestinationFieldMappings } from '../map_config';
 import {
   AddFilterToGlobalSearchBar,
   createFilter,
-} from '../../page/add_filter_to_global_search_bar';
-import { getEmptyTagValue, getOrEmptyTagFromValue } from '../../empty_value';
-import { DescriptionListStyled } from '../../page';
+} from '../../../../common/components/add_filter_to_global_search_bar';
+import {
+  getEmptyTagValue,
+  getOrEmptyTagFromValue,
+} from '../../../../common/components/empty_value';
+import { DescriptionListStyled } from '../../../../common/components/page';
 import { FeatureProperty } from '../types';
-import { HostDetailsLink, IPDetailsLink } from '../../links';
-import { DefaultFieldRenderer } from '../../field_renderers/field_renderers';
-import { FlowTarget } from '../../../graphql/types';
+import { HostDetailsLink, IPDetailsLink } from '../../../../common/components/links';
+import { DefaultFieldRenderer } from '../../../../timelines/components/field_renderers/field_renderers';
+import { FlowTarget } from '../../../../graphql/types';
 
 interface PointToolTipContentProps {
   contextId: string;
diff --git a/x-pack/plugins/siem/public/components/embeddables/map_tool_tip/tooltip_footer.test.tsx b/x-pack/plugins/siem/public/network/components/embeddables/map_tool_tip/tooltip_footer.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/embeddables/map_tool_tip/tooltip_footer.test.tsx
rename to x-pack/plugins/siem/public/network/components/embeddables/map_tool_tip/tooltip_footer.test.tsx
diff --git a/x-pack/plugins/siem/public/components/embeddables/map_tool_tip/tooltip_footer.tsx b/x-pack/plugins/siem/public/network/components/embeddables/map_tool_tip/tooltip_footer.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/embeddables/map_tool_tip/tooltip_footer.tsx
rename to x-pack/plugins/siem/public/network/components/embeddables/map_tool_tip/tooltip_footer.tsx
diff --git a/x-pack/plugins/siem/public/components/embeddables/translations.ts b/x-pack/plugins/siem/public/network/components/embeddables/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/embeddables/translations.ts
rename to x-pack/plugins/siem/public/network/components/embeddables/translations.ts
diff --git a/x-pack/plugins/siem/public/network/components/embeddables/types.ts b/x-pack/plugins/siem/public/network/components/embeddables/types.ts
new file mode 100644
index 00000000000000..e111c2728ba7ea
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/embeddables/types.ts
@@ -0,0 +1,58 @@
+/*
+ * 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 { RenderTooltipContentParams } from '../../../../../../legacy/plugins/maps/public';
+import { inputsModel } from '../../../common/store/inputs';
+
+export interface IndexPatternMapping {
+  title: string;
+  id: string;
+}
+
+export interface LayerMappingDetails {
+  metricField: string;
+  geoField: string;
+  tooltipProperties: string[];
+  label: string;
+}
+
+export interface LayerMapping {
+  source: LayerMappingDetails;
+  destination: LayerMappingDetails;
+}
+
+export interface LayerMappingCollection {
+  [indexPatternTitle: string]: LayerMapping;
+}
+
+export type SetQuery = (params: {
+  id: string;
+  inspect: inputsModel.InspectQuery | null;
+  loading: boolean;
+  refetch: inputsModel.Refetch;
+}) => void;
+
+export interface MapFeature {
+  id: number;
+  layerId: string;
+}
+
+export interface LoadFeatureProps {
+  layerId: string;
+  featureId: number;
+}
+
+export interface FeatureProperty {
+  _propertyKey: string;
+  _rawValue: string | string[];
+}
+
+export interface FeatureGeometry {
+  coordinates: [number];
+  type: string;
+}
+
+export type MapToolTipProps = Partial<RenderTooltipContentParams>;
diff --git a/x-pack/plugins/siem/public/components/flow_controls/__snapshots__/flow_direction_select.test.tsx.snap b/x-pack/plugins/siem/public/network/components/flow_controls/__snapshots__/flow_direction_select.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/flow_controls/__snapshots__/flow_direction_select.test.tsx.snap
rename to x-pack/plugins/siem/public/network/components/flow_controls/__snapshots__/flow_direction_select.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/flow_controls/__snapshots__/flow_target_select.test.tsx.snap b/x-pack/plugins/siem/public/network/components/flow_controls/__snapshots__/flow_target_select.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/flow_controls/__snapshots__/flow_target_select.test.tsx.snap
rename to x-pack/plugins/siem/public/network/components/flow_controls/__snapshots__/flow_target_select.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/flow_controls/flow_direction_select.test.tsx b/x-pack/plugins/siem/public/network/components/flow_controls/flow_direction_select.test.tsx
similarity index 96%
rename from x-pack/plugins/siem/public/components/flow_controls/flow_direction_select.test.tsx
rename to x-pack/plugins/siem/public/network/components/flow_controls/flow_direction_select.test.tsx
index f984b534c188d7..0a35b28db8ce4e 100644
--- a/x-pack/plugins/siem/public/components/flow_controls/flow_direction_select.test.tsx
+++ b/x-pack/plugins/siem/public/network/components/flow_controls/flow_direction_select.test.tsx
@@ -7,7 +7,7 @@
 import { mount, shallow } from 'enzyme';
 import React from 'react';
 
-import { FlowDirection } from '../../graphql/types';
+import { FlowDirection } from '../../../graphql/types';
 
 import { FlowDirectionSelect } from './flow_direction_select';
 
diff --git a/x-pack/plugins/siem/public/components/flow_controls/flow_direction_select.tsx b/x-pack/plugins/siem/public/network/components/flow_controls/flow_direction_select.tsx
similarity index 95%
rename from x-pack/plugins/siem/public/components/flow_controls/flow_direction_select.tsx
rename to x-pack/plugins/siem/public/network/components/flow_controls/flow_direction_select.tsx
index 2b826164063be1..d3698a772300bf 100644
--- a/x-pack/plugins/siem/public/components/flow_controls/flow_direction_select.tsx
+++ b/x-pack/plugins/siem/public/network/components/flow_controls/flow_direction_select.tsx
@@ -7,7 +7,7 @@
 import { EuiFilterButton, EuiFilterGroup } from '@elastic/eui';
 import React from 'react';
 
-import { FlowDirection } from '../../graphql/types';
+import { FlowDirection } from '../../../graphql/types';
 
 import * as i18n from './translations';
 
diff --git a/x-pack/plugins/siem/public/components/flow_controls/flow_target_select.test.tsx b/x-pack/plugins/siem/public/network/components/flow_controls/flow_target_select.test.tsx
similarity index 97%
rename from x-pack/plugins/siem/public/components/flow_controls/flow_target_select.test.tsx
rename to x-pack/plugins/siem/public/network/components/flow_controls/flow_target_select.test.tsx
index 67006d8a7a121a..d033ffc09a82db 100644
--- a/x-pack/plugins/siem/public/components/flow_controls/flow_target_select.test.tsx
+++ b/x-pack/plugins/siem/public/network/components/flow_controls/flow_target_select.test.tsx
@@ -8,7 +8,7 @@ import { mount, shallow } from 'enzyme';
 import { clone } from 'lodash/fp';
 import React from 'react';
 
-import { FlowDirection, FlowTarget } from '../../graphql/types';
+import { FlowDirection, FlowTarget } from '../../../graphql/types';
 
 import { FlowTargetSelect } from './flow_target_select';
 
diff --git a/x-pack/plugins/siem/public/components/flow_controls/flow_target_select.tsx b/x-pack/plugins/siem/public/network/components/flow_controls/flow_target_select.tsx
similarity index 96%
rename from x-pack/plugins/siem/public/components/flow_controls/flow_target_select.tsx
rename to x-pack/plugins/siem/public/network/components/flow_controls/flow_target_select.tsx
index 15d1c663638374..6d6dcfd33b870f 100644
--- a/x-pack/plugins/siem/public/components/flow_controls/flow_target_select.tsx
+++ b/x-pack/plugins/siem/public/network/components/flow_controls/flow_target_select.tsx
@@ -7,7 +7,7 @@
 import { EuiSuperSelect } from '@elastic/eui';
 import React from 'react';
 
-import { FlowDirection, FlowTarget } from '../../graphql/types';
+import { FlowDirection, FlowTarget } from '../../../graphql/types';
 
 import * as i18n from './translations';
 
diff --git a/x-pack/plugins/siem/public/components/flow_controls/translations.ts b/x-pack/plugins/siem/public/network/components/flow_controls/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/flow_controls/translations.ts
rename to x-pack/plugins/siem/public/network/components/flow_controls/translations.ts
diff --git a/x-pack/plugins/siem/public/network/components/flow_target_select_connected/index.test.tsx b/x-pack/plugins/siem/public/network/components/flow_target_select_connected/index.test.tsx
new file mode 100644
index 00000000000000..edf9e69eeed563
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/flow_target_select_connected/index.test.tsx
@@ -0,0 +1,42 @@
+/*
+ * 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 { mount } from 'enzyme';
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+
+import { TestProviders } from '../../../common/mock';
+import { FlowTargetSelectConnectedComponent } from './index';
+import { FlowTarget } from '../../../graphql/types';
+
+describe('Flow Target Select Connected', () => {
+  test('renders correctly against snapshot flowTarget source', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <MemoryRouter>
+          <FlowTargetSelectConnectedComponent flowTarget={FlowTarget.source} />
+        </MemoryRouter>
+      </TestProviders>
+    );
+    expect(wrapper.find('Memo(FlowTargetSelectComponent)').prop('selectedTarget')).toEqual(
+      FlowTarget.source
+    );
+  });
+
+  test('renders correctly against snapshot flowTarget destination', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <MemoryRouter>
+          <FlowTargetSelectConnectedComponent flowTarget={FlowTarget.destination} />
+        </MemoryRouter>
+      </TestProviders>
+    );
+
+    expect(wrapper.find('Memo(FlowTargetSelectComponent)').prop('selectedTarget')).toEqual(
+      FlowTarget.destination
+    );
+  });
+});
diff --git a/x-pack/plugins/siem/public/network/components/flow_target_select_connected/index.tsx b/x-pack/plugins/siem/public/network/components/flow_target_select_connected/index.tsx
new file mode 100644
index 00000000000000..3ce623cfc97b8f
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/flow_target_select_connected/index.tsx
@@ -0,0 +1,65 @@
+/*
+ * 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 { Location } from 'history';
+import { EuiFlexItem } from '@elastic/eui';
+import React, { useCallback } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import styled from 'styled-components';
+
+import { FlowDirection, FlowTarget } from '../../../graphql/types';
+import * as i18nIp from '../ip_overview/translations';
+
+import { FlowTargetSelect } from '../flow_controls/flow_target_select';
+import { IpOverviewId } from '../../../timelines/components/field_renderers/field_renderers';
+
+const SelectTypeItem = styled(EuiFlexItem)`
+  min-width: 180px;
+`;
+
+SelectTypeItem.displayName = 'SelectTypeItem';
+
+interface Props {
+  flowTarget: FlowTarget;
+}
+
+const getUpdatedFlowTargetPath = (
+  location: Location,
+  currentFlowTarget: FlowTarget,
+  newFlowTarget: FlowTarget
+) => {
+  const newPathame = location.pathname.replace(currentFlowTarget, newFlowTarget);
+
+  return `${newPathame}${location.search}`;
+};
+
+export const FlowTargetSelectConnectedComponent: React.FC<Props> = ({ flowTarget }) => {
+  const history = useHistory();
+  const location = useLocation();
+
+  const updateIpDetailsFlowTarget = useCallback(
+    (newFlowTarget: FlowTarget) => {
+      const newPath = getUpdatedFlowTargetPath(location, flowTarget, newFlowTarget);
+      history.push(newPath);
+    },
+    [history, location, flowTarget]
+  );
+
+  return (
+    <SelectTypeItem grow={false} data-test-subj={`${IpOverviewId}-select-flow-target`}>
+      <FlowTargetSelect
+        id={IpOverviewId}
+        isLoading={!flowTarget}
+        selectedDirection={FlowDirection.uniDirectional}
+        selectedTarget={flowTarget}
+        displayTextOverride={[i18nIp.AS_SOURCE, i18nIp.AS_DESTINATION]}
+        updateFlowTargetAction={updateIpDetailsFlowTarget}
+      />
+    </SelectTypeItem>
+  );
+};
+
+export const FlowTargetSelectConnected = React.memo(FlowTargetSelectConnectedComponent);
diff --git a/x-pack/plugins/siem/public/components/ip/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/network/components/ip/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/ip/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/network/components/ip/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/network/components/ip/index.test.tsx b/x-pack/plugins/siem/public/network/components/ip/index.test.tsx
new file mode 100644
index 00000000000000..78ba0bb530c9d0
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/ip/index.test.tsx
@@ -0,0 +1,55 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import React from 'react';
+
+import { TestProviders } from '../../../common/mock/test_providers';
+import { useMountAppended } from '../../../common/utils/use_mount_appended';
+
+import { Ip } from '.';
+
+describe('Port', () => {
+  const mount = useMountAppended();
+
+  test('renders correctly against snapshot', () => {
+    const wrapper = shallow(
+      <Ip contextId="test" eventId="abcd" fieldName="destination.ip" value="10.1.2.3" />
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('it renders the the ip address', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <Ip contextId="test" eventId="abcd" fieldName="destination.ip" value="10.1.2.3" />
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="formatted-ip"]')
+        .first()
+        .text()
+    ).toEqual('10.1.2.3');
+  });
+
+  test('it hyperlinks to the network/ip page', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <Ip contextId="test" eventId="abcd" fieldName="destination.ip" value="10.1.2.3" />
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="draggable-content-destination.ip"]')
+        .find('a')
+        .first()
+        .props().href
+    ).toEqual('#/link-to/network/ip/10.1.2.3/source');
+  });
+});
diff --git a/x-pack/plugins/siem/public/network/components/ip/index.tsx b/x-pack/plugins/siem/public/network/components/ip/index.tsx
new file mode 100644
index 00000000000000..21e2dd3ebc04dc
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/ip/index.tsx
@@ -0,0 +1,36 @@
+/*
+ * 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 { FormattedFieldValue } from '../../../timelines/components/timeline/body/renderers/formatted_field';
+
+export const SOURCE_IP_FIELD_NAME = 'source.ip';
+export const DESTINATION_IP_FIELD_NAME = 'destination.ip';
+
+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 = React.memo<{
+  contextId: string;
+  eventId: string;
+  fieldName: string;
+  value?: string | null;
+}>(({ contextId, eventId, fieldName, value }) => (
+  <FormattedFieldValue
+    contextId={contextId}
+    data-test-subj="formatted-ip"
+    eventId={eventId}
+    fieldName={fieldName}
+    fieldType={IP_FIELD_TYPE}
+    value={value}
+  />
+));
+
+Ip.displayName = 'Ip';
diff --git a/x-pack/plugins/siem/public/components/page/network/ip_overview/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/network/components/ip_overview/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/network/ip_overview/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/network/components/ip_overview/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/network/components/ip_overview/index.test.tsx b/x-pack/plugins/siem/public/network/components/ip_overview/index.test.tsx
new file mode 100644
index 00000000000000..bce811c58e4367
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/ip_overview/index.test.tsx
@@ -0,0 +1,63 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import React from 'react';
+import { ActionCreator } from 'typescript-fsa';
+
+import { FlowTarget } from '../../../graphql/types';
+import {
+  apolloClientObservable,
+  mockGlobalState,
+  TestProviders,
+  SUB_PLUGINS_REDUCER,
+} from '../../../common/mock';
+import { createStore, State } from '../../../common/store';
+import { networkModel } from '../../store';
+
+import { IpOverview } from './index';
+import { mockData } from './mock';
+import { mockAnomalies } from '../../../common/components/ml/mock';
+import { NarrowDateRange } from '../../../common/components/ml/types';
+
+describe('IP Overview Component', () => {
+  const state: State = mockGlobalState;
+
+  let store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable);
+
+  beforeEach(() => {
+    store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable);
+  });
+
+  describe('rendering', () => {
+    const mockProps = {
+      anomaliesData: mockAnomalies,
+      data: mockData.IpOverview,
+      endDate: new Date('2019-06-18T06:00:00.000Z').valueOf(),
+      flowTarget: FlowTarget.source,
+      loading: false,
+      id: 'ipOverview',
+      ip: '10.10.10.10',
+      isLoadingAnomaliesData: false,
+      narrowDateRange: (jest.fn() as unknown) as NarrowDateRange,
+      startDate: new Date('2019-06-15T06:00:00.000Z').valueOf(),
+      type: networkModel.NetworkType.details,
+      updateFlowTargetAction: (jest.fn() as unknown) as ActionCreator<{
+        flowTarget: FlowTarget;
+      }>,
+    };
+
+    test('it renders the default IP Overview', () => {
+      const wrapper = shallow(
+        <TestProviders store={store}>
+          <IpOverview {...mockProps} />
+        </TestProviders>
+      );
+
+      expect(wrapper.find('IpOverview')).toMatchSnapshot();
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/network/components/ip_overview/index.tsx b/x-pack/plugins/siem/public/network/components/ip_overview/index.tsx
new file mode 100644
index 00000000000000..56f6d27dc28ca4
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/ip_overview/index.tsx
@@ -0,0 +1,166 @@
+/*
+ * 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 { 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 from 'react';
+
+import { DEFAULT_DARK_MODE } from '../../../../common/constants';
+import { DescriptionList } from '../../../../common/utility_types';
+import { useUiSetting$ } from '../../../common/lib/kibana';
+import { FlowTarget, IpOverviewData, Overview } from '../../../graphql/types';
+import { networkModel } from '../../store';
+import { getEmptyTagValue } from '../../../common/components/empty_value';
+
+import {
+  autonomousSystemRenderer,
+  dateRenderer,
+  hostIdRenderer,
+  hostNameRenderer,
+  locationRenderer,
+  reputationRenderer,
+  whoisRenderer,
+} from '../../../timelines/components/field_renderers/field_renderers';
+import * as i18n from './translations';
+import { DescriptionListStyled, OverviewWrapper } from '../../../common/components/page';
+import { Loader } from '../../../common/components/loader';
+import { Anomalies, NarrowDateRange } from '../../../common/components/ml/types';
+import { AnomalyScores } from '../../../common/components/ml/score/anomaly_scores';
+import { useMlCapabilities } from '../../../common/components/ml_popover/hooks/use_ml_capabilities';
+import { hasMlUserPermissions } from '../../../../common/machine_learning/has_ml_user_permissions';
+import { InspectButton, InspectButtonContainer } from '../../../common/components/inspect';
+
+interface OwnProps {
+  data: IpOverviewData;
+  flowTarget: FlowTarget;
+  id: string;
+  ip: string;
+  loading: boolean;
+  isLoadingAnomaliesData: boolean;
+  anomaliesData: Anomalies | null;
+  startDate: number;
+  endDate: number;
+  type: networkModel.NetworkType;
+  narrowDateRange: NarrowDateRange;
+}
+
+export type IpOverviewProps = OwnProps;
+
+const getDescriptionList = (descriptionList: DescriptionList[], key: number) => {
+  return (
+    <EuiFlexItem key={key}>
+      <DescriptionListStyled listItems={descriptionList} />
+    </EuiFlexItem>
+  );
+};
+
+export const IpOverview = React.memo<IpOverviewProps>(
+  ({
+    id,
+    ip,
+    data,
+    loading,
+    flowTarget,
+    startDate,
+    endDate,
+    isLoadingAnomaliesData,
+    anomaliesData,
+    narrowDateRange,
+  }) => {
+    const capabilities = useMlCapabilities();
+    const userPermissions = hasMlUserPermissions(capabilities);
+    const [darkMode] = useUiSetting$<boolean>(DEFAULT_DARK_MODE);
+    const typeData: Overview = data[flowTarget]!;
+    const column: DescriptionList[] = [
+      {
+        title: i18n.LOCATION,
+        description: locationRenderer(
+          [`${flowTarget}.geo.city_name`, `${flowTarget}.geo.region_name`],
+          data
+        ),
+      },
+      {
+        title: i18n.AUTONOMOUS_SYSTEM,
+        description: typeData
+          ? autonomousSystemRenderer(typeData.autonomousSystem, flowTarget)
+          : getEmptyTagValue(),
+      },
+    ];
+
+    const firstColumn: DescriptionList[] = userPermissions
+      ? [
+          ...column,
+          {
+            title: i18n.MAX_ANOMALY_SCORE_BY_JOB,
+            description: (
+              <AnomalyScores
+                anomalies={anomaliesData}
+                startDate={startDate}
+                endDate={endDate}
+                isLoading={isLoadingAnomaliesData}
+                narrowDateRange={narrowDateRange}
+              />
+            ),
+          },
+        ]
+      : column;
+
+    const descriptionLists: Readonly<DescriptionList[][]> = [
+      firstColumn,
+      [
+        {
+          title: i18n.FIRST_SEEN,
+          description: typeData ? dateRenderer(typeData.firstSeen) : getEmptyTagValue(),
+        },
+        {
+          title: i18n.LAST_SEEN,
+          description: typeData ? dateRenderer(typeData.lastSeen) : getEmptyTagValue(),
+        },
+      ],
+      [
+        {
+          title: i18n.HOST_ID,
+          description: typeData
+            ? hostIdRenderer({ host: data.host, ipFilter: ip })
+            : getEmptyTagValue(),
+        },
+        {
+          title: i18n.HOST_NAME,
+          description: typeData ? hostNameRenderer(data.host, ip) : getEmptyTagValue(),
+        },
+      ],
+      [
+        { title: i18n.WHOIS, description: whoisRenderer(ip) },
+        { title: i18n.REPUTATION, description: reputationRenderer(ip) },
+      ],
+    ];
+
+    return (
+      <InspectButtonContainer>
+        <OverviewWrapper>
+          <InspectButton queryId={id} title={i18n.INSPECT_TITLE} inspectIndex={0} />
+
+          {descriptionLists.map((descriptionList, index) =>
+            getDescriptionList(descriptionList, index)
+          )}
+
+          {loading && (
+            <Loader
+              overlay
+              overlayBackground={
+                darkMode ? darkTheme.euiPageBackgroundColor : lightTheme.euiPageBackgroundColor
+              }
+              size="xl"
+            />
+          )}
+        </OverviewWrapper>
+      </InspectButtonContainer>
+    );
+  }
+);
+
+IpOverview.displayName = 'IpOverview';
diff --git a/x-pack/plugins/siem/public/network/components/ip_overview/mock.ts b/x-pack/plugins/siem/public/network/components/ip_overview/mock.ts
new file mode 100644
index 00000000000000..aa86fb177b02ad
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/ip_overview/mock.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 { IpOverviewData } from '../../../graphql/types';
+
+export const mockData: Readonly<Record<string, IpOverviewData>> = {
+  complete: {
+    source: {
+      firstSeen: '2019-02-07T17:19:41.636Z',
+      lastSeen: '2019-02-07T17:19:41.636Z',
+      autonomousSystem: { organization: { name: 'Test Org' }, number: 12345 },
+      geo: {
+        continent_name: ['North America'],
+        city_name: ['New York'],
+        country_iso_code: ['US'],
+        country_name: null,
+        location: {
+          lat: [40.7214],
+          lon: [-74.0052],
+        },
+        region_iso_code: ['US-NY'],
+        region_name: ['New York'],
+      },
+    },
+    destination: {
+      firstSeen: '2019-02-07T17:19:41.648Z',
+      lastSeen: '2019-02-07T17:19:41.648Z',
+      autonomousSystem: { organization: { name: 'Test Org' }, number: 12345 },
+      geo: {
+        continent_name: ['North America'],
+        city_name: ['New York'],
+        country_iso_code: ['US'],
+        country_name: null,
+        location: {
+          lat: [40.7214],
+          lon: [-74.0052],
+        },
+        region_iso_code: ['US-NY'],
+        region_name: ['New York'],
+      },
+    },
+    host: {
+      os: {
+        kernel: ['4.14.50-v7+'],
+        name: ['Raspbian GNU/Linux'],
+        family: [''],
+        version: ['9 (stretch)'],
+        platform: ['raspbian'],
+      },
+      name: ['raspberrypi'],
+      id: ['b19a781f683541a7a25ee345133aa399'],
+      ip: ['10.10.10.10'],
+      architecture: ['armv7l'],
+    },
+  },
+};
diff --git a/x-pack/plugins/siem/public/components/page/network/ip_overview/translations.ts b/x-pack/plugins/siem/public/network/components/ip_overview/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/network/ip_overview/translations.ts
rename to x-pack/plugins/siem/public/network/components/ip_overview/translations.ts
diff --git a/x-pack/plugins/siem/public/components/page/network/kpi_network/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/network/components/kpi_network/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/network/kpi_network/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/network/components/kpi_network/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/network/components/kpi_network/index.test.tsx b/x-pack/plugins/siem/public/network/components/kpi_network/index.test.tsx
new file mode 100644
index 00000000000000..70c952b1107451
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/kpi_network/index.test.tsx
@@ -0,0 +1,63 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import React from 'react';
+import { Provider as ReduxStoreProvider } from 'react-redux';
+
+import { apolloClientObservable, mockGlobalState, SUB_PLUGINS_REDUCER } from '../../../common/mock';
+import { createStore, State } from '../../../common/store';
+import { KpiNetworkComponent } from '.';
+import { mockData } from './mock';
+
+describe('KpiNetwork Component', () => {
+  const state: State = mockGlobalState;
+  const from = new Date('2019-06-15T06:00:00.000Z').valueOf();
+  const to = new Date('2019-06-18T06:00:00.000Z').valueOf();
+  const narrowDateRange = jest.fn();
+
+  let store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable);
+
+  beforeEach(() => {
+    store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable);
+  });
+
+  describe('rendering', () => {
+    test('it renders loading icons', () => {
+      const wrapper = shallow(
+        <ReduxStoreProvider store={store}>
+          <KpiNetworkComponent
+            data={mockData.KpiNetwork}
+            from={from}
+            id="kpiNetwork"
+            loading={true}
+            to={to}
+            narrowDateRange={narrowDateRange}
+          />
+        </ReduxStoreProvider>
+      );
+
+      expect(wrapper.find('KpiNetworkComponent')).toMatchSnapshot();
+    });
+
+    test('it renders the default widget', () => {
+      const wrapper = shallow(
+        <ReduxStoreProvider store={store}>
+          <KpiNetworkComponent
+            data={mockData.KpiNetwork}
+            from={from}
+            id="kpiNetwork"
+            loading={false}
+            to={to}
+            narrowDateRange={narrowDateRange}
+          />
+        </ReduxStoreProvider>
+      );
+
+      expect(wrapper.find('KpiNetworkComponent')).toMatchSnapshot();
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/network/components/kpi_network/index.tsx b/x-pack/plugins/siem/public/network/components/kpi_network/index.tsx
new file mode 100644
index 00000000000000..ac7381160515d8
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/kpi_network/index.tsx
@@ -0,0 +1,199 @@
+/*
+ * 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 {
+  EuiFlexItem,
+  EuiLoadingSpinner,
+  EuiFlexGroup,
+  EuiSpacer,
+  euiPaletteColorBlind,
+} from '@elastic/eui';
+import styled from 'styled-components';
+import { chunk as _chunk } from 'lodash/fp';
+
+import {
+  StatItemsComponent,
+  StatItemsProps,
+  useKpiMatrixStatus,
+  StatItems,
+} from '../../../common/components/stat_items';
+import { KpiNetworkData } from '../../../graphql/types';
+
+import * as i18n from './translations';
+import { UpdateDateRange } from '../../../common/components/charts/common';
+
+const kipsPerRow = 2;
+const kpiWidgetHeight = 228;
+
+const euiVisColorPalette = euiPaletteColorBlind();
+const euiColorVis1 = euiVisColorPalette[1];
+const euiColorVis2 = euiVisColorPalette[2];
+const euiColorVis3 = euiVisColorPalette[3];
+
+interface KpiNetworkProps {
+  data: KpiNetworkData;
+  from: number;
+  id: string;
+  loading: boolean;
+  to: number;
+  narrowDateRange: UpdateDateRange;
+}
+
+export const fieldTitleChartMapping: Readonly<StatItems[]> = [
+  {
+    key: 'UniqueIps',
+    index: 2,
+    fields: [
+      {
+        key: 'uniqueSourcePrivateIps',
+        value: null,
+        name: i18n.SOURCE_CHART_LABEL,
+        description: i18n.SOURCE_UNIT_LABEL,
+        color: euiColorVis2,
+        icon: 'visMapCoordinate',
+      },
+      {
+        key: 'uniqueDestinationPrivateIps',
+        value: null,
+        name: i18n.DESTINATION_CHART_LABEL,
+        description: i18n.DESTINATION_UNIT_LABEL,
+        color: euiColorVis3,
+        icon: 'visMapCoordinate',
+      },
+    ],
+    description: i18n.UNIQUE_PRIVATE_IPS,
+    enableAreaChart: true,
+    enableBarChart: true,
+    grow: 2,
+  },
+];
+
+const fieldTitleMatrixMapping: Readonly<StatItems[]> = [
+  {
+    key: 'networkEvents',
+    index: 0,
+    fields: [
+      {
+        key: 'networkEvents',
+        value: null,
+        color: euiColorVis1,
+      },
+    ],
+    description: i18n.NETWORK_EVENTS,
+    grow: 1,
+  },
+  {
+    key: 'dnsQueries',
+    index: 1,
+    fields: [
+      {
+        key: 'dnsQueries',
+        value: null,
+      },
+    ],
+    description: i18n.DNS_QUERIES,
+  },
+  {
+    key: 'uniqueFlowId',
+    index: 3,
+    fields: [
+      {
+        key: 'uniqueFlowId',
+        value: null,
+      },
+    ],
+    description: i18n.UNIQUE_FLOW_IDS,
+  },
+  {
+    key: 'tlsHandshakes',
+    index: 4,
+    fields: [
+      {
+        key: 'tlsHandshakes',
+        value: null,
+      },
+    ],
+    description: i18n.TLS_HANDSHAKES,
+  },
+];
+
+const FlexGroup = styled(EuiFlexGroup)`
+  min-height: ${kpiWidgetHeight}px;
+`;
+
+FlexGroup.displayName = 'FlexGroup';
+
+export const KpiNetworkBaseComponent = React.memo<{
+  fieldsMapping: Readonly<StatItems[]>;
+  data: KpiNetworkData;
+  id: string;
+  from: number;
+  to: number;
+  narrowDateRange: UpdateDateRange;
+}>(({ fieldsMapping, data, id, from, to, narrowDateRange }) => {
+  const statItemsProps: StatItemsProps[] = useKpiMatrixStatus(
+    fieldsMapping,
+    data,
+    id,
+    from,
+    to,
+    narrowDateRange
+  );
+
+  return (
+    <EuiFlexGroup wrap>
+      {statItemsProps.map((mappedStatItemProps, idx) => {
+        return <StatItemsComponent {...mappedStatItemProps} />;
+      })}
+    </EuiFlexGroup>
+  );
+});
+
+KpiNetworkBaseComponent.displayName = 'KpiNetworkBaseComponent';
+
+export const KpiNetworkComponent = React.memo<KpiNetworkProps>(
+  ({ data, from, id, loading, to, narrowDateRange }) => {
+    return loading ? (
+      <FlexGroup justifyContent="center" alignItems="center">
+        <EuiFlexItem grow={false}>
+          <EuiLoadingSpinner size="xl" />
+        </EuiFlexItem>
+      </FlexGroup>
+    ) : (
+      <EuiFlexGroup wrap>
+        <EuiFlexItem grow={1}>
+          {_chunk(kipsPerRow, fieldTitleMatrixMapping).map((mappingsPerLine, idx) => (
+            <React.Fragment key={`kpi-network-row-${idx}`}>
+              {idx % kipsPerRow === 1 && <EuiSpacer size="l" />}
+              <KpiNetworkBaseComponent
+                data={data}
+                id={id}
+                fieldsMapping={mappingsPerLine}
+                from={from}
+                to={to}
+                narrowDateRange={narrowDateRange}
+              />
+            </React.Fragment>
+          ))}
+        </EuiFlexItem>
+        <EuiFlexItem grow={1}>
+          <KpiNetworkBaseComponent
+            data={data}
+            id={id}
+            fieldsMapping={fieldTitleChartMapping}
+            from={from}
+            to={to}
+            narrowDateRange={narrowDateRange}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  }
+);
+
+KpiNetworkComponent.displayName = 'KpiNetworkComponent';
diff --git a/x-pack/plugins/siem/public/network/components/kpi_network/mock.ts b/x-pack/plugins/siem/public/network/components/kpi_network/mock.ts
new file mode 100644
index 00000000000000..a8b04ff29f4b67
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/kpi_network/mock.ts
@@ -0,0 +1,230 @@
+/*
+ * 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 { KpiNetworkData } from '../../../graphql/types';
+import { StatItems } from '../../../common/components/stat_items';
+
+export const mockNarrowDateRange = jest.fn();
+
+export const mockData: { KpiNetwork: KpiNetworkData } = {
+  KpiNetwork: {
+    networkEvents: 16,
+    uniqueFlowId: 10277307,
+    uniqueSourcePrivateIps: 383,
+    uniqueSourcePrivateIpsHistogram: [
+      {
+        x: new Date('2019-02-09T16:00:00.000Z').valueOf(),
+        y: 8,
+      },
+      {
+        x: new Date('2019-02-09T19:00:00.000Z').valueOf(),
+        y: 0,
+      },
+    ],
+    uniqueDestinationPrivateIps: 18,
+    uniqueDestinationPrivateIpsHistogram: [
+      {
+        x: new Date('2019-02-09T16:00:00.000Z').valueOf(),
+        y: 8,
+      },
+      {
+        x: new Date('2019-02-09T19:00:00.000Z').valueOf(),
+        y: 0,
+      },
+    ],
+    dnsQueries: 278,
+    tlsHandshakes: 10000,
+  },
+};
+
+const mockMappingItems: StatItems = {
+  key: 'UniqueIps',
+  index: 0,
+  fields: [
+    {
+      key: 'uniqueSourcePrivateIps',
+      value: null,
+      name: 'Src.',
+      description: 'source',
+      color: '#D36086',
+      icon: 'visMapCoordinate',
+    },
+    {
+      key: 'uniqueDestinationPrivateIps',
+      value: null,
+      name: 'Dest.',
+      description: 'destination',
+      color: '#9170B8',
+      icon: 'visMapCoordinate',
+    },
+  ],
+  description: 'Unique private IPs',
+  enableAreaChart: true,
+  enableBarChart: true,
+  grow: 2,
+};
+
+export const mockNoChartMappings: Readonly<StatItems[]> = [
+  {
+    ...mockMappingItems,
+    enableAreaChart: false,
+    enableBarChart: false,
+  },
+];
+
+export const mockDisableChartsInitialData = {
+  fields: [
+    {
+      key: 'uniqueSourcePrivateIps',
+      value: undefined,
+      name: 'Src.',
+      description: 'source',
+      color: '#D36086',
+      icon: 'visMapCoordinate',
+    },
+    {
+      key: 'uniqueDestinationPrivateIps',
+      value: undefined,
+      name: 'Dest.',
+      description: 'destination',
+      color: '#9170B8',
+      icon: 'visMapCoordinate',
+    },
+  ],
+  description: 'Unique private IPs',
+  enableAreaChart: false,
+  enableBarChart: false,
+  grow: 2,
+  areaChart: undefined,
+  barChart: undefined,
+};
+
+export const mockEnableChartsInitialData = {
+  fields: [
+    {
+      key: 'uniqueSourcePrivateIps',
+      value: undefined,
+      name: 'Src.',
+      description: 'source',
+      color: '#D36086',
+      icon: 'visMapCoordinate',
+    },
+    {
+      key: 'uniqueDestinationPrivateIps',
+      value: undefined,
+      name: 'Dest.',
+      description: 'destination',
+      color: '#9170B8',
+      icon: 'visMapCoordinate',
+    },
+  ],
+  description: 'Unique private IPs',
+  enableAreaChart: true,
+  enableBarChart: true,
+  grow: 2,
+  areaChart: [],
+  barChart: [
+    {
+      color: '#D36086',
+      key: 'uniqueSourcePrivateIps',
+      value: [
+        {
+          g: 'uniqueSourcePrivateIps',
+          x: 'Src.',
+          y: null,
+        },
+      ],
+    },
+    {
+      color: '#9170B8',
+      key: 'uniqueDestinationPrivateIps',
+      value: [
+        {
+          g: 'uniqueDestinationPrivateIps',
+          x: 'Dest.',
+          y: null,
+        },
+      ],
+    },
+  ],
+};
+
+export const mockEnableChartsData = {
+  areaChart: [
+    {
+      key: 'uniqueSourcePrivateIpsHistogram',
+      value: [
+        { x: new Date('2019-02-09T16:00:00.000Z').valueOf(), y: 8 },
+        {
+          x: new Date('2019-02-09T19:00:00.000Z').valueOf(),
+          y: 0,
+        },
+      ],
+      name: 'Src.',
+      description: 'source',
+      color: '#D36086',
+      icon: 'visMapCoordinate',
+    },
+    {
+      key: 'uniqueDestinationPrivateIpsHistogram',
+      value: [
+        { x: new Date('2019-02-09T16:00:00.000Z').valueOf(), y: 8 },
+        { x: new Date('2019-02-09T19:00:00.000Z').valueOf(), y: 0 },
+      ],
+      name: 'Dest.',
+      description: 'destination',
+      color: '#9170B8',
+      icon: 'visMapCoordinate',
+    },
+  ],
+  barChart: [
+    {
+      key: 'uniqueSourcePrivateIps',
+      color: '#D36086',
+      value: [
+        {
+          x: 'Src.',
+          y: 383,
+          g: 'uniqueSourcePrivateIps',
+          y0: 0,
+        },
+      ],
+    },
+    {
+      key: 'uniqueDestinationPrivateIps',
+      color: '#9170B8',
+      value: [{ x: 'Dest.', y: 18, g: 'uniqueDestinationPrivateIps', y0: 0 }],
+    },
+  ],
+  description: 'Unique private IPs',
+  enableAreaChart: true,
+  enableBarChart: true,
+  fields: [
+    {
+      key: 'uniqueSourcePrivateIps',
+      value: 383,
+      name: 'Src.',
+      description: 'source',
+      color: '#D36086',
+      icon: 'visMapCoordinate',
+    },
+    {
+      key: 'uniqueDestinationPrivateIps',
+      value: 18,
+      name: 'Dest.',
+      description: 'destination',
+      color: '#9170B8',
+      icon: 'visMapCoordinate',
+    },
+  ],
+  from: 1560578400000,
+  grow: 2,
+  id: 'statItem',
+  index: 2,
+  statKey: 'UniqueIps',
+  to: 1560837600000,
+  narrowDateRange: mockNarrowDateRange,
+};
diff --git a/x-pack/plugins/siem/public/components/page/network/kpi_network/translations.ts b/x-pack/plugins/siem/public/network/components/kpi_network/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/network/kpi_network/translations.ts
rename to x-pack/plugins/siem/public/network/components/kpi_network/translations.ts
diff --git a/x-pack/plugins/siem/public/components/page/network/network_dns_table/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/network/components/network_dns_table/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/network/network_dns_table/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/network/components/network_dns_table/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/page/network/network_dns_table/__snapshots__/is_ptr_included.test.tsx.snap b/x-pack/plugins/siem/public/network/components/network_dns_table/__snapshots__/is_ptr_included.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/network/network_dns_table/__snapshots__/is_ptr_included.test.tsx.snap
rename to x-pack/plugins/siem/public/network/components/network_dns_table/__snapshots__/is_ptr_included.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/network/components/network_dns_table/columns.tsx b/x-pack/plugins/siem/public/network/components/network_dns_table/columns.tsx
new file mode 100644
index 00000000000000..dbc09daaf0abc6
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/network_dns_table/columns.tsx
@@ -0,0 +1,133 @@
+/*
+ * 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 numeral from '@elastic/numeral';
+import React from 'react';
+
+import { NetworkDnsFields, NetworkDnsItem } from '../../../graphql/types';
+import {
+  DragEffects,
+  DraggableWrapper,
+} from '../../../common/components/drag_and_drop/draggable_wrapper';
+import { escapeDataProviderId } from '../../../common/components/drag_and_drop/helpers';
+import { defaultToEmptyTag, getEmptyTagValue } from '../../../common/components/empty_value';
+import { Columns } from '../../../common/components/paginated_table';
+import { IS_OPERATOR } from '../../../timelines/components/timeline/data_providers/data_provider';
+import { PreferenceFormattedBytes } from '../../../common/components/formatted_bytes';
+import { Provider } from '../../../timelines/components/timeline/data_providers/provider';
+
+import * as i18n from './translations';
+export type NetworkDnsColumns = [
+  Columns<NetworkDnsItem['dnsName']>,
+  Columns<NetworkDnsItem['queryCount']>,
+  Columns<NetworkDnsItem['uniqueDomains']>,
+  Columns<NetworkDnsItem['dnsBytesIn']>,
+  Columns<NetworkDnsItem['dnsBytesOut']>
+];
+
+export const getNetworkDnsColumns = (): NetworkDnsColumns => [
+  {
+    field: `node.${NetworkDnsFields.dnsName}`,
+    name: i18n.REGISTERED_DOMAIN,
+    truncateText: false,
+    hideForMobile: false,
+    sortable: true,
+    render: dnsName => {
+      if (dnsName != null) {
+        const id = escapeDataProviderId(`networkDns-table--name-${dnsName}`);
+        return (
+          <DraggableWrapper
+            key={id}
+            dataProvider={{
+              and: [],
+              enabled: true,
+              id,
+              name: dnsName,
+              excluded: false,
+              kqlQuery: '',
+              queryMatch: {
+                field: 'dns.question.registered_domain',
+                value: dnsName,
+                operator: IS_OPERATOR,
+              },
+            }}
+            render={(dataProvider, _, snapshot) =>
+              snapshot.isDragging ? (
+                <DragEffects>
+                  <Provider dataProvider={dataProvider} />
+                </DragEffects>
+              ) : (
+                defaultToEmptyTag(dnsName)
+              )
+            }
+          />
+        );
+      } else {
+        return getEmptyTagValue();
+      }
+    },
+  },
+  {
+    align: 'right',
+    field: `node.${NetworkDnsFields.queryCount}`,
+    name: i18n.TOTAL_QUERIES,
+    sortable: true,
+    truncateText: false,
+    hideForMobile: false,
+    render: queryCount => {
+      if (queryCount != null) {
+        return numeral(queryCount).format('0');
+      } else {
+        return getEmptyTagValue();
+      }
+    },
+  },
+  {
+    align: 'right',
+    field: `node.${NetworkDnsFields.uniqueDomains}`,
+    name: i18n.UNIQUE_DOMAINS,
+    sortable: true,
+    truncateText: false,
+    hideForMobile: false,
+    render: uniqueDomains => {
+      if (uniqueDomains != null) {
+        return numeral(uniqueDomains).format('0');
+      } else {
+        return getEmptyTagValue();
+      }
+    },
+  },
+  {
+    align: 'right',
+    field: `node.${NetworkDnsFields.dnsBytesIn}`,
+    name: i18n.DNS_BYTES_IN,
+    sortable: true,
+    truncateText: false,
+    hideForMobile: false,
+    render: dnsBytesIn => {
+      if (dnsBytesIn != null) {
+        return <PreferenceFormattedBytes value={dnsBytesIn} />;
+      } else {
+        return getEmptyTagValue();
+      }
+    },
+  },
+  {
+    align: 'right',
+    field: `node.${NetworkDnsFields.dnsBytesOut}`,
+    name: i18n.DNS_BYTES_OUT,
+    sortable: true,
+    truncateText: false,
+    hideForMobile: false,
+    render: dnsBytesOut => {
+      if (dnsBytesOut != null) {
+        return <PreferenceFormattedBytes value={dnsBytesOut} />;
+      } else {
+        return getEmptyTagValue();
+      }
+    },
+  },
+];
diff --git a/x-pack/plugins/siem/public/network/components/network_dns_table/index.test.tsx b/x-pack/plugins/siem/public/network/components/network_dns_table/index.test.tsx
new file mode 100644
index 00000000000000..f2d8ce6cb6c448
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/network_dns_table/index.test.tsx
@@ -0,0 +1,110 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import { getOr } from 'lodash/fp';
+import React from 'react';
+import { MockedProvider } from 'react-apollo/test-utils';
+import { Provider as ReduxStoreProvider } from 'react-redux';
+
+import {
+  apolloClientObservable,
+  mockGlobalState,
+  TestProviders,
+  SUB_PLUGINS_REDUCER,
+} from '../../../common/mock';
+import { State, createStore } from '../../../common/store';
+import { networkModel } from '../../store';
+import { useMountAppended } from '../../../common/utils/use_mount_appended';
+
+import { NetworkDnsTable } from '.';
+import { mockData } from './mock';
+
+describe('NetworkTopNFlow Table Component', () => {
+  const loadPage = jest.fn();
+  const state: State = mockGlobalState;
+  let store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable);
+  const mount = useMountAppended();
+
+  beforeEach(() => {
+    store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable);
+  });
+
+  describe('rendering', () => {
+    test('it renders the default NetworkTopNFlow table', () => {
+      const wrapper = shallow(
+        <ReduxStoreProvider store={store}>
+          <NetworkDnsTable
+            data={mockData.NetworkDns.edges}
+            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.NetworkDns.pageInfo)}
+            id="dns"
+            isInspect={false}
+            loading={false}
+            loadPage={loadPage}
+            showMorePagesIndicator={getOr(
+              false,
+              'showMorePagesIndicator',
+              mockData.NetworkDns.pageInfo
+            )}
+            totalCount={mockData.NetworkDns.totalCount}
+            type={networkModel.NetworkType.page}
+          />
+        </ReduxStoreProvider>
+      );
+
+      expect(wrapper.find('Connect(NetworkDnsTableComponent)')).toMatchSnapshot();
+    });
+  });
+
+  describe('Sorting', () => {
+    test('when you click on the column header, you should show the sorting icon', () => {
+      const wrapper = mount(
+        <MockedProvider>
+          <TestProviders store={store}>
+            <NetworkDnsTable
+              data={mockData.NetworkDns.edges}
+              fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.NetworkDns.pageInfo)}
+              id="dns"
+              isInspect={false}
+              loading={false}
+              loadPage={loadPage}
+              showMorePagesIndicator={getOr(
+                false,
+                'showMorePagesIndicator',
+                mockData.NetworkDns.pageInfo
+              )}
+              totalCount={mockData.NetworkDns.totalCount}
+              type={networkModel.NetworkType.page}
+            />
+          </TestProviders>
+        </MockedProvider>
+      );
+
+      expect(store.getState().network.page.queries!.dns.sort).toEqual({
+        direction: 'desc',
+        field: 'queryCount',
+      });
+
+      wrapper
+        .find('.euiTable thead tr th button')
+        .first()
+        .simulate('click');
+
+      wrapper.update();
+
+      expect(store.getState().network.page.queries!.dns.sort).toEqual({
+        direction: 'asc',
+        field: 'dnsName',
+      });
+      expect(
+        wrapper
+          .find('.euiTable thead tr th button')
+          .first()
+          .find('svg')
+      ).toBeTruthy();
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/network/components/network_dns_table/index.tsx b/x-pack/plugins/siem/public/network/components/network_dns_table/index.tsx
new file mode 100644
index 00000000000000..fc763298f08f47
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/network_dns_table/index.tsx
@@ -0,0 +1,169 @@
+/*
+ * 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, { useCallback, useMemo } from 'react';
+import { connect, ConnectedProps } from 'react-redux';
+import deepEqual from 'fast-deep-equal';
+
+import { networkActions, networkModel, networkSelectors } from '../../store';
+import {
+  Direction,
+  NetworkDnsEdges,
+  NetworkDnsFields,
+  NetworkDnsSortField,
+} from '../../../graphql/types';
+import { State } from '../../../common/store';
+import { Criteria, ItemsPerRow, PaginatedTable } from '../../../common/components/paginated_table';
+
+import { getNetworkDnsColumns } from './columns';
+import { IsPtrIncluded } from './is_ptr_included';
+import * as i18n from './translations';
+
+const tableType = networkModel.NetworkTableType.dns;
+
+interface OwnProps {
+  data: NetworkDnsEdges[];
+  fakeTotalCount: number;
+  id: string;
+  isInspect: boolean;
+  loading: boolean;
+  loadPage: (newActivePage: number) => void;
+  showMorePagesIndicator: boolean;
+  totalCount: number;
+  type: networkModel.NetworkType;
+}
+
+type NetworkDnsTableProps = OwnProps & PropsFromRedux;
+
+const rowItems: ItemsPerRow[] = [
+  {
+    text: i18n.ROWS_5,
+    numberOfRow: 5,
+  },
+  {
+    text: i18n.ROWS_10,
+    numberOfRow: 10,
+  },
+];
+
+export const NetworkDnsTableComponent = React.memo<NetworkDnsTableProps>(
+  ({
+    activePage,
+    data,
+    fakeTotalCount,
+    id,
+    isInspect,
+    isPtrIncluded,
+    limit,
+    loading,
+    loadPage,
+    showMorePagesIndicator,
+    sort,
+    totalCount,
+    type,
+    updateNetworkTable,
+  }) => {
+    const updateLimitPagination = useCallback(
+      newLimit =>
+        updateNetworkTable({
+          networkType: type,
+          tableType,
+          updates: { limit: newLimit },
+        }),
+      [type, updateNetworkTable]
+    );
+
+    const updateActivePage = useCallback(
+      newPage =>
+        updateNetworkTable({
+          networkType: type,
+          tableType,
+          updates: { activePage: newPage },
+        }),
+      [type, updateNetworkTable]
+    );
+
+    const onChange = useCallback(
+      (criteria: Criteria) => {
+        if (criteria.sort != null) {
+          const newDnsSortField: NetworkDnsSortField = {
+            field: criteria.sort.field.split('.')[1] as NetworkDnsFields,
+            direction: criteria.sort.direction as Direction,
+          };
+          if (!deepEqual(newDnsSortField, sort)) {
+            updateNetworkTable({
+              networkType: type,
+              tableType,
+              updates: { sort: newDnsSortField },
+            });
+          }
+        }
+      },
+      [sort, type, updateNetworkTable]
+    );
+
+    const onChangePtrIncluded = useCallback(
+      () =>
+        updateNetworkTable({
+          networkType: type,
+          tableType,
+          updates: { isPtrIncluded: !isPtrIncluded },
+        }),
+      [type, updateNetworkTable, isPtrIncluded]
+    );
+
+    const columns = useMemo(() => getNetworkDnsColumns(), []);
+
+    return (
+      <PaginatedTable
+        activePage={activePage}
+        columns={columns}
+        dataTestSubj={`table-${tableType}`}
+        headerCount={totalCount}
+        headerSupplement={
+          <IsPtrIncluded isPtrIncluded={isPtrIncluded} onChange={onChangePtrIncluded} />
+        }
+        headerTitle={i18n.TOP_DNS_DOMAINS}
+        headerTooltip={i18n.TOOLTIP}
+        headerUnit={i18n.UNIT(totalCount)}
+        id={id}
+        itemsPerRow={rowItems}
+        isInspect={isInspect}
+        limit={limit}
+        loading={loading}
+        loadPage={loadPage}
+        onChange={onChange}
+        pageOfItems={data}
+        showMorePagesIndicator={showMorePagesIndicator}
+        sorting={{
+          field: `node.${sort.field}`,
+          direction: sort.direction,
+        }}
+        totalCount={fakeTotalCount}
+        updateActivePage={updateActivePage}
+        updateLimitPagination={updateLimitPagination}
+      />
+    );
+  }
+);
+
+NetworkDnsTableComponent.displayName = 'NetworkDnsTableComponent';
+
+const makeMapStateToProps = () => {
+  const getNetworkDnsSelector = networkSelectors.dnsSelector();
+  const mapStateToProps = (state: State) => getNetworkDnsSelector(state);
+  return mapStateToProps;
+};
+
+const mapDispatchToProps = {
+  updateNetworkTable: networkActions.updateNetworkTable,
+};
+
+const connector = connect(makeMapStateToProps, mapDispatchToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export const NetworkDnsTable = connector(NetworkDnsTableComponent);
diff --git a/x-pack/plugins/siem/public/components/page/network/network_dns_table/is_ptr_included.test.tsx b/x-pack/plugins/siem/public/network/components/network_dns_table/is_ptr_included.test.tsx
similarity index 95%
rename from x-pack/plugins/siem/public/components/page/network/network_dns_table/is_ptr_included.test.tsx
rename to x-pack/plugins/siem/public/network/components/network_dns_table/is_ptr_included.test.tsx
index 31a1b1667087a7..36dca6981a7ae9 100644
--- a/x-pack/plugins/siem/public/components/page/network/network_dns_table/is_ptr_included.test.tsx
+++ b/x-pack/plugins/siem/public/network/components/network_dns_table/is_ptr_included.test.tsx
@@ -7,7 +7,7 @@
 import { mount, shallow } from 'enzyme';
 import React from 'react';
 
-import { FlowDirection } from '../../../../graphql/types';
+import { FlowDirection } from '../../../graphql/types';
 
 import { IsPtrIncluded } from './is_ptr_included';
 
diff --git a/x-pack/plugins/siem/public/components/page/network/network_dns_table/is_ptr_included.tsx b/x-pack/plugins/siem/public/network/components/network_dns_table/is_ptr_included.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/network/network_dns_table/is_ptr_included.tsx
rename to x-pack/plugins/siem/public/network/components/network_dns_table/is_ptr_included.tsx
diff --git a/x-pack/plugins/siem/public/network/components/network_dns_table/mock.ts b/x-pack/plugins/siem/public/network/components/network_dns_table/mock.ts
new file mode 100644
index 00000000000000..d094256fa40269
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/network_dns_table/mock.ts
@@ -0,0 +1,182 @@
+/*
+ * 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 { NetworkDnsData } from '../../../graphql/types';
+
+export const mockData: { NetworkDns: NetworkDnsData } = {
+  NetworkDns: {
+    totalCount: 80,
+    edges: [
+      {
+        node: {
+          _id: 'nflxvideo.net',
+          dnsBytesIn: 2964,
+          dnsBytesOut: 12546,
+          dnsName: 'nflxvideo.net',
+          queryCount: 52,
+          uniqueDomains: 21,
+        },
+        cursor: { value: 'nflxvideo.net' },
+      },
+      {
+        node: {
+          _id: 'apple.com',
+          dnsBytesIn: 2680,
+          dnsBytesOut: 31687,
+          dnsName: 'apple.com',
+          queryCount: 75,
+          uniqueDomains: 20,
+        },
+        cursor: { value: 'apple.com' },
+      },
+      {
+        node: {
+          _id: 'googlevideo.com',
+          dnsBytesIn: 1890,
+          dnsBytesOut: 16292,
+          dnsName: 'googlevideo.com',
+          queryCount: 38,
+          uniqueDomains: 19,
+        },
+        cursor: { value: 'googlevideo.com' },
+      },
+      {
+        node: {
+          _id: 'netflix.com',
+          dnsBytesIn: 60525,
+          dnsBytesOut: 218193,
+          dnsName: 'netflix.com',
+          queryCount: 1532,
+          uniqueDomains: 12,
+        },
+        cursor: { value: 'netflix.com' },
+      },
+      {
+        node: {
+          _id: 'samsungcloudsolution.com',
+          dnsBytesIn: 1480,
+          dnsBytesOut: 11702,
+          dnsName: 'samsungcloudsolution.com',
+          queryCount: 31,
+          uniqueDomains: 8,
+        },
+        cursor: { value: 'samsungcloudsolution.com' },
+      },
+      {
+        node: {
+          _id: 'doubleclick.net',
+          dnsBytesIn: 1505,
+          dnsBytesOut: 14372,
+          dnsName: 'doubleclick.net',
+          queryCount: 35,
+          uniqueDomains: 7,
+        },
+        cursor: { value: 'doubleclick.net' },
+      },
+      {
+        node: {
+          _id: 'digitalocean.com',
+          dnsBytesIn: 2035,
+          dnsBytesOut: 4111,
+          dnsName: 'digitalocean.com',
+          queryCount: 35,
+          uniqueDomains: 6,
+        },
+        cursor: { value: 'digitalocean.com' },
+      },
+      {
+        node: {
+          _id: 'samsungelectronics.com',
+          dnsBytesIn: 3916,
+          dnsBytesOut: 36592,
+          dnsName: 'samsungelectronics.com',
+          queryCount: 89,
+          uniqueDomains: 6,
+        },
+        cursor: { value: 'samsungelectronics.com' },
+      },
+      {
+        node: {
+          _id: 'google.com',
+          dnsBytesIn: 896,
+          dnsBytesOut: 8072,
+          dnsName: 'google.com',
+          queryCount: 23,
+          uniqueDomains: 5,
+        },
+        cursor: { value: 'google.com' },
+      },
+      {
+        node: {
+          _id: 'samsungcloudsolution.net',
+          dnsBytesIn: 1490,
+          dnsBytesOut: 11518,
+          dnsName: 'samsungcloudsolution.net',
+          queryCount: 30,
+          uniqueDomains: 5,
+        },
+        cursor: { value: 'samsungcloudsolution.net' },
+      },
+    ],
+    pageInfo: {
+      activePage: 1,
+      fakeTotalCount: 50,
+      showMorePagesIndicator: true,
+    },
+    histogram: [
+      {
+        x: 'nflxvideo.net',
+        g: 'nflxvideo.net',
+        y: 12546,
+      },
+      {
+        x: 'apple.com',
+        g: 'apple.com',
+        y: 31687,
+      },
+      {
+        x: 'googlevideo.com',
+        g: 'googlevideo.com',
+        y: 16292,
+      },
+      {
+        x: 'netflix.com',
+        g: 'netflix.com',
+        y: 218193,
+      },
+      {
+        x: 'samsungcloudsolution.com',
+        g: 'samsungcloudsolution.com',
+        y: 11702,
+      },
+      {
+        x: 'doubleclick.net',
+        g: 'doubleclick.net',
+        y: 14372,
+      },
+      {
+        x: 'digitalocean.com',
+        g: 'digitalocean.com',
+        y: 4111,
+      },
+      {
+        x: 'samsungelectronics.com',
+        g: 'samsungelectronics.com',
+        y: 36592,
+      },
+      {
+        x: 'google.com',
+        g: 'google.com',
+        y: 8072,
+      },
+      {
+        x: 'samsungcloudsolution.net',
+        g: 'samsungcloudsolution.net',
+        y: 11518,
+      },
+    ],
+  },
+};
diff --git a/x-pack/plugins/siem/public/components/page/network/network_dns_table/translations.ts b/x-pack/plugins/siem/public/network/components/network_dns_table/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/network/network_dns_table/translations.ts
rename to x-pack/plugins/siem/public/network/components/network_dns_table/translations.ts
diff --git a/x-pack/plugins/siem/public/components/page/network/network_http_table/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/network/components/network_http_table/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/network/network_http_table/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/network/components/network_http_table/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/network/components/network_http_table/columns.tsx b/x-pack/plugins/siem/public/network/components/network_http_table/columns.tsx
new file mode 100644
index 00000000000000..4642fdd2f2c93f
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/network_http_table/columns.tsx
@@ -0,0 +1,118 @@
+/*
+ * 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.
+ */
+
+/* eslint-disable react/display-name */
+
+import React from 'react';
+import numeral from '@elastic/numeral';
+import { NetworkHttpEdges, NetworkHttpFields, NetworkHttpItem } from '../../../graphql/types';
+import { escapeDataProviderId } from '../../../common/components/drag_and_drop/helpers';
+import { getEmptyTagValue } from '../../../common/components/empty_value';
+import { IPDetailsLink } from '../../../common/components/links';
+import { Columns } from '../../../common/components/paginated_table';
+
+import * as i18n from './translations';
+import {
+  getRowItemDraggable,
+  getRowItemDraggables,
+} from '../../../common/components/tables/helpers';
+export type NetworkHttpColumns = [
+  Columns<NetworkHttpEdges>,
+  Columns<NetworkHttpEdges>,
+  Columns<NetworkHttpItem['path']>,
+  Columns<NetworkHttpEdges>,
+  Columns<NetworkHttpEdges>,
+  Columns<NetworkHttpEdges>,
+  Columns<NetworkHttpItem['requestCount']>
+];
+
+export const getNetworkHttpColumns = (tableId: string): NetworkHttpColumns => [
+  {
+    name: i18n.METHOD,
+    render: ({ node: { methods, path } }) => {
+      return Array.isArray(methods) && methods.length > 0
+        ? getRowItemDraggables({
+            attrName: 'http.request.method',
+            displayCount: 3,
+            idPrefix: escapeDataProviderId(`${tableId}-table-methods-${path}`),
+            rowItems: methods,
+          })
+        : getEmptyTagValue();
+    },
+  },
+  {
+    name: i18n.DOMAIN,
+    render: ({ node: { domains, path } }) =>
+      Array.isArray(domains) && domains.length > 0
+        ? getRowItemDraggables({
+            attrName: 'url.domain',
+            displayCount: 3,
+            idPrefix: escapeDataProviderId(`${tableId}-table-domains-${path}`),
+            rowItems: domains,
+          })
+        : getEmptyTagValue(),
+  },
+  {
+    field: `node.${NetworkHttpFields.path}`,
+    name: i18n.PATH,
+    render: path =>
+      path != null
+        ? getRowItemDraggable({
+            attrName: 'url.path',
+            idPrefix: escapeDataProviderId(`${tableId}-table-path-${path}`),
+            rowItem: path,
+          })
+        : getEmptyTagValue(),
+  },
+  {
+    name: i18n.STATUS,
+    render: ({ node: { statuses, path } }) =>
+      Array.isArray(statuses) && statuses.length > 0
+        ? getRowItemDraggables({
+            attrName: 'http.response.status_code',
+            displayCount: 3,
+            idPrefix: escapeDataProviderId(`${tableId}-table-statuses-${path}`),
+            rowItems: statuses,
+          })
+        : getEmptyTagValue(),
+  },
+  {
+    name: i18n.LAST_HOST,
+    render: ({ node: { lastHost, path } }) =>
+      lastHost != null
+        ? getRowItemDraggable({
+            attrName: 'host.name',
+            idPrefix: escapeDataProviderId(`${tableId}-table-lastHost-${path}`),
+            rowItem: lastHost,
+          })
+        : getEmptyTagValue(),
+  },
+  {
+    name: i18n.LAST_SOURCE_IP,
+    render: ({ node: { lastSourceIp, path } }) =>
+      lastSourceIp != null
+        ? getRowItemDraggable({
+            attrName: 'source.ip',
+            idPrefix: escapeDataProviderId(`${tableId}-table-lastSourceIp-${path}`),
+            rowItem: lastSourceIp,
+            render: () => <IPDetailsLink ip={lastSourceIp} />,
+          })
+        : getEmptyTagValue(),
+  },
+  {
+    align: 'right',
+    field: `node.${NetworkHttpFields.requestCount}`,
+    name: i18n.REQUESTS,
+    sortable: true,
+    render: requestCount => {
+      if (requestCount != null) {
+        return numeral(requestCount).format('0,000');
+      } else {
+        return getEmptyTagValue();
+      }
+    },
+  },
+];
diff --git a/x-pack/plugins/siem/public/network/components/network_http_table/index.test.tsx b/x-pack/plugins/siem/public/network/components/network_http_table/index.test.tsx
new file mode 100644
index 00000000000000..3c4e1559e9f7b2
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/network_http_table/index.test.tsx
@@ -0,0 +1,109 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import { getOr } from 'lodash/fp';
+import React from 'react';
+import { MockedProvider } from 'react-apollo/test-utils';
+import { Provider as ReduxStoreProvider } from 'react-redux';
+
+import {
+  apolloClientObservable,
+  mockGlobalState,
+  TestProviders,
+  SUB_PLUGINS_REDUCER,
+} from '../../../common/mock';
+import { useMountAppended } from '../../../common/utils/use_mount_appended';
+import { createStore, State } from '../../../common/store';
+import { networkModel } from '../../store';
+
+import { NetworkHttpTable } from '.';
+import { mockData } from './mock';
+
+describe('NetworkHttp Table Component', () => {
+  const loadPage = jest.fn();
+  const state: State = mockGlobalState;
+
+  let store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable);
+  const mount = useMountAppended();
+
+  beforeEach(() => {
+    store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable);
+  });
+
+  describe('rendering', () => {
+    test('it renders the default NetworkHttp table', () => {
+      const wrapper = shallow(
+        <ReduxStoreProvider store={store}>
+          <NetworkHttpTable
+            data={mockData.NetworkHttp.edges}
+            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.NetworkHttp.pageInfo)}
+            id="http"
+            isInspect={false}
+            loading={false}
+            loadPage={loadPage}
+            showMorePagesIndicator={getOr(
+              false,
+              'showMorePagesIndicator',
+              mockData.NetworkHttp.pageInfo
+            )}
+            totalCount={mockData.NetworkHttp.totalCount}
+            type={networkModel.NetworkType.page}
+          />
+        </ReduxStoreProvider>
+      );
+
+      expect(wrapper.find('Connect(Component)')).toMatchSnapshot();
+    });
+  });
+
+  describe('Sorting', () => {
+    test('when you click on the column header, you should show the sorting icon', () => {
+      const wrapper = mount(
+        <MockedProvider>
+          <TestProviders store={store}>
+            <NetworkHttpTable
+              data={mockData.NetworkHttp.edges}
+              fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.NetworkHttp.pageInfo)}
+              id="http"
+              isInspect={false}
+              loading={false}
+              loadPage={loadPage}
+              showMorePagesIndicator={getOr(
+                false,
+                'showMorePagesIndicator',
+                mockData.NetworkHttp.pageInfo
+              )}
+              totalCount={mockData.NetworkHttp.totalCount}
+              type={networkModel.NetworkType.page}
+            />
+          </TestProviders>
+        </MockedProvider>
+      );
+
+      expect(store.getState().network.page.queries!.http.sort).toEqual({
+        direction: 'desc',
+      });
+
+      wrapper
+        .find('.euiTable thead tr th button')
+        .first()
+        .simulate('click');
+
+      wrapper.update();
+
+      expect(store.getState().network.page.queries!.http.sort).toEqual({
+        direction: 'asc',
+      });
+      expect(
+        wrapper
+          .find('.euiTable thead tr th button')
+          .first()
+          .find('svg')
+      ).toBeTruthy();
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/network/components/network_http_table/index.tsx b/x-pack/plugins/siem/public/network/components/network_http_table/index.tsx
new file mode 100644
index 00000000000000..cab7106584e0f3
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/network_http_table/index.tsx
@@ -0,0 +1,145 @@
+/*
+ * 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, { useCallback, useMemo } from 'react';
+import { connect, ConnectedProps } from 'react-redux';
+
+import { networkActions, networkModel, networkSelectors } from '../../store';
+import { Direction, NetworkHttpEdges, NetworkHttpFields } from '../../../graphql/types';
+import { State } from '../../../common/store';
+import { Criteria, ItemsPerRow, PaginatedTable } from '../../../common/components/paginated_table';
+
+import { getNetworkHttpColumns } from './columns';
+import * as i18n from './translations';
+
+interface OwnProps {
+  data: NetworkHttpEdges[];
+  fakeTotalCount: number;
+  id: string;
+  isInspect: boolean;
+  loading: boolean;
+  loadPage: (newActivePage: number) => void;
+  showMorePagesIndicator: boolean;
+  totalCount: number;
+  type: networkModel.NetworkType;
+}
+
+type NetworkHttpTableProps = OwnProps & PropsFromRedux;
+
+const rowItems: ItemsPerRow[] = [
+  {
+    text: i18n.ROWS_5,
+    numberOfRow: 5,
+  },
+  {
+    text: i18n.ROWS_10,
+    numberOfRow: 10,
+  },
+];
+
+const NetworkHttpTableComponent: React.FC<NetworkHttpTableProps> = ({
+  activePage,
+  data,
+  fakeTotalCount,
+  id,
+  isInspect,
+  limit,
+  loading,
+  loadPage,
+  showMorePagesIndicator,
+  sort,
+  totalCount,
+  type,
+  updateNetworkTable,
+}) => {
+  const tableType =
+    type === networkModel.NetworkType.page
+      ? networkModel.NetworkTableType.http
+      : networkModel.IpDetailsTableType.http;
+
+  const updateLimitPagination = useCallback(
+    newLimit =>
+      updateNetworkTable({
+        networkType: type,
+        tableType,
+        updates: { limit: newLimit },
+      }),
+    [type, updateNetworkTable, tableType]
+  );
+
+  const updateActivePage = useCallback(
+    newPage =>
+      updateNetworkTable({
+        networkType: type,
+        tableType,
+        updates: { activePage: newPage },
+      }),
+    [type, updateNetworkTable, tableType]
+  );
+
+  const onChange = useCallback(
+    (criteria: Criteria) => {
+      if (criteria.sort != null && criteria.sort.direction !== sort.direction) {
+        updateNetworkTable({
+          networkType: type,
+          tableType,
+          updates: {
+            sort: {
+              direction: criteria.sort.direction as Direction,
+            },
+          },
+        });
+      }
+    },
+    [tableType, sort.direction, type, updateNetworkTable]
+  );
+
+  const sorting = { field: `node.${NetworkHttpFields.requestCount}`, direction: sort.direction };
+
+  const columns = useMemo(() => getNetworkHttpColumns(tableType), [tableType]);
+
+  return (
+    <PaginatedTable
+      activePage={activePage}
+      columns={columns}
+      dataTestSubj={`table-${tableType}`}
+      headerCount={totalCount}
+      headerTitle={i18n.HTTP_REQUESTS}
+      headerUnit={i18n.UNIT(totalCount)}
+      id={id}
+      itemsPerRow={rowItems}
+      isInspect={isInspect}
+      limit={limit}
+      loading={loading}
+      loadPage={loadPage}
+      onChange={onChange}
+      pageOfItems={data}
+      showMorePagesIndicator={showMorePagesIndicator}
+      sorting={sorting}
+      totalCount={fakeTotalCount}
+      updateActivePage={updateActivePage}
+      updateLimitPagination={updateLimitPagination}
+    />
+  );
+};
+
+NetworkHttpTableComponent.displayName = 'NetworkHttpTableComponent';
+
+const makeMapStateToProps = () => {
+  const getNetworkHttpSelector = networkSelectors.httpSelector();
+  const mapStateToProps = (state: State, { type }: OwnProps) => getNetworkHttpSelector(state, type);
+  return mapStateToProps;
+};
+
+const mapDispatchToProps = {
+  updateNetworkTable: networkActions.updateNetworkTable,
+};
+
+const connector = connect(makeMapStateToProps, mapDispatchToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export const NetworkHttpTable = connector(React.memo(NetworkHttpTableComponent));
diff --git a/x-pack/plugins/siem/public/network/components/network_http_table/mock.ts b/x-pack/plugins/siem/public/network/components/network_http_table/mock.ts
new file mode 100644
index 00000000000000..f82f911d601ffd
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/network_http_table/mock.ts
@@ -0,0 +1,88 @@
+/*
+ * 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 { NetworkHttpData } from '../../../graphql/types';
+
+export const mockData: { NetworkHttp: NetworkHttpData } = {
+  NetworkHttp: {
+    edges: [
+      {
+        node: {
+          _id: '/computeMetadata/v1/instance/virtual-clock/drift-token',
+          domains: ['metadata.google.internal'],
+          methods: ['get'],
+          statuses: [],
+          lastHost: 'suricata-iowa',
+          lastSourceIp: '10.128.0.21',
+          path: '/computeMetadata/v1/instance/virtual-clock/drift-token',
+          requestCount: 1440,
+        },
+        cursor: {
+          value: '/computeMetadata/v1/instance/virtual-clock/drift-token',
+          tiebreaker: null,
+        },
+      },
+      {
+        node: {
+          _id: '/computeMetadata/v1/',
+          domains: ['metadata.google.internal'],
+          methods: ['get'],
+          statuses: ['200'],
+          lastHost: 'suricata-iowa',
+          lastSourceIp: '10.128.0.21',
+          path: '/computeMetadata/v1/',
+          requestCount: 1020,
+        },
+        cursor: {
+          value: '/computeMetadata/v1/',
+          tiebreaker: null,
+        },
+      },
+      {
+        node: {
+          _id: '/computeMetadata/v1/instance/network-interfaces/',
+          domains: ['metadata.google.internal'],
+          methods: ['get'],
+          statuses: [],
+          lastHost: 'suricata-iowa',
+          lastSourceIp: '10.128.0.21',
+          path: '/computeMetadata/v1/instance/network-interfaces/',
+          requestCount: 960,
+        },
+        cursor: {
+          value: '/computeMetadata/v1/instance/network-interfaces/',
+          tiebreaker: null,
+        },
+      },
+      {
+        node: {
+          _id: '/downloads/ca_setup.exe',
+          domains: ['www.oxid.it'],
+          methods: ['get'],
+          statuses: ['200'],
+          lastHost: 'jessie',
+          lastSourceIp: '10.0.2.15',
+          path: '/downloads/ca_setup.exe',
+          requestCount: 3,
+        },
+        cursor: {
+          value: '/downloads/ca_setup.exe',
+          tiebreaker: null,
+        },
+      },
+    ],
+    inspect: {
+      dsl: [''],
+      response: [''],
+    },
+    pageInfo: {
+      activePage: 0,
+      fakeTotalCount: 4,
+      showMorePagesIndicator: false,
+    },
+    totalCount: 4,
+  },
+};
diff --git a/x-pack/plugins/siem/public/components/page/network/network_http_table/translations.ts b/x-pack/plugins/siem/public/network/components/network_http_table/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/network/network_http_table/translations.ts
rename to x-pack/plugins/siem/public/network/components/network_http_table/translations.ts
diff --git a/x-pack/plugins/siem/public/components/page/network/network_top_countries_table/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/network/components/network_top_countries_table/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/network/network_top_countries_table/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/network/components/network_top_countries_table/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/network/components/network_top_countries_table/columns.tsx b/x-pack/plugins/siem/public/network/components/network_top_countries_table/columns.tsx
new file mode 100644
index 00000000000000..60d691f48deb8c
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/network_top_countries_table/columns.tsx
@@ -0,0 +1,182 @@
+/*
+ * 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 { get } from 'lodash/fp';
+import numeral from '@elastic/numeral';
+import React from 'react';
+import { IIndexPattern } from 'src/plugins/data/public';
+
+import { CountryFlagAndName } from '../source_destination/country_flag';
+import {
+  FlowTargetSourceDest,
+  NetworkTopCountriesEdges,
+  TopNetworkTablesEcsField,
+} from '../../../graphql/types';
+import { networkModel } from '../../store';
+import {
+  DragEffects,
+  DraggableWrapper,
+} from '../../../common/components/drag_and_drop/draggable_wrapper';
+import { escapeDataProviderId } from '../../../common/components/drag_and_drop/helpers';
+import { getEmptyTagValue } from '../../../common/components/empty_value';
+import { Columns } from '../../../common/components/paginated_table';
+import { IS_OPERATOR } from '../../../timelines/components/timeline/data_providers/data_provider';
+import { Provider } from '../../../timelines/components/timeline/data_providers/provider';
+import * as i18n from './translations';
+import { PreferenceFormattedBytes } from '../../../common/components/formatted_bytes';
+
+export type NetworkTopCountriesColumns = [
+  Columns<NetworkTopCountriesEdges>,
+  Columns<TopNetworkTablesEcsField['bytes_in']>,
+  Columns<TopNetworkTablesEcsField['bytes_out']>,
+  Columns<NetworkTopCountriesEdges>,
+  Columns<NetworkTopCountriesEdges>,
+  Columns<NetworkTopCountriesEdges>
+];
+
+export type NetworkTopCountriesColumnsIpDetails = [
+  Columns<NetworkTopCountriesEdges>,
+  Columns<TopNetworkTablesEcsField['bytes_in']>,
+  Columns<TopNetworkTablesEcsField['bytes_out']>,
+  Columns<NetworkTopCountriesEdges>,
+  Columns<NetworkTopCountriesEdges>
+];
+
+export const getNetworkTopCountriesColumns = (
+  indexPattern: IIndexPattern,
+  flowTarget: FlowTargetSourceDest,
+  type: networkModel.NetworkType,
+  tableId: string
+): NetworkTopCountriesColumns => [
+  {
+    name: i18n.COUNTRY,
+    render: ({ node }) => {
+      const geo = get(`${flowTarget}.country`, node);
+      const geoAttr = `${flowTarget}.geo.country_iso_code`;
+      const id = escapeDataProviderId(`${tableId}-table-${flowTarget}-country-${geo}`);
+      if (geo != null) {
+        return (
+          <DraggableWrapper
+            key={id}
+            dataProvider={{
+              and: [],
+              enabled: true,
+              id,
+              name: geo,
+              excluded: false,
+              kqlQuery: '',
+              queryMatch: { field: geoAttr, value: geo, operator: IS_OPERATOR },
+            }}
+            render={(dataProvider, _, snapshot) =>
+              snapshot.isDragging ? (
+                <DragEffects>
+                  <Provider dataProvider={dataProvider} />
+                </DragEffects>
+              ) : (
+                <>
+                  <CountryFlagAndName countryCode={geo} />
+                </>
+              )
+            }
+          />
+        );
+      } else {
+        return getEmptyTagValue();
+      }
+    },
+    width: '20%',
+  },
+  {
+    align: 'right',
+    field: 'node.network.bytes_in',
+    name: i18n.BYTES_IN,
+    sortable: true,
+    render: bytes => {
+      if (bytes != null) {
+        return <PreferenceFormattedBytes value={bytes} />;
+      } else {
+        return getEmptyTagValue();
+      }
+    },
+  },
+  {
+    align: 'right',
+    field: 'node.network.bytes_out',
+    name: i18n.BYTES_OUT,
+    sortable: true,
+    render: bytes => {
+      if (bytes != null) {
+        return <PreferenceFormattedBytes value={bytes} />;
+      } else {
+        return getEmptyTagValue();
+      }
+    },
+  },
+  {
+    align: 'right',
+    field: `node.${flowTarget}.flows`,
+    name: i18n.FLOWS,
+    sortable: true,
+    render: flows => {
+      if (flows != null) {
+        return numeral(flows).format('0,000');
+      } else {
+        return getEmptyTagValue();
+      }
+    },
+  },
+  {
+    align: 'right',
+    field: `node.${flowTarget}.${flowTarget}_ips`,
+    name: flowTarget === FlowTargetSourceDest.source ? i18n.SOURCE_IPS : i18n.DESTINATION_IPS,
+    sortable: true,
+    render: ips => {
+      if (ips != null) {
+        return numeral(ips).format('0,000');
+      } else {
+        return getEmptyTagValue();
+      }
+    },
+  },
+  {
+    align: 'right',
+    field: `node.${flowTarget}.${getOppositeField(flowTarget)}_ips`,
+    name:
+      getOppositeField(flowTarget) === FlowTargetSourceDest.source
+        ? i18n.SOURCE_IPS
+        : i18n.DESTINATION_IPS,
+    sortable: true,
+    render: ips => {
+      if (ips != null) {
+        return numeral(ips).format('0,000');
+      } else {
+        return getEmptyTagValue();
+      }
+    },
+  },
+];
+
+export const getCountriesColumnsCurated = (
+  indexPattern: IIndexPattern,
+  flowTarget: FlowTargetSourceDest,
+  type: networkModel.NetworkType,
+  tableId: string
+): NetworkTopCountriesColumns | NetworkTopCountriesColumnsIpDetails => {
+  const columns = getNetworkTopCountriesColumns(indexPattern, flowTarget, type, tableId);
+
+  // Columns to exclude from host details pages
+  if (type === networkModel.NetworkType.details) {
+    columns.pop();
+    return columns;
+  }
+
+  return columns;
+};
+
+const getOppositeField = (flowTarget: FlowTargetSourceDest): FlowTargetSourceDest =>
+  flowTarget === FlowTargetSourceDest.source
+    ? FlowTargetSourceDest.destination
+    : FlowTargetSourceDest.source;
diff --git a/x-pack/plugins/siem/public/network/components/network_top_countries_table/index.test.tsx b/x-pack/plugins/siem/public/network/components/network_top_countries_table/index.test.tsx
new file mode 100644
index 00000000000000..a449ed8dfa9ced
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/network_top_countries_table/index.test.tsx
@@ -0,0 +1,153 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import { getOr } from 'lodash/fp';
+import React from 'react';
+import { MockedProvider } from 'react-apollo/test-utils';
+import { Provider as ReduxStoreProvider } from 'react-redux';
+
+import { FlowTargetSourceDest } from '../../../graphql/types';
+import {
+  apolloClientObservable,
+  mockGlobalState,
+  mockIndexPattern,
+  TestProviders,
+  SUB_PLUGINS_REDUCER,
+} from '../../../common/mock';
+import { useMountAppended } from '../../../common/utils/use_mount_appended';
+import { createStore, State } from '../../../common/store';
+import { networkModel } from '../../store';
+
+import { NetworkTopCountriesTable } from '.';
+import { mockData } from './mock';
+
+describe('NetworkTopCountries Table Component', () => {
+  const loadPage = jest.fn();
+  const state: State = mockGlobalState;
+  const mount = useMountAppended();
+
+  let store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable);
+
+  beforeEach(() => {
+    store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable);
+  });
+
+  describe('rendering', () => {
+    test('it renders the default NetworkTopCountries table', () => {
+      const wrapper = shallow(
+        <ReduxStoreProvider store={store}>
+          <NetworkTopCountriesTable
+            data={mockData.NetworkTopCountries.edges}
+            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.NetworkTopCountries.pageInfo)}
+            flowTargeted={FlowTargetSourceDest.source}
+            id="topCountriesSource"
+            indexPattern={mockIndexPattern}
+            isInspect={false}
+            loading={false}
+            loadPage={loadPage}
+            showMorePagesIndicator={getOr(
+              false,
+              'showMorePagesIndicator',
+              mockData.NetworkTopCountries.pageInfo
+            )}
+            totalCount={mockData.NetworkTopCountries.totalCount}
+            type={networkModel.NetworkType.page}
+          />
+        </ReduxStoreProvider>
+      );
+
+      expect(wrapper.find('Connect(NetworkTopCountriesTableComponent)')).toMatchSnapshot();
+    });
+    test('it renders the IP Details NetworkTopCountries table', () => {
+      const wrapper = shallow(
+        <ReduxStoreProvider store={store}>
+          <NetworkTopCountriesTable
+            data={mockData.NetworkTopCountries.edges}
+            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.NetworkTopCountries.pageInfo)}
+            flowTargeted={FlowTargetSourceDest.source}
+            id="topCountriesSource"
+            indexPattern={mockIndexPattern}
+            isInspect={false}
+            loading={false}
+            loadPage={loadPage}
+            showMorePagesIndicator={getOr(
+              false,
+              'showMorePagesIndicator',
+              mockData.NetworkTopCountries.pageInfo
+            )}
+            totalCount={mockData.NetworkTopCountries.totalCount}
+            type={networkModel.NetworkType.details}
+          />
+        </ReduxStoreProvider>
+      );
+
+      expect(wrapper.find('Connect(NetworkTopCountriesTableComponent)')).toMatchSnapshot();
+    });
+  });
+
+  describe('Sorting on Table', () => {
+    test('when you click on the column header, you should show the sorting icon', () => {
+      const wrapper = mount(
+        <MockedProvider>
+          <TestProviders store={store}>
+            <NetworkTopCountriesTable
+              data={mockData.NetworkTopCountries.edges}
+              fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.NetworkTopCountries.pageInfo)}
+              flowTargeted={FlowTargetSourceDest.source}
+              id="topCountriesSource"
+              isInspect={false}
+              indexPattern={mockIndexPattern}
+              loading={false}
+              loadPage={loadPage}
+              showMorePagesIndicator={getOr(
+                false,
+                'showMorePagesIndicator',
+                mockData.NetworkTopCountries.pageInfo
+              )}
+              totalCount={mockData.NetworkTopCountries.totalCount}
+              type={networkModel.NetworkType.page}
+            />
+          </TestProviders>
+        </MockedProvider>
+      );
+      expect(store.getState().network.page.queries.topCountriesSource.sort).toEqual({
+        direction: 'desc',
+        field: 'bytes_out',
+      });
+
+      wrapper
+        .find('.euiTable thead tr th button')
+        .at(1)
+        .simulate('click');
+
+      wrapper.update();
+
+      expect(store.getState().network.page.queries.topCountriesSource.sort).toEqual({
+        direction: 'asc',
+        field: 'bytes_out',
+      });
+      expect(
+        wrapper
+          .find('.euiTable thead tr th button')
+          .first()
+          .text()
+      ).toEqual('Bytes inClick to sort in ascending order');
+      expect(
+        wrapper
+          .find('.euiTable thead tr th button')
+          .at(1)
+          .text()
+      ).toEqual('Bytes outClick to sort in descending order');
+      expect(
+        wrapper
+          .find('.euiTable thead tr th button')
+          .at(1)
+          .find('svg')
+      ).toBeTruthy();
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/network/components/network_top_countries_table/index.tsx b/x-pack/plugins/siem/public/network/components/network_top_countries_table/index.tsx
new file mode 100644
index 00000000000000..c2a280d30d1063
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/network_top_countries_table/index.tsx
@@ -0,0 +1,192 @@
+/*
+ * 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 { last } from 'lodash/fp';
+import React, { useCallback, useMemo } from 'react';
+import { connect, ConnectedProps } from 'react-redux';
+import deepEqual from 'fast-deep-equal';
+import { IIndexPattern } from 'src/plugins/data/public';
+
+import { networkActions, networkModel, networkSelectors } from '../../store';
+import {
+  Direction,
+  FlowTargetSourceDest,
+  NetworkTopCountriesEdges,
+  NetworkTopTablesFields,
+  NetworkTopTablesSortField,
+} from '../../../graphql/types';
+import { State } from '../../../common/store';
+
+import { Criteria, ItemsPerRow, PaginatedTable } from '../../../common/components/paginated_table';
+
+import { getCountriesColumnsCurated } from './columns';
+import * as i18n from './translations';
+
+interface OwnProps {
+  data: NetworkTopCountriesEdges[];
+  fakeTotalCount: number;
+  flowTargeted: FlowTargetSourceDest;
+  id: string;
+  indexPattern: IIndexPattern;
+  isInspect: boolean;
+  loading: boolean;
+  loadPage: (newActivePage: number) => void;
+  showMorePagesIndicator: boolean;
+  totalCount: number;
+  type: networkModel.NetworkType;
+}
+
+type NetworkTopCountriesTableProps = OwnProps & PropsFromRedux;
+
+const rowItems: ItemsPerRow[] = [
+  {
+    text: i18n.ROWS_5,
+    numberOfRow: 5,
+  },
+  {
+    text: i18n.ROWS_10,
+    numberOfRow: 10,
+  },
+];
+
+export const NetworkTopCountriesTableId = 'networkTopCountries-top-talkers';
+
+const NetworkTopCountriesTableComponent = React.memo<NetworkTopCountriesTableProps>(
+  ({
+    activePage,
+    data,
+    fakeTotalCount,
+    flowTargeted,
+    id,
+    indexPattern,
+    isInspect,
+    limit,
+    loading,
+    loadPage,
+    showMorePagesIndicator,
+    sort,
+    totalCount,
+    type,
+    updateNetworkTable,
+  }) => {
+    let tableType: networkModel.TopCountriesTableType;
+    const headerTitle: string =
+      flowTargeted === FlowTargetSourceDest.source
+        ? i18n.SOURCE_COUNTRIES
+        : i18n.DESTINATION_COUNTRIES;
+
+    if (type === networkModel.NetworkType.page) {
+      tableType =
+        flowTargeted === FlowTargetSourceDest.source
+          ? networkModel.NetworkTableType.topCountriesSource
+          : networkModel.NetworkTableType.topCountriesDestination;
+    } else {
+      tableType =
+        flowTargeted === FlowTargetSourceDest.source
+          ? networkModel.IpDetailsTableType.topCountriesSource
+          : networkModel.IpDetailsTableType.topCountriesDestination;
+    }
+
+    const field =
+      sort.field === NetworkTopTablesFields.bytes_out ||
+      sort.field === NetworkTopTablesFields.bytes_in
+        ? `node.network.${sort.field}`
+        : `node.${flowTargeted}.${sort.field}`;
+
+    const updateLimitPagination = useCallback(
+      newLimit =>
+        updateNetworkTable({
+          networkType: type,
+          tableType,
+          updates: { limit: newLimit },
+        }),
+      [type, updateNetworkTable, tableType]
+    );
+
+    const updateActivePage = useCallback(
+      newPage =>
+        updateNetworkTable({
+          networkType: type,
+          tableType,
+          updates: { activePage: newPage },
+        }),
+      [type, updateNetworkTable, tableType]
+    );
+
+    const onChange = useCallback(
+      (criteria: Criteria) => {
+        if (criteria.sort != null) {
+          const splitField = criteria.sort.field.split('.');
+          const lastField = last(splitField);
+          const newSortDirection =
+            lastField !== sort.field ? Direction.desc : criteria.sort.direction; // sort by desc on init click
+          const newTopCountriesSort: NetworkTopTablesSortField = {
+            field: lastField as NetworkTopTablesFields,
+            direction: newSortDirection as Direction,
+          };
+          if (!deepEqual(newTopCountriesSort, sort)) {
+            updateNetworkTable({
+              networkType: type,
+              tableType,
+              updates: {
+                sort: newTopCountriesSort,
+              },
+            });
+          }
+        }
+      },
+      [type, sort, tableType, updateNetworkTable]
+    );
+
+    const columns = useMemo(
+      () =>
+        getCountriesColumnsCurated(indexPattern, flowTargeted, type, NetworkTopCountriesTableId),
+      [indexPattern, flowTargeted, type]
+    );
+
+    return (
+      <PaginatedTable
+        activePage={activePage}
+        columns={columns}
+        dataTestSubj={`table-${tableType}`}
+        headerCount={totalCount}
+        headerTitle={headerTitle}
+        headerUnit={i18n.UNIT(totalCount)}
+        id={id}
+        isInspect={isInspect}
+        itemsPerRow={rowItems}
+        limit={limit}
+        loading={loading}
+        loadPage={loadPage}
+        onChange={onChange}
+        pageOfItems={data}
+        showMorePagesIndicator={showMorePagesIndicator}
+        sorting={{ field, direction: sort.direction }}
+        totalCount={fakeTotalCount}
+        updateActivePage={updateActivePage}
+        updateLimitPagination={updateLimitPagination}
+      />
+    );
+  }
+);
+
+NetworkTopCountriesTableComponent.displayName = 'NetworkTopCountriesTableComponent';
+
+const makeMapStateToProps = () => {
+  const getTopCountriesSelector = networkSelectors.topCountriesSelector();
+  return (state: State, { type, flowTargeted }: OwnProps) =>
+    getTopCountriesSelector(state, type, flowTargeted);
+};
+
+const mapDispatchToProps = {
+  updateNetworkTable: networkActions.updateNetworkTable,
+};
+
+const connector = connect(makeMapStateToProps, mapDispatchToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export const NetworkTopCountriesTable = connector(NetworkTopCountriesTableComponent);
diff --git a/x-pack/plugins/siem/public/network/components/network_top_countries_table/mock.ts b/x-pack/plugins/siem/public/network/components/network_top_countries_table/mock.ts
new file mode 100644
index 00000000000000..cee775c93d66fd
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/network_top_countries_table/mock.ts
@@ -0,0 +1,56 @@
+/*
+ * 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 { NetworkTopCountriesData } from '../../../graphql/types';
+
+export const mockData: { NetworkTopCountries: NetworkTopCountriesData } = {
+  NetworkTopCountries: {
+    totalCount: 524,
+    edges: [
+      {
+        node: {
+          source: {
+            country: 'DE',
+            destination_ips: 12,
+            flows: 12345,
+            source_ips: 55,
+          },
+          destination: null,
+          network: {
+            bytes_in: 3826633497,
+            bytes_out: 1083495734,
+          },
+        },
+        cursor: {
+          value: '8.8.8.8',
+        },
+      },
+      {
+        node: {
+          source: {
+            flows: 12345,
+            destination_ips: 12,
+            source_ips: 55,
+            country: 'US',
+          },
+          destination: null,
+          network: {
+            bytes_in: 3826633497,
+            bytes_out: 1083495734,
+          },
+        },
+        cursor: {
+          value: '9.9.9.9',
+        },
+      },
+    ],
+    pageInfo: {
+      activePage: 1,
+      fakeTotalCount: 50,
+      showMorePagesIndicator: true,
+    },
+  },
+};
diff --git a/x-pack/plugins/siem/public/components/page/network/network_top_countries_table/translations.ts b/x-pack/plugins/siem/public/network/components/network_top_countries_table/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/network/network_top_countries_table/translations.ts
rename to x-pack/plugins/siem/public/network/components/network_top_countries_table/translations.ts
diff --git a/x-pack/plugins/siem/public/components/page/network/network_top_n_flow_table/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/network/components/network_top_n_flow_table/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/network/network_top_n_flow_table/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/network/components/network_top_n_flow_table/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/network/components/network_top_n_flow_table/columns.tsx b/x-pack/plugins/siem/public/network/components/network_top_n_flow_table/columns.tsx
new file mode 100644
index 00000000000000..64626c450b9eca
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/network_top_n_flow_table/columns.tsx
@@ -0,0 +1,257 @@
+/*
+ * 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 { get } from 'lodash/fp';
+import numeral from '@elastic/numeral';
+import React from 'react';
+
+import { CountryFlag } from '../source_destination/country_flag';
+import {
+  AutonomousSystemItem,
+  FlowTargetSourceDest,
+  NetworkTopNFlowEdges,
+  TopNetworkTablesEcsField,
+} from '../../../graphql/types';
+import { networkModel } from '../../store';
+import {
+  DragEffects,
+  DraggableWrapper,
+} from '../../../common/components/drag_and_drop/draggable_wrapper';
+import { escapeDataProviderId } from '../../../common/components/drag_and_drop/helpers';
+import { getEmptyTagValue } from '../../../common/components/empty_value';
+import { IPDetailsLink } from '../../../common/components/links';
+import { Columns } from '../../../common/components/paginated_table';
+import { IS_OPERATOR } from '../../../timelines/components/timeline/data_providers/data_provider';
+import { Provider } from '../../../timelines/components/timeline/data_providers/provider';
+import * as i18n from './translations';
+import {
+  getRowItemDraggable,
+  getRowItemDraggables,
+} from '../../../common/components/tables/helpers';
+import { PreferenceFormattedBytes } from '../../../common/components/formatted_bytes';
+
+export type NetworkTopNFlowColumns = [
+  Columns<NetworkTopNFlowEdges>,
+  Columns<NetworkTopNFlowEdges>,
+  Columns<NetworkTopNFlowEdges>,
+  Columns<TopNetworkTablesEcsField['bytes_in']>,
+  Columns<TopNetworkTablesEcsField['bytes_out']>,
+  Columns<NetworkTopNFlowEdges>,
+  Columns<NetworkTopNFlowEdges>
+];
+
+export type NetworkTopNFlowColumnsIpDetails = [
+  Columns<NetworkTopNFlowEdges>,
+  Columns<NetworkTopNFlowEdges>,
+  Columns<NetworkTopNFlowEdges>,
+  Columns<TopNetworkTablesEcsField['bytes_in']>,
+  Columns<TopNetworkTablesEcsField['bytes_out']>,
+  Columns<NetworkTopNFlowEdges>
+];
+
+export const getNetworkTopNFlowColumns = (
+  flowTarget: FlowTargetSourceDest,
+  tableId: string
+): NetworkTopNFlowColumns => [
+  {
+    name: i18n.IP_TITLE,
+    render: ({ node }) => {
+      const ipAttr = `${flowTarget}.ip`;
+      const ip: string | null = get(ipAttr, node);
+      const geoAttr = `${flowTarget}.location.geo.country_iso_code[0]`;
+      const geoAttrName = `${flowTarget}.geo.country_iso_code`;
+      const geo: string | null = get(geoAttr, node);
+      const id = escapeDataProviderId(`${tableId}-table-${flowTarget}-ip-${ip}`);
+
+      if (ip != null) {
+        return (
+          <>
+            <DraggableWrapper
+              key={id}
+              dataProvider={{
+                and: [],
+                enabled: true,
+                id,
+                name: ip,
+                excluded: false,
+                kqlQuery: '',
+                queryMatch: { field: ipAttr, value: ip, operator: IS_OPERATOR },
+              }}
+              render={(dataProvider, _, snapshot) =>
+                snapshot.isDragging ? (
+                  <DragEffects>
+                    <Provider dataProvider={dataProvider} />
+                  </DragEffects>
+                ) : (
+                  <IPDetailsLink ip={ip} flowTarget={flowTarget} />
+                )
+              }
+            />
+
+            {geo && (
+              <DraggableWrapper
+                key={`${id}-${geo}`}
+                dataProvider={{
+                  and: [],
+                  enabled: true,
+                  id: `${id}-${geo}`,
+                  name: geo,
+                  excluded: false,
+                  kqlQuery: '',
+                  queryMatch: { field: geoAttrName, value: geo, operator: IS_OPERATOR },
+                }}
+                render={(dataProvider, _, snapshot) =>
+                  snapshot.isDragging ? (
+                    <DragEffects>
+                      <Provider dataProvider={dataProvider} />
+                    </DragEffects>
+                  ) : (
+                    <>
+                      {' '}
+                      <CountryFlag countryCode={geo} /> {geo}
+                    </>
+                  )
+                }
+              />
+            )}
+          </>
+        );
+      } else {
+        return getEmptyTagValue();
+      }
+    },
+    width: '20%',
+  },
+  {
+    name: i18n.DOMAIN,
+    render: ({ node }) => {
+      const domainAttr = `${flowTarget}.domain`;
+      const ipAttr = `${flowTarget}.ip`;
+      const domains: string[] = get(domainAttr, node);
+      const ip: string | null = get(ipAttr, node);
+
+      if (Array.isArray(domains) && domains.length > 0) {
+        const id = escapeDataProviderId(`${tableId}-table-${ip}`);
+        return getRowItemDraggables({
+          rowItems: domains,
+          attrName: domainAttr,
+          idPrefix: id,
+          displayCount: 1,
+        });
+      } else {
+        return getEmptyTagValue();
+      }
+    },
+    width: '20%',
+  },
+  {
+    name: i18n.AUTONOMOUS_SYSTEM,
+    render: ({ node, cursor: { value: ipAddress } }) => {
+      const asAttr = `${flowTarget}.autonomous_system`;
+      const as: AutonomousSystemItem | null = get(asAttr, node);
+      if (as != null) {
+        const id = escapeDataProviderId(`${tableId}-table-${flowTarget}-ip-${ipAddress}`);
+        return (
+          <>
+            {as.name &&
+              getRowItemDraggable({
+                rowItem: as.name,
+                attrName: `${flowTarget}.as.organization.name`,
+                idPrefix: `${id}-name`,
+              })}
+
+            {as.number && (
+              <>
+                {' '}
+                {getRowItemDraggable({
+                  rowItem: `${as.number}`,
+                  attrName: `${flowTarget}.as.number`,
+                  idPrefix: `${id}-number`,
+                })}
+              </>
+            )}
+          </>
+        );
+      } else {
+        return getEmptyTagValue();
+      }
+    },
+    width: '20%',
+  },
+  {
+    align: 'right',
+    field: 'node.network.bytes_in',
+    name: i18n.BYTES_IN,
+    sortable: true,
+    render: bytes => {
+      if (bytes != null) {
+        return <PreferenceFormattedBytes value={bytes} />;
+      } else {
+        return getEmptyTagValue();
+      }
+    },
+  },
+  {
+    align: 'right',
+    field: 'node.network.bytes_out',
+    name: i18n.BYTES_OUT,
+    sortable: true,
+    render: bytes => {
+      if (bytes != null) {
+        return <PreferenceFormattedBytes value={bytes} />;
+      } else {
+        return getEmptyTagValue();
+      }
+    },
+  },
+  {
+    align: 'right',
+    field: `node.${flowTarget}.flows`,
+    name: i18n.FLOWS,
+    sortable: true,
+    render: flows => {
+      if (flows != null) {
+        return numeral(flows).format('0,000');
+      } else {
+        return getEmptyTagValue();
+      }
+    },
+  },
+  {
+    align: 'right',
+    field: `node.${flowTarget}.${getOppositeField(flowTarget)}_ips`,
+    name: flowTarget === FlowTargetSourceDest.source ? i18n.DESTINATION_IPS : i18n.SOURCE_IPS,
+    sortable: true,
+    render: ips => {
+      if (ips != null) {
+        return numeral(ips).format('0,000');
+      } else {
+        return getEmptyTagValue();
+      }
+    },
+  },
+];
+
+export const getNFlowColumnsCurated = (
+  flowTarget: FlowTargetSourceDest,
+  type: networkModel.NetworkType,
+  tableId: string
+): NetworkTopNFlowColumns | NetworkTopNFlowColumnsIpDetails => {
+  const columns = getNetworkTopNFlowColumns(flowTarget, tableId);
+
+  // Columns to exclude from host details pages
+  if (type === networkModel.NetworkType.details) {
+    columns.pop();
+    return columns;
+  }
+
+  return columns;
+};
+
+const getOppositeField = (flowTarget: FlowTargetSourceDest): FlowTargetSourceDest =>
+  flowTarget === FlowTargetSourceDest.source
+    ? FlowTargetSourceDest.destination
+    : FlowTargetSourceDest.source;
diff --git a/x-pack/plugins/siem/public/network/components/network_top_n_flow_table/index.test.tsx b/x-pack/plugins/siem/public/network/components/network_top_n_flow_table/index.test.tsx
new file mode 100644
index 00000000000000..58a7ef744adeed
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/network_top_n_flow_table/index.test.tsx
@@ -0,0 +1,149 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import { getOr } from 'lodash/fp';
+import React from 'react';
+import { MockedProvider } from 'react-apollo/test-utils';
+import { Provider as ReduxStoreProvider } from 'react-redux';
+
+import { FlowTargetSourceDest } from '../../../graphql/types';
+import {
+  apolloClientObservable,
+  mockGlobalState,
+  TestProviders,
+  SUB_PLUGINS_REDUCER,
+} from '../../../common/mock';
+import { useMountAppended } from '../../../common/utils/use_mount_appended';
+import { createStore, State } from '../../../common/store';
+import { networkModel } from '../../store';
+import { NetworkTopNFlowTable } from '.';
+import { mockData } from './mock';
+
+describe('NetworkTopNFlow Table Component', () => {
+  const loadPage = jest.fn();
+  const state: State = mockGlobalState;
+
+  let store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable);
+  const mount = useMountAppended();
+
+  beforeEach(() => {
+    store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable);
+  });
+
+  describe('rendering', () => {
+    test('it renders the default NetworkTopNFlow table on the Network page', () => {
+      const wrapper = shallow(
+        <ReduxStoreProvider store={store}>
+          <NetworkTopNFlowTable
+            data={mockData.NetworkTopNFlow.edges}
+            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.NetworkTopNFlow.pageInfo)}
+            flowTargeted={FlowTargetSourceDest.source}
+            id="topNFlowSource"
+            isInspect={false}
+            loading={false}
+            loadPage={loadPage}
+            showMorePagesIndicator={getOr(
+              false,
+              'showMorePagesIndicator',
+              mockData.NetworkTopNFlow.pageInfo
+            )}
+            totalCount={mockData.NetworkTopNFlow.totalCount}
+            type={networkModel.NetworkType.page}
+          />
+        </ReduxStoreProvider>
+      );
+
+      expect(wrapper.find('Connect(Component)')).toMatchSnapshot();
+    });
+
+    test('it renders the default NetworkTopNFlow table on the IP Details page', () => {
+      const wrapper = shallow(
+        <ReduxStoreProvider store={store}>
+          <NetworkTopNFlowTable
+            data={mockData.NetworkTopNFlow.edges}
+            fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.NetworkTopNFlow.pageInfo)}
+            flowTargeted={FlowTargetSourceDest.source}
+            id="topNFlowSource"
+            isInspect={false}
+            loading={false}
+            loadPage={loadPage}
+            showMorePagesIndicator={getOr(
+              false,
+              'showMorePagesIndicator',
+              mockData.NetworkTopNFlow.pageInfo
+            )}
+            totalCount={mockData.NetworkTopNFlow.totalCount}
+            type={networkModel.NetworkType.details}
+          />
+        </ReduxStoreProvider>
+      );
+
+      expect(wrapper.find('Connect(Component)')).toMatchSnapshot();
+    });
+  });
+
+  describe('Sorting on Table', () => {
+    test('when you click on the column header, you should show the sorting icon', () => {
+      const wrapper = mount(
+        <MockedProvider>
+          <TestProviders store={store}>
+            <NetworkTopNFlowTable
+              data={mockData.NetworkTopNFlow.edges}
+              fakeTotalCount={getOr(50, 'fakeTotalCount', mockData.NetworkTopNFlow.pageInfo)}
+              flowTargeted={FlowTargetSourceDest.source}
+              id="topNFlowSource"
+              isInspect={false}
+              loading={false}
+              loadPage={loadPage}
+              showMorePagesIndicator={getOr(
+                false,
+                'showMorePagesIndicator',
+                mockData.NetworkTopNFlow.pageInfo
+              )}
+              totalCount={mockData.NetworkTopNFlow.totalCount}
+              type={networkModel.NetworkType.page}
+            />
+          </TestProviders>
+        </MockedProvider>
+      );
+      expect(store.getState().network.page.queries.topNFlowSource.sort).toEqual({
+        direction: 'desc',
+        field: 'bytes_out',
+      });
+
+      wrapper
+        .find('.euiTable thead tr th button')
+        .at(1)
+        .simulate('click');
+
+      wrapper.update();
+
+      expect(store.getState().network.page.queries.topNFlowSource.sort).toEqual({
+        direction: 'asc',
+        field: 'bytes_out',
+      });
+      expect(
+        wrapper
+          .find('.euiTable thead tr th button')
+          .first()
+          .text()
+      ).toEqual('Bytes inClick to sort in ascending order');
+      expect(
+        wrapper
+          .find('.euiTable thead tr th button')
+          .at(1)
+          .text()
+      ).toEqual('Bytes outClick to sort in descending order');
+      expect(
+        wrapper
+          .find('.euiTable thead tr th button')
+          .at(1)
+          .find('svg')
+      ).toBeTruthy();
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/network/components/network_top_n_flow_table/index.tsx b/x-pack/plugins/siem/public/network/components/network_top_n_flow_table/index.tsx
new file mode 100644
index 00000000000000..617dd9d08a9db4
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/network_top_n_flow_table/index.tsx
@@ -0,0 +1,173 @@
+/*
+ * 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 { last } from 'lodash/fp';
+import React, { useCallback, useMemo } from 'react';
+import { connect, ConnectedProps } from 'react-redux';
+import deepEqual from 'fast-deep-equal';
+
+import {
+  Direction,
+  FlowTargetSourceDest,
+  NetworkTopNFlowEdges,
+  NetworkTopTablesFields,
+  NetworkTopTablesSortField,
+} from '../../../graphql/types';
+import { State } from '../../../common/store';
+import { Criteria, ItemsPerRow, PaginatedTable } from '../../../common/components/paginated_table';
+import { networkActions, networkModel, networkSelectors } from '../../store';
+import { getNFlowColumnsCurated } from './columns';
+import * as i18n from './translations';
+
+interface OwnProps {
+  data: NetworkTopNFlowEdges[];
+  fakeTotalCount: number;
+  flowTargeted: FlowTargetSourceDest;
+  id: string;
+  isInspect: boolean;
+  loading: boolean;
+  loadPage: (newActivePage: number) => void;
+  showMorePagesIndicator: boolean;
+  totalCount: number;
+  type: networkModel.NetworkType;
+}
+
+type NetworkTopNFlowTableProps = OwnProps & PropsFromRedux;
+
+const rowItems: ItemsPerRow[] = [
+  {
+    text: i18n.ROWS_5,
+    numberOfRow: 5,
+  },
+  {
+    text: i18n.ROWS_10,
+    numberOfRow: 10,
+  },
+];
+
+export const NetworkTopNFlowTableId = 'networkTopSourceFlow-top-talkers';
+
+const NetworkTopNFlowTableComponent: React.FC<NetworkTopNFlowTableProps> = ({
+  activePage,
+  data,
+  fakeTotalCount,
+  flowTargeted,
+  id,
+  isInspect,
+  limit,
+  loading,
+  loadPage,
+  showMorePagesIndicator,
+  sort,
+  totalCount,
+  type,
+  updateNetworkTable,
+}) => {
+  const columns = useMemo(
+    () => getNFlowColumnsCurated(flowTargeted, type, NetworkTopNFlowTableId),
+    [flowTargeted, type]
+  );
+
+  let tableType: networkModel.TopNTableType;
+  const headerTitle: string =
+    flowTargeted === FlowTargetSourceDest.source ? i18n.SOURCE_IP : i18n.DESTINATION_IP;
+
+  if (type === networkModel.NetworkType.page) {
+    tableType =
+      flowTargeted === FlowTargetSourceDest.source
+        ? networkModel.NetworkTableType.topNFlowSource
+        : networkModel.NetworkTableType.topNFlowDestination;
+  } else {
+    tableType =
+      flowTargeted === FlowTargetSourceDest.source
+        ? networkModel.IpDetailsTableType.topNFlowSource
+        : networkModel.IpDetailsTableType.topNFlowDestination;
+  }
+
+  const onChange = useCallback(
+    (criteria: Criteria) => {
+      if (criteria.sort != null) {
+        const splitField = criteria.sort.field.split('.');
+        const field = last(splitField);
+        const newSortDirection = field !== sort.field ? Direction.desc : criteria.sort.direction; // sort by desc on init click
+        const newTopNFlowSort: NetworkTopTablesSortField = {
+          field: field as NetworkTopTablesFields,
+          direction: newSortDirection as Direction,
+        };
+        if (!deepEqual(newTopNFlowSort, sort)) {
+          updateNetworkTable({
+            networkType: type,
+            tableType,
+            updates: {
+              sort: newTopNFlowSort,
+            },
+          });
+        }
+      }
+    },
+    [sort, type, tableType, updateNetworkTable]
+  );
+
+  const field =
+    sort.field === NetworkTopTablesFields.bytes_out ||
+    sort.field === NetworkTopTablesFields.bytes_in
+      ? `node.network.${sort.field}`
+      : `node.${flowTargeted}.${sort.field}`;
+
+  const updateActivePage = useCallback(
+    newPage =>
+      updateNetworkTable({
+        networkType: type,
+        tableType,
+        updates: { activePage: newPage },
+      }),
+    [updateNetworkTable, type, tableType]
+  );
+
+  const updateLimitPagination = useCallback(
+    newLimit => updateNetworkTable({ networkType: type, tableType, updates: { limit: newLimit } }),
+    [updateNetworkTable, type, tableType]
+  );
+
+  return (
+    <PaginatedTable
+      activePage={activePage}
+      columns={columns}
+      dataTestSubj={`table-${tableType}`}
+      headerCount={totalCount}
+      headerTitle={headerTitle}
+      headerUnit={i18n.UNIT(totalCount)}
+      id={id}
+      isInspect={isInspect}
+      itemsPerRow={rowItems}
+      limit={limit}
+      loading={loading}
+      loadPage={loadPage}
+      onChange={onChange}
+      pageOfItems={data}
+      showMorePagesIndicator={showMorePagesIndicator}
+      sorting={{ field, direction: sort.direction }}
+      totalCount={fakeTotalCount}
+      updateActivePage={updateActivePage}
+      updateLimitPagination={updateLimitPagination}
+    />
+  );
+};
+
+const makeMapStateToProps = () => {
+  const getTopNFlowSelector = networkSelectors.topNFlowSelector();
+  return (state: State, { type, flowTargeted }: OwnProps) =>
+    getTopNFlowSelector(state, type, flowTargeted);
+};
+
+const mapDispatchToProps = {
+  updateNetworkTable: networkActions.updateNetworkTable,
+};
+
+const connector = connect(makeMapStateToProps, mapDispatchToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export const NetworkTopNFlowTable = connector(React.memo(NetworkTopNFlowTableComponent));
diff --git a/x-pack/plugins/siem/public/network/components/network_top_n_flow_table/mock.ts b/x-pack/plugins/siem/public/network/components/network_top_n_flow_table/mock.ts
new file mode 100644
index 00000000000000..bd21d78ba77c5d
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/network_top_n_flow_table/mock.ts
@@ -0,0 +1,86 @@
+/*
+ * 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 { NetworkTopNFlowData, FlowTargetSourceDest } from '../../../graphql/types';
+
+export const mockData: { NetworkTopNFlow: NetworkTopNFlowData } = {
+  NetworkTopNFlow: {
+    totalCount: 524,
+    edges: [
+      {
+        node: {
+          source: {
+            autonomous_system: {
+              name: 'Google, Inc',
+              number: 15169,
+            },
+            domain: ['test.domain.com'],
+            flows: 12345,
+            destination_ips: 12,
+            ip: '8.8.8.8',
+            location: {
+              geo: {
+                continent_name: ['North America'],
+                country_name: null,
+                country_iso_code: ['US'],
+                city_name: ['Mountain View'],
+                region_iso_code: ['US-CA'],
+                region_name: ['California'],
+              },
+              flowTarget: FlowTargetSourceDest.source,
+            },
+          },
+          destination: null,
+          network: {
+            bytes_in: 3826633497,
+            bytes_out: 1083495734,
+          },
+        },
+        cursor: {
+          value: '8.8.8.8',
+        },
+      },
+      {
+        node: {
+          source: {
+            autonomous_system: {
+              name: 'TM Net, Internet Service Provider',
+              number: 4788,
+            },
+            domain: ['test.domain.net', 'test.old.domain.net'],
+            flows: 12345,
+            destination_ips: 12,
+            ip: '9.9.9.9',
+            location: {
+              geo: {
+                continent_name: ['Asia'],
+                country_name: null,
+                country_iso_code: ['MY'],
+                city_name: ['Petaling Jaya'],
+                region_iso_code: ['MY-10'],
+                region_name: ['Selangor'],
+              },
+              flowTarget: FlowTargetSourceDest.source,
+            },
+          },
+          destination: null,
+          network: {
+            bytes_in: 3826633497,
+            bytes_out: 1083495734,
+          },
+        },
+        cursor: {
+          value: '9.9.9.9',
+        },
+      },
+    ],
+    pageInfo: {
+      activePage: 1,
+      fakeTotalCount: 50,
+      showMorePagesIndicator: true,
+    },
+  },
+};
diff --git a/x-pack/plugins/siem/public/components/page/network/network_top_n_flow_table/translations.ts b/x-pack/plugins/siem/public/network/components/network_top_n_flow_table/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/network/network_top_n_flow_table/translations.ts
rename to x-pack/plugins/siem/public/network/components/network_top_n_flow_table/translations.ts
diff --git a/x-pack/plugins/siem/public/components/port/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/network/components/port/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/port/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/network/components/port/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/network/components/port/index.test.tsx b/x-pack/plugins/siem/public/network/components/port/index.test.tsx
new file mode 100644
index 00000000000000..1f78f1d96cdaef
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/port/index.test.tsx
@@ -0,0 +1,71 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import React from 'react';
+
+import { TestProviders } from '../../../common/mock/test_providers';
+import { useMountAppended } from '../../../common/utils/use_mount_appended';
+
+import { Port } from '.';
+
+describe('Port', () => {
+  const mount = useMountAppended();
+
+  test('renders correctly against snapshot', () => {
+    const wrapper = shallow(
+      <Port contextId="test" eventId="abcd" fieldName="destination.port" value="443" />
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('it renders the port', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <Port contextId="test" eventId="abcd" fieldName="destination.port" value="443" />
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="port"]')
+        .first()
+        .text()
+    ).toEqual('443');
+  });
+
+  test('it hyperlinks links destination.port to an external service that describes the purpose of the port', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <Port contextId="test" eventId="abcd" fieldName="destination.port" value="443" />
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="port-or-service-name-link"]')
+        .first()
+        .props().href
+    ).toEqual(
+      'https://www.iana.org/assignments/service-names-port-numbers/service-names-port-numbers.xhtml?search=443'
+    );
+  });
+
+  test('it renders an external link', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <Port contextId="test" eventId="abcd" fieldName="destination.port" value="443" />
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="external-link-icon"]')
+        .first()
+        .exists()
+    ).toBe(true);
+  });
+});
diff --git a/x-pack/plugins/siem/public/network/components/port/index.tsx b/x-pack/plugins/siem/public/network/components/port/index.tsx
new file mode 100644
index 00000000000000..6f54f11ccfbe14
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/port/index.tsx
@@ -0,0 +1,46 @@
+/*
+ * 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 { DefaultDraggable } from '../../../common/components/draggables';
+import { getEmptyValue } from '../../../common/components/empty_value';
+import { ExternalLinkIcon } from '../../../common/components/external_link_icon';
+import { PortOrServiceNameLink } from '../../../common/components/links';
+
+export const CLIENT_PORT_FIELD_NAME = 'client.port';
+export const DESTINATION_PORT_FIELD_NAME = 'destination.port';
+export const SERVER_PORT_FIELD_NAME = 'server.port';
+export const SOURCE_PORT_FIELD_NAME = 'source.port';
+export const URL_PORT_FIELD_NAME = 'url.port';
+
+export const PORT_NAMES = [
+  CLIENT_PORT_FIELD_NAME,
+  DESTINATION_PORT_FIELD_NAME,
+  SERVER_PORT_FIELD_NAME,
+  SOURCE_PORT_FIELD_NAME,
+  URL_PORT_FIELD_NAME,
+];
+
+export const Port = React.memo<{
+  contextId: string;
+  eventId: string;
+  fieldName: string;
+  value: string | undefined | null;
+}>(({ contextId, eventId, fieldName, value }) => (
+  <DefaultDraggable
+    data-test-subj="port"
+    field={fieldName}
+    id={`port-default-draggable-${contextId}-${eventId}-${fieldName}-${value}`}
+    tooltipContent={fieldName}
+    value={value}
+  >
+    <PortOrServiceNameLink portOrServiceName={value || getEmptyValue()} />
+    <ExternalLinkIcon />
+  </DefaultDraggable>
+));
+
+Port.displayName = 'Port';
diff --git a/x-pack/plugins/siem/public/components/source_destination/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/network/components/source_destination/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/source_destination/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/network/components/source_destination/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/source_destination/country_flag.tsx b/x-pack/plugins/siem/public/network/components/source_destination/country_flag.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/source_destination/country_flag.tsx
rename to x-pack/plugins/siem/public/network/components/source_destination/country_flag.tsx
diff --git a/x-pack/plugins/siem/public/components/source_destination/field_names.ts b/x-pack/plugins/siem/public/network/components/source_destination/field_names.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/source_destination/field_names.ts
rename to x-pack/plugins/siem/public/network/components/source_destination/field_names.ts
diff --git a/x-pack/plugins/siem/public/components/source_destination/geo_fields.tsx b/x-pack/plugins/siem/public/network/components/source_destination/geo_fields.tsx
similarity index 98%
rename from x-pack/plugins/siem/public/components/source_destination/geo_fields.tsx
rename to x-pack/plugins/siem/public/network/components/source_destination/geo_fields.tsx
index baeca10ee0fae6..3618ee40dc8d59 100644
--- a/x-pack/plugins/siem/public/components/source_destination/geo_fields.tsx
+++ b/x-pack/plugins/siem/public/network/components/source_destination/geo_fields.tsx
@@ -9,7 +9,7 @@ import { get, uniq } from 'lodash/fp';
 import React from 'react';
 import styled from 'styled-components';
 
-import { DefaultDraggable } from '../draggables';
+import { DefaultDraggable } from '../../../common/components/draggables';
 
 import { CountryFlag } from './country_flag';
 import { GeoFieldsProps, SourceDestinationType } from './types';
diff --git a/x-pack/plugins/siem/public/network/components/source_destination/index.test.tsx b/x-pack/plugins/siem/public/network/components/source_destination/index.test.tsx
new file mode 100644
index 00000000000000..96545813bbbab3
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/source_destination/index.test.tsx
@@ -0,0 +1,419 @@
+/*
+ * 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 numeral from '@elastic/numeral';
+import { shallow } from 'enzyme';
+import { get } from 'lodash/fp';
+import React from 'react';
+
+import { asArrayIfExists } from '../../../common/lib/helpers';
+import { getMockNetflowData } from '../../../common/mock';
+import { TestProviders } from '../../../common/mock/test_providers';
+import { ID_FIELD_NAME } from '../../../common/components/event_details/event_id';
+import { useMountAppended } from '../../../common/utils/use_mount_appended';
+import { DESTINATION_IP_FIELD_NAME, SOURCE_IP_FIELD_NAME } from '../ip';
+import { DESTINATION_PORT_FIELD_NAME, SOURCE_PORT_FIELD_NAME } from '../port';
+import {
+  DESTINATION_BYTES_FIELD_NAME,
+  DESTINATION_PACKETS_FIELD_NAME,
+  SOURCE_BYTES_FIELD_NAME,
+  SOURCE_PACKETS_FIELD_NAME,
+} from '../source_destination/source_destination_arrows';
+import * as i18n from '../../../timelines/components/timeline/body/renderers/translations';
+
+import { SourceDestination } from '.';
+import {
+  DESTINATION_GEO_CITY_NAME_FIELD_NAME,
+  DESTINATION_GEO_CONTINENT_NAME_FIELD_NAME,
+  DESTINATION_GEO_COUNTRY_ISO_CODE_FIELD_NAME,
+  DESTINATION_GEO_COUNTRY_NAME_FIELD_NAME,
+  DESTINATION_GEO_REGION_NAME_FIELD_NAME,
+  SOURCE_GEO_CITY_NAME_FIELD_NAME,
+  SOURCE_GEO_CONTINENT_NAME_FIELD_NAME,
+  SOURCE_GEO_COUNTRY_ISO_CODE_FIELD_NAME,
+  SOURCE_GEO_COUNTRY_NAME_FIELD_NAME,
+  SOURCE_GEO_REGION_NAME_FIELD_NAME,
+} from './geo_fields';
+import {
+  NETWORK_BYTES_FIELD_NAME,
+  NETWORK_COMMUNITY_ID_FIELD_NAME,
+  NETWORK_DIRECTION_FIELD_NAME,
+  NETWORK_PACKETS_FIELD_NAME,
+  NETWORK_PROTOCOL_FIELD_NAME,
+  NETWORK_TRANSPORT_FIELD_NAME,
+} from './field_names';
+
+const getSourceDestinationInstance = () => (
+  <SourceDestination
+    contextId="test"
+    destinationBytes={asArrayIfExists(get(DESTINATION_BYTES_FIELD_NAME, getMockNetflowData()))}
+    destinationGeoContinentName={asArrayIfExists(
+      get(DESTINATION_GEO_CONTINENT_NAME_FIELD_NAME, getMockNetflowData())
+    )}
+    destinationGeoCountryName={asArrayIfExists(
+      get(DESTINATION_GEO_COUNTRY_NAME_FIELD_NAME, getMockNetflowData())
+    )}
+    destinationGeoCountryIsoCode={asArrayIfExists(
+      get(DESTINATION_GEO_COUNTRY_ISO_CODE_FIELD_NAME, getMockNetflowData())
+    )}
+    destinationGeoRegionName={asArrayIfExists(
+      get(DESTINATION_GEO_REGION_NAME_FIELD_NAME, getMockNetflowData())
+    )}
+    destinationGeoCityName={asArrayIfExists(
+      get(DESTINATION_GEO_CITY_NAME_FIELD_NAME, getMockNetflowData())
+    )}
+    destinationIp={asArrayIfExists(get(DESTINATION_IP_FIELD_NAME, getMockNetflowData()))}
+    destinationPackets={asArrayIfExists(get(DESTINATION_PACKETS_FIELD_NAME, getMockNetflowData()))}
+    destinationPort={asArrayIfExists(get(DESTINATION_PORT_FIELD_NAME, getMockNetflowData()))}
+    eventId={get(ID_FIELD_NAME, getMockNetflowData())}
+    networkBytes={asArrayIfExists(get(NETWORK_BYTES_FIELD_NAME, getMockNetflowData()))}
+    networkCommunityId={asArrayIfExists(get(NETWORK_COMMUNITY_ID_FIELD_NAME, getMockNetflowData()))}
+    networkDirection={asArrayIfExists(get(NETWORK_DIRECTION_FIELD_NAME, getMockNetflowData()))}
+    networkPackets={asArrayIfExists(get(NETWORK_PACKETS_FIELD_NAME, getMockNetflowData()))}
+    networkProtocol={asArrayIfExists(get(NETWORK_PROTOCOL_FIELD_NAME, getMockNetflowData()))}
+    sourceBytes={asArrayIfExists(get(SOURCE_BYTES_FIELD_NAME, getMockNetflowData()))}
+    sourceGeoContinentName={asArrayIfExists(
+      get(SOURCE_GEO_CONTINENT_NAME_FIELD_NAME, getMockNetflowData())
+    )}
+    sourceGeoCountryName={asArrayIfExists(
+      get(SOURCE_GEO_COUNTRY_NAME_FIELD_NAME, getMockNetflowData())
+    )}
+    sourceGeoCountryIsoCode={asArrayIfExists(
+      get(SOURCE_GEO_COUNTRY_ISO_CODE_FIELD_NAME, getMockNetflowData())
+    )}
+    sourceGeoRegionName={asArrayIfExists(
+      get(SOURCE_GEO_REGION_NAME_FIELD_NAME, getMockNetflowData())
+    )}
+    sourceGeoCityName={asArrayIfExists(get(SOURCE_GEO_CITY_NAME_FIELD_NAME, getMockNetflowData()))}
+    sourceIp={asArrayIfExists(get(SOURCE_IP_FIELD_NAME, getMockNetflowData()))}
+    sourcePackets={asArrayIfExists(get(SOURCE_PACKETS_FIELD_NAME, getMockNetflowData()))}
+    sourcePort={asArrayIfExists(get(SOURCE_PORT_FIELD_NAME, getMockNetflowData()))}
+    transport={asArrayIfExists(get(NETWORK_TRANSPORT_FIELD_NAME, getMockNetflowData()))}
+  />
+);
+
+describe('SourceDestination', () => {
+  const mount = useMountAppended();
+
+  test('renders correctly against snapshot', () => {
+    const wrapper = shallow(<div>{getSourceDestinationInstance()}</div>);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('it renders a destination label', () => {
+    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="destination-label"]')
+        .first()
+        .text()
+    ).toEqual(i18n.DESTINATION);
+  });
+
+  test('it renders destination.bytes', () => {
+    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="destination-bytes"]')
+        .first()
+        .text()
+    ).toEqual('40B');
+  });
+
+  test('it renders percent destination.bytes', () => {
+    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
+    const destinationBytes = asArrayIfExists(
+      get(DESTINATION_BYTES_FIELD_NAME, getMockNetflowData())
+    );
+    const sumBytes = asArrayIfExists(get(NETWORK_BYTES_FIELD_NAME, getMockNetflowData()));
+    let percent = '';
+    if (destinationBytes != null && sumBytes != null) {
+      percent = `(${numeral((destinationBytes[0] / sumBytes[0]) * 100).format('0.00')}%)`;
+    }
+
+    expect(
+      wrapper
+        .find('[data-test-subj="destination-bytes-percent"]')
+        .first()
+        .text()
+    ).toEqual(percent);
+  });
+
+  test('it renders destination.geo.continent_name', () => {
+    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="destination.geo.continent_name"]')
+        .first()
+        .text()
+    ).toEqual('North America');
+  });
+
+  test('it renders destination.geo.country_name', () => {
+    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="destination.geo.country_name"]')
+        .first()
+        .text()
+    ).toEqual('United States');
+  });
+
+  test('it renders destination.geo.country_iso_code', () => {
+    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="destination.geo.country_iso_code"]')
+        .first()
+        .text()
+    ).toEqual('US');
+  });
+
+  test('it renders destination.geo.region_name', () => {
+    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="destination.geo.region_name"]')
+        .first()
+        .text()
+    ).toEqual('New York');
+  });
+
+  test('it renders destination.geo.city_name', () => {
+    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="destination.geo.city_name"]')
+        .first()
+        .text()
+    ).toEqual('New York');
+  });
+
+  test('it renders the destination ip and port, separated with a colon', () => {
+    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="destination-ip-and-port"]')
+        .first()
+        .text()
+    ).toEqual('10.1.2.3:80');
+  });
+
+  test('it renders destination.packets', () => {
+    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="destination-packets"]')
+        .first()
+        .text()
+    ).toEqual('1 pkts');
+  });
+
+  test('it hyperlinks links destination.port to an external service that describes the purpose of the port', () => {
+    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="destination-ip-and-port"]')
+        .find('[data-test-subj="port-or-service-name-link"]')
+        .first()
+        .props().href
+    ).toEqual(
+      'https://www.iana.org/assignments/service-names-port-numbers/service-names-port-numbers.xhtml?search=80'
+    );
+  });
+
+  test('it renders network.bytes', () => {
+    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="network-bytes"]')
+        .first()
+        .text()
+    ).toEqual('100B');
+  });
+
+  test('it renders network.community_id', () => {
+    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="network-community-id"]')
+        .first()
+        .text()
+    ).toEqual('we.live.in.a');
+  });
+
+  test('it renders network.direction', () => {
+    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="network-direction"]')
+        .first()
+        .text()
+    ).toEqual('outgoing');
+  });
+
+  test('it renders network.packets', () => {
+    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="network-packets"]')
+        .first()
+        .text()
+    ).toEqual('3 pkts');
+  });
+
+  test('it renders network.protocol', () => {
+    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="network-protocol"]')
+        .first()
+        .text()
+    ).toEqual('http');
+  });
+
+  test('it renders a source label', () => {
+    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="source-label"]')
+        .first()
+        .text()
+    ).toEqual(i18n.SOURCE);
+  });
+
+  test('it renders source.bytes', () => {
+    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="source-bytes"]')
+        .first()
+        .text()
+    ).toEqual('60B');
+  });
+
+  test('it renders percent source.bytes', () => {
+    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
+    const sourceBytes = asArrayIfExists(get(SOURCE_BYTES_FIELD_NAME, getMockNetflowData()));
+    const sumBytes = asArrayIfExists(get(NETWORK_BYTES_FIELD_NAME, getMockNetflowData()));
+    let percent = '';
+    if (sourceBytes != null && sumBytes != null) {
+      percent = `(${numeral((sourceBytes[0] / sumBytes[0]) * 100).format('0.00')}%)`;
+    }
+
+    expect(
+      wrapper
+        .find('[data-test-subj="source-bytes-percent"]')
+        .first()
+        .text()
+    ).toEqual(percent);
+  });
+
+  test('it renders source.geo.continent_name', () => {
+    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="source.geo.continent_name"]')
+        .first()
+        .text()
+    ).toEqual('North America');
+  });
+
+  test('it renders source.geo.country_name', () => {
+    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="source.geo.country_name"]')
+        .first()
+        .text()
+    ).toEqual('United States');
+  });
+
+  test('it renders source.geo.country_iso_code', () => {
+    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="source.geo.country_iso_code"]')
+        .first()
+        .text()
+    ).toEqual('US');
+  });
+
+  test('it renders source.geo.region_name', () => {
+    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="source.geo.region_name"]')
+        .first()
+        .text()
+    ).toEqual('Georgia');
+  });
+
+  test('it renders source.geo.city_name', () => {
+    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="source.geo.city_name"]')
+        .first()
+        .text()
+    ).toEqual('Atlanta');
+  });
+
+  test('it renders the source ip and port, separated with a colon', () => {
+    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="source-ip-and-port"]')
+        .first()
+        .text()
+    ).toEqual('192.168.1.2:9987');
+  });
+
+  test('it renders source.packets', () => {
+    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="source-packets"]')
+        .first()
+        .text()
+    ).toEqual('2 pkts');
+  });
+
+  test('it renders network.transport', () => {
+    const wrapper = mount(<TestProviders>{getSourceDestinationInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="network-transport"]')
+        .first()
+        .text()
+    ).toEqual('tcp');
+  });
+});
diff --git a/x-pack/plugins/siem/public/components/source_destination/index.tsx b/x-pack/plugins/siem/public/network/components/source_destination/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/source_destination/index.tsx
rename to x-pack/plugins/siem/public/network/components/source_destination/index.tsx
diff --git a/x-pack/plugins/siem/public/components/source_destination/ip_with_port.tsx b/x-pack/plugins/siem/public/network/components/source_destination/ip_with_port.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/source_destination/ip_with_port.tsx
rename to x-pack/plugins/siem/public/network/components/source_destination/ip_with_port.tsx
diff --git a/x-pack/plugins/siem/public/components/source_destination/label.tsx b/x-pack/plugins/siem/public/network/components/source_destination/label.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/source_destination/label.tsx
rename to x-pack/plugins/siem/public/network/components/source_destination/label.tsx
diff --git a/x-pack/plugins/siem/public/network/components/source_destination/network.tsx b/x-pack/plugins/siem/public/network/components/source_destination/network.tsx
new file mode 100644
index 00000000000000..cb1f72bca02c61
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/source_destination/network.tsx
@@ -0,0 +1,140 @@
+/*
+ * 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 { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import { uniq } from 'lodash/fp';
+import React from 'react';
+import styled from 'styled-components';
+
+import { DirectionBadge } from '../direction';
+import { DefaultDraggable, DraggableBadge } from '../../../common/components/draggables';
+
+import * as i18n from './translations';
+import {
+  NETWORK_BYTES_FIELD_NAME,
+  NETWORK_COMMUNITY_ID_FIELD_NAME,
+  NETWORK_PACKETS_FIELD_NAME,
+  NETWORK_PROTOCOL_FIELD_NAME,
+  NETWORK_TRANSPORT_FIELD_NAME,
+} from './field_names';
+import { PreferenceFormattedBytes } from '../../../common/components/formatted_bytes';
+
+const EuiFlexItemMarginRight = styled(EuiFlexItem)`
+  margin-right: 3px;
+`;
+
+EuiFlexItemMarginRight.displayName = 'EuiFlexItemMarginRight';
+
+const Stats = styled(EuiText)`
+  margin: 0 5px;
+`;
+
+Stats.displayName = 'Stats';
+
+/**
+ * Renders a row of draggable badges containing fields from the
+ * `Network` category of fields
+ */
+export const Network = React.memo<{
+  bytes?: string[] | null;
+  communityId?: string[] | null;
+  contextId: string;
+  direction?: string[] | null;
+  eventId: string;
+  packets?: string[] | null;
+  protocol?: string[] | null;
+  transport?: string[] | null;
+}>(({ bytes, communityId, contextId, direction, eventId, packets, protocol, transport }) => (
+  <EuiFlexGroup alignItems="center" justifyContent="center" gutterSize="none">
+    {direction != null
+      ? uniq(direction).map(dir => (
+          <EuiFlexItemMarginRight grow={false} key={dir}>
+            <DirectionBadge contextId={contextId} eventId={eventId} direction={dir} />
+          </EuiFlexItemMarginRight>
+        ))
+      : null}
+
+    {protocol != null
+      ? uniq(protocol).map(proto => (
+          <EuiFlexItemMarginRight grow={false} key={proto}>
+            <DraggableBadge
+              contextId={contextId}
+              data-test-subj="network-protocol"
+              eventId={eventId}
+              field={NETWORK_PROTOCOL_FIELD_NAME}
+              value={proto}
+            />
+          </EuiFlexItemMarginRight>
+        ))
+      : null}
+
+    {bytes != null
+      ? uniq(bytes).map(b =>
+          !isNaN(Number(b)) ? (
+            <EuiFlexItemMarginRight grow={false} key={b}>
+              <DefaultDraggable
+                field={NETWORK_BYTES_FIELD_NAME}
+                id={`network-default-draggable-${contextId}-${eventId}-${NETWORK_BYTES_FIELD_NAME}-${b}`}
+                value={b}
+              >
+                <Stats size="xs">
+                  <span data-test-subj="network-bytes">
+                    <PreferenceFormattedBytes value={b} />
+                  </span>
+                </Stats>
+              </DefaultDraggable>
+            </EuiFlexItemMarginRight>
+          ) : null
+        )
+      : null}
+
+    {packets != null
+      ? uniq(packets).map(p => (
+          <EuiFlexItemMarginRight grow={false} key={p}>
+            <DefaultDraggable
+              field={NETWORK_PACKETS_FIELD_NAME}
+              id={`network-default-draggable-${contextId}-${eventId}-${NETWORK_PACKETS_FIELD_NAME}-${p}`}
+              value={p}
+            >
+              <Stats size="xs">
+                <span data-test-subj="network-packets">{`${p} ${i18n.PACKETS}`}</span>
+              </Stats>
+            </DefaultDraggable>
+          </EuiFlexItemMarginRight>
+        ))
+      : null}
+
+    {transport != null
+      ? uniq(transport).map(trans => (
+          <EuiFlexItemMarginRight grow={false} key={trans}>
+            <DraggableBadge
+              contextId={contextId}
+              data-test-subj="network-transport"
+              eventId={eventId}
+              field={NETWORK_TRANSPORT_FIELD_NAME}
+              value={trans}
+            />
+          </EuiFlexItemMarginRight>
+        ))
+      : null}
+
+    {communityId != null
+      ? uniq(communityId).map(trans => (
+          <EuiFlexItem grow={false} key={trans}>
+            <DraggableBadge
+              contextId={contextId}
+              data-test-subj="network-community-id"
+              eventId={eventId}
+              field={NETWORK_COMMUNITY_ID_FIELD_NAME}
+              value={trans}
+            />
+          </EuiFlexItem>
+        ))
+      : null}
+  </EuiFlexGroup>
+));
+
+Network.displayName = 'Network';
diff --git a/x-pack/plugins/siem/public/components/source_destination/source_destination_arrows.tsx b/x-pack/plugins/siem/public/network/components/source_destination/source_destination_arrows.tsx
similarity index 98%
rename from x-pack/plugins/siem/public/components/source_destination/source_destination_arrows.tsx
rename to x-pack/plugins/siem/public/network/components/source_destination/source_destination_arrows.tsx
index 005ebc14dcdcc6..95cc76a349c177 100644
--- a/x-pack/plugins/siem/public/components/source_destination/source_destination_arrows.tsx
+++ b/x-pack/plugins/siem/public/network/components/source_destination/source_destination_arrows.tsx
@@ -16,8 +16,8 @@ import {
   getPercent,
   hasOneValue,
 } from '../arrows/helpers';
-import { DefaultDraggable } from '../draggables';
-import { PreferenceFormattedBytes } from '../formatted_bytes';
+import { DefaultDraggable } from '../../../common/components/draggables';
+import { PreferenceFormattedBytes } from '../../../common/components/formatted_bytes';
 
 import * as i18n from './translations';
 
diff --git a/x-pack/plugins/siem/public/components/source_destination/source_destination_ip.test.tsx b/x-pack/plugins/siem/public/network/components/source_destination/source_destination_ip.test.tsx
similarity index 99%
rename from x-pack/plugins/siem/public/components/source_destination/source_destination_ip.test.tsx
rename to x-pack/plugins/siem/public/network/components/source_destination/source_destination_ip.test.tsx
index 60ab59c3796ff0..18459352f89f05 100644
--- a/x-pack/plugins/siem/public/components/source_destination/source_destination_ip.test.tsx
+++ b/x-pack/plugins/siem/public/network/components/source_destination/source_destination_ip.test.tsx
@@ -7,14 +7,14 @@
 import { get } from 'lodash/fp';
 import React from 'react';
 
-import { asArrayIfExists } from '../../lib/helpers';
-import { getMockNetflowData } from '../../mock';
-import { TestProviders } from '../../mock/test_providers';
-import { ID_FIELD_NAME } from '../event_details/event_id';
+import { asArrayIfExists } from '../../../common/lib/helpers';
+import { getMockNetflowData } from '../../../common/mock';
+import { TestProviders } from '../../../common/mock/test_providers';
+import { ID_FIELD_NAME } from '../../../common/components/event_details/event_id';
 import { DESTINATION_IP_FIELD_NAME, SOURCE_IP_FIELD_NAME } from '../ip';
 import { DESTINATION_PORT_FIELD_NAME, SOURCE_PORT_FIELD_NAME } from '../port';
-import * as i18n from '../timeline/body/renderers/translations';
-import { useMountAppended } from '../../utils/use_mount_appended';
+import * as i18n from '../../../timelines/components/timeline/body/renderers/translations';
+import { useMountAppended } from '../../../common/utils/use_mount_appended';
 
 import {
   getPorts,
diff --git a/x-pack/plugins/siem/public/components/source_destination/source_destination_ip.tsx b/x-pack/plugins/siem/public/network/components/source_destination/source_destination_ip.tsx
similarity index 98%
rename from x-pack/plugins/siem/public/components/source_destination/source_destination_ip.tsx
rename to x-pack/plugins/siem/public/network/components/source_destination/source_destination_ip.tsx
index 62f01dfc020f5a..4a242961d91fda 100644
--- a/x-pack/plugins/siem/public/components/source_destination/source_destination_ip.tsx
+++ b/x-pack/plugins/siem/public/network/components/source_destination/source_destination_ip.tsx
@@ -11,7 +11,7 @@ import deepEqual from 'fast-deep-equal';
 
 import { DESTINATION_IP_FIELD_NAME, SOURCE_IP_FIELD_NAME } from '../ip';
 import { DESTINATION_PORT_FIELD_NAME, SOURCE_PORT_FIELD_NAME, Port } from '../port';
-import * as i18n from '../timeline/body/renderers/translations';
+import * as i18n from '../../../timelines/components/timeline/body/renderers/translations';
 
 import { GeoFields } from './geo_fields';
 import { IpWithPort } from './ip_with_port';
diff --git a/x-pack/plugins/siem/public/components/source_destination/source_destination_with_arrows.tsx b/x-pack/plugins/siem/public/network/components/source_destination/source_destination_with_arrows.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/source_destination/source_destination_with_arrows.tsx
rename to x-pack/plugins/siem/public/network/components/source_destination/source_destination_with_arrows.tsx
diff --git a/x-pack/plugins/siem/public/components/source_destination/translations.ts b/x-pack/plugins/siem/public/network/components/source_destination/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/source_destination/translations.ts
rename to x-pack/plugins/siem/public/network/components/source_destination/translations.ts
diff --git a/x-pack/plugins/siem/public/components/source_destination/types.ts b/x-pack/plugins/siem/public/network/components/source_destination/types.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/source_destination/types.ts
rename to x-pack/plugins/siem/public/network/components/source_destination/types.ts
diff --git a/x-pack/plugins/siem/public/components/page/network/tls_table/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/network/components/tls_table/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/network/tls_table/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/network/components/tls_table/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/network/components/tls_table/columns.tsx b/x-pack/plugins/siem/public/network/components/tls_table/columns.tsx
new file mode 100644
index 00000000000000..5a6317291430ec
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/tls_table/columns.tsx
@@ -0,0 +1,102 @@
+/*
+ * 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.
+ */
+
+/* eslint-disable react/display-name */
+
+import React from 'react';
+import moment from 'moment';
+import { TlsNode } from '../../../graphql/types';
+import { Columns } from '../../../common/components/paginated_table';
+
+import {
+  getRowItemDraggables,
+  getRowItemDraggable,
+} from '../../../common/components/tables/helpers';
+import { LocalizedDateTooltip } from '../../../common/components/localized_date_tooltip';
+import { PreferenceFormattedDate } from '../../../common/components/formatted_date';
+
+import * as i18n from './translations';
+
+export type TlsColumns = [
+  Columns<TlsNode>,
+  Columns<TlsNode>,
+  Columns<TlsNode['_id']>,
+  Columns<TlsNode>,
+  Columns<TlsNode>
+];
+
+export const getTlsColumns = (tableId: string): TlsColumns => [
+  {
+    field: 'node',
+    name: i18n.ISSUER,
+    truncateText: false,
+    hideForMobile: false,
+    sortable: false,
+    render: ({ _id, issuers }) =>
+      getRowItemDraggables({
+        rowItems: issuers,
+        attrName: 'tls.server.issuer',
+        idPrefix: `${tableId}-${_id}-table-issuers`,
+      }),
+  },
+  {
+    field: 'node',
+    name: i18n.SUBJECT,
+    truncateText: false,
+    hideForMobile: false,
+    sortable: false,
+    render: ({ _id, subjects }) =>
+      getRowItemDraggables({
+        rowItems: subjects,
+        attrName: 'tls.server.subject',
+        idPrefix: `${tableId}-${_id}-table-subjects`,
+      }),
+  },
+  {
+    field: 'node._id',
+    name: i18n.SHA1_FINGERPRINT,
+    truncateText: false,
+    hideForMobile: false,
+    sortable: true,
+    render: sha1 =>
+      getRowItemDraggable({
+        rowItem: sha1,
+        attrName: 'tls.server_certificate.fingerprint.sha1',
+        idPrefix: `${tableId}-${sha1}-table-sha1`,
+      }),
+  },
+  {
+    field: 'node',
+    name: i18n.JA3_FINGERPRINT,
+    truncateText: false,
+    hideForMobile: false,
+    sortable: false,
+    render: ({ _id, ja3 }) =>
+      getRowItemDraggables({
+        rowItems: ja3,
+        attrName: 'tls.fingerprints.ja3.hash',
+        idPrefix: `${tableId}-${_id}-table-ja3`,
+      }),
+  },
+  {
+    field: 'node',
+    name: i18n.VALID_UNTIL,
+    truncateText: false,
+    hideForMobile: false,
+    sortable: false,
+    render: ({ _id, notAfter }) =>
+      getRowItemDraggables({
+        rowItems: notAfter,
+        attrName: 'tls.server_certificate.not_after',
+        idPrefix: `${tableId}-${_id}-table-notAfter`,
+        render: validUntil => (
+          <LocalizedDateTooltip date={moment(new Date(validUntil)).toDate()}>
+            <PreferenceFormattedDate value={new Date(validUntil)} />
+          </LocalizedDateTooltip>
+        ),
+      }),
+  },
+];
diff --git a/x-pack/plugins/siem/public/network/components/tls_table/index.test.tsx b/x-pack/plugins/siem/public/network/components/tls_table/index.test.tsx
new file mode 100644
index 00000000000000..7f2cfc8ba9ba4a
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/tls_table/index.test.tsx
@@ -0,0 +1,102 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import { getOr } from 'lodash/fp';
+import React from 'react';
+import { MockedProvider } from 'react-apollo/test-utils';
+import { Provider as ReduxStoreProvider } from 'react-redux';
+
+import {
+  apolloClientObservable,
+  mockGlobalState,
+  TestProviders,
+  SUB_PLUGINS_REDUCER,
+} from '../../../common/mock';
+import { useMountAppended } from '../../../common/utils/use_mount_appended';
+import { createStore, State } from '../../../common/store';
+import { networkModel } from '../../store';
+import { TlsTable } from '.';
+import { mockTlsData } from './mock';
+
+describe('Tls Table Component', () => {
+  const loadPage = jest.fn();
+  const state: State = mockGlobalState;
+
+  let store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable);
+  const mount = useMountAppended();
+
+  beforeEach(() => {
+    store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable);
+  });
+
+  describe('Rendering', () => {
+    test('it renders the default Domains table', () => {
+      const wrapper = shallow(
+        <ReduxStoreProvider store={store}>
+          <TlsTable
+            data={mockTlsData.edges}
+            fakeTotalCount={getOr(50, 'fakeTotalCount', mockTlsData.pageInfo)}
+            id="tls"
+            isInspect={false}
+            loading={false}
+            loadPage={loadPage}
+            showMorePagesIndicator={getOr(false, 'showMorePagesIndicator', mockTlsData.pageInfo)}
+            totalCount={1}
+            type={networkModel.NetworkType.details}
+          />
+        </ReduxStoreProvider>
+      );
+
+      expect(wrapper.find('Connect(TlsTableComponent)')).toMatchSnapshot();
+    });
+  });
+
+  describe('Sorting on Table', () => {
+    test('when you click on the column header, you should show the sorting icon', () => {
+      const wrapper = mount(
+        <MockedProvider>
+          <TestProviders store={store}>
+            <TlsTable
+              data={mockTlsData.edges}
+              fakeTotalCount={getOr(50, 'fakeTotalCount', mockTlsData.pageInfo)}
+              id="tls"
+              isInspect={false}
+              loading={false}
+              loadPage={loadPage}
+              showMorePagesIndicator={getOr(false, 'showMorePagesIndicator', mockTlsData.pageInfo)}
+              totalCount={1}
+              type={networkModel.NetworkType.details}
+            />
+          </TestProviders>
+        </MockedProvider>
+      );
+      expect(store.getState().network.details.queries!.tls.sort).toEqual({
+        direction: 'desc',
+        field: '_id',
+      });
+
+      wrapper
+        .find('.euiTable thead tr th button')
+        .first()
+        .simulate('click');
+
+      wrapper.update();
+
+      expect(store.getState().network.details.queries!.tls.sort).toEqual({
+        direction: 'asc',
+        field: '_id',
+      });
+
+      expect(
+        wrapper
+          .find('.euiTable thead tr th button')
+          .first()
+          .text()
+      ).toEqual('SHA1 fingerprintClick to sort in descending order');
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/network/components/tls_table/index.tsx b/x-pack/plugins/siem/public/network/components/tls_table/index.tsx
new file mode 100644
index 00000000000000..34bde8f42eaf90
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/tls_table/index.tsx
@@ -0,0 +1,168 @@
+/*
+ * 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, { useCallback, useMemo } from 'react';
+import { connect, ConnectedProps } from 'react-redux';
+import deepEqual from 'fast-deep-equal';
+
+import { networkActions, networkModel, networkSelectors } from '../../store';
+import { TlsEdges, TlsSortField, TlsFields, Direction } from '../../../graphql/types';
+import { State } from '../../../common/store';
+import {
+  Criteria,
+  ItemsPerRow,
+  PaginatedTable,
+  SortingBasicTable,
+} from '../../../common/components/paginated_table';
+import { getTlsColumns } from './columns';
+import * as i18n from './translations';
+
+interface OwnProps {
+  data: TlsEdges[];
+  fakeTotalCount: number;
+  id: string;
+  isInspect: boolean;
+  loading: boolean;
+  loadPage: (newActivePage: number) => void;
+  showMorePagesIndicator: boolean;
+  totalCount: number;
+  type: networkModel.NetworkType;
+}
+
+type TlsTableProps = OwnProps & PropsFromRedux;
+
+const rowItems: ItemsPerRow[] = [
+  {
+    text: i18n.ROWS_5,
+    numberOfRow: 5,
+  },
+  {
+    text: i18n.ROWS_10,
+    numberOfRow: 10,
+  },
+];
+
+export const tlsTableId = 'tls-table';
+
+const TlsTableComponent = React.memo<TlsTableProps>(
+  ({
+    activePage,
+    data,
+    fakeTotalCount,
+    id,
+    isInspect,
+    limit,
+    loading,
+    loadPage,
+    showMorePagesIndicator,
+    sort,
+    totalCount,
+    type,
+    updateNetworkTable,
+  }) => {
+    const tableType: networkModel.TopTlsTableType =
+      type === networkModel.NetworkType.page
+        ? networkModel.NetworkTableType.tls
+        : networkModel.IpDetailsTableType.tls;
+
+    const updateLimitPagination = useCallback(
+      newLimit =>
+        updateNetworkTable({
+          networkType: type,
+          tableType,
+          updates: { limit: newLimit },
+        }),
+      [type, updateNetworkTable, tableType]
+    );
+
+    const updateActivePage = useCallback(
+      newPage =>
+        updateNetworkTable({
+          networkType: type,
+          tableType,
+          updates: { activePage: newPage },
+        }),
+      [type, updateNetworkTable, tableType]
+    );
+
+    const onChange = useCallback(
+      (criteria: Criteria) => {
+        if (criteria.sort != null) {
+          const splitField = criteria.sort.field.split('.');
+          const newTlsSort: TlsSortField = {
+            field: getSortFromString(splitField[splitField.length - 1]),
+            direction: criteria.sort.direction as Direction,
+          };
+          if (!deepEqual(newTlsSort, sort)) {
+            updateNetworkTable({
+              networkType: type,
+              tableType,
+              updates: { sort: newTlsSort },
+            });
+          }
+        }
+      },
+      [sort, type, tableType, updateNetworkTable]
+    );
+
+    const columns = useMemo(() => getTlsColumns(tlsTableId), [tlsTableId]);
+
+    return (
+      <PaginatedTable
+        activePage={activePage}
+        columns={columns}
+        dataTestSubj={`table-${tableType}`}
+        showMorePagesIndicator={showMorePagesIndicator}
+        headerCount={totalCount}
+        headerTitle={i18n.TRANSPORT_LAYER_SECURITY}
+        headerUnit={i18n.UNIT(totalCount)}
+        id={id}
+        isInspect={isInspect}
+        itemsPerRow={rowItems}
+        limit={limit}
+        loading={loading}
+        loadPage={loadPage}
+        onChange={onChange}
+        pageOfItems={data}
+        sorting={getSortField(sort)}
+        totalCount={fakeTotalCount}
+        updateActivePage={updateActivePage}
+        updateLimitPagination={updateLimitPagination}
+      />
+    );
+  }
+);
+
+TlsTableComponent.displayName = 'TlsTableComponent';
+
+const makeMapStateToProps = () => {
+  const getTlsSelector = networkSelectors.tlsSelector();
+  return (state: State, { type }: OwnProps) => getTlsSelector(state, type);
+};
+
+const mapDispatchToProps = {
+  updateNetworkTable: networkActions.updateNetworkTable,
+};
+
+const connector = connect(makeMapStateToProps, mapDispatchToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export const TlsTable = connector(TlsTableComponent);
+
+const getSortField = (sortField: TlsSortField): SortingBasicTable => ({
+  field: `node.${sortField.field}`,
+  direction: sortField.direction,
+});
+
+const getSortFromString = (sortField: string): TlsFields => {
+  switch (sortField) {
+    case '_id':
+      return TlsFields._id;
+    default:
+      return TlsFields._id;
+  }
+};
diff --git a/x-pack/plugins/siem/public/network/components/tls_table/mock.ts b/x-pack/plugins/siem/public/network/components/tls_table/mock.ts
new file mode 100644
index 00000000000000..a90907eb388545
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/tls_table/mock.ts
@@ -0,0 +1,54 @@
+/*
+ * 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 { TlsData } from '../../../graphql/types';
+
+export const mockTlsData: TlsData = {
+  totalCount: 2,
+  edges: [
+    {
+      node: {
+        _id: '2fe3bdf168af35b9e0ce5dc583bab007c40d47de',
+        subjects: ['*.elastic.co'],
+        ja3: ['7851693188210d3b271aa1713d8c68c2', 'fb4726d465c5f28b84cd6d14cedd13a7'],
+        issuers: ['DigiCert SHA2 Secure Server CA'],
+        notAfter: ['2021-04-22T12:00:00.000Z'],
+      },
+      cursor: {
+        value: '2fe3bdf168af35b9e0ce5dc583bab007c40d47de',
+      },
+    },
+    {
+      node: {
+        _id: '61749734b3246f1584029deb4f5276c64da00ada',
+        subjects: ['api.snapcraft.io'],
+        ja3: ['839868ad711dc55bde0d37a87f14740d'],
+        issuers: ['DigiCert SHA2 Secure Server CA'],
+        notAfter: ['2019-05-22T12:00:00.000Z'],
+      },
+      cursor: {
+        value: '61749734b3246f1584029deb4f5276c64da00ada',
+      },
+    },
+    {
+      node: {
+        _id: '6560d3b7dd001c989b85962fa64beb778cdae47a',
+        subjects: ['changelogs.ubuntu.com'],
+        ja3: ['da12c94da8021bbaf502907ad086e7bc'],
+        issuers: ["Let's Encrypt Authority X3"],
+        notAfter: ['2019-06-27T01:09:59.000Z'],
+      },
+      cursor: {
+        value: '6560d3b7dd001c989b85962fa64beb778cdae47a',
+      },
+    },
+  ],
+  pageInfo: {
+    activePage: 1,
+    fakeTotalCount: 50,
+    showMorePagesIndicator: true,
+  },
+};
diff --git a/x-pack/plugins/siem/public/components/page/network/tls_table/translations.ts b/x-pack/plugins/siem/public/network/components/tls_table/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/network/tls_table/translations.ts
rename to x-pack/plugins/siem/public/network/components/tls_table/translations.ts
diff --git a/x-pack/plugins/siem/public/components/page/network/users_table/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/network/components/users_table/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/network/users_table/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/network/components/users_table/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/network/components/users_table/columns.tsx b/x-pack/plugins/siem/public/network/components/users_table/columns.tsx
new file mode 100644
index 00000000000000..d3ad2cd707ecdd
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/users_table/columns.tsx
@@ -0,0 +1,87 @@
+/*
+ * 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 { FlowTarget, UsersItem } from '../../../graphql/types';
+import { defaultToEmptyTag } from '../../../common/components/empty_value';
+import { Columns } from '../../../common/components/paginated_table';
+
+import * as i18n from './translations';
+import {
+  getRowItemDraggables,
+  getRowItemDraggable,
+} from '../../../common/components/tables/helpers';
+
+export type UsersColumns = [
+  Columns<UsersItem['name']>,
+  Columns<UsersItem['id']>,
+  Columns<UsersItem['groupName']>,
+  Columns<UsersItem['groupId']>,
+  Columns<UsersItem['count']>
+];
+
+export const getUsersColumns = (flowTarget: FlowTarget, tableId: string): UsersColumns => [
+  {
+    field: 'node.user.name',
+    name: i18n.USER_NAME,
+    truncateText: false,
+    hideForMobile: false,
+    sortable: true,
+    render: userName =>
+      getRowItemDraggable({
+        rowItem: userName,
+        attrName: 'user.name',
+        idPrefix: `${tableId}-table-${flowTarget}-user`,
+      }),
+  },
+  {
+    field: 'node.user.id',
+    name: i18n.USER_ID,
+    truncateText: false,
+    hideForMobile: false,
+    sortable: false,
+    render: userIds =>
+      getRowItemDraggables({
+        rowItems: userIds,
+        attrName: 'user.id',
+        idPrefix: `${tableId}-table-${flowTarget}`,
+      }),
+  },
+  {
+    field: 'node.user.groupName',
+    name: i18n.GROUP_NAME,
+    truncateText: false,
+    hideForMobile: false,
+    sortable: false,
+    render: groupNames =>
+      getRowItemDraggables({
+        rowItems: groupNames,
+        attrName: 'user.group.name',
+        idPrefix: `${tableId}-table-${flowTarget}`,
+      }),
+  },
+  {
+    field: 'node.user.groupId',
+    name: i18n.GROUP_ID,
+    truncateText: false,
+    hideForMobile: false,
+    sortable: false,
+    render: groupId =>
+      getRowItemDraggables({
+        rowItems: groupId,
+        attrName: 'user.group.id',
+        idPrefix: `${tableId}-table-${flowTarget}`,
+      }),
+  },
+  {
+    align: 'right',
+    field: 'node.user.count',
+    name: i18n.DOCUMENT_COUNT,
+    truncateText: false,
+    hideForMobile: false,
+    sortable: true,
+    render: docCount => defaultToEmptyTag(docCount),
+  },
+];
diff --git a/x-pack/plugins/siem/public/network/components/users_table/index.test.tsx b/x-pack/plugins/siem/public/network/components/users_table/index.test.tsx
new file mode 100644
index 00000000000000..2597249797da58
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/users_table/index.test.tsx
@@ -0,0 +1,109 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import { getOr } from 'lodash/fp';
+import React from 'react';
+import { MockedProvider } from 'react-apollo/test-utils';
+import { Provider as ReduxStoreProvider } from 'react-redux';
+
+import { FlowTarget } from '../../../graphql/types';
+import {
+  apolloClientObservable,
+  mockGlobalState,
+  TestProviders,
+  SUB_PLUGINS_REDUCER,
+} from '../../../common/mock';
+import { useMountAppended } from '../../../common/utils/use_mount_appended';
+import { createStore, State } from '../../../common/store';
+import { networkModel } from '../../store';
+
+import { UsersTable } from '.';
+import { mockUsersData } from './mock';
+
+describe('Users Table Component', () => {
+  const loadPage = jest.fn();
+  const state: State = mockGlobalState;
+
+  let store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable);
+  const mount = useMountAppended();
+
+  beforeEach(() => {
+    store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable);
+  });
+
+  describe('Rendering', () => {
+    test('it renders the default Users table', () => {
+      const wrapper = shallow(
+        <ReduxStoreProvider store={store}>
+          <UsersTable
+            data={mockUsersData.edges}
+            flowTarget={FlowTarget.source}
+            fakeTotalCount={getOr(50, 'fakeTotalCount', mockUsersData.pageInfo)}
+            id="user"
+            isInspect={false}
+            loading={false}
+            loadPage={loadPage}
+            showMorePagesIndicator={getOr(false, 'showMorePagesIndicator', mockUsersData.pageInfo)}
+            totalCount={1}
+            type={networkModel.NetworkType.details}
+          />
+        </ReduxStoreProvider>
+      );
+
+      expect(wrapper.find('Connect(UsersTableComponent)')).toMatchSnapshot();
+    });
+  });
+
+  describe('Sorting on Table', () => {
+    test('when you click on the column header, you should show the sorting icon', () => {
+      const wrapper = mount(
+        <MockedProvider>
+          <TestProviders store={store}>
+            <UsersTable
+              data={mockUsersData.edges}
+              flowTarget={FlowTarget.source}
+              fakeTotalCount={getOr(50, 'fakeTotalCount', mockUsersData.pageInfo)}
+              id="user"
+              isInspect={false}
+              loading={false}
+              loadPage={loadPage}
+              showMorePagesIndicator={getOr(
+                false,
+                'showMorePagesIndicator',
+                mockUsersData.pageInfo
+              )}
+              totalCount={1}
+              type={networkModel.NetworkType.details}
+            />
+          </TestProviders>
+        </MockedProvider>
+      );
+      expect(store.getState().network.details.queries!.users.sort).toEqual({
+        direction: 'asc',
+        field: 'name',
+      });
+
+      wrapper
+        .find('.euiTable thead tr th button')
+        .first()
+        .simulate('click');
+
+      wrapper.update();
+
+      expect(store.getState().network.details.queries!.users.sort).toEqual({
+        direction: 'desc',
+        field: 'name',
+      });
+      expect(
+        wrapper
+          .find('.euiTable thead tr th button')
+          .first()
+          .text()
+      ).toEqual('UserClick to sort in ascending order');
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/network/components/users_table/index.tsx b/x-pack/plugins/siem/public/network/components/users_table/index.tsx
new file mode 100644
index 00000000000000..5e5bac20141bcc
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/users_table/index.tsx
@@ -0,0 +1,192 @@
+/*
+ * 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, { useCallback, useMemo } from 'react';
+import { connect, ConnectedProps } from 'react-redux';
+import deepEqual from 'fast-deep-equal';
+
+import { networkActions, networkModel, networkSelectors } from '../../store';
+import {
+  Direction,
+  FlowTarget,
+  UsersEdges,
+  UsersFields,
+  UsersSortField,
+} from '../../../graphql/types';
+import { State } from '../../../common/store';
+import {
+  Criteria,
+  ItemsPerRow,
+  PaginatedTable,
+  SortingBasicTable,
+} from '../../../common/components/paginated_table';
+
+import { getUsersColumns } from './columns';
+import * as i18n from './translations';
+import { assertUnreachable } from '../../../common/lib/helpers';
+const tableType = networkModel.IpDetailsTableType.users;
+
+interface OwnProps {
+  data: UsersEdges[];
+  flowTarget: FlowTarget;
+  fakeTotalCount: number;
+  id: string;
+  isInspect: boolean;
+  loading: boolean;
+  loadPage: (newActivePage: number) => void;
+  showMorePagesIndicator: boolean;
+  totalCount: number;
+  type: networkModel.NetworkType;
+}
+
+type UsersTableProps = OwnProps & PropsFromRedux;
+
+const rowItems: ItemsPerRow[] = [
+  {
+    text: i18n.ROWS_5,
+    numberOfRow: 5,
+  },
+  {
+    text: i18n.ROWS_10,
+    numberOfRow: 10,
+  },
+];
+
+export const usersTableId = 'users-table';
+
+const UsersTableComponent = React.memo<UsersTableProps>(
+  ({
+    activePage,
+    data,
+    fakeTotalCount,
+    flowTarget,
+    id,
+    isInspect,
+    limit,
+    loading,
+    loadPage,
+    showMorePagesIndicator,
+    totalCount,
+    type,
+    updateNetworkTable,
+    sort,
+  }) => {
+    const updateLimitPagination = useCallback(
+      newLimit =>
+        updateNetworkTable({
+          networkType: type,
+          tableType,
+          updates: { limit: newLimit },
+        }),
+      [type, updateNetworkTable]
+    );
+
+    const updateActivePage = useCallback(
+      newPage =>
+        updateNetworkTable({
+          networkType: type,
+          tableType,
+          updates: { activePage: newPage },
+        }),
+      [type, updateNetworkTable]
+    );
+
+    const onChange = useCallback(
+      (criteria: Criteria) => {
+        if (criteria.sort != null) {
+          const splitField = criteria.sort.field.split('.');
+          const newUsersSort: UsersSortField = {
+            field: getSortFromString(splitField[splitField.length - 1]),
+            direction: criteria.sort.direction as Direction,
+          };
+          if (!deepEqual(newUsersSort, sort)) {
+            updateNetworkTable({
+              networkType: type,
+              tableType,
+              updates: { sort: newUsersSort },
+            });
+          }
+        }
+      },
+      [sort, type, updateNetworkTable]
+    );
+
+    const columns = useMemo(() => getUsersColumns(flowTarget, usersTableId), [
+      flowTarget,
+      usersTableId,
+    ]);
+
+    return (
+      <PaginatedTable
+        activePage={activePage}
+        columns={columns}
+        dataTestSubj={`table-${tableType}`}
+        showMorePagesIndicator={showMorePagesIndicator}
+        headerCount={totalCount}
+        headerTitle={i18n.USERS}
+        headerUnit={i18n.UNIT(totalCount)}
+        id={id}
+        isInspect={isInspect}
+        itemsPerRow={rowItems}
+        limit={limit}
+        loading={loading}
+        loadPage={loadPage}
+        onChange={onChange}
+        pageOfItems={data}
+        sorting={getSortField(sort)}
+        totalCount={fakeTotalCount}
+        updateActivePage={updateActivePage}
+        updateLimitPagination={updateLimitPagination}
+      />
+    );
+  }
+);
+
+UsersTableComponent.displayName = 'UsersTableComponent';
+
+const makeMapStateToProps = () => {
+  const getUsersSelector = networkSelectors.usersSelector();
+  return (state: State) => ({
+    ...getUsersSelector(state),
+  });
+};
+
+const mapDispatchToProps = {
+  updateNetworkTable: networkActions.updateNetworkTable,
+};
+
+const connector = connect(makeMapStateToProps, mapDispatchToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export const UsersTable = connector(UsersTableComponent);
+
+const getSortField = (sortField: UsersSortField): SortingBasicTable => {
+  switch (sortField.field) {
+    case UsersFields.name:
+      return {
+        field: `node.user.${sortField.field}`,
+        direction: sortField.direction,
+      };
+    case UsersFields.count:
+      return {
+        field: `node.user.${sortField.field}`,
+        direction: sortField.direction,
+      };
+  }
+  return assertUnreachable(sortField.field);
+};
+
+const getSortFromString = (sortField: string): UsersFields => {
+  switch (sortField) {
+    case UsersFields.name.valueOf():
+      return UsersFields.name;
+    case UsersFields.count.valueOf():
+      return UsersFields.count;
+    default:
+      return UsersFields.name;
+  }
+};
diff --git a/x-pack/plugins/siem/public/network/components/users_table/mock.ts b/x-pack/plugins/siem/public/network/components/users_table/mock.ts
new file mode 100644
index 00000000000000..50bef1867aa3b4
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/components/users_table/mock.ts
@@ -0,0 +1,66 @@
+/*
+ * 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 { UsersData } from '../../../graphql/types';
+
+export const mockUsersData: UsersData = {
+  edges: [
+    {
+      node: {
+        _id: '_apt',
+        user: {
+          id: ['104'],
+          name: '_apt',
+          groupId: ['65534'],
+          groupName: ['nogroup'],
+          count: 10,
+        },
+      },
+      cursor: {
+        value: '_apt',
+        tiebreaker: null,
+      },
+    },
+    {
+      node: {
+        _id: 'root',
+        user: {
+          id: ['0'],
+          name: 'root',
+          groupId: ['116', '0'],
+          groupName: ['Debian-exim', 'root'],
+          count: 108,
+        },
+      },
+      cursor: {
+        value: 'root',
+        tiebreaker: null,
+      },
+    },
+    {
+      node: {
+        _id: 'systemd-resolve',
+        user: {
+          id: ['102'],
+          name: 'systemd-resolve',
+          groupId: [],
+          groupName: [],
+          count: 4,
+        },
+      },
+      cursor: {
+        value: 'systemd-resolve',
+        tiebreaker: null,
+      },
+    },
+  ],
+  totalCount: 3,
+  pageInfo: {
+    activePage: 1,
+    fakeTotalCount: 3,
+    showMorePagesIndicator: true,
+  },
+};
diff --git a/x-pack/plugins/siem/public/components/page/network/users_table/translations.ts b/x-pack/plugins/siem/public/network/components/users_table/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/network/users_table/translations.ts
rename to x-pack/plugins/siem/public/network/components/users_table/translations.ts
diff --git a/x-pack/plugins/siem/public/containers/ip_overview/index.gql_query.ts b/x-pack/plugins/siem/public/network/containers/ip_overview/index.gql_query.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/ip_overview/index.gql_query.ts
rename to x-pack/plugins/siem/public/network/containers/ip_overview/index.gql_query.ts
diff --git a/x-pack/plugins/siem/public/network/containers/ip_overview/index.tsx b/x-pack/plugins/siem/public/network/containers/ip_overview/index.tsx
new file mode 100644
index 00000000000000..551ecebf2c05a7
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/containers/ip_overview/index.tsx
@@ -0,0 +1,84 @@
+/*
+ * 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 { getOr } from 'lodash/fp';
+import React from 'react';
+import { Query } from 'react-apollo';
+import { connect, ConnectedProps } from 'react-redux';
+
+import { DEFAULT_INDEX_KEY } from '../../../../common/constants';
+import { GetIpOverviewQuery, IpOverviewData } from '../../../graphql/types';
+import { inputsModel, inputsSelectors, State } from '../../../common/store';
+import { useUiSetting } from '../../../common/lib/kibana';
+import { createFilter, getDefaultFetchPolicy } from '../../../common/containers/helpers';
+import { QueryTemplateProps } from '../../../common/containers/query_template';
+import { networkModel } from '../../store';
+import { ipOverviewQuery } from './index.gql_query';
+
+const ID = 'ipOverviewQuery';
+
+export interface IpOverviewArgs {
+  id: string;
+  inspect: inputsModel.InspectQuery;
+  ipOverviewData: IpOverviewData;
+  loading: boolean;
+  refetch: inputsModel.Refetch;
+}
+
+export interface IpOverviewProps extends QueryTemplateProps {
+  children: (args: IpOverviewArgs) => React.ReactNode;
+  type: networkModel.NetworkType;
+  ip: string;
+}
+
+const IpOverviewComponentQuery = React.memo<IpOverviewProps & PropsFromRedux>(
+  ({ id = ID, isInspected, children, filterQuery, skip, sourceId, ip }) => (
+    <Query<GetIpOverviewQuery.Query, GetIpOverviewQuery.Variables>
+      query={ipOverviewQuery}
+      fetchPolicy={getDefaultFetchPolicy()}
+      notifyOnNetworkStatusChange
+      skip={skip}
+      variables={{
+        sourceId,
+        filterQuery: createFilter(filterQuery),
+        ip,
+        defaultIndex: useUiSetting<string[]>(DEFAULT_INDEX_KEY),
+        inspect: isInspected,
+      }}
+    >
+      {({ data, loading, refetch }) => {
+        const init: IpOverviewData = { host: {} };
+        const ipOverviewData: IpOverviewData = getOr(init, 'source.IpOverview', data);
+        return children({
+          id,
+          inspect: getOr(null, 'source.IpOverview.inspect', data),
+          ipOverviewData,
+          loading,
+          refetch,
+        });
+      }}
+    </Query>
+  )
+);
+
+IpOverviewComponentQuery.displayName = 'IpOverviewComponentQuery';
+
+const makeMapStateToProps = () => {
+  const getQuery = inputsSelectors.globalQueryByIdSelector();
+  const mapStateToProps = (state: State, { id = ID }: IpOverviewProps) => {
+    const { isInspected } = getQuery(state, id);
+    return {
+      isInspected,
+    };
+  };
+  return mapStateToProps;
+};
+
+const connector = connect(makeMapStateToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export const IpOverviewQuery = connector(IpOverviewComponentQuery);
diff --git a/x-pack/plugins/siem/public/containers/kpi_network/index.gql_query.ts b/x-pack/plugins/siem/public/network/containers/kpi_network/index.gql_query.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/kpi_network/index.gql_query.ts
rename to x-pack/plugins/siem/public/network/containers/kpi_network/index.gql_query.ts
diff --git a/x-pack/plugins/siem/public/network/containers/kpi_network/index.tsx b/x-pack/plugins/siem/public/network/containers/kpi_network/index.tsx
new file mode 100644
index 00000000000000..edba8b4c2e65ca
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/containers/kpi_network/index.tsx
@@ -0,0 +1,85 @@
+/*
+ * 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 { getOr } from 'lodash/fp';
+import React from 'react';
+import { Query } from 'react-apollo';
+import { connect, ConnectedProps } from 'react-redux';
+
+import { DEFAULT_INDEX_KEY } from '../../../../common/constants';
+import { GetKpiNetworkQuery, KpiNetworkData } from '../../../graphql/types';
+import { inputsModel, inputsSelectors, State } from '../../../common/store';
+import { useUiSetting } from '../../../common/lib/kibana';
+import { createFilter, getDefaultFetchPolicy } from '../../../common/containers/helpers';
+import { QueryTemplateProps } from '../../../common/containers/query_template';
+
+import { kpiNetworkQuery } from './index.gql_query';
+
+const ID = 'kpiNetworkQuery';
+
+export interface KpiNetworkArgs {
+  id: string;
+  inspect: inputsModel.InspectQuery;
+  kpiNetwork: KpiNetworkData;
+  loading: boolean;
+  refetch: inputsModel.Refetch;
+}
+
+export interface KpiNetworkProps extends QueryTemplateProps {
+  children: (args: KpiNetworkArgs) => React.ReactNode;
+}
+
+const KpiNetworkComponentQuery = React.memo<KpiNetworkProps & PropsFromRedux>(
+  ({ id = ID, children, filterQuery, isInspected, skip, sourceId, startDate, endDate }) => (
+    <Query<GetKpiNetworkQuery.Query, GetKpiNetworkQuery.Variables>
+      query={kpiNetworkQuery}
+      fetchPolicy={getDefaultFetchPolicy()}
+      notifyOnNetworkStatusChange
+      skip={skip}
+      variables={{
+        sourceId,
+        timerange: {
+          interval: '12h',
+          from: startDate!,
+          to: endDate!,
+        },
+        filterQuery: createFilter(filterQuery),
+        defaultIndex: useUiSetting<string[]>(DEFAULT_INDEX_KEY),
+        inspect: isInspected,
+      }}
+    >
+      {({ data, loading, refetch }) => {
+        const kpiNetwork = getOr({}, `source.KpiNetwork`, data);
+        return children({
+          id,
+          inspect: getOr(null, 'source.KpiNetwork.inspect', data),
+          kpiNetwork,
+          loading,
+          refetch,
+        });
+      }}
+    </Query>
+  )
+);
+
+KpiNetworkComponentQuery.displayName = 'KpiNetworkComponentQuery';
+
+const makeMapStateToProps = () => {
+  const getQuery = inputsSelectors.globalQueryByIdSelector();
+  const mapStateToProps = (state: State, { id = ID }: KpiNetworkProps) => {
+    const { isInspected } = getQuery(state, id);
+    return {
+      isInspected,
+    };
+  };
+  return mapStateToProps;
+};
+
+const connector = connect(makeMapStateToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export const KpiNetworkQuery = connector(KpiNetworkComponentQuery);
diff --git a/x-pack/plugins/siem/public/containers/network_dns/index.gql_query.ts b/x-pack/plugins/siem/public/network/containers/network_dns/index.gql_query.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/network_dns/index.gql_query.ts
rename to x-pack/plugins/siem/public/network/containers/network_dns/index.gql_query.ts
diff --git a/x-pack/plugins/siem/public/network/containers/network_dns/index.tsx b/x-pack/plugins/siem/public/network/containers/network_dns/index.tsx
new file mode 100644
index 00000000000000..2bae19ce89aec0
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/containers/network_dns/index.tsx
@@ -0,0 +1,216 @@
+/*
+ * 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 { getOr } from 'lodash/fp';
+import React from 'react';
+import { Query } from 'react-apollo';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+
+import { DocumentNode } from 'graphql';
+import { ScaleType } from '@elastic/charts';
+import { DEFAULT_INDEX_KEY } from '../../../../common/constants';
+import {
+  GetNetworkDnsQuery,
+  NetworkDnsEdges,
+  NetworkDnsSortField,
+  PageInfoPaginated,
+  MatrixOverOrdinalHistogramData,
+} from '../../../graphql/types';
+import { inputsModel, State, inputsSelectors } from '../../../common/store';
+import { withKibana, WithKibanaProps } from '../../../common/lib/kibana';
+import { generateTablePaginationOptions } from '../../../common/components/paginated_table/helpers';
+import { createFilter, getDefaultFetchPolicy } from '../../../common/containers/helpers';
+import {
+  QueryTemplatePaginated,
+  QueryTemplatePaginatedProps,
+} from '../../../common/containers/query_template_paginated';
+import { networkDnsQuery } from './index.gql_query';
+import { DEFAULT_TABLE_ACTIVE_PAGE, DEFAULT_TABLE_LIMIT } from '../../../common/store/constants';
+import { MatrixHistogram } from '../../../common/components/matrix_histogram';
+import {
+  MatrixHistogramOption,
+  GetSubTitle,
+} from '../../../common/components/matrix_histogram/types';
+import { UpdateDateRange } from '../../../common/components/charts/common';
+import { SetQuery } from '../../../hosts/pages/navigation/types';
+import { networkModel, networkSelectors } from '../../store';
+
+const ID = 'networkDnsQuery';
+export const HISTOGRAM_ID = 'networkDnsHistogramQuery';
+export interface NetworkDnsArgs {
+  id: string;
+  inspect: inputsModel.InspectQuery;
+  isInspected: boolean;
+  loading: boolean;
+  loadPage: (newActivePage: number) => void;
+  networkDns: NetworkDnsEdges[];
+  pageInfo: PageInfoPaginated;
+  refetch: inputsModel.Refetch;
+  stackByField?: string;
+  totalCount: number;
+  histogram: MatrixOverOrdinalHistogramData[];
+}
+
+export interface OwnProps extends QueryTemplatePaginatedProps {
+  children: (args: NetworkDnsArgs) => React.ReactNode;
+  type: networkModel.NetworkType;
+}
+
+interface DnsHistogramOwnProps extends QueryTemplatePaginatedProps {
+  dataKey: string | string[];
+  defaultStackByOption: MatrixHistogramOption;
+  errorMessage: string;
+  isDnsHistogram?: boolean;
+  query: DocumentNode;
+  scaleType: ScaleType;
+  setQuery: SetQuery;
+  showLegend?: boolean;
+  stackByOptions: MatrixHistogramOption[];
+  subtitle?: string | GetSubTitle;
+  title: string;
+  type: networkModel.NetworkType;
+  updateDateRange: UpdateDateRange;
+  yTickFormatter?: (value: number) => string;
+}
+
+export interface NetworkDnsComponentReduxProps {
+  activePage: number;
+  sort: NetworkDnsSortField;
+  isInspected: boolean;
+  isPtrIncluded: boolean;
+  limit: number;
+}
+
+type NetworkDnsProps = OwnProps & NetworkDnsComponentReduxProps & WithKibanaProps;
+
+export class NetworkDnsComponentQuery extends QueryTemplatePaginated<
+  NetworkDnsProps,
+  GetNetworkDnsQuery.Query,
+  GetNetworkDnsQuery.Variables
+> {
+  public render() {
+    const {
+      activePage,
+      children,
+      sort,
+      endDate,
+      filterQuery,
+      id = ID,
+      isInspected,
+      isPtrIncluded,
+      kibana,
+      limit,
+      skip,
+      sourceId,
+      startDate,
+    } = this.props;
+    const variables: GetNetworkDnsQuery.Variables = {
+      defaultIndex: kibana.services.uiSettings.get<string[]>(DEFAULT_INDEX_KEY),
+      filterQuery: createFilter(filterQuery),
+      inspect: isInspected,
+      isPtrIncluded,
+      pagination: generateTablePaginationOptions(activePage, limit),
+      sort,
+      sourceId,
+      timerange: {
+        interval: '12h',
+        from: startDate!,
+        to: endDate!,
+      },
+    };
+
+    return (
+      <Query<GetNetworkDnsQuery.Query, GetNetworkDnsQuery.Variables>
+        fetchPolicy={getDefaultFetchPolicy()}
+        notifyOnNetworkStatusChange
+        query={networkDnsQuery}
+        skip={skip}
+        variables={variables}
+      >
+        {({ data, loading, fetchMore, networkStatus, refetch }) => {
+          const networkDns = getOr([], `source.NetworkDns.edges`, data);
+          this.setFetchMore(fetchMore);
+          this.setFetchMoreOptions((newActivePage: number) => ({
+            variables: {
+              pagination: generateTablePaginationOptions(newActivePage, limit),
+            },
+            updateQuery: (prev, { fetchMoreResult }) => {
+              if (!fetchMoreResult) {
+                return prev;
+              }
+              return {
+                ...fetchMoreResult,
+                source: {
+                  ...fetchMoreResult.source,
+                  NetworkDns: {
+                    ...fetchMoreResult.source.NetworkDns,
+                    edges: [...fetchMoreResult.source.NetworkDns.edges],
+                  },
+                },
+              };
+            },
+          }));
+          const isLoading = this.isItAValidLoading(loading, variables, networkStatus);
+          return children({
+            id,
+            inspect: getOr(null, 'source.NetworkDns.inspect', data),
+            isInspected,
+            loading: isLoading,
+            loadPage: this.wrappedLoadMore,
+            networkDns,
+            pageInfo: getOr({}, 'source.NetworkDns.pageInfo', data),
+            refetch: this.memoizedRefetchQuery(variables, limit, refetch),
+            totalCount: getOr(-1, 'source.NetworkDns.totalCount', data),
+            histogram: getOr(null, 'source.NetworkDns.histogram', data),
+          });
+        }}
+      </Query>
+    );
+  }
+}
+
+const makeMapStateToProps = () => {
+  const getNetworkDnsSelector = networkSelectors.dnsSelector();
+  const getQuery = inputsSelectors.globalQueryByIdSelector();
+  const mapStateToProps = (state: State, { id = ID }: OwnProps) => {
+    const { isInspected } = getQuery(state, id);
+    return {
+      ...getNetworkDnsSelector(state),
+      isInspected,
+      id,
+    };
+  };
+
+  return mapStateToProps;
+};
+
+const makeMapHistogramStateToProps = () => {
+  const getNetworkDnsSelector = networkSelectors.dnsSelector();
+  const getQuery = inputsSelectors.globalQueryByIdSelector();
+  const mapStateToProps = (state: State, { id = HISTOGRAM_ID }: DnsHistogramOwnProps) => {
+    const { isInspected } = getQuery(state, id);
+    return {
+      ...getNetworkDnsSelector(state),
+      activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+      limit: DEFAULT_TABLE_LIMIT,
+      isInspected,
+      id,
+    };
+  };
+
+  return mapStateToProps;
+};
+
+export const NetworkDnsQuery = compose<React.ComponentClass<OwnProps>>(
+  connect(makeMapStateToProps),
+  withKibana
+)(NetworkDnsComponentQuery);
+
+export const NetworkDnsHistogramQuery = compose<React.ComponentClass<DnsHistogramOwnProps>>(
+  connect(makeMapHistogramStateToProps),
+  withKibana
+)(MatrixHistogram);
diff --git a/x-pack/plugins/siem/public/containers/network_http/index.gql_query.ts b/x-pack/plugins/siem/public/network/containers/network_http/index.gql_query.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/network_http/index.gql_query.ts
rename to x-pack/plugins/siem/public/network/containers/network_http/index.gql_query.ts
diff --git a/x-pack/plugins/siem/public/network/containers/network_http/index.tsx b/x-pack/plugins/siem/public/network/containers/network_http/index.tsx
new file mode 100644
index 00000000000000..60845d452d69e4
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/containers/network_http/index.tsx
@@ -0,0 +1,160 @@
+/*
+ * 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 { getOr } from 'lodash/fp';
+import React from 'react';
+import { Query } from 'react-apollo';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+
+import { DEFAULT_INDEX_KEY } from '../../../../common/constants';
+import {
+  GetNetworkHttpQuery,
+  NetworkHttpEdges,
+  NetworkHttpSortField,
+  PageInfoPaginated,
+} from '../../../graphql/types';
+import { inputsModel, inputsSelectors, State } from '../../../common/store';
+import { withKibana, WithKibanaProps } from '../../../common/lib/kibana';
+import { generateTablePaginationOptions } from '../../../common/components/paginated_table/helpers';
+import { createFilter, getDefaultFetchPolicy } from '../../../common/containers/helpers';
+import {
+  QueryTemplatePaginated,
+  QueryTemplatePaginatedProps,
+} from '../../../common/containers/query_template_paginated';
+import { networkModel, networkSelectors } from '../../store';
+import { networkHttpQuery } from './index.gql_query';
+
+const ID = 'networkHttpQuery';
+
+export interface NetworkHttpArgs {
+  id: string;
+  ip?: string;
+  inspect: inputsModel.InspectQuery;
+  isInspected: boolean;
+  loading: boolean;
+  loadPage: (newActivePage: number) => void;
+  networkHttp: NetworkHttpEdges[];
+  pageInfo: PageInfoPaginated;
+  refetch: inputsModel.Refetch;
+  totalCount: number;
+}
+
+export interface OwnProps extends QueryTemplatePaginatedProps {
+  children: (args: NetworkHttpArgs) => React.ReactNode;
+  ip?: string;
+  type: networkModel.NetworkType;
+}
+
+export interface NetworkHttpComponentReduxProps {
+  activePage: number;
+  isInspected: boolean;
+  limit: number;
+  sort: NetworkHttpSortField;
+}
+
+type NetworkHttpProps = OwnProps & NetworkHttpComponentReduxProps & WithKibanaProps;
+
+class NetworkHttpComponentQuery extends QueryTemplatePaginated<
+  NetworkHttpProps,
+  GetNetworkHttpQuery.Query,
+  GetNetworkHttpQuery.Variables
+> {
+  public render() {
+    const {
+      activePage,
+      children,
+      endDate,
+      filterQuery,
+      id = ID,
+      ip,
+      isInspected,
+      kibana,
+      limit,
+      skip,
+      sourceId,
+      sort,
+      startDate,
+    } = this.props;
+    const variables: GetNetworkHttpQuery.Variables = {
+      defaultIndex: kibana.services.uiSettings.get<string[]>(DEFAULT_INDEX_KEY),
+      filterQuery: createFilter(filterQuery),
+      inspect: isInspected,
+      ip,
+      pagination: generateTablePaginationOptions(activePage, limit),
+      sort,
+      sourceId,
+      timerange: {
+        interval: '12h',
+        from: startDate!,
+        to: endDate!,
+      },
+    };
+    return (
+      <Query<GetNetworkHttpQuery.Query, GetNetworkHttpQuery.Variables>
+        fetchPolicy={getDefaultFetchPolicy()}
+        notifyOnNetworkStatusChange
+        query={networkHttpQuery}
+        skip={skip}
+        variables={variables}
+      >
+        {({ data, loading, fetchMore, networkStatus, refetch }) => {
+          const networkHttp = getOr([], `source.NetworkHttp.edges`, data);
+          this.setFetchMore(fetchMore);
+          this.setFetchMoreOptions((newActivePage: number) => ({
+            variables: {
+              pagination: generateTablePaginationOptions(newActivePage, limit),
+            },
+            updateQuery: (prev, { fetchMoreResult }) => {
+              if (!fetchMoreResult) {
+                return prev;
+              }
+              return {
+                ...fetchMoreResult,
+                source: {
+                  ...fetchMoreResult.source,
+                  NetworkHttp: {
+                    ...fetchMoreResult.source.NetworkHttp,
+                    edges: [...fetchMoreResult.source.NetworkHttp.edges],
+                  },
+                },
+              };
+            },
+          }));
+          const isLoading = this.isItAValidLoading(loading, variables, networkStatus);
+          return children({
+            id,
+            inspect: getOr(null, 'source.NetworkHttp.inspect', data),
+            isInspected,
+            loading: isLoading,
+            loadPage: this.wrappedLoadMore,
+            networkHttp,
+            pageInfo: getOr({}, 'source.NetworkHttp.pageInfo', data),
+            refetch: this.memoizedRefetchQuery(variables, limit, refetch),
+            totalCount: getOr(-1, 'source.NetworkHttp.totalCount', data),
+          });
+        }}
+      </Query>
+    );
+  }
+}
+
+const makeMapStateToProps = () => {
+  const getHttpSelector = networkSelectors.httpSelector();
+  const getQuery = inputsSelectors.globalQueryByIdSelector();
+  return (state: State, { id = ID, type }: OwnProps) => {
+    const { isInspected } = getQuery(state, id);
+    return {
+      ...getHttpSelector(state, type),
+      isInspected,
+    };
+  };
+};
+
+export const NetworkHttpQuery = compose<React.ComponentClass<OwnProps>>(
+  connect(makeMapStateToProps),
+  withKibana
+)(NetworkHttpComponentQuery);
diff --git a/x-pack/plugins/siem/public/containers/network_top_countries/index.gql_query.ts b/x-pack/plugins/siem/public/network/containers/network_top_countries/index.gql_query.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/network_top_countries/index.gql_query.ts
rename to x-pack/plugins/siem/public/network/containers/network_top_countries/index.gql_query.ts
diff --git a/x-pack/plugins/siem/public/network/containers/network_top_countries/index.tsx b/x-pack/plugins/siem/public/network/containers/network_top_countries/index.tsx
new file mode 100644
index 00000000000000..b167cba460818f
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/containers/network_top_countries/index.tsx
@@ -0,0 +1,164 @@
+/*
+ * 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 { getOr } from 'lodash/fp';
+import React from 'react';
+import { Query } from 'react-apollo';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+
+import { DEFAULT_INDEX_KEY } from '../../../../common/constants';
+import {
+  FlowTargetSourceDest,
+  GetNetworkTopCountriesQuery,
+  NetworkTopCountriesEdges,
+  NetworkTopTablesSortField,
+  PageInfoPaginated,
+} from '../../../graphql/types';
+import { inputsModel, inputsSelectors, State } from '../../../common/store';
+import { withKibana, WithKibanaProps } from '../../../common/lib/kibana';
+import { generateTablePaginationOptions } from '../../../common/components/paginated_table/helpers';
+import { createFilter, getDefaultFetchPolicy } from '../../../common/containers/helpers';
+import {
+  QueryTemplatePaginated,
+  QueryTemplatePaginatedProps,
+} from '../../../common/containers/query_template_paginated';
+import { networkTopCountriesQuery } from './index.gql_query';
+import { networkModel, networkSelectors } from '../../store';
+
+const ID = 'networkTopCountriesQuery';
+
+export interface NetworkTopCountriesArgs {
+  id: string;
+  ip?: string;
+  inspect: inputsModel.InspectQuery;
+  isInspected: boolean;
+  loading: boolean;
+  loadPage: (newActivePage: number) => void;
+  networkTopCountries: NetworkTopCountriesEdges[];
+  pageInfo: PageInfoPaginated;
+  refetch: inputsModel.Refetch;
+  totalCount: number;
+}
+
+export interface OwnProps extends QueryTemplatePaginatedProps {
+  children: (args: NetworkTopCountriesArgs) => React.ReactNode;
+  flowTarget: FlowTargetSourceDest;
+  ip?: string;
+  type: networkModel.NetworkType;
+}
+
+export interface NetworkTopCountriesComponentReduxProps {
+  activePage: number;
+  isInspected: boolean;
+  limit: number;
+  sort: NetworkTopTablesSortField;
+}
+
+type NetworkTopCountriesProps = OwnProps & NetworkTopCountriesComponentReduxProps & WithKibanaProps;
+
+class NetworkTopCountriesComponentQuery extends QueryTemplatePaginated<
+  NetworkTopCountriesProps,
+  GetNetworkTopCountriesQuery.Query,
+  GetNetworkTopCountriesQuery.Variables
+> {
+  public render() {
+    const {
+      activePage,
+      children,
+      endDate,
+      flowTarget,
+      filterQuery,
+      kibana,
+      id = `${ID}-${flowTarget}`,
+      ip,
+      isInspected,
+      limit,
+      skip,
+      sourceId,
+      startDate,
+      sort,
+    } = this.props;
+    const variables: GetNetworkTopCountriesQuery.Variables = {
+      defaultIndex: kibana.services.uiSettings.get<string[]>(DEFAULT_INDEX_KEY),
+      filterQuery: createFilter(filterQuery),
+      flowTarget,
+      inspect: isInspected,
+      ip,
+      pagination: generateTablePaginationOptions(activePage, limit),
+      sort,
+      sourceId,
+      timerange: {
+        interval: '12h',
+        from: startDate!,
+        to: endDate!,
+      },
+    };
+    return (
+      <Query<GetNetworkTopCountriesQuery.Query, GetNetworkTopCountriesQuery.Variables>
+        fetchPolicy={getDefaultFetchPolicy()}
+        notifyOnNetworkStatusChange
+        query={networkTopCountriesQuery}
+        skip={skip}
+        variables={variables}
+      >
+        {({ data, loading, fetchMore, networkStatus, refetch }) => {
+          const networkTopCountries = getOr([], `source.NetworkTopCountries.edges`, data);
+          this.setFetchMore(fetchMore);
+          this.setFetchMoreOptions((newActivePage: number) => ({
+            variables: {
+              pagination: generateTablePaginationOptions(newActivePage, limit),
+            },
+            updateQuery: (prev, { fetchMoreResult }) => {
+              if (!fetchMoreResult) {
+                return prev;
+              }
+              return {
+                ...fetchMoreResult,
+                source: {
+                  ...fetchMoreResult.source,
+                  NetworkTopCountries: {
+                    ...fetchMoreResult.source.NetworkTopCountries,
+                    edges: [...fetchMoreResult.source.NetworkTopCountries.edges],
+                  },
+                },
+              };
+            },
+          }));
+          const isLoading = this.isItAValidLoading(loading, variables, networkStatus);
+          return children({
+            id,
+            inspect: getOr(null, 'source.NetworkTopCountries.inspect', data),
+            isInspected,
+            loading: isLoading,
+            loadPage: this.wrappedLoadMore,
+            networkTopCountries,
+            pageInfo: getOr({}, 'source.NetworkTopCountries.pageInfo', data),
+            refetch: this.memoizedRefetchQuery(variables, limit, refetch),
+            totalCount: getOr(-1, 'source.NetworkTopCountries.totalCount', data),
+          });
+        }}
+      </Query>
+    );
+  }
+}
+
+const makeMapStateToProps = () => {
+  const getTopCountriesSelector = networkSelectors.topCountriesSelector();
+  const getQuery = inputsSelectors.globalQueryByIdSelector();
+  return (state: State, { flowTarget, id = `${ID}-${flowTarget}`, type }: OwnProps) => {
+    const { isInspected } = getQuery(state, id);
+    return {
+      ...getTopCountriesSelector(state, type, flowTarget),
+      isInspected,
+    };
+  };
+};
+
+export const NetworkTopCountriesQuery = compose<React.ComponentClass<OwnProps>>(
+  connect(makeMapStateToProps),
+  withKibana
+)(NetworkTopCountriesComponentQuery);
diff --git a/x-pack/plugins/siem/public/containers/network_top_n_flow/index.gql_query.ts b/x-pack/plugins/siem/public/network/containers/network_top_n_flow/index.gql_query.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/network_top_n_flow/index.gql_query.ts
rename to x-pack/plugins/siem/public/network/containers/network_top_n_flow/index.gql_query.ts
diff --git a/x-pack/plugins/siem/public/network/containers/network_top_n_flow/index.tsx b/x-pack/plugins/siem/public/network/containers/network_top_n_flow/index.tsx
new file mode 100644
index 00000000000000..770574b0813c1c
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/containers/network_top_n_flow/index.tsx
@@ -0,0 +1,164 @@
+/*
+ * 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 { getOr } from 'lodash/fp';
+import React from 'react';
+import { Query } from 'react-apollo';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+
+import { DEFAULT_INDEX_KEY } from '../../../../common/constants';
+import {
+  FlowTargetSourceDest,
+  GetNetworkTopNFlowQuery,
+  NetworkTopNFlowEdges,
+  NetworkTopTablesSortField,
+  PageInfoPaginated,
+} from '../../../graphql/types';
+import { withKibana, WithKibanaProps } from '../../../common/lib/kibana';
+import { inputsModel, inputsSelectors, State } from '../../../common/store';
+import { generateTablePaginationOptions } from '../../../common/components/paginated_table/helpers';
+import { createFilter, getDefaultFetchPolicy } from '../../../common/containers/helpers';
+import {
+  QueryTemplatePaginated,
+  QueryTemplatePaginatedProps,
+} from '../../../common/containers/query_template_paginated';
+import { networkTopNFlowQuery } from './index.gql_query';
+import { networkModel, networkSelectors } from '../../store';
+
+const ID = 'networkTopNFlowQuery';
+
+export interface NetworkTopNFlowArgs {
+  id: string;
+  ip?: string;
+  inspect: inputsModel.InspectQuery;
+  isInspected: boolean;
+  loading: boolean;
+  loadPage: (newActivePage: number) => void;
+  networkTopNFlow: NetworkTopNFlowEdges[];
+  pageInfo: PageInfoPaginated;
+  refetch: inputsModel.Refetch;
+  totalCount: number;
+}
+
+export interface OwnProps extends QueryTemplatePaginatedProps {
+  children: (args: NetworkTopNFlowArgs) => React.ReactNode;
+  flowTarget: FlowTargetSourceDest;
+  ip?: string;
+  type: networkModel.NetworkType;
+}
+
+export interface NetworkTopNFlowComponentReduxProps {
+  activePage: number;
+  isInspected: boolean;
+  limit: number;
+  sort: NetworkTopTablesSortField;
+}
+
+type NetworkTopNFlowProps = OwnProps & NetworkTopNFlowComponentReduxProps & WithKibanaProps;
+
+class NetworkTopNFlowComponentQuery extends QueryTemplatePaginated<
+  NetworkTopNFlowProps,
+  GetNetworkTopNFlowQuery.Query,
+  GetNetworkTopNFlowQuery.Variables
+> {
+  public render() {
+    const {
+      activePage,
+      children,
+      endDate,
+      flowTarget,
+      filterQuery,
+      kibana,
+      id = `${ID}-${flowTarget}`,
+      ip,
+      isInspected,
+      limit,
+      skip,
+      sourceId,
+      startDate,
+      sort,
+    } = this.props;
+    const variables: GetNetworkTopNFlowQuery.Variables = {
+      defaultIndex: kibana.services.uiSettings.get<string[]>(DEFAULT_INDEX_KEY),
+      filterQuery: createFilter(filterQuery),
+      flowTarget,
+      inspect: isInspected,
+      ip,
+      pagination: generateTablePaginationOptions(activePage, limit),
+      sort,
+      sourceId,
+      timerange: {
+        interval: '12h',
+        from: startDate!,
+        to: endDate!,
+      },
+    };
+    return (
+      <Query<GetNetworkTopNFlowQuery.Query, GetNetworkTopNFlowQuery.Variables>
+        fetchPolicy={getDefaultFetchPolicy()}
+        notifyOnNetworkStatusChange
+        query={networkTopNFlowQuery}
+        skip={skip}
+        variables={variables}
+      >
+        {({ data, loading, fetchMore, networkStatus, refetch }) => {
+          const networkTopNFlow = getOr([], `source.NetworkTopNFlow.edges`, data);
+          this.setFetchMore(fetchMore);
+          this.setFetchMoreOptions((newActivePage: number) => ({
+            variables: {
+              pagination: generateTablePaginationOptions(newActivePage, limit),
+            },
+            updateQuery: (prev, { fetchMoreResult }) => {
+              if (!fetchMoreResult) {
+                return prev;
+              }
+              return {
+                ...fetchMoreResult,
+                source: {
+                  ...fetchMoreResult.source,
+                  NetworkTopNFlow: {
+                    ...fetchMoreResult.source.NetworkTopNFlow,
+                    edges: [...fetchMoreResult.source.NetworkTopNFlow.edges],
+                  },
+                },
+              };
+            },
+          }));
+          const isLoading = this.isItAValidLoading(loading, variables, networkStatus);
+          return children({
+            id,
+            inspect: getOr(null, 'source.NetworkTopNFlow.inspect', data),
+            isInspected,
+            loading: isLoading,
+            loadPage: this.wrappedLoadMore,
+            networkTopNFlow,
+            pageInfo: getOr({}, 'source.NetworkTopNFlow.pageInfo', data),
+            refetch: this.memoizedRefetchQuery(variables, limit, refetch),
+            totalCount: getOr(-1, 'source.NetworkTopNFlow.totalCount', data),
+          });
+        }}
+      </Query>
+    );
+  }
+}
+
+const makeMapStateToProps = () => {
+  const getTopNFlowSelector = networkSelectors.topNFlowSelector();
+  const getQuery = inputsSelectors.globalQueryByIdSelector();
+  return (state: State, { flowTarget, id = `${ID}-${flowTarget}`, type }: OwnProps) => {
+    const { isInspected } = getQuery(state, id);
+    return {
+      ...getTopNFlowSelector(state, type, flowTarget),
+      isInspected,
+    };
+  };
+};
+
+export const NetworkTopNFlowQuery = compose<React.ComponentClass<OwnProps>>(
+  connect(makeMapStateToProps),
+  withKibana
+)(NetworkTopNFlowComponentQuery);
diff --git a/x-pack/plugins/siem/public/containers/tls/index.gql_query.ts b/x-pack/plugins/siem/public/network/containers/tls/index.gql_query.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/tls/index.gql_query.ts
rename to x-pack/plugins/siem/public/network/containers/tls/index.gql_query.ts
diff --git a/x-pack/plugins/siem/public/network/containers/tls/index.tsx b/x-pack/plugins/siem/public/network/containers/tls/index.tsx
new file mode 100644
index 00000000000000..a50f2a131b75b8
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/containers/tls/index.tsx
@@ -0,0 +1,163 @@
+/*
+ * 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 { getOr } from 'lodash/fp';
+import React from 'react';
+import { Query } from 'react-apollo';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+
+import { DEFAULT_INDEX_KEY } from '../../../../common/constants';
+import {
+  PageInfoPaginated,
+  TlsEdges,
+  TlsSortField,
+  GetTlsQuery,
+  FlowTargetSourceDest,
+} from '../../../graphql/types';
+import { inputsModel, State, inputsSelectors } from '../../../common/store';
+import { withKibana, WithKibanaProps } from '../../../common/lib/kibana';
+import { createFilter, getDefaultFetchPolicy } from '../../../common/containers/helpers';
+import { generateTablePaginationOptions } from '../../../common/components/paginated_table/helpers';
+import {
+  QueryTemplatePaginated,
+  QueryTemplatePaginatedProps,
+} from '../../../common/containers/query_template_paginated';
+import { networkModel, networkSelectors } from '../../store';
+import { tlsQuery } from './index.gql_query';
+
+const ID = 'tlsQuery';
+
+export interface TlsArgs {
+  id: string;
+  inspect: inputsModel.InspectQuery;
+  isInspected: boolean;
+  loading: boolean;
+  loadPage: (newActivePage: number) => void;
+  pageInfo: PageInfoPaginated;
+  refetch: inputsModel.Refetch;
+  tls: TlsEdges[];
+  totalCount: number;
+}
+
+export interface OwnProps extends QueryTemplatePaginatedProps {
+  children: (args: TlsArgs) => React.ReactNode;
+  flowTarget: FlowTargetSourceDest;
+  ip: string;
+  type: networkModel.NetworkType;
+}
+
+export interface TlsComponentReduxProps {
+  activePage: number;
+  isInspected: boolean;
+  limit: number;
+  sort: TlsSortField;
+}
+
+type TlsProps = OwnProps & TlsComponentReduxProps & WithKibanaProps;
+
+class TlsComponentQuery extends QueryTemplatePaginated<
+  TlsProps,
+  GetTlsQuery.Query,
+  GetTlsQuery.Variables
+> {
+  public render() {
+    const {
+      activePage,
+      children,
+      endDate,
+      filterQuery,
+      flowTarget,
+      id = ID,
+      ip,
+      isInspected,
+      kibana,
+      limit,
+      skip,
+      sourceId,
+      startDate,
+      sort,
+    } = this.props;
+    const variables: GetTlsQuery.Variables = {
+      defaultIndex: kibana.services.uiSettings.get<string[]>(DEFAULT_INDEX_KEY),
+      filterQuery: createFilter(filterQuery),
+      flowTarget,
+      inspect: isInspected,
+      ip,
+      pagination: generateTablePaginationOptions(activePage, limit),
+      sort,
+      sourceId,
+      timerange: {
+        interval: '12h',
+        from: startDate ? startDate : 0,
+        to: endDate ? endDate : Date.now(),
+      },
+    };
+    return (
+      <Query<GetTlsQuery.Query, GetTlsQuery.Variables>
+        query={tlsQuery}
+        fetchPolicy={getDefaultFetchPolicy()}
+        notifyOnNetworkStatusChange
+        skip={skip}
+        variables={variables}
+      >
+        {({ data, loading, fetchMore, networkStatus, refetch }) => {
+          const tls = getOr([], 'source.Tls.edges', data);
+          this.setFetchMore(fetchMore);
+          this.setFetchMoreOptions((newActivePage: number) => ({
+            variables: {
+              pagination: generateTablePaginationOptions(newActivePage, limit),
+            },
+            updateQuery: (prev, { fetchMoreResult }) => {
+              if (!fetchMoreResult) {
+                return prev;
+              }
+              return {
+                ...fetchMoreResult,
+                source: {
+                  ...fetchMoreResult.source,
+                  Tls: {
+                    ...fetchMoreResult.source.Tls,
+                    edges: [...fetchMoreResult.source.Tls.edges],
+                  },
+                },
+              };
+            },
+          }));
+          const isLoading = this.isItAValidLoading(loading, variables, networkStatus);
+          return children({
+            id,
+            inspect: getOr(null, 'source.Tls.inspect', data),
+            isInspected,
+            loading: isLoading,
+            loadPage: this.wrappedLoadMore,
+            pageInfo: getOr({}, 'source.Tls.pageInfo', data),
+            refetch: this.memoizedRefetchQuery(variables, limit, refetch),
+            tls,
+            totalCount: getOr(-1, 'source.Tls.totalCount', data),
+          });
+        }}
+      </Query>
+    );
+  }
+}
+
+const makeMapStateToProps = () => {
+  const getTlsSelector = networkSelectors.tlsSelector();
+  const getQuery = inputsSelectors.globalQueryByIdSelector();
+  return (state: State, { flowTarget, id = ID, type }: OwnProps) => {
+    const { isInspected } = getQuery(state, id);
+    return {
+      ...getTlsSelector(state, type, flowTarget),
+      isInspected,
+    };
+  };
+};
+
+export const TlsQuery = compose<React.ComponentClass<OwnProps>>(
+  connect(makeMapStateToProps),
+  withKibana
+)(TlsComponentQuery);
diff --git a/x-pack/plugins/siem/public/containers/users/index.gql_query.ts b/x-pack/plugins/siem/public/network/containers/users/index.gql_query.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/users/index.gql_query.ts
rename to x-pack/plugins/siem/public/network/containers/users/index.gql_query.ts
diff --git a/x-pack/plugins/siem/public/network/containers/users/index.tsx b/x-pack/plugins/siem/public/network/containers/users/index.tsx
new file mode 100644
index 00000000000000..efbeb3eb005426
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/containers/users/index.tsx
@@ -0,0 +1,157 @@
+/*
+ * 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 { getOr } from 'lodash/fp';
+import React from 'react';
+import { Query } from 'react-apollo';
+import { connect, ConnectedProps } from 'react-redux';
+import { compose } from 'redux';
+
+import { DEFAULT_INDEX_KEY } from '../../../../common/constants';
+import { GetUsersQuery, FlowTarget, PageInfoPaginated, UsersEdges } from '../../../graphql/types';
+import { inputsModel, State, inputsSelectors } from '../../../common/store';
+import { withKibana, WithKibanaProps } from '../../../common/lib/kibana';
+import { createFilter, getDefaultFetchPolicy } from '../../../common/containers/helpers';
+import { generateTablePaginationOptions } from '../../../common/components/paginated_table/helpers';
+import {
+  QueryTemplatePaginated,
+  QueryTemplatePaginatedProps,
+} from '../../../common/containers/query_template_paginated';
+import { networkModel, networkSelectors } from '../../store';
+
+import { usersQuery } from './index.gql_query';
+
+const ID = 'usersQuery';
+
+export interface UsersArgs {
+  id: string;
+  inspect: inputsModel.InspectQuery;
+  isInspected: boolean;
+  loading: boolean;
+  loadPage: (newActivePage: number) => void;
+  pageInfo: PageInfoPaginated;
+  refetch: inputsModel.Refetch;
+  totalCount: number;
+  users: UsersEdges[];
+}
+
+export interface OwnProps extends QueryTemplatePaginatedProps {
+  children: (args: UsersArgs) => React.ReactNode;
+  flowTarget: FlowTarget;
+  ip: string;
+  type: networkModel.NetworkType;
+}
+
+type UsersProps = OwnProps & PropsFromRedux & WithKibanaProps;
+
+class UsersComponentQuery extends QueryTemplatePaginated<
+  UsersProps,
+  GetUsersQuery.Query,
+  GetUsersQuery.Variables
+> {
+  public render() {
+    const {
+      activePage,
+      children,
+      endDate,
+      filterQuery,
+      flowTarget,
+      id = ID,
+      ip,
+      isInspected,
+      kibana,
+      limit,
+      skip,
+      sourceId,
+      startDate,
+      sort,
+    } = this.props;
+    const variables: GetUsersQuery.Variables = {
+      defaultIndex: kibana.services.uiSettings.get<string[]>(DEFAULT_INDEX_KEY),
+      filterQuery: createFilter(filterQuery),
+      flowTarget,
+      inspect: isInspected,
+      ip,
+      pagination: generateTablePaginationOptions(activePage, limit),
+      sort,
+      sourceId,
+      timerange: {
+        interval: '12h',
+        from: startDate!,
+        to: endDate!,
+      },
+    };
+    return (
+      <Query<GetUsersQuery.Query, GetUsersQuery.Variables>
+        query={usersQuery}
+        fetchPolicy={getDefaultFetchPolicy()}
+        notifyOnNetworkStatusChange
+        skip={skip}
+        variables={variables}
+      >
+        {({ data, loading, fetchMore, networkStatus, refetch }) => {
+          const users = getOr([], `source.Users.edges`, data);
+          this.setFetchMore(fetchMore);
+          this.setFetchMoreOptions((newActivePage: number) => ({
+            variables: {
+              pagination: generateTablePaginationOptions(newActivePage, limit),
+            },
+            updateQuery: (prev, { fetchMoreResult }) => {
+              if (!fetchMoreResult) {
+                return prev;
+              }
+              return {
+                ...fetchMoreResult,
+                source: {
+                  ...fetchMoreResult.source,
+                  Users: {
+                    ...fetchMoreResult.source.Users,
+                    edges: [...fetchMoreResult.source.Users.edges],
+                  },
+                },
+              };
+            },
+          }));
+          const isLoading = this.isItAValidLoading(loading, variables, networkStatus);
+          return children({
+            id,
+            inspect: getOr(null, 'source.Users.inspect', data),
+            isInspected,
+            loading: isLoading,
+            loadPage: this.wrappedLoadMore,
+            pageInfo: getOr({}, 'source.Users.pageInfo', data),
+            refetch: this.memoizedRefetchQuery(variables, limit, refetch),
+            totalCount: getOr(-1, 'source.Users.totalCount', data),
+            users,
+          });
+        }}
+      </Query>
+    );
+  }
+}
+
+const makeMapStateToProps = () => {
+  const getUsersSelector = networkSelectors.usersSelector();
+  const getQuery = inputsSelectors.globalQueryByIdSelector();
+  const mapStateToProps = (state: State, { id = ID }: OwnProps) => {
+    const { isInspected } = getQuery(state, id);
+    return {
+      ...getUsersSelector(state),
+      isInspected,
+    };
+  };
+
+  return mapStateToProps;
+};
+
+const connector = connect(makeMapStateToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export const UsersQuery = compose<React.ComponentClass<OwnProps>>(
+  connector,
+  withKibana
+)(UsersComponentQuery);
diff --git a/x-pack/plugins/siem/public/network/index.ts b/x-pack/plugins/siem/public/network/index.ts
new file mode 100644
index 00000000000000..6590e5ee5161c1
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/index.ts
@@ -0,0 +1,23 @@
+/*
+ * 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 { SecuritySubPluginWithStore } from '../app/types';
+import { getNetworkRoutes } from './routes';
+import { initialNetworkState, networkReducer, NetworkState } from './store';
+
+export class Network {
+  public setup() {}
+
+  public start(): SecuritySubPluginWithStore<'network', NetworkState> {
+    return {
+      routes: getNetworkRoutes(),
+      store: {
+        initialState: { network: initialNetworkState },
+        reducer: { network: networkReducer },
+      },
+    };
+  }
+}
diff --git a/x-pack/plugins/siem/public/network/pages/index.tsx b/x-pack/plugins/siem/public/network/pages/index.tsx
new file mode 100644
index 00000000000000..c6f13c118c3093
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/pages/index.tsx
@@ -0,0 +1,100 @@
+/*
+ * 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, { useMemo } from 'react';
+import { Redirect, Route, Switch, RouteComponentProps } from 'react-router-dom';
+
+import { useMlCapabilities } from '../../common/components/ml_popover/hooks/use_ml_capabilities';
+import { hasMlUserPermissions } from '../../../common/machine_learning/has_ml_user_permissions';
+import { FlowTarget } from '../../graphql/types';
+
+import { IPDetails } from './ip_details';
+import { Network } from './network';
+import { GlobalTime } from '../../common/containers/global_time';
+import { SiemPageName } from '../../app/types';
+import { getNetworkRoutePath } from './navigation';
+import { NetworkRouteType } from './navigation/types';
+
+type Props = Partial<RouteComponentProps<{}>> & { url: string };
+
+const networkPagePath = `/:pageName(${SiemPageName.network})`;
+const ipDetailsPageBasePath = `${networkPagePath}/ip/:detailName`;
+
+const NetworkContainerComponent: React.FC<Props> = () => {
+  const capabilities = useMlCapabilities();
+  const capabilitiesFetched = capabilities.capabilitiesFetched;
+  const userHasMlUserPermissions = useMemo(() => hasMlUserPermissions(capabilities), [
+    capabilities,
+  ]);
+  const networkRoutePath = useMemo(
+    () => getNetworkRoutePath(networkPagePath, capabilitiesFetched, userHasMlUserPermissions),
+    [capabilitiesFetched, userHasMlUserPermissions]
+  );
+
+  return (
+    <GlobalTime>
+      {({ to, from, setQuery, deleteQuery, isInitializing }) => (
+        <Switch>
+          <Route
+            strict
+            path={networkRoutePath}
+            render={() => (
+              <Network
+                networkPagePath={networkPagePath}
+                to={to}
+                from={from}
+                setQuery={setQuery}
+                deleteQuery={deleteQuery}
+                isInitializing={isInitializing}
+                capabilitiesFetched={capabilities.capabilitiesFetched}
+                hasMlUserPermissions={userHasMlUserPermissions}
+              />
+            )}
+          />
+          <Route
+            path={`${ipDetailsPageBasePath}/:flowTarget`}
+            render={({
+              match: {
+                params: { detailName, flowTarget },
+              },
+            }) => (
+              <IPDetails
+                detailName={detailName}
+                flowTarget={flowTarget}
+                to={to}
+                from={from}
+                setQuery={setQuery}
+                deleteQuery={deleteQuery}
+                isInitializing={isInitializing}
+              />
+            )}
+          />
+          <Route
+            path={ipDetailsPageBasePath}
+            render={({
+              location: { search = '' },
+              match: {
+                params: { detailName },
+              },
+            }) => (
+              <Redirect
+                to={`/${SiemPageName.network}/ip/${detailName}/${FlowTarget.source}${search}`}
+              />
+            )}
+          />
+          <Route
+            path={`/${SiemPageName.network}/`}
+            render={({ location: { search = '' } }) => (
+              <Redirect to={`/${SiemPageName.network}/${NetworkRouteType.flows}${search}`} />
+            )}
+          />
+        </Switch>
+      )}
+    </GlobalTime>
+  );
+};
+
+export const NetworkContainer = React.memo(NetworkContainerComponent);
diff --git a/x-pack/plugins/siem/public/pages/network/ip_details/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/network/pages/ip_details/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/pages/network/ip_details/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/network/pages/ip_details/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/network/pages/ip_details/index.test.tsx b/x-pack/plugins/siem/public/network/pages/ip_details/index.test.tsx
new file mode 100644
index 00000000000000..79af38f0cf8873
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/pages/ip_details/index.test.tsx
@@ -0,0 +1,159 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import { cloneDeep } from 'lodash/fp';
+import React from 'react';
+import { Router } from 'react-router-dom';
+import { MockedProvider } from 'react-apollo/test-utils';
+import { ActionCreator } from 'typescript-fsa';
+
+import '../../../common/mock/match_media';
+
+import { mocksSource } from '../../../common/containers/source/mock';
+import { FlowTarget } from '../../../graphql/types';
+import {
+  apolloClientObservable,
+  mockGlobalState,
+  TestProviders,
+  SUB_PLUGINS_REDUCER,
+} from '../../../common/mock';
+import { useMountAppended } from '../../../common/utils/use_mount_appended';
+import { createStore, State } from '../../../common/store';
+import { InputsModelId } from '../../../common/store/inputs/constants';
+import { IPDetailsComponent, IPDetails } from './index';
+
+type Action = 'PUSH' | 'POP' | 'REPLACE';
+const pop: Action = 'POP';
+
+type GlobalWithFetch = NodeJS.Global & { fetch: jest.Mock };
+
+// Test will fail because we will to need to mock some core services to make the test work
+// For now let's forget about SiemSearchBar and QueryBar
+jest.mock('../../../common/components/search_bar', () => ({
+  SiemSearchBar: () => null,
+}));
+jest.mock('../../../common/components/query_bar', () => ({
+  QueryBar: () => null,
+}));
+
+let localSource: Array<{
+  request: {};
+  result: {
+    data: {
+      source: {
+        status: {
+          indicesExist: boolean;
+        };
+      };
+    };
+  };
+}>;
+
+const getMockHistory = (ip: string) => ({
+  length: 2,
+  location: {
+    pathname: `/network/ip/${ip}`,
+    search: '',
+    state: '',
+    hash: '',
+  },
+  action: pop,
+  push: jest.fn(),
+  replace: jest.fn(),
+  go: jest.fn(),
+  goBack: jest.fn(),
+  goForward: jest.fn(),
+  block: jest.fn(),
+  createHref: jest.fn(),
+  listen: jest.fn(),
+});
+
+const to = new Date('2018-03-23T18:49:23.132Z').valueOf();
+const from = new Date('2018-03-24T03:33:52.253Z').valueOf();
+const getMockProps = (ip: string) => ({
+  to,
+  from,
+  isInitializing: false,
+  setQuery: jest.fn(),
+  query: { query: 'coolQueryhuh?', language: 'keury' },
+  filters: [],
+  flowTarget: FlowTarget.source,
+  history: getMockHistory(ip),
+  location: {
+    pathname: `/network/ip/${ip}`,
+    search: '',
+    state: '',
+    hash: '',
+  },
+  detailName: ip,
+  match: { params: { detailName: ip, search: '' }, isExact: true, path: '', url: '' },
+  setAbsoluteRangeDatePicker: (jest.fn() as unknown) as ActionCreator<{
+    id: InputsModelId;
+    from: number;
+    to: number;
+  }>,
+  setIpDetailsTablesActivePageToZero: (jest.fn() as unknown) as ActionCreator<void>,
+});
+
+describe('Ip Details', () => {
+  const mount = useMountAppended();
+
+  beforeAll(() => {
+    (global as GlobalWithFetch).fetch = jest.fn().mockImplementationOnce(() =>
+      Promise.resolve({
+        ok: true,
+        json: () => {
+          return null;
+        },
+      })
+    );
+  });
+
+  afterAll(() => {
+    delete (global as GlobalWithFetch).fetch;
+  });
+
+  const state: State = mockGlobalState;
+  let store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable);
+
+  beforeEach(() => {
+    store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable);
+    localSource = cloneDeep(mocksSource);
+  });
+
+  test('it renders', () => {
+    const wrapper = shallow(<IPDetailsComponent {...getMockProps('123.456.78.90')} />);
+    expect(wrapper.find('[data-test-subj="ip-details-page"]').exists()).toBe(true);
+  });
+
+  test('it matches the snapshot', () => {
+    const wrapper = shallow(<IPDetailsComponent {...getMockProps('123.456.78.90')} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('it renders ipv6 headline', async () => {
+    localSource[0].result.data.source.status.indicesExist = true;
+    const ip = 'fe80--24ce-f7ff-fede-a571';
+    const wrapper = mount(
+      <TestProviders store={store}>
+        <MockedProvider mocks={localSource} addTypename={false}>
+          <Router history={getMockHistory(ip)}>
+            <IPDetails {...getMockProps(ip)} />
+          </Router>
+        </MockedProvider>
+      </TestProviders>
+    );
+    // Why => https://github.com/apollographql/react-apollo/issues/1711
+    await new Promise(resolve => setTimeout(resolve));
+    wrapper.update();
+    expect(
+      wrapper
+        .find('[data-test-subj="ip-details-headline"] [data-test-subj="header-page-title"]')
+        .text()
+    ).toEqual('fe80::24ce:f7ff:fede:a571');
+  });
+});
diff --git a/x-pack/plugins/siem/public/network/pages/ip_details/index.tsx b/x-pack/plugins/siem/public/network/pages/ip_details/index.tsx
new file mode 100644
index 00000000000000..9ae09d6c6cec74
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/pages/ip_details/index.tsx
@@ -0,0 +1,301 @@
+/*
+ * 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 { EuiHorizontalRule, EuiSpacer, EuiFlexItem } from '@elastic/eui';
+import React, { useCallback, useEffect } from 'react';
+import { connect, ConnectedProps } from 'react-redux';
+import { StickyContainer } from 'react-sticky';
+
+import { FiltersGlobal } from '../../../common/components/filters_global';
+import { HeaderPage } from '../../../common/components/header_page';
+import { LastEventTime } from '../../../common/components/last_event_time';
+import { AnomalyTableProvider } from '../../../common/components/ml/anomaly/anomaly_table_provider';
+import { networkToCriteria } from '../../../common/components/ml/criteria/network_to_criteria';
+import { scoreIntervalToDateTime } from '../../../common/components/ml/score/score_interval_to_datetime';
+import { AnomaliesNetworkTable } from '../../../common/components/ml/tables/anomalies_network_table';
+import { manageQuery } from '../../../common/components/page/manage_query';
+import { FlowTargetSelectConnected } from '../../components/flow_target_select_connected';
+import { IpOverview } from '../../components/ip_overview';
+import { SiemSearchBar } from '../../../common/components/search_bar';
+import { WrapperPage } from '../../../common/components/wrapper_page';
+import { IpOverviewQuery } from '../../containers/ip_overview';
+import {
+  indicesExistOrDataTemporarilyUnavailable,
+  WithSource,
+} from '../../../common/containers/source';
+import { FlowTargetSourceDest, LastEventIndexKey } from '../../../graphql/types';
+import { useKibana } from '../../../common/lib/kibana';
+import { decodeIpv6 } from '../../../common/lib/helpers';
+import { convertToBuildEsQuery } from '../../../common/lib/keury';
+import { ConditionalFlexGroup } from '../../pages/navigation/conditional_flex_group';
+import { State, inputsSelectors } from '../../../common/store';
+import { setAbsoluteRangeDatePicker as dispatchAbsoluteRangeDatePicker } from '../../../common/store/inputs/actions';
+import { setIpDetailsTablesActivePageToZero as dispatchIpDetailsTablesActivePageToZero } from '../../store/actions';
+import { SpyRoute } from '../../../common/utils/route/spy_routes';
+import { NetworkEmptyPage } from '../network_empty_page';
+import { NetworkHttpQueryTable } from './network_http_query_table';
+import { NetworkTopCountriesQueryTable } from './network_top_countries_query_table';
+import { NetworkTopNFlowQueryTable } from './network_top_n_flow_query_table';
+import { TlsQueryTable } from './tls_query_table';
+import { IPDetailsComponentProps } from './types';
+import { UsersQueryTable } from './users_query_table';
+import { AnomaliesQueryTabBody } from '../../../common/containers/anomalies/anomalies_query_tab_body';
+import { esQuery } from '../../../../../../../src/plugins/data/public';
+import { networkModel } from '../../store';
+export { getBreadcrumbs } from './utils';
+
+const IpOverviewManage = manageQuery(IpOverview);
+
+export const IPDetailsComponent: React.FC<IPDetailsComponentProps & PropsFromRedux> = ({
+  detailName,
+  filters,
+  flowTarget,
+  from,
+  isInitializing,
+  query,
+  setAbsoluteRangeDatePicker,
+  setIpDetailsTablesActivePageToZero,
+  setQuery,
+  to,
+}) => {
+  const type = networkModel.NetworkType.details;
+  const narrowDateRange = useCallback(
+    (score, interval) => {
+      const fromTo = scoreIntervalToDateTime(score, interval);
+      setAbsoluteRangeDatePicker({
+        id: 'global',
+        from: fromTo.from,
+        to: fromTo.to,
+      });
+    },
+    [setAbsoluteRangeDatePicker]
+  );
+  const kibana = useKibana();
+
+  useEffect(() => {
+    setIpDetailsTablesActivePageToZero();
+  }, [detailName, setIpDetailsTablesActivePageToZero]);
+
+  return (
+    <>
+      <WithSource sourceId="default" data-test-subj="ip-details-page">
+        {({ indicesExist, indexPattern }) => {
+          const ip = decodeIpv6(detailName);
+          const filterQuery = convertToBuildEsQuery({
+            config: esQuery.getEsQueryConfig(kibana.services.uiSettings),
+            indexPattern,
+            queries: [query],
+            filters,
+          });
+
+          return indicesExistOrDataTemporarilyUnavailable(indicesExist) ? (
+            <StickyContainer>
+              <FiltersGlobal>
+                <SiemSearchBar indexPattern={indexPattern} id="global" />
+              </FiltersGlobal>
+
+              <WrapperPage>
+                <HeaderPage
+                  border
+                  data-test-subj="ip-details-headline"
+                  draggableArguments={{ field: `${flowTarget}.ip`, value: ip }}
+                  subtitle={<LastEventTime indexKey={LastEventIndexKey.ipDetails} ip={ip} />}
+                  title={ip}
+                >
+                  <FlowTargetSelectConnected flowTarget={flowTarget} />
+                </HeaderPage>
+
+                <IpOverviewQuery
+                  skip={isInitializing}
+                  sourceId="default"
+                  filterQuery={filterQuery}
+                  type={type}
+                  ip={ip}
+                >
+                  {({ id, inspect, ipOverviewData, loading, refetch }) => (
+                    <AnomalyTableProvider
+                      criteriaFields={networkToCriteria(detailName, flowTarget)}
+                      startDate={from}
+                      endDate={to}
+                      skip={isInitializing}
+                    >
+                      {({ isLoadingAnomaliesData, anomaliesData }) => (
+                        <IpOverviewManage
+                          id={id}
+                          inspect={inspect}
+                          ip={ip}
+                          data={ipOverviewData}
+                          anomaliesData={anomaliesData}
+                          loading={loading}
+                          isLoadingAnomaliesData={isLoadingAnomaliesData}
+                          type={type}
+                          flowTarget={flowTarget}
+                          refetch={refetch}
+                          setQuery={setQuery}
+                          startDate={from}
+                          endDate={to}
+                          narrowDateRange={narrowDateRange}
+                        />
+                      )}
+                    </AnomalyTableProvider>
+                  )}
+                </IpOverviewQuery>
+
+                <EuiHorizontalRule />
+
+                <ConditionalFlexGroup direction="column">
+                  <EuiFlexItem>
+                    <NetworkTopNFlowQueryTable
+                      endDate={to}
+                      filterQuery={filterQuery}
+                      flowTarget={FlowTargetSourceDest.source}
+                      ip={ip}
+                      skip={isInitializing}
+                      startDate={from}
+                      type={type}
+                      setQuery={setQuery}
+                      indexPattern={indexPattern}
+                    />
+                  </EuiFlexItem>
+
+                  <EuiFlexItem>
+                    <NetworkTopNFlowQueryTable
+                      endDate={to}
+                      flowTarget={FlowTargetSourceDest.destination}
+                      filterQuery={filterQuery}
+                      ip={ip}
+                      skip={isInitializing}
+                      startDate={from}
+                      type={type}
+                      setQuery={setQuery}
+                      indexPattern={indexPattern}
+                    />
+                  </EuiFlexItem>
+                </ConditionalFlexGroup>
+
+                <EuiSpacer />
+
+                <ConditionalFlexGroup direction="column">
+                  <EuiFlexItem>
+                    <NetworkTopCountriesQueryTable
+                      endDate={to}
+                      filterQuery={filterQuery}
+                      flowTarget={FlowTargetSourceDest.source}
+                      ip={ip}
+                      skip={isInitializing}
+                      startDate={from}
+                      type={type}
+                      setQuery={setQuery}
+                      indexPattern={indexPattern}
+                    />
+                  </EuiFlexItem>
+
+                  <EuiFlexItem>
+                    <NetworkTopCountriesQueryTable
+                      endDate={to}
+                      flowTarget={FlowTargetSourceDest.destination}
+                      filterQuery={filterQuery}
+                      ip={ip}
+                      skip={isInitializing}
+                      startDate={from}
+                      type={type}
+                      setQuery={setQuery}
+                      indexPattern={indexPattern}
+                    />
+                  </EuiFlexItem>
+                </ConditionalFlexGroup>
+
+                <EuiSpacer />
+
+                <UsersQueryTable
+                  endDate={to}
+                  filterQuery={filterQuery}
+                  flowTarget={flowTarget}
+                  ip={ip}
+                  skip={isInitializing}
+                  startDate={from}
+                  type={type}
+                  setQuery={setQuery}
+                />
+
+                <EuiSpacer />
+
+                <NetworkHttpQueryTable
+                  endDate={to}
+                  filterQuery={filterQuery}
+                  ip={ip}
+                  skip={isInitializing}
+                  startDate={from}
+                  type={type}
+                  setQuery={setQuery}
+                />
+
+                <EuiSpacer />
+
+                <TlsQueryTable
+                  endDate={to}
+                  filterQuery={filterQuery}
+                  flowTarget={(flowTarget as unknown) as FlowTargetSourceDest}
+                  ip={ip}
+                  setQuery={setQuery}
+                  skip={isInitializing}
+                  startDate={from}
+                  type={type}
+                />
+
+                <EuiSpacer />
+
+                <AnomaliesQueryTabBody
+                  filterQuery={filterQuery}
+                  setQuery={setQuery}
+                  startDate={from}
+                  endDate={to}
+                  skip={isInitializing}
+                  ip={ip}
+                  type={type}
+                  flowTarget={flowTarget}
+                  narrowDateRange={narrowDateRange}
+                  hideHistogramIfEmpty={true}
+                  AnomaliesTableComponent={AnomaliesNetworkTable}
+                />
+              </WrapperPage>
+            </StickyContainer>
+          ) : (
+            <WrapperPage>
+              <HeaderPage border title={ip} />
+
+              <NetworkEmptyPage />
+            </WrapperPage>
+          );
+        }}
+      </WithSource>
+
+      <SpyRoute />
+    </>
+  );
+};
+IPDetailsComponent.displayName = 'IPDetailsComponent';
+
+const makeMapStateToProps = () => {
+  const getGlobalQuerySelector = inputsSelectors.globalQuerySelector();
+  const getGlobalFiltersQuerySelector = inputsSelectors.globalFiltersQuerySelector();
+
+  return (state: State) => ({
+    query: getGlobalQuerySelector(state),
+    filters: getGlobalFiltersQuerySelector(state),
+  });
+};
+
+const mapDispatchToProps = {
+  setAbsoluteRangeDatePicker: dispatchAbsoluteRangeDatePicker,
+  setIpDetailsTablesActivePageToZero: dispatchIpDetailsTablesActivePageToZero,
+};
+
+export const connector = connect(makeMapStateToProps, mapDispatchToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export const IPDetails = connector(React.memo(IPDetailsComponent));
diff --git a/x-pack/plugins/siem/public/pages/network/ip_details/network_http_query_table.tsx b/x-pack/plugins/siem/public/network/pages/ip_details/network_http_query_table.tsx
similarity index 86%
rename from x-pack/plugins/siem/public/pages/network/ip_details/network_http_query_table.tsx
rename to x-pack/plugins/siem/public/network/pages/ip_details/network_http_query_table.tsx
index d071cc67414c9f..551de698cfa08d 100644
--- a/x-pack/plugins/siem/public/pages/network/ip_details/network_http_query_table.tsx
+++ b/x-pack/plugins/siem/public/network/pages/ip_details/network_http_query_table.tsx
@@ -6,10 +6,10 @@
 
 import React from 'react';
 import { getOr } from 'lodash/fp';
-import { manageQuery } from '../../../components/page/manage_query';
+import { manageQuery } from '../../../common/components/page/manage_query';
 import { OwnProps } from './types';
-import { NetworkHttpQuery } from '../../../containers/network_http';
-import { NetworkHttpTable } from '../../../components/page/network/network_http_table';
+import { NetworkHttpQuery } from '../../containers/network_http';
+import { NetworkHttpTable } from '../../components/network_http_table';
 
 const NetworkHttpTableManage = manageQuery(NetworkHttpTable);
 
diff --git a/x-pack/plugins/siem/public/pages/network/ip_details/network_top_countries_query_table.tsx b/x-pack/plugins/siem/public/network/pages/ip_details/network_top_countries_query_table.tsx
similarity index 86%
rename from x-pack/plugins/siem/public/pages/network/ip_details/network_top_countries_query_table.tsx
rename to x-pack/plugins/siem/public/network/pages/ip_details/network_top_countries_query_table.tsx
index 8f3505009b9a51..6bc80ef1a6aae4 100644
--- a/x-pack/plugins/siem/public/pages/network/ip_details/network_top_countries_query_table.tsx
+++ b/x-pack/plugins/siem/public/network/pages/ip_details/network_top_countries_query_table.tsx
@@ -6,10 +6,10 @@
 
 import React from 'react';
 import { getOr } from 'lodash/fp';
-import { manageQuery } from '../../../components/page/manage_query';
+import { manageQuery } from '../../../common/components/page/manage_query';
 import { NetworkWithIndexComponentsQueryTableProps } from './types';
-import { NetworkTopCountriesQuery } from '../../../containers/network_top_countries';
-import { NetworkTopCountriesTable } from '../../../components/page/network/network_top_countries_table';
+import { NetworkTopCountriesQuery } from '../../containers/network_top_countries';
+import { NetworkTopCountriesTable } from '../../components/network_top_countries_table';
 
 const NetworkTopCountriesTableManage = manageQuery(NetworkTopCountriesTable);
 
diff --git a/x-pack/plugins/siem/public/pages/network/ip_details/network_top_n_flow_query_table.tsx b/x-pack/plugins/siem/public/network/pages/ip_details/network_top_n_flow_query_table.tsx
similarity index 86%
rename from x-pack/plugins/siem/public/pages/network/ip_details/network_top_n_flow_query_table.tsx
rename to x-pack/plugins/siem/public/network/pages/ip_details/network_top_n_flow_query_table.tsx
index 06ae3160415d96..158b4057a7d5e3 100644
--- a/x-pack/plugins/siem/public/pages/network/ip_details/network_top_n_flow_query_table.tsx
+++ b/x-pack/plugins/siem/public/network/pages/ip_details/network_top_n_flow_query_table.tsx
@@ -6,9 +6,9 @@
 
 import { getOr } from 'lodash/fp';
 import React from 'react';
-import { manageQuery } from '../../../components/page/manage_query';
-import { NetworkTopNFlowTable } from '../../../components/page/network/network_top_n_flow_table';
-import { NetworkTopNFlowQuery } from '../../../containers/network_top_n_flow';
+import { manageQuery } from '../../../common/components/page/manage_query';
+import { NetworkTopNFlowTable } from '../../components/network_top_n_flow_table';
+import { NetworkTopNFlowQuery } from '../../containers/network_top_n_flow';
 import { NetworkWithIndexComponentsQueryTableProps } from './types';
 
 const NetworkTopNFlowTableManage = manageQuery(NetworkTopNFlowTable);
diff --git a/x-pack/plugins/siem/public/pages/network/ip_details/tls_query_table.tsx b/x-pack/plugins/siem/public/network/pages/ip_details/tls_query_table.tsx
similarity index 87%
rename from x-pack/plugins/siem/public/pages/network/ip_details/tls_query_table.tsx
rename to x-pack/plugins/siem/public/network/pages/ip_details/tls_query_table.tsx
index ad3ffb8cb0a578..f0c3628af78d85 100644
--- a/x-pack/plugins/siem/public/pages/network/ip_details/tls_query_table.tsx
+++ b/x-pack/plugins/siem/public/network/pages/ip_details/tls_query_table.tsx
@@ -6,9 +6,9 @@
 
 import { getOr } from 'lodash/fp';
 import React from 'react';
-import { manageQuery } from '../../../components/page/manage_query';
-import { TlsTable } from '../../../components/page/network/tls_table';
-import { TlsQuery } from '../../../containers/tls';
+import { manageQuery } from '../../../common/components/page/manage_query';
+import { TlsTable } from '../../components/tls_table';
+import { TlsQuery } from '../../containers/tls';
 import { TlsQueryTableComponentProps } from './types';
 
 const TlsTableManage = manageQuery(TlsTable);
diff --git a/x-pack/plugins/siem/public/network/pages/ip_details/types.ts b/x-pack/plugins/siem/public/network/pages/ip_details/types.ts
new file mode 100644
index 00000000000000..02d83208884b41
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/pages/ip_details/types.ts
@@ -0,0 +1,53 @@
+/*
+ * 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 { IIndexPattern } from 'src/plugins/data/public';
+
+import { ESTermQuery } from '../../../../common/typed_json';
+import { NetworkType } from '../../store/model';
+import { InspectQuery, Refetch } from '../../../common/store/inputs/model';
+import { FlowTarget, FlowTargetSourceDest } from '../../../graphql/types';
+import { GlobalTimeArgs } from '../../../common/containers/global_time';
+
+export const type = NetworkType.details;
+
+export type IPDetailsComponentProps = GlobalTimeArgs & {
+  detailName: string;
+  flowTarget: FlowTarget;
+};
+
+export interface OwnProps {
+  type: NetworkType;
+  startDate: number;
+  endDate: number;
+  filterQuery: string | ESTermQuery;
+  ip: string;
+  skip: boolean;
+  setQuery: ({
+    id,
+    inspect,
+    loading,
+    refetch,
+  }: {
+    id: string;
+    inspect: InspectQuery | null;
+    loading: boolean;
+    refetch: Refetch;
+  }) => void;
+}
+
+export type NetworkComponentsQueryProps = OwnProps & {
+  flowTarget: FlowTarget;
+};
+
+export type TlsQueryTableComponentProps = OwnProps & {
+  flowTarget: FlowTargetSourceDest;
+};
+
+export type NetworkWithIndexComponentsQueryTableProps = OwnProps & {
+  flowTarget: FlowTargetSourceDest;
+  indexPattern: IIndexPattern;
+};
diff --git a/x-pack/plugins/siem/public/pages/network/ip_details/users_query_table.tsx b/x-pack/plugins/siem/public/network/pages/ip_details/users_query_table.tsx
similarity index 87%
rename from x-pack/plugins/siem/public/pages/network/ip_details/users_query_table.tsx
rename to x-pack/plugins/siem/public/network/pages/ip_details/users_query_table.tsx
index d2f6102e86595b..4071790b4208ae 100644
--- a/x-pack/plugins/siem/public/pages/network/ip_details/users_query_table.tsx
+++ b/x-pack/plugins/siem/public/network/pages/ip_details/users_query_table.tsx
@@ -6,10 +6,10 @@
 
 import React from 'react';
 import { getOr } from 'lodash/fp';
-import { manageQuery } from '../../../components/page/manage_query';
-import { UsersQuery } from '../../../containers/users';
+import { manageQuery } from '../../../common/components/page/manage_query';
+import { UsersQuery } from '../../containers/users';
 import { NetworkComponentsQueryProps } from './types';
-import { UsersTable } from '../../../components/page/network/users_table';
+import { UsersTable } from '../../components/users_table';
 
 const UsersTableManage = manageQuery(UsersTable);
 
diff --git a/x-pack/plugins/siem/public/network/pages/ip_details/utils.ts b/x-pack/plugins/siem/public/network/pages/ip_details/utils.ts
new file mode 100644
index 00000000000000..b1f986f20778f2
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/pages/ip_details/utils.ts
@@ -0,0 +1,64 @@
+/*
+ * 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 { get, isEmpty } from 'lodash/fp';
+
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { ChromeBreadcrumb } from '../../../../../../../src/core/public';
+import { decodeIpv6 } from '../../../common/lib/helpers';
+import {
+  getNetworkUrl,
+  getIPDetailsUrl,
+} from '../../../common/components/link_to/redirect_to_network';
+import { networkModel } from '../../store';
+import * as i18n from '../translations';
+import { NetworkRouteType } from '../navigation/types';
+import { NetworkRouteSpyState } from '../../../common/utils/route/types';
+
+export const type = networkModel.NetworkType.details;
+const TabNameMappedToI18nKey: Record<NetworkRouteType, string> = {
+  [NetworkRouteType.alerts]: i18n.NAVIGATION_ALERTS_TITLE,
+  [NetworkRouteType.anomalies]: i18n.NAVIGATION_ANOMALIES_TITLE,
+  [NetworkRouteType.flows]: i18n.NAVIGATION_FLOWS_TITLE,
+  [NetworkRouteType.dns]: i18n.NAVIGATION_DNS_TITLE,
+  [NetworkRouteType.http]: i18n.NAVIGATION_HTTP_TITLE,
+  [NetworkRouteType.tls]: i18n.NAVIGATION_TLS_TITLE,
+};
+
+export const getBreadcrumbs = (
+  params: NetworkRouteSpyState,
+  search: string[]
+): ChromeBreadcrumb[] => {
+  let breadcrumb = [
+    {
+      text: i18n.PAGE_TITLE,
+      href: `${getNetworkUrl()}${!isEmpty(search[0]) ? search[0] : ''}`,
+    },
+  ];
+  if (params.detailName != null) {
+    breadcrumb = [
+      ...breadcrumb,
+      {
+        text: decodeIpv6(params.detailName),
+        href: `${getIPDetailsUrl(params.detailName, params.flowTarget)}${
+          !isEmpty(search[1]) ? search[1] : ''
+        }`,
+      },
+    ];
+  }
+
+  const tabName = get('tabName', params);
+  if (!tabName) return breadcrumb;
+
+  breadcrumb = [
+    ...breadcrumb,
+    {
+      text: TabNameMappedToI18nKey[tabName],
+      href: '',
+    },
+  ];
+  return breadcrumb;
+};
diff --git a/x-pack/plugins/siem/public/network/pages/navigation/alerts_query_tab_body.tsx b/x-pack/plugins/siem/public/network/pages/navigation/alerts_query_tab_body.tsx
new file mode 100644
index 00000000000000..c5f59e751ca9ae
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/pages/navigation/alerts_query_tab_body.tsx
@@ -0,0 +1,68 @@
+/*
+ * 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 { Filter } from '../../../../../../../src/plugins/data/common/es_query';
+import { AlertsView } from '../../../common/components/alerts_viewer';
+import { NetworkComponentQueryProps } from './types';
+
+export const filterNetworkData: Filter[] = [
+  {
+    query: {
+      bool: {
+        filter: [
+          {
+            bool: {
+              should: [
+                {
+                  bool: {
+                    should: [
+                      {
+                        exists: {
+                          field: 'source.ip',
+                        },
+                      },
+                    ],
+                    minimum_should_match: 1,
+                  },
+                },
+                {
+                  bool: {
+                    should: [
+                      {
+                        exists: {
+                          field: 'destination.ip',
+                        },
+                      },
+                    ],
+                    minimum_should_match: 1,
+                  },
+                },
+              ],
+              minimum_should_match: 1,
+            },
+          },
+        ],
+      },
+    },
+    meta: {
+      alias: '',
+      disabled: false,
+      key: 'bool',
+      negate: false,
+      type: 'custom',
+      value:
+        '{"bool":{"filter":[{"bool":{"should":[{"bool":{"should":[{"exists":{"field": "source.ip"}}],"minimum_should_match":1}},{"bool":{"should":[{"exists":{"field": "destination.ip"}}],"minimum_should_match":1}}],"minimum_should_match":1}}]}}',
+    },
+  },
+];
+
+export const NetworkAlertsQueryTabBody = React.memo((alertsProps: NetworkComponentQueryProps) => (
+  <AlertsView {...alertsProps} pageFilters={filterNetworkData} />
+));
+
+NetworkAlertsQueryTabBody.displayName = 'NetworkAlertsQueryTabBody';
diff --git a/x-pack/plugins/siem/public/pages/network/navigation/conditional_flex_group.tsx b/x-pack/plugins/siem/public/network/pages/navigation/conditional_flex_group.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/network/navigation/conditional_flex_group.tsx
rename to x-pack/plugins/siem/public/network/pages/navigation/conditional_flex_group.tsx
diff --git a/x-pack/plugins/siem/public/pages/network/navigation/countries_query_tab_body.tsx b/x-pack/plugins/siem/public/network/pages/navigation/countries_query_tab_body.tsx
similarity index 85%
rename from x-pack/plugins/siem/public/pages/network/navigation/countries_query_tab_body.tsx
rename to x-pack/plugins/siem/public/network/pages/navigation/countries_query_tab_body.tsx
index 6ddd3bbec3a322..0c569952458e47 100644
--- a/x-pack/plugins/siem/public/pages/network/navigation/countries_query_tab_body.tsx
+++ b/x-pack/plugins/siem/public/network/pages/navigation/countries_query_tab_body.tsx
@@ -7,10 +7,10 @@
 import React from 'react';
 import { getOr } from 'lodash/fp';
 
-import { NetworkTopCountriesTable } from '../../../components/page/network';
-import { NetworkTopCountriesQuery } from '../../../containers/network_top_countries';
-import { networkModel } from '../../../store';
-import { manageQuery } from '../../../components/page/manage_query';
+import { NetworkTopCountriesTable } from '../../components/network_top_countries_table';
+import { NetworkTopCountriesQuery } from '../../containers/network_top_countries';
+import { networkModel } from '../../store';
+import { manageQuery } from '../../../common/components/page/manage_query';
 
 import { IPsQueryTabBodyProps as CountriesQueryTabBodyProps } from './types';
 
diff --git a/x-pack/plugins/siem/public/pages/network/navigation/dns_query_tab_body.tsx b/x-pack/plugins/siem/public/network/pages/navigation/dns_query_tab_body.tsx
similarity index 88%
rename from x-pack/plugins/siem/public/pages/network/navigation/dns_query_tab_body.tsx
rename to x-pack/plugins/siem/public/network/pages/navigation/dns_query_tab_body.tsx
index fe456afcc7189b..acabdd1d3608eb 100644
--- a/x-pack/plugins/siem/public/pages/network/navigation/dns_query_tab_body.tsx
+++ b/x-pack/plugins/siem/public/network/pages/navigation/dns_query_tab_body.tsx
@@ -7,19 +7,19 @@
 import React, { useEffect, useCallback, useMemo } from 'react';
 import { getOr } from 'lodash/fp';
 
-import { NetworkDnsTable } from '../../../components/page/network/network_dns_table';
-import { NetworkDnsQuery, HISTOGRAM_ID } from '../../../containers/network_dns';
-import { manageQuery } from '../../../components/page/manage_query';
+import { NetworkDnsTable } from '../../components/network_dns_table';
+import { NetworkDnsQuery, HISTOGRAM_ID } from '../../containers/network_dns';
+import { manageQuery } from '../../../common/components/page/manage_query';
 
 import { NetworkComponentQueryProps } from './types';
-import { networkModel } from '../../../store';
+import { networkModel } from '../../store';
 
 import {
   MatrixHistogramOption,
   MatrixHisrogramConfigs,
-} from '../../../components/matrix_histogram/types';
+} from '../../../common/components/matrix_histogram/types';
 import * as i18n from '../translations';
-import { MatrixHistogramContainer } from '../../../components/matrix_histogram';
+import { MatrixHistogramContainer } from '../../../common/components/matrix_histogram';
 import { HistogramType } from '../../../graphql/types';
 
 const NetworkDnsTableManage = manageQuery(NetworkDnsTable);
diff --git a/x-pack/plugins/siem/public/pages/network/navigation/http_query_tab_body.tsx b/x-pack/plugins/siem/public/network/pages/navigation/http_query_tab_body.tsx
similarity index 84%
rename from x-pack/plugins/siem/public/pages/network/navigation/http_query_tab_body.tsx
rename to x-pack/plugins/siem/public/network/pages/navigation/http_query_tab_body.tsx
index 639a14d354ced4..7e0c4025d6cac1 100644
--- a/x-pack/plugins/siem/public/pages/network/navigation/http_query_tab_body.tsx
+++ b/x-pack/plugins/siem/public/network/pages/navigation/http_query_tab_body.tsx
@@ -7,10 +7,10 @@
 import React from 'react';
 import { getOr } from 'lodash/fp';
 
-import { NetworkHttpTable } from '../../../components/page/network';
-import { NetworkHttpQuery } from '../../../containers/network_http';
-import { networkModel } from '../../../store';
-import { manageQuery } from '../../../components/page/manage_query';
+import { NetworkHttpTable } from '../../components/network_http_table';
+import { NetworkHttpQuery } from '../../containers/network_http';
+import { networkModel } from '../../store';
+import { manageQuery } from '../../../common/components/page/manage_query';
 
 import { HttpQueryTabBodyProps } from './types';
 
diff --git a/x-pack/plugins/siem/public/pages/network/navigation/index.ts b/x-pack/plugins/siem/public/network/pages/navigation/index.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/network/navigation/index.ts
rename to x-pack/plugins/siem/public/network/pages/navigation/index.ts
diff --git a/x-pack/plugins/siem/public/pages/network/navigation/ips_query_tab_body.tsx b/x-pack/plugins/siem/public/network/pages/navigation/ips_query_tab_body.tsx
similarity index 84%
rename from x-pack/plugins/siem/public/pages/network/navigation/ips_query_tab_body.tsx
rename to x-pack/plugins/siem/public/network/pages/navigation/ips_query_tab_body.tsx
index c4391ba2ec90ac..a9f4d504847a07 100644
--- a/x-pack/plugins/siem/public/pages/network/navigation/ips_query_tab_body.tsx
+++ b/x-pack/plugins/siem/public/network/pages/navigation/ips_query_tab_body.tsx
@@ -7,10 +7,10 @@
 import React from 'react';
 import { getOr } from 'lodash/fp';
 
-import { NetworkTopNFlowTable } from '../../../components/page/network';
-import { NetworkTopNFlowQuery } from '../../../containers/network_top_n_flow';
-import { networkModel } from '../../../store';
-import { manageQuery } from '../../../components/page/manage_query';
+import { NetworkTopNFlowTable } from '../../components/network_top_n_flow_table';
+import { NetworkTopNFlowQuery } from '../../containers/network_top_n_flow';
+import { networkModel } from '../../store';
+import { manageQuery } from '../../../common/components/page/manage_query';
 
 import { IPsQueryTabBodyProps } from './types';
 
diff --git a/x-pack/plugins/siem/public/pages/network/navigation/nav_tabs.tsx b/x-pack/plugins/siem/public/network/pages/navigation/nav_tabs.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/network/navigation/nav_tabs.tsx
rename to x-pack/plugins/siem/public/network/pages/navigation/nav_tabs.tsx
diff --git a/x-pack/plugins/siem/public/pages/network/navigation/network_routes.tsx b/x-pack/plugins/siem/public/network/pages/navigation/network_routes.tsx
similarity index 90%
rename from x-pack/plugins/siem/public/pages/network/navigation/network_routes.tsx
rename to x-pack/plugins/siem/public/network/pages/navigation/network_routes.tsx
index fc8b632f87c597..08ed0d9769be8a 100644
--- a/x-pack/plugins/siem/public/pages/network/navigation/network_routes.tsx
+++ b/x-pack/plugins/siem/public/network/pages/navigation/network_routes.tsx
@@ -9,20 +9,20 @@ import { Route, Switch } from 'react-router-dom';
 import { EuiFlexItem, EuiSpacer } from '@elastic/eui';
 
 import { FlowTargetSourceDest } from '../../../graphql/types';
-import { scoreIntervalToDateTime } from '../../../components/ml/score/score_interval_to_datetime';
+import { scoreIntervalToDateTime } from '../../../common/components/ml/score/score_interval_to_datetime';
 
 import { IPsQueryTabBody } from './ips_query_tab_body';
 import { CountriesQueryTabBody } from './countries_query_tab_body';
 import { HttpQueryTabBody } from './http_query_tab_body';
-import { AnomaliesQueryTabBody } from '../../../containers/anomalies/anomalies_query_tab_body';
-import { AnomaliesNetworkTable } from '../../../components/ml/tables/anomalies_network_table';
+import { AnomaliesQueryTabBody } from '../../../common/containers/anomalies/anomalies_query_tab_body';
+import { AnomaliesNetworkTable } from '../../../common/components/ml/tables/anomalies_network_table';
 import { DnsQueryTabBody } from './dns_query_tab_body';
 import { ConditionalFlexGroup } from './conditional_flex_group';
 import { NetworkRoutesProps, NetworkRouteType } from './types';
 import { TlsQueryTabBody } from './tls_query_tab_body';
-import { Anomaly } from '../../../components/ml/types';
+import { Anomaly } from '../../../common/components/ml/types';
 import { NetworkAlertsQueryTabBody } from './alerts_query_tab_body';
-import { UpdateDateRange } from '../../../components/charts/common';
+import { UpdateDateRange } from '../../../common/components/charts/common';
 
 export const NetworkRoutes = React.memo<NetworkRoutesProps>(
   ({
diff --git a/x-pack/plugins/siem/public/pages/network/navigation/network_routes_loading.tsx b/x-pack/plugins/siem/public/network/pages/navigation/network_routes_loading.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/network/navigation/network_routes_loading.tsx
rename to x-pack/plugins/siem/public/network/pages/navigation/network_routes_loading.tsx
diff --git a/x-pack/plugins/siem/public/pages/network/navigation/tls_query_tab_body.tsx b/x-pack/plugins/siem/public/network/pages/navigation/tls_query_tab_body.tsx
similarity index 87%
rename from x-pack/plugins/siem/public/pages/network/navigation/tls_query_tab_body.tsx
rename to x-pack/plugins/siem/public/network/pages/navigation/tls_query_tab_body.tsx
index 0adfec203e0a61..00da5496e54405 100644
--- a/x-pack/plugins/siem/public/pages/network/navigation/tls_query_tab_body.tsx
+++ b/x-pack/plugins/siem/public/network/pages/navigation/tls_query_tab_body.tsx
@@ -5,9 +5,9 @@
  */
 import React from 'react';
 import { getOr } from 'lodash/fp';
-import { manageQuery } from '../../../components/page/manage_query';
-import { TlsQuery } from '../../../containers/tls';
-import { TlsTable } from '../../../components/page/network/tls_table';
+import { manageQuery } from '../../../common/components/page/manage_query';
+import { TlsQuery } from '../../../network/containers/tls';
+import { TlsTable } from '../../components/tls_table';
 import { TlsQueryTabBodyProps } from './types';
 
 const TlsTableManage = manageQuery(TlsTable);
diff --git a/x-pack/plugins/siem/public/network/pages/navigation/types.ts b/x-pack/plugins/siem/public/network/pages/navigation/types.ts
new file mode 100644
index 00000000000000..0f48aad57b3a84
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/pages/navigation/types.ts
@@ -0,0 +1,77 @@
+/*
+ * 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 { ESTermQuery } from '../../../../common/typed_json';
+import { IIndexPattern } from '../../../../../../../src/plugins/data/common';
+
+import { NavTab } from '../../../common/components/navigation/types';
+import { FlowTargetSourceDest } from '../../../graphql/types';
+import { networkModel } from '../../store';
+import { GlobalTimeArgs } from '../../../common/containers/global_time';
+
+import { SetAbsoluteRangeDatePicker } from '../types';
+import { NarrowDateRange } from '../../../common/components/ml/types';
+
+interface QueryTabBodyProps extends Pick<GlobalTimeArgs, 'setQuery' | 'deleteQuery'> {
+  skip: boolean;
+  type: networkModel.NetworkType;
+  startDate: number;
+  endDate: number;
+  filterQuery?: string | ESTermQuery;
+  narrowDateRange?: NarrowDateRange;
+}
+
+export type NetworkComponentQueryProps = QueryTabBodyProps;
+
+export type IPsQueryTabBodyProps = QueryTabBodyProps & {
+  indexPattern: IIndexPattern;
+  flowTarget: FlowTargetSourceDest;
+};
+
+export type TlsQueryTabBodyProps = QueryTabBodyProps & {
+  flowTarget: FlowTargetSourceDest;
+  ip?: string;
+};
+
+export type HttpQueryTabBodyProps = QueryTabBodyProps & {
+  ip?: string;
+};
+
+export type NetworkRoutesProps = GlobalTimeArgs & {
+  networkPagePath: string;
+  type: networkModel.NetworkType;
+  filterQuery?: string | ESTermQuery;
+  indexPattern: IIndexPattern;
+  setAbsoluteRangeDatePicker: SetAbsoluteRangeDatePicker;
+};
+
+export type KeyNetworkNavTabWithoutMlPermission = NetworkRouteType.dns &
+  NetworkRouteType.flows &
+  NetworkRouteType.http &
+  NetworkRouteType.tls &
+  NetworkRouteType.alerts;
+
+type KeyNetworkNavTabWithMlPermission = KeyNetworkNavTabWithoutMlPermission &
+  NetworkRouteType.anomalies;
+
+type KeyNetworkNavTab = KeyNetworkNavTabWithoutMlPermission | KeyNetworkNavTabWithMlPermission;
+
+export type NetworkNavTab = Record<KeyNetworkNavTab, NavTab>;
+
+export enum NetworkRouteType {
+  flows = 'flows',
+  dns = 'dns',
+  anomalies = 'anomalies',
+  tls = 'tls',
+  http = 'http',
+  alerts = 'alerts',
+}
+
+export type GetNetworkRoutePath = (
+  pagePath: string,
+  capabilitiesFetched: boolean,
+  hasMlUserPermission: boolean
+) => string;
diff --git a/x-pack/plugins/siem/public/pages/network/navigation/utils.ts b/x-pack/plugins/siem/public/network/pages/navigation/utils.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/network/navigation/utils.ts
rename to x-pack/plugins/siem/public/network/pages/navigation/utils.ts
diff --git a/x-pack/plugins/siem/public/pages/network/network.test.tsx b/x-pack/plugins/siem/public/network/pages/network.test.tsx
similarity index 89%
rename from x-pack/plugins/siem/public/pages/network/network.test.tsx
rename to x-pack/plugins/siem/public/network/pages/network.test.tsx
index 300cb83c4ce753..1a8313db92b61d 100644
--- a/x-pack/plugins/siem/public/pages/network/network.test.tsx
+++ b/x-pack/plugins/siem/public/network/pages/network.test.tsx
@@ -10,21 +10,27 @@ import React from 'react';
 import { Router } from 'react-router-dom';
 import { MockedProvider } from 'react-apollo/test-utils';
 
-import '../../mock/match_media';
+import '../../common/mock/match_media';
 import { Filter } from '../../../../../../src/plugins/data/common/es_query';
-import { mocksSource } from '../../containers/source/mock';
-import { TestProviders, mockGlobalState, apolloClientObservable } from '../../mock';
-import { State, createStore } from '../../store';
-import { inputsActions } from '../../store/inputs';
+import { mocksSource } from '../../common/containers/source/mock';
+import {
+  TestProviders,
+  mockGlobalState,
+  apolloClientObservable,
+  SUB_PLUGINS_REDUCER,
+} from '../../common/mock';
+import { State, createStore } from '../../common/store';
+import { inputsActions } from '../../common/store/inputs';
+
 import { Network } from './network';
 import { NetworkRoutes } from './navigation';
 
 // Test will fail because we will to need to mock some core services to make the test work
 // For now let's forget about SiemSearchBar and QueryBar
-jest.mock('../../components/search_bar', () => ({
+jest.mock('../../common/components/search_bar', () => ({
   SiemSearchBar: () => null,
 }));
-jest.mock('../../components/query_bar', () => ({
+jest.mock('../../common/components/query_bar', () => ({
   QueryBar: () => null,
 }));
 
@@ -149,7 +155,7 @@ describe('rendering - rendering', () => {
     ];
     localSource[0].result.data.source.status.indicesExist = true;
     const myState: State = mockGlobalState;
-    const myStore = createStore(myState, apolloClientObservable);
+    const myStore = createStore(myState, SUB_PLUGINS_REDUCER, apolloClientObservable);
     const wrapper = mount(
       <TestProviders store={myStore}>
         <MockedProvider mocks={localSource} addTypename={false}>
diff --git a/x-pack/plugins/siem/public/network/pages/network.tsx b/x-pack/plugins/siem/public/network/pages/network.tsx
new file mode 100644
index 00000000000000..2f7a97ed3d19ef
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/pages/network.tsx
@@ -0,0 +1,203 @@
+/*
+ * 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 { EuiSpacer } from '@elastic/eui';
+import React, { useCallback, useMemo } from 'react';
+import { connect, ConnectedProps } from 'react-redux';
+import { useParams } from 'react-router-dom';
+import { StickyContainer } from 'react-sticky';
+
+import { esQuery } from '../../../../../../src/plugins/data/public';
+import { UpdateDateRange } from '../../common/components/charts/common';
+import { EmbeddedMap } from '../components/embeddables/embedded_map';
+import { FiltersGlobal } from '../../common/components/filters_global';
+import { HeaderPage } from '../../common/components/header_page';
+import { LastEventTime } from '../../common/components/last_event_time';
+import { SiemNavigation } from '../../common/components/navigation';
+import { manageQuery } from '../../common/components/page/manage_query';
+import { KpiNetworkComponent } from '..//components/kpi_network';
+import { SiemSearchBar } from '../../common/components/search_bar';
+import { WrapperPage } from '../../common/components/wrapper_page';
+import { KpiNetworkQuery } from '../../network/containers/kpi_network';
+import {
+  indicesExistOrDataTemporarilyUnavailable,
+  WithSource,
+} from '../../common/containers/source';
+import { LastEventIndexKey } from '../../graphql/types';
+import { useKibana } from '../../common/lib/kibana';
+import { convertToBuildEsQuery } from '../../common/lib/keury';
+import { State, inputsSelectors } from '../../common/store';
+import { setAbsoluteRangeDatePicker as dispatchSetAbsoluteRangeDatePicker } from '../../common/store/inputs/actions';
+import { SpyRoute } from '../../common/utils/route/spy_routes';
+import { networkModel } from '../store';
+import { navTabsNetwork, NetworkRoutes, NetworkRoutesLoading } from './navigation';
+import { filterNetworkData } from './navigation/alerts_query_tab_body';
+import { NetworkEmptyPage } from './network_empty_page';
+import * as i18n from './translations';
+import { NetworkComponentProps } from './types';
+import { NetworkRouteType } from './navigation/types';
+
+const KpiNetworkComponentManage = manageQuery(KpiNetworkComponent);
+const sourceId = 'default';
+
+const NetworkComponent = React.memo<NetworkComponentProps & PropsFromRedux>(
+  ({
+    filters,
+    query,
+    setAbsoluteRangeDatePicker,
+    networkPagePath,
+    to,
+    from,
+    setQuery,
+    isInitializing,
+    hasMlUserPermissions,
+    capabilitiesFetched,
+  }) => {
+    const kibana = useKibana();
+    const { tabName } = useParams();
+
+    const tabsFilters = useMemo(() => {
+      if (tabName === NetworkRouteType.alerts) {
+        return filters.length > 0 ? [...filters, ...filterNetworkData] : filterNetworkData;
+      }
+      return filters;
+    }, [tabName, filters]);
+
+    const narrowDateRange = useCallback<UpdateDateRange>(
+      ({ x }) => {
+        if (!x) {
+          return;
+        }
+        const [min, max] = x;
+        setAbsoluteRangeDatePicker({ id: 'global', from: min, to: max });
+      },
+      [setAbsoluteRangeDatePicker]
+    );
+
+    return (
+      <>
+        <WithSource sourceId={sourceId}>
+          {({ indicesExist, indexPattern }) => {
+            const filterQuery = convertToBuildEsQuery({
+              config: esQuery.getEsQueryConfig(kibana.services.uiSettings),
+              indexPattern,
+              queries: [query],
+              filters,
+            });
+            const tabsFilterQuery = convertToBuildEsQuery({
+              config: esQuery.getEsQueryConfig(kibana.services.uiSettings),
+              indexPattern,
+              queries: [query],
+              filters: tabsFilters,
+            });
+
+            return indicesExistOrDataTemporarilyUnavailable(indicesExist) ? (
+              <StickyContainer>
+                <FiltersGlobal>
+                  <SiemSearchBar indexPattern={indexPattern} id="global" />
+                </FiltersGlobal>
+
+                <WrapperPage>
+                  <HeaderPage
+                    border
+                    subtitle={<LastEventTime indexKey={LastEventIndexKey.network} />}
+                    title={i18n.PAGE_TITLE}
+                  />
+
+                  <EmbeddedMap
+                    query={query}
+                    filters={filters}
+                    startDate={from}
+                    endDate={to}
+                    setQuery={setQuery}
+                  />
+
+                  <EuiSpacer />
+
+                  <KpiNetworkQuery
+                    endDate={to}
+                    filterQuery={filterQuery}
+                    skip={isInitializing}
+                    sourceId={sourceId}
+                    startDate={from}
+                  >
+                    {({ kpiNetwork, loading, id, inspect, refetch }) => (
+                      <KpiNetworkComponentManage
+                        id={id}
+                        inspect={inspect}
+                        setQuery={setQuery}
+                        refetch={refetch}
+                        data={kpiNetwork}
+                        loading={loading}
+                        from={from}
+                        to={to}
+                        narrowDateRange={narrowDateRange}
+                      />
+                    )}
+                  </KpiNetworkQuery>
+
+                  {capabilitiesFetched && !isInitializing ? (
+                    <>
+                      <EuiSpacer />
+
+                      <SiemNavigation navTabs={navTabsNetwork(hasMlUserPermissions)} />
+
+                      <EuiSpacer />
+
+                      <NetworkRoutes
+                        filterQuery={tabsFilterQuery}
+                        from={from}
+                        isInitializing={isInitializing}
+                        indexPattern={indexPattern}
+                        setQuery={setQuery}
+                        setAbsoluteRangeDatePicker={setAbsoluteRangeDatePicker}
+                        type={networkModel.NetworkType.page}
+                        to={to}
+                        networkPagePath={networkPagePath}
+                      />
+                    </>
+                  ) : (
+                    <NetworkRoutesLoading />
+                  )}
+
+                  <EuiSpacer />
+                </WrapperPage>
+              </StickyContainer>
+            ) : (
+              <WrapperPage>
+                <HeaderPage border title={i18n.PAGE_TITLE} />
+                <NetworkEmptyPage />
+              </WrapperPage>
+            );
+          }}
+        </WithSource>
+
+        <SpyRoute />
+      </>
+    );
+  }
+);
+NetworkComponent.displayName = 'NetworkComponent';
+
+const makeMapStateToProps = () => {
+  const getGlobalQuerySelector = inputsSelectors.globalQuerySelector();
+  const getGlobalFiltersQuerySelector = inputsSelectors.globalFiltersQuerySelector();
+  const mapStateToProps = (state: State) => ({
+    query: getGlobalQuerySelector(state),
+    filters: getGlobalFiltersQuerySelector(state),
+  });
+  return mapStateToProps;
+};
+
+const mapDispatchToProps = {
+  setAbsoluteRangeDatePicker: dispatchSetAbsoluteRangeDatePicker,
+};
+
+const connector = connect(makeMapStateToProps, mapDispatchToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export const Network = connector(NetworkComponent);
diff --git a/x-pack/plugins/siem/public/pages/network/network_empty_page.tsx b/x-pack/plugins/siem/public/network/pages/network_empty_page.tsx
similarity index 85%
rename from x-pack/plugins/siem/public/pages/network/network_empty_page.tsx
rename to x-pack/plugins/siem/public/network/pages/network_empty_page.tsx
index 22db00400bf8a2..0dbcddd5d28721 100644
--- a/x-pack/plugins/siem/public/pages/network/network_empty_page.tsx
+++ b/x-pack/plugins/siem/public/network/pages/network_empty_page.tsx
@@ -6,9 +6,9 @@
 
 import React from 'react';
 
-import { useKibana } from '../../lib/kibana';
-import { EmptyPage } from '../../components/empty_page';
-import * as i18n from '../common/translations';
+import { useKibana } from '../../common/lib/kibana';
+import { EmptyPage } from '../../common/components/empty_page';
+import * as i18n from '../../common/translations';
 
 export const NetworkEmptyPage = React.memo(() => {
   const { http, docLinks } = useKibana().services;
diff --git a/x-pack/plugins/siem/public/pages/network/translations.ts b/x-pack/plugins/siem/public/network/pages/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/network/translations.ts
rename to x-pack/plugins/siem/public/network/pages/translations.ts
diff --git a/x-pack/plugins/siem/public/network/pages/types.ts b/x-pack/plugins/siem/public/network/pages/types.ts
new file mode 100644
index 00000000000000..e4170ee4b908b2
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/pages/types.ts
@@ -0,0 +1,23 @@
+/*
+ * 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 { RouteComponentProps } from 'react-router-dom';
+import { ActionCreator } from 'typescript-fsa';
+import { InputsModelId } from '../../common/store/inputs/constants';
+import { GlobalTimeArgs } from '../../common/containers/global_time';
+
+export type SetAbsoluteRangeDatePicker = ActionCreator<{
+  id: InputsModelId;
+  from: number;
+  to: number;
+}>;
+
+export type NetworkComponentProps = Partial<RouteComponentProps<{}>> &
+  GlobalTimeArgs & {
+    networkPagePath: string;
+    hasMlUserPermissions: boolean;
+    capabilitiesFetched: boolean;
+  };
diff --git a/x-pack/plugins/siem/public/network/routes.tsx b/x-pack/plugins/siem/public/network/routes.tsx
new file mode 100644
index 00000000000000..6f3fd28ec53b7b
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/routes.tsx
@@ -0,0 +1,18 @@
+/*
+ * 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 { Route } from 'react-router-dom';
+
+import { NetworkContainer } from './pages';
+import { SiemPageName } from '../app/types';
+
+export const getNetworkRoutes = () => [
+  <Route
+    path={`/:pageName(${SiemPageName.network})`}
+    render={({ location, match }) => <NetworkContainer location={location} url={match.url} />}
+  />,
+];
diff --git a/x-pack/plugins/siem/public/network/store/actions.ts b/x-pack/plugins/siem/public/network/store/actions.ts
new file mode 100644
index 00000000000000..2a9766f9592224
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/store/actions.ts
@@ -0,0 +1,24 @@
+/*
+ * 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 actionCreatorFactory from 'typescript-fsa';
+import { networkModel } from '.';
+
+const actionCreator = actionCreatorFactory('x-pack/siem/local/network');
+
+export const updateNetworkTable = actionCreator<{
+  networkType: networkModel.NetworkType;
+  tableType: networkModel.NetworkTableType | networkModel.IpDetailsTableType;
+  updates: networkModel.TableUpdates;
+}>('UPDATE_NETWORK_TABLE');
+
+export const setIpDetailsTablesActivePageToZero = actionCreator(
+  'SET_IP_DETAILS_TABLES_ACTIVE_PAGE_TO_ZERO'
+);
+
+export const setNetworkTablesActivePageToZero = actionCreator(
+  'SET_NETWORK_TABLES_ACTIVE_PAGE_TO_ZERO'
+);
diff --git a/x-pack/plugins/siem/public/network/store/helpers.test.ts b/x-pack/plugins/siem/public/network/store/helpers.test.ts
new file mode 100644
index 00000000000000..a3a2a9b7f5393a
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/store/helpers.test.ts
@@ -0,0 +1,248 @@
+/*
+ * 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 {
+  Direction,
+  FlowTarget,
+  NetworkDnsFields,
+  NetworkTopTablesFields,
+  TlsFields,
+  UsersFields,
+} from '../../graphql/types';
+import { DEFAULT_TABLE_LIMIT } from '../../common/store/constants';
+import { NetworkModel, NetworkTableType, IpDetailsTableType, NetworkType } from './model';
+import { setNetworkQueriesActivePageToZero } from './helpers';
+
+export const mockNetworkState: NetworkModel = {
+  page: {
+    queries: {
+      [NetworkTableType.topCountriesSource]: {
+        activePage: 7,
+        limit: DEFAULT_TABLE_LIMIT,
+        sort: {
+          field: NetworkTopTablesFields.bytes_out,
+          direction: Direction.desc,
+        },
+      },
+      [NetworkTableType.topCountriesDestination]: {
+        activePage: 3,
+        limit: DEFAULT_TABLE_LIMIT,
+        sort: {
+          field: NetworkTopTablesFields.bytes_out,
+          direction: Direction.desc,
+        },
+      },
+      [NetworkTableType.topNFlowSource]: {
+        activePage: 7,
+        limit: DEFAULT_TABLE_LIMIT,
+        sort: {
+          field: NetworkTopTablesFields.bytes_out,
+          direction: Direction.desc,
+        },
+      },
+      [NetworkTableType.topNFlowDestination]: {
+        activePage: 3,
+        limit: DEFAULT_TABLE_LIMIT,
+        sort: {
+          field: NetworkTopTablesFields.bytes_out,
+          direction: Direction.desc,
+        },
+      },
+      [NetworkTableType.dns]: {
+        activePage: 5,
+        limit: DEFAULT_TABLE_LIMIT,
+        sort: {
+          field: NetworkDnsFields.uniqueDomains,
+          direction: Direction.desc,
+        },
+        isPtrIncluded: false,
+      },
+      [NetworkTableType.tls]: {
+        activePage: 2,
+        limit: DEFAULT_TABLE_LIMIT,
+        sort: {
+          field: TlsFields._id,
+          direction: Direction.desc,
+        },
+      },
+      [NetworkTableType.http]: {
+        activePage: 0,
+        limit: DEFAULT_TABLE_LIMIT,
+        sort: { direction: Direction.desc },
+      },
+      [NetworkTableType.alerts]: {
+        activePage: 0,
+        limit: DEFAULT_TABLE_LIMIT,
+      },
+    },
+  },
+  details: {
+    queries: {
+      [IpDetailsTableType.topCountriesSource]: {
+        activePage: 7,
+        limit: DEFAULT_TABLE_LIMIT,
+        sort: {
+          field: NetworkTopTablesFields.bytes_out,
+          direction: Direction.desc,
+        },
+      },
+      [IpDetailsTableType.topCountriesDestination]: {
+        activePage: 3,
+        limit: DEFAULT_TABLE_LIMIT,
+        sort: {
+          field: NetworkTopTablesFields.bytes_out,
+          direction: Direction.desc,
+        },
+      },
+      [IpDetailsTableType.topNFlowSource]: {
+        activePage: 7,
+        limit: DEFAULT_TABLE_LIMIT,
+        sort: {
+          field: NetworkTopTablesFields.bytes_out,
+          direction: Direction.desc,
+        },
+      },
+      [IpDetailsTableType.topNFlowDestination]: {
+        activePage: 3,
+        limit: DEFAULT_TABLE_LIMIT,
+        sort: {
+          field: NetworkTopTablesFields.bytes_out,
+          direction: Direction.desc,
+        },
+      },
+      [IpDetailsTableType.tls]: {
+        activePage: 2,
+        limit: DEFAULT_TABLE_LIMIT,
+        sort: {
+          field: TlsFields._id,
+          direction: Direction.desc,
+        },
+      },
+      [IpDetailsTableType.users]: {
+        activePage: 6,
+        limit: DEFAULT_TABLE_LIMIT,
+        sort: {
+          field: UsersFields.name,
+          direction: Direction.asc,
+        },
+      },
+      [IpDetailsTableType.http]: {
+        activePage: 0,
+        limit: DEFAULT_TABLE_LIMIT,
+        sort: { direction: Direction.desc },
+      },
+    },
+    flowTarget: FlowTarget.source,
+  },
+};
+
+describe('Network redux store', () => {
+  describe('#setNetworkQueriesActivePageToZero', () => {
+    test('set activePage to zero for all queries in network page', () => {
+      expect(setNetworkQueriesActivePageToZero(mockNetworkState, NetworkType.page)).toEqual({
+        [NetworkTableType.topNFlowSource]: {
+          activePage: 0,
+          limit: 10,
+          sort: { field: 'bytes_out', direction: 'desc' },
+        },
+        [NetworkTableType.topNFlowDestination]: {
+          activePage: 0,
+          limit: 10,
+          sort: { field: 'bytes_out', direction: 'desc' },
+        },
+        [NetworkTableType.dns]: {
+          activePage: 0,
+          limit: 10,
+          sort: { field: 'uniqueDomains', direction: 'desc' },
+          isPtrIncluded: false,
+        },
+        [NetworkTableType.http]: {
+          activePage: 0,
+          limit: 10,
+          sort: {
+            direction: 'desc',
+          },
+        },
+        [NetworkTableType.tls]: {
+          activePage: 0,
+          limit: 10,
+          sort: {
+            direction: 'desc',
+            field: '_id',
+          },
+        },
+        [NetworkTableType.topCountriesDestination]: {
+          activePage: 0,
+          limit: 10,
+          sort: {
+            direction: 'desc',
+            field: 'bytes_out',
+          },
+        },
+        [NetworkTableType.topCountriesSource]: {
+          activePage: 0,
+          limit: 10,
+          sort: {
+            direction: 'desc',
+            field: 'bytes_out',
+          },
+        },
+        [NetworkTableType.alerts]: {
+          activePage: 0,
+          limit: 10,
+        },
+      });
+    });
+
+    test('set activePage to zero for all queries in ip details  ', () => {
+      expect(setNetworkQueriesActivePageToZero(mockNetworkState, NetworkType.details)).toEqual({
+        [IpDetailsTableType.topNFlowSource]: {
+          activePage: 0,
+          limit: 10,
+          sort: { field: 'bytes_out', direction: 'desc' },
+        },
+        [IpDetailsTableType.topNFlowDestination]: {
+          activePage: 0,
+          limit: 10,
+          sort: { field: 'bytes_out', direction: 'desc' },
+        },
+        [IpDetailsTableType.topCountriesDestination]: {
+          activePage: 0,
+          limit: 10,
+          sort: {
+            direction: 'desc',
+            field: 'bytes_out',
+          },
+        },
+        [IpDetailsTableType.topCountriesSource]: {
+          activePage: 0,
+          limit: 10,
+          sort: {
+            direction: 'desc',
+            field: 'bytes_out',
+          },
+        },
+        [IpDetailsTableType.http]: {
+          activePage: 0,
+          limit: 10,
+          sort: {
+            direction: 'desc',
+          },
+        },
+        [IpDetailsTableType.tls]: {
+          activePage: 0,
+          limit: 10,
+          sort: { field: '_id', direction: 'desc' },
+        },
+        [IpDetailsTableType.users]: {
+          activePage: 0,
+          limit: 10,
+          sort: { field: 'name', direction: 'asc' },
+        },
+      });
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/network/store/helpers.ts b/x-pack/plugins/siem/public/network/store/helpers.ts
new file mode 100644
index 00000000000000..938de1dedf0b70
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/store/helpers.ts
@@ -0,0 +1,93 @@
+/*
+ * 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 {
+  NetworkModel,
+  NetworkType,
+  NetworkTableType,
+  IpDetailsTableType,
+  NetworkQueries,
+  IpOverviewQueries,
+} from './model';
+import { DEFAULT_TABLE_ACTIVE_PAGE } from '../../common/store/constants';
+
+export const setNetworkPageQueriesActivePageToZero = (state: NetworkModel): NetworkQueries => ({
+  ...state.page.queries,
+  [NetworkTableType.topCountriesSource]: {
+    ...state.page.queries[NetworkTableType.topCountriesSource],
+    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+  },
+  [NetworkTableType.topCountriesDestination]: {
+    ...state.page.queries[NetworkTableType.topCountriesDestination],
+    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+  },
+  [NetworkTableType.topNFlowSource]: {
+    ...state.page.queries[NetworkTableType.topNFlowSource],
+    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+  },
+  [NetworkTableType.topNFlowDestination]: {
+    ...state.page.queries[NetworkTableType.topNFlowDestination],
+    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+  },
+  [NetworkTableType.dns]: {
+    ...state.page.queries[NetworkTableType.dns],
+    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+  },
+  [NetworkTableType.tls]: {
+    ...state.page.queries[NetworkTableType.tls],
+    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+  },
+  [NetworkTableType.http]: {
+    ...state.page.queries[NetworkTableType.http],
+    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+  },
+});
+
+export const setNetworkDetailsQueriesActivePageToZero = (
+  state: NetworkModel
+): IpOverviewQueries => ({
+  ...state.details.queries,
+  [IpDetailsTableType.topCountriesSource]: {
+    ...state.details.queries[IpDetailsTableType.topCountriesSource],
+    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+  },
+  [IpDetailsTableType.topCountriesDestination]: {
+    ...state.details.queries[IpDetailsTableType.topCountriesDestination],
+    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+  },
+  [IpDetailsTableType.topNFlowSource]: {
+    ...state.details.queries[IpDetailsTableType.topNFlowSource],
+    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+  },
+  [IpDetailsTableType.topNFlowDestination]: {
+    ...state.details.queries[IpDetailsTableType.topNFlowDestination],
+    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+  },
+  [IpDetailsTableType.tls]: {
+    ...state.details.queries[IpDetailsTableType.tls],
+    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+  },
+  [IpDetailsTableType.users]: {
+    ...state.details.queries[IpDetailsTableType.users],
+    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+  },
+  [IpDetailsTableType.http]: {
+    ...state.details.queries[IpDetailsTableType.http],
+    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+  },
+});
+
+export const setNetworkQueriesActivePageToZero = (
+  state: NetworkModel,
+  type: NetworkType
+): NetworkQueries | IpOverviewQueries => {
+  if (type === NetworkType.page) {
+    return setNetworkPageQueriesActivePageToZero(state);
+  } else if (type === NetworkType.details) {
+    return setNetworkDetailsQueriesActivePageToZero(state);
+  }
+  throw new Error(`NetworkType ${type} is unknown`);
+};
diff --git a/x-pack/plugins/siem/public/network/store/index.ts b/x-pack/plugins/siem/public/network/store/index.ts
new file mode 100644
index 00000000000000..85268509ae9c58
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/store/index.ts
@@ -0,0 +1,22 @@
+/*
+ * 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 { Reducer, AnyAction } from 'redux';
+import * as networkActions from './actions';
+import * as networkModel from './model';
+import * as networkSelectors from './selectors';
+import { NetworkState } from './reducer';
+
+export { networkActions, networkModel, networkSelectors };
+export * from './reducer';
+
+export interface NetworkPluginState {
+  network: NetworkState;
+}
+
+export interface NetworkPluginReducer {
+  network: Reducer<networkModel.NetworkModel, AnyAction>;
+}
diff --git a/x-pack/plugins/siem/public/store/network/model.ts b/x-pack/plugins/siem/public/network/store/model.ts
similarity index 100%
rename from x-pack/plugins/siem/public/store/network/model.ts
rename to x-pack/plugins/siem/public/network/store/model.ts
diff --git a/x-pack/plugins/siem/public/network/store/reducer.ts b/x-pack/plugins/siem/public/network/store/reducer.ts
new file mode 100644
index 00000000000000..26458229da2968
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/store/reducer.ts
@@ -0,0 +1,191 @@
+/*
+ * 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 { reducerWithInitialState } from 'typescript-fsa-reducers';
+import { get } from 'lodash/fp';
+import {
+  Direction,
+  FlowTarget,
+  NetworkDnsFields,
+  NetworkTopTablesFields,
+  TlsFields,
+  UsersFields,
+} from '../../graphql/types';
+import { DEFAULT_TABLE_ACTIVE_PAGE, DEFAULT_TABLE_LIMIT } from '../../common/store/constants';
+
+import {
+  setIpDetailsTablesActivePageToZero,
+  setNetworkTablesActivePageToZero,
+  updateNetworkTable,
+} from './actions';
+import {
+  setNetworkDetailsQueriesActivePageToZero,
+  setNetworkPageQueriesActivePageToZero,
+} from './helpers';
+import { IpDetailsTableType, NetworkModel, NetworkTableType } from './model';
+
+export type NetworkState = NetworkModel;
+
+export const initialNetworkState: NetworkState = {
+  page: {
+    queries: {
+      [NetworkTableType.topNFlowSource]: {
+        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+        limit: DEFAULT_TABLE_LIMIT,
+        sort: {
+          field: NetworkTopTablesFields.bytes_out,
+          direction: Direction.desc,
+        },
+      },
+      [NetworkTableType.topNFlowDestination]: {
+        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+        limit: DEFAULT_TABLE_LIMIT,
+        sort: {
+          field: NetworkTopTablesFields.bytes_in,
+          direction: Direction.desc,
+        },
+      },
+      [NetworkTableType.dns]: {
+        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+        limit: DEFAULT_TABLE_LIMIT,
+        sort: {
+          field: NetworkDnsFields.uniqueDomains,
+          direction: Direction.desc,
+        },
+        isPtrIncluded: false,
+      },
+      [NetworkTableType.http]: {
+        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+        limit: DEFAULT_TABLE_LIMIT,
+        sort: {
+          direction: Direction.desc,
+        },
+      },
+      [NetworkTableType.tls]: {
+        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+        limit: DEFAULT_TABLE_LIMIT,
+        sort: {
+          field: TlsFields._id,
+          direction: Direction.desc,
+        },
+      },
+      [NetworkTableType.topCountriesSource]: {
+        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+        limit: DEFAULT_TABLE_LIMIT,
+        sort: {
+          field: NetworkTopTablesFields.bytes_out,
+          direction: Direction.desc,
+        },
+      },
+      [NetworkTableType.topCountriesDestination]: {
+        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+        limit: DEFAULT_TABLE_LIMIT,
+        sort: {
+          field: NetworkTopTablesFields.bytes_in,
+          direction: Direction.desc,
+        },
+      },
+      [NetworkTableType.alerts]: {
+        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+        limit: DEFAULT_TABLE_LIMIT,
+      },
+    },
+  },
+  details: {
+    queries: {
+      [IpDetailsTableType.http]: {
+        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+        limit: DEFAULT_TABLE_LIMIT,
+        sort: {
+          direction: Direction.desc,
+        },
+      },
+      [IpDetailsTableType.topCountriesSource]: {
+        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+        limit: DEFAULT_TABLE_LIMIT,
+        sort: {
+          field: NetworkTopTablesFields.bytes_out,
+          direction: Direction.desc,
+        },
+      },
+      [IpDetailsTableType.topCountriesDestination]: {
+        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+        limit: DEFAULT_TABLE_LIMIT,
+        sort: {
+          field: NetworkTopTablesFields.bytes_in,
+          direction: Direction.desc,
+        },
+      },
+      [IpDetailsTableType.topNFlowSource]: {
+        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+        limit: DEFAULT_TABLE_LIMIT,
+        sort: {
+          field: NetworkTopTablesFields.bytes_out,
+          direction: Direction.desc,
+        },
+      },
+      [IpDetailsTableType.topNFlowDestination]: {
+        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+        limit: DEFAULT_TABLE_LIMIT,
+        sort: {
+          field: NetworkTopTablesFields.bytes_in,
+          direction: Direction.desc,
+        },
+      },
+      [IpDetailsTableType.tls]: {
+        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+        limit: DEFAULT_TABLE_LIMIT,
+        sort: {
+          field: TlsFields._id,
+          direction: Direction.desc,
+        },
+      },
+      [IpDetailsTableType.users]: {
+        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
+        limit: DEFAULT_TABLE_LIMIT,
+        sort: {
+          field: UsersFields.name,
+          direction: Direction.asc,
+        },
+      },
+    },
+    flowTarget: FlowTarget.source,
+  },
+};
+
+export const networkReducer = reducerWithInitialState(initialNetworkState)
+  .case(updateNetworkTable, (state, { networkType, tableType, updates }) => ({
+    ...state,
+    [networkType]: {
+      ...state[networkType],
+      queries: {
+        ...state[networkType].queries,
+        [tableType]: {
+          ...get([networkType, 'queries', tableType], state),
+          ...updates,
+        },
+      },
+    },
+  }))
+  .case(setNetworkTablesActivePageToZero, state => ({
+    ...state,
+    page: {
+      ...state.page,
+      queries: setNetworkPageQueriesActivePageToZero(state),
+    },
+    details: {
+      ...state.details,
+      queries: setNetworkDetailsQueriesActivePageToZero(state),
+    },
+  }))
+  .case(setIpDetailsTablesActivePageToZero, state => ({
+    ...state,
+    details: {
+      ...state.details,
+      queries: setNetworkDetailsQueriesActivePageToZero(state),
+    },
+  }))
+  .build();
diff --git a/x-pack/plugins/siem/public/network/store/selectors.ts b/x-pack/plugins/siem/public/network/store/selectors.ts
new file mode 100644
index 00000000000000..0b48fa2170535d
--- /dev/null
+++ b/x-pack/plugins/siem/public/network/store/selectors.ts
@@ -0,0 +1,88 @@
+/*
+ * 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 { createSelector } from 'reselect';
+import { get } from 'lodash/fp';
+
+import { FlowTargetSourceDest } from '../../graphql/types';
+import { State } from '../../common/store/reducer';
+import { initialNetworkState } from './reducer';
+import {
+  IpDetailsTableType,
+  NetworkDetailsModel,
+  NetworkPageModel,
+  NetworkTableType,
+  NetworkType,
+  TopCountriesQuery,
+  TlsQuery,
+  HttpQuery,
+} from './model';
+
+const selectNetworkPage = (state: State): NetworkPageModel => state.network.page;
+
+const selectNetworkDetails = (state: State): NetworkDetailsModel => state.network.details;
+
+// Network Page Selectors
+export const dnsSelector = () => createSelector(selectNetworkPage, network => network.queries.dns);
+
+const selectTopNFlowByType = (
+  state: State,
+  networkType: NetworkType,
+  flowTarget: FlowTargetSourceDest
+) => {
+  const ft = flowTarget === FlowTargetSourceDest.source ? 'topNFlowSource' : 'topNFlowDestination';
+  const nFlowType =
+    networkType === NetworkType.page ? NetworkTableType[ft] : IpDetailsTableType[ft];
+  return (
+    get([networkType, 'queries', nFlowType], state.network) ||
+    get([networkType, 'queries', nFlowType], initialNetworkState)
+  );
+};
+
+export const topNFlowSelector = () =>
+  createSelector(selectTopNFlowByType, topNFlowQueries => topNFlowQueries);
+const selectTlsByType = (state: State, networkType: NetworkType): TlsQuery => {
+  const tlsType = networkType === NetworkType.page ? NetworkTableType.tls : IpDetailsTableType.tls;
+  return (
+    get([networkType, 'queries', tlsType], state.network) ||
+    get([networkType, 'queries', tlsType], initialNetworkState)
+  );
+};
+
+export const tlsSelector = () => createSelector(selectTlsByType, tlsQueries => tlsQueries);
+
+const selectTopCountriesByType = (
+  state: State,
+  networkType: NetworkType,
+  flowTarget: FlowTargetSourceDest
+): TopCountriesQuery => {
+  const ft =
+    flowTarget === FlowTargetSourceDest.source ? 'topCountriesSource' : 'topCountriesDestination';
+  const nFlowType =
+    networkType === NetworkType.page ? NetworkTableType[ft] : IpDetailsTableType[ft];
+
+  return (
+    get([networkType, 'queries', nFlowType], state.network) ||
+    get([networkType, 'queries', nFlowType], initialNetworkState)
+  );
+};
+
+export const topCountriesSelector = () =>
+  createSelector(selectTopCountriesByType, topCountriesQueries => topCountriesQueries);
+
+const selectHttpByType = (state: State, networkType: NetworkType): HttpQuery => {
+  const httpType =
+    networkType === NetworkType.page ? NetworkTableType.http : IpDetailsTableType.http;
+  return (
+    get([networkType, 'queries', httpType], state.network) ||
+    get([networkType, 'queries', httpType], initialNetworkState)
+  );
+};
+
+export const httpSelector = () => createSelector(selectHttpByType, httpQueries => httpQueries);
+
+export const usersSelector = () =>
+  createSelector(selectNetworkDetails, network => network.queries.users);
diff --git a/x-pack/plugins/siem/public/overview/components/alerts_by_category/index.test.tsx b/x-pack/plugins/siem/public/overview/components/alerts_by_category/index.test.tsx
new file mode 100644
index 00000000000000..c032b21f73290a
--- /dev/null
+++ b/x-pack/plugins/siem/public/overview/components/alerts_by_category/index.test.tsx
@@ -0,0 +1,135 @@
+/*
+ * 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.
+ */
+
+/* eslint-disable react/display-name */
+
+import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
+import { mount, ReactWrapper } from 'enzyme';
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+
+import { useQuery } from '../../../common/containers/matrix_histogram';
+import { wait } from '../../../common/lib/helpers';
+import { mockIndexPattern, TestProviders } from '../../../common/mock';
+
+import { AlertsByCategory } from '.';
+
+jest.mock('../../../common/lib/kibana');
+
+jest.mock('../../../common/containers/matrix_histogram', () => {
+  return {
+    useQuery: jest.fn(),
+  };
+});
+
+const theme = () => ({ eui: { ...euiDarkVars, euiSizeL: '24px' }, darkMode: true });
+const from = new Date('2020-03-31T06:00:00.000Z').valueOf();
+const to = new Date('2019-03-31T06:00:00.000Z').valueOf();
+
+describe('Alerts by category', () => {
+  let wrapper: ReactWrapper;
+
+  describe('before loading data', () => {
+    beforeAll(async () => {
+      (useQuery as jest.Mock).mockReturnValue({
+        data: null,
+        loading: false,
+        inspect: false,
+        totalCount: null,
+      });
+
+      wrapper = mount(
+        <ThemeProvider theme={theme}>
+          <TestProviders>
+            <AlertsByCategory
+              deleteQuery={jest.fn()}
+              filters={[]}
+              from={from}
+              indexPattern={mockIndexPattern}
+              setQuery={jest.fn()}
+              to={to}
+            />
+          </TestProviders>
+        </ThemeProvider>
+      );
+
+      await wait();
+      wrapper.update();
+    });
+
+    test('it renders the expected title', () => {
+      expect(wrapper.find('[data-test-subj="header-section-title"]').text()).toEqual(
+        'External alert count'
+      );
+    });
+
+    test('it renders the subtitle (to prevent layout thrashing)', () => {
+      expect(wrapper.find('[data-test-subj="header-panel-subtitle"]').exists()).toBe(true);
+    });
+
+    test('it renders the expected filter fields', () => {
+      const expectedOptions = ['event.category', 'event.module'];
+
+      expectedOptions.forEach(option => {
+        expect(wrapper.find(`option[value="${option}"]`).text()).toEqual(option);
+      });
+    });
+
+    test('it renders the `View alerts` button', () => {
+      expect(wrapper.find('[data-test-subj="view-alerts"]').exists()).toBe(true);
+    });
+
+    test('it does NOT render the bar chart when data is not available', () => {
+      expect(wrapper.find(`.echChart`).exists()).toBe(false);
+    });
+  });
+
+  describe('after loading data', () => {
+    beforeAll(async () => {
+      (useQuery as jest.Mock).mockReturnValue({
+        data: [
+          { x: 1, y: 2, g: 'g1' },
+          { x: 2, y: 4, g: 'g1' },
+          { x: 3, y: 6, g: 'g1' },
+          { x: 1, y: 1, g: 'g2' },
+          { x: 2, y: 3, g: 'g2' },
+          { x: 3, y: 5, g: 'g2' },
+        ],
+        loading: false,
+        inspect: false,
+        totalCount: 6,
+      });
+
+      wrapper = mount(
+        <ThemeProvider theme={theme}>
+          <TestProviders>
+            <AlertsByCategory
+              deleteQuery={jest.fn()}
+              filters={[]}
+              from={from}
+              indexPattern={mockIndexPattern}
+              setQuery={jest.fn()}
+              to={to}
+            />
+          </TestProviders>
+        </ThemeProvider>
+      );
+
+      await wait();
+      wrapper.update();
+    });
+
+    test('it renders the expected subtitle', () => {
+      expect(wrapper.find('[data-test-subj="header-panel-subtitle"]').text()).toEqual(
+        'Showing: 6 external alerts'
+      );
+    });
+
+    test('it renders the bar chart when data is available', () => {
+      expect(wrapper.find(`.echChart`).exists()).toBe(true);
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/overview/components/alerts_by_category/index.tsx b/x-pack/plugins/siem/public/overview/components/alerts_by_category/index.tsx
new file mode 100644
index 00000000000000..92f55aa1aa36d8
--- /dev/null
+++ b/x-pack/plugins/siem/public/overview/components/alerts_by_category/index.tsx
@@ -0,0 +1,123 @@
+/*
+ * 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 { EuiButton } from '@elastic/eui';
+import numeral from '@elastic/numeral';
+import React, { useEffect, useMemo } from 'react';
+import { Position } from '@elastic/charts';
+
+import { DEFAULT_NUMBER_FORMAT } from '../../../../common/constants';
+import { SHOWING, UNIT } from '../../../common/components/alerts_viewer/translations';
+import { getDetectionEngineAlertUrl } from '../../../common/components/link_to/redirect_to_detection_engine';
+import { MatrixHistogramContainer } from '../../../common/components/matrix_histogram';
+import { useKibana, useUiSetting$ } from '../../../common/lib/kibana';
+import { convertToBuildEsQuery } from '../../../common/lib/keury';
+import {
+  Filter,
+  esQuery,
+  IIndexPattern,
+  Query,
+} from '../../../../../../../src/plugins/data/public';
+import { inputsModel } from '../../../common/store';
+import { HostsType } from '../../../hosts/store/model';
+
+import * as i18n from '../../pages/translations';
+import {
+  alertsStackByOptions,
+  histogramConfigs,
+} from '../../../common/components/alerts_viewer/histogram_configs';
+import { MatrixHisrogramConfigs } from '../../../common/components/matrix_histogram/types';
+import { useGetUrlSearch } from '../../../common/components/navigation/use_get_url_search';
+import { navTabs } from '../../../app/home/home_navigations';
+
+const ID = 'alertsByCategoryOverview';
+
+const NO_FILTERS: Filter[] = [];
+const DEFAULT_QUERY: Query = { query: '', language: 'kuery' };
+const DEFAULT_STACK_BY = 'event.module';
+
+interface Props {
+  deleteQuery?: ({ id }: { id: string }) => void;
+  filters?: Filter[];
+  from: number;
+  hideHeaderChildren?: boolean;
+  indexPattern: IIndexPattern;
+  query?: Query;
+  setQuery: (params: {
+    id: string;
+    inspect: inputsModel.InspectQuery | null;
+    loading: boolean;
+    refetch: inputsModel.Refetch;
+  }) => void;
+  to: number;
+}
+
+const AlertsByCategoryComponent: React.FC<Props> = ({
+  deleteQuery,
+  filters = NO_FILTERS,
+  from,
+  hideHeaderChildren = false,
+  indexPattern,
+  query = DEFAULT_QUERY,
+  setQuery,
+  to,
+}) => {
+  useEffect(() => {
+    return () => {
+      if (deleteQuery) {
+        deleteQuery({ id: ID });
+      }
+    };
+  }, []);
+
+  const kibana = useKibana();
+  const [defaultNumberFormat] = useUiSetting$<string>(DEFAULT_NUMBER_FORMAT);
+  const urlSearch = useGetUrlSearch(navTabs.detections);
+
+  const alertsCountViewAlertsButton = useMemo(
+    () => (
+      <EuiButton data-test-subj="view-alerts" href={getDetectionEngineAlertUrl(urlSearch)}>
+        {i18n.VIEW_ALERTS}
+      </EuiButton>
+    ),
+    [urlSearch]
+  );
+
+  const alertsByCategoryHistogramConfigs: MatrixHisrogramConfigs = useMemo(
+    () => ({
+      ...histogramConfigs,
+      defaultStackByOption:
+        alertsStackByOptions.find(o => o.text === DEFAULT_STACK_BY) ?? alertsStackByOptions[0],
+      subtitle: (totalCount: number) =>
+        `${SHOWING}: ${numeral(totalCount).format(defaultNumberFormat)} ${UNIT(totalCount)}`,
+      legendPosition: Position.Right,
+    }),
+    []
+  );
+
+  return (
+    <MatrixHistogramContainer
+      endDate={to}
+      filterQuery={convertToBuildEsQuery({
+        config: esQuery.getEsQueryConfig(kibana.services.uiSettings),
+        indexPattern,
+        queries: [query],
+        filters,
+      })}
+      headerChildren={hideHeaderChildren ? null : alertsCountViewAlertsButton}
+      id={ID}
+      setQuery={setQuery}
+      sourceId="default"
+      startDate={from}
+      type={HostsType.page}
+      {...alertsByCategoryHistogramConfigs}
+    />
+  );
+};
+
+AlertsByCategoryComponent.displayName = 'AlertsByCategoryComponent';
+
+export const AlertsByCategory = React.memo(AlertsByCategoryComponent);
diff --git a/x-pack/plugins/siem/public/overview/components/event_counts/index.test.tsx b/x-pack/plugins/siem/public/overview/components/event_counts/index.test.tsx
new file mode 100644
index 00000000000000..628cd28979083e
--- /dev/null
+++ b/x-pack/plugins/siem/public/overview/components/event_counts/index.test.tsx
@@ -0,0 +1,51 @@
+/*
+ * 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 { mount } from 'enzyme';
+import React from 'react';
+
+import { OverviewHostProps } from '../overview_host';
+import { OverviewNetworkProps } from '../overview_network';
+import { mockIndexPattern, TestProviders } from '../../../common/mock';
+
+import { EventCounts } from '.';
+
+describe('EventCounts', () => {
+  const from = 1579553397080;
+  const to = 1579639797080;
+
+  test('it filters the `Host events` widget with a `host.name` `exists` filter', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <EventCounts from={from} indexPattern={mockIndexPattern} setQuery={jest.fn()} to={to} />
+      </TestProviders>
+    );
+
+    expect(
+      (wrapper
+        .find('[data-test-subj="overview-host-query"]')
+        .first()
+        .props() as OverviewHostProps).filterQuery
+    ).toContain('[{"bool":{"should":[{"exists":{"field":"host.name"}}]');
+  });
+
+  test('it filters the `Network events` widget with a `source.ip` or `destination.ip` `exists` filter', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <EventCounts from={from} indexPattern={mockIndexPattern} setQuery={jest.fn()} to={to} />
+      </TestProviders>
+    );
+
+    expect(
+      (wrapper
+        .find('[data-test-subj="overview-network-query"]')
+        .first()
+        .props() as OverviewNetworkProps).filterQuery
+    ).toContain(
+      '{"bool":{"filter":[{"bool":{"should":[{"bool":{"should":[{"exists":{"field":"source.ip"}}],"minimum_should_match":1}},{"bool":{"should":[{"exists":{"field":"destination.ip"}}],"minimum_should_match":1}}],"minimum_should_match":1}}]}}]'
+    );
+  });
+});
diff --git a/x-pack/plugins/siem/public/overview/components/event_counts/index.tsx b/x-pack/plugins/siem/public/overview/components/event_counts/index.tsx
new file mode 100644
index 00000000000000..1773af86a382f6
--- /dev/null
+++ b/x-pack/plugins/siem/public/overview/components/event_counts/index.tsx
@@ -0,0 +1,91 @@
+/*
+ * 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 { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import React from 'react';
+import styled from 'styled-components';
+
+import { OverviewHost } from '../overview_host';
+import { OverviewNetwork } from '../overview_network';
+import { filterHostData } from '../../../hosts/pages/navigation/alerts_query_tab_body';
+import { useKibana } from '../../../common/lib/kibana';
+import { convertToBuildEsQuery } from '../../../common/lib/keury';
+import { filterNetworkData } from '../../../network/pages/navigation/alerts_query_tab_body';
+import {
+  Filter,
+  esQuery,
+  IIndexPattern,
+  Query,
+} from '../../../../../../../src/plugins/data/public';
+import { inputsModel } from '../../../common/store';
+
+const HorizontalSpacer = styled(EuiFlexItem)`
+  width: 24px;
+`;
+
+const NO_FILTERS: Filter[] = [];
+const DEFAULT_QUERY: Query = { query: '', language: 'kuery' };
+
+interface Props {
+  filters?: Filter[];
+  from: number;
+  indexPattern: IIndexPattern;
+  query?: Query;
+  setQuery: (params: {
+    id: string;
+    inspect: inputsModel.InspectQuery | null;
+    loading: boolean;
+    refetch: inputsModel.Refetch;
+  }) => void;
+  to: number;
+}
+
+const EventCountsComponent: React.FC<Props> = ({
+  filters = NO_FILTERS,
+  from,
+  indexPattern,
+  query = DEFAULT_QUERY,
+  setQuery,
+  to,
+}) => {
+  const kibana = useKibana();
+
+  return (
+    <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween">
+      <EuiFlexItem grow={true}>
+        <OverviewHost
+          endDate={to}
+          filterQuery={convertToBuildEsQuery({
+            config: esQuery.getEsQueryConfig(kibana.services.uiSettings),
+            indexPattern,
+            queries: [query],
+            filters: [...filters, ...filterHostData],
+          })}
+          startDate={from}
+          setQuery={setQuery}
+        />
+      </EuiFlexItem>
+
+      <HorizontalSpacer grow={false} />
+
+      <EuiFlexItem grow={true}>
+        <OverviewNetwork
+          endDate={to}
+          filterQuery={convertToBuildEsQuery({
+            config: esQuery.getEsQueryConfig(kibana.services.uiSettings),
+            indexPattern,
+            queries: [query],
+            filters: [...filters, ...filterNetworkData],
+          })}
+          startDate={from}
+          setQuery={setQuery}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
+
+export const EventCounts = React.memo(EventCountsComponent);
diff --git a/x-pack/plugins/siem/public/pages/overview/events_by_dataset/__mocks__/index.tsx b/x-pack/plugins/siem/public/overview/components/events_by_dataset/__mocks__/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/overview/events_by_dataset/__mocks__/index.tsx
rename to x-pack/plugins/siem/public/overview/components/events_by_dataset/__mocks__/index.tsx
diff --git a/x-pack/plugins/siem/public/overview/components/events_by_dataset/index.tsx b/x-pack/plugins/siem/public/overview/components/events_by_dataset/index.tsx
new file mode 100644
index 00000000000000..ebd005e7cb0b32
--- /dev/null
+++ b/x-pack/plugins/siem/public/overview/components/events_by_dataset/index.tsx
@@ -0,0 +1,174 @@
+/*
+ * 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 { Position } from '@elastic/charts';
+import { EuiButton } from '@elastic/eui';
+import numeral from '@elastic/numeral';
+import React, { useEffect, useMemo } from 'react';
+import uuid from 'uuid';
+
+import { DEFAULT_NUMBER_FORMAT } from '../../../../common/constants';
+import { SHOWING, UNIT } from '../../../common/components/events_viewer/translations';
+import { getTabsOnHostsUrl } from '../../../common/components/link_to/redirect_to_hosts';
+import { MatrixHistogramContainer } from '../../../common/components/matrix_histogram';
+import {
+  MatrixHisrogramConfigs,
+  MatrixHistogramOption,
+} from '../../../common/components/matrix_histogram/types';
+import { useGetUrlSearch } from '../../../common/components/navigation/use_get_url_search';
+import { navTabs } from '../../../app/home/home_navigations';
+import { eventsStackByOptions } from '../../../hosts/pages/navigation';
+import { convertToBuildEsQuery } from '../../../common/lib/keury';
+import { useKibana, useUiSetting$ } from '../../../common/lib/kibana';
+import { histogramConfigs } from '../../../hosts/pages/navigation/events_query_tab_body';
+import {
+  Filter,
+  esQuery,
+  IIndexPattern,
+  Query,
+} from '../../../../../../../src/plugins/data/public';
+import { inputsModel } from '../../../common/store';
+import { HostsTableType, HostsType } from '../../../hosts/store/model';
+import { InputsModelId } from '../../../common/store/inputs/constants';
+
+import * as i18n from '../../pages/translations';
+
+const NO_FILTERS: Filter[] = [];
+const DEFAULT_QUERY: Query = { query: '', language: 'kuery' };
+const DEFAULT_STACK_BY = 'event.dataset';
+
+const ID = 'eventsByDatasetOverview';
+
+interface Props {
+  combinedQueries?: string;
+  deleteQuery?: ({ id }: { id: string }) => void;
+  filters?: Filter[];
+  from: number;
+  headerChildren?: React.ReactNode;
+  indexPattern: IIndexPattern;
+  indexToAdd?: string[] | null;
+  onlyField?: string;
+  query?: Query;
+  setAbsoluteRangeDatePickerTarget?: InputsModelId;
+  setQuery: (params: {
+    id: string;
+    inspect: inputsModel.InspectQuery | null;
+    loading: boolean;
+    refetch: inputsModel.Refetch;
+  }) => void;
+  showSpacer?: boolean;
+  to: number;
+}
+
+const getHistogramOption = (fieldName: string): MatrixHistogramOption => ({
+  text: fieldName,
+  value: fieldName,
+});
+
+const EventsByDatasetComponent: React.FC<Props> = ({
+  combinedQueries,
+  deleteQuery,
+  filters = NO_FILTERS,
+  from,
+  headerChildren,
+  indexPattern,
+  indexToAdd,
+  onlyField,
+  query = DEFAULT_QUERY,
+  setAbsoluteRangeDatePickerTarget,
+  setQuery,
+  showSpacer = true,
+  to,
+}) => {
+  // create a unique, but stable (across re-renders) query id
+  const uniqueQueryId = useMemo(() => `${ID}-${uuid.v4()}`, []);
+
+  useEffect(() => {
+    return () => {
+      if (deleteQuery) {
+        deleteQuery({ id: uniqueQueryId });
+      }
+    };
+  }, [deleteQuery, uniqueQueryId]);
+
+  const kibana = useKibana();
+  const [defaultNumberFormat] = useUiSetting$<string>(DEFAULT_NUMBER_FORMAT);
+  const urlSearch = useGetUrlSearch(navTabs.hosts);
+
+  const eventsCountViewEventsButton = useMemo(
+    () => (
+      <EuiButton href={getTabsOnHostsUrl(HostsTableType.events, urlSearch)}>
+        {i18n.VIEW_EVENTS}
+      </EuiButton>
+    ),
+    [urlSearch]
+  );
+
+  const filterQuery = useMemo(
+    () =>
+      combinedQueries == null
+        ? convertToBuildEsQuery({
+            config: esQuery.getEsQueryConfig(kibana.services.uiSettings),
+            indexPattern,
+            queries: [query],
+            filters,
+          })
+        : combinedQueries,
+    [combinedQueries, kibana, indexPattern, query, filters]
+  );
+
+  const eventsByDatasetHistogramConfigs: MatrixHisrogramConfigs = useMemo(
+    () => ({
+      ...histogramConfigs,
+      stackByOptions:
+        onlyField != null ? [getHistogramOption(onlyField)] : histogramConfigs.stackByOptions,
+      defaultStackByOption:
+        onlyField != null
+          ? getHistogramOption(onlyField)
+          : eventsStackByOptions.find(o => o.text === DEFAULT_STACK_BY) ?? eventsStackByOptions[0],
+      legendPosition: Position.Right,
+      subtitle: (totalCount: number) =>
+        `${SHOWING}: ${numeral(totalCount).format(defaultNumberFormat)} ${UNIT(totalCount)}`,
+      titleSize: onlyField == null ? 'm' : 's',
+    }),
+    [onlyField, defaultNumberFormat]
+  );
+
+  const headerContent = useMemo(() => {
+    if (onlyField == null || headerChildren != null) {
+      return (
+        <>
+          {headerChildren}
+          {onlyField == null && eventsCountViewEventsButton}
+        </>
+      );
+    } else {
+      return null;
+    }
+  }, [onlyField, headerChildren, eventsCountViewEventsButton]);
+
+  return (
+    <MatrixHistogramContainer
+      endDate={to}
+      filterQuery={filterQuery}
+      headerChildren={headerContent}
+      id={uniqueQueryId}
+      indexToAdd={indexToAdd}
+      setAbsoluteRangeDatePickerTarget={setAbsoluteRangeDatePickerTarget}
+      setQuery={setQuery}
+      showSpacer={showSpacer}
+      sourceId="default"
+      startDate={from}
+      type={HostsType.page}
+      {...eventsByDatasetHistogramConfigs}
+      title={onlyField != null ? i18n.TOP(onlyField) : eventsByDatasetHistogramConfigs.title}
+    />
+  );
+};
+
+EventsByDatasetComponent.displayName = 'EventsByDatasetComponent';
+
+export const EventsByDataset = React.memo(EventsByDatasetComponent);
diff --git a/x-pack/plugins/siem/public/components/page/hosts/host_overview/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/overview/components/host_overview/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/hosts/host_overview/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/overview/components/host_overview/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/overview/components/host_overview/index.test.tsx b/x-pack/plugins/siem/public/overview/components/host_overview/index.test.tsx
new file mode 100644
index 00000000000000..56c232158ac02c
--- /dev/null
+++ b/x-pack/plugins/siem/public/overview/components/host_overview/index.test.tsx
@@ -0,0 +1,36 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import React from 'react';
+import { TestProviders } from '../../../common/mock';
+
+import { HostOverview } from './index';
+import { mockData } from './mock';
+import { mockAnomalies } from '../../../common/components/ml/mock';
+
+describe('Host Summary Component', () => {
+  describe('rendering', () => {
+    test('it renders the default Host Summary', () => {
+      const wrapper = shallow(
+        <TestProviders>
+          <HostOverview
+            anomaliesData={mockAnomalies}
+            data={mockData.Hosts.edges[0].node}
+            endDate={new Date('2019-06-18T06:00:00.000Z').valueOf()}
+            id="hostOverview"
+            isLoadingAnomaliesData={false}
+            loading={false}
+            narrowDateRange={jest.fn()}
+            startDate={new Date('2019-06-15T06:00:00.000Z').valueOf()}
+          />
+        </TestProviders>
+      );
+
+      expect(wrapper.find('HostOverview')).toMatchSnapshot();
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/overview/components/host_overview/index.tsx b/x-pack/plugins/siem/public/overview/components/host_overview/index.tsx
new file mode 100644
index 00000000000000..4440147c35f2f1
--- /dev/null
+++ b/x-pack/plugins/siem/public/overview/components/host_overview/index.tsx
@@ -0,0 +1,197 @@
+/*
+ * 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 { 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 { getOr } from 'lodash/fp';
+import React from 'react';
+
+import { DEFAULT_DARK_MODE } from '../../../../common/constants';
+import { DescriptionList } from '../../../../common/utility_types';
+import { useUiSetting$ } from '../../../common/lib/kibana';
+import { getEmptyTagValue } from '../../../common/components/empty_value';
+import {
+  DefaultFieldRenderer,
+  hostIdRenderer,
+} from '../../../timelines/components/field_renderers/field_renderers';
+import { InspectButton, InspectButtonContainer } from '../../../common/components/inspect';
+import { HostItem } from '../../../graphql/types';
+import { Loader } from '../../../common/components/loader';
+import { IPDetailsLink } from '../../../common/components/links';
+import { hasMlUserPermissions } from '../../../../common/machine_learning/has_ml_user_permissions';
+import { useMlCapabilities } from '../../../common/components/ml_popover/hooks/use_ml_capabilities';
+import { AnomalyScores } from '../../../common/components/ml/score/anomaly_scores';
+import { Anomalies, NarrowDateRange } from '../../../common/components/ml/types';
+import { DescriptionListStyled, OverviewWrapper } from '../../../common/components/page';
+import {
+  FirstLastSeenHost,
+  FirstLastSeenHostType,
+} from '../../../hosts/components/first_last_seen_host';
+
+import * as i18n from './translations';
+
+interface HostSummaryProps {
+  data: HostItem;
+  id: string;
+  loading: boolean;
+  isLoadingAnomaliesData: boolean;
+  anomaliesData: Anomalies | null;
+  startDate: number;
+  endDate: number;
+  narrowDateRange: NarrowDateRange;
+}
+
+const getDescriptionList = (descriptionList: DescriptionList[], key: number) => (
+  <EuiFlexItem key={key}>
+    <DescriptionListStyled listItems={descriptionList} />
+  </EuiFlexItem>
+);
+
+export const HostOverview = React.memo<HostSummaryProps>(
+  ({
+    data,
+    loading,
+    id,
+    startDate,
+    endDate,
+    isLoadingAnomaliesData,
+    anomaliesData,
+    narrowDateRange,
+  }) => {
+    const capabilities = useMlCapabilities();
+    const userPermissions = hasMlUserPermissions(capabilities);
+    const [darkMode] = useUiSetting$<boolean>(DEFAULT_DARK_MODE);
+
+    const getDefaultRenderer = (fieldName: string, fieldData: HostItem) => (
+      <DefaultFieldRenderer
+        rowItems={getOr([], fieldName, fieldData)}
+        attrName={fieldName}
+        idPrefix="host-overview"
+      />
+    );
+
+    const column: DescriptionList[] = [
+      {
+        title: i18n.HOST_ID,
+        description: data.host
+          ? hostIdRenderer({ host: data.host, noLink: true })
+          : getEmptyTagValue(),
+      },
+      {
+        title: i18n.FIRST_SEEN,
+        description:
+          data.host != null && data.host.name && data.host.name.length ? (
+            <FirstLastSeenHost
+              hostname={data.host.name[0]}
+              type={FirstLastSeenHostType.FIRST_SEEN}
+            />
+          ) : (
+            getEmptyTagValue()
+          ),
+      },
+      {
+        title: i18n.LAST_SEEN,
+        description:
+          data.host != null && data.host.name && data.host.name.length ? (
+            <FirstLastSeenHost
+              hostname={data.host.name[0]}
+              type={FirstLastSeenHostType.LAST_SEEN}
+            />
+          ) : (
+            getEmptyTagValue()
+          ),
+      },
+    ];
+    const firstColumn = userPermissions
+      ? [
+          ...column,
+          {
+            title: i18n.MAX_ANOMALY_SCORE_BY_JOB,
+            description: (
+              <AnomalyScores
+                anomalies={anomaliesData}
+                startDate={startDate}
+                endDate={endDate}
+                isLoading={isLoadingAnomaliesData}
+                narrowDateRange={narrowDateRange}
+              />
+            ),
+          },
+        ]
+      : column;
+
+    const descriptionLists: Readonly<DescriptionList[][]> = [
+      firstColumn,
+      [
+        {
+          title: i18n.IP_ADDRESSES,
+          description: (
+            <DefaultFieldRenderer
+              rowItems={getOr([], 'host.ip', data)}
+              attrName={'host.ip'}
+              idPrefix="host-overview"
+              render={ip => (ip != null ? <IPDetailsLink ip={ip} /> : getEmptyTagValue())}
+            />
+          ),
+        },
+        {
+          title: i18n.MAC_ADDRESSES,
+          description: getDefaultRenderer('host.mac', data),
+        },
+        { title: i18n.PLATFORM, description: getDefaultRenderer('host.os.platform', data) },
+      ],
+      [
+        { title: i18n.OS, description: getDefaultRenderer('host.os.name', data) },
+        { title: i18n.FAMILY, description: getDefaultRenderer('host.os.family', data) },
+        { title: i18n.VERSION, description: getDefaultRenderer('host.os.version', data) },
+        { title: i18n.ARCHITECTURE, description: getDefaultRenderer('host.architecture', data) },
+      ],
+      [
+        {
+          title: i18n.CLOUD_PROVIDER,
+          description: getDefaultRenderer('cloud.provider', data),
+        },
+        {
+          title: i18n.REGION,
+          description: getDefaultRenderer('cloud.region', data),
+        },
+        {
+          title: i18n.INSTANCE_ID,
+          description: getDefaultRenderer('cloud.instance.id', data),
+        },
+        {
+          title: i18n.MACHINE_TYPE,
+          description: getDefaultRenderer('cloud.machine.type', data),
+        },
+      ],
+    ];
+
+    return (
+      <InspectButtonContainer>
+        <OverviewWrapper>
+          <InspectButton queryId={id} title={i18n.INSPECT_TITLE} inspectIndex={0} />
+
+          {descriptionLists.map((descriptionList, index) =>
+            getDescriptionList(descriptionList, index)
+          )}
+
+          {loading && (
+            <Loader
+              overlay
+              overlayBackground={
+                darkMode ? darkTheme.euiPageBackgroundColor : lightTheme.euiPageBackgroundColor
+              }
+              size="xl"
+            />
+          )}
+        </OverviewWrapper>
+      </InspectButtonContainer>
+    );
+  }
+);
+
+HostOverview.displayName = 'HostOverview';
diff --git a/x-pack/plugins/siem/public/overview/components/host_overview/mock.ts b/x-pack/plugins/siem/public/overview/components/host_overview/mock.ts
new file mode 100644
index 00000000000000..c24cb20e9087ca
--- /dev/null
+++ b/x-pack/plugins/siem/public/overview/components/host_overview/mock.ts
@@ -0,0 +1,52 @@
+/*
+ * 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 { HostsData } from '../../../graphql/types';
+
+export const mockData: { Hosts: HostsData; DateFields: string[] } = {
+  Hosts: {
+    totalCount: 1,
+    edges: [
+      {
+        node: {
+          _id: 'yneHlmgBjVl2VqDlAjPR',
+          host: {
+            architecture: ['x86_64'],
+            id: ['aa7ca589f1b8220002f2fc61c64cfbf1'],
+            ip: ['10.142.0.7', 'fe80::4001:aff:fe8e:7'],
+            mac: ['42:01:0a:8e:00:07'],
+            name: ['siem-kibana'],
+            os: {
+              family: ['debian'],
+              name: ['Debian GNU/Linux'],
+              platform: ['debian'],
+              version: ['9 (stretch)'],
+            },
+          },
+          cloud: {
+            instance: {
+              id: ['423232333829362673777'],
+            },
+            machine: {
+              type: ['custom-4-16384'],
+            },
+            provider: ['gce'],
+            region: ['us-east-1'],
+          },
+        },
+        cursor: {
+          value: 'aa7ca589f1b8220002f2fc61c64cfbf1',
+        },
+      },
+    ],
+    pageInfo: {
+      activePage: 1,
+      fakeTotalCount: 50,
+      showMorePagesIndicator: true,
+    },
+  },
+  DateFields: ['lastBeat'],
+};
diff --git a/x-pack/plugins/siem/public/components/page/hosts/host_overview/translations.ts b/x-pack/plugins/siem/public/overview/components/host_overview/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/hosts/host_overview/translations.ts
rename to x-pack/plugins/siem/public/overview/components/host_overview/translations.ts
diff --git a/x-pack/plugins/siem/public/components/page/overview/loading_placeholders/index.tsx b/x-pack/plugins/siem/public/overview/components/loading_placeholders/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/overview/loading_placeholders/index.tsx
rename to x-pack/plugins/siem/public/overview/components/loading_placeholders/index.tsx
diff --git a/x-pack/plugins/siem/public/overview/components/overview_empty/index.tsx b/x-pack/plugins/siem/public/overview/components/overview_empty/index.tsx
new file mode 100644
index 00000000000000..85a89882027749
--- /dev/null
+++ b/x-pack/plugins/siem/public/overview/components/overview_empty/index.tsx
@@ -0,0 +1,35 @@
+/*
+ * 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 * as i18nCommon from '../../../common/translations';
+import { EmptyPage } from '../../../common/components/empty_page';
+import { useKibana } from '../../../common/lib/kibana';
+
+const OverviewEmptyComponent: React.FC = () => {
+  const { http, docLinks } = useKibana().services;
+  const basePath = http.basePath.get();
+
+  return (
+    <EmptyPage
+      actionPrimaryIcon="gear"
+      actionPrimaryLabel={i18nCommon.EMPTY_ACTION_PRIMARY}
+      actionPrimaryUrl={`${basePath}/app/kibana#/home/tutorial_directory/siem`}
+      actionSecondaryIcon="popout"
+      actionSecondaryLabel={i18nCommon.EMPTY_ACTION_SECONDARY}
+      actionSecondaryTarget="_blank"
+      actionSecondaryUrl={docLinks.links.siem.gettingStarted}
+      data-test-subj="empty-page"
+      message={i18nCommon.EMPTY_MESSAGE}
+      title={i18nCommon.EMPTY_TITLE}
+    />
+  );
+};
+
+OverviewEmptyComponent.displayName = 'OverviewEmptyComponent';
+
+export const OverviewEmpty = React.memo(OverviewEmptyComponent);
diff --git a/x-pack/plugins/siem/public/overview/components/overview_host/index.test.tsx b/x-pack/plugins/siem/public/overview/components/overview_host/index.test.tsx
new file mode 100644
index 00000000000000..137f5d1dc245de
--- /dev/null
+++ b/x-pack/plugins/siem/public/overview/components/overview_host/index.test.tsx
@@ -0,0 +1,150 @@
+/*
+ * 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 { cloneDeep } from 'lodash/fp';
+import { mount } from 'enzyme';
+import React from 'react';
+import { MockedProvider } from 'react-apollo/test-utils';
+
+import {
+  apolloClientObservable,
+  mockGlobalState,
+  TestProviders,
+  SUB_PLUGINS_REDUCER,
+} from '../../../common/mock';
+
+import { OverviewHost } from '.';
+import { createStore, State } from '../../../common/store';
+import { overviewHostQuery } from '../../containers/overview_host/index.gql_query';
+import { GetOverviewHostQuery } from '../../../graphql/types';
+
+import { wait } from '../../../common/lib/helpers';
+
+jest.mock('../../../common/lib/kibana');
+
+const startDate = 1579553397080;
+const endDate = 1579639797080;
+
+interface MockedProvidedQuery {
+  request: {
+    query: GetOverviewHostQuery.Query;
+    fetchPolicy: string;
+    variables: GetOverviewHostQuery.Variables;
+  };
+  result: {
+    data: {
+      source: unknown;
+    };
+  };
+}
+
+const mockOpenTimelineQueryResults: MockedProvidedQuery[] = [
+  {
+    request: {
+      query: overviewHostQuery,
+      fetchPolicy: 'cache-and-network',
+      variables: {
+        sourceId: 'default',
+        timerange: { interval: '12h', from: startDate, to: endDate },
+        filterQuery: undefined,
+        defaultIndex: [
+          'apm-*-transaction*',
+          'auditbeat-*',
+          'endgame-*',
+          'filebeat-*',
+          'packetbeat-*',
+          'winlogbeat-*',
+        ],
+        inspect: false,
+      },
+    },
+    result: {
+      data: {
+        source: {
+          id: 'default',
+          OverviewHost: {
+            auditbeatAuditd: 1,
+            auditbeatFIM: 1,
+            auditbeatLogin: 1,
+            auditbeatPackage: 1,
+            auditbeatProcess: 1,
+            auditbeatUser: 1,
+            endgameDns: 1,
+            endgameFile: 1,
+            endgameImageLoad: 1,
+            endgameNetwork: 1,
+            endgameProcess: 1,
+            endgameRegistry: 1,
+            endgameSecurity: 1,
+            filebeatSystemModule: 1,
+            winlogbeatSecurity: 1,
+            winlogbeatMWSysmonOperational: 1,
+          },
+        },
+      },
+    },
+  },
+];
+
+describe('OverviewHost', () => {
+  const state: State = mockGlobalState;
+
+  let store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable);
+
+  beforeEach(() => {
+    const myState = cloneDeep(state);
+    store = createStore(myState, SUB_PLUGINS_REDUCER, apolloClientObservable);
+  });
+
+  test('it renders the expected widget title', () => {
+    const wrapper = mount(
+      <TestProviders store={store}>
+        <OverviewHost endDate={endDate} setQuery={jest.fn()} startDate={startDate} />
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="header-section-title"]')
+        .first()
+        .text()
+    ).toEqual('Host events');
+  });
+
+  test('it renders an empty subtitle while loading', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <OverviewHost endDate={endDate} setQuery={jest.fn()} startDate={startDate} />
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="header-panel-subtitle"]')
+        .first()
+        .text()
+    ).toEqual('');
+  });
+
+  test('it renders the expected event count in the subtitle after loading events', async () => {
+    const wrapper = mount(
+      <TestProviders>
+        <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
+          <OverviewHost endDate={endDate} setQuery={jest.fn()} startDate={startDate} />
+        </MockedProvider>
+      </TestProviders>
+    );
+    await wait();
+    wrapper.update();
+
+    expect(
+      wrapper
+        .find('[data-test-subj="header-panel-subtitle"]')
+        .first()
+        .text()
+    ).toEqual('Showing: 16 events');
+  });
+});
diff --git a/x-pack/plugins/siem/public/overview/components/overview_host/index.tsx b/x-pack/plugins/siem/public/overview/components/overview_host/index.tsx
new file mode 100644
index 00000000000000..111c1282931949
--- /dev/null
+++ b/x-pack/plugins/siem/public/overview/components/overview_host/index.tsx
@@ -0,0 +1,126 @@
+/*
+ * 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 { isEmpty } from 'lodash/fp';
+import { EuiButton, EuiFlexItem, EuiPanel } from '@elastic/eui';
+import numeral from '@elastic/numeral';
+import { FormattedMessage } from '@kbn/i18n/react';
+import React, { useMemo } from 'react';
+
+import { DEFAULT_NUMBER_FORMAT } from '../../../../common/constants';
+import { ESQuery } from '../../../../common/typed_json';
+import { ID as OverviewHostQueryId, OverviewHostQuery } from '../../containers/overview_host';
+import { HeaderSection } from '../../../common/components/header_section';
+import { useUiSetting$ } from '../../../common/lib/kibana';
+import { getHostsUrl } from '../../../common/components/link_to';
+import { getOverviewHostStats, OverviewHostStats } from '../overview_host_stats';
+import { manageQuery } from '../../../common/components/page/manage_query';
+import { inputsModel } from '../../../common/store/inputs';
+import { InspectButtonContainer } from '../../../common/components/inspect';
+import { useGetUrlSearch } from '../../../common/components/navigation/use_get_url_search';
+import { navTabs } from '../../../app/home/home_navigations';
+
+export interface OwnProps {
+  startDate: number;
+  endDate: number;
+  filterQuery?: ESQuery | string;
+  setQuery: ({
+    id,
+    inspect,
+    loading,
+    refetch,
+  }: {
+    id: string;
+    inspect: inputsModel.InspectQuery | null;
+    loading: boolean;
+    refetch: inputsModel.Refetch;
+  }) => void;
+}
+
+const OverviewHostStatsManage = manageQuery(OverviewHostStats);
+export type OverviewHostProps = OwnProps;
+
+const OverviewHostComponent: React.FC<OverviewHostProps> = ({
+  endDate,
+  filterQuery,
+  startDate,
+  setQuery,
+}) => {
+  const [defaultNumberFormat] = useUiSetting$<string>(DEFAULT_NUMBER_FORMAT);
+  const urlSearch = useGetUrlSearch(navTabs.hosts);
+  const hostPageButton = useMemo(
+    () => (
+      <EuiButton href={getHostsUrl(urlSearch)}>
+        <FormattedMessage id="xpack.siem.overview.hostsAction" defaultMessage="View hosts" />
+      </EuiButton>
+    ),
+    [urlSearch]
+  );
+  return (
+    <EuiFlexItem>
+      <InspectButtonContainer>
+        <EuiPanel>
+          <OverviewHostQuery
+            data-test-subj="overview-host-query"
+            endDate={endDate}
+            filterQuery={filterQuery}
+            sourceId="default"
+            startDate={startDate}
+          >
+            {({ overviewHost, loading, id, inspect, refetch }) => {
+              const hostEventsCount = getOverviewHostStats(overviewHost).reduce(
+                (total, stat) => total + stat.count,
+                0
+              );
+              const formattedHostEventsCount = numeral(hostEventsCount).format(defaultNumberFormat);
+
+              return (
+                <>
+                  <HeaderSection
+                    id={OverviewHostQueryId}
+                    subtitle={
+                      !isEmpty(overviewHost) ? (
+                        <FormattedMessage
+                          defaultMessage="Showing: {formattedHostEventsCount} {hostEventsCount, plural, one {event} other {events}}"
+                          id="xpack.siem.overview.overviewHost.hostsSubtitle"
+                          values={{
+                            formattedHostEventsCount,
+                            hostEventsCount,
+                          }}
+                        />
+                      ) : (
+                        <>{''}</>
+                      )
+                    }
+                    title={
+                      <FormattedMessage
+                        id="xpack.siem.overview.hostsTitle"
+                        defaultMessage="Host events"
+                      />
+                    }
+                  >
+                    {hostPageButton}
+                  </HeaderSection>
+
+                  <OverviewHostStatsManage
+                    loading={loading}
+                    data={overviewHost}
+                    setQuery={setQuery}
+                    id={id}
+                    inspect={inspect}
+                    refetch={refetch}
+                  />
+                </>
+              );
+            }}
+          </OverviewHostQuery>
+        </EuiPanel>
+      </InspectButtonContainer>
+    </EuiFlexItem>
+  );
+};
+
+export const OverviewHost = React.memo(OverviewHostComponent);
diff --git a/x-pack/plugins/siem/public/components/page/overview/overview_host_stats/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/overview/components/overview_host_stats/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/overview/overview_host_stats/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/overview/components/overview_host_stats/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/overview/components/overview_host_stats/index.test.tsx b/x-pack/plugins/siem/public/overview/components/overview_host_stats/index.test.tsx
new file mode 100644
index 00000000000000..fcbe0c5272dae5
--- /dev/null
+++ b/x-pack/plugins/siem/public/overview/components/overview_host_stats/index.test.tsx
@@ -0,0 +1,69 @@
+/*
+ * 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 { mount, shallow } from 'enzyme';
+import React from 'react';
+
+import { OverviewHostStats } from '.';
+import { mockData } from './mock';
+import { TestProviders } from '../../../common/mock/test_providers';
+
+describe('Overview Host Stat Data', () => {
+  describe('rendering', () => {
+    test('it renders the default OverviewHostStats', () => {
+      const wrapper = shallow(<OverviewHostStats data={mockData.OverviewHost} loading={false} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+  describe('loading', () => {
+    test('it does NOT show loading indicator when loading is false', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <OverviewHostStats data={mockData.OverviewHost} loading={false} />
+        </TestProviders>
+      );
+
+      // click the accordion to expand it
+      wrapper
+        .find('button')
+        .first()
+        .simulate('click');
+      wrapper.update();
+
+      expect(
+        wrapper
+          .find('[data-test-subj="host-stat-auditbeatAuditd"]')
+          .first()
+          .find('[data-test-subj="stat-value-loading-spinner"]')
+          .first()
+          .exists()
+      ).toBe(false);
+    });
+    test('it shows loading indicator when loading is true', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <OverviewHostStats data={mockData.OverviewHost} loading={true} />
+        </TestProviders>
+      );
+
+      // click the accordion to expand it
+      wrapper
+        .find('button')
+        .first()
+        .simulate('click');
+      wrapper.update();
+
+      expect(
+        wrapper
+          .find('[data-test-subj="host-stat-auditbeatAuditd"]')
+          .first()
+          .find('[data-test-subj="stat-value-loading-spinner"]')
+          .first()
+          .exists()
+      ).toBe(true);
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/overview/components/overview_host_stats/index.tsx b/x-pack/plugins/siem/public/overview/components/overview_host_stats/index.tsx
new file mode 100644
index 00000000000000..ab2e12f2110b8b
--- /dev/null
+++ b/x-pack/plugins/siem/public/overview/components/overview_host_stats/index.tsx
@@ -0,0 +1,269 @@
+/*
+ * 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 { EuiAccordion, EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiText } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import React from 'react';
+import styled from 'styled-components';
+
+import { OverviewHostData } from '../../../graphql/types';
+import { FormattedStat, StatGroup } from '../types';
+import { StatValue } from '../stat_value';
+
+interface OverviewHostProps {
+  data: OverviewHostData;
+  loading: boolean;
+}
+
+export const getOverviewHostStats = (data: OverviewHostData): FormattedStat[] => [
+  {
+    count: data.auditbeatAuditd ?? 0,
+    title: <FormattedMessage id="xpack.siem.overview.auditBeatAuditTitle" defaultMessage="Audit" />,
+    id: 'auditbeatAuditd',
+  },
+  {
+    count: data.auditbeatFIM ?? 0,
+    title: (
+      <FormattedMessage
+        id="xpack.siem.overview.auditBeatFimTitle"
+        defaultMessage="File Integrity Module"
+      />
+    ),
+    id: 'auditbeatFIM',
+  },
+  {
+    count: data.auditbeatLogin ?? 0,
+    title: <FormattedMessage id="xpack.siem.overview.auditBeatLoginTitle" defaultMessage="Login" />,
+    id: 'auditbeatLogin',
+  },
+  {
+    count: data.auditbeatPackage ?? 0,
+    title: (
+      <FormattedMessage id="xpack.siem.overview.auditBeatPackageTitle" defaultMessage="Package" />
+    ),
+    id: 'auditbeatPackage',
+  },
+  {
+    count: data.auditbeatProcess ?? 0,
+    title: (
+      <FormattedMessage id="xpack.siem.overview.auditBeatProcessTitle" defaultMessage="Process" />
+    ),
+    id: 'auditbeatProcess',
+  },
+  {
+    count: data.auditbeatUser ?? 0,
+    title: <FormattedMessage id="xpack.siem.overview.auditBeatUserTitle" defaultMessage="User" />,
+    id: 'auditbeatUser',
+  },
+  {
+    count: data.endgameDns ?? 0,
+    title: <FormattedMessage id="xpack.siem.overview.endgameDnsTitle" defaultMessage="DNS" />,
+    id: 'endgameDns',
+  },
+  {
+    count: data.endgameFile ?? 0,
+    title: <FormattedMessage id="xpack.siem.overview.endgameFileTitle" defaultMessage="File" />,
+    id: 'endgameFile',
+  },
+  {
+    count: data.endgameImageLoad ?? 0,
+    title: (
+      <FormattedMessage
+        id="xpack.siem.overview.endgameImageLoadTitle"
+        defaultMessage="Image Load"
+      />
+    ),
+    id: 'endgameImageLoad',
+  },
+  {
+    count: data.endgameNetwork ?? 0,
+    title: (
+      <FormattedMessage id="xpack.siem.overview.endgameNetworkTitle" defaultMessage="Network" />
+    ),
+    id: 'endgameNetwork',
+  },
+  {
+    count: data.endgameProcess ?? 0,
+    title: (
+      <FormattedMessage id="xpack.siem.overview.endgameProcessTitle" defaultMessage="Process" />
+    ),
+    id: 'endgameProcess',
+  },
+  {
+    count: data.endgameRegistry ?? 0,
+    title: (
+      <FormattedMessage id="xpack.siem.overview.endgameRegistryTitle" defaultMessage="Registry" />
+    ),
+    id: 'endgameRegistry',
+  },
+  {
+    count: data.endgameSecurity ?? 0,
+    title: (
+      <FormattedMessage id="xpack.siem.overview.endgameSecurityTitle" defaultMessage="Security" />
+    ),
+    id: 'endgameSecurity',
+  },
+  {
+    count: data.filebeatSystemModule ?? 0,
+    title: (
+      <FormattedMessage
+        id="xpack.siem.overview.filebeatSystemModuleTitle"
+        defaultMessage="System Module"
+      />
+    ),
+    id: 'filebeatSystemModule',
+  },
+  {
+    count: data.winlogbeatSecurity ?? 0,
+    title: (
+      <FormattedMessage
+        id="xpack.siem.overview.winlogbeatSecurityTitle"
+        defaultMessage="Security"
+      />
+    ),
+    id: 'winlogbeatSecurity',
+  },
+  {
+    count: data.winlogbeatMWSysmonOperational ?? 0,
+    title: (
+      <FormattedMessage
+        id="xpack.siem.overview.winlogbeatMWSysmonOperational"
+        defaultMessage="Microsoft-Windows-Sysmon/Operational"
+      />
+    ),
+    id: 'winlogbeatMWSysmonOperational',
+  },
+];
+
+const HostStatsContainer = styled.div`
+  .accordion-button {
+    width: 100%;
+  }
+`;
+
+const hostStatGroups: StatGroup[] = [
+  {
+    groupId: 'auditbeat',
+    name: (
+      <FormattedMessage
+        id="xpack.siem.overview.hostStatGroupAuditbeat"
+        defaultMessage="Auditbeat"
+      />
+    ),
+    statIds: [
+      'auditbeatAuditd',
+      'auditbeatFIM',
+      'auditbeatLogin',
+      'auditbeatPackage',
+      'auditbeatProcess',
+      'auditbeatUser',
+    ],
+  },
+  {
+    groupId: 'endgame',
+    name: (
+      <FormattedMessage
+        id="xpack.siem.overview.hostStatGroupElasticEndpointSecurity"
+        defaultMessage="Elastic Endpoint Security"
+      />
+    ),
+    statIds: [
+      'endgameDns',
+      'endgameFile',
+      'endgameImageLoad',
+      'endgameNetwork',
+      'endgameProcess',
+      'endgameRegistry',
+      'endgameSecurity',
+    ],
+  },
+  {
+    groupId: 'filebeat',
+    name: (
+      <FormattedMessage id="xpack.siem.overview.hostStatGroupFilebeat" defaultMessage="Filebeat" />
+    ),
+    statIds: ['filebeatSystemModule'],
+  },
+  {
+    groupId: 'winlogbeat',
+    name: (
+      <FormattedMessage
+        id="xpack.siem.overview.hostStatGroupWinlogbeat"
+        defaultMessage="Winlogbeat"
+      />
+    ),
+    statIds: ['winlogbeatSecurity', 'winlogbeatMWSysmonOperational'],
+  },
+];
+
+const Title = styled.div`
+  margin-left: 24px;
+`;
+
+const AccordionContent = styled.div`
+  margin-top: 8px;
+`;
+
+const OverviewHostStatsComponent: React.FC<OverviewHostProps> = ({ data, loading }) => {
+  const allHostStats = getOverviewHostStats(data);
+  const allHostStatsCount = allHostStats.reduce((total, stat) => total + stat.count, 0);
+
+  return (
+    <HostStatsContainer data-test-subj="overview-hosts-stats">
+      {hostStatGroups.map((statGroup, i) => {
+        const statsForGroup = allHostStats.filter(s => statGroup.statIds.includes(s.id));
+        const statsForGroupCount = statsForGroup.reduce((total, stat) => total + stat.count, 0);
+
+        return (
+          <React.Fragment key={statGroup.groupId}>
+            <EuiHorizontalRule margin="xs" />
+            <EuiAccordion
+              id={`host-stat-accordion-group${statGroup.groupId}`}
+              buttonContent={
+                <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween">
+                  <EuiFlexItem grow={false}>
+                    <EuiText>{statGroup.name}</EuiText>
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={false}>
+                    <StatValue
+                      count={statsForGroupCount}
+                      isGroupStat={true}
+                      isLoading={loading}
+                      max={allHostStatsCount}
+                    />
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              }
+              buttonContentClassName="accordion-button"
+            >
+              <AccordionContent>
+                {statsForGroup.map(stat => (
+                  <EuiFlexGroup key={stat.id} justifyContent="spaceBetween">
+                    <EuiFlexItem grow={false}>
+                      <EuiText color="subdued" size="s">
+                        <Title>{stat.title}</Title>
+                      </EuiText>
+                    </EuiFlexItem>
+                    <EuiFlexItem data-test-subj={`host-stat-${stat.id}`} grow={false}>
+                      <StatValue
+                        count={stat.count}
+                        isGroupStat={false}
+                        isLoading={loading}
+                        max={statsForGroupCount}
+                      />
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                ))}
+              </AccordionContent>
+            </EuiAccordion>
+          </React.Fragment>
+        );
+      })}
+    </HostStatsContainer>
+  );
+};
+
+export const OverviewHostStats = React.memo(OverviewHostStatsComponent);
diff --git a/x-pack/plugins/siem/public/overview/components/overview_host_stats/mock.ts b/x-pack/plugins/siem/public/overview/components/overview_host_stats/mock.ts
new file mode 100644
index 00000000000000..63b3a484c1eaa9
--- /dev/null
+++ b/x-pack/plugins/siem/public/overview/components/overview_host_stats/mock.ts
@@ -0,0 +1,28 @@
+/*
+ * 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 { OverviewHostData } from '../../../graphql/types';
+
+export const mockData: { OverviewHost: OverviewHostData } = {
+  OverviewHost: {
+    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,
+    winlogbeatSecurity: 195929,
+    winlogbeatMWSysmonOperational: 101070,
+  },
+};
diff --git a/x-pack/plugins/siem/public/overview/components/overview_network/index.test.tsx b/x-pack/plugins/siem/public/overview/components/overview_network/index.test.tsx
new file mode 100644
index 00000000000000..e28681a3320f5e
--- /dev/null
+++ b/x-pack/plugins/siem/public/overview/components/overview_network/index.test.tsx
@@ -0,0 +1,141 @@
+/*
+ * 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 { cloneDeep } from 'lodash/fp';
+import { mount } from 'enzyme';
+import React from 'react';
+import { MockedProvider } from 'react-apollo/test-utils';
+import {
+  apolloClientObservable,
+  mockGlobalState,
+  TestProviders,
+  SUB_PLUGINS_REDUCER,
+} from '../../../common/mock';
+
+import { OverviewNetwork } from '.';
+import { createStore, State } from '../../../common/store';
+import { overviewNetworkQuery } from '../../containers/overview_network/index.gql_query';
+import { GetOverviewHostQuery } from '../../../graphql/types';
+import { wait } from '../../../common/lib/helpers';
+
+jest.mock('../../../common/lib/kibana');
+
+const startDate = 1579553397080;
+const endDate = 1579639797080;
+
+interface MockedProvidedQuery {
+  request: {
+    query: GetOverviewHostQuery.Query;
+    fetchPolicy: string;
+    variables: GetOverviewHostQuery.Variables;
+  };
+  result: {
+    data: {
+      source: unknown;
+    };
+  };
+}
+
+const mockOpenTimelineQueryResults: MockedProvidedQuery[] = [
+  {
+    request: {
+      query: overviewNetworkQuery,
+      fetchPolicy: 'cache-and-network',
+      variables: {
+        sourceId: 'default',
+        timerange: { interval: '12h', from: startDate, to: endDate },
+        filterQuery: undefined,
+        defaultIndex: [
+          'apm-*-transaction*',
+          'auditbeat-*',
+          'endgame-*',
+          'filebeat-*',
+          'packetbeat-*',
+          'winlogbeat-*',
+        ],
+        inspect: false,
+      },
+    },
+    result: {
+      data: {
+        source: {
+          id: 'default',
+          OverviewNetwork: {
+            auditbeatSocket: 1,
+            filebeatCisco: 1,
+            filebeatNetflow: 1,
+            filebeatPanw: 1,
+            filebeatSuricata: 1,
+            filebeatZeek: 1,
+            packetbeatDNS: 1,
+            packetbeatFlow: 1,
+            packetbeatTLS: 1,
+          },
+        },
+      },
+    },
+  },
+];
+
+describe('OverviewNetwork', () => {
+  const state: State = mockGlobalState;
+
+  let store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable);
+
+  beforeEach(() => {
+    const myState = cloneDeep(state);
+    store = createStore(myState, SUB_PLUGINS_REDUCER, apolloClientObservable);
+  });
+
+  test('it renders the expected widget title', () => {
+    const wrapper = mount(
+      <TestProviders store={store}>
+        <OverviewNetwork endDate={endDate} setQuery={jest.fn()} startDate={startDate} />
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="header-section-title"]')
+        .first()
+        .text()
+    ).toEqual('Network events');
+  });
+
+  test('it renders an empty subtitle while loading', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <OverviewNetwork endDate={endDate} setQuery={jest.fn()} startDate={startDate} />
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="header-panel-subtitle"]')
+        .first()
+        .text()
+    ).toEqual('');
+  });
+
+  test('it renders the expected event count in the subtitle after loading events', async () => {
+    const wrapper = mount(
+      <TestProviders>
+        <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
+          <OverviewNetwork endDate={endDate} setQuery={jest.fn()} startDate={startDate} />
+        </MockedProvider>
+      </TestProviders>
+    );
+    await wait();
+    wrapper.update();
+
+    expect(
+      wrapper
+        .find('[data-test-subj="header-panel-subtitle"]')
+        .first()
+        .text()
+    ).toEqual('Showing: 9 events');
+  });
+});
diff --git a/x-pack/plugins/siem/public/overview/components/overview_network/index.tsx b/x-pack/plugins/siem/public/overview/components/overview_network/index.tsx
new file mode 100644
index 00000000000000..cd70831fddfbab
--- /dev/null
+++ b/x-pack/plugins/siem/public/overview/components/overview_network/index.tsx
@@ -0,0 +1,132 @@
+/*
+ * 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 { isEmpty } from 'lodash/fp';
+import { EuiButton, EuiFlexItem, EuiPanel } from '@elastic/eui';
+import numeral from '@elastic/numeral';
+import { FormattedMessage } from '@kbn/i18n/react';
+import React, { useMemo } from 'react';
+
+import { DEFAULT_NUMBER_FORMAT } from '../../../../common/constants';
+import { ESQuery } from '../../../../common/typed_json';
+import { HeaderSection } from '../../../common/components/header_section';
+import { useUiSetting$ } from '../../../common/lib/kibana';
+import { manageQuery } from '../../../common/components/page/manage_query';
+import {
+  ID as OverviewNetworkQueryId,
+  OverviewNetworkQuery,
+} from '../../containers/overview_network';
+import { inputsModel } from '../../../common/store/inputs';
+import { getOverviewNetworkStats, OverviewNetworkStats } from '../overview_network_stats';
+import { getNetworkUrl } from '../../../common/components/link_to';
+import { InspectButtonContainer } from '../../../common/components/inspect';
+import { useGetUrlSearch } from '../../../common/components/navigation/use_get_url_search';
+import { navTabs } from '../../../app/home/home_navigations';
+
+export interface OverviewNetworkProps {
+  startDate: number;
+  endDate: number;
+  filterQuery?: ESQuery | string;
+  setQuery: ({
+    id,
+    inspect,
+    loading,
+    refetch,
+  }: {
+    id: string;
+    inspect: inputsModel.InspectQuery | null;
+    loading: boolean;
+    refetch: inputsModel.Refetch;
+  }) => void;
+}
+
+const OverviewNetworkStatsManage = manageQuery(OverviewNetworkStats);
+
+const OverviewNetworkComponent: React.FC<OverviewNetworkProps> = ({
+  endDate,
+  filterQuery,
+  startDate,
+  setQuery,
+}) => {
+  const [defaultNumberFormat] = useUiSetting$<string>(DEFAULT_NUMBER_FORMAT);
+  const urlSearch = useGetUrlSearch(navTabs.network);
+  const networkPageButton = useMemo(
+    () => (
+      <EuiButton href={getNetworkUrl(urlSearch)}>
+        <FormattedMessage id="xpack.siem.overview.networkAction" defaultMessage="View network" />
+      </EuiButton>
+    ),
+    [urlSearch]
+  );
+  return (
+    <EuiFlexItem>
+      <InspectButtonContainer>
+        <EuiPanel>
+          <OverviewNetworkQuery
+            data-test-subj="overview-network-query"
+            endDate={endDate}
+            filterQuery={filterQuery}
+            sourceId="default"
+            startDate={startDate}
+          >
+            {({ overviewNetwork, loading, id, inspect, refetch }) => {
+              const networkEventsCount = getOverviewNetworkStats(overviewNetwork).reduce(
+                (total, stat) => total + stat.count,
+                0
+              );
+              const formattedNetworkEventsCount = numeral(networkEventsCount).format(
+                defaultNumberFormat
+              );
+
+              return (
+                <>
+                  <HeaderSection
+                    id={OverviewNetworkQueryId}
+                    subtitle={
+                      !isEmpty(overviewNetwork) ? (
+                        <FormattedMessage
+                          defaultMessage="Showing: {formattedNetworkEventsCount} {networkEventsCount, plural, one {event} other {events}}"
+                          id="xpack.siem.overview.overviewNetwork.networkSubtitle"
+                          values={{
+                            formattedNetworkEventsCount,
+                            networkEventsCount,
+                          }}
+                        />
+                      ) : (
+                        <>{''}</>
+                      )
+                    }
+                    title={
+                      <FormattedMessage
+                        id="xpack.siem.overview.networkTitle"
+                        defaultMessage="Network events"
+                      />
+                    }
+                  >
+                    {networkPageButton}
+                  </HeaderSection>
+
+                  <OverviewNetworkStatsManage
+                    loading={loading}
+                    data={overviewNetwork}
+                    id={id}
+                    inspect={inspect}
+                    setQuery={setQuery}
+                    refetch={refetch}
+                  />
+                </>
+              );
+            }}
+          </OverviewNetworkQuery>
+        </EuiPanel>
+      </InspectButtonContainer>
+    </EuiFlexItem>
+  );
+};
+
+OverviewNetworkComponent.displayName = 'OverviewNetworkComponent';
+
+export const OverviewNetwork = React.memo(OverviewNetworkComponent);
diff --git a/x-pack/plugins/siem/public/components/page/overview/overview_network_stats/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/overview/components/overview_network_stats/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/overview/overview_network_stats/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/overview/components/overview_network_stats/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/overview/components/overview_network_stats/index.test.tsx b/x-pack/plugins/siem/public/overview/components/overview_network_stats/index.test.tsx
new file mode 100644
index 00000000000000..bff6ee7d7469d6
--- /dev/null
+++ b/x-pack/plugins/siem/public/overview/components/overview_network_stats/index.test.tsx
@@ -0,0 +1,72 @@
+/*
+ * 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 { mount, shallow } from 'enzyme';
+import React from 'react';
+
+import { OverviewNetworkStats } from '.';
+import { mockData } from './mock';
+import { TestProviders } from '../../../common/mock/test_providers';
+
+describe('Overview Network Stat Data', () => {
+  describe('rendering', () => {
+    test('it renders the default OverviewNetworkStats', () => {
+      const wrapper = shallow(
+        <OverviewNetworkStats data={mockData.OverviewNetwork} loading={false} />
+      );
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+  describe('loading', () => {
+    test('it does NOT show loading indicator when loading is false', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <OverviewNetworkStats data={mockData.OverviewNetwork} loading={false} />
+        </TestProviders>
+      );
+
+      // click the accordion to expand it
+      wrapper
+        .find('button')
+        .first()
+        .simulate('click');
+      wrapper.update();
+
+      expect(
+        wrapper
+          .find('[data-test-subj="network-stat-auditbeatSocket"]')
+          .first()
+          .find('[data-test-subj="stat-value-loading-spinner"]')
+          .first()
+          .exists()
+      ).toBe(false);
+    });
+
+    test('it shows the loading indicator when loading is true', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <OverviewNetworkStats data={mockData.OverviewNetwork} loading={true} />
+        </TestProviders>
+      );
+
+      // click the accordion to expand it
+      wrapper
+        .find('button')
+        .first()
+        .simulate('click');
+      wrapper.update();
+
+      expect(
+        wrapper
+          .find('[data-test-subj="network-stat-auditbeatSocket"]')
+          .first()
+          .find('[data-test-subj="stat-value-loading-spinner"]')
+          .first()
+          .exists()
+      ).toBe(true);
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/overview/components/overview_network_stats/index.tsx b/x-pack/plugins/siem/public/overview/components/overview_network_stats/index.tsx
new file mode 100644
index 00000000000000..709f1ffbe5cae5
--- /dev/null
+++ b/x-pack/plugins/siem/public/overview/components/overview_network_stats/index.tsx
@@ -0,0 +1,195 @@
+/*
+ * 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 { EuiAccordion, EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiText } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import React from 'react';
+import styled from 'styled-components';
+
+import { OverviewNetworkData } from '../../../graphql/types';
+import { FormattedStat, StatGroup } from '../types';
+import { StatValue } from '../stat_value';
+
+interface OverviewNetworkProps {
+  data: OverviewNetworkData;
+  loading: boolean;
+}
+
+export const getOverviewNetworkStats = (data: OverviewNetworkData): FormattedStat[] => [
+  {
+    count: data.auditbeatSocket ?? 0,
+    title: (
+      <FormattedMessage id="xpack.siem.overview.auditBeatSocketTitle" defaultMessage="Socket" />
+    ),
+    id: 'auditbeatSocket',
+  },
+  {
+    count: data.filebeatCisco ?? 0,
+    title: <FormattedMessage id="xpack.siem.overview.filebeatCiscoTitle" defaultMessage="Cisco" />,
+    id: 'filebeatCisco',
+  },
+  {
+    count: data.filebeatNetflow ?? 0,
+    title: (
+      <FormattedMessage id="xpack.siem.overview.filebeatNetflowTitle" defaultMessage="Netflow" />
+    ),
+    id: 'filebeatNetflow',
+  },
+  {
+    count: data.filebeatPanw ?? 0,
+    title: (
+      <FormattedMessage
+        id="xpack.siem.overview.filebeatPanwTitle"
+        defaultMessage="Palo Alto Networks"
+      />
+    ),
+    id: 'filebeatPanw',
+  },
+  {
+    count: data.filebeatSuricata ?? 0,
+    title: (
+      <FormattedMessage id="xpack.siem.overview.fileBeatSuricataTitle" defaultMessage="Suricata" />
+    ),
+    id: 'filebeatSuricata',
+  },
+  {
+    count: data.filebeatZeek ?? 0,
+    title: <FormattedMessage id="xpack.siem.overview.fileBeatZeekTitle" defaultMessage="Zeek" />,
+    id: 'filebeatZeek',
+  },
+  {
+    count: data.packetbeatDNS ?? 0,
+    title: <FormattedMessage id="xpack.siem.overview.packetBeatDnsTitle" defaultMessage="DNS" />,
+    id: 'packetbeatDNS',
+  },
+  {
+    count: data.packetbeatFlow ?? 0,
+    title: <FormattedMessage id="xpack.siem.overview.packetBeatFlowTitle" defaultMessage="Flow" />,
+    id: 'packetbeatFlow',
+  },
+  {
+    count: data.packetbeatTLS ?? 0,
+    title: <FormattedMessage id="xpack.siem.overview.packetbeatTLSTitle" defaultMessage="TLS" />,
+    id: 'packetbeatTLS',
+  },
+];
+
+const networkStatGroups: StatGroup[] = [
+  {
+    groupId: 'auditbeat',
+    name: (
+      <FormattedMessage
+        id="xpack.siem.overview.networkStatGroupAuditbeat"
+        defaultMessage="Auditbeat"
+      />
+    ),
+    statIds: ['auditbeatSocket'],
+  },
+  {
+    groupId: 'filebeat',
+    name: (
+      <FormattedMessage
+        id="xpack.siem.overview.networkStatGroupFilebeat"
+        defaultMessage="Filebeat"
+      />
+    ),
+    statIds: [
+      'filebeatCisco',
+      'filebeatNetflow',
+      'filebeatPanw',
+      'filebeatSuricata',
+      'filebeatZeek',
+    ],
+  },
+  {
+    groupId: 'packetbeat',
+    name: (
+      <FormattedMessage
+        id="xpack.siem.overview.networkStatGroupPacketbeat"
+        defaultMessage="Packetbeat"
+      />
+    ),
+    statIds: ['packetbeatDNS', 'packetbeatFlow', 'packetbeatTLS'],
+  },
+];
+
+const NetworkStatsContainer = styled.div`
+  .accordion-button {
+    width: 100%;
+  }
+`;
+
+const Title = styled.div`
+  margin-left: 24px;
+`;
+
+const AccordionContent = styled.div`
+  margin-top: 8px;
+`;
+
+const OverviewNetworkStatsComponent: React.FC<OverviewNetworkProps> = ({ data, loading }) => {
+  const allNetworkStats = getOverviewNetworkStats(data);
+  const allNetworkStatsCount = allNetworkStats.reduce((total, stat) => total + stat.count, 0);
+
+  return (
+    <NetworkStatsContainer data-test-subj="overview-network-stats">
+      {networkStatGroups.map((statGroup, i) => {
+        const statsForGroup = allNetworkStats.filter(s => statGroup.statIds.includes(s.id));
+        const statsForGroupCount = statsForGroup.reduce((total, stat) => total + stat.count, 0);
+
+        return (
+          <React.Fragment key={statGroup.groupId}>
+            <EuiHorizontalRule margin="xs" />
+            <EuiAccordion
+              id={`network-stat-accordion-group${statGroup.groupId}`}
+              buttonContent={
+                <EuiFlexGroup
+                  data-test-subj={`network-stat-group-${statGroup.groupId}`}
+                  justifyContent="spaceBetween"
+                >
+                  <EuiFlexItem grow={false}>
+                    <EuiText>{statGroup.name}</EuiText>
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={false}>
+                    <StatValue
+                      count={statsForGroupCount}
+                      isGroupStat={true}
+                      isLoading={loading}
+                      max={allNetworkStatsCount}
+                    />
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              }
+              buttonContentClassName="accordion-button"
+            >
+              <AccordionContent>
+                {statsForGroup.map(stat => (
+                  <EuiFlexGroup key={stat.id} justifyContent="spaceBetween">
+                    <EuiFlexItem grow={false}>
+                      <EuiText color="subdued" size="s">
+                        <Title>{stat.title}</Title>
+                      </EuiText>
+                    </EuiFlexItem>
+                    <EuiFlexItem data-test-subj={`network-stat-${stat.id}`} grow={false}>
+                      <StatValue
+                        count={stat.count}
+                        isGroupStat={false}
+                        isLoading={loading}
+                        max={statsForGroupCount}
+                      />
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                ))}
+              </AccordionContent>
+            </EuiAccordion>
+          </React.Fragment>
+        );
+      })}
+    </NetworkStatsContainer>
+  );
+};
+
+export const OverviewNetworkStats = React.memo(OverviewNetworkStatsComponent);
diff --git a/x-pack/plugins/siem/public/overview/components/overview_network_stats/mock.ts b/x-pack/plugins/siem/public/overview/components/overview_network_stats/mock.ts
new file mode 100644
index 00000000000000..f55d6a1577ccd8
--- /dev/null
+++ b/x-pack/plugins/siem/public/overview/components/overview_network_stats/mock.ts
@@ -0,0 +1,21 @@
+/*
+ * 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 { OverviewNetworkData } from '../../../graphql/types';
+
+export const mockData: { OverviewNetwork: OverviewNetworkData } = {
+  OverviewNetwork: {
+    auditbeatSocket: 12,
+    filebeatCisco: 999,
+    filebeatNetflow: 7777,
+    filebeatPanw: 66,
+    filebeatSuricata: 60015,
+    filebeatZeek: 2003,
+    packetbeatDNS: 10277307,
+    packetbeatFlow: 16,
+    packetbeatTLS: 3400000,
+  },
+};
diff --git a/x-pack/plugins/siem/public/components/recent_cases/filters/index.tsx b/x-pack/plugins/siem/public/overview/components/recent_cases/filters/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/recent_cases/filters/index.tsx
rename to x-pack/plugins/siem/public/overview/components/recent_cases/filters/index.tsx
diff --git a/x-pack/plugins/siem/public/overview/components/recent_cases/index.tsx b/x-pack/plugins/siem/public/overview/components/recent_cases/index.tsx
new file mode 100644
index 00000000000000..03c1754f1b8d5a
--- /dev/null
+++ b/x-pack/plugins/siem/public/overview/components/recent_cases/index.tsx
@@ -0,0 +1,79 @@
+/*
+ * 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 { EuiHorizontalRule, EuiLink, EuiText } from '@elastic/eui';
+import React, { useEffect, useMemo, useRef } from 'react';
+
+import { FilterOptions, QueryParams } from '../../../cases/containers/types';
+import { DEFAULT_QUERY_PARAMS, useGetCases } from '../../../cases/containers/use_get_cases';
+import { getCaseUrl } from '../../../common/components/link_to/redirect_to_case';
+import { useGetUrlSearch } from '../../../common/components/navigation/use_get_url_search';
+import { navTabs } from '../../../app/home/home_navigations';
+import { LoadingPlaceholders } from '../loading_placeholders';
+import { NoCases } from './no_cases';
+import { RecentCases } from './recent_cases';
+import * as i18n from './translations';
+
+const usePrevious = (value: FilterOptions) => {
+  const ref = useRef();
+  useEffect(() => {
+    (ref.current as unknown) = value;
+  });
+  return ref.current;
+};
+
+const MAX_CASES_TO_SHOW = 3;
+
+const queryParams: QueryParams = {
+  ...DEFAULT_QUERY_PARAMS,
+  perPage: MAX_CASES_TO_SHOW,
+};
+
+const StatefulRecentCasesComponent = React.memo(
+  ({ filterOptions }: { filterOptions: FilterOptions }) => {
+    const previousFilterOptions = usePrevious(filterOptions);
+    const { data, loading, setFilters } = useGetCases(queryParams);
+    const isLoadingCases = useMemo(
+      () => loading.indexOf('cases') > -1 || loading.indexOf('caseUpdate') > -1,
+      [loading]
+    );
+    const search = useGetUrlSearch(navTabs.case);
+    const allCasesLink = useMemo(
+      () => <EuiLink href={getCaseUrl(search)}>{i18n.VIEW_ALL_CASES}</EuiLink>,
+      [search]
+    );
+
+    useEffect(() => {
+      if (previousFilterOptions !== undefined && previousFilterOptions !== filterOptions) {
+        setFilters(filterOptions);
+      }
+    }, [previousFilterOptions, filterOptions, setFilters]);
+
+    const content = useMemo(
+      () =>
+        isLoadingCases ? (
+          <LoadingPlaceholders lines={2} placeholders={3} />
+        ) : !isLoadingCases && data.cases.length === 0 ? (
+          <NoCases />
+        ) : (
+          <RecentCases cases={data.cases} />
+        ),
+      [isLoadingCases, data]
+    );
+
+    return (
+      <EuiText color="subdued" size="s">
+        {content}
+        <EuiHorizontalRule margin="s" />
+        <EuiText size="xs">{allCasesLink}</EuiText>
+      </EuiText>
+    );
+  }
+);
+
+StatefulRecentCasesComponent.displayName = 'StatefulRecentCasesComponent';
+
+export const StatefulRecentCases = React.memo(StatefulRecentCasesComponent);
diff --git a/x-pack/plugins/siem/public/overview/components/recent_cases/no_cases/index.tsx b/x-pack/plugins/siem/public/overview/components/recent_cases/no_cases/index.tsx
new file mode 100644
index 00000000000000..e29223ca07e65e
--- /dev/null
+++ b/x-pack/plugins/siem/public/overview/components/recent_cases/no_cases/index.tsx
@@ -0,0 +1,34 @@
+/*
+ * 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 { EuiLink } from '@elastic/eui';
+import React, { useMemo } from 'react';
+
+import { getCreateCaseUrl } from '../../../../common/components/link_to/redirect_to_case';
+import { useGetUrlSearch } from '../../../../common/components/navigation/use_get_url_search';
+import { navTabs } from '../../../../app/home/home_navigations';
+
+import * as i18n from '../translations';
+
+const NoCasesComponent = () => {
+  const urlSearch = useGetUrlSearch(navTabs.case);
+  const newCaseLink = useMemo(
+    () => <EuiLink href={getCreateCaseUrl(urlSearch)}>{` ${i18n.START_A_NEW_CASE}`}</EuiLink>,
+    [urlSearch]
+  );
+
+  return (
+    <>
+      <span>{i18n.NO_CASES}</span>
+      {newCaseLink}
+      {'!'}
+    </>
+  );
+};
+
+NoCasesComponent.displayName = 'NoCasesComponent';
+
+export const NoCases = React.memo(NoCasesComponent);
diff --git a/x-pack/plugins/siem/public/components/recent_cases/recent_cases.tsx b/x-pack/plugins/siem/public/overview/components/recent_cases/recent_cases.tsx
similarity index 82%
rename from x-pack/plugins/siem/public/components/recent_cases/recent_cases.tsx
rename to x-pack/plugins/siem/public/overview/components/recent_cases/recent_cases.tsx
index eb17c75f4111be..9618ddb05716d0 100644
--- a/x-pack/plugins/siem/public/components/recent_cases/recent_cases.tsx
+++ b/x-pack/plugins/siem/public/overview/components/recent_cases/recent_cases.tsx
@@ -8,11 +8,11 @@ import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiSpacer, EuiText } from '@elastic
 import React from 'react';
 import styled from 'styled-components';
 
-import { Case } from '../../containers/case/types';
-import { getCaseDetailsUrl } from '../link_to/redirect_to_case';
-import { Markdown } from '../markdown';
-import { useGetUrlSearch } from '../navigation/use_get_url_search';
-import { navTabs } from '../../pages/home/home_navigations';
+import { Case } from '../../../cases/containers/types';
+import { getCaseDetailsUrl } from '../../../common/components/link_to/redirect_to_case';
+import { Markdown } from '../../../common/components/markdown';
+import { useGetUrlSearch } from '../../../common/components/navigation/use_get_url_search';
+import { navTabs } from '../../../app/home/home_navigations';
 import { IconWithCount } from '../recent_timelines/counts';
 
 import * as i18n from './translations';
diff --git a/x-pack/plugins/siem/public/components/recent_cases/translations.ts b/x-pack/plugins/siem/public/overview/components/recent_cases/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/recent_cases/translations.ts
rename to x-pack/plugins/siem/public/overview/components/recent_cases/translations.ts
diff --git a/x-pack/plugins/siem/public/components/recent_cases/types.ts b/x-pack/plugins/siem/public/overview/components/recent_cases/types.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/recent_cases/types.ts
rename to x-pack/plugins/siem/public/overview/components/recent_cases/types.ts
diff --git a/x-pack/plugins/siem/public/overview/components/recent_timelines/counts/index.tsx b/x-pack/plugins/siem/public/overview/components/recent_timelines/counts/index.tsx
new file mode 100644
index 00000000000000..bdb75f8800647b
--- /dev/null
+++ b/x-pack/plugins/siem/public/overview/components/recent_timelines/counts/index.tsx
@@ -0,0 +1,62 @@
+/*
+ * 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 { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText, EuiToolTip } from '@elastic/eui';
+import React from 'react';
+import styled from 'styled-components';
+
+import {
+  getPinnedEventCount,
+  getNotesCount,
+} from '../../../../timelines/components/open_timeline/helpers';
+import { OpenTimelineResult } from '../../../../timelines/components/open_timeline/types';
+
+import * as i18n from '../translations';
+
+const Icon = styled(EuiIcon)`
+  margin-right: 8px;
+`;
+
+const FlexGroup = styled(EuiFlexGroup)`
+  margin-right: 16px;
+`;
+
+export const IconWithCount = React.memo<{ count: number; icon: string; tooltip: string }>(
+  ({ count, icon, tooltip }) => (
+    <EuiToolTip content={tooltip}>
+      <FlexGroup alignItems="center" gutterSize="none">
+        <EuiFlexItem grow={false}>
+          <Icon color="subdued" size="s" type={icon} />
+        </EuiFlexItem>
+
+        <EuiFlexItem grow={false}>
+          <EuiText color="subdued" size="xs">
+            {count}
+          </EuiText>
+        </EuiFlexItem>
+      </FlexGroup>
+    </EuiToolTip>
+  )
+);
+
+IconWithCount.displayName = 'IconWithCount';
+
+export const RecentTimelineCounts = React.memo<{
+  timeline: OpenTimelineResult;
+}>(({ timeline }) => {
+  return (
+    <div>
+      <IconWithCount
+        count={getPinnedEventCount(timeline)}
+        icon="pinFilled"
+        tooltip={i18n.PINNED_EVENTS}
+      />
+      <IconWithCount count={getNotesCount(timeline)} icon="editorComment" tooltip={i18n.NOTES} />
+    </div>
+  );
+});
+
+RecentTimelineCounts.displayName = 'RecentTimelineCounts';
diff --git a/x-pack/plugins/siem/public/components/recent_timelines/filters/index.tsx b/x-pack/plugins/siem/public/overview/components/recent_timelines/filters/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/recent_timelines/filters/index.tsx
rename to x-pack/plugins/siem/public/overview/components/recent_timelines/filters/index.tsx
diff --git a/x-pack/plugins/siem/public/overview/components/recent_timelines/header/index.tsx b/x-pack/plugins/siem/public/overview/components/recent_timelines/header/index.tsx
new file mode 100644
index 00000000000000..07144840dae11c
--- /dev/null
+++ b/x-pack/plugins/siem/public/overview/components/recent_timelines/header/index.tsx
@@ -0,0 +1,33 @@
+/*
+ * 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 { EuiText, EuiLink } from '@elastic/eui';
+import React, { useCallback } from 'react';
+
+import { isUntitled } from '../../../../timelines/components/open_timeline/helpers';
+import {
+  OnOpenTimeline,
+  OpenTimelineResult,
+} from '../../../../timelines/components/open_timeline/types';
+import * as i18n from '../translations';
+
+export const RecentTimelineHeader = React.memo<{
+  onOpenTimeline: OnOpenTimeline;
+  timeline: OpenTimelineResult;
+}>(({ onOpenTimeline, timeline, timeline: { title, savedObjectId } }) => {
+  const onClick = useCallback(
+    () => onOpenTimeline({ duplicate: false, timelineId: `${savedObjectId}` }),
+    [onOpenTimeline, savedObjectId]
+  );
+
+  return (
+    <EuiText size="s">
+      <EuiLink onClick={onClick}>{isUntitled(timeline) ? i18n.UNTITLED_TIMELINE : title}</EuiLink>
+    </EuiText>
+  );
+});
+
+RecentTimelineHeader.displayName = 'RecentTimelineHeader';
diff --git a/x-pack/plugins/siem/public/overview/components/recent_timelines/index.tsx b/x-pack/plugins/siem/public/overview/components/recent_timelines/index.tsx
new file mode 100644
index 00000000000000..75b157a282eeb9
--- /dev/null
+++ b/x-pack/plugins/siem/public/overview/components/recent_timelines/index.tsx
@@ -0,0 +1,117 @@
+/*
+ * 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 ApolloClient from 'apollo-client';
+import { EuiHorizontalRule, EuiLink, EuiText } from '@elastic/eui';
+import React, { useCallback, useMemo, useEffect } from 'react';
+import { connect, ConnectedProps } from 'react-redux';
+import { Dispatch } from 'redux';
+
+import { TimelineType } from '../../../../common/types/timeline';
+import { useGetAllTimeline } from '../../../timelines/containers/all';
+import { SortFieldTimeline, Direction } from '../../../graphql/types';
+import {
+  queryTimelineById,
+  dispatchUpdateTimeline,
+} from '../../../timelines/components/open_timeline/helpers';
+import { OnOpenTimeline } from '../../../timelines/components/open_timeline/types';
+import { updateIsLoading as dispatchUpdateIsLoading } from '../../../timelines/store/timeline/actions';
+
+import { RecentTimelines } from './recent_timelines';
+import * as i18n from './translations';
+import { FilterMode } from './types';
+import { useGetUrlSearch } from '../../../common/components/navigation/use_get_url_search';
+import { navTabs } from '../../../app/home/home_navigations';
+import { getTimelinesUrl } from '../../../common/components/link_to/redirect_to_timelines';
+import { LoadingPlaceholders } from '../loading_placeholders';
+
+interface OwnProps {
+  apolloClient: ApolloClient<{}>;
+  filterBy: FilterMode;
+}
+
+export type Props = OwnProps & PropsFromRedux;
+
+const PAGE_SIZE = 3;
+
+const StatefulRecentTimelinesComponent = React.memo<Props>(
+  ({ apolloClient, filterBy, updateIsLoading, updateTimeline }) => {
+    const onOpenTimeline: OnOpenTimeline = useCallback(
+      ({ duplicate, timelineId }: { duplicate: boolean; timelineId: string }) => {
+        queryTimelineById({
+          apolloClient,
+          duplicate,
+          timelineId,
+          updateIsLoading,
+          updateTimeline,
+        });
+      },
+      [apolloClient, updateIsLoading, updateTimeline]
+    );
+
+    const noTimelinesMessage =
+      filterBy === 'favorites' ? i18n.NO_FAVORITE_TIMELINES : i18n.NO_TIMELINES;
+    const urlSearch = useGetUrlSearch(navTabs.timelines);
+    const linkAllTimelines = useMemo(
+      () => <EuiLink href={getTimelinesUrl(urlSearch)}>{i18n.VIEW_ALL_TIMELINES}</EuiLink>,
+      [urlSearch]
+    );
+    const loadingPlaceholders = useMemo(
+      () => (
+        <LoadingPlaceholders lines={2} placeholders={filterBy === 'favorites' ? 1 : PAGE_SIZE} />
+      ),
+      [filterBy]
+    );
+
+    const { fetchAllTimeline, timelines, loading } = useGetAllTimeline();
+
+    useEffect(() => {
+      fetchAllTimeline({
+        pageInfo: {
+          pageIndex: 1,
+          pageSize: PAGE_SIZE,
+        },
+        search: '',
+        sort: {
+          sortField: SortFieldTimeline.updated,
+          sortOrder: Direction.desc,
+        },
+        onlyUserFavorite: filterBy === 'favorites',
+        timelineType: TimelineType.default,
+      });
+    }, [filterBy]);
+
+    return (
+      <>
+        {loading ? (
+          loadingPlaceholders
+        ) : (
+          <RecentTimelines
+            noTimelinesMessage={noTimelinesMessage}
+            onOpenTimeline={onOpenTimeline}
+            timelines={timelines}
+          />
+        )}
+        <EuiHorizontalRule margin="s" />
+        <EuiText size="xs">{linkAllTimelines}</EuiText>
+      </>
+    );
+  }
+);
+
+StatefulRecentTimelinesComponent.displayName = 'StatefulRecentTimelinesComponent';
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  updateIsLoading: ({ id, isLoading }: { id: string; isLoading: boolean }) =>
+    dispatch(dispatchUpdateIsLoading({ id, isLoading })),
+  updateTimeline: dispatchUpdateTimeline(dispatch),
+});
+
+const connector = connect(null, mapDispatchToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export const StatefulRecentTimelines = connector(StatefulRecentTimelinesComponent);
diff --git a/x-pack/plugins/siem/public/components/recent_timelines/recent_timelines.tsx b/x-pack/plugins/siem/public/overview/components/recent_timelines/recent_timelines.tsx
similarity index 93%
rename from x-pack/plugins/siem/public/components/recent_timelines/recent_timelines.tsx
rename to x-pack/plugins/siem/public/overview/components/recent_timelines/recent_timelines.tsx
index dbcd3fe721ea36..ba6fcad2a03e9b 100644
--- a/x-pack/plugins/siem/public/components/recent_timelines/recent_timelines.tsx
+++ b/x-pack/plugins/siem/public/overview/components/recent_timelines/recent_timelines.tsx
@@ -15,8 +15,11 @@ import {
 import React from 'react';
 
 import { RecentTimelineHeader } from './header';
-import { OnOpenTimeline, OpenTimelineResult } from '../open_timeline/types';
-import { WithHoverActions } from '../with_hover_actions';
+import {
+  OnOpenTimeline,
+  OpenTimelineResult,
+} from '../../../timelines/components/open_timeline/types';
+import { WithHoverActions } from '../../../common/components/with_hover_actions';
 
 import { RecentTimelineCounts } from './counts';
 import * as i18n from './translations';
diff --git a/x-pack/plugins/siem/public/components/recent_timelines/translations.ts b/x-pack/plugins/siem/public/overview/components/recent_timelines/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/recent_timelines/translations.ts
rename to x-pack/plugins/siem/public/overview/components/recent_timelines/translations.ts
diff --git a/x-pack/plugins/siem/public/components/recent_timelines/types.ts b/x-pack/plugins/siem/public/overview/components/recent_timelines/types.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/recent_timelines/types.ts
rename to x-pack/plugins/siem/public/overview/components/recent_timelines/types.ts
diff --git a/x-pack/plugins/siem/public/overview/components/sidebar/index.tsx b/x-pack/plugins/siem/public/overview/components/sidebar/index.tsx
new file mode 100644
index 00000000000000..773750f3d0cc57
--- /dev/null
+++ b/x-pack/plugins/siem/public/overview/components/sidebar/index.tsx
@@ -0,0 +1,32 @@
+/*
+ * 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, { useState } from 'react';
+
+import { FilterMode as RecentTimelinesFilterMode } from '../recent_timelines/types';
+import { FilterMode as RecentCasesFilterMode } from '../recent_cases/types';
+
+import { Sidebar } from './sidebar';
+
+export const StatefulSidebar = React.memo(() => {
+  const [recentTimelinesFilterBy, setRecentTimelinesFilterBy] = useState<RecentTimelinesFilterMode>(
+    'favorites'
+  );
+  const [recentCasesFilterBy, setRecentCasesFilterBy] = useState<RecentCasesFilterMode>(
+    'recentlyCreated'
+  );
+
+  return (
+    <Sidebar
+      recentCasesFilterBy={recentCasesFilterBy}
+      setRecentCasesFilterBy={setRecentCasesFilterBy}
+      recentTimelinesFilterBy={recentTimelinesFilterBy}
+      setRecentTimelinesFilterBy={setRecentTimelinesFilterBy}
+    />
+  );
+});
+
+StatefulSidebar.displayName = 'StatefulSidebar';
diff --git a/x-pack/plugins/siem/public/pages/overview/sidebar/sidebar.tsx b/x-pack/plugins/siem/public/overview/components/sidebar/sidebar.tsx
similarity index 78%
rename from x-pack/plugins/siem/public/pages/overview/sidebar/sidebar.tsx
rename to x-pack/plugins/siem/public/overview/components/sidebar/sidebar.tsx
index c972fd83cc88f8..81de0ed5035956 100644
--- a/x-pack/plugins/siem/public/pages/overview/sidebar/sidebar.tsx
+++ b/x-pack/plugins/siem/public/overview/components/sidebar/sidebar.tsx
@@ -9,19 +9,19 @@ import React, { useMemo } from 'react';
 import styled from 'styled-components';
 
 import { ENABLE_NEWS_FEED_SETTING, NEWS_FEED_URL_SETTING } from '../../../../common/constants';
-import { Filters as RecentCasesFilters } from '../../../components/recent_cases/filters';
-import { Filters as RecentTimelinesFilters } from '../../../components/recent_timelines/filters';
-import { StatefulRecentCases } from '../../../components/recent_cases';
-import { StatefulRecentTimelines } from '../../../components/recent_timelines';
-import { StatefulNewsFeed } from '../../../components/news_feed';
-import { FilterMode as RecentTimelinesFilterMode } from '../../../components/recent_timelines/types';
-import { FilterMode as RecentCasesFilterMode } from '../../../components/recent_cases/types';
-import { DEFAULT_FILTER_OPTIONS } from '../../../containers/case/use_get_cases';
-import { SidebarHeader } from '../../../components/sidebar_header';
-import { useCurrentUser } from '../../../lib/kibana';
-import { useApolloClient } from '../../../utils/apollo_context';
+import { Filters as RecentCasesFilters } from '../recent_cases/filters';
+import { Filters as RecentTimelinesFilters } from '../recent_timelines/filters';
+import { StatefulRecentCases } from '../recent_cases';
+import { StatefulRecentTimelines } from '../recent_timelines';
+import { StatefulNewsFeed } from '../../../common/components/news_feed';
+import { FilterMode as RecentTimelinesFilterMode } from '../recent_timelines/types';
+import { FilterMode as RecentCasesFilterMode } from '../recent_cases/types';
+import { DEFAULT_FILTER_OPTIONS } from '../../../cases/containers/use_get_cases';
+import { SidebarHeader } from '../../../common/components/sidebar_header';
+import { useCurrentUser } from '../../../common/lib/kibana';
+import { useApolloClient } from '../../../common/utils/apollo_context';
 
-import * as i18n from '../translations';
+import * as i18n from '../../pages/translations';
 
 const SidebarFlexGroup = styled(EuiFlexGroup)`
   width: 305px;
diff --git a/x-pack/plugins/siem/public/overview/components/signals_by_category/index.tsx b/x-pack/plugins/siem/public/overview/components/signals_by_category/index.tsx
new file mode 100644
index 00000000000000..def7342ff76b2f
--- /dev/null
+++ b/x-pack/plugins/siem/public/overview/components/signals_by_category/index.tsx
@@ -0,0 +1,94 @@
+/*
+ * 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, { useCallback } from 'react';
+
+import { SignalsHistogramPanel } from '../../../alerts/components/signals_histogram_panel';
+import { signalsHistogramOptions } from '../../../alerts/components/signals_histogram_panel/config';
+import { useSignalIndex } from '../../../alerts/containers/detection_engine/signals/use_signal_index';
+import { SetAbsoluteRangeDatePicker } from '../../../network/pages/types';
+import { Filter, IIndexPattern, Query } from '../../../../../../../src/plugins/data/public';
+import { inputsModel } from '../../../common/store';
+import { InputsModelId } from '../../../common/store/inputs/constants';
+import * as i18n from '../../pages/translations';
+import { UpdateDateRange } from '../../../common/components/charts/common';
+
+const DEFAULT_QUERY: Query = { query: '', language: 'kuery' };
+const DEFAULT_STACK_BY = 'signal.rule.threat.tactic.name';
+const NO_FILTERS: Filter[] = [];
+
+interface Props {
+  deleteQuery?: ({ id }: { id: string }) => void;
+  filters?: Filter[];
+  from: number;
+  headerChildren?: React.ReactNode;
+  indexPattern: IIndexPattern;
+  /** Override all defaults, and only display this field */
+  onlyField?: string;
+  query?: Query;
+  setAbsoluteRangeDatePicker: SetAbsoluteRangeDatePicker;
+  setAbsoluteRangeDatePickerTarget?: InputsModelId;
+  setQuery: (params: {
+    id: string;
+    inspect: inputsModel.InspectQuery | null;
+    loading: boolean;
+    refetch: inputsModel.Refetch;
+  }) => void;
+  to: number;
+}
+
+const SignalsByCategoryComponent: React.FC<Props> = ({
+  deleteQuery,
+  filters = NO_FILTERS,
+  from,
+  headerChildren,
+  onlyField,
+  query = DEFAULT_QUERY,
+  setAbsoluteRangeDatePicker,
+  setAbsoluteRangeDatePickerTarget = 'global',
+  setQuery,
+  to,
+}) => {
+  const { signalIndexName } = useSignalIndex();
+  const updateDateRangeCallback = useCallback<UpdateDateRange>(
+    ({ x }) => {
+      if (!x) {
+        return;
+      }
+      const [min, max] = x;
+      setAbsoluteRangeDatePicker({ id: setAbsoluteRangeDatePickerTarget, from: min, to: max });
+    },
+    [setAbsoluteRangeDatePicker]
+  );
+
+  const defaultStackByOption =
+    signalsHistogramOptions.find(o => o.text === DEFAULT_STACK_BY) ?? signalsHistogramOptions[0];
+
+  return (
+    <SignalsHistogramPanel
+      deleteQuery={deleteQuery}
+      defaultStackByOption={defaultStackByOption}
+      filters={filters}
+      from={from}
+      headerChildren={headerChildren}
+      onlyField={onlyField}
+      query={query}
+      signalIndexName={signalIndexName}
+      setQuery={setQuery}
+      showTotalSignalsCount={true}
+      showLinkToSignals={onlyField == null ? true : false}
+      stackByOptions={onlyField == null ? signalsHistogramOptions : undefined}
+      legendPosition={'right'}
+      to={to}
+      title={i18n.SIGNAL_COUNT}
+      updateDateRange={updateDateRangeCallback}
+    />
+  );
+};
+
+SignalsByCategoryComponent.displayName = 'SignalsByCategoryComponent';
+
+export const SignalsByCategory = React.memo(SignalsByCategoryComponent);
diff --git a/x-pack/plugins/siem/public/components/page/overview/stat_value.tsx b/x-pack/plugins/siem/public/overview/components/stat_value.tsx
similarity index 94%
rename from x-pack/plugins/siem/public/components/page/overview/stat_value.tsx
rename to x-pack/plugins/siem/public/overview/components/stat_value.tsx
index 7615001eec9da3..dd50a9599e142f 100644
--- a/x-pack/plugins/siem/public/components/page/overview/stat_value.tsx
+++ b/x-pack/plugins/siem/public/overview/components/stat_value.tsx
@@ -9,8 +9,8 @@ import numeral from '@elastic/numeral';
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 
-import { DEFAULT_NUMBER_FORMAT } from '../../../../common/constants';
-import { useUiSetting$ } from '../../../lib/kibana';
+import { DEFAULT_NUMBER_FORMAT } from '../../../common/constants';
+import { useUiSetting$ } from '../../common/lib/kibana';
 
 const ProgressContainer = styled.div`
   margin-left: 8px;
diff --git a/x-pack/plugins/siem/public/components/page/overview/types.ts b/x-pack/plugins/siem/public/overview/components/types.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/page/overview/types.ts
rename to x-pack/plugins/siem/public/overview/components/types.ts
diff --git a/x-pack/plugins/siem/public/containers/overview/overview_host/index.gql_query.ts b/x-pack/plugins/siem/public/overview/containers/overview_host/index.gql_query.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/overview/overview_host/index.gql_query.ts
rename to x-pack/plugins/siem/public/overview/containers/overview_host/index.gql_query.ts
diff --git a/x-pack/plugins/siem/public/overview/containers/overview_host/index.tsx b/x-pack/plugins/siem/public/overview/containers/overview_host/index.tsx
new file mode 100644
index 00000000000000..89761e104d70f2
--- /dev/null
+++ b/x-pack/plugins/siem/public/overview/containers/overview_host/index.tsx
@@ -0,0 +1,89 @@
+/*
+ * 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 { getOr } from 'lodash/fp';
+import React from 'react';
+import { Query } from 'react-apollo';
+import { connect, ConnectedProps } from 'react-redux';
+
+import { DEFAULT_INDEX_KEY } from '../../../../common/constants';
+import { GetOverviewHostQuery, OverviewHostData } from '../../../graphql/types';
+import { useUiSetting } from '../../../common/lib/kibana';
+import { inputsModel, inputsSelectors } from '../../../common/store/inputs';
+import { State } from '../../../common/store';
+import { createFilter, getDefaultFetchPolicy } from '../../../common/containers/helpers';
+import { QueryTemplateProps } from '../../../common/containers/query_template';
+
+import { overviewHostQuery } from './index.gql_query';
+
+export const ID = 'overviewHostQuery';
+
+export interface OverviewHostArgs {
+  id: string;
+  inspect: inputsModel.InspectQuery;
+  loading: boolean;
+  overviewHost: OverviewHostData;
+  refetch: inputsModel.Refetch;
+}
+
+export interface OverviewHostProps extends QueryTemplateProps {
+  children: (args: OverviewHostArgs) => React.ReactNode;
+  sourceId: string;
+  endDate: number;
+  startDate: number;
+}
+
+const OverviewHostComponentQuery = React.memo<OverviewHostProps & PropsFromRedux>(
+  ({ id = ID, children, filterQuery, isInspected, sourceId, startDate, endDate }) => {
+    return (
+      <Query<GetOverviewHostQuery.Query, GetOverviewHostQuery.Variables>
+        query={overviewHostQuery}
+        fetchPolicy={getDefaultFetchPolicy()}
+        variables={{
+          sourceId,
+          timerange: {
+            interval: '12h',
+            from: startDate,
+            to: endDate,
+          },
+          filterQuery: createFilter(filterQuery),
+          defaultIndex: useUiSetting<string[]>(DEFAULT_INDEX_KEY),
+          inspect: isInspected,
+        }}
+      >
+        {({ data, loading, refetch }) => {
+          const overviewHost = getOr({}, `source.OverviewHost`, data);
+          return children({
+            id,
+            inspect: getOr(null, 'source.OverviewHost.inspect', data),
+            overviewHost,
+            loading,
+            refetch,
+          });
+        }}
+      </Query>
+    );
+  }
+);
+
+OverviewHostComponentQuery.displayName = 'OverviewHostComponentQuery';
+
+const makeMapStateToProps = () => {
+  const getQuery = inputsSelectors.globalQueryByIdSelector();
+  const mapStateToProps = (state: State, { id = ID }: OverviewHostProps) => {
+    const { isInspected } = getQuery(state, id);
+    return {
+      isInspected,
+    };
+  };
+  return mapStateToProps;
+};
+
+const connector = connect(makeMapStateToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export const OverviewHostQuery = connector(OverviewHostComponentQuery);
diff --git a/x-pack/plugins/siem/public/containers/overview/overview_network/index.gql_query.ts b/x-pack/plugins/siem/public/overview/containers/overview_network/index.gql_query.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/overview/overview_network/index.gql_query.ts
rename to x-pack/plugins/siem/public/overview/containers/overview_network/index.gql_query.ts
diff --git a/x-pack/plugins/siem/public/overview/containers/overview_network/index.tsx b/x-pack/plugins/siem/public/overview/containers/overview_network/index.tsx
new file mode 100644
index 00000000000000..86242adf3f47fa
--- /dev/null
+++ b/x-pack/plugins/siem/public/overview/containers/overview_network/index.tsx
@@ -0,0 +1,88 @@
+/*
+ * 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 { getOr } from 'lodash/fp';
+import React from 'react';
+import { Query } from 'react-apollo';
+import { connect, ConnectedProps } from 'react-redux';
+
+import { DEFAULT_INDEX_KEY } from '../../../../common/constants';
+import { GetOverviewNetworkQuery, OverviewNetworkData } from '../../../graphql/types';
+import { useUiSetting } from '../../../common/lib/kibana';
+import { State } from '../../../common/store';
+import { inputsModel, inputsSelectors } from '../../../common/store/inputs';
+import { createFilter, getDefaultFetchPolicy } from '../../../common/containers/helpers';
+import { QueryTemplateProps } from '../../../common/containers/query_template';
+
+import { overviewNetworkQuery } from './index.gql_query';
+
+export const ID = 'overviewNetworkQuery';
+
+export interface OverviewNetworkArgs {
+  id: string;
+  inspect: inputsModel.InspectQuery;
+  overviewNetwork: OverviewNetworkData;
+  loading: boolean;
+  refetch: inputsModel.Refetch;
+}
+
+export interface OverviewNetworkProps extends QueryTemplateProps {
+  children: (args: OverviewNetworkArgs) => React.ReactNode;
+  sourceId: string;
+  endDate: number;
+  startDate: number;
+}
+
+export const OverviewNetworkComponentQuery = React.memo<OverviewNetworkProps & PropsFromRedux>(
+  ({ 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: useUiSetting<string[]>(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';
+
+const makeMapStateToProps = () => {
+  const getQuery = inputsSelectors.globalQueryByIdSelector();
+  const mapStateToProps = (state: State, { id = ID }: OverviewNetworkProps) => {
+    const { isInspected } = getQuery(state, id);
+    return {
+      isInspected,
+    };
+  };
+  return mapStateToProps;
+};
+
+const connector = connect(makeMapStateToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export const OverviewNetworkQuery = connector(OverviewNetworkComponentQuery);
diff --git a/x-pack/plugins/siem/public/overview/index.ts b/x-pack/plugins/siem/public/overview/index.ts
new file mode 100644
index 00000000000000..bdf855b3851c82
--- /dev/null
+++ b/x-pack/plugins/siem/public/overview/index.ts
@@ -0,0 +1,18 @@
+/*
+ * 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 { SecuritySubPlugin } from '../app/types';
+import { getOverviewRoutes } from './routes';
+
+export class Overview {
+  public setup() {}
+
+  public start(): SecuritySubPlugin {
+    return {
+      routes: getOverviewRoutes(),
+    };
+  }
+}
diff --git a/x-pack/plugins/siem/public/pages/overview/index.tsx b/x-pack/plugins/siem/public/overview/pages/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/pages/overview/index.tsx
rename to x-pack/plugins/siem/public/overview/pages/index.tsx
diff --git a/x-pack/plugins/siem/public/pages/overview/overview.test.tsx b/x-pack/plugins/siem/public/overview/pages/overview.test.tsx
similarity index 88%
rename from x-pack/plugins/siem/public/pages/overview/overview.test.tsx
rename to x-pack/plugins/siem/public/overview/pages/overview.test.tsx
index c129258fa2e87b..36174bdb94a3f1 100644
--- a/x-pack/plugins/siem/public/pages/overview/overview.test.tsx
+++ b/x-pack/plugins/siem/public/overview/pages/overview.test.tsx
@@ -10,19 +10,19 @@ import React from 'react';
 import { MockedProvider } from 'react-apollo/test-utils';
 import { MemoryRouter } from 'react-router-dom';
 
-import '../../mock/match_media';
-import { TestProviders } from '../../mock';
-import { mocksSource } from '../../containers/source/mock';
+import '../../common/mock/match_media';
+import { TestProviders } from '../../common/mock';
+import { mocksSource } from '../../common/containers/source/mock';
 import { Overview } from './index';
 
-jest.mock('../../lib/kibana');
+jest.mock('../../common/lib/kibana');
 
 // Test will fail because we will to need to mock some core services to make the test work
 // For now let's forget about SiemSearchBar and QueryBar
-jest.mock('../../components/search_bar', () => ({
+jest.mock('../../common/components/search_bar', () => ({
   SiemSearchBar: () => null,
 }));
-jest.mock('../../components/query_bar', () => ({
+jest.mock('../../common/components/query_bar', () => ({
   QueryBar: () => null,
 }));
 
diff --git a/x-pack/plugins/siem/public/pages/overview/overview.tsx b/x-pack/plugins/siem/public/overview/pages/overview.tsx
similarity index 82%
rename from x-pack/plugins/siem/public/pages/overview/overview.tsx
rename to x-pack/plugins/siem/public/overview/pages/overview.tsx
index 82f44447289022..57a82f6f254f27 100644
--- a/x-pack/plugins/siem/public/pages/overview/overview.tsx
+++ b/x-pack/plugins/siem/public/overview/pages/overview.tsx
@@ -11,20 +11,23 @@ import { StickyContainer } from 'react-sticky';
 import { Query, Filter } from 'src/plugins/data/public';
 import styled from 'styled-components';
 
-import { AlertsByCategory } from './alerts_by_category';
-import { FiltersGlobal } from '../../components/filters_global';
-import { SiemSearchBar } from '../../components/search_bar';
-import { WrapperPage } from '../../components/wrapper_page';
-import { GlobalTime } from '../../containers/global_time';
-import { WithSource, indicesExistOrDataTemporarilyUnavailable } from '../../containers/source';
-import { EventsByDataset } from './events_by_dataset';
-import { EventCounts } from './event_counts';
-import { OverviewEmpty } from './overview_empty';
-import { StatefulSidebar } from './sidebar';
-import { SignalsByCategory } from './signals_by_category';
-import { inputsSelectors, State } from '../../store';
-import { setAbsoluteRangeDatePicker as dispatchSetAbsoluteRangeDatePicker } from '../../store/inputs/actions';
-import { SpyRoute } from '../../utils/route/spy_routes';
+import { AlertsByCategory } from '../components/alerts_by_category';
+import { FiltersGlobal } from '../../common/components/filters_global';
+import { SiemSearchBar } from '../../common/components/search_bar';
+import { WrapperPage } from '../../common/components/wrapper_page';
+import { GlobalTime } from '../../common/containers/global_time';
+import {
+  WithSource,
+  indicesExistOrDataTemporarilyUnavailable,
+} from '../../common/containers/source';
+import { EventsByDataset } from '../components/events_by_dataset';
+import { EventCounts } from '../components/event_counts';
+import { OverviewEmpty } from '../components/overview_empty';
+import { StatefulSidebar } from '../components/sidebar';
+import { SignalsByCategory } from '../components/signals_by_category';
+import { inputsSelectors, State } from '../../common/store';
+import { setAbsoluteRangeDatePicker as dispatchSetAbsoluteRangeDatePicker } from '../../common/store/inputs/actions';
+import { SpyRoute } from '../../common/utils/route/spy_routes';
 
 const DEFAULT_QUERY: Query = { query: '', language: 'kuery' };
 const NO_FILTERS: Filter[] = [];
diff --git a/x-pack/plugins/siem/public/pages/overview/summary.tsx b/x-pack/plugins/siem/public/overview/pages/summary.tsx
similarity index 98%
rename from x-pack/plugins/siem/public/pages/overview/summary.tsx
rename to x-pack/plugins/siem/public/overview/pages/summary.tsx
index da16cb28c61711..1e08a2cdca8e75 100644
--- a/x-pack/plugins/siem/public/pages/overview/summary.tsx
+++ b/x-pack/plugins/siem/public/overview/pages/summary.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 import { EuiFlexItem, EuiLink, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { useKibana } from '../../lib/kibana';
+import { useKibana } from '../../common/lib/kibana';
 
 export const Summary = React.memo(() => {
   const docLinks = useKibana().services.docLinks;
diff --git a/x-pack/plugins/siem/public/pages/overview/translations.ts b/x-pack/plugins/siem/public/overview/pages/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/overview/translations.ts
rename to x-pack/plugins/siem/public/overview/pages/translations.ts
diff --git a/x-pack/plugins/siem/public/overview/routes.tsx b/x-pack/plugins/siem/public/overview/routes.tsx
new file mode 100644
index 00000000000000..fc41227b27c04f
--- /dev/null
+++ b/x-pack/plugins/siem/public/overview/routes.tsx
@@ -0,0 +1,15 @@
+/*
+ * 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 { Route } from 'react-router-dom';
+
+import { Overview } from './pages';
+import { SiemPageName } from '../app/types';
+
+export const getOverviewRoutes = () => [
+  <Route path={`/:pageName(${SiemPageName.overview})`} render={() => <Overview />} />,
+];
diff --git a/x-pack/plugins/siem/public/pages/case/case.tsx b/x-pack/plugins/siem/public/pages/case/case.tsx
deleted file mode 100644
index 2b613f6692df12..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/case.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-/*
- * 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 { WrapperPage } from '../../components/wrapper_page';
-import { useGetUserSavedObjectPermissions } from '../../lib/kibana';
-import { SpyRoute } from '../../utils/route/spy_routes';
-import { AllCases } from './components/all_cases';
-
-import { savedObjectReadOnly, CaseCallOut } from './components/callout';
-import { CaseSavedObjectNoPermissions } from './saved_object_no_permissions';
-
-export const CasesPage = React.memo(() => {
-  const userPermissions = useGetUserSavedObjectPermissions();
-
-  return userPermissions == null || userPermissions?.read ? (
-    <>
-      <WrapperPage>
-        {userPermissions != null && !userPermissions?.crud && userPermissions?.read && (
-          <CaseCallOut
-            title={savedObjectReadOnly.title}
-            message={savedObjectReadOnly.description}
-          />
-        )}
-        <AllCases userCanCrud={userPermissions?.crud ?? false} />
-      </WrapperPage>
-      <SpyRoute />
-    </>
-  ) : (
-    <CaseSavedObjectNoPermissions />
-  );
-});
-
-CasesPage.displayName = 'CasesPage';
diff --git a/x-pack/plugins/siem/public/pages/case/case_details.tsx b/x-pack/plugins/siem/public/pages/case/case_details.tsx
deleted file mode 100644
index 4bb8afa7f8d42a..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/case_details.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-/*
- * 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 { useParams, Redirect } from 'react-router-dom';
-
-import { useGetUrlSearch } from '../../components/navigation/use_get_url_search';
-import { useGetUserSavedObjectPermissions } from '../../lib/kibana';
-import { SpyRoute } from '../../utils/route/spy_routes';
-import { getCaseUrl } from '../../components/link_to';
-import { navTabs } from '../home/home_navigations';
-import { CaseView } from './components/case_view';
-import { savedObjectReadOnly, CaseCallOut } from './components/callout';
-
-export const CaseDetailsPage = React.memo(() => {
-  const userPermissions = useGetUserSavedObjectPermissions();
-  const { detailName: caseId } = useParams();
-  const search = useGetUrlSearch(navTabs.case);
-
-  if (userPermissions != null && !userPermissions.read) {
-    return <Redirect to={getCaseUrl(search)} />;
-  }
-
-  return caseId != null ? (
-    <>
-      {userPermissions != null && !userPermissions?.crud && userPermissions?.read && (
-        <CaseCallOut title={savedObjectReadOnly.title} message={savedObjectReadOnly.description} />
-      )}
-      <CaseView caseId={caseId} userCanCrud={userPermissions?.crud ?? false} />
-      <SpyRoute />
-    </>
-  ) : null;
-});
-
-CaseDetailsPage.displayName = 'CaseDetailsPage';
diff --git a/x-pack/plugins/siem/public/pages/case/components/add_comment/index.test.tsx b/x-pack/plugins/siem/public/pages/case/components/add_comment/index.test.tsx
deleted file mode 100644
index 7ba8ec96662532..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/components/add_comment/index.test.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-/*
- * 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 { mount } from 'enzyme';
-
-import { AddComment } from './';
-import { TestProviders } from '../../../../mock';
-import { getFormMock } from '../__mock__/form';
-import { Router, routeData, mockHistory, mockLocation } from '../__mock__/router';
-
-import { useInsertTimeline } from '../../../../components/timeline/insert_timeline_popover/use_insert_timeline';
-import { usePostComment } from '../../../../containers/case/use_post_comment';
-import { useForm } from '../../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form';
-import { wait } from '../../../../lib/helpers';
-jest.mock(
-  '../../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form'
-);
-jest.mock('../../../../components/timeline/insert_timeline_popover/use_insert_timeline');
-jest.mock('../../../../containers/case/use_post_comment');
-
-export const useFormMock = useForm as jest.Mock;
-
-const useInsertTimelineMock = useInsertTimeline as jest.Mock;
-const usePostCommentMock = usePostComment as jest.Mock;
-
-const onCommentSaving = jest.fn();
-const onCommentPosted = jest.fn();
-const postComment = jest.fn();
-const handleCursorChange = jest.fn();
-const handleOnTimelineChange = jest.fn();
-
-const addCommentProps = {
-  caseId: '1234',
-  disabled: false,
-  insertQuote: null,
-  onCommentSaving,
-  onCommentPosted,
-  showLoading: false,
-};
-
-const defaultInsertTimeline = {
-  cursorPosition: {
-    start: 0,
-    end: 0,
-  },
-  handleCursorChange,
-  handleOnTimelineChange,
-};
-
-const defaultPostCommment = {
-  isLoading: false,
-  isError: false,
-  postComment,
-};
-const sampleData = {
-  comment: 'what a cool comment',
-};
-describe('AddComment ', () => {
-  const formHookMock = getFormMock(sampleData);
-
-  beforeEach(() => {
-    jest.resetAllMocks();
-    useInsertTimelineMock.mockImplementation(() => defaultInsertTimeline);
-    usePostCommentMock.mockImplementation(() => defaultPostCommment);
-    useFormMock.mockImplementation(() => ({ form: formHookMock }));
-    jest.spyOn(routeData, 'useLocation').mockReturnValue(mockLocation);
-  });
-
-  it('should post comment on submit click', async () => {
-    const wrapper = mount(
-      <TestProviders>
-        <Router history={mockHistory}>
-          <AddComment {...addCommentProps} />
-        </Router>
-      </TestProviders>
-    );
-    expect(wrapper.find(`[data-test-subj="add-comment"]`).exists()).toBeTruthy();
-    expect(wrapper.find(`[data-test-subj="loading-spinner"]`).exists()).toBeFalsy();
-
-    wrapper
-      .find(`[data-test-subj="submit-comment"]`)
-      .first()
-      .simulate('click');
-    await wait();
-    expect(onCommentSaving).toBeCalled();
-    expect(postComment).toBeCalledWith(sampleData, onCommentPosted);
-    expect(formHookMock.reset).toBeCalled();
-  });
-
-  it('should render spinner and disable submit when loading', () => {
-    usePostCommentMock.mockImplementation(() => ({ ...defaultPostCommment, isLoading: true }));
-    const wrapper = mount(
-      <TestProviders>
-        <Router history={mockHistory}>
-          <AddComment {...{ ...addCommentProps, showLoading: true }} />
-        </Router>
-      </TestProviders>
-    );
-    expect(wrapper.find(`[data-test-subj="loading-spinner"]`).exists()).toBeTruthy();
-    expect(
-      wrapper
-        .find(`[data-test-subj="submit-comment"]`)
-        .first()
-        .prop('isDisabled')
-    ).toBeTruthy();
-  });
-
-  it('should disable submit button when disabled prop passed', () => {
-    usePostCommentMock.mockImplementation(() => ({ ...defaultPostCommment, isLoading: true }));
-    const wrapper = mount(
-      <TestProviders>
-        <Router history={mockHistory}>
-          <AddComment {...{ ...addCommentProps, disabled: true }} />
-        </Router>
-      </TestProviders>
-    );
-    expect(
-      wrapper
-        .find(`[data-test-subj="submit-comment"]`)
-        .first()
-        .prop('isDisabled')
-    ).toBeTruthy();
-  });
-
-  it('should insert a quote if one is available', () => {
-    const sampleQuote = 'what a cool quote';
-    mount(
-      <TestProviders>
-        <Router history={mockHistory}>
-          <AddComment {...{ ...addCommentProps, insertQuote: sampleQuote }} />
-        </Router>
-      </TestProviders>
-    );
-
-    expect(formHookMock.setFieldValue).toBeCalledWith(
-      'comment',
-      `${sampleData.comment}\n\n${sampleQuote}`
-    );
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/case/components/add_comment/index.tsx b/x-pack/plugins/siem/public/pages/case/components/add_comment/index.tsx
deleted file mode 100644
index aa987b277da06a..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/components/add_comment/index.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-/*
- * 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 { EuiButton, EuiLoadingSpinner } from '@elastic/eui';
-import React, { useCallback, useEffect } from 'react';
-import styled from 'styled-components';
-
-import { CommentRequest } from '../../../../../../case/common/api';
-import { usePostComment } from '../../../../containers/case/use_post_comment';
-import { Case } from '../../../../containers/case/types';
-import { MarkdownEditorForm } from '../../../../components/markdown_editor/form';
-import { InsertTimelinePopover } from '../../../../components/timeline/insert_timeline_popover';
-import { useInsertTimeline } from '../../../../components/timeline/insert_timeline_popover/use_insert_timeline';
-import { Form, useForm, UseField } from '../../../../shared_imports';
-
-import * as i18n from '../../translations';
-import { schema } from './schema';
-
-const MySpinner = styled(EuiLoadingSpinner)`
-  position: absolute;
-  top: 50%;
-  left: 50%;
-`;
-
-const initialCommentValue: CommentRequest = {
-  comment: '',
-};
-
-interface AddCommentProps {
-  caseId: string;
-  disabled?: boolean;
-  insertQuote: string | null;
-  onCommentSaving?: () => void;
-  onCommentPosted: (newCase: Case) => void;
-  showLoading?: boolean;
-}
-
-export const AddComment = React.memo<AddCommentProps>(
-  ({ caseId, disabled, insertQuote, showLoading = true, onCommentPosted, onCommentSaving }) => {
-    const { isLoading, postComment } = usePostComment(caseId);
-    const { form } = useForm<CommentRequest>({
-      defaultValue: initialCommentValue,
-      options: { stripEmptyFields: false },
-      schema,
-    });
-    const { handleCursorChange, handleOnTimelineChange } = useInsertTimeline<CommentRequest>(
-      form,
-      'comment'
-    );
-
-    useEffect(() => {
-      if (insertQuote !== null) {
-        const { comment } = form.getFormData();
-        form.setFieldValue(
-          'comment',
-          `${comment}${comment.length > 0 ? '\n\n' : ''}${insertQuote}`
-        );
-      }
-    }, [insertQuote]);
-
-    const onSubmit = useCallback(async () => {
-      const { isValid, data } = await form.submit();
-      if (isValid) {
-        if (onCommentSaving != null) {
-          onCommentSaving();
-        }
-        await postComment(data, onCommentPosted);
-        form.reset();
-      }
-    }, [form, onCommentPosted, onCommentSaving]);
-    return (
-      <span id="add-comment-permLink">
-        {isLoading && showLoading && <MySpinner data-test-subj="loading-spinner" size="xl" />}
-        <Form form={form}>
-          <UseField
-            path="comment"
-            component={MarkdownEditorForm}
-            componentProps={{
-              idAria: 'caseComment',
-              isDisabled: isLoading,
-              dataTestSubj: 'add-comment',
-              placeholder: i18n.ADD_COMMENT_HELP_TEXT,
-              onCursorPositionUpdate: handleCursorChange,
-              bottomRightContent: (
-                <EuiButton
-                  data-test-subj="submit-comment"
-                  iconType="plusInCircle"
-                  isDisabled={isLoading || disabled}
-                  isLoading={isLoading}
-                  onClick={onSubmit}
-                  size="s"
-                >
-                  {i18n.ADD_COMMENT}
-                </EuiButton>
-              ),
-              topRightContent: (
-                <InsertTimelinePopover
-                  hideUntitled={true}
-                  isDisabled={isLoading}
-                  onTimelineChange={handleOnTimelineChange}
-                />
-              ),
-            }}
-          />
-        </Form>
-      </span>
-    );
-  }
-);
-
-AddComment.displayName = 'AddComment';
diff --git a/x-pack/plugins/siem/public/pages/case/components/add_comment/schema.tsx b/x-pack/plugins/siem/public/pages/case/components/add_comment/schema.tsx
deleted file mode 100644
index ad73fd71b8e115..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/components/add_comment/schema.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-/*
- * 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 { CommentRequest } from '../../../../../../case/common/api';
-import { FIELD_TYPES, fieldValidators, FormSchema } from '../../../../shared_imports';
-import * as i18n from '../../translations';
-
-const { emptyField } = fieldValidators;
-
-export const schema: FormSchema<CommentRequest> = {
-  comment: {
-    type: FIELD_TYPES.TEXTAREA,
-    validations: [
-      {
-        validator: emptyField(i18n.COMMENT_REQUIRED),
-      },
-    ],
-  },
-};
diff --git a/x-pack/plugins/siem/public/pages/case/components/all_cases/actions.tsx b/x-pack/plugins/siem/public/pages/case/components/all_cases/actions.tsx
deleted file mode 100644
index 01b501bf6cf078..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/components/all_cases/actions.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-/*
- * 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 { DefaultItemIconButtonAction } from '@elastic/eui/src/components/basic_table/action_types';
-import { Dispatch } from 'react';
-import { Case } from '../../../../containers/case/types';
-
-import * as i18n from './translations';
-import { UpdateCase } from '../../../../containers/case/use_get_cases';
-
-interface GetActions {
-  caseStatus: string;
-  dispatchUpdate: Dispatch<Omit<UpdateCase, 'refetchCasesStatus'>>;
-  deleteCaseOnClick: (deleteCase: Case) => void;
-}
-
-export const getActions = ({
-  caseStatus,
-  dispatchUpdate,
-  deleteCaseOnClick,
-}: GetActions): Array<DefaultItemIconButtonAction<Case>> => [
-  {
-    description: i18n.DELETE_CASE,
-    icon: 'trash',
-    name: i18n.DELETE_CASE,
-    onClick: deleteCaseOnClick,
-    type: 'icon',
-    'data-test-subj': 'action-delete',
-  },
-  caseStatus === 'open'
-    ? {
-        description: i18n.CLOSE_CASE,
-        icon: 'folderCheck',
-        name: i18n.CLOSE_CASE,
-        onClick: (theCase: Case) =>
-          dispatchUpdate({
-            updateKey: 'status',
-            updateValue: 'closed',
-            caseId: theCase.id,
-            version: theCase.version,
-          }),
-        type: 'icon',
-        'data-test-subj': 'action-close',
-      }
-    : {
-        description: i18n.REOPEN_CASE,
-        icon: 'folderExclamation',
-        name: i18n.REOPEN_CASE,
-        onClick: (theCase: Case) =>
-          dispatchUpdate({
-            updateKey: 'status',
-            updateValue: 'open',
-            caseId: theCase.id,
-            version: theCase.version,
-          }),
-        type: 'icon',
-        'data-test-subj': 'action-open',
-      },
-];
diff --git a/x-pack/plugins/siem/public/pages/case/components/all_cases/columns.tsx b/x-pack/plugins/siem/public/pages/case/components/all_cases/columns.tsx
deleted file mode 100644
index 9a0460009ffacc..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/components/all_cases/columns.tsx
+++ /dev/null
@@ -1,215 +0,0 @@
-/*
- * 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, { useCallback } from 'react';
-import {
-  EuiBadge,
-  EuiTableFieldDataColumnType,
-  EuiTableComputedColumnType,
-  EuiTableActionsColumnType,
-  EuiAvatar,
-  EuiLink,
-} from '@elastic/eui';
-import styled from 'styled-components';
-import { DefaultItemIconButtonAction } from '@elastic/eui/src/components/basic_table/action_types';
-import { getEmptyTagValue } from '../../../../components/empty_value';
-import { Case } from '../../../../containers/case/types';
-import { FormattedRelativePreferenceDate } from '../../../../components/formatted_date';
-import { CaseDetailsLink } from '../../../../components/links';
-import { TruncatableText } from '../../../../components/truncatable_text';
-import * as i18n from './translations';
-
-export type CasesColumns =
-  | EuiTableFieldDataColumnType<Case>
-  | EuiTableComputedColumnType<Case>
-  | EuiTableActionsColumnType<Case>;
-
-const MediumShadeText = styled.p`
-  color: ${({ theme }) => theme.eui.euiColorMediumShade};
-`;
-
-const Spacer = styled.span`
-  margin-left: ${({ theme }) => theme.eui.paddingSizes.s};
-`;
-
-const renderStringField = (field: string, dataTestSubj: string) =>
-  field != null ? <span data-test-subj={dataTestSubj}>{field}</span> : getEmptyTagValue();
-
-export const getCasesColumns = (
-  actions: Array<DefaultItemIconButtonAction<Case>>,
-  filterStatus: string
-): CasesColumns[] => [
-  {
-    name: i18n.NAME,
-    render: (theCase: Case) => {
-      if (theCase.id != null && theCase.title != null) {
-        const caseDetailsLinkComponent = (
-          <CaseDetailsLink detailName={theCase.id} title={theCase.title}>
-            {theCase.title}
-          </CaseDetailsLink>
-        );
-        return theCase.status === 'open' ? (
-          caseDetailsLinkComponent
-        ) : (
-          <>
-            <MediumShadeText>
-              {caseDetailsLinkComponent}
-              <Spacer>{i18n.CLOSED}</Spacer>
-            </MediumShadeText>
-          </>
-        );
-      }
-      return getEmptyTagValue();
-    },
-  },
-  {
-    field: 'createdBy',
-    name: i18n.REPORTER,
-    render: (createdBy: Case['createdBy']) => {
-      if (createdBy != null) {
-        return (
-          <>
-            <EuiAvatar
-              className="userAction__circle"
-              name={createdBy.fullName ? createdBy.fullName : createdBy.username ?? ''}
-              size="s"
-            />
-            <Spacer data-test-subj="case-table-column-createdBy">
-              {createdBy.fullName ? createdBy.fullName : createdBy.username ?? ''}
-            </Spacer>
-          </>
-        );
-      }
-      return getEmptyTagValue();
-    },
-  },
-  {
-    field: 'tags',
-    name: i18n.TAGS,
-    render: (tags: Case['tags']) => {
-      if (tags != null && tags.length > 0) {
-        return (
-          <TruncatableText>
-            {tags.map((tag: string, i: number) => (
-              <EuiBadge
-                color="hollow"
-                key={`${tag}-${i}`}
-                data-test-subj={`case-table-column-tags-${i}`}
-              >
-                {tag}
-              </EuiBadge>
-            ))}
-          </TruncatableText>
-        );
-      }
-      return getEmptyTagValue();
-    },
-    truncateText: true,
-  },
-  {
-    align: 'right',
-    field: 'totalComment',
-    name: i18n.COMMENTS,
-    sortable: true,
-    render: (totalComment: Case['totalComment']) =>
-      totalComment != null
-        ? renderStringField(`${totalComment}`, `case-table-column-commentCount`)
-        : getEmptyTagValue(),
-  },
-  filterStatus === 'open'
-    ? {
-        field: 'createdAt',
-        name: i18n.OPENED_ON,
-        sortable: true,
-        render: (createdAt: Case['createdAt']) => {
-          if (createdAt != null) {
-            return (
-              <span data-test-subj={`case-table-column-createdAt`}>
-                <FormattedRelativePreferenceDate value={createdAt} />
-              </span>
-            );
-          }
-          return getEmptyTagValue();
-        },
-      }
-    : {
-        field: 'closedAt',
-        name: i18n.CLOSED_ON,
-        sortable: true,
-        render: (closedAt: Case['closedAt']) => {
-          if (closedAt != null) {
-            return (
-              <span data-test-subj={`case-table-column-closedAt`}>
-                <FormattedRelativePreferenceDate value={closedAt} />
-              </span>
-            );
-          }
-          return getEmptyTagValue();
-        },
-      },
-  {
-    name: i18n.EXTERNAL_INCIDENT,
-    render: (theCase: Case) => {
-      if (theCase.id != null) {
-        return <ExternalServiceColumn theCase={theCase} />;
-      }
-      return getEmptyTagValue();
-    },
-  },
-  {
-    name: i18n.INCIDENT_MANAGEMENT_SYSTEM,
-    render: (theCase: Case) => {
-      if (theCase.externalService != null) {
-        return renderStringField(
-          `${theCase.externalService.connectorName}`,
-          `case-table-column-connector`
-        );
-      }
-      return getEmptyTagValue();
-    },
-  },
-  {
-    name: i18n.ACTIONS,
-    actions,
-  },
-];
-
-interface Props {
-  theCase: Case;
-}
-
-export const ExternalServiceColumn: React.FC<Props> = ({ theCase }) => {
-  const handleRenderDataToPush = useCallback(() => {
-    const lastCaseUpdate = theCase.updatedAt != null ? new Date(theCase.updatedAt) : null;
-    const lastCasePush =
-      theCase.externalService?.pushedAt != null
-        ? new Date(theCase.externalService?.pushedAt)
-        : null;
-    const hasDataToPush =
-      lastCasePush === null ||
-      (lastCasePush != null &&
-        lastCaseUpdate != null &&
-        lastCasePush.getTime() < lastCaseUpdate?.getTime());
-    return (
-      <p>
-        <EuiLink
-          data-test-subj={`case-table-column-external`}
-          href={theCase.externalService?.externalUrl}
-          target="_blank"
-          aria-label={i18n.SERVICENOW_LINK_ARIA}
-        >
-          {theCase.externalService?.externalTitle}
-        </EuiLink>
-        {hasDataToPush
-          ? renderStringField(i18n.REQUIRES_UPDATE, `case-table-column-external-requiresUpdate`)
-          : renderStringField(i18n.UP_TO_DATE, `case-table-column-external-upToDate`)}
-      </p>
-    );
-  }, [theCase]);
-  if (theCase.externalService !== null) {
-    return handleRenderDataToPush();
-  }
-  return renderStringField(i18n.NOT_PUSHED, `case-table-column-external-notPushed`);
-};
diff --git a/x-pack/plugins/siem/public/pages/case/components/all_cases/index.test.tsx b/x-pack/plugins/siem/public/pages/case/components/all_cases/index.test.tsx
deleted file mode 100644
index eb5bca6cc57fff..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/components/all_cases/index.test.tsx
+++ /dev/null
@@ -1,347 +0,0 @@
-/*
- * 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 { mount } from 'enzyme';
-import moment from 'moment-timezone';
-import { AllCases } from './';
-import { TestProviders } from '../../../../mock';
-import { useGetCasesMockState } from '../../../../containers/case/mock';
-import * as i18n from './translations';
-
-import { getEmptyTagValue } from '../../../../components/empty_value';
-import { useDeleteCases } from '../../../../containers/case/use_delete_cases';
-import { useGetCases } from '../../../../containers/case/use_get_cases';
-import { useGetCasesStatus } from '../../../../containers/case/use_get_cases_status';
-import { useUpdateCases } from '../../../../containers/case/use_bulk_update_case';
-import { getCasesColumns } from './columns';
-jest.mock('../../../../containers/case/use_bulk_update_case');
-jest.mock('../../../../containers/case/use_delete_cases');
-jest.mock('../../../../containers/case/use_get_cases');
-jest.mock('../../../../containers/case/use_get_cases_status');
-const useDeleteCasesMock = useDeleteCases as jest.Mock;
-const useGetCasesMock = useGetCases as jest.Mock;
-const useGetCasesStatusMock = useGetCasesStatus as jest.Mock;
-const useUpdateCasesMock = useUpdateCases as jest.Mock;
-
-describe('AllCases', () => {
-  const dispatchResetIsDeleted = jest.fn();
-  const dispatchResetIsUpdated = jest.fn();
-  const dispatchUpdateCaseProperty = jest.fn();
-  const handleOnDeleteConfirm = jest.fn();
-  const handleToggleModal = jest.fn();
-  const refetchCases = jest.fn();
-  const setFilters = jest.fn();
-  const setQueryParams = jest.fn();
-  const setSelectedCases = jest.fn();
-  const updateBulkStatus = jest.fn();
-  const fetchCasesStatus = jest.fn();
-  const emptyTag = getEmptyTagValue().props.children;
-
-  const defaultGetCases = {
-    ...useGetCasesMockState,
-    dispatchUpdateCaseProperty,
-    refetchCases,
-    setFilters,
-    setQueryParams,
-    setSelectedCases,
-  };
-  const defaultDeleteCases = {
-    dispatchResetIsDeleted,
-    handleOnDeleteConfirm,
-    handleToggleModal,
-    isDeleted: false,
-    isDisplayConfirmDeleteModal: false,
-    isLoading: false,
-  };
-  const defaultCasesStatus = {
-    countClosedCases: 0,
-    countOpenCases: 5,
-    fetchCasesStatus,
-    isError: false,
-    isLoading: true,
-  };
-  const defaultUpdateCases = {
-    isUpdated: false,
-    isLoading: false,
-    isError: false,
-    dispatchResetIsUpdated,
-    updateBulkStatus,
-  };
-  /* eslint-disable no-console */
-  // Silence until enzyme fixed to use ReactTestUtils.act()
-  const originalError = console.error;
-  beforeAll(() => {
-    console.error = jest.fn();
-  });
-  afterAll(() => {
-    console.error = originalError;
-  });
-  /* eslint-enable no-console */
-  beforeEach(() => {
-    jest.resetAllMocks();
-    useUpdateCasesMock.mockImplementation(() => defaultUpdateCases);
-    useGetCasesMock.mockImplementation(() => defaultGetCases);
-    useDeleteCasesMock.mockImplementation(() => defaultDeleteCases);
-    useGetCasesStatusMock.mockImplementation(() => defaultCasesStatus);
-    moment.tz.setDefault('UTC');
-  });
-  it('should render AllCases', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <AllCases userCanCrud={true} />
-      </TestProviders>
-    );
-    expect(
-      wrapper
-        .find(`a[data-test-subj="case-details-link"]`)
-        .first()
-        .prop('href')
-    ).toEqual(
-      `#/link-to/case/${useGetCasesMockState.data.cases[0].id}?timerange=(global:(linkTo:!(timeline),timerange:(from:0,fromStr:now-24h,kind:relative,to:1,toStr:now)),timeline:(linkTo:!(global),timerange:(from:0,fromStr:now-24h,kind:relative,to:1,toStr:now)))`
-    );
-    expect(
-      wrapper
-        .find(`a[data-test-subj="case-details-link"]`)
-        .first()
-        .text()
-    ).toEqual(useGetCasesMockState.data.cases[0].title);
-    expect(
-      wrapper
-        .find(`span[data-test-subj="case-table-column-tags-0"]`)
-        .first()
-        .prop('title')
-    ).toEqual(useGetCasesMockState.data.cases[0].tags[0]);
-    expect(
-      wrapper
-        .find(`[data-test-subj="case-table-column-createdBy"]`)
-        .first()
-        .text()
-    ).toEqual(useGetCasesMockState.data.cases[0].createdBy.fullName);
-    expect(
-      wrapper
-        .find(`[data-test-subj="case-table-column-createdAt"]`)
-        .first()
-        .childAt(0)
-        .prop('value')
-    ).toBe(useGetCasesMockState.data.cases[0].createdAt);
-    expect(
-      wrapper
-        .find(`[data-test-subj="case-table-case-count"]`)
-        .first()
-        .text()
-    ).toEqual('Showing 10 cases');
-  });
-  it('should render empty fields', () => {
-    useGetCasesMock.mockImplementation(() => ({
-      ...defaultGetCases,
-      data: {
-        ...defaultGetCases.data,
-        cases: [
-          {
-            ...defaultGetCases.data.cases[0],
-            id: null,
-            createdAt: null,
-            createdBy: null,
-            tags: null,
-            title: null,
-            totalComment: null,
-          },
-        ],
-      },
-    }));
-    const wrapper = mount(
-      <TestProviders>
-        <AllCases userCanCrud={true} />
-      </TestProviders>
-    );
-    const checkIt = (columnName: string, key: number) => {
-      const column = wrapper.find('[data-test-subj="cases-table"] tbody .euiTableRowCell').at(key);
-      if (columnName === i18n.ACTIONS) {
-        return;
-      }
-      expect(column.find('.euiTableRowCell--hideForDesktop').text()).toEqual(columnName);
-      expect(column.find('span').text()).toEqual(emptyTag);
-    };
-    getCasesColumns([], 'open').map((i, key) => i.name != null && checkIt(`${i.name}`, key));
-  });
-  it('should tableHeaderSortButton AllCases', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <AllCases userCanCrud={true} />
-      </TestProviders>
-    );
-    wrapper
-      .find('[data-test-subj="tableHeaderSortButton"]')
-      .first()
-      .simulate('click');
-    expect(setQueryParams).toBeCalledWith({
-      page: 1,
-      perPage: 5,
-      sortField: 'createdAt',
-      sortOrder: 'asc',
-    });
-  });
-  it('closes case when row action icon clicked', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <AllCases userCanCrud={true} />
-      </TestProviders>
-    );
-    wrapper
-      .find('[data-test-subj="action-close"]')
-      .first()
-      .simulate('click');
-    const firstCase = useGetCasesMockState.data.cases[0];
-    expect(dispatchUpdateCaseProperty).toBeCalledWith({
-      caseId: firstCase.id,
-      updateKey: 'status',
-      updateValue: 'closed',
-      refetchCasesStatus: fetchCasesStatus,
-      version: firstCase.version,
-    });
-  });
-  it('opens case when row action icon clicked', () => {
-    useGetCasesMock.mockImplementation(() => ({
-      ...defaultGetCases,
-      filterOptions: { ...defaultGetCases.filterOptions, status: 'closed' },
-    }));
-
-    const wrapper = mount(
-      <TestProviders>
-        <AllCases userCanCrud={true} />
-      </TestProviders>
-    );
-    wrapper
-      .find('[data-test-subj="action-open"]')
-      .first()
-      .simulate('click');
-    const firstCase = useGetCasesMockState.data.cases[0];
-    expect(dispatchUpdateCaseProperty).toBeCalledWith({
-      caseId: firstCase.id,
-      updateKey: 'status',
-      updateValue: 'open',
-      refetchCasesStatus: fetchCasesStatus,
-      version: firstCase.version,
-    });
-  });
-  it('Bulk delete', () => {
-    useGetCasesMock.mockImplementation(() => ({
-      ...defaultGetCases,
-      selectedCases: useGetCasesMockState.data.cases,
-    }));
-    useDeleteCasesMock
-      .mockReturnValueOnce({
-        ...defaultDeleteCases,
-        isDisplayConfirmDeleteModal: false,
-      })
-      .mockReturnValue({
-        ...defaultDeleteCases,
-        isDisplayConfirmDeleteModal: true,
-      });
-
-    const wrapper = mount(
-      <TestProviders>
-        <AllCases userCanCrud={true} />
-      </TestProviders>
-    );
-    wrapper
-      .find('[data-test-subj="case-table-bulk-actions"] button')
-      .first()
-      .simulate('click');
-    wrapper
-      .find('[data-test-subj="cases-bulk-delete-button"]')
-      .first()
-      .simulate('click');
-    expect(handleToggleModal).toBeCalled();
-
-    wrapper
-      .find(
-        '[data-test-subj="confirm-delete-case-modal"] [data-test-subj="confirmModalConfirmButton"]'
-      )
-      .last()
-      .simulate('click');
-    expect(handleOnDeleteConfirm.mock.calls[0][0]).toStrictEqual(
-      useGetCasesMockState.data.cases.map(({ id }) => ({ id }))
-    );
-  });
-  it('Bulk close status update', () => {
-    useGetCasesMock.mockImplementation(() => ({
-      ...defaultGetCases,
-      selectedCases: useGetCasesMockState.data.cases,
-    }));
-
-    const wrapper = mount(
-      <TestProviders>
-        <AllCases userCanCrud={true} />
-      </TestProviders>
-    );
-    wrapper
-      .find('[data-test-subj="case-table-bulk-actions"] button')
-      .first()
-      .simulate('click');
-    wrapper
-      .find('[data-test-subj="cases-bulk-close-button"]')
-      .first()
-      .simulate('click');
-    expect(updateBulkStatus).toBeCalledWith(useGetCasesMockState.data.cases, 'closed');
-  });
-  it('Bulk open status update', () => {
-    useGetCasesMock.mockImplementation(() => ({
-      ...defaultGetCases,
-      selectedCases: useGetCasesMockState.data.cases,
-      filterOptions: {
-        ...defaultGetCases.filterOptions,
-        status: 'closed',
-      },
-    }));
-
-    const wrapper = mount(
-      <TestProviders>
-        <AllCases userCanCrud={true} />
-      </TestProviders>
-    );
-    wrapper
-      .find('[data-test-subj="case-table-bulk-actions"] button')
-      .first()
-      .simulate('click');
-    wrapper
-      .find('[data-test-subj="cases-bulk-open-button"]')
-      .first()
-      .simulate('click');
-    expect(updateBulkStatus).toBeCalledWith(useGetCasesMockState.data.cases, 'open');
-  });
-  it('isDeleted is true, refetch', () => {
-    useDeleteCasesMock.mockImplementation(() => ({
-      ...defaultDeleteCases,
-      isDeleted: true,
-    }));
-
-    mount(
-      <TestProviders>
-        <AllCases userCanCrud={true} />
-      </TestProviders>
-    );
-    expect(refetchCases).toBeCalled();
-    expect(fetchCasesStatus).toBeCalled();
-    expect(dispatchResetIsDeleted).toBeCalled();
-  });
-  it('isUpdated is true, refetch', () => {
-    useUpdateCasesMock.mockImplementation(() => ({
-      ...defaultUpdateCases,
-      isUpdated: true,
-    }));
-
-    mount(
-      <TestProviders>
-        <AllCases userCanCrud={true} />
-      </TestProviders>
-    );
-    expect(refetchCases).toBeCalled();
-    expect(fetchCasesStatus).toBeCalled();
-    expect(dispatchResetIsUpdated).toBeCalled();
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/case/components/all_cases/index.tsx b/x-pack/plugins/siem/public/pages/case/components/all_cases/index.tsx
deleted file mode 100644
index 9dd90074a2e7b9..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/components/all_cases/index.tsx
+++ /dev/null
@@ -1,439 +0,0 @@
-/*
- * 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, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import {
-  EuiBasicTable,
-  EuiButton,
-  EuiContextMenuPanel,
-  EuiEmptyPrompt,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiLoadingContent,
-  EuiProgress,
-  EuiTableSortingType,
-} from '@elastic/eui';
-import { EuiTableSelectionType } from '@elastic/eui/src/components/basic_table/table_types';
-import { isEmpty } from 'lodash/fp';
-import styled, { css } from 'styled-components';
-import * as i18n from './translations';
-
-import { getCasesColumns } from './columns';
-import { Case, DeleteCase, FilterOptions, SortFieldCase } from '../../../../containers/case/types';
-import { useGetCases, UpdateCase } from '../../../../containers/case/use_get_cases';
-import { useGetCasesStatus } from '../../../../containers/case/use_get_cases_status';
-import { useDeleteCases } from '../../../../containers/case/use_delete_cases';
-import { EuiBasicTableOnChange } from '../../../detection_engine/rules/types';
-import { useGetUrlSearch } from '../../../../components/navigation/use_get_url_search';
-import { Panel } from '../../../../components/panel';
-import {
-  UtilityBar,
-  UtilityBarAction,
-  UtilityBarGroup,
-  UtilityBarSection,
-  UtilityBarText,
-} from '../../../../components/utility_bar';
-import { getCreateCaseUrl } from '../../../../components/link_to';
-import { getBulkItems } from '../bulk_actions';
-import { CaseHeaderPage } from '../case_header_page';
-import { ConfirmDeleteCaseModal } from '../confirm_delete_case';
-import { OpenClosedStats } from '../open_closed_stats';
-import { navTabs } from '../../../home/home_navigations';
-
-import { getActions } from './actions';
-import { CasesTableFilters } from './table_filters';
-import { useUpdateCases } from '../../../../containers/case/use_bulk_update_case';
-import { useGetActionLicense } from '../../../../containers/case/use_get_action_license';
-import { getActionLicenseError } from '../use_push_to_service/helpers';
-import { CaseCallOut } from '../callout';
-import { ConfigureCaseButton } from '../configure_cases/button';
-import { ERROR_PUSH_SERVICE_CALLOUT_TITLE } from '../use_push_to_service/translations';
-
-const Div = styled.div`
-  margin-top: ${({ theme }) => theme.eui.paddingSizes.m};
-`;
-const FlexItemDivider = styled(EuiFlexItem)`
-  ${({ theme }) => css`
-    .euiFlexGroup--gutterMedium > &.euiFlexItem {
-      border-right: ${theme.eui.euiBorderThin};
-      padding-right: ${theme.eui.euiSize};
-      margin-right: ${theme.eui.euiSize};
-    }
-  `}
-`;
-
-const ProgressLoader = styled(EuiProgress)`
-  ${({ theme }) => css`
-    top: 2px;
-    border-radius: ${theme.eui.euiBorderRadius};
-    z-index: ${theme.eui.euiZHeader};
-  `}
-`;
-
-const getSortField = (field: string): SortFieldCase => {
-  if (field === SortFieldCase.createdAt) {
-    return SortFieldCase.createdAt;
-  } else if (field === SortFieldCase.closedAt) {
-    return SortFieldCase.closedAt;
-  }
-  return SortFieldCase.createdAt;
-};
-
-interface AllCasesProps {
-  userCanCrud: boolean;
-}
-export const AllCases = React.memo<AllCasesProps>(({ userCanCrud }) => {
-  const urlSearch = useGetUrlSearch(navTabs.case);
-  const { actionLicense } = useGetActionLicense();
-  const {
-    countClosedCases,
-    countOpenCases,
-    isLoading: isCasesStatusLoading,
-    fetchCasesStatus,
-  } = useGetCasesStatus();
-  const {
-    data,
-    dispatchUpdateCaseProperty,
-    filterOptions,
-    loading,
-    queryParams,
-    selectedCases,
-    refetchCases,
-    setFilters,
-    setQueryParams,
-    setSelectedCases,
-  } = useGetCases();
-
-  // Delete case
-  const {
-    dispatchResetIsDeleted,
-    handleOnDeleteConfirm,
-    handleToggleModal,
-    isLoading: isDeleting,
-    isDeleted,
-    isDisplayConfirmDeleteModal,
-  } = useDeleteCases();
-
-  // Update case
-  const {
-    dispatchResetIsUpdated,
-    isLoading: isUpdating,
-    isUpdated,
-    updateBulkStatus,
-  } = useUpdateCases();
-  const [deleteThisCase, setDeleteThisCase] = useState({
-    title: '',
-    id: '',
-  });
-  const [deleteBulk, setDeleteBulk] = useState<DeleteCase[]>([]);
-  const filterRefetch = useRef<() => void>();
-  const setFilterRefetch = useCallback(
-    (refetchFilter: () => void) => {
-      filterRefetch.current = refetchFilter;
-    },
-    [filterRefetch.current]
-  );
-  const refreshCases = useCallback(
-    (dataRefresh = true) => {
-      if (dataRefresh) refetchCases();
-      fetchCasesStatus();
-      setSelectedCases([]);
-      setDeleteBulk([]);
-      if (filterRefetch.current != null) {
-        filterRefetch.current();
-      }
-    },
-    [filterOptions, queryParams, filterRefetch.current]
-  );
-
-  useEffect(() => {
-    if (isDeleted) {
-      refreshCases();
-      dispatchResetIsDeleted();
-    }
-    if (isUpdated) {
-      refreshCases();
-      dispatchResetIsUpdated();
-    }
-  }, [isDeleted, isUpdated]);
-  const confirmDeleteModal = useMemo(
-    () => (
-      <ConfirmDeleteCaseModal
-        caseTitle={deleteThisCase.title}
-        isModalVisible={isDisplayConfirmDeleteModal}
-        isPlural={deleteBulk.length > 0}
-        onCancel={handleToggleModal}
-        onConfirm={handleOnDeleteConfirm.bind(
-          null,
-          deleteBulk.length > 0 ? deleteBulk : [deleteThisCase]
-        )}
-      />
-    ),
-    [deleteBulk, deleteThisCase, isDisplayConfirmDeleteModal]
-  );
-
-  const toggleDeleteModal = useCallback((deleteCase: Case) => {
-    handleToggleModal();
-    setDeleteThisCase(deleteCase);
-  }, []);
-
-  const toggleBulkDeleteModal = useCallback(
-    (caseIds: string[]) => {
-      handleToggleModal();
-      if (caseIds.length === 1) {
-        const singleCase = selectedCases.find(theCase => theCase.id === caseIds[0]);
-        if (singleCase) {
-          return setDeleteThisCase({ id: singleCase.id, title: singleCase.title });
-        }
-      }
-      const convertToDeleteCases: DeleteCase[] = caseIds.map(id => ({ id }));
-      setDeleteBulk(convertToDeleteCases);
-    },
-    [selectedCases]
-  );
-
-  const handleUpdateCaseStatus = useCallback(
-    (status: string) => {
-      updateBulkStatus(selectedCases, status);
-    },
-    [selectedCases]
-  );
-
-  const selectedCaseIds = useMemo(
-    (): string[] => selectedCases.map((caseObj: Case) => caseObj.id),
-    [selectedCases]
-  );
-
-  const getBulkItemsPopoverContent = useCallback(
-    (closePopover: () => void) => (
-      <EuiContextMenuPanel
-        data-test-subj="cases-bulk-actions"
-        items={getBulkItems({
-          caseStatus: filterOptions.status,
-          closePopover,
-          deleteCasesAction: toggleBulkDeleteModal,
-          selectedCaseIds,
-          updateCaseStatus: handleUpdateCaseStatus,
-        })}
-      />
-    ),
-    [selectedCaseIds, filterOptions.status, toggleBulkDeleteModal]
-  );
-  const handleDispatchUpdate = useCallback(
-    (args: Omit<UpdateCase, 'refetchCasesStatus'>) => {
-      dispatchUpdateCaseProperty({ ...args, refetchCasesStatus: fetchCasesStatus });
-    },
-    [dispatchUpdateCaseProperty, fetchCasesStatus]
-  );
-
-  const actions = useMemo(
-    () =>
-      getActions({
-        caseStatus: filterOptions.status,
-        deleteCaseOnClick: toggleDeleteModal,
-        dispatchUpdate: handleDispatchUpdate,
-      }),
-    [filterOptions.status, toggleDeleteModal, handleDispatchUpdate]
-  );
-
-  const actionsErrors = useMemo(() => getActionLicenseError(actionLicense), [actionLicense]);
-
-  const tableOnChangeCallback = useCallback(
-    ({ page, sort }: EuiBasicTableOnChange) => {
-      let newQueryParams = queryParams;
-      if (sort) {
-        newQueryParams = {
-          ...newQueryParams,
-          sortField: getSortField(sort.field),
-          sortOrder: sort.direction,
-        };
-      }
-      if (page) {
-        newQueryParams = {
-          ...newQueryParams,
-          page: page.index + 1,
-          perPage: page.size,
-        };
-      }
-      setQueryParams(newQueryParams);
-      refreshCases(false);
-    },
-    [queryParams]
-  );
-
-  const onFilterChangedCallback = useCallback(
-    (newFilterOptions: Partial<FilterOptions>) => {
-      if (newFilterOptions.status && newFilterOptions.status === 'closed') {
-        setQueryParams({ sortField: SortFieldCase.closedAt });
-      } else if (newFilterOptions.status && newFilterOptions.status === 'open') {
-        setQueryParams({ sortField: SortFieldCase.createdAt });
-      }
-      setFilters(newFilterOptions);
-      refreshCases(false);
-    },
-    [filterOptions, queryParams]
-  );
-
-  const memoizedGetCasesColumns = useMemo(
-    () => getCasesColumns(userCanCrud ? actions : [], filterOptions.status),
-    [actions, filterOptions.status, userCanCrud]
-  );
-  const memoizedPagination = useMemo(
-    () => ({
-      pageIndex: queryParams.page - 1,
-      pageSize: queryParams.perPage,
-      totalItemCount: data.total,
-      pageSizeOptions: [5, 10, 15, 20, 25],
-    }),
-    [data, queryParams]
-  );
-
-  const sorting: EuiTableSortingType<Case> = {
-    sort: { field: queryParams.sortField, direction: queryParams.sortOrder },
-  };
-  const euiBasicTableSelectionProps = useMemo<EuiTableSelectionType<Case>>(
-    () => ({ onSelectionChange: setSelectedCases }),
-    [selectedCases]
-  );
-  const isCasesLoading = useMemo(
-    () => loading.indexOf('cases') > -1 || loading.indexOf('caseUpdate') > -1,
-    [loading]
-  );
-  const isDataEmpty = useMemo(() => data.total === 0, [data]);
-
-  return (
-    <>
-      {!isEmpty(actionsErrors) && (
-        <CaseCallOut title={ERROR_PUSH_SERVICE_CALLOUT_TITLE} messages={actionsErrors} />
-      )}
-      <CaseHeaderPage title={i18n.PAGE_TITLE}>
-        <EuiFlexGroup alignItems="center" gutterSize="m" responsive={false} wrap={true}>
-          <EuiFlexItem grow={false}>
-            <OpenClosedStats
-              dataTestSubj="openStatsHeader"
-              caseCount={countOpenCases}
-              caseStatus={'open'}
-              isLoading={isCasesStatusLoading}
-            />
-          </EuiFlexItem>
-          <FlexItemDivider grow={false}>
-            <OpenClosedStats
-              dataTestSubj="closedStatsHeader"
-              caseCount={countClosedCases}
-              caseStatus={'closed'}
-              isLoading={isCasesStatusLoading}
-            />
-          </FlexItemDivider>
-          <EuiFlexItem grow={false}>
-            <ConfigureCaseButton
-              label={i18n.CONFIGURE_CASES_BUTTON}
-              isDisabled={!isEmpty(actionsErrors) || !userCanCrud}
-              showToolTip={!isEmpty(actionsErrors)}
-              msgTooltip={!isEmpty(actionsErrors) ? actionsErrors[0].description : <></>}
-              titleTooltip={!isEmpty(actionsErrors) ? actionsErrors[0].title : ''}
-              urlSearch={urlSearch}
-            />
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiButton
-              isDisabled={!userCanCrud}
-              fill
-              href={getCreateCaseUrl(urlSearch)}
-              iconType="plusInCircle"
-              data-test-subj="createNewCaseBtn"
-            >
-              {i18n.CREATE_TITLE}
-            </EuiButton>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </CaseHeaderPage>
-      {(isCasesLoading || isDeleting || isUpdating) && !isDataEmpty && (
-        <ProgressLoader size="xs" color="accent" className="essentialAnimation" />
-      )}
-      <Panel loading={isCasesLoading}>
-        <CasesTableFilters
-          countClosedCases={data.countClosedCases}
-          countOpenCases={data.countOpenCases}
-          onFilterChanged={onFilterChangedCallback}
-          initial={{
-            search: filterOptions.search,
-            reporters: filterOptions.reporters,
-            tags: filterOptions.tags,
-            status: filterOptions.status,
-          }}
-          setFilterRefetch={setFilterRefetch}
-        />
-        {isCasesLoading && isDataEmpty ? (
-          <Div>
-            <EuiLoadingContent data-test-subj="initialLoadingPanelAllCases" lines={10} />
-          </Div>
-        ) : (
-          <Div>
-            <UtilityBar border>
-              <UtilityBarSection>
-                <UtilityBarGroup>
-                  <UtilityBarText data-test-subj="case-table-case-count">
-                    {i18n.SHOWING_CASES(data.total ?? 0)}
-                  </UtilityBarText>
-                </UtilityBarGroup>
-                <UtilityBarGroup>
-                  <UtilityBarText data-test-subj="case-table-selected-case-count">
-                    {i18n.SHOWING_SELECTED_CASES(selectedCases.length)}
-                  </UtilityBarText>
-                  {userCanCrud && (
-                    <UtilityBarAction
-                      data-test-subj="case-table-bulk-actions"
-                      iconSide="right"
-                      iconType="arrowDown"
-                      popoverContent={getBulkItemsPopoverContent}
-                    >
-                      {i18n.BULK_ACTIONS}
-                    </UtilityBarAction>
-                  )}
-                  <UtilityBarAction iconSide="left" iconType="refresh" onClick={refreshCases}>
-                    {i18n.REFRESH}
-                  </UtilityBarAction>
-                </UtilityBarGroup>
-              </UtilityBarSection>
-            </UtilityBar>
-            <EuiBasicTable
-              columns={memoizedGetCasesColumns}
-              data-test-subj="cases-table"
-              isSelectable={userCanCrud}
-              itemId="id"
-              items={data.cases}
-              noItemsMessage={
-                <EuiEmptyPrompt
-                  title={<h3>{i18n.NO_CASES}</h3>}
-                  titleSize="xs"
-                  body={i18n.NO_CASES_BODY}
-                  actions={
-                    <EuiButton
-                      isDisabled={!userCanCrud}
-                      fill
-                      size="s"
-                      href={getCreateCaseUrl(urlSearch)}
-                      iconType="plusInCircle"
-                    >
-                      {i18n.ADD_NEW_CASE}
-                    </EuiButton>
-                  }
-                />
-              }
-              onChange={tableOnChangeCallback}
-              pagination={memoizedPagination}
-              selection={userCanCrud ? euiBasicTableSelectionProps : {}}
-              sorting={sorting}
-            />
-          </Div>
-        )}
-      </Panel>
-      {confirmDeleteModal}
-    </>
-  );
-});
-
-AllCases.displayName = 'AllCases';
diff --git a/x-pack/plugins/siem/public/pages/case/components/callout/index.test.tsx b/x-pack/plugins/siem/public/pages/case/components/callout/index.test.tsx
deleted file mode 100644
index 126ea13e96af63..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/components/callout/index.test.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-/*
- * 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 { mount } from 'enzyme';
-
-import { CaseCallOut } from './';
-
-const defaultProps = {
-  title: 'hey title',
-};
-
-describe('CaseCallOut ', () => {
-  it('Renders single message callout', () => {
-    const props = {
-      ...defaultProps,
-      message: 'we have one message',
-    };
-    const wrapper = mount(<CaseCallOut {...props} />);
-    expect(
-      wrapper
-        .find(`[data-test-subj="callout-message"]`)
-        .last()
-        .exists()
-    ).toBeTruthy();
-    expect(
-      wrapper
-        .find(`[data-test-subj="callout-messages"]`)
-        .last()
-        .exists()
-    ).toBeFalsy();
-  });
-  it('Renders multi message callout', () => {
-    const props = {
-      ...defaultProps,
-      messages: [
-        { ...defaultProps, description: <p>{'we have two messages'}</p> },
-        { ...defaultProps, description: <p>{'for real'}</p> },
-      ],
-    };
-    const wrapper = mount(<CaseCallOut {...props} />);
-    expect(
-      wrapper
-        .find(`[data-test-subj="callout-message"]`)
-        .last()
-        .exists()
-    ).toBeFalsy();
-    expect(
-      wrapper
-        .find(`[data-test-subj="callout-messages"]`)
-        .last()
-        .exists()
-    ).toBeTruthy();
-  });
-  it('Dismisses callout', () => {
-    const props = {
-      ...defaultProps,
-      message: 'we have one message',
-    };
-    const wrapper = mount(<CaseCallOut {...props} />);
-    expect(wrapper.find(`[data-test-subj="case-call-out"]`).exists()).toBeTruthy();
-    wrapper
-      .find(`[data-test-subj="callout-dismiss"]`)
-      .last()
-      .simulate('click');
-    expect(wrapper.find(`[data-test-subj="case-call-out"]`).exists()).toBeFalsy();
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/case/components/case_header_page/index.tsx b/x-pack/plugins/siem/public/pages/case/components/case_header_page/index.tsx
deleted file mode 100644
index ae2664ca6e839d..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/components/case_header_page/index.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-/*
- * 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 { HeaderPage, HeaderPageProps } from '../../../../components/header_page';
-import * as i18n from './translations';
-
-const CaseHeaderPageComponent: React.FC<HeaderPageProps> = props => <HeaderPage {...props} />;
-
-CaseHeaderPageComponent.defaultProps = {
-  badgeOptions: {
-    beta: true,
-    text: i18n.PAGE_BADGE_LABEL,
-    tooltip: i18n.PAGE_BADGE_TOOLTIP,
-  },
-};
-
-export const CaseHeaderPage = React.memo(CaseHeaderPageComponent);
diff --git a/x-pack/plugins/siem/public/pages/case/components/case_status/index.tsx b/x-pack/plugins/siem/public/pages/case/components/case_status/index.tsx
deleted file mode 100644
index f48d9a68ffaf0a..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/components/case_status/index.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-/*
- * 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 styled, { css } from 'styled-components';
-import {
-  EuiBadge,
-  EuiButtonEmpty,
-  EuiButtonToggle,
-  EuiDescriptionList,
-  EuiDescriptionListDescription,
-  EuiDescriptionListTitle,
-  EuiFlexGroup,
-  EuiFlexItem,
-} from '@elastic/eui';
-import * as i18n from '../case_view/translations';
-import { FormattedRelativePreferenceDate } from '../../../../components/formatted_date';
-import { CaseViewActions } from '../case_view/actions';
-import { Case } from '../../../../containers/case/types';
-import { CaseService } from '../../../../containers/case/use_get_case_user_actions';
-
-const MyDescriptionList = styled(EuiDescriptionList)`
-  ${({ theme }) => css`
-    & {
-      padding-right: ${theme.eui.euiSizeL};
-      border-right: ${theme.eui.euiBorderThin};
-    }
-  `}
-`;
-
-interface CaseStatusProps {
-  'data-test-subj': string;
-  badgeColor: string;
-  buttonLabel: string;
-  caseData: Case;
-  currentExternalIncident: CaseService | null;
-  disabled?: boolean;
-  icon: string;
-  isLoading: boolean;
-  isSelected: boolean;
-  onRefresh: () => void;
-  status: string;
-  title: string;
-  toggleStatusCase: (evt: unknown) => void;
-  value: string | null;
-}
-const CaseStatusComp: React.FC<CaseStatusProps> = ({
-  'data-test-subj': dataTestSubj,
-  badgeColor,
-  buttonLabel,
-  caseData,
-  currentExternalIncident,
-  disabled = false,
-  icon,
-  isLoading,
-  isSelected,
-  onRefresh,
-  status,
-  title,
-  toggleStatusCase,
-  value,
-}) => (
-  <EuiFlexGroup gutterSize="l" justifyContent="flexEnd">
-    <EuiFlexItem grow={false}>
-      <MyDescriptionList compressed>
-        <EuiFlexGroup>
-          <EuiFlexItem grow={false}>
-            <EuiDescriptionListTitle>{i18n.STATUS}</EuiDescriptionListTitle>
-            <EuiDescriptionListDescription>
-              <EuiBadge color={badgeColor} data-test-subj="case-view-status">
-                {status}
-              </EuiBadge>
-            </EuiDescriptionListDescription>
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiDescriptionListTitle>{title}</EuiDescriptionListTitle>
-            <EuiDescriptionListDescription>
-              <FormattedRelativePreferenceDate data-test-subj={dataTestSubj} value={value} />
-            </EuiDescriptionListDescription>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </MyDescriptionList>
-    </EuiFlexItem>
-    <EuiFlexItem grow={false}>
-      <EuiFlexGroup gutterSize="l" alignItems="center">
-        <EuiFlexItem>
-          <EuiButtonEmpty data-test-subj="case-refresh" iconType="refresh" onClick={onRefresh}>
-            {i18n.CASE_REFRESH}
-          </EuiButtonEmpty>
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiButtonToggle
-            data-test-subj="toggle-case-status"
-            isDisabled={disabled}
-            iconType={icon}
-            isLoading={isLoading}
-            isSelected={isSelected}
-            label={buttonLabel}
-            onChange={toggleStatusCase}
-          />
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <CaseViewActions
-            caseData={caseData}
-            currentExternalIncident={currentExternalIncident}
-            disabled={disabled}
-          />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-);
-
-export const CaseStatus = React.memo(CaseStatusComp);
diff --git a/x-pack/plugins/siem/public/pages/case/components/case_view/actions.test.tsx b/x-pack/plugins/siem/public/pages/case/components/case_view/actions.test.tsx
deleted file mode 100644
index 24fbd59b3282b2..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/components/case_view/actions.test.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-/*
- * 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 { mount } from 'enzyme';
-
-import { useDeleteCases } from '../../../../containers/case/use_delete_cases';
-import { TestProviders } from '../../../../mock';
-import { basicCase, basicPush } from '../../../../containers/case/mock';
-import { CaseViewActions } from './actions';
-import * as i18n from './translations';
-jest.mock('../../../../containers/case/use_delete_cases');
-const useDeleteCasesMock = useDeleteCases as jest.Mock;
-
-describe('CaseView actions', () => {
-  const handleOnDeleteConfirm = jest.fn();
-  const handleToggleModal = jest.fn();
-  const dispatchResetIsDeleted = jest.fn();
-  const defaultDeleteState = {
-    dispatchResetIsDeleted,
-    handleToggleModal,
-    handleOnDeleteConfirm,
-    isLoading: false,
-    isError: false,
-    isDeleted: false,
-    isDisplayConfirmDeleteModal: false,
-  };
-  beforeEach(() => {
-    jest.resetAllMocks();
-    useDeleteCasesMock.mockImplementation(() => defaultDeleteState);
-  });
-  it('clicking trash toggles modal', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <CaseViewActions caseData={basicCase} currentExternalIncident={null} />
-      </TestProviders>
-    );
-
-    expect(wrapper.find('[data-test-subj="confirm-delete-case-modal"]').exists()).toBeFalsy();
-
-    wrapper
-      .find('button[data-test-subj="property-actions-ellipses"]')
-      .first()
-      .simulate('click');
-    wrapper.find('button[data-test-subj="property-actions-trash"]').simulate('click');
-    expect(handleToggleModal).toHaveBeenCalled();
-  });
-  it('toggle delete modal and confirm', () => {
-    useDeleteCasesMock.mockImplementation(() => ({
-      ...defaultDeleteState,
-      isDisplayConfirmDeleteModal: true,
-    }));
-    const wrapper = mount(
-      <TestProviders>
-        <CaseViewActions caseData={basicCase} currentExternalIncident={null} />
-      </TestProviders>
-    );
-
-    expect(wrapper.find('[data-test-subj="confirm-delete-case-modal"]').exists()).toBeTruthy();
-    wrapper.find('button[data-test-subj="confirmModalConfirmButton"]').simulate('click');
-    expect(handleOnDeleteConfirm.mock.calls[0][0]).toEqual([
-      { id: basicCase.id, title: basicCase.title },
-    ]);
-  });
-  it('displays active incident link', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <CaseViewActions
-          caseData={basicCase}
-          currentExternalIncident={{
-            ...basicPush,
-            firstPushIndex: 5,
-            lastPushIndex: 5,
-            commentsToUpdate: [],
-            hasDataToPush: false,
-          }}
-        />
-      </TestProviders>
-    );
-
-    expect(wrapper.find('[data-test-subj="confirm-delete-case-modal"]').exists()).toBeFalsy();
-
-    wrapper
-      .find('button[data-test-subj="property-actions-ellipses"]')
-      .first()
-      .simulate('click');
-    expect(
-      wrapper
-        .find('[data-test-subj="property-actions-popout"]')
-        .first()
-        .prop('aria-label')
-    ).toEqual(i18n.VIEW_INCIDENT(basicPush.externalTitle));
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/case/components/case_view/actions.tsx b/x-pack/plugins/siem/public/pages/case/components/case_view/actions.tsx
deleted file mode 100644
index 4acdaef6ca51f8..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/components/case_view/actions.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-/*
- * 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 { isEmpty } from 'lodash/fp';
-import React, { useMemo } from 'react';
-import { Redirect } from 'react-router-dom';
-import * as i18n from './translations';
-import { useDeleteCases } from '../../../../containers/case/use_delete_cases';
-import { ConfirmDeleteCaseModal } from '../confirm_delete_case';
-import { SiemPageName } from '../../../home/types';
-import { PropertyActions } from '../property_actions';
-import { Case } from '../../../../containers/case/types';
-import { CaseService } from '../../../../containers/case/use_get_case_user_actions';
-
-interface CaseViewActions {
-  caseData: Case;
-  currentExternalIncident: CaseService | null;
-  disabled?: boolean;
-}
-
-const CaseViewActionsComponent: React.FC<CaseViewActions> = ({
-  caseData,
-  currentExternalIncident,
-  disabled = false,
-}) => {
-  // Delete case
-  const {
-    handleToggleModal,
-    handleOnDeleteConfirm,
-    isDeleted,
-    isDisplayConfirmDeleteModal,
-  } = useDeleteCases();
-
-  const confirmDeleteModal = useMemo(
-    () => (
-      <ConfirmDeleteCaseModal
-        caseTitle={caseData.title}
-        isModalVisible={isDisplayConfirmDeleteModal}
-        isPlural={false}
-        onCancel={handleToggleModal}
-        onConfirm={handleOnDeleteConfirm.bind(null, [{ id: caseData.id, title: caseData.title }])}
-      />
-    ),
-    [isDisplayConfirmDeleteModal, caseData]
-  );
-  const propertyActions = useMemo(
-    () => [
-      {
-        disabled,
-        iconType: 'trash',
-        label: i18n.DELETE_CASE,
-        onClick: handleToggleModal,
-      },
-      ...(currentExternalIncident != null && !isEmpty(currentExternalIncident?.externalUrl)
-        ? [
-            {
-              iconType: 'popout',
-              label: i18n.VIEW_INCIDENT(currentExternalIncident?.externalTitle ?? ''),
-              onClick: () => window.open(currentExternalIncident?.externalUrl, '_blank'),
-            },
-          ]
-        : []),
-    ],
-    [disabled, handleToggleModal, currentExternalIncident]
-  );
-
-  if (isDeleted) {
-    return <Redirect to={`/${SiemPageName.case}`} />;
-  }
-  return (
-    <>
-      <PropertyActions propertyActions={propertyActions} />
-      {confirmDeleteModal}
-    </>
-  );
-};
-
-export const CaseViewActions = React.memo(CaseViewActionsComponent);
diff --git a/x-pack/plugins/siem/public/pages/case/components/case_view/index.test.tsx b/x-pack/plugins/siem/public/pages/case/components/case_view/index.test.tsx
deleted file mode 100644
index a6e6b19a071ce5..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/components/case_view/index.test.tsx
+++ /dev/null
@@ -1,432 +0,0 @@
-/*
- * 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 { mount } from 'enzyme';
-
-import { Router, routeData, mockHistory, mockLocation } from '../__mock__/router';
-import { CaseComponent, CaseProps, CaseView } from './';
-import { basicCase, basicCaseClosed, caseUserActions } from '../../../../containers/case/mock';
-import { TestProviders } from '../../../../mock';
-import { useUpdateCase } from '../../../../containers/case/use_update_case';
-import { useGetCase } from '../../../../containers/case/use_get_case';
-import { useGetCaseUserActions } from '../../../../containers/case/use_get_case_user_actions';
-import { wait } from '../../../../lib/helpers';
-import { usePushToService } from '../use_push_to_service';
-jest.mock('../../../../containers/case/use_update_case');
-jest.mock('../../../../containers/case/use_get_case_user_actions');
-jest.mock('../../../../containers/case/use_get_case');
-jest.mock('../use_push_to_service');
-const useUpdateCaseMock = useUpdateCase as jest.Mock;
-const useGetCaseUserActionsMock = useGetCaseUserActions as jest.Mock;
-const usePushToServiceMock = usePushToService as jest.Mock;
-
-export const caseProps: CaseProps = {
-  caseId: basicCase.id,
-  userCanCrud: true,
-  caseData: basicCase,
-  fetchCase: jest.fn(),
-  updateCase: jest.fn(),
-};
-
-export const caseClosedProps: CaseProps = {
-  ...caseProps,
-  caseData: basicCaseClosed,
-};
-
-describe('CaseView ', () => {
-  const updateCaseProperty = jest.fn();
-  const fetchCaseUserActions = jest.fn();
-  const fetchCase = jest.fn();
-  const updateCase = jest.fn();
-  const data = caseProps.caseData;
-  const defaultGetCase = {
-    isLoading: false,
-    isError: false,
-    data,
-    updateCase,
-    fetchCase,
-  };
-  /* eslint-disable no-console */
-  // Silence until enzyme fixed to use ReactTestUtils.act()
-  const originalError = console.error;
-  beforeAll(() => {
-    console.error = jest.fn();
-  });
-  afterAll(() => {
-    console.error = originalError;
-  });
-  /* eslint-enable no-console */
-
-  const defaultUpdateCaseState = {
-    isLoading: false,
-    isError: false,
-    updateKey: null,
-    updateCaseProperty,
-  };
-
-  const defaultUseGetCaseUserActions = {
-    caseUserActions,
-    caseServices: {},
-    fetchCaseUserActions,
-    firstIndexPushToService: -1,
-    hasDataToPush: false,
-    isLoading: false,
-    isError: false,
-    lastIndexPushToService: -1,
-    participants: [data.createdBy],
-  };
-
-  beforeEach(() => {
-    jest.resetAllMocks();
-    useUpdateCaseMock.mockImplementation(() => defaultUpdateCaseState);
-    jest.spyOn(routeData, 'useLocation').mockReturnValue(mockLocation);
-    useGetCaseUserActionsMock.mockImplementation(() => defaultUseGetCaseUserActions);
-    usePushToServiceMock.mockImplementation(({ updateCase: updateCaseMockCall }) => ({
-      pushButton: (
-        <button
-          data-test-subj="mock-button"
-          onClick={() => updateCaseMockCall(caseProps.caseData)}
-          type="button"
-        >
-          {'Hello Button'}
-        </button>
-      ),
-      pushCallouts: null,
-    }));
-  });
-
-  it('should render CaseComponent', async () => {
-    const wrapper = mount(
-      <TestProviders>
-        <Router history={mockHistory}>
-          <CaseComponent {...caseProps} />
-        </Router>
-      </TestProviders>
-    );
-    await wait();
-    expect(
-      wrapper
-        .find(`[data-test-subj="case-view-title"]`)
-        .first()
-        .prop('title')
-    ).toEqual(data.title);
-    expect(
-      wrapper
-        .find(`[data-test-subj="case-view-status"]`)
-        .first()
-        .text()
-    ).toEqual(data.status);
-    expect(
-      wrapper
-        .find(`[data-test-subj="case-view-tag-list"] [data-test-subj="case-tag"]`)
-        .first()
-        .text()
-    ).toEqual(data.tags[0]);
-    expect(
-      wrapper
-        .find(`[data-test-subj="case-view-username"]`)
-        .first()
-        .text()
-    ).toEqual(data.createdBy.username);
-    expect(wrapper.contains(`[data-test-subj="case-view-closedAt"]`)).toBe(false);
-    expect(
-      wrapper
-        .find(`[data-test-subj="case-view-createdAt"]`)
-        .first()
-        .prop('value')
-    ).toEqual(data.createdAt);
-    expect(
-      wrapper
-        .find(`[data-test-subj="description-action"] [data-test-subj="user-action-markdown"]`)
-        .first()
-        .prop('raw')
-    ).toEqual(data.description);
-  });
-
-  it('should show closed indicators in header when case is closed', async () => {
-    useUpdateCaseMock.mockImplementation(() => ({
-      ...defaultUpdateCaseState,
-      caseData: basicCaseClosed,
-    }));
-    const wrapper = mount(
-      <TestProviders>
-        <Router history={mockHistory}>
-          <CaseComponent {...caseClosedProps} />
-        </Router>
-      </TestProviders>
-    );
-    await wait();
-    expect(wrapper.contains(`[data-test-subj="case-view-createdAt"]`)).toBe(false);
-    expect(
-      wrapper
-        .find(`[data-test-subj="case-view-closedAt"]`)
-        .first()
-        .prop('value')
-    ).toEqual(basicCaseClosed.closedAt);
-    expect(
-      wrapper
-        .find(`[data-test-subj="case-view-status"]`)
-        .first()
-        .text()
-    ).toEqual(basicCaseClosed.status);
-  });
-
-  it('should dispatch update state when button is toggled', async () => {
-    const wrapper = mount(
-      <TestProviders>
-        <Router history={mockHistory}>
-          <CaseComponent {...caseProps} />
-        </Router>
-      </TestProviders>
-    );
-    await wait();
-    wrapper
-      .find('input[data-test-subj="toggle-case-status"]')
-      .simulate('change', { target: { checked: true } });
-    expect(updateCaseProperty).toHaveBeenCalled();
-  });
-
-  it('should display EditableTitle isLoading', () => {
-    useUpdateCaseMock.mockImplementation(() => ({
-      ...defaultUpdateCaseState,
-      isLoading: true,
-      updateKey: 'title',
-    }));
-    const wrapper = mount(
-      <TestProviders>
-        <Router history={mockHistory}>
-          <CaseComponent {...caseProps} />
-        </Router>
-      </TestProviders>
-    );
-    expect(
-      wrapper
-        .find('[data-test-subj="editable-title-loading"]')
-        .first()
-        .exists()
-    ).toBeTruthy();
-    expect(
-      wrapper
-        .find('[data-test-subj="editable-title-edit-icon"]')
-        .first()
-        .exists()
-    ).toBeFalsy();
-  });
-
-  it('should display Toggle Status isLoading', () => {
-    useUpdateCaseMock.mockImplementation(() => ({
-      ...defaultUpdateCaseState,
-      isLoading: true,
-      updateKey: 'status',
-    }));
-    const wrapper = mount(
-      <TestProviders>
-        <Router history={mockHistory}>
-          <CaseComponent {...caseProps} />
-        </Router>
-      </TestProviders>
-    );
-    expect(
-      wrapper
-        .find('[data-test-subj="toggle-case-status"]')
-        .first()
-        .prop('isLoading')
-    ).toBeTruthy();
-  });
-
-  it('should display description isLoading', () => {
-    useUpdateCaseMock.mockImplementation(() => ({
-      ...defaultUpdateCaseState,
-      isLoading: true,
-      updateKey: 'description',
-    }));
-    const wrapper = mount(
-      <TestProviders>
-        <Router history={mockHistory}>
-          <CaseComponent {...caseProps} />
-        </Router>
-      </TestProviders>
-    );
-    expect(
-      wrapper
-        .find('[data-test-subj="description-action"] [data-test-subj="user-action-title-loading"]')
-        .first()
-        .exists()
-    ).toBeTruthy();
-    expect(
-      wrapper
-        .find('[data-test-subj="description-action"] [data-test-subj="property-actions"]')
-        .first()
-        .exists()
-    ).toBeFalsy();
-  });
-
-  it('should display tags isLoading', () => {
-    useUpdateCaseMock.mockImplementation(() => ({
-      ...defaultUpdateCaseState,
-      isLoading: true,
-      updateKey: 'tags',
-    }));
-    const wrapper = mount(
-      <TestProviders>
-        <Router history={mockHistory}>
-          <CaseComponent {...caseProps} />
-        </Router>
-      </TestProviders>
-    );
-    expect(
-      wrapper
-        .find('[data-test-subj="case-view-tag-list"] [data-test-subj="tag-list-loading"]')
-        .first()
-        .exists()
-    ).toBeTruthy();
-    expect(
-      wrapper
-        .find('[data-test-subj="tag-list-edit"]')
-        .first()
-        .exists()
-    ).toBeFalsy();
-  });
-
-  it('should update title', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <Router history={mockHistory}>
-          <CaseComponent {...caseProps} />
-        </Router>
-      </TestProviders>
-    );
-    const newTitle = 'The new title';
-    wrapper
-      .find(`[data-test-subj="editable-title-edit-icon"]`)
-      .first()
-      .simulate('click');
-    wrapper.update();
-    wrapper
-      .find(`[data-test-subj="editable-title-input-field"]`)
-      .last()
-      .simulate('change', { target: { value: newTitle } });
-
-    wrapper.update();
-    wrapper
-      .find(`[data-test-subj="editable-title-submit-btn"]`)
-      .first()
-      .simulate('click');
-
-    wrapper.update();
-    const updateObject = updateCaseProperty.mock.calls[0][0];
-    expect(updateObject.updateKey).toEqual('title');
-    expect(updateObject.updateValue).toEqual(newTitle);
-  });
-
-  it('should push updates on button click', async () => {
-    useGetCaseUserActionsMock.mockImplementation(() => ({
-      ...defaultUseGetCaseUserActions,
-      hasDataToPush: true,
-    }));
-    const wrapper = mount(
-      <TestProviders>
-        <Router history={mockHistory}>
-          <CaseComponent {...{ ...caseProps, updateCase }} />
-        </Router>
-      </TestProviders>
-    );
-    expect(
-      wrapper
-        .find('[data-test-subj="has-data-to-push-button"]')
-        .first()
-        .exists()
-    ).toBeTruthy();
-    wrapper
-      .find('[data-test-subj="mock-button"]')
-      .first()
-      .simulate('click');
-    wrapper.update();
-    await wait();
-    expect(updateCase).toBeCalledWith(caseProps.caseData);
-    expect(fetchCaseUserActions).toBeCalledWith(caseProps.caseData.id);
-  });
-
-  it('should return null if error', () => {
-    (useGetCase as jest.Mock).mockImplementation(() => ({
-      ...defaultGetCase,
-      isError: true,
-    }));
-    const wrapper = mount(
-      <TestProviders>
-        <Router history={mockHistory}>
-          <CaseView
-            {...{
-              caseId: '1234',
-              userCanCrud: true,
-            }}
-          />
-        </Router>
-      </TestProviders>
-    );
-    expect(wrapper).toEqual({});
-  });
-
-  it('should return spinner if loading', () => {
-    (useGetCase as jest.Mock).mockImplementation(() => ({
-      ...defaultGetCase,
-      isLoading: true,
-    }));
-    const wrapper = mount(
-      <TestProviders>
-        <Router history={mockHistory}>
-          <CaseView
-            {...{
-              caseId: '1234',
-              userCanCrud: true,
-            }}
-          />
-        </Router>
-      </TestProviders>
-    );
-    expect(wrapper.find('[data-test-subj="case-view-loading"]').exists()).toBeTruthy();
-  });
-
-  it('should return case view when data is there', () => {
-    (useGetCase as jest.Mock).mockImplementation(() => defaultGetCase);
-    const wrapper = mount(
-      <TestProviders>
-        <Router history={mockHistory}>
-          <CaseView
-            {...{
-              caseId: '1234',
-              userCanCrud: true,
-            }}
-          />
-        </Router>
-      </TestProviders>
-    );
-    expect(wrapper.find('[data-test-subj="case-view-title"]').exists()).toBeTruthy();
-  });
-
-  it('should refresh data on refresh', () => {
-    (useGetCase as jest.Mock).mockImplementation(() => defaultGetCase);
-    const wrapper = mount(
-      <TestProviders>
-        <Router history={mockHistory}>
-          <CaseView
-            {...{
-              caseId: '1234',
-              userCanCrud: true,
-            }}
-          />
-        </Router>
-      </TestProviders>
-    );
-    wrapper
-      .find('[data-test-subj="case-refresh"]')
-      .first()
-      .simulate('click');
-    expect(fetchCaseUserActions).toBeCalledWith(caseProps.caseData.id);
-    expect(fetchCase).toBeCalled();
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/case/components/case_view/index.tsx b/x-pack/plugins/siem/public/pages/case/components/case_view/index.tsx
deleted file mode 100644
index fed8ec8edbe8b5..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/components/case_view/index.tsx
+++ /dev/null
@@ -1,382 +0,0 @@
-/*
- * 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 {
-  EuiButtonToggle,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiLoadingContent,
-  EuiLoadingSpinner,
-  EuiHorizontalRule,
-} from '@elastic/eui';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import styled from 'styled-components';
-
-import * as i18n from './translations';
-import { Case } from '../../../../containers/case/types';
-import { getCaseUrl } from '../../../../components/link_to';
-import { HeaderPage } from '../../../../components/header_page';
-import { EditableTitle } from '../../../../components/header_page/editable_title';
-import { TagList } from '../tag_list';
-import { useGetCase } from '../../../../containers/case/use_get_case';
-import { UserActionTree } from '../user_action_tree';
-import { UserList } from '../user_list';
-import { useUpdateCase } from '../../../../containers/case/use_update_case';
-import { useGetUrlSearch } from '../../../../components/navigation/use_get_url_search';
-import { WrapperPage } from '../../../../components/wrapper_page';
-import { getTypedPayload } from '../../../../containers/case/utils';
-import { WhitePageWrapper } from '../wrappers';
-import { useBasePath } from '../../../../lib/kibana';
-import { CaseStatus } from '../case_status';
-import { navTabs } from '../../../home/home_navigations';
-import { SpyRoute } from '../../../../utils/route/spy_routes';
-import { useGetCaseUserActions } from '../../../../containers/case/use_get_case_user_actions';
-import { usePushToService } from '../use_push_to_service';
-import { EditConnector } from '../edit_connector';
-import { useConnectors } from '../../../../containers/case/configure/use_connectors';
-
-interface Props {
-  caseId: string;
-  userCanCrud: boolean;
-}
-
-const MyWrapper = styled(WrapperPage)`
-  padding-bottom: 0;
-`;
-
-const MyEuiFlexGroup = styled(EuiFlexGroup)`
-  height: 100%;
-`;
-
-const MyEuiHorizontalRule = styled(EuiHorizontalRule)`
-  margin-left: 48px;
-  &.euiHorizontalRule--full {
-    width: calc(100% - 48px);
-  }
-`;
-
-export interface CaseProps extends Props {
-  fetchCase: () => void;
-  caseData: Case;
-  updateCase: (newCase: Case) => void;
-}
-
-export const CaseComponent = React.memo<CaseProps>(
-  ({ caseId, caseData, fetchCase, updateCase, userCanCrud }) => {
-    const basePath = window.location.origin + useBasePath();
-    const caseLink = `${basePath}/app/siem#/case/${caseId}`;
-    const search = useGetUrlSearch(navTabs.case);
-    const [initLoadingData, setInitLoadingData] = useState(true);
-    const {
-      caseUserActions,
-      fetchCaseUserActions,
-      caseServices,
-      hasDataToPush,
-      isLoading: isLoadingUserActions,
-      participants,
-    } = useGetCaseUserActions(caseId, caseData.connectorId);
-    const { isLoading, updateKey, updateCaseProperty } = useUpdateCase({
-      caseId,
-    });
-
-    // Update Fields
-    const onUpdateField = useCallback(
-      (newUpdateKey: keyof Case, updateValue: Case[keyof Case]) => {
-        const handleUpdateNewCase = (newCase: Case) =>
-          updateCase({ ...newCase, comments: caseData.comments });
-        switch (newUpdateKey) {
-          case 'title':
-            const titleUpdate = getTypedPayload<string>(updateValue);
-            if (titleUpdate.length > 0) {
-              updateCaseProperty({
-                fetchCaseUserActions,
-                updateKey: 'title',
-                updateValue: titleUpdate,
-                updateCase: handleUpdateNewCase,
-                version: caseData.version,
-              });
-            }
-            break;
-          case 'connectorId':
-            const connectorId = getTypedPayload<string>(updateValue);
-            if (connectorId.length > 0) {
-              updateCaseProperty({
-                fetchCaseUserActions,
-                updateKey: 'connector_id',
-                updateValue: connectorId,
-                updateCase: handleUpdateNewCase,
-                version: caseData.version,
-              });
-            }
-            break;
-          case 'description':
-            const descriptionUpdate = getTypedPayload<string>(updateValue);
-            if (descriptionUpdate.length > 0) {
-              updateCaseProperty({
-                fetchCaseUserActions,
-                updateKey: 'description',
-                updateValue: descriptionUpdate,
-                updateCase: handleUpdateNewCase,
-                version: caseData.version,
-              });
-            }
-            break;
-          case 'tags':
-            const tagsUpdate = getTypedPayload<string[]>(updateValue);
-            updateCaseProperty({
-              fetchCaseUserActions,
-              updateKey: 'tags',
-              updateValue: tagsUpdate,
-              updateCase: handleUpdateNewCase,
-              version: caseData.version,
-            });
-            break;
-          case 'status':
-            const statusUpdate = getTypedPayload<string>(updateValue);
-            if (caseData.status !== updateValue) {
-              updateCaseProperty({
-                fetchCaseUserActions,
-                updateKey: 'status',
-                updateValue: statusUpdate,
-                updateCase: handleUpdateNewCase,
-                version: caseData.version,
-              });
-            }
-          default:
-            return null;
-        }
-      },
-      [fetchCaseUserActions, updateCaseProperty, updateCase, caseData]
-    );
-    const handleUpdateCase = useCallback(
-      (newCase: Case) => {
-        updateCase(newCase);
-        fetchCaseUserActions(newCase.id);
-      },
-      [updateCase, fetchCaseUserActions]
-    );
-
-    const { loading: isLoadingConnectors, connectors } = useConnectors();
-    const caseConnectorName = useMemo(
-      () => connectors.find(c => c.id === caseData.connectorId)?.name ?? 'none',
-      [connectors, caseData.connectorId]
-    );
-
-    const currentExternalIncident = useMemo(
-      () =>
-        caseServices != null && caseServices[caseData.connectorId] != null
-          ? caseServices[caseData.connectorId]
-          : null,
-      [caseServices, caseData.connectorId]
-    );
-
-    const { pushButton, pushCallouts } = usePushToService({
-      caseConnectorId: caseData.connectorId,
-      caseConnectorName,
-      caseServices,
-      caseId: caseData.id,
-      caseStatus: caseData.status,
-      connectors,
-      updateCase: handleUpdateCase,
-      userCanCrud,
-    });
-
-    const onSubmitConnector = useCallback(
-      connectorId => onUpdateField('connectorId', connectorId),
-      [onUpdateField]
-    );
-    const onSubmitTags = useCallback(newTags => onUpdateField('tags', newTags), [onUpdateField]);
-    const onSubmitTitle = useCallback(newTitle => onUpdateField('title', newTitle), [
-      onUpdateField,
-    ]);
-    const toggleStatusCase = useCallback(
-      e => onUpdateField('status', e.target.checked ? 'closed' : 'open'),
-      [onUpdateField]
-    );
-    const handleRefresh = useCallback(() => {
-      fetchCaseUserActions(caseData.id);
-      fetchCase();
-    }, [caseData.id, fetchCase, fetchCaseUserActions]);
-
-    const spyState = useMemo(() => ({ caseTitle: caseData.title }), [caseData.title]);
-
-    const caseStatusData = useMemo(
-      () =>
-        caseData.status === 'open'
-          ? {
-              'data-test-subj': 'case-view-createdAt',
-              value: caseData.createdAt,
-              title: i18n.CASE_OPENED,
-              buttonLabel: i18n.CLOSE_CASE,
-              status: caseData.status,
-              icon: 'folderCheck',
-              badgeColor: 'secondary',
-              isSelected: false,
-            }
-          : {
-              'data-test-subj': 'case-view-closedAt',
-              value: caseData.closedAt ?? '',
-              title: i18n.CASE_CLOSED,
-              buttonLabel: i18n.REOPEN_CASE,
-              status: caseData.status,
-              icon: 'folderExclamation',
-              badgeColor: 'danger',
-              isSelected: true,
-            },
-      [caseData.closedAt, caseData.createdAt, caseData.status]
-    );
-    const emailContent = useMemo(
-      () => ({
-        subject: i18n.EMAIL_SUBJECT(caseData.title),
-        body: i18n.EMAIL_BODY(caseLink),
-      }),
-      [caseLink, caseData.title]
-    );
-
-    useEffect(() => {
-      if (initLoadingData && !isLoadingUserActions) {
-        setInitLoadingData(false);
-      }
-    }, [initLoadingData, isLoadingUserActions]);
-
-    return (
-      <>
-        <MyWrapper>
-          <HeaderPage
-            backOptions={{
-              href: getCaseUrl(search),
-              text: i18n.BACK_TO_ALL,
-              dataTestSubj: 'backToCases',
-            }}
-            data-test-subj="case-view-title"
-            titleNode={
-              <EditableTitle
-                disabled={!userCanCrud}
-                isLoading={isLoading && updateKey === 'title'}
-                title={caseData.title}
-                onSubmit={onSubmitTitle}
-              />
-            }
-            title={caseData.title}
-          >
-            <CaseStatus
-              currentExternalIncident={currentExternalIncident}
-              caseData={caseData}
-              disabled={!userCanCrud}
-              isLoading={isLoading && updateKey === 'status'}
-              onRefresh={handleRefresh}
-              toggleStatusCase={toggleStatusCase}
-              {...caseStatusData}
-            />
-          </HeaderPage>
-        </MyWrapper>
-        <WhitePageWrapper>
-          <MyWrapper>
-            {!initLoadingData && pushCallouts != null && pushCallouts}
-            <EuiFlexGroup>
-              <EuiFlexItem grow={6}>
-                {initLoadingData && <EuiLoadingContent lines={8} />}
-                {!initLoadingData && (
-                  <>
-                    <UserActionTree
-                      caseUserActions={caseUserActions}
-                      connectors={connectors}
-                      data={caseData}
-                      fetchUserActions={fetchCaseUserActions.bind(null, caseData.id)}
-                      caseServices={caseServices}
-                      isLoadingDescription={isLoading && updateKey === 'description'}
-                      isLoadingUserActions={isLoadingUserActions}
-                      onUpdateField={onUpdateField}
-                      updateCase={updateCase}
-                      userCanCrud={userCanCrud}
-                    />
-                    <MyEuiHorizontalRule margin="s" />
-                    <EuiFlexGroup alignItems="center" gutterSize="s" justifyContent="flexEnd">
-                      <EuiFlexItem grow={false}>
-                        <EuiButtonToggle
-                          data-test-subj={caseStatusData['data-test-subj']}
-                          iconType={caseStatusData.icon}
-                          isDisabled={!userCanCrud}
-                          isSelected={caseStatusData.isSelected}
-                          isLoading={isLoading && updateKey === 'status'}
-                          label={caseStatusData.buttonLabel}
-                          onChange={toggleStatusCase}
-                        />
-                      </EuiFlexItem>
-                      {hasDataToPush && (
-                        <EuiFlexItem data-test-subj="has-data-to-push-button" grow={false}>
-                          {pushButton}
-                        </EuiFlexItem>
-                      )}
-                    </EuiFlexGroup>
-                  </>
-                )}
-              </EuiFlexItem>
-              <EuiFlexItem grow={2}>
-                <UserList
-                  data-test-subj="case-view-user-list-reporter"
-                  email={emailContent}
-                  headline={i18n.REPORTER}
-                  users={[caseData.createdBy]}
-                />
-                <UserList
-                  data-test-subj="case-view-user-list-participants"
-                  email={emailContent}
-                  headline={i18n.PARTICIPANTS}
-                  loading={isLoadingUserActions}
-                  users={participants}
-                />
-                <TagList
-                  data-test-subj="case-view-tag-list"
-                  disabled={!userCanCrud}
-                  tags={caseData.tags}
-                  onSubmit={onSubmitTags}
-                  isLoading={isLoading && updateKey === 'tags'}
-                />
-                <EditConnector
-                  isLoading={isLoadingConnectors}
-                  onSubmit={onSubmitConnector}
-                  connectors={connectors}
-                  selectedConnector={caseData.connectorId}
-                />
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </MyWrapper>
-        </WhitePageWrapper>
-        <SpyRoute state={spyState} />
-      </>
-    );
-  }
-);
-
-export const CaseView = React.memo(({ caseId, userCanCrud }: Props) => {
-  const { data, isLoading, isError, fetchCase, updateCase } = useGetCase(caseId);
-  if (isError) {
-    return null;
-  }
-  if (isLoading) {
-    return (
-      <MyEuiFlexGroup justifyContent="center" alignItems="center">
-        <EuiFlexItem grow={false}>
-          <EuiLoadingSpinner data-test-subj="case-view-loading" size="xl" />
-        </EuiFlexItem>
-      </MyEuiFlexGroup>
-    );
-  }
-
-  return (
-    <CaseComponent
-      caseId={caseId}
-      fetchCase={fetchCase}
-      caseData={data}
-      updateCase={updateCase}
-      userCanCrud={userCanCrud}
-    />
-  );
-});
-
-CaseComponent.displayName = 'CaseComponent';
-CaseView.displayName = 'CaseView';
diff --git a/x-pack/plugins/siem/public/pages/case/components/configure_cases/__mock__/index.tsx b/x-pack/plugins/siem/public/pages/case/components/configure_cases/__mock__/index.tsx
deleted file mode 100644
index 0eccd8980ccd23..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/components/configure_cases/__mock__/index.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-/*
- * 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 { Connector } from '../../../../../containers/case/configure/types';
-import { ReturnConnectors } from '../../../../../containers/case/configure/use_connectors';
-import { connectorsMock } from '../../../../../containers/case/configure/mock';
-import { ReturnUseCaseConfigure } from '../../../../../containers/case/configure/use_configure';
-import { createUseKibanaMock } from '../../../../../mock/kibana_react';
-export { mapping } from '../../../../../containers/case/configure/mock';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { actionTypeRegistryMock } from '../../../../../../../triggers_actions_ui/public/application/action_type_registry.mock';
-
-export const connectors: Connector[] = connectorsMock;
-
-export const searchURL =
-  '?timerange=(global:(linkTo:!(),timerange:(from:1585487656371,fromStr:now-24h,kind:relative,to:1585574056371,toStr:now)),timeline:(linkTo:!(),timerange:(from:1585227005527,kind:absolute,to:1585313405527)))';
-
-export const useCaseConfigureResponse: ReturnUseCaseConfigure = {
-  closureType: 'close-by-user',
-  connectorId: 'none',
-  connectorName: 'none',
-  currentConfiguration: {
-    connectorId: 'none',
-    closureType: 'close-by-user',
-    connectorName: 'none',
-  },
-  firstLoad: false,
-  loading: false,
-  mapping: null,
-  persistCaseConfigure: jest.fn(),
-  persistLoading: false,
-  refetchCaseConfigure: jest.fn(),
-  setClosureType: jest.fn(),
-  setConnector: jest.fn(),
-  setCurrentConfiguration: jest.fn(),
-  setMapping: jest.fn(),
-  version: '',
-};
-
-export const useConnectorsResponse: ReturnConnectors = {
-  loading: false,
-  connectors,
-  refetchConnectors: jest.fn(),
-};
-
-export const kibanaMockImplementationArgs = {
-  services: {
-    ...createUseKibanaMock()().services,
-    triggers_actions_ui: { actionTypeRegistry: actionTypeRegistryMock.create() },
-  },
-};
diff --git a/x-pack/plugins/siem/public/pages/case/components/configure_cases/index.test.tsx b/x-pack/plugins/siem/public/pages/case/components/configure_cases/index.test.tsx
deleted file mode 100644
index 08975703241c74..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/components/configure_cases/index.test.tsx
+++ /dev/null
@@ -1,860 +0,0 @@
-/*
- * 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 { ReactWrapper, mount } from 'enzyme';
-
-import { ConfigureCases } from './';
-import { TestProviders } from '../../../../mock';
-import { Connectors } from './connectors';
-import { ClosureOptions } from './closure_options';
-import {
-  ActionsConnectorsContextProvider,
-  ConnectorAddFlyout,
-  ConnectorEditFlyout,
-} from '../../../../../../triggers_actions_ui/public';
-
-import { useKibana } from '../../../../lib/kibana';
-import { useConnectors } from '../../../../containers/case/configure/use_connectors';
-import { useCaseConfigure } from '../../../../containers/case/configure/use_configure';
-import { useGetUrlSearch } from '../../../../components/navigation/use_get_url_search';
-
-import {
-  connectors,
-  searchURL,
-  useCaseConfigureResponse,
-  useConnectorsResponse,
-  kibanaMockImplementationArgs,
-} from './__mock__';
-
-jest.mock('../../../../lib/kibana');
-jest.mock('../../../../containers/case/configure/use_connectors');
-jest.mock('../../../../containers/case/configure/use_configure');
-jest.mock('../../../../components/navigation/use_get_url_search');
-
-const useKibanaMock = useKibana as jest.Mock;
-const useConnectorsMock = useConnectors as jest.Mock;
-const useCaseConfigureMock = useCaseConfigure as jest.Mock;
-const useGetUrlSearchMock = useGetUrlSearch as jest.Mock;
-describe('ConfigureCases', () => {
-  describe('rendering', () => {
-    let wrapper: ReactWrapper;
-    beforeEach(() => {
-      jest.resetAllMocks();
-      useCaseConfigureMock.mockImplementation(() => useCaseConfigureResponse);
-      useConnectorsMock.mockImplementation(() => ({ ...useConnectorsResponse, connectors: [] }));
-      useKibanaMock.mockImplementation(() => kibanaMockImplementationArgs);
-      useGetUrlSearchMock.mockImplementation(() => searchURL);
-
-      wrapper = mount(<ConfigureCases userCanCrud />, { wrappingComponent: TestProviders });
-    });
-
-    test('it renders the Connectors', () => {
-      expect(wrapper.find('[data-test-subj="dropdown-connectors"]').exists()).toBeTruthy();
-    });
-
-    test('it renders the ClosureType', () => {
-      expect(wrapper.find('[data-test-subj="closure-options-radio-group"]').exists()).toBeTruthy();
-    });
-
-    test('it renders the ActionsConnectorsContextProvider', () => {
-      // Components from triggers_actions_ui do not have a data-test-subj
-      expect(wrapper.find(ActionsConnectorsContextProvider).exists()).toBeTruthy();
-    });
-
-    test('it renders the ConnectorAddFlyout', () => {
-      // Components from triggers_actions_ui do not have a data-test-subj
-      expect(wrapper.find(ConnectorAddFlyout).exists()).toBeTruthy();
-    });
-
-    test('it does NOT render the ConnectorEditFlyout', () => {
-      // Components from triggers_actions_ui do not have a data-test-subj
-      expect(wrapper.find(ConnectorEditFlyout).exists()).toBeFalsy();
-    });
-
-    test('it does NOT render the EuiCallOut', () => {
-      expect(
-        wrapper.find('[data-test-subj="configure-cases-warning-callout"]').exists()
-      ).toBeFalsy();
-    });
-
-    test('it does NOT render the EuiBottomBar', () => {
-      expect(
-        wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists()
-      ).toBeFalsy();
-    });
-
-    test('it disables correctly ClosureOptions when the connector is set to none', () => {
-      expect(wrapper.find(ClosureOptions).prop('disabled')).toBe(true);
-    });
-  });
-
-  describe('Unhappy path', () => {
-    let wrapper: ReactWrapper;
-    beforeEach(() => {
-      jest.resetAllMocks();
-      useCaseConfigureMock.mockImplementation(() => ({
-        ...useCaseConfigureResponse,
-        closureType: 'close-by-user',
-        connectorId: 'not-id',
-        connectorName: 'unchanged',
-        currentConfiguration: {
-          connectorName: 'unchanged',
-          connectorId: 'not-id',
-          closureType: 'close-by-user',
-        },
-      }));
-      useConnectorsMock.mockImplementation(() => ({ ...useConnectorsResponse, connectors: [] }));
-      useKibanaMock.mockImplementation(() => kibanaMockImplementationArgs);
-      useGetUrlSearchMock.mockImplementation(() => searchURL);
-      wrapper = mount(<ConfigureCases userCanCrud />, { wrappingComponent: TestProviders });
-    });
-
-    test('it shows the warning callout when configuration is invalid', () => {
-      expect(
-        wrapper.find('[data-test-subj="configure-cases-warning-callout"]').exists()
-      ).toBeTruthy();
-    });
-
-    test('it hides the update connector button when the connectorId is invalid', () => {
-      expect(
-        wrapper
-          .find('button[data-test-subj="case-configure-update-selected-connector-button"]')
-          .exists()
-      ).toBeFalsy();
-    });
-  });
-
-  describe('Happy path', () => {
-    let wrapper: ReactWrapper;
-
-    beforeEach(() => {
-      jest.resetAllMocks();
-      useCaseConfigureMock.mockImplementation(() => ({
-        ...useCaseConfigureResponse,
-        mapping: connectors[0].config.casesConfiguration.mapping,
-        closureType: 'close-by-user',
-        connectorId: 'servicenow-1',
-        connectorName: 'unchanged',
-        currentConfiguration: {
-          connectorName: 'unchanged',
-          connectorId: 'servicenow-1',
-          closureType: 'close-by-user',
-        },
-      }));
-      useConnectorsMock.mockImplementation(() => useConnectorsResponse);
-      useKibanaMock.mockImplementation(() => kibanaMockImplementationArgs);
-      useGetUrlSearchMock.mockImplementation(() => searchURL);
-
-      wrapper = mount(<ConfigureCases userCanCrud />, { wrappingComponent: TestProviders });
-    });
-
-    test('it renders the ConnectorEditFlyout', () => {
-      expect(wrapper.find(ConnectorEditFlyout).exists()).toBeTruthy();
-    });
-
-    test('it renders with correct props', () => {
-      // Connector
-      expect(wrapper.find(Connectors).prop('connectors')).toEqual(connectors);
-      expect(wrapper.find(Connectors).prop('disabled')).toBe(false);
-      expect(wrapper.find(Connectors).prop('isLoading')).toBe(false);
-      expect(wrapper.find(Connectors).prop('selectedConnector')).toBe('servicenow-1');
-
-      // ClosureOptions
-      expect(wrapper.find(ClosureOptions).prop('disabled')).toBe(false);
-      expect(wrapper.find(ClosureOptions).prop('closureTypeSelected')).toBe('close-by-user');
-
-      // Flyouts
-      expect(wrapper.find(ConnectorAddFlyout).prop('addFlyoutVisible')).toBe(false);
-      expect(wrapper.find(ConnectorAddFlyout).prop('actionTypes')).toEqual([
-        expect.objectContaining({
-          id: '.servicenow',
-        }),
-        expect.objectContaining({
-          id: '.jira',
-        }),
-      ]);
-
-      expect(wrapper.find(ConnectorEditFlyout).prop('editFlyoutVisible')).toBe(false);
-      expect(wrapper.find(ConnectorEditFlyout).prop('initialConnector')).toEqual(connectors[0]);
-    });
-
-    test('it does not shows the action bar when there is no change', () => {
-      expect(
-        wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists()
-      ).toBeFalsy();
-    });
-
-    test('it disables correctly when the user cannot crud', () => {
-      const newWrapper = mount(<ConfigureCases userCanCrud={false} />, {
-        wrappingComponent: TestProviders,
-      });
-
-      expect(newWrapper.find('button[data-test-subj="dropdown-connectors"]').prop('disabled')).toBe(
-        true
-      );
-
-      expect(
-        newWrapper
-          .find('button[data-test-subj="case-configure-add-connector-button"]')
-          .prop('disabled')
-      ).toBe(true);
-
-      expect(
-        newWrapper
-          .find('button[data-test-subj="case-configure-update-selected-connector-button"]')
-          .prop('disabled')
-      ).toBe(true);
-
-      // Two closure options
-      expect(
-        newWrapper
-          .find('[data-test-subj="closure-options-radio-group"] input')
-          .first()
-          .prop('disabled')
-      ).toBe(true);
-
-      expect(
-        newWrapper
-          .find('[data-test-subj="closure-options-radio-group"] input')
-          .at(1)
-          .prop('disabled')
-      ).toBe(true);
-    });
-  });
-
-  describe('loading connectors', () => {
-    let wrapper: ReactWrapper;
-
-    beforeEach(() => {
-      jest.resetAllMocks();
-      jest.restoreAllMocks();
-      jest.clearAllMocks();
-      useCaseConfigureMock.mockImplementation(() => ({
-        ...useCaseConfigureResponse,
-        mapping: connectors[1].config.casesConfiguration.mapping,
-        closureType: 'close-by-user',
-        connectorId: 'servicenow-2',
-        connectorName: 'unchanged',
-        currentConfiguration: {
-          connectorName: 'unchanged',
-          connectorId: 'servicenow-1',
-          closureType: 'close-by-user',
-        },
-      }));
-      useConnectorsMock.mockImplementation(() => ({
-        ...useConnectorsResponse,
-        loading: true,
-      }));
-      useKibanaMock.mockImplementation(() => kibanaMockImplementationArgs);
-      useGetUrlSearchMock.mockImplementation(() => searchURL);
-      wrapper = mount(<ConfigureCases userCanCrud />, { wrappingComponent: TestProviders });
-    });
-
-    test('it disables correctly Connector when loading connectors', () => {
-      expect(
-        wrapper.find('button[data-test-subj="dropdown-connectors"]').prop('disabled')
-      ).toBeTruthy();
-    });
-
-    test('it pass the correct value to isLoading attribute on Connector', () => {
-      expect(wrapper.find(Connectors).prop('isLoading')).toBe(true);
-    });
-
-    test('it disables correctly ClosureOptions when loading connectors', () => {
-      expect(wrapper.find(ClosureOptions).prop('disabled')).toBe(true);
-    });
-
-    test('it hides the update connector button when loading the connectors', () => {
-      expect(
-        wrapper
-          .find('button[data-test-subj="case-configure-update-selected-connector-button"]')
-          .prop('disabled')
-      ).toBe(true);
-    });
-
-    test('it disables the buttons of action bar when loading connectors', () => {
-      const newWrapper = mount(<ConfigureCases userCanCrud />, {
-        wrappingComponent: TestProviders,
-      });
-
-      expect(
-        newWrapper
-          .find('button[data-test-subj="case-configure-action-bottom-bar-cancel-button"]')
-          .first()
-          .prop('disabled')
-      ).toBe(true);
-
-      expect(
-        newWrapper
-          .find('button[data-test-subj="case-configure-action-bottom-bar-save-button"]')
-          .first()
-          .prop('disabled')
-      ).toBe(true);
-    });
-  });
-
-  describe('saving configuration', () => {
-    let wrapper: ReactWrapper;
-
-    beforeEach(() => {
-      jest.resetAllMocks();
-      useCaseConfigureMock.mockImplementation(() => ({
-        ...useCaseConfigureResponse,
-        connectorId: 'servicenow-1',
-        persistLoading: true,
-      }));
-
-      useConnectorsMock.mockImplementation(() => useConnectorsResponse);
-      useKibanaMock.mockImplementation(() => kibanaMockImplementationArgs);
-      useGetUrlSearchMock.mockImplementation(() => searchURL);
-      wrapper = mount(<ConfigureCases userCanCrud />, { wrappingComponent: TestProviders });
-    });
-
-    test('it disables correctly Connector when saving configuration', () => {
-      expect(wrapper.find(Connectors).prop('disabled')).toBe(true);
-    });
-
-    test('it disables correctly ClosureOptions when saving configuration', () => {
-      expect(
-        wrapper
-          .find('[data-test-subj="closure-options-radio-group"] input')
-          .first()
-          .prop('disabled')
-      ).toBe(true);
-
-      expect(
-        wrapper
-          .find('[data-test-subj="closure-options-radio-group"] input')
-          .at(1)
-          .prop('disabled')
-      ).toBe(true);
-    });
-
-    test('it disables the update connector button when saving the configuration', () => {
-      expect(
-        wrapper
-          .find('button[data-test-subj="case-configure-update-selected-connector-button"]')
-          .prop('disabled')
-      ).toBe(true);
-    });
-
-    test('it disables the buttons of action bar when saving configuration', () => {
-      useCaseConfigureMock.mockImplementation(() => ({
-        ...useCaseConfigureResponse,
-        mapping: connectors[1].config.casesConfiguration.mapping,
-        closureType: 'close-by-user',
-        connectorId: 'servicenow-2',
-        connectorName: 'unchanged',
-        currentConfiguration: {
-          connectorName: 'unchanged',
-          connectorId: 'servicenow-1',
-          closureType: 'close-by-user',
-        },
-        persistLoading: true,
-      }));
-
-      const newWrapper = mount(<ConfigureCases userCanCrud />, {
-        wrappingComponent: TestProviders,
-      });
-
-      expect(
-        newWrapper
-          .find('[data-test-subj="case-configure-action-bottom-bar-cancel-button"]')
-          .first()
-          .prop('isDisabled')
-      ).toBe(true);
-
-      expect(
-        newWrapper
-          .find('[data-test-subj="case-configure-action-bottom-bar-save-button"]')
-          .first()
-          .prop('isDisabled')
-      ).toBe(true);
-    });
-
-    test('it shows the loading spinner when saving configuration', () => {
-      useCaseConfigureMock.mockImplementation(() => ({
-        ...useCaseConfigureResponse,
-        mapping: connectors[1].config.casesConfiguration.mapping,
-        closureType: 'close-by-user',
-        connectorId: 'servicenow-2',
-        connectorName: 'unchanged',
-        currentConfiguration: {
-          connectorName: 'unchanged',
-          connectorId: 'servicenow-1',
-          closureType: 'close-by-user',
-        },
-        persistLoading: true,
-      }));
-
-      const newWrapper = mount(<ConfigureCases userCanCrud />, {
-        wrappingComponent: TestProviders,
-      });
-
-      expect(
-        newWrapper
-          .find('[data-test-subj="case-configure-action-bottom-bar-cancel-button"]')
-          .first()
-          .prop('isLoading')
-      ).toBe(true);
-
-      expect(
-        newWrapper
-          .find('[data-test-subj="case-configure-action-bottom-bar-save-button"]')
-          .first()
-          .prop('isLoading')
-      ).toBe(true);
-    });
-  });
-
-  describe('loading configuration', () => {
-    let wrapper: ReactWrapper;
-
-    beforeEach(() => {
-      jest.resetAllMocks();
-      useCaseConfigureMock.mockImplementation(() => ({
-        ...useCaseConfigureResponse,
-        loading: true,
-      }));
-      useConnectorsMock.mockImplementation(() => ({
-        ...useConnectorsResponse,
-      }));
-      useKibanaMock.mockImplementation(() => kibanaMockImplementationArgs);
-      useGetUrlSearchMock.mockImplementation(() => searchURL);
-      wrapper = mount(<ConfigureCases userCanCrud />, { wrappingComponent: TestProviders });
-    });
-
-    test('it hides the update connector button when loading the configuration', () => {
-      expect(
-        wrapper
-          .find('button[data-test-subj="case-configure-update-selected-connector-button"]')
-          .exists()
-      ).toBeFalsy();
-    });
-  });
-
-  describe('update connector', () => {
-    let wrapper: ReactWrapper;
-    const persistCaseConfigure = jest.fn();
-
-    beforeEach(() => {
-      jest.resetAllMocks();
-      useCaseConfigureMock.mockImplementation(() => ({
-        ...useCaseConfigureResponse,
-        mapping: connectors[1].config.casesConfiguration.mapping,
-        closureType: 'close-by-user',
-        connectorId: 'servicenow-2',
-        connectorName: 'unchanged',
-        currentConfiguration: {
-          connectorName: 'unchanged',
-          connectorId: 'servicenow-1',
-          closureType: 'close-by-user',
-        },
-        persistCaseConfigure,
-      }));
-      useConnectorsMock.mockImplementation(() => useConnectorsResponse);
-      useKibanaMock.mockImplementation(() => kibanaMockImplementationArgs);
-      useGetUrlSearchMock.mockImplementation(() => searchURL);
-
-      wrapper = mount(<ConfigureCases userCanCrud />, { wrappingComponent: TestProviders });
-    });
-
-    test('it submits the configuration correctly', () => {
-      wrapper
-        .find('[data-test-subj="case-configure-action-bottom-bar-save-button"]')
-        .first()
-        .simulate('click');
-
-      wrapper.update();
-
-      expect(persistCaseConfigure).toHaveBeenCalled();
-      expect(persistCaseConfigure).toHaveBeenCalledWith({
-        connectorId: 'servicenow-2',
-        connectorName: 'My Connector 2',
-        closureType: 'close-by-user',
-      });
-    });
-
-    test('it has the correct url on cancel button', () => {
-      expect(
-        wrapper
-          .find('[data-test-subj="case-configure-action-bottom-bar-cancel-button"]')
-          .first()
-          .prop('href')
-      ).toBe(`#/link-to/case${searchURL}`);
-    });
-
-    test('it disables the buttons of action bar when loading configuration', () => {
-      useCaseConfigureMock.mockImplementation(() => ({
-        ...useCaseConfigureResponse,
-        mapping: connectors[1].config.casesConfiguration.mapping,
-        closureType: 'close-by-user',
-        connectorId: 'servicenow-2',
-        connectorName: 'unchanged',
-        currentConfiguration: {
-          connectorName: 'unchanged',
-          connectorId: 'servicenow-1',
-          closureType: 'close-by-user',
-        },
-        loading: true,
-      }));
-      const newWrapper = mount(<ConfigureCases userCanCrud />, {
-        wrappingComponent: TestProviders,
-      });
-
-      expect(
-        newWrapper
-          .find('[data-test-subj="case-configure-action-bottom-bar-cancel-button"]')
-          .first()
-          .prop('isDisabled')
-      ).toBe(true);
-
-      expect(
-        newWrapper
-          .find('[data-test-subj="case-configure-action-bottom-bar-save-button"]')
-          .first()
-          .prop('isDisabled')
-      ).toBe(true);
-    });
-  });
-
-  describe('user interactions', () => {
-    beforeEach(() => {
-      jest.resetAllMocks();
-      useCaseConfigureMock.mockImplementation(() => ({
-        ...useCaseConfigureResponse,
-        mapping: connectors[1].config.casesConfiguration.mapping,
-        closureType: 'close-by-user',
-        connectorId: 'servicenow-2',
-        connectorName: 'unchanged',
-        currentConfiguration: {
-          connectorName: 'unchanged',
-          connectorId: 'servicenow-2',
-          closureType: 'close-by-user',
-        },
-      }));
-      useConnectorsMock.mockImplementation(() => useConnectorsResponse);
-      useKibanaMock.mockImplementation(() => kibanaMockImplementationArgs);
-      useGetUrlSearchMock.mockImplementation(() => searchURL);
-    });
-
-    test('it show the add flyout when pressing the add connector button', () => {
-      const wrapper = mount(<ConfigureCases userCanCrud />, { wrappingComponent: TestProviders });
-      wrapper
-        .find('button[data-test-subj="case-configure-add-connector-button"]')
-        .simulate('click');
-      wrapper.update();
-
-      expect(wrapper.find(ConnectorAddFlyout).prop('addFlyoutVisible')).toBe(true);
-      expect(
-        wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists()
-      ).toBeFalsy();
-    });
-
-    test('it show the edit flyout when pressing the update connector button', () => {
-      const wrapper = mount(<ConfigureCases userCanCrud />, { wrappingComponent: TestProviders });
-      wrapper
-        .find('button[data-test-subj="case-configure-update-selected-connector-button"]')
-        .simulate('click');
-      wrapper.update();
-
-      expect(wrapper.find(ConnectorEditFlyout).prop('editFlyoutVisible')).toBe(true);
-      expect(
-        wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists()
-      ).toBeFalsy();
-    });
-
-    test('it tracks the changes successfully', () => {
-      useCaseConfigureMock.mockImplementation(() => ({
-        ...useCaseConfigureResponse,
-        mapping: connectors[1].config.casesConfiguration.mapping,
-        closureType: 'close-by-user',
-        connectorId: 'servicenow-2',
-        connectorName: 'unchanged',
-        currentConfiguration: {
-          connectorName: 'unchanged',
-          connectorId: 'servicenow-1',
-          closureType: 'close-by-pushing',
-        },
-      }));
-      const wrapper = mount(<ConfigureCases userCanCrud />, { wrappingComponent: TestProviders });
-      wrapper.find('button[data-test-subj="dropdown-connectors"]').simulate('click');
-      wrapper.update();
-      wrapper.find('button[data-test-subj="dropdown-connector-servicenow-2"]').simulate('click');
-      wrapper.update();
-      wrapper.find('input[id="close-by-pushing"]').simulate('change');
-      wrapper.update();
-
-      expect(
-        wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists()
-      ).toBeTruthy();
-      expect(
-        wrapper
-          .find('[data-test-subj="case-configure-action-bottom-bar-total-changes"]')
-          .first()
-          .text()
-      ).toBe('2 unsaved changes');
-    });
-
-    test('it tracks the changes successfully when name changes', () => {
-      useCaseConfigureMock.mockImplementation(() => ({
-        ...useCaseConfigureResponse,
-        mapping: connectors[1].config.casesConfiguration.mapping,
-        closureType: 'close-by-user',
-        connectorId: 'servicenow-2',
-        connectorName: 'nameChange',
-        currentConfiguration: {
-          connectorId: 'servicenow-1',
-          closureType: 'close-by-pushing',
-          connectorName: 'before',
-        },
-      }));
-
-      const wrapper = mount(<ConfigureCases userCanCrud />, { wrappingComponent: TestProviders });
-      wrapper.find('button[data-test-subj="dropdown-connectors"]').simulate('click');
-      wrapper.update();
-      wrapper.find('button[data-test-subj="dropdown-connector-servicenow-2"]').simulate('click');
-      wrapper.update();
-      wrapper.find('input[id="close-by-pushing"]').simulate('change');
-      wrapper.update();
-
-      expect(
-        wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists()
-      ).toBeTruthy();
-      expect(
-        wrapper
-          .find('[data-test-subj="case-configure-action-bottom-bar-total-changes"]')
-          .first()
-          .text()
-      ).toBe('2 unsaved changes');
-    });
-
-    test('it tracks and reverts the changes successfully ', () => {
-      const wrapper = mount(<ConfigureCases userCanCrud />, { wrappingComponent: TestProviders });
-      // change settings
-      wrapper.find('button[data-test-subj="dropdown-connectors"]').simulate('click');
-      wrapper.update();
-      wrapper.find('button[data-test-subj="dropdown-connector-servicenow-2"]').simulate('click');
-      wrapper.update();
-      wrapper.find('input[id="close-by-pushing"]').simulate('change');
-      wrapper.update();
-
-      // revert back to initial settings
-      wrapper.find('button[data-test-subj="dropdown-connectors"]').simulate('click');
-      wrapper.update();
-      wrapper.find('button[data-test-subj="dropdown-connector-servicenow-1"]').simulate('click');
-      wrapper.update();
-      wrapper.find('input[id="close-by-user"]').simulate('change');
-      wrapper.update();
-
-      expect(
-        wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists()
-      ).toBeFalsy();
-    });
-
-    test('it close and restores the action bar when the add connector button is pressed', () => {
-      useCaseConfigureMock
-        .mockImplementationOnce(() => ({
-          ...useCaseConfigureResponse,
-          mapping: connectors[1].config.casesConfiguration.mapping,
-          closureType: 'close-by-user',
-          connectorId: 'servicenow-2',
-          currentConfiguration: { connectorId: 'servicenow-2', closureType: 'close-by-user' },
-        }))
-        .mockImplementation(() => ({
-          ...useCaseConfigureResponse,
-          mapping: connectors[1].config.casesConfiguration.mapping,
-          closureType: 'close-by-pushing',
-          connectorId: 'servicenow-2',
-          currentConfiguration: { connectorId: 'servicenow-2', closureType: 'close-by-user' },
-        }));
-      const wrapper = mount(<ConfigureCases userCanCrud />, { wrappingComponent: TestProviders });
-      // Change closure type
-      wrapper.find('input[id="close-by-pushing"]').simulate('change');
-      wrapper.update();
-
-      expect(
-        wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists()
-      ).toBeTruthy();
-
-      // Press add connector button
-      wrapper
-        .find('button[data-test-subj="case-configure-add-connector-button"]')
-        .simulate('click');
-      wrapper.update();
-
-      expect(
-        wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists()
-      ).toBeFalsy();
-
-      expect(wrapper.find(ConnectorAddFlyout).prop('addFlyoutVisible')).toBe(true);
-
-      // Close the add flyout
-      wrapper.find('button[data-test-subj="euiFlyoutCloseButton"]').simulate('click');
-      wrapper.update();
-
-      expect(
-        wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists()
-      ).toBeTruthy();
-
-      expect(wrapper.find(ConnectorAddFlyout).prop('addFlyoutVisible')).toBe(false);
-
-      expect(
-        wrapper
-          .find('[data-test-subj="case-configure-action-bottom-bar-total-changes"]')
-          .first()
-          .text()
-      ).toBe('1 unsaved changes');
-    });
-
-    test('it close and restores the action bar when the update connector button is pressed', () => {
-      useCaseConfigureMock
-        .mockImplementationOnce(() => ({
-          ...useCaseConfigureResponse,
-          mapping: connectors[1].config.casesConfiguration.mapping,
-          closureType: 'close-by-user',
-          connectorId: 'servicenow-2',
-          currentConfiguration: { connectorId: 'servicenow-2', closureType: 'close-by-user' },
-        }))
-        .mockImplementation(() => ({
-          ...useCaseConfigureResponse,
-          mapping: connectors[1].config.casesConfiguration.mapping,
-          closureType: 'close-by-pushing',
-          connectorId: 'servicenow-2',
-          currentConfiguration: { connectorId: 'servicenow-2', closureType: 'close-by-user' },
-        }));
-      const wrapper = mount(<ConfigureCases userCanCrud />, { wrappingComponent: TestProviders });
-
-      // Change closure type
-      wrapper.find('input[id="close-by-pushing"]').simulate('change');
-      wrapper.update();
-
-      // Press update connector button
-      wrapper
-        .find('button[data-test-subj="case-configure-update-selected-connector-button"]')
-        .simulate('click');
-      wrapper.update();
-
-      expect(
-        wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists()
-      ).toBeFalsy();
-
-      expect(wrapper.find(ConnectorEditFlyout).prop('editFlyoutVisible')).toBe(true);
-
-      // Close the edit flyout
-      wrapper.find('button[data-test-subj="euiFlyoutCloseButton"]').simulate('click');
-      wrapper.update();
-
-      expect(
-        wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists()
-      ).toBeTruthy();
-
-      expect(wrapper.find(ConnectorEditFlyout).prop('editFlyoutVisible')).toBe(false);
-
-      expect(
-        wrapper
-          .find('[data-test-subj="case-configure-action-bottom-bar-total-changes"]')
-          .first()
-          .text()
-      ).toBe('1 unsaved changes');
-    });
-
-    test('it shows the action bar when the connector is changed', () => {
-      useCaseConfigureMock
-        .mockImplementationOnce(() => ({
-          ...useCaseConfigureResponse,
-          mapping: connectors[0].config.casesConfiguration.mapping,
-          closureType: 'close-by-user',
-          connectorId: 'servicenow-1',
-          currentConfiguration: { connectorId: 'servicenow-1', closureType: 'close-by-user' },
-        }))
-        .mockImplementation(() => ({
-          ...useCaseConfigureResponse,
-          mapping: connectors[1].config.casesConfiguration.mapping,
-          closureType: 'close-by-user',
-          connectorId: 'servicenow-2',
-          currentConfiguration: { connectorId: 'servicenow-1', closureType: 'close-by-user' },
-        }));
-      const wrapper = mount(<ConfigureCases userCanCrud />, { wrappingComponent: TestProviders });
-      wrapper.find('button[data-test-subj="dropdown-connectors"]').simulate('click');
-      wrapper.update();
-      wrapper.find('button[data-test-subj="dropdown-connector-servicenow-2"]').simulate('click');
-      wrapper.update();
-
-      expect(
-        wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists()
-      ).toBeTruthy();
-      expect(
-        wrapper
-          .find('[data-test-subj="case-configure-action-bottom-bar-total-changes"]')
-          .first()
-          .text()
-      ).toBe('1 unsaved changes');
-    });
-
-    test('it closes the action bar when pressing save', () => {
-      useCaseConfigureMock
-        .mockImplementationOnce(() => ({
-          ...useCaseConfigureResponse,
-          mapping: connectors[1].config.casesConfiguration.mapping,
-          closureType: 'close-by-user',
-          connectorId: 'servicenow-2',
-          currentConfiguration: { connectorId: 'servicenow-2', closureType: 'close-by-user' },
-        }))
-        .mockImplementation(() => ({
-          ...useCaseConfigureResponse,
-          mapping: connectors[1].config.casesConfiguration.mapping,
-          closureType: 'close-by-pushing',
-          connectorId: 'servicenow-2',
-          currentConfiguration: { connectorId: 'servicenow-2', closureType: 'close-by-user' },
-        }));
-      const wrapper = mount(<ConfigureCases userCanCrud />, { wrappingComponent: TestProviders });
-      wrapper.find('input[id="close-by-pushing"]').simulate('change');
-      wrapper.update();
-
-      expect(
-        wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists()
-      ).toBeTruthy();
-
-      wrapper
-        .find('[data-test-subj="case-configure-action-bottom-bar-save-button"]')
-        .first()
-        .simulate('click');
-
-      wrapper.update();
-
-      expect(
-        wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists()
-      ).toBeFalsy();
-    });
-
-    test('the text of the update button is changed successfully', () => {
-      useCaseConfigureMock
-        .mockImplementationOnce(() => ({
-          ...useCaseConfigureResponse,
-          connectorId: 'servicenow-1',
-        }))
-        .mockImplementation(() => ({
-          ...useCaseConfigureResponse,
-          connectorId: 'servicenow-2',
-        }));
-
-      const wrapper = mount(<ConfigureCases userCanCrud />, { wrappingComponent: TestProviders });
-
-      wrapper.find('button[data-test-subj="dropdown-connectors"]').simulate('click');
-      wrapper.update();
-      wrapper.find('button[data-test-subj="dropdown-connector-servicenow-2"]').simulate('click');
-      wrapper.update();
-
-      expect(
-        wrapper
-          .find('button[data-test-subj="case-configure-update-selected-connector-button"]')
-          .text()
-      ).toBe('Update My Connector 2');
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/case/components/configure_cases/index.tsx b/x-pack/plugins/siem/public/pages/case/components/configure_cases/index.tsx
deleted file mode 100644
index 739083a5009ecd..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/components/configure_cases/index.tsx
+++ /dev/null
@@ -1,289 +0,0 @@
-/*
- * 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, { useCallback, useEffect, useState, Dispatch, SetStateAction } from 'react';
-import styled, { css } from 'styled-components';
-
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiButton,
-  EuiCallOut,
-  EuiBottomBar,
-  EuiButtonEmpty,
-  EuiText,
-} from '@elastic/eui';
-
-import { difference } from 'lodash/fp';
-import { useKibana } from '../../../../lib/kibana';
-import { useConnectors } from '../../../../containers/case/configure/use_connectors';
-import { useCaseConfigure } from '../../../../containers/case/configure/use_configure';
-import {
-  ActionsConnectorsContextProvider,
-  ActionType,
-  ConnectorAddFlyout,
-  ConnectorEditFlyout,
-} from '../../../../../../triggers_actions_ui/public';
-
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { ActionConnectorTableItem } from '../../../../../../triggers_actions_ui/public/types';
-import { getCaseUrl } from '../../../../components/link_to';
-import { useGetUrlSearch } from '../../../../components/navigation/use_get_url_search';
-import { connectorsConfiguration } from '../../../../lib/connectors/config';
-
-import { Connectors } from '../configure_cases/connectors';
-import { ClosureOptions } from '../configure_cases/closure_options';
-import { SectionWrapper } from '../wrappers';
-import { navTabs } from '../../../../pages/home/home_navigations';
-import * as i18n from './translations';
-
-const FormWrapper = styled.div`
-  ${({ theme }) => css`
-    & > * {
-      margin-top 40px;
-    }
-
-    & > :first-child {
-      margin-top: 0;
-    }
-
-    padding-top: ${theme.eui.paddingSizes.xl};
-    padding-bottom: ${theme.eui.paddingSizes.xl};
-  `}
-`;
-
-const actionTypes: ActionType[] = Object.values(connectorsConfiguration);
-
-interface ConfigureCasesComponentProps {
-  userCanCrud: boolean;
-}
-
-const ConfigureCasesComponent: React.FC<ConfigureCasesComponentProps> = ({ userCanCrud }) => {
-  const search = useGetUrlSearch(navTabs.case);
-  const { http, triggers_actions_ui, notifications, application, docLinks } = useKibana().services;
-
-  const [connectorIsValid, setConnectorIsValid] = useState(true);
-  const [addFlyoutVisible, setAddFlyoutVisibility] = useState<boolean>(false);
-  const [editFlyoutVisible, setEditFlyoutVisibility] = useState<boolean>(false);
-  const [editedConnectorItem, setEditedConnectorItem] = useState<ActionConnectorTableItem | null>(
-    null
-  );
-
-  const [actionBarVisible, setActionBarVisible] = useState(false);
-  const [totalConfigurationChanges, setTotalConfigurationChanges] = useState(0);
-
-  const {
-    connectorId,
-    closureType,
-    currentConfiguration,
-    loading: loadingCaseConfigure,
-    persistLoading,
-    persistCaseConfigure,
-    setConnector,
-    setClosureType,
-  } = useCaseConfigure();
-
-  const { loading: isLoadingConnectors, connectors, refetchConnectors } = useConnectors();
-
-  // ActionsConnectorsContextProvider reloadConnectors prop expects a Promise<void>.
-  // TODO: Fix it if reloadConnectors type change.
-  const reloadConnectors = useCallback(async () => refetchConnectors(), []);
-  const isLoadingAny = isLoadingConnectors || persistLoading || loadingCaseConfigure;
-  const updateConnectorDisabled = isLoadingAny || !connectorIsValid || connectorId === 'none';
-
-  const handleSubmit = useCallback(
-    // TO DO give a warning/error to user when field are not mapped so they have chance to do it
-    () => {
-      setActionBarVisible(false);
-      persistCaseConfigure({
-        connectorId,
-        connectorName: connectors.find(c => c.id === connectorId)?.name ?? '',
-        closureType,
-      });
-    },
-    [connectorId, connectors, closureType]
-  );
-
-  const onClickAddConnector = useCallback(() => {
-    setActionBarVisible(false);
-    setAddFlyoutVisibility(true);
-  }, []);
-
-  const onClickUpdateConnector = useCallback(() => {
-    setActionBarVisible(false);
-    setEditFlyoutVisibility(true);
-  }, []);
-
-  const handleActionBar = useCallback(() => {
-    const currentConfigurationMinusName = {
-      connectorId: currentConfiguration.connectorId,
-      closureType: currentConfiguration.closureType,
-    };
-    const unsavedChanges = difference(Object.values(currentConfigurationMinusName), [
-      connectorId,
-      closureType,
-    ]).length;
-    setActionBarVisible(!(unsavedChanges === 0));
-    setTotalConfigurationChanges(unsavedChanges);
-  }, [currentConfiguration, connectorId, closureType]);
-
-  const handleSetAddFlyoutVisibility = useCallback(
-    (isVisible: boolean) => {
-      handleActionBar();
-      setAddFlyoutVisibility(isVisible);
-    },
-    [currentConfiguration, connectorId, closureType]
-  );
-
-  const handleSetEditFlyoutVisibility = useCallback(
-    (isVisible: boolean) => {
-      handleActionBar();
-      setEditFlyoutVisibility(isVisible);
-    },
-    [currentConfiguration, connectorId, closureType]
-  );
-
-  useEffect(() => {
-    if (
-      !isLoadingConnectors &&
-      connectorId !== 'none' &&
-      !connectors.some(c => c.id === connectorId)
-    ) {
-      setConnectorIsValid(false);
-    } else if (
-      !isLoadingConnectors &&
-      (connectorId === 'none' || connectors.some(c => c.id === connectorId))
-    ) {
-      setConnectorIsValid(true);
-    }
-  }, [connectors, connectorId]);
-
-  useEffect(() => {
-    if (!isLoadingConnectors && connectorId !== 'none') {
-      setEditedConnectorItem(
-        connectors.find(c => c.id === connectorId) as ActionConnectorTableItem
-      );
-    }
-  }, [connectors, connectorId]);
-
-  useEffect(() => {
-    handleActionBar();
-  }, [
-    connectors,
-    connectorId,
-    closureType,
-    currentConfiguration.connectorId,
-    currentConfiguration.closureType,
-  ]);
-
-  return (
-    <FormWrapper>
-      {!connectorIsValid && (
-        <SectionWrapper style={{ marginTop: 0 }}>
-          <EuiCallOut
-            title={i18n.WARNING_NO_CONNECTOR_TITLE}
-            color="warning"
-            iconType="help"
-            data-test-subj="configure-cases-warning-callout"
-          >
-            {i18n.WARNING_NO_CONNECTOR_MESSAGE}
-          </EuiCallOut>
-        </SectionWrapper>
-      )}
-      <SectionWrapper>
-        <ClosureOptions
-          closureTypeSelected={closureType}
-          disabled={persistLoading || isLoadingConnectors || connectorId === 'none' || !userCanCrud}
-          onChangeClosureType={setClosureType}
-        />
-      </SectionWrapper>
-      <SectionWrapper>
-        <Connectors
-          connectors={connectors ?? []}
-          disabled={persistLoading || isLoadingConnectors || !userCanCrud}
-          isLoading={isLoadingConnectors}
-          onChangeConnector={setConnector}
-          updateConnectorDisabled={updateConnectorDisabled || !userCanCrud}
-          handleShowAddFlyout={onClickAddConnector}
-          handleShowEditFlyout={onClickUpdateConnector}
-          selectedConnector={connectorId}
-        />
-      </SectionWrapper>
-      {actionBarVisible && (
-        <EuiBottomBar data-test-subj="case-configure-action-bottom-bar">
-          <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
-            <EuiFlexItem grow={false}>
-              <EuiFlexGroup gutterSize="s">
-                <EuiText data-test-subj="case-configure-action-bottom-bar-total-changes">
-                  {i18n.UNSAVED_CHANGES(totalConfigurationChanges)}
-                </EuiText>
-              </EuiFlexGroup>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiFlexGroup gutterSize="s">
-                <EuiFlexItem grow={false}>
-                  <EuiButtonEmpty
-                    color="ghost"
-                    iconType="cross"
-                    isDisabled={isLoadingAny}
-                    isLoading={persistLoading}
-                    aria-label={i18n.CANCEL}
-                    href={getCaseUrl(search)}
-                    data-test-subj="case-configure-action-bottom-bar-cancel-button"
-                  >
-                    {i18n.CANCEL}
-                  </EuiButtonEmpty>
-                </EuiFlexItem>
-                <EuiFlexItem grow={false}>
-                  <EuiButton
-                    fill
-                    color="secondary"
-                    iconType="save"
-                    aria-label={i18n.SAVE_CHANGES}
-                    isDisabled={isLoadingAny}
-                    isLoading={persistLoading}
-                    onClick={handleSubmit}
-                    data-test-subj="case-configure-action-bottom-bar-save-button"
-                  >
-                    {i18n.SAVE_CHANGES}
-                  </EuiButton>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiBottomBar>
-      )}
-      <ActionsConnectorsContextProvider
-        value={{
-          http,
-          actionTypeRegistry: triggers_actions_ui.actionTypeRegistry,
-          toastNotifications: notifications.toasts,
-          capabilities: application.capabilities,
-          reloadConnectors,
-          docLinks,
-        }}
-      >
-        <ConnectorAddFlyout
-          addFlyoutVisible={addFlyoutVisible}
-          setAddFlyoutVisibility={handleSetAddFlyoutVisibility as Dispatch<SetStateAction<boolean>>}
-          actionTypes={actionTypes}
-        />
-        {editedConnectorItem && (
-          <ConnectorEditFlyout
-            key={editedConnectorItem.id}
-            initialConnector={editedConnectorItem}
-            editFlyoutVisible={editFlyoutVisible}
-            setEditFlyoutVisibility={
-              handleSetEditFlyoutVisibility as Dispatch<SetStateAction<boolean>>
-            }
-          />
-        )}
-      </ActionsConnectorsContextProvider>
-    </FormWrapper>
-  );
-};
-
-export const ConfigureCases = React.memo(ConfigureCasesComponent);
diff --git a/x-pack/plugins/siem/public/pages/case/components/configure_cases/utils.ts b/x-pack/plugins/siem/public/pages/case/components/configure_cases/utils.ts
deleted file mode 100644
index a44378c22e8929..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/components/configure_cases/utils.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- * 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 {
-  CaseField,
-  ActionType,
-  CasesConfigurationMapping,
-  ThirdPartyField,
-} from '../../../../containers/case/configure/types';
-
-export const setActionTypeToMapping = (
-  caseField: CaseField,
-  newActionType: ActionType,
-  mapping: CasesConfigurationMapping[]
-): CasesConfigurationMapping[] => {
-  const findItemIndex = mapping.findIndex(item => item.source === caseField);
-
-  if (findItemIndex >= 0) {
-    return [
-      ...mapping.slice(0, findItemIndex),
-      { ...mapping[findItemIndex], actionType: newActionType },
-      ...mapping.slice(findItemIndex + 1),
-    ];
-  }
-
-  return [...mapping];
-};
-
-export const setThirdPartyToMapping = (
-  caseField: CaseField,
-  newThirdPartyField: ThirdPartyField,
-  mapping: CasesConfigurationMapping[]
-): CasesConfigurationMapping[] =>
-  mapping.map(item => {
-    if (item.source !== caseField && item.target === newThirdPartyField) {
-      return { ...item, target: 'not_mapped' };
-    } else if (item.source === caseField) {
-      return { ...item, target: newThirdPartyField };
-    }
-    return item;
-  });
diff --git a/x-pack/plugins/siem/public/pages/case/components/connector_selector/form.tsx b/x-pack/plugins/siem/public/pages/case/components/connector_selector/form.tsx
deleted file mode 100644
index 5f0e498bb40562..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/components/connector_selector/form.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-/*
- * 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 { EuiFormRow } from '@elastic/eui';
-import React, { useCallback, useEffect } from 'react';
-
-import { FieldHook, getFieldValidityAndErrorMessage } from '../../../../shared_imports';
-import { ConnectorsDropdown } from '../configure_cases/connectors_dropdown';
-import { Connector } from '../../../../../../case/common/api/cases';
-
-interface ConnectorSelectorProps {
-  connectors: Connector[];
-  dataTestSubj: string;
-  field: FieldHook;
-  idAria: string;
-  defaultValue?: string;
-  disabled: boolean;
-  isLoading: boolean;
-}
-export const ConnectorSelector = ({
-  connectors,
-  dataTestSubj,
-  defaultValue,
-  field,
-  idAria,
-  disabled = false,
-  isLoading = false,
-}: ConnectorSelectorProps) => {
-  const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
-
-  useEffect(() => {
-    field.setValue(defaultValue);
-  }, [defaultValue]);
-
-  const handleContentChange = useCallback(
-    (newContent: string) => {
-      field.setValue(newContent);
-    },
-    [field]
-  );
-
-  return (
-    <EuiFormRow
-      data-test-subj={dataTestSubj}
-      describedByIds={idAria ? [idAria] : undefined}
-      error={errorMessage}
-      fullWidth
-      helpText={field.helpText}
-      isInvalid={isInvalid}
-      label={field.label}
-      labelAppend={field.labelAppend}
-    >
-      <ConnectorsDropdown
-        connectors={connectors}
-        selectedConnector={field.value as string}
-        disabled={disabled}
-        isLoading={isLoading}
-        onChange={handleContentChange}
-      />
-    </EuiFormRow>
-  );
-};
diff --git a/x-pack/plugins/siem/public/pages/case/components/create/index.test.tsx b/x-pack/plugins/siem/public/pages/case/components/create/index.test.tsx
deleted file mode 100644
index 4c2e15ddfa98a9..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/components/create/index.test.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-/*
- * 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 { mount } from 'enzyme';
-
-import { Create } from './';
-import { TestProviders } from '../../../../mock';
-import { getFormMock } from '../__mock__/form';
-import { Router, routeData, mockHistory, mockLocation } from '../__mock__/router';
-
-import { useInsertTimeline } from '../../../../components/timeline/insert_timeline_popover/use_insert_timeline';
-import { usePostCase } from '../../../../containers/case/use_post_case';
-import { useGetTags } from '../../../../containers/case/use_get_tags';
-
-jest.mock('../../../../components/timeline/insert_timeline_popover/use_insert_timeline');
-jest.mock('../../../../containers/case/use_post_case');
-import { useForm } from '../../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks';
-import { wait } from '../../../../lib/helpers';
-import { SiemPageName } from '../../../home/types';
-jest.mock(
-  '../../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form'
-);
-jest.mock('../../../../containers/case/use_get_tags');
-jest.mock(
-  '../../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/components/form_data_provider',
-  () => ({
-    FormDataProvider: ({ children }: { children: ({ tags }: { tags: string[] }) => void }) =>
-      children({ tags: ['rad', 'dude'] }),
-  })
-);
-
-export const useFormMock = useForm as jest.Mock;
-
-const useInsertTimelineMock = useInsertTimeline as jest.Mock;
-const usePostCaseMock = usePostCase as jest.Mock;
-
-const postCase = jest.fn();
-const handleCursorChange = jest.fn();
-const handleOnTimelineChange = jest.fn();
-
-const defaultInsertTimeline = {
-  cursorPosition: {
-    start: 0,
-    end: 0,
-  },
-  handleCursorChange,
-  handleOnTimelineChange,
-};
-
-const sampleTags = ['coke', 'pepsi'];
-const sampleData = {
-  description: 'what a great description',
-  tags: sampleTags,
-  title: 'what a cool title',
-};
-const defaultPostCase = {
-  isLoading: false,
-  isError: false,
-  caseData: null,
-  postCase,
-};
-describe('Create case', () => {
-  // Suppress warnings about "noSuggestions" prop
-  /* eslint-disable no-console */
-  const originalError = console.error;
-  beforeAll(() => {
-    console.error = jest.fn();
-  });
-  afterAll(() => {
-    console.error = originalError;
-  });
-  /* eslint-enable no-console */
-  const fetchTags = jest.fn();
-  const formHookMock = getFormMock(sampleData);
-  beforeEach(() => {
-    jest.resetAllMocks();
-    useInsertTimelineMock.mockImplementation(() => defaultInsertTimeline);
-    usePostCaseMock.mockImplementation(() => defaultPostCase);
-    useFormMock.mockImplementation(() => ({ form: formHookMock }));
-    jest.spyOn(routeData, 'useLocation').mockReturnValue(mockLocation);
-    (useGetTags as jest.Mock).mockImplementation(() => ({
-      tags: sampleTags,
-      fetchTags,
-    }));
-  });
-
-  it('should post case on submit click', async () => {
-    const wrapper = mount(
-      <TestProviders>
-        <Router history={mockHistory}>
-          <Create />
-        </Router>
-      </TestProviders>
-    );
-    wrapper
-      .find(`[data-test-subj="create-case-submit"]`)
-      .first()
-      .simulate('click');
-    await wait();
-    expect(postCase).toBeCalledWith(sampleData);
-  });
-
-  it('should redirect to all cases on cancel click', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <Router history={mockHistory}>
-          <Create />
-        </Router>
-      </TestProviders>
-    );
-    wrapper
-      .find(`[data-test-subj="create-case-cancel"]`)
-      .first()
-      .simulate('click');
-    expect(mockHistory.replace.mock.calls[0][0].pathname).toEqual(`/${SiemPageName.case}`);
-  });
-  it('should redirect to new case when caseData is there', () => {
-    const sampleId = '777777';
-    usePostCaseMock.mockImplementation(() => ({ ...defaultPostCase, caseData: { id: sampleId } }));
-    mount(
-      <TestProviders>
-        <Router history={mockHistory}>
-          <Create />
-        </Router>
-      </TestProviders>
-    );
-    expect(mockHistory.replace.mock.calls[0][0].pathname).toEqual(
-      `/${SiemPageName.case}/${sampleId}`
-    );
-  });
-
-  it('should render spinner when loading', () => {
-    usePostCaseMock.mockImplementation(() => ({ ...defaultPostCase, isLoading: true }));
-    const wrapper = mount(
-      <TestProviders>
-        <Router history={mockHistory}>
-          <Create />
-        </Router>
-      </TestProviders>
-    );
-    expect(wrapper.find(`[data-test-subj="create-case-loading-spinner"]`).exists()).toBeTruthy();
-  });
-  it('Tag options render with new tags added', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <Router history={mockHistory}>
-          <Create />
-        </Router>
-      </TestProviders>
-    );
-    expect(
-      wrapper
-        .find(`[data-test-subj="caseTags"] [data-test-subj="input"]`)
-        .first()
-        .prop('options')
-    ).toEqual([{ label: 'coke' }, { label: 'pepsi' }, { label: 'rad' }, { label: 'dude' }]);
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/case/components/create/index.tsx b/x-pack/plugins/siem/public/pages/case/components/create/index.tsx
deleted file mode 100644
index 6731b88572cdd3..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/components/create/index.tsx
+++ /dev/null
@@ -1,215 +0,0 @@
-/*
- * 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, { useCallback, useEffect, useState } from 'react';
-import {
-  EuiButton,
-  EuiButtonEmpty,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiLoadingSpinner,
-  EuiPanel,
-} from '@elastic/eui';
-import styled, { css } from 'styled-components';
-import { Redirect } from 'react-router-dom';
-
-import { isEqual } from 'lodash/fp';
-import { CasePostRequest } from '../../../../../../case/common/api';
-import {
-  Field,
-  Form,
-  getUseField,
-  useForm,
-  UseField,
-  FormDataProvider,
-} from '../../../../shared_imports';
-import { usePostCase } from '../../../../containers/case/use_post_case';
-import { schema } from './schema';
-import { InsertTimelinePopover } from '../../../../components/timeline/insert_timeline_popover';
-import { useInsertTimeline } from '../../../../components/timeline/insert_timeline_popover/use_insert_timeline';
-import * as i18n from '../../translations';
-import { SiemPageName } from '../../../home/types';
-import { MarkdownEditorForm } from '../../../../components/markdown_editor/form';
-import { useGetTags } from '../../../../containers/case/use_get_tags';
-
-export const CommonUseField = getUseField({ component: Field });
-
-const ContainerBig = styled.div`
-  ${({ theme }) => css`
-    margin-top: ${theme.eui.euiSizeXL};
-  `}
-`;
-
-const Container = styled.div`
-  ${({ theme }) => css`
-    margin-top: ${theme.eui.euiSize};
-  `}
-`;
-const MySpinner = styled(EuiLoadingSpinner)`
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  z-index: 99;
-`;
-
-const initialCaseValue: CasePostRequest = {
-  description: '',
-  tags: [],
-  title: '',
-};
-
-export const Create = React.memo(() => {
-  const { caseData, isLoading, postCase } = usePostCase();
-  const [isCancel, setIsCancel] = useState(false);
-  const { form } = useForm<CasePostRequest>({
-    defaultValue: initialCaseValue,
-    options: { stripEmptyFields: false },
-    schema,
-  });
-  const { tags: tagOptions } = useGetTags();
-  const [options, setOptions] = useState(
-    tagOptions.map(label => ({
-      label,
-    }))
-  );
-  useEffect(
-    () =>
-      setOptions(
-        tagOptions.map(label => ({
-          label,
-        }))
-      ),
-    [tagOptions]
-  );
-  const { handleCursorChange, handleOnTimelineChange } = useInsertTimeline<CasePostRequest>(
-    form,
-    'description'
-  );
-
-  const onSubmit = useCallback(async () => {
-    const { isValid, data } = await form.submit();
-    if (isValid) {
-      await postCase(data);
-    }
-  }, [form]);
-
-  const handleSetIsCancel = useCallback(() => {
-    setIsCancel(true);
-  }, []);
-
-  if (caseData != null && caseData.id) {
-    return <Redirect to={`/${SiemPageName.case}/${caseData.id}`} />;
-  }
-
-  if (isCancel) {
-    return <Redirect to={`/${SiemPageName.case}`} />;
-  }
-
-  return (
-    <EuiPanel>
-      {isLoading && <MySpinner data-test-subj="create-case-loading-spinner" size="xl" />}
-      <Form form={form}>
-        <CommonUseField
-          path="title"
-          componentProps={{
-            idAria: 'caseTitle',
-            'data-test-subj': 'caseTitle',
-            euiFieldProps: {
-              fullWidth: false,
-              disabled: isLoading,
-            },
-          }}
-        />
-        <Container>
-          <CommonUseField
-            path="tags"
-            componentProps={{
-              idAria: 'caseTags',
-              'data-test-subj': 'caseTags',
-              euiFieldProps: {
-                fullWidth: true,
-                placeholder: '',
-                disabled: isLoading,
-                options,
-                noSuggestions: false,
-              },
-            }}
-          />
-        </Container>
-        <ContainerBig>
-          <UseField
-            path="description"
-            component={MarkdownEditorForm}
-            componentProps={{
-              dataTestSubj: 'caseDescription',
-              idAria: 'caseDescription',
-              isDisabled: isLoading,
-              onCursorPositionUpdate: handleCursorChange,
-              topRightContent: (
-                <InsertTimelinePopover
-                  hideUntitled={true}
-                  isDisabled={isLoading}
-                  onTimelineChange={handleOnTimelineChange}
-                />
-              ),
-            }}
-          />
-        </ContainerBig>
-        <FormDataProvider pathsToWatch="tags">
-          {({ tags: anotherTags }) => {
-            const current: string[] = options.map(opt => opt.label);
-            const newOptions = anotherTags.reduce((acc: string[], item: string) => {
-              if (!acc.includes(item)) {
-                return [...acc, item];
-              }
-              return acc;
-            }, current);
-            if (!isEqual(current, newOptions)) {
-              setOptions(
-                newOptions.map((label: string) => ({
-                  label,
-                }))
-              );
-            }
-            return null;
-          }}
-        </FormDataProvider>
-      </Form>
-      <Container>
-        <EuiFlexGroup
-          alignItems="center"
-          justifyContent="flexEnd"
-          gutterSize="xs"
-          responsive={false}
-        >
-          <EuiFlexItem grow={false}>
-            <EuiButtonEmpty
-              data-test-subj="create-case-cancel"
-              size="s"
-              onClick={handleSetIsCancel}
-              iconType="cross"
-            >
-              {i18n.CANCEL}
-            </EuiButtonEmpty>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiButton
-              data-test-subj="create-case-submit"
-              fill
-              iconType="plusInCircle"
-              isDisabled={isLoading}
-              isLoading={isLoading}
-              onClick={onSubmit}
-            >
-              {i18n.CREATE_CASE}
-            </EuiButton>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </Container>
-    </EuiPanel>
-  );
-});
-
-Create.displayName = 'Create';
diff --git a/x-pack/plugins/siem/public/pages/case/components/create/schema.tsx b/x-pack/plugins/siem/public/pages/case/components/create/schema.tsx
deleted file mode 100644
index a4e0bb69165317..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/components/create/schema.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * 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 { CasePostRequest } from '../../../../../../case/common/api';
-import { FIELD_TYPES, fieldValidators, FormSchema } from '../../../../shared_imports';
-import * as i18n from '../../translations';
-
-import { OptionalFieldLabel } from './optional_field_label';
-const { emptyField } = fieldValidators;
-
-export const schemaTags = {
-  type: FIELD_TYPES.COMBO_BOX,
-  label: i18n.TAGS,
-  helpText: i18n.TAGS_HELP,
-  labelAppend: OptionalFieldLabel,
-};
-
-export const schema: FormSchema<CasePostRequest> = {
-  title: {
-    type: FIELD_TYPES.TEXT,
-    label: i18n.NAME,
-    validations: [
-      {
-        validator: emptyField(i18n.TITLE_REQUIRED),
-      },
-    ],
-  },
-  description: {
-    label: i18n.DESCRIPTION,
-    validations: [
-      {
-        validator: emptyField(i18n.DESCRIPTION_REQUIRED),
-      },
-    ],
-  },
-  tags: schemaTags,
-};
diff --git a/x-pack/plugins/siem/public/pages/case/components/edit_connector/index.test.tsx b/x-pack/plugins/siem/public/pages/case/components/edit_connector/index.test.tsx
deleted file mode 100644
index 29776360b72da1..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/components/edit_connector/index.test.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-/*
- * 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 { mount } from 'enzyme';
-
-import { EditConnector } from './index';
-import { getFormMock, useFormMock } from '../__mock__/form';
-import { TestProviders } from '../../../../mock';
-import { connectorsMock } from '../../../../containers/case/configure/mock';
-import { wait } from '../../../../lib/helpers';
-import { act } from 'react-dom/test-utils';
-jest.mock(
-  '../../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form'
-);
-const onSubmit = jest.fn();
-const defaultProps = {
-  connectors: connectorsMock,
-  disabled: false,
-  isLoading: false,
-  onSubmit,
-  selectedConnector: 'none',
-};
-
-describe('EditConnector ', () => {
-  const sampleConnector = '123';
-  const formHookMock = getFormMock({ connector: sampleConnector });
-  beforeEach(() => {
-    jest.clearAllMocks();
-    jest.resetAllMocks();
-    useFormMock.mockImplementation(() => ({ form: formHookMock }));
-  });
-  it('Renders no connector, and then edit', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <EditConnector {...defaultProps} />
-      </TestProviders>
-    );
-
-    expect(
-      wrapper
-        .find(`[data-test-subj="dropdown-connectors"]`)
-        .last()
-        .prop('disabled')
-    ).toBeTruthy();
-
-    expect(
-      wrapper
-        .find(`span[data-test-subj="dropdown-connector-no-connector"]`)
-        .last()
-        .exists()
-    ).toBeTruthy();
-    wrapper
-      .find(`[data-test-subj="connector-edit-button"]`)
-      .last()
-      .simulate('click');
-
-    expect(
-      wrapper
-        .find(`[data-test-subj="edit-connectors-submit"]`)
-        .last()
-        .exists()
-    ).toBeTruthy();
-
-    expect(
-      wrapper
-        .find(`[data-test-subj="dropdown-connectors"]`)
-        .last()
-        .prop('disabled')
-    ).toBeFalsy();
-  });
-  it('Edit external service on submit', async () => {
-    const wrapper = mount(
-      <TestProviders>
-        <EditConnector {...defaultProps} />
-      </TestProviders>
-    );
-    wrapper
-      .find(`[data-test-subj="connector-edit-button"]`)
-      .last()
-      .simulate('click');
-    expect(
-      wrapper
-        .find(`[data-test-subj="edit-connectors-submit"]`)
-        .last()
-        .exists()
-    ).toBeTruthy();
-    await act(async () => {
-      wrapper
-        .find(`[data-test-subj="edit-connectors-submit"]`)
-        .last()
-        .simulate('click');
-      await wait();
-      expect(onSubmit).toBeCalledWith(sampleConnector);
-    });
-  });
-  it('Resets selector on cancel', async () => {
-    const props = {
-      ...defaultProps,
-    };
-    const wrapper = mount(
-      <TestProviders>
-        <EditConnector {...props} />
-      </TestProviders>
-    );
-    wrapper
-      .find(`[data-test-subj="connector-edit-button"]`)
-      .last()
-      .simulate('click');
-    await act(async () => {
-      wrapper
-        .find(`[data-test-subj="edit-connectors-cancel"]`)
-        .last()
-        .simulate('click');
-      await wait();
-      wrapper.update();
-      expect(formHookMock.setFieldValue).toBeCalledWith(
-        'connector',
-        defaultProps.selectedConnector
-      );
-    });
-  });
-  it('Renders disabled button', () => {
-    const props = { ...defaultProps, disabled: true };
-    const wrapper = mount(
-      <TestProviders>
-        <EditConnector {...props} />
-      </TestProviders>
-    );
-    expect(
-      wrapper
-        .find(`[data-test-subj="connector-edit-button"]`)
-        .last()
-        .prop('disabled')
-    ).toBeTruthy();
-  });
-  it('Renders loading spinner', () => {
-    const props = { ...defaultProps, isLoading: true };
-    const wrapper = mount(
-      <TestProviders>
-        <EditConnector {...props} />
-      </TestProviders>
-    );
-    expect(
-      wrapper
-        .find(`[data-test-subj="connector-loading"]`)
-        .last()
-        .exists()
-    ).toBeTruthy();
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/case/components/edit_connector/index.tsx b/x-pack/plugins/siem/public/pages/case/components/edit_connector/index.tsx
deleted file mode 100644
index 83be8b5ad7e5a4..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/components/edit_connector/index.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-/*
- * 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, { useCallback, useState } from 'react';
-import {
-  EuiText,
-  EuiHorizontalRule,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiButton,
-  EuiButtonEmpty,
-  EuiButtonIcon,
-  EuiLoadingSpinner,
-} from '@elastic/eui';
-import styled, { css } from 'styled-components';
-import * as i18n from '../../translations';
-import { Form, UseField, useForm } from '../../../../shared_imports';
-import { schema } from './schema';
-import { ConnectorSelector } from '../connector_selector/form';
-import { Connector } from '../../../../../../case/common/api/cases';
-
-interface EditConnectorProps {
-  connectors: Connector[];
-  disabled?: boolean;
-  isLoading: boolean;
-  onSubmit: (a: string[]) => void;
-  selectedConnector: string;
-}
-
-const MyFlexGroup = styled(EuiFlexGroup)`
-  ${({ theme }) => css`
-    margin-top: ${theme.eui.euiSizeM};
-    p {
-      font-size: ${theme.eui.euiSizeM};
-    }
-  `}
-`;
-
-export const EditConnector = React.memo(
-  ({
-    connectors,
-    disabled = false,
-    isLoading,
-    onSubmit,
-    selectedConnector,
-  }: EditConnectorProps) => {
-    const { form } = useForm({
-      defaultValue: { connectors },
-      options: { stripEmptyFields: false },
-      schema,
-    });
-    const [isEditConnector, setIsEditConnector] = useState(false);
-    const handleOnClick = useCallback(() => {
-      setIsEditConnector(true);
-    }, []);
-
-    const onCancelConnector = useCallback(() => {
-      form.setFieldValue('connector', selectedConnector);
-      setIsEditConnector(false);
-    }, [form, selectedConnector]);
-
-    const onSubmitConnector = useCallback(async () => {
-      const { isValid, data: newData } = await form.submit();
-      if (isValid && newData.connector) {
-        onSubmit(newData.connector);
-        setIsEditConnector(false);
-      }
-    }, [form, onSubmit]);
-    return (
-      <EuiText>
-        <MyFlexGroup alignItems="center" gutterSize="xs" justifyContent="spaceBetween">
-          <EuiFlexItem grow={false}>
-            <h4>{i18n.CONNECTORS}</h4>
-          </EuiFlexItem>
-          {isLoading && <EuiLoadingSpinner data-test-subj="connector-loading" />}
-          {!isLoading && (
-            <EuiFlexItem data-test-subj="connector-edit" grow={false}>
-              <EuiButtonIcon
-                data-test-subj="connector-edit-button"
-                isDisabled={disabled}
-                aria-label={i18n.EDIT_CONNECTOR}
-                iconType={'pencil'}
-                onClick={handleOnClick}
-              />
-            </EuiFlexItem>
-          )}
-        </MyFlexGroup>
-        <EuiHorizontalRule margin="xs" />
-        <MyFlexGroup gutterSize="xs">
-          <EuiFlexGroup data-test-subj="edit-connectors" direction="column">
-            <EuiFlexItem>
-              <Form form={form}>
-                <EuiFlexGroup gutterSize="none" direction="row">
-                  <EuiFlexItem>
-                    <UseField
-                      path="connector"
-                      component={ConnectorSelector}
-                      componentProps={{
-                        connectors,
-                        dataTestSubj: 'caseConnectors',
-                        idAria: 'caseConnectors',
-                        isLoading,
-                        disabled: !isEditConnector,
-                        defaultValue: selectedConnector,
-                      }}
-                    />
-                  </EuiFlexItem>
-                </EuiFlexGroup>
-              </Form>
-            </EuiFlexItem>
-            {isEditConnector && (
-              <EuiFlexItem>
-                <EuiFlexGroup gutterSize="s" alignItems="center">
-                  <EuiFlexItem grow={false}>
-                    <EuiButton
-                      color="secondary"
-                      data-test-subj="edit-connectors-submit"
-                      fill
-                      iconType="save"
-                      onClick={onSubmitConnector}
-                      size="s"
-                    >
-                      {i18n.SAVE}
-                    </EuiButton>
-                  </EuiFlexItem>
-                  <EuiFlexItem grow={false}>
-                    <EuiButtonEmpty
-                      data-test-subj="edit-connectors-cancel"
-                      iconType="cross"
-                      onClick={onCancelConnector}
-                      size="s"
-                    >
-                      {i18n.CANCEL}
-                    </EuiButtonEmpty>
-                  </EuiFlexItem>
-                </EuiFlexGroup>
-              </EuiFlexItem>
-            )}
-          </EuiFlexGroup>
-        </MyFlexGroup>
-      </EuiText>
-    );
-  }
-);
-
-EditConnector.displayName = 'EditConnector';
diff --git a/x-pack/plugins/siem/public/pages/case/components/edit_connector/schema.tsx b/x-pack/plugins/siem/public/pages/case/components/edit_connector/schema.tsx
deleted file mode 100644
index 4b9008839e695c..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/components/edit_connector/schema.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-/*
- * 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 { FormSchema } from '../../../../shared_imports';
-
-export const schema: FormSchema = {
-  connector: {
-    defaultValue: 'none',
-  },
-};
diff --git a/x-pack/plugins/siem/public/pages/case/components/tag_list/index.test.tsx b/x-pack/plugins/siem/public/pages/case/components/tag_list/index.test.tsx
deleted file mode 100644
index 9ddb96a4ed295a..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/components/tag_list/index.test.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-/*
- * 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 { mount } from 'enzyme';
-import { act } from 'react-dom/test-utils';
-
-import { TagList } from './';
-import { getFormMock } from '../__mock__/form';
-import { TestProviders } from '../../../../mock';
-import { wait } from '../../../../lib/helpers';
-import { useForm } from '../../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks';
-import { useGetTags } from '../../../../containers/case/use_get_tags';
-
-jest.mock(
-  '../../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form'
-);
-jest.mock('../../../../containers/case/use_get_tags');
-jest.mock(
-  '../../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/components/form_data_provider',
-  () => ({
-    FormDataProvider: ({ children }: { children: ({ tags }: { tags: string[] }) => void }) =>
-      children({ tags: ['rad', 'dude'] }),
-  })
-);
-const onSubmit = jest.fn();
-const defaultProps = {
-  disabled: false,
-  isLoading: false,
-  onSubmit,
-  tags: [],
-};
-
-describe('TagList ', () => {
-  // Suppress warnings about "noSuggestions" prop
-  /* eslint-disable no-console */
-  const originalError = console.error;
-  beforeAll(() => {
-    console.error = jest.fn();
-  });
-  afterAll(() => {
-    console.error = originalError;
-  });
-  /* eslint-enable no-console */
-  const sampleTags = ['coke', 'pepsi'];
-  const fetchTags = jest.fn();
-  const formHookMock = getFormMock({ tags: sampleTags });
-  beforeEach(() => {
-    jest.resetAllMocks();
-    (useForm as jest.Mock).mockImplementation(() => ({ form: formHookMock }));
-
-    (useGetTags as jest.Mock).mockImplementation(() => ({
-      tags: sampleTags,
-      fetchTags,
-    }));
-  });
-  it('Renders no tags, and then edit', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <TagList {...defaultProps} />
-      </TestProviders>
-    );
-    expect(
-      wrapper
-        .find(`[data-test-subj="no-tags"]`)
-        .last()
-        .exists()
-    ).toBeTruthy();
-    wrapper
-      .find(`[data-test-subj="tag-list-edit-button"]`)
-      .last()
-      .simulate('click');
-    expect(
-      wrapper
-        .find(`[data-test-subj="no-tags"]`)
-        .last()
-        .exists()
-    ).toBeFalsy();
-    expect(
-      wrapper
-        .find(`[data-test-subj="edit-tags"]`)
-        .last()
-        .exists()
-    ).toBeTruthy();
-  });
-  it('Edit tag on submit', async () => {
-    const wrapper = mount(
-      <TestProviders>
-        <TagList {...defaultProps} />
-      </TestProviders>
-    );
-    wrapper
-      .find(`[data-test-subj="tag-list-edit-button"]`)
-      .last()
-      .simulate('click');
-    await act(async () => {
-      wrapper
-        .find(`[data-test-subj="edit-tags-submit"]`)
-        .last()
-        .simulate('click');
-      await wait();
-      expect(onSubmit).toBeCalledWith(sampleTags);
-    });
-  });
-  it('Tag options render with new tags added', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <TagList {...defaultProps} />
-      </TestProviders>
-    );
-    wrapper
-      .find(`[data-test-subj="tag-list-edit-button"]`)
-      .last()
-      .simulate('click');
-    expect(
-      wrapper
-        .find(`[data-test-subj="caseTags"] [data-test-subj="input"]`)
-        .first()
-        .prop('options')
-    ).toEqual([{ label: 'coke' }, { label: 'pepsi' }, { label: 'rad' }, { label: 'dude' }]);
-  });
-  it('Cancels on cancel', async () => {
-    const props = {
-      ...defaultProps,
-      tags: ['pepsi'],
-    };
-    const wrapper = mount(
-      <TestProviders>
-        <TagList {...props} />
-      </TestProviders>
-    );
-    expect(
-      wrapper
-        .find(`[data-test-subj="case-tag"]`)
-        .last()
-        .exists()
-    ).toBeTruthy();
-    wrapper
-      .find(`[data-test-subj="tag-list-edit-button"]`)
-      .last()
-      .simulate('click');
-    await act(async () => {
-      expect(
-        wrapper
-          .find(`[data-test-subj="case-tag"]`)
-          .last()
-          .exists()
-      ).toBeFalsy();
-      wrapper
-        .find(`[data-test-subj="edit-tags-cancel"]`)
-        .last()
-        .simulate('click');
-      await wait();
-      wrapper.update();
-      expect(
-        wrapper
-          .find(`[data-test-subj="case-tag"]`)
-          .last()
-          .exists()
-      ).toBeTruthy();
-    });
-  });
-  it('Renders disabled button', () => {
-    const props = { ...defaultProps, disabled: true };
-    const wrapper = mount(
-      <TestProviders>
-        <TagList {...props} />
-      </TestProviders>
-    );
-    expect(
-      wrapper
-        .find(`[data-test-subj="tag-list-edit-button"]`)
-        .last()
-        .prop('disabled')
-    ).toBeTruthy();
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/case/components/tag_list/index.tsx b/x-pack/plugins/siem/public/pages/case/components/tag_list/index.tsx
deleted file mode 100644
index c61feab0bab989..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/components/tag_list/index.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-/*
- * 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, { useCallback, useEffect, useState } from 'react';
-import {
-  EuiText,
-  EuiHorizontalRule,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiBadge,
-  EuiButton,
-  EuiButtonEmpty,
-  EuiButtonIcon,
-  EuiLoadingSpinner,
-} from '@elastic/eui';
-import styled, { css } from 'styled-components';
-import { isEqual } from 'lodash/fp';
-import * as i18n from './translations';
-import { Form, FormDataProvider, useForm } from '../../../../shared_imports';
-import { schema } from './schema';
-import { CommonUseField } from '../create';
-import { useGetTags } from '../../../../containers/case/use_get_tags';
-
-interface TagListProps {
-  disabled?: boolean;
-  isLoading: boolean;
-  onSubmit: (a: string[]) => void;
-  tags: string[];
-}
-
-const MyFlexGroup = styled(EuiFlexGroup)`
-  ${({ theme }) => css`
-    margin-top: ${theme.eui.euiSizeM};
-    p {
-      font-size: ${theme.eui.euiSizeM};
-    }
-  `}
-`;
-
-export const TagList = React.memo(
-  ({ disabled = false, isLoading, onSubmit, tags }: TagListProps) => {
-    const { form } = useForm({
-      defaultValue: { tags },
-      options: { stripEmptyFields: false },
-      schema,
-    });
-    const [isEditTags, setIsEditTags] = useState(false);
-
-    const onSubmitTags = useCallback(async () => {
-      const { isValid, data: newData } = await form.submit();
-      if (isValid && newData.tags) {
-        onSubmit(newData.tags);
-        setIsEditTags(false);
-      }
-    }, [form, onSubmit]);
-    const { tags: tagOptions } = useGetTags();
-    const [options, setOptions] = useState(
-      tagOptions.map(label => ({
-        label,
-      }))
-    );
-
-    useEffect(
-      () =>
-        setOptions(
-          tagOptions.map(label => ({
-            label,
-          }))
-        ),
-      [tagOptions]
-    );
-
-    return (
-      <EuiText>
-        <EuiFlexGroup alignItems="center" gutterSize="xs" justifyContent="spaceBetween">
-          <EuiFlexItem grow={false}>
-            <h4>{i18n.TAGS}</h4>
-          </EuiFlexItem>
-          {isLoading && <EuiLoadingSpinner data-test-subj="tag-list-loading" />}
-          {!isLoading && (
-            <EuiFlexItem data-test-subj="tag-list-edit" grow={false}>
-              <EuiButtonIcon
-                data-test-subj="tag-list-edit-button"
-                isDisabled={disabled}
-                aria-label={i18n.EDIT_TAGS_ARIA}
-                iconType={'pencil'}
-                onClick={setIsEditTags.bind(null, true)}
-              />
-            </EuiFlexItem>
-          )}
-        </EuiFlexGroup>
-        <EuiHorizontalRule margin="xs" />
-        <MyFlexGroup gutterSize="xs" data-test-subj="case-tags">
-          {tags.length === 0 && !isEditTags && <p data-test-subj="no-tags">{i18n.NO_TAGS}</p>}
-          {tags.length > 0 &&
-            !isEditTags &&
-            tags.map((tag, key) => (
-              <EuiFlexItem grow={false} key={`${tag}${key}`}>
-                <EuiBadge data-test-subj="case-tag" color="hollow">
-                  {tag}
-                </EuiBadge>
-              </EuiFlexItem>
-            ))}
-          {isEditTags && (
-            <EuiFlexGroup data-test-subj="edit-tags" direction="column">
-              <EuiFlexItem>
-                <Form form={form}>
-                  <CommonUseField
-                    path="tags"
-                    componentProps={{
-                      idAria: 'caseTags',
-                      'data-test-subj': 'caseTags',
-                      euiFieldProps: {
-                        fullWidth: true,
-                        placeholder: '',
-                        options,
-                        noSuggestions: false,
-                      },
-                    }}
-                  />
-                  <FormDataProvider pathsToWatch="tags">
-                    {({ tags: anotherTags }) => {
-                      const current: string[] = options.map(opt => opt.label);
-                      const newOptions = anotherTags.reduce((acc: string[], item: string) => {
-                        if (!acc.includes(item)) {
-                          return [...acc, item];
-                        }
-                        return acc;
-                      }, current);
-                      if (!isEqual(current, newOptions)) {
-                        setOptions(
-                          newOptions.map((label: string) => ({
-                            label,
-                          }))
-                        );
-                      }
-                      return null;
-                    }}
-                  </FormDataProvider>
-                </Form>
-              </EuiFlexItem>
-              <EuiFlexItem>
-                <EuiFlexGroup gutterSize="s" alignItems="center">
-                  <EuiFlexItem grow={false}>
-                    <EuiButton
-                      color="secondary"
-                      data-test-subj="edit-tags-submit"
-                      fill
-                      iconType="save"
-                      onClick={onSubmitTags}
-                      size="s"
-                    >
-                      {i18n.SAVE}
-                    </EuiButton>
-                  </EuiFlexItem>
-                  <EuiFlexItem grow={false}>
-                    <EuiButtonEmpty
-                      data-test-subj="edit-tags-cancel"
-                      iconType="cross"
-                      onClick={setIsEditTags.bind(null, false)}
-                      size="s"
-                    >
-                      {i18n.CANCEL}
-                    </EuiButtonEmpty>
-                  </EuiFlexItem>
-                </EuiFlexGroup>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          )}
-        </MyFlexGroup>
-      </EuiText>
-    );
-  }
-);
-
-TagList.displayName = 'TagList';
diff --git a/x-pack/plugins/siem/public/pages/case/components/tag_list/schema.tsx b/x-pack/plugins/siem/public/pages/case/components/tag_list/schema.tsx
deleted file mode 100644
index 50ba114de528e0..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/components/tag_list/schema.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-/*
- * 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 { FormSchema } from '../../../../shared_imports';
-import { schemaTags } from '../create/schema';
-
-export const schema: FormSchema = {
-  tags: schemaTags,
-};
diff --git a/x-pack/plugins/siem/public/pages/case/components/use_push_to_service/helpers.tsx b/x-pack/plugins/siem/public/pages/case/components/use_push_to_service/helpers.tsx
deleted file mode 100644
index 0613c40d1181d6..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/components/use_push_to_service/helpers.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-/*
- * 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 { EuiLink } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n/react';
-import React from 'react';
-
-import * as i18n from './translations';
-import { ActionLicense } from '../../../../containers/case/types';
-
-export const getLicenseError = () => ({
-  title: i18n.PUSH_DISABLE_BY_LICENSE_TITLE,
-  description: (
-    <FormattedMessage
-      defaultMessage="To open cases in external systems, you must update your license to Platinum, start a free 30-day trial, or spin up a {link} on AWS, GCP, or Azure."
-      id="xpack.siem.case.caseView.pushToServiceDisableByLicenseDescription"
-      values={{
-        link: (
-          <EuiLink href="https://www.elastic.co/cloud/" target="_blank">
-            {i18n.LINK_CLOUD_DEPLOYMENT}
-          </EuiLink>
-        ),
-      }}
-    />
-  ),
-});
-
-export const getKibanaConfigError = () => ({
-  title: i18n.PUSH_DISABLE_BY_KIBANA_CONFIG_TITLE,
-  description: (
-    <FormattedMessage
-      defaultMessage="The kibana.yml file is configured to only allow specific connectors. To enable opening a case in external systems, add .[actionTypeId] (ex: .servicenow | .jira)  to the xpack.actions.enabledActiontypes setting. For more information, see {link}."
-      id="xpack.siem.case.caseView.pushToServiceDisableByConfigDescription"
-      values={{
-        link: (
-          <EuiLink href="#" target="_blank">
-            {'coming soon...'}
-          </EuiLink>
-        ),
-      }}
-    />
-  ),
-});
-
-export const getActionLicenseError = (
-  actionLicense: ActionLicense | null
-): Array<{ title: string; description: JSX.Element }> => {
-  let errors: Array<{ title: string; description: JSX.Element }> = [];
-  if (actionLicense != null && !actionLicense.enabledInLicense) {
-    errors = [...errors, getLicenseError()];
-  }
-  if (actionLicense != null && !actionLicense.enabledInConfig) {
-    errors = [...errors, getKibanaConfigError()];
-  }
-  return errors;
-};
diff --git a/x-pack/plugins/siem/public/pages/case/components/use_push_to_service/index.test.tsx b/x-pack/plugins/siem/public/pages/case/components/use_push_to_service/index.test.tsx
deleted file mode 100644
index b19c2dbf5273a5..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/components/use_push_to_service/index.test.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-/*
- * 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.
- */
-/* eslint-disable react/display-name */
-import React from 'react';
-import { renderHook, act } from '@testing-library/react-hooks';
-import { usePushToService, ReturnUsePushToService, UsePushToService } from './';
-import { TestProviders } from '../../../../mock';
-import { usePostPushToService } from '../../../../containers/case/use_post_push_to_service';
-import { basicPush, actionLicenses } from '../../../../containers/case/mock';
-import * as i18n from './translations';
-import { useGetActionLicense } from '../../../../containers/case/use_get_action_license';
-import { getKibanaConfigError, getLicenseError } from './helpers';
-import { connectorsMock } from '../../../../containers/case/configure/mock';
-jest.mock('../../../../containers/case/use_get_action_license');
-jest.mock('../../../../containers/case/use_post_push_to_service');
-jest.mock('../../../../containers/case/configure/api');
-
-describe('usePushToService', () => {
-  const caseId = '12345';
-  const updateCase = jest.fn();
-  const postPushToService = jest.fn();
-  const mockPostPush = {
-    isLoading: false,
-    postPushToService,
-  };
-  const mockConnector = connectorsMock[0];
-  const actionLicense = actionLicenses[0];
-  const caseServices = {
-    '123': {
-      ...basicPush,
-      firstPushIndex: 0,
-      lastPushIndex: 0,
-      commentsToUpdate: [],
-      hasDataToPush: true,
-    },
-  };
-  const defaultArgs = {
-    caseConnectorId: mockConnector.id,
-    caseConnectorName: mockConnector.name,
-    caseId,
-    caseServices,
-    caseStatus: 'open',
-    connectors: connectorsMock,
-    updateCase,
-    userCanCrud: true,
-  };
-  beforeEach(() => {
-    jest.resetAllMocks();
-    (usePostPushToService as jest.Mock).mockImplementation(() => mockPostPush);
-    (useGetActionLicense as jest.Mock).mockImplementation(() => ({
-      isLoading: false,
-      actionLicense,
-    }));
-  });
-  it('push case button posts the push with correct args', async () => {
-    await act(async () => {
-      const { result, waitForNextUpdate } = renderHook<UsePushToService, ReturnUsePushToService>(
-        () => usePushToService(defaultArgs),
-        {
-          wrapper: ({ children }) => <TestProviders> {children}</TestProviders>,
-        }
-      );
-      await waitForNextUpdate();
-      result.current.pushButton.props.children.props.onClick();
-      expect(postPushToService).toBeCalledWith({
-        caseId,
-        caseServices,
-        connectorId: mockConnector.id,
-        connectorName: mockConnector.name,
-        updateCase,
-      });
-      expect(result.current.pushCallouts).toBeNull();
-    });
-  });
-  it('Displays message when user does not have premium license', async () => {
-    (useGetActionLicense as jest.Mock).mockImplementation(() => ({
-      isLoading: false,
-      actionLicense: {
-        ...actionLicense,
-        enabledInLicense: false,
-      },
-    }));
-    await act(async () => {
-      const { result, waitForNextUpdate } = renderHook<UsePushToService, ReturnUsePushToService>(
-        () => usePushToService(defaultArgs),
-        {
-          wrapper: ({ children }) => <TestProviders> {children}</TestProviders>,
-        }
-      );
-      await waitForNextUpdate();
-      const errorsMsg = result.current.pushCallouts?.props.messages;
-      expect(errorsMsg).toHaveLength(1);
-      expect(errorsMsg[0].title).toEqual(getLicenseError().title);
-    });
-  });
-  it('Displays message when user does not have case enabled in config', async () => {
-    (useGetActionLicense as jest.Mock).mockImplementation(() => ({
-      isLoading: false,
-      actionLicense: {
-        ...actionLicense,
-        enabledInConfig: false,
-      },
-    }));
-    await act(async () => {
-      const { result, waitForNextUpdate } = renderHook<UsePushToService, ReturnUsePushToService>(
-        () => usePushToService(defaultArgs),
-        {
-          wrapper: ({ children }) => <TestProviders> {children}</TestProviders>,
-        }
-      );
-      await waitForNextUpdate();
-      const errorsMsg = result.current.pushCallouts?.props.messages;
-      expect(errorsMsg).toHaveLength(1);
-      expect(errorsMsg[0].title).toEqual(getKibanaConfigError().title);
-    });
-  });
-  it('Displays message when user does not have a connector configured', async () => {
-    await act(async () => {
-      const { result, waitForNextUpdate } = renderHook<UsePushToService, ReturnUsePushToService>(
-        () =>
-          usePushToService({
-            ...defaultArgs,
-            caseConnectorId: 'none',
-          }),
-        {
-          wrapper: ({ children }) => <TestProviders> {children}</TestProviders>,
-        }
-      );
-      await waitForNextUpdate();
-      const errorsMsg = result.current.pushCallouts?.props.messages;
-      expect(errorsMsg).toHaveLength(1);
-      expect(errorsMsg[0].title).toEqual(i18n.PUSH_DISABLE_BY_NO_CASE_CONFIG_TITLE);
-    });
-  });
-  it('Displays message when case is closed', async () => {
-    await act(async () => {
-      const { result, waitForNextUpdate } = renderHook<UsePushToService, ReturnUsePushToService>(
-        () =>
-          usePushToService({
-            ...defaultArgs,
-            caseStatus: 'closed',
-          }),
-        {
-          wrapper: ({ children }) => <TestProviders> {children}</TestProviders>,
-        }
-      );
-      await waitForNextUpdate();
-      const errorsMsg = result.current.pushCallouts?.props.messages;
-      expect(errorsMsg).toHaveLength(1);
-      expect(errorsMsg[0].title).toEqual(i18n.PUSH_DISABLE_BECAUSE_CASE_CLOSED_TITLE);
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/case/components/use_push_to_service/index.tsx b/x-pack/plugins/siem/public/pages/case/components/use_push_to_service/index.tsx
deleted file mode 100644
index 7f3a951339ef1c..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/components/use_push_to_service/index.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-/*
- * 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 { EuiButton, EuiLink, EuiToolTip } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n/react';
-import React, { useCallback, useMemo } from 'react';
-
-import { Case } from '../../../../containers/case/types';
-import { useGetActionLicense } from '../../../../containers/case/use_get_action_license';
-import { usePostPushToService } from '../../../../containers/case/use_post_push_to_service';
-import { getConfigureCasesUrl } from '../../../../components/link_to';
-import { useGetUrlSearch } from '../../../../components/navigation/use_get_url_search';
-import { navTabs } from '../../../home/home_navigations';
-import { CaseCallOut } from '../callout';
-import { getLicenseError, getKibanaConfigError } from './helpers';
-import * as i18n from './translations';
-import { Connector } from '../../../../../../case/common/api/cases';
-import { CaseServices } from '../../../../containers/case/use_get_case_user_actions';
-
-export interface UsePushToService {
-  caseId: string;
-  caseStatus: string;
-  caseConnectorId: string;
-  caseConnectorName: string;
-  caseServices: CaseServices;
-  connectors: Connector[];
-  updateCase: (newCase: Case) => void;
-  userCanCrud: boolean;
-}
-
-export interface ReturnUsePushToService {
-  pushButton: JSX.Element;
-  pushCallouts: JSX.Element | null;
-}
-
-export const usePushToService = ({
-  caseConnectorId,
-  caseConnectorName,
-  caseId,
-  caseServices,
-  caseStatus,
-  connectors,
-  updateCase,
-  userCanCrud,
-}: UsePushToService): ReturnUsePushToService => {
-  const urlSearch = useGetUrlSearch(navTabs.case);
-
-  const { isLoading, postPushToService } = usePostPushToService();
-
-  const { isLoading: loadingLicense, actionLicense } = useGetActionLicense();
-
-  const handlePushToService = useCallback(() => {
-    if (caseConnectorId != null && caseConnectorId !== 'none') {
-      postPushToService({
-        caseId,
-        caseServices,
-        connectorId: caseConnectorId,
-        connectorName: caseConnectorName,
-        updateCase,
-      });
-    }
-  }, [caseId, caseServices, caseConnectorId, caseConnectorName, postPushToService, updateCase]);
-
-  const errorsMsg = useMemo(() => {
-    let errors: Array<{ title: string; description: JSX.Element }> = [];
-    if (actionLicense != null && !actionLicense.enabledInLicense) {
-      errors = [...errors, getLicenseError()];
-    }
-    if (connectors.length === 0 && !loadingLicense) {
-      errors = [
-        ...errors,
-        {
-          title: i18n.PUSH_DISABLE_BY_NO_CONFIG_TITLE,
-          description: (
-            <FormattedMessage
-              defaultMessage="To open and update cases in external systems, you must configure a {link}."
-              id="xpack.siem.case.caseView.pushToServiceDisableByNoCaseConfigDescription"
-              values={{
-                link: (
-                  <EuiLink href={getConfigureCasesUrl(urlSearch)} target="_blank">
-                    {i18n.LINK_CONNECTOR_CONFIGURE}
-                  </EuiLink>
-                ),
-              }}
-            />
-          ),
-        },
-      ];
-    } else if (caseConnectorId === 'none' && !loadingLicense) {
-      errors = [
-        ...errors,
-        {
-          title: i18n.PUSH_DISABLE_BY_NO_CASE_CONFIG_TITLE,
-          description: (
-            <FormattedMessage
-              defaultMessage="To open and update cases in external systems, you must select an external incident management system for this case."
-              id="xpack.siem.case.caseView.pushToServiceDisableByNoCaseConfigDesc"
-            />
-          ),
-        },
-      ];
-    }
-    if (caseStatus === 'closed') {
-      errors = [
-        ...errors,
-        {
-          title: i18n.PUSH_DISABLE_BECAUSE_CASE_CLOSED_TITLE,
-          description: (
-            <FormattedMessage
-              defaultMessage="Closed cases cannot be sent to external systems. Reopen the case if you want to open or update it in an external system."
-              id="xpack.siem.case.caseView.pushToServiceDisableBecauseCaseClosedDescription"
-            />
-          ),
-        },
-      ];
-    }
-    if (actionLicense != null && !actionLicense.enabledInConfig) {
-      errors = [...errors, getKibanaConfigError()];
-    }
-    return errors;
-  }, [actionLicense, caseStatus, connectors.length, caseConnectorId, loadingLicense, urlSearch]);
-
-  const pushToServiceButton = useMemo(() => {
-    return (
-      <EuiButton
-        data-test-subj="push-to-external-service"
-        fill
-        iconType="importAction"
-        onClick={handlePushToService}
-        disabled={isLoading || loadingLicense || errorsMsg.length > 0 || !userCanCrud}
-        isLoading={isLoading}
-      >
-        {caseServices[caseConnectorId]
-          ? i18n.UPDATE_THIRD(caseConnectorName)
-          : i18n.PUSH_THIRD(caseConnectorName)}
-      </EuiButton>
-    );
-  }, [
-    caseConnectorId,
-    caseConnectorName,
-    connectors,
-    errorsMsg,
-    handlePushToService,
-    isLoading,
-    loadingLicense,
-    userCanCrud,
-  ]);
-
-  const objToReturn = useMemo(() => {
-    return {
-      pushButton:
-        errorsMsg.length > 0 ? (
-          <EuiToolTip
-            position="top"
-            title={errorsMsg[0].title}
-            content={<p>{errorsMsg[0].description}</p>}
-          >
-            {pushToServiceButton}
-          </EuiToolTip>
-        ) : (
-          <>{pushToServiceButton}</>
-        ),
-      pushCallouts:
-        errorsMsg.length > 0 ? (
-          <CaseCallOut title={i18n.ERROR_PUSH_SERVICE_CALLOUT_TITLE} messages={errorsMsg} />
-        ) : null,
-    };
-  }, [errorsMsg, pushToServiceButton]);
-
-  return objToReturn;
-};
diff --git a/x-pack/plugins/siem/public/pages/case/components/user_action_tree/helpers.test.tsx b/x-pack/plugins/siem/public/pages/case/components/user_action_tree/helpers.test.tsx
deleted file mode 100644
index 6e7c2979f80bb4..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/components/user_action_tree/helpers.test.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-/*
- * 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 { basicPush, getUserAction } from '../../../../containers/case/mock';
-import { getLabelTitle } from './helpers';
-import * as i18n from '../case_view/translations';
-import { mount } from 'enzyme';
-import { connectorsMock } from '../../../../containers/case/configure/mock';
-
-describe('User action tree helpers', () => {
-  const connectors = connectorsMock;
-  it('label title generated for update tags', () => {
-    const action = getUserAction(['title'], 'update');
-    const result: string | JSX.Element = getLabelTitle({
-      action,
-      connectors,
-      field: 'tags',
-      firstPush: false,
-    });
-
-    const wrapper = mount(<>{result}</>);
-    expect(
-      wrapper
-        .find(`[data-test-subj="ua-tags-label"]`)
-        .first()
-        .text()
-    ).toEqual(` ${i18n.TAGS.toLowerCase()}`);
-
-    expect(
-      wrapper
-        .find(`[data-test-subj="ua-tag"]`)
-        .first()
-        .text()
-    ).toEqual(action.newValue);
-  });
-  it('label title generated for update title', () => {
-    const action = getUserAction(['title'], 'update');
-    const result: string | JSX.Element = getLabelTitle({
-      action,
-      connectors,
-      field: 'title',
-      firstPush: false,
-    });
-
-    expect(result).toEqual(
-      `${i18n.CHANGED_FIELD.toLowerCase()} ${i18n.CASE_NAME.toLowerCase()}  ${i18n.TO} "${
-        action.newValue
-      }"`
-    );
-  });
-  it('label title generated for update description', () => {
-    const action = getUserAction(['description'], 'update');
-    const result: string | JSX.Element = getLabelTitle({
-      action,
-      connectors,
-      field: 'description',
-      firstPush: false,
-    });
-
-    expect(result).toEqual(`${i18n.EDITED_FIELD} ${i18n.DESCRIPTION.toLowerCase()}`);
-  });
-  it('label title generated for update status to open', () => {
-    const action = { ...getUserAction(['status'], 'update'), newValue: 'open' };
-    const result: string | JSX.Element = getLabelTitle({
-      action,
-      connectors,
-      field: 'status',
-      firstPush: false,
-    });
-
-    expect(result).toEqual(`${i18n.REOPENED_CASE.toLowerCase()} ${i18n.CASE}`);
-  });
-  it('label title generated for update status to closed', () => {
-    const action = { ...getUserAction(['status'], 'update'), newValue: 'closed' };
-    const result: string | JSX.Element = getLabelTitle({
-      action,
-      connectors,
-      field: 'status',
-      firstPush: false,
-    });
-
-    expect(result).toEqual(`${i18n.CLOSED_CASE.toLowerCase()} ${i18n.CASE}`);
-  });
-  it('label title generated for update comment', () => {
-    const action = getUserAction(['comment'], 'update');
-    const result: string | JSX.Element = getLabelTitle({
-      action,
-      connectors,
-      field: 'comment',
-      firstPush: false,
-    });
-
-    expect(result).toEqual(`${i18n.EDITED_FIELD} ${i18n.COMMENT.toLowerCase()}`);
-  });
-  it('label title generated for pushed incident', () => {
-    const action = getUserAction(['pushed'], 'push-to-service');
-    const result: string | JSX.Element = getLabelTitle({
-      action,
-      connectors,
-      field: 'pushed',
-      firstPush: true,
-    });
-
-    const wrapper = mount(<>{result}</>);
-    expect(
-      wrapper
-        .find(`[data-test-subj="pushed-label"]`)
-        .first()
-        .text()
-    ).toEqual(`${i18n.PUSHED_NEW_INCIDENT} ${basicPush.connectorName}`);
-    expect(
-      wrapper
-        .find(`[data-test-subj="pushed-value"]`)
-        .first()
-        .prop('href')
-    ).toEqual(JSON.parse(action.newValue).external_url);
-  });
-  it('label title generated for needs update incident', () => {
-    const action = getUserAction(['pushed'], 'push-to-service');
-    const result: string | JSX.Element = getLabelTitle({
-      action,
-      connectors,
-      field: 'pushed',
-      firstPush: false,
-    });
-
-    const wrapper = mount(<>{result}</>);
-    expect(
-      wrapper
-        .find(`[data-test-subj="pushed-label"]`)
-        .first()
-        .text()
-    ).toEqual(`${i18n.UPDATE_INCIDENT} ${basicPush.connectorName}`);
-    expect(
-      wrapper
-        .find(`[data-test-subj="pushed-value"]`)
-        .first()
-        .prop('href')
-    ).toEqual(JSON.parse(action.newValue).external_url);
-  });
-  it('label title generated for update connector', () => {
-    const action = getUserAction(['connector_id'], 'update');
-    const result: string | JSX.Element = getLabelTitle({
-      action,
-      connectors,
-      field: 'tags',
-      firstPush: false,
-    });
-
-    const wrapper = mount(<>{result}</>);
-    expect(
-      wrapper
-        .find(`[data-test-subj="ua-tags-label"]`)
-        .first()
-        .text()
-    ).toEqual(` ${i18n.TAGS.toLowerCase()}`);
-
-    expect(
-      wrapper
-        .find(`[data-test-subj="ua-tag"]`)
-        .first()
-        .text()
-    ).toEqual(action.newValue);
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/case/components/user_action_tree/helpers.tsx b/x-pack/plugins/siem/public/pages/case/components/user_action_tree/helpers.tsx
deleted file mode 100644
index 285fa3c58c18a7..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/components/user_action_tree/helpers.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-/*
- * 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 { EuiFlexGroup, EuiFlexItem, EuiBadge, EuiLink } from '@elastic/eui';
-import React from 'react';
-
-import { CaseFullExternalService, Connector } from '../../../../../../case/common/api';
-import { CaseUserActions } from '../../../../containers/case/types';
-import * as i18n from '../case_view/translations';
-
-interface LabelTitle {
-  action: CaseUserActions;
-  connectors: Connector[];
-  field: string;
-  firstPush: boolean;
-}
-
-export const getLabelTitle = ({ action, connectors, field, firstPush }: LabelTitle) => {
-  if (field === 'tags') {
-    return getTagsLabelTitle(action);
-  } else if (field === 'title' && action.action === 'update') {
-    return `${i18n.CHANGED_FIELD.toLowerCase()} ${i18n.CASE_NAME.toLowerCase()}  ${i18n.TO} "${
-      action.newValue
-    }"`;
-  } else if (field === 'connector_id' && action.action === 'update') {
-    const newConnector = connectors.find(c => c.id === action.newValue);
-    return action.newValue != null && action.newValue !== 'none' && newConnector != null
-      ? i18n.SELECTED_THIRD_PARTY(newConnector.name)
-      : i18n.REMOVED_THIRD_PARTY;
-  } else if (field === 'description' && action.action === 'update') {
-    return `${i18n.EDITED_FIELD} ${i18n.DESCRIPTION.toLowerCase()}`;
-  } else if (field === 'status' && action.action === 'update') {
-    return `${
-      action.newValue === 'open' ? i18n.REOPENED_CASE.toLowerCase() : i18n.CLOSED_CASE.toLowerCase()
-    } ${i18n.CASE}`;
-  } else if (field === 'comment' && action.action === 'update') {
-    return `${i18n.EDITED_FIELD} ${i18n.COMMENT.toLowerCase()}`;
-  } else if (field === 'pushed' && action.action === 'push-to-service' && action.newValue != null) {
-    return getPushedServiceLabelTitle(action, firstPush);
-  }
-  return '';
-};
-
-const getTagsLabelTitle = (action: CaseUserActions) => (
-  <EuiFlexGroup alignItems="baseline" gutterSize="xs" component="span">
-    <EuiFlexItem data-test-subj="ua-tags-label">
-      {action.action === 'add' && i18n.ADDED_FIELD}
-      {action.action === 'delete' && i18n.REMOVED_FIELD} {i18n.TAGS.toLowerCase()}
-    </EuiFlexItem>
-    {action.newValue != null &&
-      action.newValue.split(',').map(tag => (
-        <EuiFlexItem grow={false} key={tag}>
-          <EuiBadge data-test-subj={`ua-tag`} color="default">
-            {tag}
-          </EuiBadge>
-        </EuiFlexItem>
-      ))}
-  </EuiFlexGroup>
-);
-
-const getPushedServiceLabelTitle = (action: CaseUserActions, firstPush: boolean) => {
-  const pushedVal = JSON.parse(action.newValue ?? '') as CaseFullExternalService;
-  return (
-    <EuiFlexGroup alignItems="baseline" gutterSize="xs" data-test-subj="pushed-service-label-title">
-      <EuiFlexItem data-test-subj="pushed-label">
-        {`${firstPush ? i18n.PUSHED_NEW_INCIDENT : i18n.UPDATE_INCIDENT} ${
-          pushedVal?.connector_name
-        }`}
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <EuiLink data-test-subj="pushed-value" href={pushedVal?.external_url} target="_blank">
-          {pushedVal?.external_title}
-        </EuiLink>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  );
-};
diff --git a/x-pack/plugins/siem/public/pages/case/components/user_action_tree/index.test.tsx b/x-pack/plugins/siem/public/pages/case/components/user_action_tree/index.test.tsx
deleted file mode 100644
index b9a94f83fded1a..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/components/user_action_tree/index.test.tsx
+++ /dev/null
@@ -1,343 +0,0 @@
-/*
- * 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 { mount } from 'enzyme';
-
-import { Router, routeData, mockHistory, mockLocation } from '../__mock__/router';
-import { getFormMock, useFormMock } from '../__mock__/form';
-import { useUpdateComment } from '../../../../containers/case/use_update_comment';
-import { basicCase, basicPush, getUserAction } from '../../../../containers/case/mock';
-import { UserActionTree } from './';
-import { TestProviders } from '../../../../mock';
-import { wait } from '../../../../lib/helpers';
-import { act } from 'react-dom/test-utils';
-
-const fetchUserActions = jest.fn();
-const onUpdateField = jest.fn();
-const updateCase = jest.fn();
-const defaultProps = {
-  caseServices: {},
-  caseUserActions: [],
-  connectors: [],
-  data: basicCase,
-  fetchUserActions,
-  isLoadingDescription: false,
-  isLoadingUserActions: false,
-  onUpdateField,
-  updateCase,
-  userCanCrud: true,
-};
-const useUpdateCommentMock = useUpdateComment as jest.Mock;
-jest.mock('../../../../containers/case/use_update_comment');
-
-const patchComment = jest.fn();
-describe('UserActionTree ', () => {
-  const sampleData = {
-    content: 'what a great comment update',
-  };
-  beforeEach(() => {
-    jest.clearAllMocks();
-    jest.resetAllMocks();
-    useUpdateCommentMock.mockImplementation(() => ({
-      isLoadingIds: [],
-      patchComment,
-    }));
-    const formHookMock = getFormMock(sampleData);
-    useFormMock.mockImplementation(() => ({ form: formHookMock }));
-    jest.spyOn(routeData, 'useLocation').mockReturnValue(mockLocation);
-  });
-
-  it('Loading spinner when user actions loading and displays fullName/username', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <Router history={mockHistory}>
-          <UserActionTree {...{ ...defaultProps, isLoadingUserActions: true }} />
-        </Router>
-      </TestProviders>
-    );
-    expect(wrapper.find(`[data-test-subj="user-actions-loading"]`).exists()).toBeTruthy();
-
-    expect(
-      wrapper
-        .find(`[data-test-subj="user-action-avatar"]`)
-        .first()
-        .prop('name')
-    ).toEqual(defaultProps.data.createdBy.fullName);
-    expect(
-      wrapper
-        .find(`[data-test-subj="user-action-title"] strong`)
-        .first()
-        .text()
-    ).toEqual(defaultProps.data.createdBy.username);
-  });
-  it('Renders service now update line with top and bottom when push is required', () => {
-    const ourActions = [
-      getUserAction(['pushed'], 'push-to-service'),
-      getUserAction(['comment'], 'update'),
-    ];
-    const props = {
-      ...defaultProps,
-      caseServices: {
-        '123': {
-          ...basicPush,
-          firstPushIndex: 0,
-          lastPushIndex: 0,
-          commentsToUpdate: [`${ourActions[ourActions.length - 1].commentId}`],
-          hasDataToPush: true,
-        },
-      },
-      caseUserActions: ourActions,
-    };
-    const wrapper = mount(
-      <TestProviders>
-        <Router history={mockHistory}>
-          <UserActionTree {...props} />
-        </Router>
-      </TestProviders>
-    );
-    expect(wrapper.find(`[data-test-subj="show-top-footer"]`).exists()).toBeTruthy();
-    expect(wrapper.find(`[data-test-subj="show-bottom-footer"]`).exists()).toBeTruthy();
-  });
-  it('Renders service now update line with top only when push is up to date', () => {
-    const ourActions = [getUserAction(['pushed'], 'push-to-service')];
-    const props = {
-      ...defaultProps,
-      caseUserActions: ourActions,
-      caseServices: {
-        '123': {
-          ...basicPush,
-          firstPushIndex: 0,
-          lastPushIndex: 0,
-          commentsToUpdate: [],
-          hasDataToPush: false,
-        },
-      },
-    };
-    const wrapper = mount(
-      <TestProviders>
-        <Router history={mockHistory}>
-          <UserActionTree {...props} />
-        </Router>
-      </TestProviders>
-    );
-    expect(wrapper.find(`[data-test-subj="show-top-footer"]`).exists()).toBeTruthy();
-    expect(wrapper.find(`[data-test-subj="show-bottom-footer"]`).exists()).toBeFalsy();
-  });
-
-  it('Outlines comment when update move to link is clicked', () => {
-    const ourActions = [getUserAction(['comment'], 'create'), getUserAction(['comment'], 'update')];
-    const props = {
-      ...defaultProps,
-      caseUserActions: ourActions,
-    };
-    const wrapper = mount(
-      <TestProviders>
-        <Router history={mockHistory}>
-          <UserActionTree {...props} />
-        </Router>
-      </TestProviders>
-    );
-    expect(
-      wrapper
-        .find(`[data-test-subj="comment-create-action"]`)
-        .first()
-        .prop('idToOutline')
-    ).toEqual('');
-    wrapper
-      .find(`[data-test-subj="comment-update-action"] [data-test-subj="move-to-link"]`)
-      .first()
-      .simulate('click');
-    expect(
-      wrapper
-        .find(`[data-test-subj="comment-create-action"]`)
-        .first()
-        .prop('idToOutline')
-    ).toEqual(ourActions[0].commentId);
-  });
-
-  it('Switches to markdown when edit is clicked and back to panel when canceled', () => {
-    const ourActions = [getUserAction(['comment'], 'create')];
-    const props = {
-      ...defaultProps,
-      caseUserActions: ourActions,
-    };
-    const wrapper = mount(
-      <TestProviders>
-        <Router history={mockHistory}>
-          <UserActionTree {...props} />
-        </Router>
-      </TestProviders>
-    );
-    expect(
-      wrapper
-        .find(
-          `[data-test-subj="user-action-${props.data.comments[0].id}"] [data-test-subj="user-action-markdown-form"]`
-        )
-        .exists()
-    ).toEqual(false);
-    wrapper
-      .find(`[data-test-subj="comment-create-action"] [data-test-subj="property-actions-ellipses"]`)
-      .first()
-      .simulate('click');
-    wrapper
-      .find(`[data-test-subj="comment-create-action"] [data-test-subj="property-actions-pencil"]`)
-      .first()
-      .simulate('click');
-    expect(
-      wrapper
-        .find(
-          `[data-test-subj="user-action-${props.data.comments[0].id}"] [data-test-subj="user-action-markdown-form"]`
-        )
-        .exists()
-    ).toEqual(true);
-    wrapper
-      .find(
-        `[data-test-subj="user-action-${props.data.comments[0].id}"] [data-test-subj="user-action-cancel-markdown"]`
-      )
-      .first()
-      .simulate('click');
-    expect(
-      wrapper
-        .find(
-          `[data-test-subj="user-action-${props.data.comments[0].id}"] [data-test-subj="user-action-markdown-form"]`
-        )
-        .exists()
-    ).toEqual(false);
-  });
-
-  it('calls update comment when comment markdown is saved', async () => {
-    const ourActions = [getUserAction(['comment'], 'create')];
-    const props = {
-      ...defaultProps,
-      caseUserActions: ourActions,
-    };
-    const wrapper = mount(
-      <TestProviders>
-        <Router history={mockHistory}>
-          <UserActionTree {...props} />
-        </Router>
-      </TestProviders>
-    );
-    wrapper
-      .find(`[data-test-subj="comment-create-action"] [data-test-subj="property-actions-ellipses"]`)
-      .first()
-      .simulate('click');
-    wrapper
-      .find(`[data-test-subj="comment-create-action"] [data-test-subj="property-actions-pencil"]`)
-      .first()
-      .simulate('click');
-    wrapper
-      .find(
-        `[data-test-subj="user-action-${props.data.comments[0].id}"] [data-test-subj="user-action-save-markdown"]`
-      )
-      .first()
-      .simulate('click');
-    await act(async () => {
-      await wait();
-      wrapper.update();
-      expect(
-        wrapper
-          .find(
-            `[data-test-subj="user-action-${props.data.comments[0].id}"] [data-test-subj="user-action-markdown-form"]`
-          )
-          .exists()
-      ).toEqual(false);
-      expect(patchComment).toBeCalledWith({
-        commentUpdate: sampleData.content,
-        caseId: props.data.id,
-        commentId: props.data.comments[0].id,
-        fetchUserActions,
-        updateCase,
-        version: props.data.comments[0].version,
-      });
-    });
-  });
-
-  it('calls update description when description markdown is saved', async () => {
-    const props = defaultProps;
-    const wrapper = mount(
-      <TestProviders>
-        <Router history={mockHistory}>
-          <UserActionTree {...props} />
-        </Router>
-      </TestProviders>
-    );
-    wrapper
-      .find(`[data-test-subj="description-action"] [data-test-subj="property-actions-ellipses"]`)
-      .first()
-      .simulate('click');
-    wrapper
-      .find(`[data-test-subj="description-action"] [data-test-subj="property-actions-pencil"]`)
-      .first()
-      .simulate('click');
-    wrapper
-      .find(
-        `[data-test-subj="user-action-description"] [data-test-subj="user-action-save-markdown"]`
-      )
-      .first()
-      .simulate('click');
-    await act(async () => {
-      await wait();
-      expect(
-        wrapper
-          .find(
-            `[data-test-subj="user-action-${props.data.id}"] [data-test-subj="user-action-markdown-form"]`
-          )
-          .exists()
-      ).toEqual(false);
-      expect(onUpdateField).toBeCalledWith('description', sampleData.content);
-    });
-  });
-
-  it('quotes', async () => {
-    const commentData = {
-      comment: '',
-    };
-    const formHookMock = getFormMock(commentData);
-    const setFieldValue = jest.fn();
-    useFormMock.mockImplementation(() => ({ form: { ...formHookMock, setFieldValue } }));
-    const props = defaultProps;
-    const wrapper = mount(
-      <TestProviders>
-        <Router history={mockHistory}>
-          <UserActionTree {...props} />
-        </Router>
-      </TestProviders>
-    );
-    wrapper
-      .find(`[data-test-subj="description-action"] [data-test-subj="property-actions-ellipses"]`)
-      .first()
-      .simulate('click');
-    wrapper
-      .find(`[data-test-subj="description-action"] [data-test-subj="property-actions-quote"]`)
-      .first()
-      .simulate('click');
-    expect(setFieldValue).toBeCalledWith('comment', `> ${props.data.description} \n`);
-  });
-  it('Outlines comment when url param is provided', () => {
-    const commentId = 'neat-comment-id';
-    const ourActions = [getUserAction(['comment'], 'create')];
-    const props = {
-      ...defaultProps,
-      caseUserActions: ourActions,
-    };
-    jest.spyOn(routeData, 'useParams').mockReturnValue({ commentId });
-    const wrapper = mount(
-      <TestProviders>
-        <Router history={mockHistory}>
-          <UserActionTree {...props} />
-        </Router>
-      </TestProviders>
-    );
-    expect(
-      wrapper
-        .find(`[data-test-subj="comment-create-action"]`)
-        .first()
-        .prop('idToOutline')
-    ).toEqual(commentId);
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/case/components/user_action_tree/index.tsx b/x-pack/plugins/siem/public/pages/case/components/user_action_tree/index.tsx
deleted file mode 100644
index 80d2c20631432f..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/components/user_action_tree/index.tsx
+++ /dev/null
@@ -1,303 +0,0 @@
-/*
- * 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 { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
-import React, { useCallback, useMemo, useRef, useState, useEffect } from 'react';
-import { useParams } from 'react-router-dom';
-import styled from 'styled-components';
-
-import * as i18n from '../case_view/translations';
-
-import { Case, CaseUserActions } from '../../../../containers/case/types';
-import { useUpdateComment } from '../../../../containers/case/use_update_comment';
-import { useCurrentUser } from '../../../../lib/kibana';
-import { AddComment } from '../add_comment';
-import { getLabelTitle } from './helpers';
-import { UserActionItem } from './user_action_item';
-import { UserActionMarkdown } from './user_action_markdown';
-import { Connector } from '../../../../../../case/common/api/cases';
-import { CaseServices } from '../../../../containers/case/use_get_case_user_actions';
-import { parseString } from '../../../../containers/case/utils';
-
-export interface UserActionTreeProps {
-  caseServices: CaseServices;
-  caseUserActions: CaseUserActions[];
-  connectors: Connector[];
-  data: Case;
-  fetchUserActions: () => void;
-  isLoadingDescription: boolean;
-  isLoadingUserActions: boolean;
-  onUpdateField: (updateKey: keyof Case, updateValue: string | string[]) => void;
-  updateCase: (newCase: Case) => void;
-  userCanCrud: boolean;
-}
-
-const MyEuiFlexGroup = styled(EuiFlexGroup)`
-  margin-bottom: 8px;
-`;
-
-const DESCRIPTION_ID = 'description';
-const NEW_ID = 'newComment';
-
-export const UserActionTree = React.memo(
-  ({
-    data: caseData,
-    caseServices,
-    caseUserActions,
-    connectors,
-    fetchUserActions,
-    isLoadingDescription,
-    isLoadingUserActions,
-    onUpdateField,
-    updateCase,
-    userCanCrud,
-  }: UserActionTreeProps) => {
-    const { commentId } = useParams();
-    const handlerTimeoutId = useRef(0);
-    const [initLoading, setInitLoading] = useState(true);
-    const [selectedOutlineCommentId, setSelectedOutlineCommentId] = useState('');
-    const { isLoadingIds, patchComment } = useUpdateComment();
-    const currentUser = useCurrentUser();
-    const [manageMarkdownEditIds, setManangeMardownEditIds] = useState<string[]>([]);
-    const [insertQuote, setInsertQuote] = useState<string | null>(null);
-    const handleManageMarkdownEditId = useCallback(
-      (id: string) => {
-        if (!manageMarkdownEditIds.includes(id)) {
-          setManangeMardownEditIds([...manageMarkdownEditIds, id]);
-        } else {
-          setManangeMardownEditIds(manageMarkdownEditIds.filter(myId => id !== myId));
-        }
-      },
-      [manageMarkdownEditIds]
-    );
-
-    const handleSaveComment = useCallback(
-      ({ id, version }: { id: string; version: string }, content: string) => {
-        patchComment({
-          caseId: caseData.id,
-          commentId: id,
-          commentUpdate: content,
-          fetchUserActions,
-          version,
-          updateCase,
-        });
-      },
-      [caseData, handleManageMarkdownEditId, patchComment, updateCase]
-    );
-
-    const handleOutlineComment = useCallback(
-      (id: string) => {
-        const moveToTarget = document.getElementById(`${id}-permLink`);
-        if (moveToTarget != null) {
-          const yOffset = -60;
-          const y = moveToTarget.getBoundingClientRect().top + window.pageYOffset + yOffset;
-          window.scrollTo({
-            top: y,
-            behavior: 'smooth',
-          });
-          if (id === 'add-comment') {
-            moveToTarget.getElementsByTagName('textarea')[0].focus();
-          }
-        }
-        window.clearTimeout(handlerTimeoutId.current);
-        setSelectedOutlineCommentId(id);
-        handlerTimeoutId.current = window.setTimeout(() => {
-          setSelectedOutlineCommentId('');
-          window.clearTimeout(handlerTimeoutId.current);
-        }, 2400);
-      },
-      [handlerTimeoutId.current]
-    );
-
-    const handleManageQuote = useCallback(
-      (quote: string) => {
-        const addCarrots = quote.replace(new RegExp('\r?\n', 'g'), '  \n> ');
-        setInsertQuote(`> ${addCarrots} \n`);
-        handleOutlineComment('add-comment');
-      },
-      [handleOutlineComment]
-    );
-
-    const handleUpdate = useCallback(
-      (newCase: Case) => {
-        updateCase(newCase);
-        fetchUserActions();
-      },
-      [fetchUserActions, updateCase]
-    );
-
-    const MarkdownDescription = useMemo(
-      () => (
-        <UserActionMarkdown
-          id={DESCRIPTION_ID}
-          content={caseData.description}
-          isEditable={manageMarkdownEditIds.includes(DESCRIPTION_ID)}
-          onSaveContent={(content: string) => {
-            onUpdateField(DESCRIPTION_ID, content);
-          }}
-          onChangeEditable={handleManageMarkdownEditId}
-        />
-      ),
-      [caseData.description, handleManageMarkdownEditId, manageMarkdownEditIds, onUpdateField]
-    );
-
-    const MarkdownNewComment = useMemo(
-      () => (
-        <AddComment
-          caseId={caseData.id}
-          disabled={!userCanCrud}
-          insertQuote={insertQuote}
-          onCommentPosted={handleUpdate}
-          onCommentSaving={handleManageMarkdownEditId.bind(null, NEW_ID)}
-          showLoading={false}
-        />
-      ),
-      [caseData.id, handleUpdate, insertQuote, userCanCrud]
-    );
-
-    useEffect(() => {
-      if (initLoading && !isLoadingUserActions && isLoadingIds.length === 0) {
-        setInitLoading(false);
-        if (commentId != null) {
-          handleOutlineComment(commentId);
-        }
-      }
-    }, [commentId, initLoading, isLoadingUserActions, isLoadingIds]);
-    return (
-      <>
-        <UserActionItem
-          createdAt={caseData.createdAt}
-          data-test-subj="description-action"
-          disabled={!userCanCrud}
-          id={DESCRIPTION_ID}
-          isEditable={manageMarkdownEditIds.includes(DESCRIPTION_ID)}
-          isLoading={isLoadingDescription}
-          labelEditAction={i18n.EDIT_DESCRIPTION}
-          labelQuoteAction={i18n.QUOTE}
-          labelTitle={<>{i18n.ADDED_DESCRIPTION}</>}
-          fullName={caseData.createdBy.fullName ?? caseData.createdBy.username ?? ''}
-          markdown={MarkdownDescription}
-          onEdit={handleManageMarkdownEditId.bind(null, DESCRIPTION_ID)}
-          onQuote={handleManageQuote.bind(null, caseData.description)}
-          username={caseData.createdBy.username ?? i18n.UNKNOWN}
-        />
-
-        {caseUserActions.map((action, index) => {
-          if (action.commentId != null && action.action === 'create') {
-            const comment = caseData.comments.find(c => c.id === action.commentId);
-            if (comment != null) {
-              return (
-                <UserActionItem
-                  key={action.actionId}
-                  createdAt={comment.createdAt}
-                  data-test-subj={`comment-create-action`}
-                  disabled={!userCanCrud}
-                  id={comment.id}
-                  idToOutline={selectedOutlineCommentId}
-                  isEditable={manageMarkdownEditIds.includes(comment.id)}
-                  isLoading={isLoadingIds.includes(comment.id)}
-                  labelEditAction={i18n.EDIT_COMMENT}
-                  labelQuoteAction={i18n.QUOTE}
-                  labelTitle={<>{i18n.ADDED_COMMENT}</>}
-                  fullName={comment.createdBy.fullName ?? comment.createdBy.username ?? ''}
-                  markdown={
-                    <UserActionMarkdown
-                      id={comment.id}
-                      content={comment.comment}
-                      isEditable={manageMarkdownEditIds.includes(comment.id)}
-                      onChangeEditable={handleManageMarkdownEditId}
-                      onSaveContent={handleSaveComment.bind(null, {
-                        id: comment.id,
-                        version: comment.version,
-                      })}
-                    />
-                  }
-                  onEdit={handleManageMarkdownEditId.bind(null, comment.id)}
-                  onQuote={handleManageQuote.bind(null, comment.comment)}
-                  outlineComment={handleOutlineComment}
-                  username={comment.createdBy.username ?? ''}
-                  updatedAt={comment.updatedAt}
-                />
-              );
-            }
-          }
-          if (action.actionField.length === 1) {
-            const myField = action.actionField[0];
-            const parsedValue = parseString(`${action.newValue}`);
-            const { firstPush, parsedConnectorId, parsedConnectorName } =
-              parsedValue != null
-                ? {
-                    firstPush: caseServices[parsedValue.connector_id].firstPushIndex === index,
-                    parsedConnectorId: parsedValue.connector_id,
-                    parsedConnectorName: parsedValue.connector_name,
-                  }
-                : {
-                    firstPush: false,
-                    parsedConnectorId: 'none',
-                    parsedConnectorName: 'none',
-                  };
-            const labelTitle: string | JSX.Element = getLabelTitle({
-              action,
-              field: myField,
-              firstPush,
-              connectors,
-            });
-
-            return (
-              <UserActionItem
-                key={action.actionId}
-                caseConnectorName={parsedConnectorName}
-                createdAt={action.actionAt}
-                data-test-subj={`${action.actionField[0]}-${action.action}-action`}
-                disabled={!userCanCrud}
-                id={action.actionId}
-                isEditable={false}
-                isLoading={false}
-                labelTitle={<>{labelTitle}</>}
-                linkId={
-                  action.action === 'update' && action.commentId != null ? action.commentId : null
-                }
-                fullName={action.actionBy.fullName ?? action.actionBy.username ?? ''}
-                outlineComment={handleOutlineComment}
-                showTopFooter={
-                  action.action === 'push-to-service' &&
-                  index === caseServices[parsedConnectorId].lastPushIndex
-                }
-                showBottomFooter={
-                  action.action === 'push-to-service' &&
-                  index === caseServices[parsedConnectorId].lastPushIndex &&
-                  caseServices[parsedConnectorId].hasDataToPush
-                }
-                username={action.actionBy.username ?? ''}
-              />
-            );
-          }
-          return null;
-        })}
-        {(isLoadingUserActions || isLoadingIds.includes(NEW_ID)) && (
-          <MyEuiFlexGroup justifyContent="center" alignItems="center">
-            <EuiFlexItem grow={false}>
-              <EuiLoadingSpinner data-test-subj="user-actions-loading" size="l" />
-            </EuiFlexItem>
-          </MyEuiFlexGroup>
-        )}
-        <UserActionItem
-          data-test-subj={`add-comment`}
-          createdAt={new Date().toISOString()}
-          disabled={!userCanCrud}
-          id={NEW_ID}
-          isEditable={true}
-          isLoading={isLoadingIds.includes(NEW_ID)}
-          fullName={currentUser != null ? currentUser.fullName ?? '' : ''}
-          markdown={MarkdownNewComment}
-          username={currentUser != null ? currentUser.username ?? '' : ''}
-        />
-      </>
-    );
-  }
-);
-
-UserActionTree.displayName = 'UserActionTree';
diff --git a/x-pack/plugins/siem/public/pages/case/components/user_list/index.test.tsx b/x-pack/plugins/siem/public/pages/case/components/user_list/index.test.tsx
deleted file mode 100644
index 51acb3b810d92e..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/components/user_list/index.test.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * 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 { UserList } from './';
-import * as i18n from '../case_view/translations';
-
-describe('UserList ', () => {
-  const title = 'Case Title';
-  const caseLink = 'http://reddit.com';
-  const user = { username: 'username', fullName: 'Full Name', email: 'testemail@elastic.co' };
-  const open = jest.fn();
-  beforeAll(() => {
-    window.open = open;
-  });
-  beforeEach(() => {
-    jest.resetAllMocks();
-  });
-  it('triggers mailto when email icon clicked', () => {
-    const wrapper = shallow(
-      <UserList
-        email={{
-          subject: i18n.EMAIL_SUBJECT(title),
-          body: i18n.EMAIL_BODY(caseLink),
-        }}
-        headline={i18n.REPORTER}
-        users={[user]}
-      />
-    );
-    wrapper.find('[data-test-subj="user-list-email-button"]').simulate('click');
-    expect(open).toBeCalledWith(
-      `mailto:${user.email}?subject=${i18n.EMAIL_SUBJECT(title)}&body=${i18n.EMAIL_BODY(caseLink)}`,
-      '_blank'
-    );
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/case/components/user_list/index.tsx b/x-pack/plugins/siem/public/pages/case/components/user_list/index.tsx
deleted file mode 100644
index 579e8e48fa147a..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/components/user_list/index.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-/*
- * 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, { useCallback } from 'react';
-import { isEmpty } from 'lodash/fp';
-
-import {
-  EuiButtonIcon,
-  EuiText,
-  EuiHorizontalRule,
-  EuiAvatar,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiLoadingSpinner,
-  EuiToolTip,
-} from '@elastic/eui';
-
-import styled, { css } from 'styled-components';
-
-import { ElasticUser } from '../../../../containers/case/types';
-import * as i18n from './translations';
-
-interface UserListProps {
-  email: {
-    subject: string;
-    body: string;
-  };
-  headline: string;
-  loading?: boolean;
-  users: ElasticUser[];
-}
-
-const MyAvatar = styled(EuiAvatar)`
-  top: -4px;
-`;
-
-const MyFlexGroup = styled(EuiFlexGroup)`
-  ${({ theme }) => css`
-    margin-top: ${theme.eui.euiSizeM};
-  `}
-`;
-
-const renderUsers = (
-  users: ElasticUser[],
-  handleSendEmail: (emailAddress: string | undefined | null) => void
-) =>
-  users.map(({ fullName, username, email }, key) => (
-    <MyFlexGroup key={key} justifyContent="spaceBetween">
-      <EuiFlexItem grow={false}>
-        <EuiFlexGroup gutterSize="xs">
-          <EuiFlexItem>
-            <MyAvatar name={fullName ? fullName : username ?? ''} />
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiToolTip position="top" content={<p>{fullName ? fullName : username ?? ''}</p>}>
-              <p>
-                <strong>
-                  <small data-test-subj="case-view-username">{username}</small>
-                </strong>
-              </p>
-            </EuiToolTip>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <EuiButtonIcon
-          data-test-subj="user-list-email-button"
-          onClick={handleSendEmail.bind(null, email)}
-          iconType="email"
-          aria-label={i18n.SEND_EMAIL_ARIA(fullName ? fullName : username ?? '')}
-          isDisabled={isEmpty(email)}
-        />
-      </EuiFlexItem>
-    </MyFlexGroup>
-  ));
-
-export const UserList = React.memo(({ email, headline, loading, users }: UserListProps) => {
-  const handleSendEmail = useCallback(
-    (emailAddress: string | undefined | null) => {
-      if (emailAddress && emailAddress != null) {
-        window.open(`mailto:${emailAddress}?subject=${email.subject}&body=${email.body}`, '_blank');
-      }
-    },
-    [email.subject]
-  );
-  return users.filter(({ username }) => username != null && username !== '').length > 0 ? (
-    <EuiText>
-      <h4>{headline}</h4>
-      <EuiHorizontalRule margin="xs" />
-      {loading && (
-        <EuiFlexGroup>
-          <EuiFlexItem>
-            <EuiLoadingSpinner />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      )}
-      {renderUsers(
-        users.filter(({ username }) => username != null && username !== ''),
-        handleSendEmail
-      )}
-    </EuiText>
-  ) : null;
-});
-
-UserList.displayName = 'UserList';
diff --git a/x-pack/plugins/siem/public/pages/case/configure_cases.tsx b/x-pack/plugins/siem/public/pages/case/configure_cases.tsx
deleted file mode 100644
index 7515efa0e1b7ae..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/configure_cases.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-/*
- * 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, { useMemo } from 'react';
-import { Redirect } from 'react-router-dom';
-
-import { getCaseUrl } from '../../components/link_to';
-import { useGetUrlSearch } from '../../components/navigation/use_get_url_search';
-import { WrapperPage } from '../../components/wrapper_page';
-import { useGetUserSavedObjectPermissions } from '../../lib/kibana';
-import { SpyRoute } from '../../utils/route/spy_routes';
-import { navTabs } from '../home/home_navigations';
-import { CaseHeaderPage } from './components/case_header_page';
-import { ConfigureCases } from './components/configure_cases';
-import { WhitePageWrapper, SectionWrapper } from './components/wrappers';
-import * as i18n from './translations';
-
-const wrapperPageStyle: Record<string, string> = {
-  paddingLeft: '0',
-  paddingRight: '0',
-  paddingBottom: '0',
-};
-
-const ConfigureCasesPageComponent: React.FC = () => {
-  const userPermissions = useGetUserSavedObjectPermissions();
-  const search = useGetUrlSearch(navTabs.case);
-
-  const backOptions = useMemo(
-    () => ({
-      href: getCaseUrl(search),
-      text: i18n.BACK_TO_ALL,
-    }),
-    [search]
-  );
-
-  if (userPermissions != null && !userPermissions.read) {
-    return <Redirect to={getCaseUrl(search)} />;
-  }
-
-  return (
-    <>
-      <WrapperPage style={wrapperPageStyle}>
-        <SectionWrapper>
-          <CaseHeaderPage title={i18n.CONFIGURE_CASES_PAGE_TITLE} backOptions={backOptions} />
-        </SectionWrapper>
-        <WhitePageWrapper>
-          <ConfigureCases userCanCrud={userPermissions?.crud ?? false} />
-        </WhitePageWrapper>
-      </WrapperPage>
-      <SpyRoute />
-    </>
-  );
-};
-
-export const ConfigureCasesPage = React.memo(ConfigureCasesPageComponent);
diff --git a/x-pack/plugins/siem/public/pages/case/create_case.tsx b/x-pack/plugins/siem/public/pages/case/create_case.tsx
deleted file mode 100644
index 06cb7fadfb8d30..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/create_case.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
- * 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, { useMemo } from 'react';
-import { Redirect } from 'react-router-dom';
-
-import { getCaseUrl } from '../../components/link_to';
-import { useGetUrlSearch } from '../../components/navigation/use_get_url_search';
-import { WrapperPage } from '../../components/wrapper_page';
-import { useGetUserSavedObjectPermissions } from '../../lib/kibana';
-import { SpyRoute } from '../../utils/route/spy_routes';
-import { navTabs } from '../home/home_navigations';
-import { CaseHeaderPage } from './components/case_header_page';
-import { Create } from './components/create';
-import * as i18n from './translations';
-
-export const CreateCasePage = React.memo(() => {
-  const userPermissions = useGetUserSavedObjectPermissions();
-  const search = useGetUrlSearch(navTabs.case);
-
-  const backOptions = useMemo(
-    () => ({
-      href: getCaseUrl(search),
-      text: i18n.BACK_TO_ALL,
-    }),
-    [search]
-  );
-
-  if (userPermissions != null && !userPermissions.crud) {
-    return <Redirect to={getCaseUrl(search)} />;
-  }
-
-  return (
-    <>
-      <WrapperPage>
-        <CaseHeaderPage backOptions={backOptions} title={i18n.CREATE_TITLE} />
-        <Create />
-      </WrapperPage>
-      <SpyRoute />
-    </>
-  );
-});
-
-CreateCasePage.displayName = 'CreateCasePage';
diff --git a/x-pack/plugins/siem/public/pages/case/index.tsx b/x-pack/plugins/siem/public/pages/case/index.tsx
deleted file mode 100644
index 124cefa726a8b1..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/index.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
- * 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 { Route, Switch } from 'react-router-dom';
-import { SiemPageName } from '../home/types';
-import { CaseDetailsPage } from './case_details';
-import { CasesPage } from './case';
-import { CreateCasePage } from './create_case';
-import { ConfigureCasesPage } from './configure_cases';
-
-const casesPagePath = `/:pageName(${SiemPageName.case})`;
-const caseDetailsPagePath = `${casesPagePath}/:detailName`;
-const caseDetailsPagePathWithCommentId = `${casesPagePath}/:detailName/:commentId`;
-const createCasePagePath = `${casesPagePath}/create`;
-const configureCasesPagePath = `${casesPagePath}/configure`;
-
-const CaseContainerComponent: React.FC = () => (
-  <Switch>
-    <Route strict exact path={casesPagePath}>
-      <CasesPage />
-    </Route>
-    <Route strict exact path={createCasePagePath}>
-      <CreateCasePage />
-    </Route>
-    <Route strict exact path={configureCasesPagePath}>
-      <ConfigureCasesPage />
-    </Route>
-    <Route strict path={caseDetailsPagePathWithCommentId}>
-      <CaseDetailsPage />
-    </Route>
-    <Route strict path={caseDetailsPagePath}>
-      <CaseDetailsPage />
-    </Route>
-  </Switch>
-);
-
-export const Case = React.memo(CaseContainerComponent);
diff --git a/x-pack/plugins/siem/public/pages/case/utils.ts b/x-pack/plugins/siem/public/pages/case/utils.ts
deleted file mode 100644
index f1aea747485e41..00000000000000
--- a/x-pack/plugins/siem/public/pages/case/utils.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
- * 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 { isEmpty } from 'lodash/fp';
-
-import { ChromeBreadcrumb } from 'src/core/public';
-
-import { getCaseDetailsUrl, getCaseUrl, getCreateCaseUrl } from '../../components/link_to';
-import { RouteSpyState } from '../../utils/route/types';
-import * as i18n from './translations';
-
-export const getBreadcrumbs = (params: RouteSpyState, search: string[]): ChromeBreadcrumb[] => {
-  const queryParameters = !isEmpty(search[0]) ? search[0] : null;
-
-  let breadcrumb = [
-    {
-      text: i18n.PAGE_TITLE,
-      href: getCaseUrl(queryParameters),
-    },
-  ];
-  if (params.detailName === 'create') {
-    breadcrumb = [
-      ...breadcrumb,
-      {
-        text: i18n.CREATE_BC_TITLE,
-        href: getCreateCaseUrl(queryParameters),
-      },
-    ];
-  } else if (params.detailName != null) {
-    breadcrumb = [
-      ...breadcrumb,
-      {
-        text: params.state?.caseTitle ?? '',
-        href: getCaseDetailsUrl({ id: params.detailName, search: queryParameters }),
-      },
-    ];
-  }
-  return breadcrumb;
-};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/activity_monitor/columns.tsx b/x-pack/plugins/siem/public/pages/detection_engine/components/activity_monitor/columns.tsx
deleted file mode 100644
index 78315d3ba79d4d..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/components/activity_monitor/columns.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-/*
- * 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.
- */
-
-/* eslint-disable react/display-name */
-
-import {
-  EuiIconTip,
-  EuiLink,
-  EuiTextColor,
-  EuiBasicTableColumn,
-  EuiTableActionsColumnType,
-} from '@elastic/eui';
-import React from 'react';
-import { getEmptyTagValue } from '../../../../components/empty_value';
-import { ColumnTypes } from './types';
-
-const actions: EuiTableActionsColumnType<ColumnTypes>['actions'] = [
-  {
-    available: (item: ColumnTypes) => item.status === 'Running',
-    description: 'Stop',
-    icon: 'stop',
-    isPrimary: true,
-    name: 'Stop',
-    onClick: () => {},
-    type: 'icon',
-  },
-  {
-    available: (item: ColumnTypes) => item.status === 'Stopped',
-    description: 'Resume',
-    icon: 'play',
-    isPrimary: true,
-    name: 'Resume',
-    onClick: () => {},
-    type: 'icon',
-  },
-];
-
-// Michael: Are we able to do custom, in-table-header filters, as shown in my wireframes?
-export const columns: Array<EuiBasicTableColumn<ColumnTypes>> = [
-  {
-    field: 'rule' as const,
-    name: 'Rule',
-    render: (value: ColumnTypes['rule'], _: ColumnTypes) => (
-      <EuiLink href={value.href}>{value.name}</EuiLink>
-    ),
-    sortable: true,
-    truncateText: true,
-  },
-  {
-    field: 'ran' as const,
-    name: 'Ran',
-    render: (value: ColumnTypes['ran'], _: ColumnTypes) => '--',
-    sortable: true,
-    truncateText: true,
-  },
-  {
-    field: 'lookedBackTo' as const,
-    name: 'Looked back to',
-    render: (value: ColumnTypes['lookedBackTo'], _: ColumnTypes) => '--',
-    sortable: true,
-    truncateText: true,
-  },
-  {
-    field: 'status' as const,
-    name: 'Status',
-    sortable: true,
-    truncateText: true,
-  },
-  {
-    field: 'response' as const,
-    name: 'Response',
-    render: (value: ColumnTypes['response'], _: ColumnTypes) => {
-      return value === undefined ? (
-        getEmptyTagValue()
-      ) : (
-        <>
-          {value === 'Fail' ? (
-            <EuiTextColor color="danger">
-              {value} <EuiIconTip content="Full fail message here." type="iInCircle" />
-            </EuiTextColor>
-          ) : (
-            <EuiTextColor color="secondary">{value}</EuiTextColor>
-          )}
-        </>
-      );
-    },
-    sortable: true,
-    truncateText: true,
-  },
-  {
-    actions,
-    width: '40px',
-  },
-];
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/activity_monitor/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/components/activity_monitor/index.tsx
deleted file mode 100644
index 31420ad07cd509..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/components/activity_monitor/index.tsx
+++ /dev/null
@@ -1,320 +0,0 @@
-/*
- * 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 { EuiBasicTable, EuiPanel, EuiSpacer } from '@elastic/eui';
-import React, { useState, useCallback } from 'react';
-import { HeaderSection } from '../../../../components/header_section';
-import {
-  UtilityBar,
-  UtilityBarAction,
-  UtilityBarGroup,
-  UtilityBarSection,
-  UtilityBarText,
-} from '../../../../components/utility_bar';
-import { columns } from './columns';
-import { ColumnTypes, PageTypes, SortTypes } from './types';
-
-export const ActivityMonitor = React.memo(() => {
-  const sampleTableData: ColumnTypes[] = [
-    {
-      id: 1,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Running',
-    },
-    {
-      id: 2,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Stopped',
-    },
-    {
-      id: 3,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Completed',
-      response: 'Fail',
-    },
-    {
-      id: 4,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Completed',
-      response: 'Success',
-    },
-    {
-      id: 5,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Completed',
-      response: 'Success',
-    },
-    {
-      id: 6,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Completed',
-      response: 'Success',
-    },
-    {
-      id: 7,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Completed',
-      response: 'Success',
-    },
-    {
-      id: 8,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Completed',
-      response: 'Success',
-    },
-    {
-      id: 9,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Completed',
-      response: 'Success',
-    },
-    {
-      id: 10,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Completed',
-      response: 'Success',
-    },
-    {
-      id: 11,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Completed',
-      response: 'Success',
-    },
-    {
-      id: 12,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Completed',
-      response: 'Success',
-    },
-    {
-      id: 13,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Completed',
-      response: 'Success',
-    },
-    {
-      id: 14,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Completed',
-      response: 'Success',
-    },
-    {
-      id: 15,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Completed',
-      response: 'Success',
-    },
-    {
-      id: 16,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Completed',
-      response: 'Success',
-    },
-    {
-      id: 17,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Completed',
-      response: 'Success',
-    },
-    {
-      id: 18,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Completed',
-      response: 'Success',
-    },
-    {
-      id: 19,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Completed',
-      response: 'Success',
-    },
-    {
-      id: 20,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Completed',
-      response: 'Success',
-    },
-    {
-      id: 21,
-      rule: {
-        href: '#/detections/rules/rule-details',
-        name: 'Automated exfiltration',
-      },
-      ran: '2019-12-28 00:00:00.000-05:00',
-      lookedBackTo: '2019-12-28 00:00:00.000-05:00',
-      status: 'Completed',
-      response: 'Success',
-    },
-  ];
-
-  const [itemsTotalState] = useState<number>(sampleTableData.length);
-  const [pageState, setPageState] = useState<PageTypes>({ index: 0, size: 20 });
-  // const [selectedState, setSelectedState] = useState<ColumnTypes[]>([]);
-  const [sortState, setSortState] = useState<SortTypes>({ field: 'ran', direction: 'desc' });
-
-  const handleChange = useCallback(
-    ({ page, sort }: { page?: PageTypes; sort?: SortTypes }) => {
-      setPageState(page!);
-      setSortState(sort!);
-    },
-    [setPageState, setSortState]
-  );
-
-  return (
-    <>
-      <EuiSpacer />
-
-      <EuiPanel>
-        <HeaderSection title="Activity monitor" />
-        <UtilityBar border>
-          <UtilityBarSection>
-            <UtilityBarGroup>
-              <UtilityBarText>{'Showing: 39 activites'}</UtilityBarText>
-            </UtilityBarGroup>
-
-            <UtilityBarGroup>
-              <UtilityBarText>{'Selected: 2 activities'}</UtilityBarText>
-
-              <UtilityBarAction iconType="stop">{'Stop selected'}</UtilityBarAction>
-            </UtilityBarGroup>
-
-            <UtilityBarGroup>
-              <UtilityBarAction iconType="cross">{'Clear 7 filters'}</UtilityBarAction>
-            </UtilityBarGroup>
-          </UtilityBarSection>
-        </UtilityBar>
-        {
-          // @ts-ignore `Columns` interface differs from EUI's `column` type and is used all over this plugin, so ignore the differences instead of refactoring a lot of code
-        }
-        <EuiBasicTable
-          columns={columns}
-          isSelectable
-          itemId="id"
-          items={sampleTableData}
-          onChange={handleChange}
-          pagination={{
-            pageIndex: pageState.index,
-            pageSize: pageState.size,
-            totalItemCount: itemsTotalState,
-            pageSizeOptions: [5, 10, 20],
-          }}
-          selection={{
-            selectable: (item: ColumnTypes) => item.status !== 'Completed',
-            selectableMessage: (selectable: boolean) =>
-              selectable ? '' : 'Completed runs cannot be acted upon',
-            onSelectionChange: (selectedItems: ColumnTypes[]) => {
-              // setSelectedState(selectedItems);
-            },
-          }}
-          sorting={{
-            sort: sortState,
-          }}
-        />
-      </EuiPanel>
-    </>
-  );
-});
-ActivityMonitor.displayName = 'ActivityMonitor';
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/detection_engine_header_page/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/components/detection_engine_header_page/index.tsx
deleted file mode 100644
index c9450739190139..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/components/detection_engine_header_page/index.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-/*
- * 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 { HeaderPage, HeaderPageProps } from '../../../../components/header_page';
-import * as i18n from './translations';
-
-const DetectionEngineHeaderPageComponent: React.FC<HeaderPageProps> = props => (
-  <HeaderPage {...props} />
-);
-
-DetectionEngineHeaderPageComponent.defaultProps = {
-  badgeOptions: {
-    beta: true,
-    text: i18n.PAGE_BADGE_LABEL,
-    tooltip: i18n.PAGE_BADGE_TOOLTIP,
-  },
-};
-
-export const DetectionEngineHeaderPage = React.memo(DetectionEngineHeaderPageComponent);
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/signals/actions.test.tsx b/x-pack/plugins/siem/public/pages/detection_engine/components/signals/actions.test.tsx
deleted file mode 100644
index ab75fcb6d6d1fe..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/components/signals/actions.test.tsx
+++ /dev/null
@@ -1,384 +0,0 @@
-/*
- * 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 sinon from 'sinon';
-import moment from 'moment';
-
-import { sendSignalToTimelineAction, determineToAndFrom } from './actions';
-import {
-  mockEcsDataWithSignal,
-  defaultTimelineProps,
-  apolloClient,
-  mockTimelineApolloResult,
-} from '../../../../mock/';
-import { CreateTimeline, UpdateTimelineLoading } from './types';
-import { Ecs } from '../../../../graphql/types';
-import { TimelineType } from '../../../../../common/types/timeline';
-
-jest.mock('apollo-client');
-
-describe('signals actions', () => {
-  const anchor = '2020-03-01T17:59:46.349Z';
-  const unix = moment(anchor).valueOf();
-  let createTimeline: CreateTimeline;
-  let updateTimelineIsLoading: UpdateTimelineLoading;
-  let clock: sinon.SinonFakeTimers;
-
-  beforeEach(() => {
-    // jest carries state between mocked implementations when using
-    // spyOn. So now we're doing all three of these.
-    // https://github.com/facebook/jest/issues/7136#issuecomment-565976599
-    jest.resetAllMocks();
-    jest.restoreAllMocks();
-    jest.clearAllMocks();
-
-    createTimeline = jest.fn() as jest.Mocked<CreateTimeline>;
-    updateTimelineIsLoading = jest.fn() as jest.Mocked<UpdateTimelineLoading>;
-
-    jest.spyOn(apolloClient, 'query').mockResolvedValue(mockTimelineApolloResult);
-
-    clock = sinon.useFakeTimers(unix);
-  });
-
-  afterEach(() => {
-    clock.restore();
-  });
-
-  describe('sendSignalToTimelineAction', () => {
-    describe('timeline id is NOT empty string and apollo client exists', () => {
-      test('it invokes updateTimelineIsLoading to set to true', async () => {
-        await sendSignalToTimelineAction({
-          apolloClient,
-          createTimeline,
-          ecsData: mockEcsDataWithSignal,
-          updateTimelineIsLoading,
-        });
-
-        expect(updateTimelineIsLoading).toHaveBeenCalledTimes(1);
-        expect(updateTimelineIsLoading).toHaveBeenCalledWith({ id: 'timeline-1', isLoading: true });
-      });
-
-      test('it invokes createTimeline with designated timeline template if "timelineTemplate" exists', async () => {
-        await sendSignalToTimelineAction({
-          apolloClient,
-          createTimeline,
-          ecsData: mockEcsDataWithSignal,
-          updateTimelineIsLoading,
-        });
-        const expected = {
-          from: 1541444305937,
-          timeline: {
-            columns: [
-              {
-                aggregatable: undefined,
-                category: undefined,
-                columnHeaderType: 'not-filtered',
-                description: undefined,
-                example: undefined,
-                id: '@timestamp',
-                placeholder: undefined,
-                type: undefined,
-                width: 190,
-              },
-              {
-                aggregatable: undefined,
-                category: undefined,
-                columnHeaderType: 'not-filtered',
-                description: undefined,
-                example: undefined,
-                id: 'message',
-                placeholder: undefined,
-                type: undefined,
-                width: 180,
-              },
-              {
-                aggregatable: undefined,
-                category: undefined,
-                columnHeaderType: 'not-filtered',
-                description: undefined,
-                example: undefined,
-                id: 'event.category',
-                placeholder: undefined,
-                type: undefined,
-                width: 180,
-              },
-              {
-                aggregatable: undefined,
-                category: undefined,
-                columnHeaderType: 'not-filtered',
-                description: undefined,
-                example: undefined,
-                id: 'host.name',
-                placeholder: undefined,
-                type: undefined,
-                width: 180,
-              },
-              {
-                aggregatable: undefined,
-                category: undefined,
-                columnHeaderType: 'not-filtered',
-                description: undefined,
-                example: undefined,
-                id: 'source.ip',
-                placeholder: undefined,
-                type: undefined,
-                width: 180,
-              },
-              {
-                aggregatable: undefined,
-                category: undefined,
-                columnHeaderType: 'not-filtered',
-                description: undefined,
-                example: undefined,
-                id: 'destination.ip',
-                placeholder: undefined,
-                type: undefined,
-                width: 180,
-              },
-              {
-                aggregatable: undefined,
-                category: undefined,
-                columnHeaderType: 'not-filtered',
-                description: undefined,
-                example: undefined,
-                id: 'user.name',
-                placeholder: undefined,
-                type: undefined,
-                width: 180,
-              },
-            ],
-            dataProviders: [],
-            dateRange: {
-              end: 1541444605937,
-              start: 1541444305937,
-            },
-            deletedEventIds: [],
-            description: 'This is a sample rule description',
-            eventIdToNoteIds: {},
-            eventType: 'all',
-            filters: [
-              {
-                $state: {
-                  store: 'appState',
-                },
-                meta: {
-                  key: 'host.name',
-                  negate: false,
-                  params: {
-                    query: 'apache',
-                  },
-                  type: 'phrase',
-                },
-                query: {
-                  match_phrase: {
-                    'host.name': 'apache',
-                  },
-                },
-              },
-            ],
-            highlightedDropAndProviderId: '',
-            historyIds: [],
-            id: '',
-            isFavorite: false,
-            isLive: false,
-            isLoading: false,
-            isSaving: false,
-            isSelectAllChecked: false,
-            itemsPerPage: 25,
-            itemsPerPageOptions: [10, 25, 50, 100],
-            kqlMode: 'filter',
-            kqlQuery: {
-              filterQuery: {
-                kuery: {
-                  expression: '',
-                  kind: 'kuery',
-                },
-                serializedQuery: '',
-              },
-              filterQueryDraft: {
-                expression: '',
-                kind: 'kuery',
-              },
-            },
-            loadingEventIds: [],
-            noteIds: [],
-            pinnedEventIds: {},
-            pinnedEventsSaveObject: {},
-            savedObjectId: null,
-            selectedEventIds: {},
-            show: true,
-            showCheckboxes: false,
-            showRowRenderers: true,
-            sort: {
-              columnId: '@timestamp',
-              sortDirection: 'desc',
-            },
-            title: '',
-            timelineType: TimelineType.default,
-            templateTimelineId: null,
-            templateTimelineVersion: null,
-            version: null,
-            width: 1100,
-          },
-          to: 1541444605937,
-          ruleNote: '# this is some markdown documentation',
-        };
-
-        expect(createTimeline).toHaveBeenCalledWith(expected);
-      });
-
-      test('it invokes createTimeline with kqlQuery.filterQuery.kuery.kind as "kuery" if not specified in returned timeline template', async () => {
-        const mockTimelineApolloResultModified = {
-          ...mockTimelineApolloResult,
-          kqlQuery: {
-            filterQuery: {
-              kuery: {
-                expression: [''],
-              },
-            },
-            filterQueryDraft: {
-              expression: [''],
-            },
-          },
-        };
-        jest.spyOn(apolloClient, 'query').mockResolvedValue(mockTimelineApolloResultModified);
-
-        await sendSignalToTimelineAction({
-          apolloClient,
-          createTimeline,
-          ecsData: mockEcsDataWithSignal,
-          updateTimelineIsLoading,
-        });
-        // @ts-ignore
-        const createTimelineArg = createTimeline.mock.calls[0][0];
-
-        expect(createTimeline).toHaveBeenCalledTimes(1);
-        expect(createTimelineArg.timeline.kqlQuery.filterQuery.kuery.kind).toEqual('kuery');
-      });
-
-      test('it invokes createTimeline with kqlQuery.filterQueryDraft.kuery.kind as "kuery" if not specified in returned timeline template', async () => {
-        const mockTimelineApolloResultModified = {
-          ...mockTimelineApolloResult,
-          kqlQuery: {
-            filterQuery: {
-              kuery: {
-                expression: [''],
-              },
-            },
-            filterQueryDraft: {
-              expression: [''],
-            },
-          },
-        };
-        jest.spyOn(apolloClient, 'query').mockResolvedValue(mockTimelineApolloResultModified);
-
-        await sendSignalToTimelineAction({
-          apolloClient,
-          createTimeline,
-          ecsData: mockEcsDataWithSignal,
-          updateTimelineIsLoading,
-        });
-        // @ts-ignore
-        const createTimelineArg = createTimeline.mock.calls[0][0];
-
-        expect(createTimeline).toHaveBeenCalledTimes(1);
-        expect(createTimelineArg.timeline.kqlQuery.filterQueryDraft.kind).toEqual('kuery');
-      });
-
-      test('it invokes createTimeline with default timeline if apolloClient throws', async () => {
-        jest.spyOn(apolloClient, 'query').mockImplementation(() => {
-          throw new Error('Test error');
-        });
-
-        await sendSignalToTimelineAction({
-          apolloClient,
-          createTimeline,
-          ecsData: mockEcsDataWithSignal,
-          updateTimelineIsLoading,
-        });
-
-        expect(updateTimelineIsLoading).toHaveBeenCalledWith({ id: 'timeline-1', isLoading: true });
-        expect(updateTimelineIsLoading).toHaveBeenCalledWith({
-          id: 'timeline-1',
-          isLoading: false,
-        });
-        expect(createTimeline).toHaveBeenCalledTimes(1);
-        expect(createTimeline).toHaveBeenCalledWith(defaultTimelineProps);
-      });
-    });
-
-    describe('timelineId is empty string', () => {
-      test('it invokes createTimeline with timelineDefaults', async () => {
-        const ecsDataMock: Ecs = {
-          ...mockEcsDataWithSignal,
-          signal: {
-            rule: {
-              ...mockEcsDataWithSignal.signal?.rule!,
-              timeline_id: null,
-            },
-          },
-        };
-
-        await sendSignalToTimelineAction({
-          apolloClient,
-          createTimeline,
-          ecsData: ecsDataMock,
-          updateTimelineIsLoading,
-        });
-
-        expect(updateTimelineIsLoading).not.toHaveBeenCalled();
-        expect(createTimeline).toHaveBeenCalledTimes(1);
-        expect(createTimeline).toHaveBeenCalledWith(defaultTimelineProps);
-      });
-    });
-
-    describe('apolloClient is not defined', () => {
-      test('it invokes createTimeline with timelineDefaults', async () => {
-        const ecsDataMock: Ecs = {
-          ...mockEcsDataWithSignal,
-          signal: {
-            rule: {
-              ...mockEcsDataWithSignal.signal?.rule!,
-              timeline_id: [''],
-            },
-          },
-        };
-
-        await sendSignalToTimelineAction({
-          createTimeline,
-          ecsData: ecsDataMock,
-          updateTimelineIsLoading,
-        });
-
-        expect(updateTimelineIsLoading).not.toHaveBeenCalled();
-        expect(createTimeline).toHaveBeenCalledTimes(1);
-        expect(createTimeline).toHaveBeenCalledWith(defaultTimelineProps);
-      });
-    });
-  });
-
-  describe('determineToAndFrom', () => {
-    test('it uses ecs.Data.timestamp if one is provided', () => {
-      const ecsDataMock: Ecs = {
-        ...mockEcsDataWithSignal,
-        timestamp: '2020-03-20T17:59:46.349Z',
-      };
-      const result = determineToAndFrom({ ecsData: ecsDataMock });
-
-      expect(result.from).toEqual(1584726886349);
-      expect(result.to).toEqual(1584727186349);
-    });
-
-    test('it uses current time timestamp if ecsData.timestamp is not provided', () => {
-      const { timestamp, ...ecsDataMock } = {
-        ...mockEcsDataWithSignal,
-      };
-      const result = determineToAndFrom({ ecsData: ecsDataMock });
-
-      expect(result.from).toEqual(1583085286349);
-      expect(result.to).toEqual(1583085586349);
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/signals/actions.tsx b/x-pack/plugins/siem/public/pages/detection_engine/components/signals/actions.tsx
deleted file mode 100644
index c71ede32d8403e..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/components/signals/actions.tsx
+++ /dev/null
@@ -1,210 +0,0 @@
-/*
- * 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 dateMath from '@elastic/datemath';
-import { getOr, isEmpty } from 'lodash/fp';
-import moment from 'moment';
-
-import { updateSignalStatus } from '../../../../containers/detection_engine/signals/api';
-import { SendSignalToTimelineActionProps, UpdateSignalStatusActionProps } from './types';
-import { TimelineNonEcsData, GetOneTimeline, TimelineResult, Ecs } from '../../../../graphql/types';
-import { oneTimelineQuery } from '../../../../containers/timeline/one/index.gql_query';
-import {
-  omitTypenameInTimeline,
-  formatTimelineResultToModel,
-} from '../../../../components/open_timeline/helpers';
-import { convertKueryToElasticSearchQuery } from '../../../../lib/keury';
-import { timelineDefaults } from '../../../../store/timeline/defaults';
-import {
-  replaceTemplateFieldFromQuery,
-  replaceTemplateFieldFromMatchFilters,
-  replaceTemplateFieldFromDataProviders,
-} from './helpers';
-
-export const getUpdateSignalsQuery = (eventIds: Readonly<string[]>) => {
-  return {
-    query: {
-      bool: {
-        filter: {
-          terms: {
-            _id: [...eventIds],
-          },
-        },
-      },
-    },
-  };
-};
-
-export const getFilterAndRuleBounds = (
-  data: TimelineNonEcsData[][]
-): [string[], number, number] => {
-  const stringFilter = data?.[0].filter(d => d.field === 'signal.rule.filters')?.[0]?.value ?? [];
-
-  const eventTimes = data
-    .flatMap(signal => signal.filter(d => d.field === 'signal.original_time')?.[0]?.value ?? [])
-    .map(d => moment(d));
-
-  return [stringFilter, moment.min(eventTimes).valueOf(), moment.max(eventTimes).valueOf()];
-};
-
-export const updateSignalStatusAction = async ({
-  query,
-  signalIds,
-  status,
-  setEventsLoading,
-  setEventsDeleted,
-}: UpdateSignalStatusActionProps) => {
-  try {
-    setEventsLoading({ eventIds: signalIds, isLoading: true });
-
-    const queryObject = query ? { query: JSON.parse(query) } : getUpdateSignalsQuery(signalIds);
-
-    await updateSignalStatus({ query: queryObject, status });
-    // TODO: Only delete those that were successfully updated from updatedRules
-    setEventsDeleted({ eventIds: signalIds, isDeleted: true });
-  } catch (e) {
-    // TODO: Show error toasts
-  } finally {
-    setEventsLoading({ eventIds: signalIds, isLoading: false });
-  }
-};
-
-export const determineToAndFrom = ({ ecsData }: { ecsData: Ecs }) => {
-  const ellapsedTimeRule = moment.duration(
-    moment().diff(
-      dateMath.parse(ecsData.signal?.rule?.from != null ? ecsData.signal?.rule?.from[0] : 'now-0s')
-    )
-  );
-
-  const from = moment(ecsData.timestamp ?? new Date())
-    .subtract(ellapsedTimeRule)
-    .valueOf();
-  const to = moment(ecsData.timestamp ?? new Date()).valueOf();
-
-  return { to, from };
-};
-
-export const sendSignalToTimelineAction = async ({
-  apolloClient,
-  createTimeline,
-  ecsData,
-  updateTimelineIsLoading,
-}: SendSignalToTimelineActionProps) => {
-  let openSignalInBasicTimeline = true;
-  const noteContent = ecsData.signal?.rule?.note != null ? ecsData.signal?.rule?.note[0] : '';
-  const timelineId =
-    ecsData.signal?.rule?.timeline_id != null ? ecsData.signal?.rule?.timeline_id[0] : '';
-  const { to, from } = determineToAndFrom({ ecsData });
-
-  if (timelineId !== '' && apolloClient != null) {
-    try {
-      updateTimelineIsLoading({ id: 'timeline-1', isLoading: true });
-      const responseTimeline = await apolloClient.query<
-        GetOneTimeline.Query,
-        GetOneTimeline.Variables
-      >({
-        query: oneTimelineQuery,
-        fetchPolicy: 'no-cache',
-        variables: {
-          id: timelineId,
-        },
-      });
-      const resultingTimeline: TimelineResult = getOr({}, 'data.getOneTimeline', responseTimeline);
-
-      if (!isEmpty(resultingTimeline)) {
-        const timelineTemplate: TimelineResult = omitTypenameInTimeline(resultingTimeline);
-        openSignalInBasicTimeline = false;
-        const { timeline } = formatTimelineResultToModel(timelineTemplate, true);
-        const query = replaceTemplateFieldFromQuery(
-          timeline.kqlQuery?.filterQuery?.kuery?.expression ?? '',
-          ecsData
-        );
-        const filters = replaceTemplateFieldFromMatchFilters(timeline.filters ?? [], ecsData);
-        const dataProviders = replaceTemplateFieldFromDataProviders(
-          timeline.dataProviders ?? [],
-          ecsData
-        );
-        createTimeline({
-          from,
-          timeline: {
-            ...timeline,
-            dataProviders,
-            eventType: 'all',
-            filters,
-            dateRange: {
-              start: from,
-              end: to,
-            },
-            kqlQuery: {
-              filterQuery: {
-                kuery: {
-                  kind: timeline.kqlQuery?.filterQuery?.kuery?.kind ?? 'kuery',
-                  expression: query,
-                },
-                serializedQuery: convertKueryToElasticSearchQuery(query),
-              },
-              filterQueryDraft: {
-                kind: timeline.kqlQuery?.filterQuery?.kuery?.kind ?? 'kuery',
-                expression: query,
-              },
-            },
-            show: true,
-          },
-          to,
-          ruleNote: noteContent,
-        });
-      }
-    } catch {
-      openSignalInBasicTimeline = true;
-      updateTimelineIsLoading({ id: 'timeline-1', isLoading: false });
-    }
-  }
-
-  if (openSignalInBasicTimeline) {
-    createTimeline({
-      from,
-      timeline: {
-        ...timelineDefaults,
-        dataProviders: [
-          {
-            and: [],
-            id: `send-signal-to-timeline-action-default-draggable-event-details-value-formatted-field-value-timeline-1-signal-id-${ecsData._id}`,
-            name: ecsData._id,
-            enabled: true,
-            excluded: false,
-            kqlQuery: '',
-            queryMatch: {
-              field: '_id',
-              value: ecsData._id,
-              operator: ':',
-            },
-          },
-        ],
-        id: 'timeline-1',
-        dateRange: {
-          start: from,
-          end: to,
-        },
-        eventType: 'all',
-        kqlQuery: {
-          filterQuery: {
-            kuery: {
-              kind: 'kuery',
-              expression: '',
-            },
-            serializedQuery: '',
-          },
-          filterQueryDraft: {
-            kind: 'kuery',
-            expression: '',
-          },
-        },
-      },
-      to,
-      ruleNote: noteContent,
-    });
-  }
-};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/signals/helpers.test.ts b/x-pack/plugins/siem/public/pages/detection_engine/components/signals/helpers.test.ts
deleted file mode 100644
index a948d2b940b0c9..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/components/signals/helpers.test.ts
+++ /dev/null
@@ -1,273 +0,0 @@
-/*
- * 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 {
-  getStringArray,
-  replaceTemplateFieldFromQuery,
-  replaceTemplateFieldFromMatchFilters,
-  reformatDataProviderWithNewValue,
-} from './helpers';
-import { mockEcsData } from '../../../../mock/mock_ecs';
-import { Filter } from '../../../../../../../../src/plugins/data/public';
-import { DataProvider } from '../../../../components/timeline/data_providers/data_provider';
-import { mockDataProviders } from '../../../../components/timeline/data_providers/mock/mock_data_providers';
-import { cloneDeep } from 'lodash/fp';
-
-describe('helpers', () => {
-  let mockEcsDataClone = cloneDeep(mockEcsData);
-  beforeEach(() => {
-    mockEcsDataClone = cloneDeep(mockEcsData);
-  });
-  describe('getStringOrStringArray', () => {
-    test('it should correctly return a string array', () => {
-      const value = getStringArray('x', {
-        x: 'The nickname of the developer we all :heart:',
-      });
-      expect(value).toEqual(['The nickname of the developer we all :heart:']);
-    });
-
-    test('it should correctly return a string array with a single element', () => {
-      const value = getStringArray('x', {
-        x: ['The nickname of the developer we all :heart:'],
-      });
-      expect(value).toEqual(['The nickname of the developer we all :heart:']);
-    });
-
-    test('it should correctly return a string array with two elements of strings', () => {
-      const value = getStringArray('x', {
-        x: ['The nickname of the developer we all :heart:', 'We are all made of stars'],
-      });
-      expect(value).toEqual([
-        'The nickname of the developer we all :heart:',
-        'We are all made of stars',
-      ]);
-    });
-
-    test('it should correctly return a string array with deep elements', () => {
-      const value = getStringArray('x.y.z', {
-        x: { y: { z: 'zed' } },
-      });
-      expect(value).toEqual(['zed']);
-    });
-
-    test('it should correctly return a string array with a non-existent value', () => {
-      const value = getStringArray('non.existent', {
-        x: { y: { z: 'zed' } },
-      });
-      expect(value).toEqual([]);
-    });
-
-    test('it should trace an error if the value is not a string', () => {
-      const mockConsole: Console = ({ trace: jest.fn() } as unknown) as Console;
-      const value = getStringArray('a', { a: 5 }, mockConsole);
-      expect(value).toEqual([]);
-      expect(
-        mockConsole.trace
-      ).toHaveBeenCalledWith(
-        'Data type that is not a string or string array detected:',
-        5,
-        'when trying to access field:',
-        'a',
-        'from data object of:',
-        { a: 5 }
-      );
-    });
-
-    test('it should trace an error if the value is an array of mixed values', () => {
-      const mockConsole: Console = ({ trace: jest.fn() } as unknown) as Console;
-      const value = getStringArray('a', { a: ['hi', 5] }, mockConsole);
-      expect(value).toEqual([]);
-      expect(
-        mockConsole.trace
-      ).toHaveBeenCalledWith(
-        'Data type that is not a string or string array detected:',
-        ['hi', 5],
-        'when trying to access field:',
-        'a',
-        'from data object of:',
-        { a: ['hi', 5] }
-      );
-    });
-  });
-
-  describe('replaceTemplateFieldFromQuery', () => {
-    test('given an empty query string this returns an empty query string', () => {
-      const replacement = replaceTemplateFieldFromQuery('', mockEcsDataClone[0]);
-      expect(replacement).toEqual('');
-    });
-
-    test('given a query string with spaces this returns an empty query string', () => {
-      const replacement = replaceTemplateFieldFromQuery('    ', mockEcsDataClone[0]);
-      expect(replacement).toEqual('');
-    });
-
-    test('it should replace a query with a template value such as apache from a mock template', () => {
-      const replacement = replaceTemplateFieldFromQuery(
-        'host.name: placeholdertext',
-        mockEcsDataClone[0]
-      );
-      expect(replacement).toEqual('host.name: apache');
-    });
-
-    test('it should replace a template field with an ECS value that is not an array', () => {
-      mockEcsDataClone[0].host!.name = ('apache' as unknown) as string[]; // very unsafe cast for this test case
-      const replacement = replaceTemplateFieldFromQuery('host.name: *', mockEcsDataClone[0]);
-      expect(replacement).toEqual('host.name: *');
-    });
-
-    test('it should NOT replace a query with a template value that is not part of the template fields array', () => {
-      const replacement = replaceTemplateFieldFromQuery(
-        'user.id: placeholdertext',
-        mockEcsDataClone[0]
-      );
-      expect(replacement).toEqual('user.id: placeholdertext');
-    });
-  });
-
-  describe('replaceTemplateFieldFromMatchFilters', () => {
-    test('given an empty query filter this will return an empty filter', () => {
-      const replacement = replaceTemplateFieldFromMatchFilters([], mockEcsDataClone[0]);
-      expect(replacement).toEqual([]);
-    });
-
-    test('given a query filter this will return that filter with the placeholder replaced', () => {
-      const filters: Filter[] = [
-        {
-          meta: {
-            type: 'phrase',
-            key: 'host.name',
-            alias: 'alias',
-            disabled: false,
-            negate: false,
-            params: { query: 'Braden' },
-          },
-          query: { match_phrase: { 'host.name': 'Braden' } },
-        },
-      ];
-      const replacement = replaceTemplateFieldFromMatchFilters(filters, mockEcsDataClone[0]);
-      const expected: Filter[] = [
-        {
-          meta: {
-            type: 'phrase',
-            key: 'host.name',
-            alias: 'alias',
-            disabled: false,
-            negate: false,
-            params: { query: 'apache' },
-          },
-          query: { match_phrase: { 'host.name': 'apache' } },
-        },
-      ];
-      expect(replacement).toEqual(expected);
-    });
-
-    test('given a query filter with a value not in the templateFields, this will NOT replace the placeholder value', () => {
-      const filters: Filter[] = [
-        {
-          meta: {
-            type: 'phrase',
-            key: 'user.id',
-            alias: 'alias',
-            disabled: false,
-            negate: false,
-            params: { query: 'Evan' },
-          },
-          query: { match_phrase: { 'user.id': 'Evan' } },
-        },
-      ];
-      const replacement = replaceTemplateFieldFromMatchFilters(filters, mockEcsDataClone[0]);
-      const expected: Filter[] = [
-        {
-          meta: {
-            type: 'phrase',
-            key: 'user.id',
-            alias: 'alias',
-            disabled: false,
-            negate: false,
-            params: { query: 'Evan' },
-          },
-          query: { match_phrase: { 'user.id': 'Evan' } },
-        },
-      ];
-      expect(replacement).toEqual(expected);
-    });
-  });
-
-  describe('reformatDataProviderWithNewValue', () => {
-    test('it should replace a query with a template value such as apache from a mock data provider', () => {
-      const mockDataProvider: DataProvider = mockDataProviders[0];
-      mockDataProvider.queryMatch.field = 'host.name';
-      mockDataProvider.id = 'Braden';
-      mockDataProvider.name = 'Braden';
-      mockDataProvider.queryMatch.value = 'Braden';
-      const replacement = reformatDataProviderWithNewValue(mockDataProvider, mockEcsDataClone[0]);
-      expect(replacement).toEqual({
-        id: 'apache',
-        name: 'apache',
-        enabled: true,
-        excluded: false,
-        kqlQuery: '',
-        queryMatch: {
-          field: 'host.name',
-          value: 'apache',
-          operator: ':',
-          displayField: undefined,
-          displayValue: undefined,
-        },
-        and: [],
-      });
-    });
-
-    test('it should replace a query with a template value such as apache from a mock data provider using a string in the data provider', () => {
-      mockEcsDataClone[0].host!.name = ('apache' as unknown) as string[]; // very unsafe cast for this test case
-      const mockDataProvider: DataProvider = mockDataProviders[0];
-      mockDataProvider.queryMatch.field = 'host.name';
-      mockDataProvider.id = 'Braden';
-      mockDataProvider.name = 'Braden';
-      mockDataProvider.queryMatch.value = 'Braden';
-      const replacement = reformatDataProviderWithNewValue(mockDataProvider, mockEcsDataClone[0]);
-      expect(replacement).toEqual({
-        id: 'apache',
-        name: 'apache',
-        enabled: true,
-        excluded: false,
-        kqlQuery: '',
-        queryMatch: {
-          field: 'host.name',
-          value: 'apache',
-          operator: ':',
-          displayField: undefined,
-          displayValue: undefined,
-        },
-        and: [],
-      });
-    });
-
-    test('it should NOT replace a query with a template value that is not part of a template such as user.id', () => {
-      const mockDataProvider: DataProvider = mockDataProviders[0];
-      mockDataProvider.queryMatch.field = 'user.id';
-      mockDataProvider.id = 'my-id';
-      mockDataProvider.name = 'Rebecca';
-      mockDataProvider.queryMatch.value = 'Rebecca';
-      const replacement = reformatDataProviderWithNewValue(mockDataProvider, mockEcsDataClone[0]);
-      expect(replacement).toEqual({
-        id: 'my-id',
-        name: 'Rebecca',
-        enabled: true,
-        excluded: false,
-        kqlQuery: '',
-        queryMatch: {
-          field: 'user.id',
-          value: 'Rebecca',
-          operator: ':',
-          displayField: undefined,
-          displayValue: undefined,
-        },
-        and: [],
-      });
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/signals/helpers.ts b/x-pack/plugins/siem/public/pages/detection_engine/components/signals/helpers.ts
deleted file mode 100644
index 3fa2da37046b00..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/components/signals/helpers.ts
+++ /dev/null
@@ -1,165 +0,0 @@
-/*
- * 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 { get, isEmpty } from 'lodash/fp';
-import { Filter, esKuery, KueryNode } from '../../../../../../../../src/plugins/data/public';
-import {
-  DataProvider,
-  DataProvidersAnd,
-} from '../../../../components/timeline/data_providers/data_provider';
-import { Ecs } from '../../../../graphql/types';
-
-interface FindValueToChangeInQuery {
-  field: string;
-  valueToChange: string;
-}
-
-/**
- * Fields that will be replaced with the template strings from a a saved timeline template.
- * This is used for the signals detection engine feature when you save a timeline template
- * and are the fields you can replace when creating a template.
- */
-const templateFields = [
-  'host.name',
-  'host.hostname',
-  'host.domain',
-  'host.id',
-  'host.ip',
-  'client.ip',
-  'destination.ip',
-  'server.ip',
-  'source.ip',
-  'network.community_id',
-  'user.name',
-  'process.name',
-];
-
-/**
- * This will return an unknown as a string array if it exists from an unknown data type and a string
- * that represents the path within the data object the same as lodash's "get". If the value is non-existent
- * we will return an empty array. If it is a non string value then this will log a trace to the console
- * that it encountered an error and return an empty array.
- * @param field string of the field to access
- * @param data The unknown data that is typically a ECS value to get the value
- * @param localConsole The local console which can be sent in to make this pure (for tests) or use the default console
- */
-export const getStringArray = (field: string, data: unknown, localConsole = console): string[] => {
-  const value: unknown | undefined = get(field, data);
-  if (value == null) {
-    return [];
-  } else if (typeof value === 'string') {
-    return [value];
-  } else if (Array.isArray(value) && value.every(element => typeof element === 'string')) {
-    return value;
-  } else {
-    localConsole.trace(
-      'Data type that is not a string or string array detected:',
-      value,
-      'when trying to access field:',
-      field,
-      'from data object of:',
-      data
-    );
-    return [];
-  }
-};
-
-export const findValueToChangeInQuery = (
-  kueryNode: KueryNode,
-  valueToChange: FindValueToChangeInQuery[] = []
-): FindValueToChangeInQuery[] => {
-  let localValueToChange = valueToChange;
-  if (kueryNode.function === 'is' && templateFields.includes(kueryNode.arguments[0].value)) {
-    localValueToChange = [
-      ...localValueToChange,
-      {
-        field: kueryNode.arguments[0].value,
-        valueToChange: kueryNode.arguments[1].value,
-      },
-    ];
-  }
-  return kueryNode.arguments.reduce(
-    (addValueToChange: FindValueToChangeInQuery[], ast: KueryNode) => {
-      if (ast.function === 'is' && templateFields.includes(ast.arguments[0].value)) {
-        return [
-          ...addValueToChange,
-          {
-            field: ast.arguments[0].value,
-            valueToChange: ast.arguments[1].value,
-          },
-        ];
-      }
-      if (ast.arguments) {
-        return findValueToChangeInQuery(ast, addValueToChange);
-      }
-      return addValueToChange;
-    },
-    localValueToChange
-  );
-};
-
-export const replaceTemplateFieldFromQuery = (query: string, ecsData: Ecs): string => {
-  if (query.trim() !== '') {
-    const valueToChange = findValueToChangeInQuery(esKuery.fromKueryExpression(query));
-    return valueToChange.reduce((newQuery, vtc) => {
-      const newValue = getStringArray(vtc.field, ecsData);
-      if (newValue.length) {
-        return newQuery.replace(vtc.valueToChange, newValue[0]);
-      } else {
-        return newQuery;
-      }
-    }, query);
-  } else {
-    return '';
-  }
-};
-
-export const replaceTemplateFieldFromMatchFilters = (filters: Filter[], ecsData: Ecs): Filter[] =>
-  filters.map(filter => {
-    if (
-      filter.meta.type === 'phrase' &&
-      filter.meta.key != null &&
-      templateFields.includes(filter.meta.key)
-    ) {
-      const newValue = getStringArray(filter.meta.key, ecsData);
-      if (newValue.length) {
-        filter.meta.params = { query: newValue[0] };
-        filter.query = { match_phrase: { [filter.meta.key]: newValue[0] } };
-      }
-    }
-    return filter;
-  });
-
-export const reformatDataProviderWithNewValue = <T extends DataProvider | DataProvidersAnd>(
-  dataProvider: T,
-  ecsData: Ecs
-): T => {
-  if (templateFields.includes(dataProvider.queryMatch.field)) {
-    const newValue = getStringArray(dataProvider.queryMatch.field, ecsData);
-    if (newValue.length) {
-      dataProvider.id = dataProvider.id.replace(dataProvider.name, newValue[0]);
-      dataProvider.name = newValue[0];
-      dataProvider.queryMatch.value = newValue[0];
-      dataProvider.queryMatch.displayField = undefined;
-      dataProvider.queryMatch.displayValue = undefined;
-    }
-  }
-  return dataProvider;
-};
-
-export const replaceTemplateFieldFromDataProviders = (
-  dataProviders: DataProvider[],
-  ecsData: Ecs
-): DataProvider[] =>
-  dataProviders.map(dataProvider => {
-    const newDataProvider = reformatDataProviderWithNewValue(dataProvider, ecsData);
-    if (newDataProvider.and != null && !isEmpty(newDataProvider.and)) {
-      newDataProvider.and = newDataProvider.and.map(andDataProvider =>
-        reformatDataProviderWithNewValue(andDataProvider, ecsData)
-      );
-    }
-    return newDataProvider;
-  });
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/signals/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/components/signals/index.tsx
deleted file mode 100644
index 5442c8c19b5a70..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/components/signals/index.tsx
+++ /dev/null
@@ -1,369 +0,0 @@
-/*
- * 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 { EuiPanel, EuiLoadingContent } from '@elastic/eui';
-import { isEmpty } from 'lodash/fp';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
-import { Dispatch } from 'redux';
-
-import { Filter, esQuery } from '../../../../../../../../src/plugins/data/public';
-import { useFetchIndexPatterns } from '../../../../containers/detection_engine/rules/fetch_index_patterns';
-import { StatefulEventsViewer } from '../../../../components/events_viewer';
-import { HeaderSection } from '../../../../components/header_section';
-import { combineQueries } from '../../../../components/timeline/helpers';
-import { useKibana } from '../../../../lib/kibana';
-import { inputsSelectors, State, inputsModel } from '../../../../store';
-import { timelineActions, timelineSelectors } from '../../../../store/timeline';
-import { TimelineModel } from '../../../../store/timeline/model';
-import { timelineDefaults } from '../../../../store/timeline/defaults';
-import { useApolloClient } from '../../../../utils/apollo_context';
-
-import { updateSignalStatusAction } from './actions';
-import {
-  getSignalsActions,
-  requiredFieldsForActions,
-  signalsClosedFilters,
-  signalsDefaultModel,
-  signalsOpenFilters,
-} from './default_config';
-import {
-  FILTER_CLOSED,
-  FILTER_OPEN,
-  SignalFilterOption,
-  SignalsTableFilterGroup,
-} from './signals_filter_group';
-import { SignalsUtilityBar } from './signals_utility_bar';
-import * as i18n from './translations';
-import {
-  CreateTimelineProps,
-  SetEventsDeletedProps,
-  SetEventsLoadingProps,
-  UpdateSignalsStatusCallback,
-  UpdateSignalsStatusProps,
-} from './types';
-import { dispatchUpdateTimeline } from '../../../../components/open_timeline/helpers';
-
-export const SIGNALS_PAGE_TIMELINE_ID = 'signals-page';
-
-interface OwnProps {
-  canUserCRUD: boolean;
-  defaultFilters?: Filter[];
-  hasIndexWrite: boolean;
-  from: number;
-  loading: boolean;
-  signalsIndex: string;
-  to: number;
-}
-
-type SignalsTableComponentProps = OwnProps & PropsFromRedux;
-
-export const SignalsTableComponent: React.FC<SignalsTableComponentProps> = ({
-  canUserCRUD,
-  clearEventsDeleted,
-  clearEventsLoading,
-  clearSelected,
-  defaultFilters,
-  from,
-  globalFilters,
-  globalQuery,
-  hasIndexWrite,
-  isSelectAllChecked,
-  loading,
-  loadingEventIds,
-  selectedEventIds,
-  setEventsDeleted,
-  setEventsLoading,
-  signalsIndex,
-  to,
-  updateTimeline,
-  updateTimelineIsLoading,
-}) => {
-  const [selectAll, setSelectAll] = useState(false);
-  const apolloClient = useApolloClient();
-
-  const [showClearSelectionAction, setShowClearSelectionAction] = useState(false);
-  const [filterGroup, setFilterGroup] = useState<SignalFilterOption>(FILTER_OPEN);
-  const [{ browserFields, indexPatterns }] = useFetchIndexPatterns(
-    signalsIndex !== '' ? [signalsIndex] : []
-  );
-  const kibana = useKibana();
-
-  const getGlobalQuery = useCallback(() => {
-    if (browserFields != null && indexPatterns != null) {
-      return combineQueries({
-        config: esQuery.getEsQueryConfig(kibana.services.uiSettings),
-        dataProviders: [],
-        indexPattern: indexPatterns,
-        browserFields,
-        filters: isEmpty(defaultFilters)
-          ? globalFilters
-          : [...(defaultFilters ?? []), ...globalFilters],
-        kqlQuery: globalQuery,
-        kqlMode: globalQuery.language,
-        start: from,
-        end: to,
-        isEventViewer: true,
-      });
-    }
-    return null;
-  }, [browserFields, globalFilters, globalQuery, indexPatterns, kibana, to, from]);
-
-  // Callback for creating a new timeline -- utilized by row/batch actions
-  const createTimelineCallback = useCallback(
-    ({ from: fromTimeline, timeline, to: toTimeline, ruleNote }: CreateTimelineProps) => {
-      updateTimelineIsLoading({ id: 'timeline-1', isLoading: false });
-      updateTimeline({
-        duplicate: true,
-        from: fromTimeline,
-        id: 'timeline-1',
-        notes: [],
-        timeline: {
-          ...timeline,
-          show: true,
-        },
-        to: toTimeline,
-        ruleNote,
-      })();
-    },
-    [updateTimeline, updateTimelineIsLoading]
-  );
-
-  const setEventsLoadingCallback = useCallback(
-    ({ eventIds, isLoading }: SetEventsLoadingProps) => {
-      setEventsLoading!({ id: SIGNALS_PAGE_TIMELINE_ID, eventIds, isLoading });
-    },
-    [setEventsLoading, SIGNALS_PAGE_TIMELINE_ID]
-  );
-
-  const setEventsDeletedCallback = useCallback(
-    ({ eventIds, isDeleted }: SetEventsDeletedProps) => {
-      setEventsDeleted!({ id: SIGNALS_PAGE_TIMELINE_ID, eventIds, isDeleted });
-    },
-    [setEventsDeleted, SIGNALS_PAGE_TIMELINE_ID]
-  );
-
-  // Catches state change isSelectAllChecked->false upon user selection change to reset utility bar
-  useEffect(() => {
-    if (!isSelectAllChecked) {
-      setShowClearSelectionAction(false);
-    } else {
-      setSelectAll(false);
-    }
-  }, [isSelectAllChecked]);
-
-  // Callback for when open/closed filter changes
-  const onFilterGroupChangedCallback = useCallback(
-    (newFilterGroup: SignalFilterOption) => {
-      clearEventsLoading!({ id: SIGNALS_PAGE_TIMELINE_ID });
-      clearEventsDeleted!({ id: SIGNALS_PAGE_TIMELINE_ID });
-      clearSelected!({ id: SIGNALS_PAGE_TIMELINE_ID });
-      setFilterGroup(newFilterGroup);
-    },
-    [clearEventsLoading, clearEventsDeleted, clearSelected, setFilterGroup]
-  );
-
-  // Callback for clearing entire selection from utility bar
-  const clearSelectionCallback = useCallback(() => {
-    clearSelected!({ id: SIGNALS_PAGE_TIMELINE_ID });
-    setSelectAll(false);
-    setShowClearSelectionAction(false);
-  }, [clearSelected, setSelectAll, setShowClearSelectionAction]);
-
-  // Callback for selecting all events on all pages from utility bar
-  // Dispatches to stateful_body's selectAll via TimelineTypeContext props
-  // as scope of response data required to actually set selectedEvents
-  const selectAllCallback = useCallback(() => {
-    setSelectAll(true);
-    setShowClearSelectionAction(true);
-  }, [setSelectAll, setShowClearSelectionAction]);
-
-  const updateSignalsStatusCallback: UpdateSignalsStatusCallback = useCallback(
-    async (refetchQuery: inputsModel.Refetch, { signalIds, status }: UpdateSignalsStatusProps) => {
-      await updateSignalStatusAction({
-        query: showClearSelectionAction ? getGlobalQuery()?.filterQuery : undefined,
-        signalIds: Object.keys(selectedEventIds),
-        status,
-        setEventsDeleted: setEventsDeletedCallback,
-        setEventsLoading: setEventsLoadingCallback,
-      });
-      refetchQuery();
-    },
-    [
-      getGlobalQuery,
-      selectedEventIds,
-      setEventsDeletedCallback,
-      setEventsLoadingCallback,
-      showClearSelectionAction,
-    ]
-  );
-
-  // Callback for creating the SignalUtilityBar which receives totalCount from EventsViewer component
-  const utilityBarCallback = useCallback(
-    (refetchQuery: inputsModel.Refetch, totalCount: number) => {
-      return (
-        <SignalsUtilityBar
-          canUserCRUD={canUserCRUD}
-          areEventsLoading={loadingEventIds.length > 0}
-          clearSelection={clearSelectionCallback}
-          hasIndexWrite={hasIndexWrite}
-          isFilteredToOpen={filterGroup === FILTER_OPEN}
-          selectAll={selectAllCallback}
-          selectedEventIds={selectedEventIds}
-          showClearSelection={showClearSelectionAction}
-          totalCount={totalCount}
-          updateSignalsStatus={updateSignalsStatusCallback.bind(null, refetchQuery)}
-        />
-      );
-    },
-    [
-      canUserCRUD,
-      hasIndexWrite,
-      clearSelectionCallback,
-      filterGroup,
-      loadingEventIds.length,
-      selectAllCallback,
-      selectedEventIds,
-      showClearSelectionAction,
-      updateSignalsStatusCallback,
-    ]
-  );
-
-  // Send to Timeline / Update Signal Status Actions for each table row
-  const additionalActions = useMemo(
-    () =>
-      getSignalsActions({
-        apolloClient,
-        canUserCRUD,
-        hasIndexWrite,
-        createTimeline: createTimelineCallback,
-        setEventsLoading: setEventsLoadingCallback,
-        setEventsDeleted: setEventsDeletedCallback,
-        status: filterGroup === FILTER_OPEN ? FILTER_CLOSED : FILTER_OPEN,
-        updateTimelineIsLoading,
-      }),
-    [
-      apolloClient,
-      canUserCRUD,
-      createTimelineCallback,
-      hasIndexWrite,
-      filterGroup,
-      setEventsLoadingCallback,
-      setEventsDeletedCallback,
-      updateTimelineIsLoading,
-    ]
-  );
-
-  const defaultIndices = useMemo(() => [signalsIndex], [signalsIndex]);
-  const defaultFiltersMemo = useMemo(() => {
-    if (isEmpty(defaultFilters)) {
-      return filterGroup === FILTER_OPEN ? signalsOpenFilters : signalsClosedFilters;
-    } else if (defaultFilters != null && !isEmpty(defaultFilters)) {
-      return [
-        ...defaultFilters,
-        ...(filterGroup === FILTER_OPEN ? signalsOpenFilters : signalsClosedFilters),
-      ];
-    }
-  }, [defaultFilters, filterGroup]);
-
-  const timelineTypeContext = useMemo(
-    () => ({
-      documentType: i18n.SIGNALS_DOCUMENT_TYPE,
-      footerText: i18n.TOTAL_COUNT_OF_SIGNALS,
-      loadingText: i18n.LOADING_SIGNALS,
-      queryFields: requiredFieldsForActions,
-      timelineActions: additionalActions,
-      title: i18n.SIGNALS_TABLE_TITLE,
-      selectAll: canUserCRUD ? selectAll : false,
-    }),
-    [additionalActions, canUserCRUD, selectAll]
-  );
-
-  const headerFilterGroup = useMemo(
-    () => <SignalsTableFilterGroup onFilterGroupChanged={onFilterGroupChangedCallback} />,
-    [onFilterGroupChangedCallback]
-  );
-
-  if (loading || isEmpty(signalsIndex)) {
-    return (
-      <EuiPanel>
-        <HeaderSection title={i18n.SIGNALS_TABLE_TITLE} />
-        <EuiLoadingContent data-test-subj="loading-signals-panel" />
-      </EuiPanel>
-    );
-  }
-
-  return (
-    <StatefulEventsViewer
-      defaultIndices={defaultIndices}
-      pageFilters={defaultFiltersMemo}
-      defaultModel={signalsDefaultModel}
-      end={to}
-      headerFilterGroup={headerFilterGroup}
-      id={SIGNALS_PAGE_TIMELINE_ID}
-      start={from}
-      timelineTypeContext={timelineTypeContext}
-      utilityBar={utilityBarCallback}
-    />
-  );
-};
-
-const makeMapStateToProps = () => {
-  const getTimeline = timelineSelectors.getTimelineByIdSelector();
-  const getGlobalInputs = inputsSelectors.globalSelector();
-  const mapStateToProps = (state: State) => {
-    const timeline: TimelineModel =
-      getTimeline(state, SIGNALS_PAGE_TIMELINE_ID) ?? timelineDefaults;
-    const { deletedEventIds, isSelectAllChecked, loadingEventIds, selectedEventIds } = timeline;
-
-    const globalInputs: inputsModel.InputsRange = getGlobalInputs(state);
-    const { query, filters } = globalInputs;
-    return {
-      globalQuery: query,
-      globalFilters: filters,
-      deletedEventIds,
-      isSelectAllChecked,
-      loadingEventIds,
-      selectedEventIds,
-    };
-  };
-  return mapStateToProps;
-};
-
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  clearSelected: ({ id }: { id: string }) => dispatch(timelineActions.clearSelected({ id })),
-  setEventsLoading: ({
-    id,
-    eventIds,
-    isLoading,
-  }: {
-    id: string;
-    eventIds: string[];
-    isLoading: boolean;
-  }) => dispatch(timelineActions.setEventsLoading({ id, eventIds, isLoading })),
-  clearEventsLoading: ({ id }: { id: string }) =>
-    dispatch(timelineActions.clearEventsLoading({ id })),
-  setEventsDeleted: ({
-    id,
-    eventIds,
-    isDeleted,
-  }: {
-    id: string;
-    eventIds: string[];
-    isDeleted: boolean;
-  }) => dispatch(timelineActions.setEventsDeleted({ id, eventIds, isDeleted })),
-  clearEventsDeleted: ({ id }: { id: string }) =>
-    dispatch(timelineActions.clearEventsDeleted({ id })),
-  updateTimelineIsLoading: ({ id, isLoading }: { id: string; isLoading: boolean }) =>
-    dispatch(timelineActions.updateIsLoading({ id, isLoading })),
-  updateTimeline: dispatchUpdateTimeline(dispatch),
-});
-
-const connector = connect(makeMapStateToProps, mapDispatchToProps);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-export const SignalsTable = connector(React.memo(SignalsTableComponent));
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/signals/signals_utility_bar/index.test.tsx b/x-pack/plugins/siem/public/pages/detection_engine/components/signals/signals_utility_bar/index.test.tsx
deleted file mode 100644
index 6cab43b5285b50..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/components/signals/signals_utility_bar/index.test.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * 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 { SignalsUtilityBar } from './index';
-
-jest.mock('../../../../../lib/kibana');
-
-describe('SignalsUtilityBar', () => {
-  it('renders correctly', () => {
-    const wrapper = shallow(
-      <SignalsUtilityBar
-        canUserCRUD={true}
-        hasIndexWrite={true}
-        areEventsLoading={false}
-        clearSelection={jest.fn()}
-        totalCount={100}
-        selectedEventIds={{}}
-        isFilteredToOpen={false}
-        selectAll={jest.fn()}
-        showClearSelection={true}
-        updateSignalsStatus={jest.fn()}
-      />
-    );
-
-    expect(wrapper.find('[dataTestSubj="openCloseSignal"]')).toBeTruthy();
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/signals/signals_utility_bar/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/components/signals/signals_utility_bar/index.tsx
deleted file mode 100644
index b9268716f85f01..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/components/signals/signals_utility_bar/index.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-/*
- * 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 { isEmpty } from 'lodash/fp';
-import React, { useCallback } from 'react';
-import numeral from '@elastic/numeral';
-
-import { DEFAULT_NUMBER_FORMAT } from '../../../../../../common/constants';
-import {
-  UtilityBar,
-  UtilityBarAction,
-  UtilityBarGroup,
-  UtilityBarSection,
-  UtilityBarText,
-} from '../../../../../components/utility_bar';
-import * as i18n from './translations';
-import { useUiSetting$ } from '../../../../../lib/kibana';
-import { TimelineNonEcsData } from '../../../../../graphql/types';
-import { UpdateSignalsStatus } from '../types';
-import { FILTER_CLOSED, FILTER_OPEN } from '../signals_filter_group';
-
-interface SignalsUtilityBarProps {
-  canUserCRUD: boolean;
-  hasIndexWrite: boolean;
-  areEventsLoading: boolean;
-  clearSelection: () => void;
-  isFilteredToOpen: boolean;
-  selectAll: () => void;
-  selectedEventIds: Readonly<Record<string, TimelineNonEcsData[]>>;
-  showClearSelection: boolean;
-  totalCount: number;
-  updateSignalsStatus: UpdateSignalsStatus;
-}
-
-const SignalsUtilityBarComponent: React.FC<SignalsUtilityBarProps> = ({
-  canUserCRUD,
-  hasIndexWrite,
-  areEventsLoading,
-  clearSelection,
-  totalCount,
-  selectedEventIds,
-  isFilteredToOpen,
-  selectAll,
-  showClearSelection,
-  updateSignalsStatus,
-}) => {
-  const [defaultNumberFormat] = useUiSetting$<string>(DEFAULT_NUMBER_FORMAT);
-
-  const handleUpdateStatus = useCallback(async () => {
-    await updateSignalsStatus({
-      signalIds: Object.keys(selectedEventIds),
-      status: isFilteredToOpen ? FILTER_CLOSED : FILTER_OPEN,
-    });
-  }, [selectedEventIds, updateSignalsStatus, isFilteredToOpen]);
-
-  const formattedTotalCount = numeral(totalCount).format(defaultNumberFormat);
-  const formattedSelectedEventsCount = numeral(Object.keys(selectedEventIds).length).format(
-    defaultNumberFormat
-  );
-
-  return (
-    <>
-      <UtilityBar>
-        <UtilityBarSection>
-          <UtilityBarGroup>
-            <UtilityBarText dataTestSubj="showingSignals">
-              {i18n.SHOWING_SIGNALS(formattedTotalCount, totalCount)}
-            </UtilityBarText>
-          </UtilityBarGroup>
-
-          <UtilityBarGroup>
-            {canUserCRUD && hasIndexWrite && (
-              <>
-                <UtilityBarText dataTestSubj="selectedSignals">
-                  {i18n.SELECTED_SIGNALS(
-                    showClearSelection ? formattedTotalCount : formattedSelectedEventsCount,
-                    showClearSelection ? totalCount : Object.keys(selectedEventIds).length
-                  )}
-                </UtilityBarText>
-
-                <UtilityBarAction
-                  dataTestSubj="openCloseSignal"
-                  disabled={areEventsLoading || isEmpty(selectedEventIds)}
-                  iconType={isFilteredToOpen ? 'securitySignalResolved' : 'securitySignalDetected'}
-                  onClick={handleUpdateStatus}
-                >
-                  {isFilteredToOpen
-                    ? i18n.BATCH_ACTION_CLOSE_SELECTED
-                    : i18n.BATCH_ACTION_OPEN_SELECTED}
-                </UtilityBarAction>
-
-                <UtilityBarAction
-                  iconType={showClearSelection ? 'cross' : 'pagesSelect'}
-                  onClick={() => {
-                    if (!showClearSelection) {
-                      selectAll();
-                    } else {
-                      clearSelection();
-                    }
-                  }}
-                >
-                  {showClearSelection
-                    ? i18n.CLEAR_SELECTION
-                    : i18n.SELECT_ALL_SIGNALS(formattedTotalCount, totalCount)}
-                </UtilityBarAction>
-              </>
-            )}
-          </UtilityBarGroup>
-        </UtilityBarSection>
-      </UtilityBar>
-    </>
-  );
-};
-
-export const SignalsUtilityBar = React.memo(
-  SignalsUtilityBarComponent,
-  (prevProps, nextProps) =>
-    prevProps.areEventsLoading === nextProps.areEventsLoading &&
-    prevProps.selectedEventIds === nextProps.selectedEventIds &&
-    prevProps.totalCount === nextProps.totalCount &&
-    prevProps.showClearSelection === nextProps.showClearSelection
-);
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/signals/types.ts b/x-pack/plugins/siem/public/pages/detection_engine/components/signals/types.ts
deleted file mode 100644
index 909b2176467461..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/components/signals/types.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-/*
- * 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 ApolloClient from 'apollo-client';
-
-import { Ecs } from '../../../../graphql/types';
-import { TimelineModel } from '../../../../store/timeline/model';
-import { inputsModel } from '../../../../store';
-
-export interface SetEventsLoadingProps {
-  eventIds: string[];
-  isLoading: boolean;
-}
-
-export interface SetEventsDeletedProps {
-  eventIds: string[];
-  isDeleted: boolean;
-}
-
-export interface UpdateSignalsStatusProps {
-  signalIds: string[];
-  status: 'open' | 'closed';
-}
-
-export type UpdateSignalsStatusCallback = (
-  refetchQuery: inputsModel.Refetch,
-  { signalIds, status }: UpdateSignalsStatusProps
-) => void;
-export type UpdateSignalsStatus = ({ signalIds, status }: UpdateSignalsStatusProps) => void;
-
-export interface UpdateSignalStatusActionProps {
-  query?: string;
-  signalIds: string[];
-  status: 'open' | 'closed';
-  setEventsLoading: ({ eventIds, isLoading }: SetEventsLoadingProps) => void;
-  setEventsDeleted: ({ eventIds, isDeleted }: SetEventsDeletedProps) => void;
-}
-
-export type SendSignalsToTimeline = () => void;
-
-export interface SendSignalToTimelineActionProps {
-  apolloClient?: ApolloClient<{}>;
-  createTimeline: CreateTimeline;
-  ecsData: Ecs;
-  updateTimelineIsLoading: UpdateTimelineLoading;
-}
-
-export type UpdateTimelineLoading = ({ id, isLoading }: { id: string; isLoading: boolean }) => void;
-
-export interface CreateTimelineProps {
-  from: number;
-  timeline: TimelineModel;
-  to: number;
-  ruleNote?: string;
-}
-
-export type CreateTimeline = ({ from, timeline, to }: CreateTimelineProps) => void;
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/helpers.tsx b/x-pack/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/helpers.tsx
deleted file mode 100644
index 24b12cae62d85d..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/helpers.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-/*
- * 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 { showAllOthersBucket } from '../../../../../common/constants';
-import { HistogramData, SignalsAggregation, SignalsBucket, SignalsGroupBucket } from './types';
-import { SignalSearchResponse } from '../../../../containers/detection_engine/signals/types';
-import * as i18n from './translations';
-
-export const formatSignalsData = (
-  signalsData: SignalSearchResponse<{}, SignalsAggregation> | null
-) => {
-  const groupBuckets: SignalsGroupBucket[] =
-    signalsData?.aggregations?.signalsByGrouping?.buckets ?? [];
-  return groupBuckets.reduce<HistogramData[]>((acc, { key: group, signals }) => {
-    const signalsBucket: SignalsBucket[] = signals.buckets ?? [];
-
-    return [
-      ...acc,
-      ...signalsBucket.map(({ key, doc_count }: SignalsBucket) => ({
-        x: key,
-        y: doc_count,
-        g: group,
-      })),
-    ];
-  }, []);
-};
-
-export const getSignalsHistogramQuery = (
-  stackByField: string,
-  from: number,
-  to: number,
-  additionalFilters: Array<{
-    bool: { filter: unknown[]; should: unknown[]; must_not: unknown[]; must: unknown[] };
-  }>
-) => {
-  const missing = showAllOthersBucket.includes(stackByField)
-    ? {
-        missing: stackByField.endsWith('.ip') ? '0.0.0.0' : i18n.ALL_OTHERS,
-      }
-    : {};
-
-  return {
-    aggs: {
-      signalsByGrouping: {
-        terms: {
-          field: stackByField,
-          ...missing,
-          order: {
-            _count: 'desc',
-          },
-          size: 10,
-        },
-        aggs: {
-          signals: {
-            date_histogram: {
-              field: '@timestamp',
-              fixed_interval: `${Math.floor((to - from) / 32)}ms`,
-              min_doc_count: 0,
-              extended_bounds: {
-                min: from,
-                max: to,
-              },
-            },
-          },
-        },
-      },
-    },
-    query: {
-      bool: {
-        filter: [
-          ...additionalFilters,
-          {
-            range: {
-              '@timestamp': {
-                gte: from,
-                lte: to,
-              },
-            },
-          },
-        ],
-      },
-    },
-  };
-};
-
-/**
- * Returns `true` when the signals histogram initial loading spinner should be shown
- *
- * @param isInitialLoading The loading spinner will only be displayed if this value is `true`, because after initial load, a different, non-spinner loading indicator is displayed
- * @param isLoadingSignals When `true`, IO is being performed to request signals (for rendering in the histogram)
- */
-export const showInitialLoadingSpinner = ({
-  isInitialLoading,
-  isLoadingSignals,
-}: {
-  isInitialLoading: boolean;
-  isLoadingSignals: boolean;
-}): boolean => isInitialLoading && isLoadingSignals;
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/index.test.tsx b/x-pack/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/index.test.tsx
deleted file mode 100644
index 6921c49d8a8b48..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/index.test.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
- * 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 { SignalsHistogramPanel } from './index';
-
-jest.mock('../../../../lib/kibana');
-jest.mock('../../../../components/navigation/use_get_url_search');
-
-describe('SignalsHistogramPanel', () => {
-  it('renders correctly', () => {
-    const wrapper = shallow(
-      <SignalsHistogramPanel
-        from={0}
-        signalIndexName="signalIndexName"
-        setQuery={jest.fn()}
-        to={1}
-        updateDateRange={jest.fn()}
-      />
-    );
-
-    expect(wrapper.find('[id="detections-histogram"]')).toBeTruthy();
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/index.tsx
deleted file mode 100644
index 9b336766b1724f..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/index.tsx
+++ /dev/null
@@ -1,284 +0,0 @@
-/*
- * 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 { Position } from '@elastic/charts';
-import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiSelect, EuiPanel } from '@elastic/eui';
-import numeral from '@elastic/numeral';
-import React, { memo, useCallback, useMemo, useState, useEffect } from 'react';
-import styled from 'styled-components';
-import { isEmpty } from 'lodash/fp';
-import uuid from 'uuid';
-
-import { DEFAULT_NUMBER_FORMAT } from '../../../../../common/constants';
-import { UpdateDateRange } from '../../../../components/charts/common';
-import { LegendItem } from '../../../../components/charts/draggable_legend_item';
-import { escapeDataProviderId } from '../../../../components/drag_and_drop/helpers';
-import { HeaderSection } from '../../../../components/header_section';
-import { Filter, esQuery, Query } from '../../../../../../../../src/plugins/data/public';
-import { useQuerySignals } from '../../../../containers/detection_engine/signals/use_query';
-import { getDetectionEngineUrl } from '../../../../components/link_to';
-import { defaultLegendColors } from '../../../../components/matrix_histogram/utils';
-import { InspectButtonContainer } from '../../../../components/inspect';
-import { useGetUrlSearch } from '../../../../components/navigation/use_get_url_search';
-import { MatrixLoader } from '../../../../components/matrix_histogram/matrix_loader';
-import { MatrixHistogramOption } from '../../../../components/matrix_histogram/types';
-import { useKibana, useUiSetting$ } from '../../../../lib/kibana';
-import { navTabs } from '../../../home/home_navigations';
-import { signalsHistogramOptions } from './config';
-import { formatSignalsData, getSignalsHistogramQuery, showInitialLoadingSpinner } from './helpers';
-import { SignalsHistogram } from './signals_histogram';
-import * as i18n from './translations';
-import { RegisterQuery, SignalsHistogramOption, SignalsAggregation, SignalsTotal } from './types';
-
-const DEFAULT_PANEL_HEIGHT = 300;
-
-const StyledEuiPanel = styled(EuiPanel)<{ height?: number }>`
-  display: flex;
-  flex-direction: column;
-  ${({ height }) => (height != null ? `height: ${height}px;` : '')}
-  position: relative;
-`;
-
-const defaultTotalSignalsObj: SignalsTotal = {
-  value: 0,
-  relation: 'eq',
-};
-
-export const DETECTIONS_HISTOGRAM_ID = 'detections-histogram';
-
-const ViewSignalsFlexItem = styled(EuiFlexItem)`
-  margin-left: 24px;
-`;
-
-interface SignalsHistogramPanelProps {
-  chartHeight?: number;
-  defaultStackByOption?: SignalsHistogramOption;
-  deleteQuery?: ({ id }: { id: string }) => void;
-  filters?: Filter[];
-  from: number;
-  headerChildren?: React.ReactNode;
-  /** Override all defaults, and only display this field */
-  onlyField?: string;
-  query?: Query;
-  legendPosition?: Position;
-  panelHeight?: number;
-  signalIndexName: string | null;
-  setQuery: (params: RegisterQuery) => void;
-  showLinkToSignals?: boolean;
-  showTotalSignalsCount?: boolean;
-  stackByOptions?: SignalsHistogramOption[];
-  title?: string;
-  to: number;
-  updateDateRange: UpdateDateRange;
-}
-
-const getHistogramOption = (fieldName: string): MatrixHistogramOption => ({
-  text: fieldName,
-  value: fieldName,
-});
-
-const NO_LEGEND_DATA: LegendItem[] = [];
-
-export const SignalsHistogramPanel = memo<SignalsHistogramPanelProps>(
-  ({
-    chartHeight,
-    defaultStackByOption = signalsHistogramOptions[0],
-    deleteQuery,
-    filters,
-    headerChildren,
-    onlyField,
-    query,
-    from,
-    legendPosition = 'right',
-    panelHeight = DEFAULT_PANEL_HEIGHT,
-    setQuery,
-    signalIndexName,
-    showLinkToSignals = false,
-    showTotalSignalsCount = false,
-    stackByOptions,
-    to,
-    title = i18n.HISTOGRAM_HEADER,
-    updateDateRange,
-  }) => {
-    // create a unique, but stable (across re-renders) query id
-    const uniqueQueryId = useMemo(() => `${DETECTIONS_HISTOGRAM_ID}-${uuid.v4()}`, []);
-    const [isInitialLoading, setIsInitialLoading] = useState(true);
-    const [defaultNumberFormat] = useUiSetting$<string>(DEFAULT_NUMBER_FORMAT);
-    const [totalSignalsObj, setTotalSignalsObj] = useState<SignalsTotal>(defaultTotalSignalsObj);
-    const [selectedStackByOption, setSelectedStackByOption] = useState<SignalsHistogramOption>(
-      onlyField == null ? defaultStackByOption : getHistogramOption(onlyField)
-    );
-    const {
-      loading: isLoadingSignals,
-      data: signalsData,
-      setQuery: setSignalsQuery,
-      response,
-      request,
-      refetch,
-    } = useQuerySignals<{}, SignalsAggregation>(
-      getSignalsHistogramQuery(selectedStackByOption.value, from, to, []),
-      signalIndexName
-    );
-    const kibana = useKibana();
-    const urlSearch = useGetUrlSearch(navTabs.detections);
-
-    const totalSignals = useMemo(
-      () =>
-        i18n.SHOWING_SIGNALS(
-          numeral(totalSignalsObj.value).format(defaultNumberFormat),
-          totalSignalsObj.value,
-          totalSignalsObj.relation === 'gte' ? '>' : totalSignalsObj.relation === 'lte' ? '<' : ''
-        ),
-      [totalSignalsObj]
-    );
-
-    const setSelectedOptionCallback = useCallback((event: React.ChangeEvent<HTMLSelectElement>) => {
-      setSelectedStackByOption(
-        stackByOptions?.find(co => co.value === event.target.value) ?? defaultStackByOption
-      );
-    }, []);
-
-    const formattedSignalsData = useMemo(() => formatSignalsData(signalsData), [signalsData]);
-
-    const legendItems: LegendItem[] = useMemo(
-      () =>
-        signalsData?.aggregations?.signalsByGrouping?.buckets != null
-          ? signalsData.aggregations.signalsByGrouping.buckets.map((bucket, i) => ({
-              color: i < defaultLegendColors.length ? defaultLegendColors[i] : undefined,
-              dataProviderId: escapeDataProviderId(
-                `draggable-legend-item-${uuid.v4()}-${selectedStackByOption.value}-${bucket.key}`
-              ),
-              field: selectedStackByOption.value,
-              value: bucket.key,
-            }))
-          : NO_LEGEND_DATA,
-      [signalsData, selectedStackByOption.value]
-    );
-
-    useEffect(() => {
-      let canceled = false;
-
-      if (!canceled && !showInitialLoadingSpinner({ isInitialLoading, isLoadingSignals })) {
-        setIsInitialLoading(false);
-      }
-
-      return () => {
-        canceled = true; // prevent long running data fetches from updating state after unmounting
-      };
-    }, [isInitialLoading, isLoadingSignals, setIsInitialLoading]);
-
-    useEffect(() => {
-      return () => {
-        if (deleteQuery) {
-          deleteQuery({ id: uniqueQueryId });
-        }
-      };
-    }, []);
-
-    useEffect(() => {
-      if (refetch != null && setQuery != null) {
-        setQuery({
-          id: uniqueQueryId,
-          inspect: {
-            dsl: [request],
-            response: [response],
-          },
-          loading: isLoadingSignals,
-          refetch,
-        });
-      }
-    }, [setQuery, isLoadingSignals, signalsData, response, request, refetch]);
-
-    useEffect(() => {
-      setTotalSignalsObj(
-        signalsData?.hits.total ?? {
-          value: 0,
-          relation: 'eq',
-        }
-      );
-    }, [signalsData]);
-
-    useEffect(() => {
-      const converted = esQuery.buildEsQuery(
-        undefined,
-        query != null ? [query] : [],
-        filters?.filter(f => f.meta.disabled === false) ?? [],
-        {
-          ...esQuery.getEsQueryConfig(kibana.services.uiSettings),
-          dateFormatTZ: undefined,
-        }
-      );
-
-      setSignalsQuery(
-        getSignalsHistogramQuery(
-          selectedStackByOption.value,
-          from,
-          to,
-          !isEmpty(converted) ? [converted] : []
-        )
-      );
-    }, [selectedStackByOption.value, from, to, query, filters]);
-
-    const linkButton = useMemo(() => {
-      if (showLinkToSignals) {
-        return (
-          <ViewSignalsFlexItem grow={false}>
-            <EuiButton href={getDetectionEngineUrl(urlSearch)}>{i18n.VIEW_SIGNALS}</EuiButton>
-          </ViewSignalsFlexItem>
-        );
-      }
-    }, [showLinkToSignals, urlSearch]);
-
-    const titleText = useMemo(() => (onlyField == null ? title : i18n.TOP(onlyField)), [
-      onlyField,
-      title,
-    ]);
-
-    return (
-      <InspectButtonContainer data-test-subj="signals-histogram-panel" show={!isInitialLoading}>
-        <StyledEuiPanel height={panelHeight}>
-          <HeaderSection
-            id={uniqueQueryId}
-            title={titleText}
-            titleSize={onlyField == null ? 'm' : 's'}
-            subtitle={!isInitialLoading && showTotalSignalsCount && totalSignals}
-          >
-            <EuiFlexGroup alignItems="center" gutterSize="none">
-              <EuiFlexItem grow={false}>
-                {stackByOptions && (
-                  <EuiSelect
-                    onChange={setSelectedOptionCallback}
-                    options={stackByOptions}
-                    prepend={i18n.STACK_BY_LABEL}
-                    value={selectedStackByOption.value}
-                  />
-                )}
-                {headerChildren != null && headerChildren}
-              </EuiFlexItem>
-              {linkButton}
-            </EuiFlexGroup>
-          </HeaderSection>
-
-          {isInitialLoading ? (
-            <MatrixLoader />
-          ) : (
-            <SignalsHistogram
-              chartHeight={chartHeight}
-              data={formattedSignalsData}
-              from={from}
-              legendItems={legendItems}
-              legendPosition={legendPosition}
-              loading={isLoadingSignals}
-              to={to}
-              updateDateRange={updateDateRange}
-            />
-          )}
-        </StyledEuiPanel>
-      </InspectButtonContainer>
-    );
-  }
-);
-
-SignalsHistogramPanel.displayName = 'SignalsHistogramPanel';
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/types.ts b/x-pack/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/types.ts
deleted file mode 100644
index 6ef4cecc4ec8b4..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/types.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-/*
- * 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 { inputsModel } from '../../../../store';
-
-export interface SignalsHistogramOption {
-  text: string;
-  value: string;
-}
-
-export interface HistogramData {
-  x: number;
-  y: number;
-  g: string;
-}
-
-export interface SignalsAggregation {
-  signalsByGrouping: {
-    buckets: SignalsGroupBucket[];
-  };
-}
-
-export interface SignalsBucket {
-  key_as_string: string;
-  key: number;
-  doc_count: number;
-}
-
-export interface SignalsGroupBucket {
-  key: string;
-  signals: {
-    buckets: SignalsBucket[];
-  };
-}
-
-export interface SignalsTotal {
-  value: number;
-  relation: string;
-}
-
-export interface RegisterQuery {
-  id: string;
-  inspect: inputsModel.InspectQuery | null;
-  loading: boolean;
-  refetch: inputsModel.Refetch;
-}
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/signals_info/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/components/signals_info/index.tsx
deleted file mode 100644
index e7cdc3345c031a..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/components/signals_info/index.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-/*
- * 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 { EuiLoadingSpinner } from '@elastic/eui';
-import { FormattedRelative } from '@kbn/i18n/react';
-import React, { useState, useEffect } from 'react';
-
-import { useQuerySignals } from '../../../../containers/detection_engine/signals/use_query';
-import { buildLastSignalsQuery } from './query.dsl';
-import { Aggs } from './types';
-
-interface SignalInfo {
-  ruleId?: string | null;
-}
-
-type Return = [React.ReactNode, React.ReactNode];
-
-export const useSignalInfo = ({ ruleId = null }: SignalInfo): Return => {
-  const [lastSignals, setLastSignals] = useState<React.ReactElement | null>(
-    <EuiLoadingSpinner size="m" />
-  );
-  const [totalSignals, setTotalSignals] = useState<React.ReactElement | null>(
-    <EuiLoadingSpinner size="m" />
-  );
-
-  const { loading, data: signals } = useQuerySignals<unknown, Aggs>(buildLastSignalsQuery(ruleId));
-
-  useEffect(() => {
-    if (signals != null) {
-      const mySignals = signals;
-      setLastSignals(
-        mySignals.aggregations?.lastSeen.value != null ? (
-          <FormattedRelative
-            value={new Date(mySignals.aggregations?.lastSeen.value_as_string ?? '')}
-          />
-        ) : null
-      );
-      setTotalSignals(<>{mySignals.hits.total.value}</>);
-    } else {
-      setLastSignals(null);
-      setTotalSignals(null);
-    }
-  }, [loading, signals]);
-
-  return [lastSignals, totalSignals];
-};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/user_info/index.test.tsx b/x-pack/plugins/siem/public/pages/detection_engine/components/user_info/index.test.tsx
deleted file mode 100644
index b3d710de5e94e8..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/components/user_info/index.test.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-/*
- * 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 { renderHook } from '@testing-library/react-hooks';
-import { useUserInfo } from './index';
-
-import { usePrivilegeUser } from '../../../../containers/detection_engine/signals/use_privilege_user';
-import { useSignalIndex } from '../../../../containers/detection_engine/signals/use_signal_index';
-import { useKibana } from '../../../../lib/kibana';
-jest.mock('../../../../containers/detection_engine/signals/use_privilege_user');
-jest.mock('../../../../containers/detection_engine/signals/use_signal_index');
-jest.mock('../../../../lib/kibana');
-
-describe('useUserInfo', () => {
-  beforeAll(() => {
-    (usePrivilegeUser as jest.Mock).mockReturnValue({});
-    (useSignalIndex as jest.Mock).mockReturnValue({});
-    (useKibana as jest.Mock).mockReturnValue({
-      services: {
-        application: {
-          capabilities: {
-            siem: {
-              crud: true,
-            },
-          },
-        },
-      },
-    });
-  });
-  it('returns default state', () => {
-    const { result } = renderHook(() => useUserInfo());
-
-    expect(result).toEqual({
-      current: {
-        canUserCRUD: null,
-        hasEncryptionKey: null,
-        hasIndexManage: null,
-        hasIndexWrite: null,
-        isAuthenticated: null,
-        isSignalIndexExists: null,
-        loading: true,
-        signalIndexName: null,
-      },
-      error: undefined,
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/components/user_info/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/components/user_info/index.tsx
deleted file mode 100644
index 9e45371fb6058e..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/components/user_info/index.tsx
+++ /dev/null
@@ -1,243 +0,0 @@
-/*
- * 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 { noop } from 'lodash/fp';
-import React, { useEffect, useReducer, Dispatch, createContext, useContext } from 'react';
-
-import { usePrivilegeUser } from '../../../../containers/detection_engine/signals/use_privilege_user';
-import { useSignalIndex } from '../../../../containers/detection_engine/signals/use_signal_index';
-import { useKibana } from '../../../../lib/kibana';
-
-export interface State {
-  canUserCRUD: boolean | null;
-  hasIndexManage: boolean | null;
-  hasIndexWrite: boolean | null;
-  isSignalIndexExists: boolean | null;
-  isAuthenticated: boolean | null;
-  hasEncryptionKey: boolean | null;
-  loading: boolean;
-  signalIndexName: string | null;
-}
-
-const initialState: State = {
-  canUserCRUD: null,
-  hasIndexManage: null,
-  hasIndexWrite: null,
-  isSignalIndexExists: null,
-  isAuthenticated: null,
-  hasEncryptionKey: null,
-  loading: true,
-  signalIndexName: null,
-};
-
-export type Action =
-  | { type: 'updateLoading'; loading: boolean }
-  | {
-      type: 'updateHasIndexManage';
-      hasIndexManage: boolean | null;
-    }
-  | {
-      type: 'updateHasIndexWrite';
-      hasIndexWrite: boolean | null;
-    }
-  | {
-      type: 'updateIsSignalIndexExists';
-      isSignalIndexExists: boolean | null;
-    }
-  | {
-      type: 'updateIsAuthenticated';
-      isAuthenticated: boolean | null;
-    }
-  | {
-      type: 'updateHasEncryptionKey';
-      hasEncryptionKey: boolean | null;
-    }
-  | {
-      type: 'updateCanUserCRUD';
-      canUserCRUD: boolean | null;
-    }
-  | {
-      type: 'updateSignalIndexName';
-      signalIndexName: string | null;
-    };
-
-export const userInfoReducer = (state: State, action: Action): State => {
-  switch (action.type) {
-    case 'updateLoading': {
-      return {
-        ...state,
-        loading: action.loading,
-      };
-    }
-    case 'updateHasIndexManage': {
-      return {
-        ...state,
-        hasIndexManage: action.hasIndexManage,
-      };
-    }
-    case 'updateHasIndexWrite': {
-      return {
-        ...state,
-        hasIndexWrite: action.hasIndexWrite,
-      };
-    }
-    case 'updateIsSignalIndexExists': {
-      return {
-        ...state,
-        isSignalIndexExists: action.isSignalIndexExists,
-      };
-    }
-    case 'updateIsAuthenticated': {
-      return {
-        ...state,
-        isAuthenticated: action.isAuthenticated,
-      };
-    }
-    case 'updateHasEncryptionKey': {
-      return {
-        ...state,
-        hasEncryptionKey: action.hasEncryptionKey,
-      };
-    }
-    case 'updateCanUserCRUD': {
-      return {
-        ...state,
-        canUserCRUD: action.canUserCRUD,
-      };
-    }
-    case 'updateSignalIndexName': {
-      return {
-        ...state,
-        signalIndexName: action.signalIndexName,
-      };
-    }
-    default:
-      return state;
-  }
-};
-
-const StateUserInfoContext = createContext<[State, Dispatch<Action>]>([initialState, () => noop]);
-
-const useUserData = () => useContext(StateUserInfoContext);
-
-interface ManageUserInfoProps {
-  children: React.ReactNode;
-}
-
-export const ManageUserInfo = ({ children }: ManageUserInfoProps) => (
-  <StateUserInfoContext.Provider value={useReducer(userInfoReducer, initialState)}>
-    {children}
-  </StateUserInfoContext.Provider>
-);
-
-export const useUserInfo = (): State => {
-  const [
-    {
-      canUserCRUD,
-      hasIndexManage,
-      hasIndexWrite,
-      isSignalIndexExists,
-      isAuthenticated,
-      hasEncryptionKey,
-      loading,
-      signalIndexName,
-    },
-    dispatch,
-  ] = useUserData();
-  const {
-    loading: privilegeLoading,
-    isAuthenticated: isApiAuthenticated,
-    hasEncryptionKey: isApiEncryptionKey,
-    hasIndexManage: hasApiIndexManage,
-    hasIndexWrite: hasApiIndexWrite,
-  } = usePrivilegeUser();
-  const {
-    loading: indexNameLoading,
-    signalIndexExists: isApiSignalIndexExists,
-    signalIndexName: apiSignalIndexName,
-    createDeSignalIndex: createSignalIndex,
-  } = useSignalIndex();
-
-  const uiCapabilities = useKibana().services.application.capabilities;
-  const capabilitiesCanUserCRUD: boolean =
-    typeof uiCapabilities.siem.crud === 'boolean' ? uiCapabilities.siem.crud : false;
-
-  useEffect(() => {
-    if (loading !== privilegeLoading || indexNameLoading) {
-      dispatch({ type: 'updateLoading', loading: privilegeLoading || indexNameLoading });
-    }
-  }, [loading, privilegeLoading, indexNameLoading]);
-
-  useEffect(() => {
-    if (!loading && hasIndexManage !== hasApiIndexManage && hasApiIndexManage != null) {
-      dispatch({ type: 'updateHasIndexManage', hasIndexManage: hasApiIndexManage });
-    }
-  }, [loading, hasIndexManage, hasApiIndexManage]);
-
-  useEffect(() => {
-    if (!loading && hasIndexWrite !== hasApiIndexWrite && hasApiIndexWrite != null) {
-      dispatch({ type: 'updateHasIndexWrite', hasIndexWrite: hasApiIndexWrite });
-    }
-  }, [loading, hasIndexWrite, hasApiIndexWrite]);
-
-  useEffect(() => {
-    if (
-      !loading &&
-      isSignalIndexExists !== isApiSignalIndexExists &&
-      isApiSignalIndexExists != null
-    ) {
-      dispatch({ type: 'updateIsSignalIndexExists', isSignalIndexExists: isApiSignalIndexExists });
-    }
-  }, [loading, isSignalIndexExists, isApiSignalIndexExists]);
-
-  useEffect(() => {
-    if (!loading && isAuthenticated !== isApiAuthenticated && isApiAuthenticated != null) {
-      dispatch({ type: 'updateIsAuthenticated', isAuthenticated: isApiAuthenticated });
-    }
-  }, [loading, isAuthenticated, isApiAuthenticated]);
-
-  useEffect(() => {
-    if (!loading && hasEncryptionKey !== isApiEncryptionKey && isApiEncryptionKey != null) {
-      dispatch({ type: 'updateHasEncryptionKey', hasEncryptionKey: isApiEncryptionKey });
-    }
-  }, [loading, hasEncryptionKey, isApiEncryptionKey]);
-
-  useEffect(() => {
-    if (!loading && canUserCRUD !== capabilitiesCanUserCRUD && capabilitiesCanUserCRUD != null) {
-      dispatch({ type: 'updateCanUserCRUD', canUserCRUD: capabilitiesCanUserCRUD });
-    }
-  }, [loading, canUserCRUD, capabilitiesCanUserCRUD]);
-
-  useEffect(() => {
-    if (!loading && signalIndexName !== apiSignalIndexName && apiSignalIndexName != null) {
-      dispatch({ type: 'updateSignalIndexName', signalIndexName: apiSignalIndexName });
-    }
-  }, [loading, signalIndexName, apiSignalIndexName]);
-
-  useEffect(() => {
-    if (
-      isAuthenticated &&
-      hasEncryptionKey &&
-      hasIndexManage &&
-      isSignalIndexExists != null &&
-      !isSignalIndexExists &&
-      createSignalIndex != null
-    ) {
-      createSignalIndex();
-    }
-  }, [createSignalIndex, isAuthenticated, hasEncryptionKey, isSignalIndexExists, hasIndexManage]);
-
-  return {
-    loading,
-    isSignalIndexExists,
-    isAuthenticated,
-    hasEncryptionKey,
-    canUserCRUD,
-    hasIndexManage,
-    hasIndexWrite,
-    signalIndexName,
-  };
-};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/index.test.tsx b/x-pack/plugins/siem/public/pages/detection_engine/index.test.tsx
deleted file mode 100644
index 6c4980f1d15002..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/index.test.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-/*
- * 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 '../../mock/match_media';
-import { DetectionEngineContainer } from './index';
-
-describe('DetectionEngineContainer', () => {
-  it('renders correctly', () => {
-    const wrapper = shallow(<DetectionEngineContainer url="url" />);
-
-    expect(wrapper.find('ManageUserInfo')).toHaveLength(1);
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/index.tsx
deleted file mode 100644
index 15093488195106..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/index.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-/*
- * 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 { Redirect, Route, Switch, RouteComponentProps } from 'react-router-dom';
-
-import { ManageUserInfo } from './components/user_info';
-import { CreateRulePage } from './rules/create';
-import { DetectionEnginePage } from './detection_engine';
-import { EditRulePage } from './rules/edit';
-import { RuleDetailsPage } from './rules/details';
-import { RulesPage } from './rules';
-import { DetectionEngineTab } from './types';
-
-const detectionEnginePath = `/:pageName(detections)`;
-
-type Props = Partial<RouteComponentProps<{}>> & { url: string };
-
-const DetectionEngineContainerComponent: React.FC<Props> = () => (
-  <ManageUserInfo>
-    <Switch>
-      <Route
-        exact
-        path={`${detectionEnginePath}/:tabName(${DetectionEngineTab.signals}|${DetectionEngineTab.alerts})`}
-        strict
-      >
-        <DetectionEnginePage />
-      </Route>
-      <Route exact path={`${detectionEnginePath}/rules`}>
-        <RulesPage />
-      </Route>
-      <Route exact path={`${detectionEnginePath}/rules/create`}>
-        <CreateRulePage />
-      </Route>
-      <Route exact path={`${detectionEnginePath}/rules/id/:detailName`}>
-        <RuleDetailsPage />
-      </Route>
-      <Route exact path={`${detectionEnginePath}/rules/id/:detailName/edit`}>
-        <EditRulePage />
-      </Route>
-      <Route
-        path="/detections/"
-        render={({ location: { search = '' } }) => (
-          <Redirect from="/detections/" to={`/detections/${DetectionEngineTab.signals}${search}`} />
-        )}
-      />
-    </Switch>
-  </ManageUserInfo>
-);
-
-export const DetectionEngineContainer = React.memo(DetectionEngineContainerComponent);
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/all/__mocks__/mock.ts b/x-pack/plugins/siem/public/pages/detection_engine/rules/all/__mocks__/mock.ts
deleted file mode 100644
index 66964fae70f941..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/all/__mocks__/mock.ts
+++ /dev/null
@@ -1,218 +0,0 @@
-/*
- * 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 { esFilters } from '../../../../../../../../../src/plugins/data/public';
-import { Rule, RuleError } from '../../../../../containers/detection_engine/rules';
-import { AboutStepRule, ActionsStepRule, DefineStepRule, ScheduleStepRule } from '../../types';
-import { FieldValueQueryBar } from '../../components/query_bar';
-
-export const mockQueryBar: FieldValueQueryBar = {
-  query: {
-    query: 'test query',
-    language: 'kuery',
-  },
-  filters: [
-    {
-      $state: {
-        store: esFilters.FilterStateStore.GLOBAL_STATE,
-      },
-      meta: {
-        alias: null,
-        disabled: false,
-        key: 'event.category',
-        negate: false,
-        params: {
-          query: 'file',
-        },
-        type: 'phrase',
-      },
-      query: {
-        match_phrase: {
-          'event.category': 'file',
-        },
-      },
-    },
-  ],
-  saved_id: 'test123',
-};
-
-export const mockRule = (id: string): Rule => ({
-  actions: [],
-  created_at: '2020-01-10T21:11:45.839Z',
-  updated_at: '2020-01-10T21:11:45.839Z',
-  created_by: 'elastic',
-  description: '24/7',
-  enabled: true,
-  false_positives: [],
-  filters: [],
-  from: 'now-300s',
-  id,
-  immutable: false,
-  index: ['auditbeat-*'],
-  interval: '5m',
-  rule_id: 'b5ba41ab-aaf3-4f43-971b-bdf9434ce0ea',
-  language: 'kuery',
-  output_index: '.siem-signals-default',
-  max_signals: 100,
-  risk_score: 21,
-  name: 'Home Grown!',
-  query: '',
-  references: [],
-  saved_id: "Garrett's IP",
-  timeline_id: '86aa74d0-2136-11ea-9864-ebc8cc1cb8c2',
-  timeline_title: 'Untitled timeline',
-  meta: { from: '0m' },
-  severity: 'low',
-  updated_by: 'elastic',
-  tags: [],
-  to: 'now',
-  type: 'saved_query',
-  threat: [],
-  throttle: 'no_actions',
-  note: '# this is some markdown documentation',
-  version: 1,
-});
-
-export const mockRuleWithEverything = (id: string): Rule => ({
-  actions: [],
-  created_at: '2020-01-10T21:11:45.839Z',
-  updated_at: '2020-01-10T21:11:45.839Z',
-  created_by: 'elastic',
-  description: '24/7',
-  enabled: true,
-  false_positives: ['test'],
-  filters: [
-    {
-      $state: {
-        store: esFilters.FilterStateStore.GLOBAL_STATE,
-      },
-      meta: {
-        alias: null,
-        disabled: false,
-        key: 'event.category',
-        negate: false,
-        params: {
-          query: 'file',
-        },
-        type: 'phrase',
-      },
-      query: {
-        match_phrase: {
-          'event.category': 'file',
-        },
-      },
-    },
-  ],
-  from: 'now-300s',
-  id,
-  immutable: false,
-  index: ['auditbeat-*'],
-  interval: '5m',
-  rule_id: 'b5ba41ab-aaf3-4f43-971b-bdf9434ce0ea',
-  language: 'kuery',
-  output_index: '.siem-signals-default',
-  max_signals: 100,
-  risk_score: 21,
-  name: 'Query with rule-id',
-  query: 'user.name: root or user.name: admin',
-  references: ['www.test.co'],
-  saved_id: 'test123',
-  timeline_id: '86aa74d0-2136-11ea-9864-ebc8cc1cb8c2',
-  timeline_title: 'Titled timeline',
-  meta: { from: '0m' },
-  severity: 'low',
-  updated_by: 'elastic',
-  tags: ['tag1', 'tag2'],
-  to: 'now',
-  type: 'saved_query',
-  threat: [
-    {
-      framework: 'mockFramework',
-      tactic: {
-        id: '1234',
-        name: 'tactic1',
-        reference: 'reference1',
-      },
-      technique: [
-        {
-          id: '456',
-          name: 'technique1',
-          reference: 'technique reference',
-        },
-      ],
-    },
-  ],
-  throttle: 'no_actions',
-  note: '# this is some markdown documentation',
-  version: 1,
-});
-
-export const mockAboutStepRule = (isNew = false): AboutStepRule => ({
-  isNew,
-  name: 'Query with rule-id',
-  description: '24/7',
-  severity: 'low',
-  riskScore: 21,
-  references: ['www.test.co'],
-  falsePositives: ['test'],
-  tags: ['tag1', 'tag2'],
-  threat: [
-    {
-      framework: 'mockFramework',
-      tactic: {
-        id: '1234',
-        name: 'tactic1',
-        reference: 'reference1',
-      },
-      technique: [
-        {
-          id: '456',
-          name: 'technique1',
-          reference: 'technique reference',
-        },
-      ],
-    },
-  ],
-  note: '# this is some markdown documentation',
-});
-
-export const mockActionsStepRule = (isNew = false, enabled = false): ActionsStepRule => ({
-  isNew,
-  actions: [],
-  kibanaSiemAppUrl: 'http://localhost:5601/app/siem',
-  enabled,
-  throttle: 'no_actions',
-});
-
-export const mockDefineStepRule = (isNew = false): DefineStepRule => ({
-  isNew,
-  ruleType: 'query',
-  anomalyThreshold: 50,
-  machineLearningJobId: '',
-  index: ['filebeat-'],
-  queryBar: mockQueryBar,
-  timeline: {
-    id: '86aa74d0-2136-11ea-9864-ebc8cc1cb8c2',
-    title: 'Titled timeline',
-  },
-});
-
-export const mockScheduleStepRule = (isNew = false): ScheduleStepRule => ({
-  isNew,
-  interval: '5m',
-  from: '6m',
-  to: 'now',
-});
-
-export const mockRuleError = (id: string): RuleError => ({
-  rule_id: id,
-  error: { status_code: 404, message: `id: "${id}" not found` },
-});
-
-export const mockRules: Rule[] = [
-  mockRule('abe6c564-050d-45a5-aaf0-386c37dd1f61'),
-  mockRule('63f06f34-c181-4b2d-af35-f2ace572a1ee'),
-];
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/all/actions.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/all/actions.tsx
deleted file mode 100644
index bc5d0c32bb9c6c..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/all/actions.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-/*
- * 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 * as H from 'history';
-import React, { Dispatch } from 'react';
-
-import { DETECTION_ENGINE_PAGE_NAME } from '../../../../components/link_to/redirect_to_detection_engine';
-import {
-  deleteRules,
-  duplicateRules,
-  enableRules,
-  Rule,
-} from '../../../../containers/detection_engine/rules';
-import { Action } from './reducer';
-
-import {
-  ActionToaster,
-  displayErrorToast,
-  displaySuccessToast,
-  errorToToaster,
-} from '../../../../components/toasters';
-import { track, METRIC_TYPE, TELEMETRY_EVENT } from '../../../../lib/telemetry';
-
-import * as i18n from '../translations';
-import { bucketRulesResponse } from './helpers';
-
-export const editRuleAction = (rule: Rule, history: H.History) => {
-  history.push(`/${DETECTION_ENGINE_PAGE_NAME}/rules/id/${rule.id}/edit`);
-};
-
-export const duplicateRulesAction = async (
-  rules: Rule[],
-  ruleIds: string[],
-  dispatch: React.Dispatch<Action>,
-  dispatchToaster: Dispatch<ActionToaster>
-) => {
-  try {
-    dispatch({ type: 'loadingRuleIds', ids: ruleIds, actionType: 'duplicate' });
-    const response = await duplicateRules({ rules });
-    const { errors } = bucketRulesResponse(response);
-    if (errors.length > 0) {
-      displayErrorToast(
-        i18n.DUPLICATE_RULE_ERROR,
-        errors.map(e => e.error.message),
-        dispatchToaster
-      );
-    } else {
-      displaySuccessToast(i18n.SUCCESSFULLY_DUPLICATED_RULES(ruleIds.length), dispatchToaster);
-    }
-    dispatch({ type: 'loadingRuleIds', ids: [], actionType: null });
-  } catch (error) {
-    dispatch({ type: 'loadingRuleIds', ids: [], actionType: null });
-    errorToToaster({ title: i18n.DUPLICATE_RULE_ERROR, error, dispatchToaster });
-  }
-};
-
-export const exportRulesAction = (exportRuleId: string[], dispatch: React.Dispatch<Action>) => {
-  dispatch({ type: 'exportRuleIds', ids: exportRuleId });
-};
-
-export const deleteRulesAction = async (
-  ruleIds: string[],
-  dispatch: React.Dispatch<Action>,
-  dispatchToaster: Dispatch<ActionToaster>,
-  onRuleDeleted?: () => void
-) => {
-  try {
-    dispatch({ type: 'loadingRuleIds', ids: ruleIds, actionType: 'delete' });
-    const response = await deleteRules({ ids: ruleIds });
-    const { errors } = bucketRulesResponse(response);
-    dispatch({ type: 'loadingRuleIds', ids: [], actionType: null });
-    if (errors.length > 0) {
-      displayErrorToast(
-        i18n.BATCH_ACTION_DELETE_SELECTED_ERROR(ruleIds.length),
-        errors.map(e => e.error.message),
-        dispatchToaster
-      );
-    } else if (onRuleDeleted) {
-      onRuleDeleted();
-    }
-  } catch (error) {
-    dispatch({ type: 'loadingRuleIds', ids: [], actionType: null });
-    errorToToaster({
-      title: i18n.BATCH_ACTION_DELETE_SELECTED_ERROR(ruleIds.length),
-      error,
-      dispatchToaster,
-    });
-  }
-};
-
-export const enableRulesAction = async (
-  ids: string[],
-  enabled: boolean,
-  dispatch: React.Dispatch<Action>,
-  dispatchToaster: Dispatch<ActionToaster>
-) => {
-  const errorTitle = enabled
-    ? i18n.BATCH_ACTION_ACTIVATE_SELECTED_ERROR(ids.length)
-    : i18n.BATCH_ACTION_DEACTIVATE_SELECTED_ERROR(ids.length);
-
-  try {
-    dispatch({ type: 'loadingRuleIds', ids, actionType: enabled ? 'enable' : 'disable' });
-
-    const response = await enableRules({ ids, enabled });
-    const { rules, errors } = bucketRulesResponse(response);
-
-    dispatch({ type: 'updateRules', rules });
-
-    if (errors.length > 0) {
-      displayErrorToast(
-        errorTitle,
-        errors.map(e => e.error.message),
-        dispatchToaster
-      );
-    }
-
-    if (rules.some(rule => rule.immutable)) {
-      track(
-        METRIC_TYPE.COUNT,
-        enabled ? TELEMETRY_EVENT.SIEM_RULE_ENABLED : TELEMETRY_EVENT.SIEM_RULE_DISABLED
-      );
-    }
-    if (rules.some(rule => !rule.immutable)) {
-      track(
-        METRIC_TYPE.COUNT,
-        enabled ? TELEMETRY_EVENT.CUSTOM_RULE_ENABLED : TELEMETRY_EVENT.CUSTOM_RULE_DISABLED
-      );
-    }
-  } catch (e) {
-    displayErrorToast(errorTitle, [e.message], dispatchToaster);
-    dispatch({ type: 'loadingRuleIds', ids: [], actionType: null });
-  }
-};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/all/columns.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/all/columns.tsx
deleted file mode 100644
index 542a004cb37272..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/all/columns.tsx
+++ /dev/null
@@ -1,333 +0,0 @@
-/*
- * 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.
- */
-
-/* eslint-disable react/display-name */
-
-import {
-  EuiBadge,
-  EuiLink,
-  EuiBasicTableColumn,
-  EuiTableActionsColumnType,
-  EuiText,
-  EuiHealth,
-  EuiToolTip,
-} from '@elastic/eui';
-import { FormattedRelative } from '@kbn/i18n/react';
-import * as H from 'history';
-import React, { Dispatch } from 'react';
-
-import { isMlRule } from '../../../../../common/machine_learning/helpers';
-import { Rule, RuleStatus } from '../../../../containers/detection_engine/rules';
-import { getEmptyTagValue } from '../../../../components/empty_value';
-import { FormattedDate } from '../../../../components/formatted_date';
-import { getRuleDetailsUrl } from '../../../../components/link_to/redirect_to_detection_engine';
-import { ActionToaster } from '../../../../components/toasters';
-import { TruncatableText } from '../../../../components/truncatable_text';
-import { getStatusColor } from '../components/rule_status/helpers';
-import { RuleSwitch } from '../components/rule_switch';
-import { SeverityBadge } from '../components/severity_badge';
-import * as i18n from '../translations';
-import {
-  deleteRulesAction,
-  duplicateRulesAction,
-  editRuleAction,
-  exportRulesAction,
-} from './actions';
-import { Action } from './reducer';
-import { LocalizedDateTooltip } from '../../../../components/localized_date_tooltip';
-import * as detectionI18n from '../../translations';
-
-export const getActions = (
-  dispatch: React.Dispatch<Action>,
-  dispatchToaster: Dispatch<ActionToaster>,
-  history: H.History,
-  reFetchRules: (refreshPrePackagedRule?: boolean) => void
-) => [
-  {
-    description: i18n.EDIT_RULE_SETTINGS,
-    icon: 'controlsHorizontal',
-    name: i18n.EDIT_RULE_SETTINGS,
-    onClick: (rowItem: Rule) => editRuleAction(rowItem, history),
-  },
-  {
-    description: i18n.DUPLICATE_RULE,
-    icon: 'copy',
-    name: i18n.DUPLICATE_RULE,
-    onClick: async (rowItem: Rule) => {
-      await duplicateRulesAction([rowItem], [rowItem.id], dispatch, dispatchToaster);
-      await reFetchRules(true);
-    },
-  },
-  {
-    'data-test-subj': 'exportRuleAction',
-    description: i18n.EXPORT_RULE,
-    icon: 'exportAction',
-    name: i18n.EXPORT_RULE,
-    onClick: (rowItem: Rule) => exportRulesAction([rowItem.rule_id], dispatch),
-    enabled: (rowItem: Rule) => !rowItem.immutable,
-  },
-  {
-    'data-test-subj': 'deleteRuleAction',
-    description: i18n.DELETE_RULE,
-    icon: 'trash',
-    name: i18n.DELETE_RULE,
-    onClick: async (rowItem: Rule) => {
-      await deleteRulesAction([rowItem.id], dispatch, dispatchToaster);
-      await reFetchRules(true);
-    },
-  },
-];
-
-export type RuleStatusRowItemType = RuleStatus & {
-  name: string;
-  id: string;
-};
-export type RulesColumns = EuiBasicTableColumn<Rule> | EuiTableActionsColumnType<Rule>;
-export type RulesStatusesColumns = EuiBasicTableColumn<RuleStatusRowItemType>;
-
-interface GetColumns {
-  dispatch: React.Dispatch<Action>;
-  dispatchToaster: Dispatch<ActionToaster>;
-  history: H.History;
-  hasMlPermissions: boolean;
-  hasNoPermissions: boolean;
-  loadingRuleIds: string[];
-  reFetchRules: (refreshPrePackagedRule?: boolean) => void;
-}
-
-// Michael: Are we able to do custom, in-table-header filters, as shown in my wireframes?
-export const getColumns = ({
-  dispatch,
-  dispatchToaster,
-  history,
-  hasMlPermissions,
-  hasNoPermissions,
-  loadingRuleIds,
-  reFetchRules,
-}: GetColumns): RulesColumns[] => {
-  const cols: RulesColumns[] = [
-    {
-      field: 'name',
-      name: i18n.COLUMN_RULE,
-      render: (value: Rule['name'], item: Rule) => (
-        <EuiLink data-test-subj="ruleName" href={getRuleDetailsUrl(item.id)}>
-          {value}
-        </EuiLink>
-      ),
-      truncateText: true,
-      width: '24%',
-    },
-    {
-      field: 'risk_score',
-      name: i18n.COLUMN_RISK_SCORE,
-      render: (value: Rule['risk_score']) => (
-        <EuiText data-test-subj="riskScore" size="s">
-          {value}
-        </EuiText>
-      ),
-      truncateText: true,
-      width: '14%',
-    },
-    {
-      field: 'severity',
-      name: i18n.COLUMN_SEVERITY,
-      render: (value: Rule['severity']) => <SeverityBadge value={value} />,
-      truncateText: true,
-      width: '16%',
-    },
-    {
-      field: 'status_date',
-      name: i18n.COLUMN_LAST_COMPLETE_RUN,
-      render: (value: Rule['status_date']) => {
-        return value == null ? (
-          getEmptyTagValue()
-        ) : (
-          <LocalizedDateTooltip fieldName={i18n.COLUMN_LAST_COMPLETE_RUN} date={new Date(value)}>
-            <FormattedRelative value={value} />
-          </LocalizedDateTooltip>
-        );
-      },
-      truncateText: true,
-      width: '20%',
-    },
-    {
-      field: 'status',
-      name: i18n.COLUMN_LAST_RESPONSE,
-      render: (value: Rule['status']) => {
-        return (
-          <>
-            <EuiHealth color={getStatusColor(value ?? null)}>
-              {value ?? getEmptyTagValue()}
-            </EuiHealth>
-          </>
-        );
-      },
-      width: '16%',
-      truncateText: true,
-    },
-    {
-      field: 'tags',
-      name: i18n.COLUMN_TAGS,
-      render: (value: Rule['tags']) => (
-        <TruncatableText data-test-subj="tags">
-          {value.map((tag, i) => (
-            <EuiBadge color="hollow" key={`${tag}-${i}`}>
-              {tag}
-            </EuiBadge>
-          ))}
-        </TruncatableText>
-      ),
-      truncateText: true,
-      width: '20%',
-    },
-    {
-      align: 'center',
-      field: 'enabled',
-      name: i18n.COLUMN_ACTIVATE,
-      render: (value: Rule['enabled'], item: Rule) => (
-        <EuiToolTip
-          position="top"
-          content={
-            isMlRule(item.type) && !hasMlPermissions
-              ? detectionI18n.ML_RULES_DISABLED_MESSAGE
-              : undefined
-          }
-        >
-          <RuleSwitch
-            data-test-subj="enabled"
-            dispatch={dispatch}
-            id={item.id}
-            enabled={item.enabled}
-            isDisabled={
-              hasNoPermissions || (isMlRule(item.type) && !hasMlPermissions && !item.enabled)
-            }
-            isLoading={loadingRuleIds.includes(item.id)}
-          />
-        </EuiToolTip>
-      ),
-      sortable: true,
-      width: '95px',
-    },
-  ];
-  const actions: RulesColumns[] = [
-    {
-      actions: getActions(dispatch, dispatchToaster, history, reFetchRules),
-      width: '40px',
-    } as EuiTableActionsColumnType<Rule>,
-  ];
-
-  return hasNoPermissions ? cols : [...cols, ...actions];
-};
-
-export const getMonitoringColumns = (): RulesStatusesColumns[] => {
-  const cols: RulesStatusesColumns[] = [
-    {
-      field: 'name',
-      name: i18n.COLUMN_RULE,
-      render: (value: RuleStatus['current_status']['status'], item: RuleStatusRowItemType) => {
-        return (
-          <EuiLink data-test-subj="ruleName" href={getRuleDetailsUrl(item.id)}>
-            {value}
-          </EuiLink>
-        );
-      },
-      truncateText: true,
-      width: '24%',
-    },
-    {
-      field: 'current_status.bulk_create_time_durations',
-      name: i18n.COLUMN_INDEXING_TIMES,
-      render: (value: RuleStatus['current_status']['bulk_create_time_durations']) => (
-        <EuiText data-test-subj="bulk_create_time_durations" size="s">
-          {value != null && value.length > 0
-            ? Math.max(...value?.map(item => Number.parseFloat(item)))
-            : getEmptyTagValue()}
-        </EuiText>
-      ),
-      truncateText: true,
-      width: '14%',
-    },
-    {
-      field: 'current_status.search_after_time_durations',
-      name: i18n.COLUMN_QUERY_TIMES,
-      render: (value: RuleStatus['current_status']['search_after_time_durations']) => (
-        <EuiText data-test-subj="search_after_time_durations" size="s">
-          {value != null && value.length > 0
-            ? Math.max(...value?.map(item => Number.parseFloat(item)))
-            : getEmptyTagValue()}
-        </EuiText>
-      ),
-      truncateText: true,
-      width: '14%',
-    },
-    {
-      field: 'current_status.gap',
-      name: i18n.COLUMN_GAP,
-      render: (value: RuleStatus['current_status']['gap']) => (
-        <EuiText data-test-subj="gap" size="s">
-          {value ?? getEmptyTagValue()}
-        </EuiText>
-      ),
-      truncateText: true,
-      width: '14%',
-    },
-    {
-      field: 'current_status.last_look_back_date',
-      name: i18n.COLUMN_LAST_LOOKBACK_DATE,
-      render: (value: RuleStatus['current_status']['last_look_back_date']) => {
-        return value == null ? (
-          getEmptyTagValue()
-        ) : (
-          <FormattedDate value={value} fieldName={'last look back date'} />
-        );
-      },
-      truncateText: true,
-      width: '16%',
-    },
-    {
-      field: 'current_status.status_date',
-      name: i18n.COLUMN_LAST_COMPLETE_RUN,
-      render: (value: RuleStatus['current_status']['status_date']) => {
-        return value == null ? (
-          getEmptyTagValue()
-        ) : (
-          <LocalizedDateTooltip fieldName={i18n.COLUMN_LAST_COMPLETE_RUN} date={new Date(value)}>
-            <FormattedRelative value={value} />
-          </LocalizedDateTooltip>
-        );
-      },
-      truncateText: true,
-      width: '20%',
-    },
-    {
-      field: 'current_status.status',
-      name: i18n.COLUMN_LAST_RESPONSE,
-      render: (value: RuleStatus['current_status']['status']) => {
-        return (
-          <>
-            <EuiHealth color={getStatusColor(value ?? null)}>
-              {value ?? getEmptyTagValue()}
-            </EuiHealth>
-          </>
-        );
-      },
-      width: '16%',
-      truncateText: true,
-    },
-    {
-      field: 'activate',
-      name: i18n.COLUMN_ACTIVATE,
-      render: (value: Rule['enabled']) => (
-        <EuiText data-test-subj="search_after_time_durations" size="s">
-          {value ? i18n.ACTIVE : i18n.INACTIVE}
-        </EuiText>
-      ),
-      width: '95px',
-    },
-  ];
-
-  return cols;
-};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/all/helpers.test.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/all/helpers.test.tsx
deleted file mode 100644
index 062d7967bf3018..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/all/helpers.test.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-/*
- * 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 { bucketRulesResponse, showRulesTable } from './helpers';
-import { mockRule, mockRuleError } from './__mocks__/mock';
-import uuid from 'uuid';
-import { Rule, RuleError } from '../../../../containers/detection_engine/rules';
-
-describe('AllRulesTable Helpers', () => {
-  const mockRule1: Readonly<Rule> = mockRule(uuid.v4());
-  const mockRule2: Readonly<Rule> = mockRule(uuid.v4());
-  const mockRuleError1: Readonly<RuleError> = mockRuleError(uuid.v4());
-  const mockRuleError2: Readonly<RuleError> = mockRuleError(uuid.v4());
-
-  describe('bucketRulesResponse', () => {
-    test('buckets empty response', () => {
-      const bucketedResponse = bucketRulesResponse([]);
-      expect(bucketedResponse).toEqual({ rules: [], errors: [] });
-    });
-
-    test('buckets all error response', () => {
-      const bucketedResponse = bucketRulesResponse([mockRuleError1, mockRuleError2]);
-      expect(bucketedResponse).toEqual({ rules: [], errors: [mockRuleError1, mockRuleError2] });
-    });
-
-    test('buckets all success response', () => {
-      const bucketedResponse = bucketRulesResponse([mockRule1, mockRule2]);
-      expect(bucketedResponse).toEqual({ rules: [mockRule1, mockRule2], errors: [] });
-    });
-
-    test('buckets mixed success/error response', () => {
-      const bucketedResponse = bucketRulesResponse([
-        mockRule1,
-        mockRuleError1,
-        mockRule2,
-        mockRuleError2,
-      ]);
-      expect(bucketedResponse).toEqual({
-        rules: [mockRule1, mockRule2],
-        errors: [mockRuleError1, mockRuleError2],
-      });
-    });
-  });
-
-  describe('showRulesTable', () => {
-    test('returns false when rulesCustomInstalled and rulesInstalled are null', () => {
-      const result = showRulesTable({
-        rulesCustomInstalled: null,
-        rulesInstalled: null,
-      });
-      expect(result).toBeFalsy();
-    });
-
-    test('returns false when rulesCustomInstalled and rulesInstalled are 0', () => {
-      const result = showRulesTable({
-        rulesCustomInstalled: 0,
-        rulesInstalled: 0,
-      });
-      expect(result).toBeFalsy();
-    });
-
-    test('returns false when both rulesCustomInstalled and rulesInstalled checks return false', () => {
-      const result = showRulesTable({
-        rulesCustomInstalled: 0,
-        rulesInstalled: null,
-      });
-      expect(result).toBeFalsy();
-    });
-
-    test('returns true if rulesCustomInstalled is not null or 0', () => {
-      const result = showRulesTable({
-        rulesCustomInstalled: 5,
-        rulesInstalled: null,
-      });
-      expect(result).toBeTruthy();
-    });
-
-    test('returns true if rulesInstalled is not null or 0', () => {
-      const result = showRulesTable({
-        rulesCustomInstalled: null,
-        rulesInstalled: 5,
-      });
-      expect(result).toBeTruthy();
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/all/helpers.ts b/x-pack/plugins/siem/public/pages/detection_engine/rules/all/helpers.ts
deleted file mode 100644
index 0ebeb84d57468c..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/all/helpers.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
- * 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 {
-  BulkRuleResponse,
-  RuleResponseBuckets,
-} from '../../../../containers/detection_engine/rules';
-
-/**
- * Separates rules/errors from bulk rules API response (create/update/delete)
- *
- * @param response BulkRuleResponse from bulk rules API
- */
-export const bucketRulesResponse = (response: BulkRuleResponse) =>
-  response.reduce<RuleResponseBuckets>(
-    (acc, cv): RuleResponseBuckets => {
-      return 'error' in cv
-        ? { rules: [...acc.rules], errors: [...acc.errors, cv] }
-        : { rules: [...acc.rules, cv], errors: [...acc.errors] };
-    },
-    { rules: [], errors: [] }
-  );
-
-export const showRulesTable = ({
-  rulesCustomInstalled,
-  rulesInstalled,
-}: {
-  rulesCustomInstalled: number | null;
-  rulesInstalled: number | null;
-}) =>
-  (rulesCustomInstalled != null && rulesCustomInstalled > 0) ||
-  (rulesInstalled != null && rulesInstalled > 0);
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/all/index.test.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/all/index.test.tsx
deleted file mode 100644
index 59b3b02ff3587a..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/all/index.test.tsx
+++ /dev/null
@@ -1,230 +0,0 @@
-/*
- * 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, mount } from 'enzyme';
-import { act } from 'react-dom/test-utils';
-
-import { createKibanaContextProviderMock } from '../../../../mock/kibana_react';
-import { TestProviders } from '../../../../mock';
-import { wait } from '../../../../lib/helpers';
-import { AllRules } from './index';
-
-jest.mock('./reducer', () => {
-  return {
-    allRulesReducer: jest.fn().mockReturnValue(() => ({
-      exportRuleIds: [],
-      filterOptions: {
-        filter: 'some filter',
-        sortField: 'some sort field',
-        sortOrder: 'desc',
-      },
-      loadingRuleIds: [],
-      loadingRulesAction: null,
-      pagination: {
-        page: 1,
-        perPage: 20,
-        total: 1,
-      },
-      rules: [
-        {
-          actions: [],
-          created_at: '2020-02-14T19:49:28.178Z',
-          created_by: 'elastic',
-          description: 'jibber jabber',
-          enabled: false,
-          false_positives: [],
-          filters: [],
-          from: 'now-660s',
-          id: 'rule-id-1',
-          immutable: true,
-          index: ['endgame-*'],
-          interval: '10m',
-          language: 'kuery',
-          max_signals: 100,
-          name: 'Credential Dumping - Detected - Elastic Endpoint',
-          output_index: '.siem-signals-default',
-          query: 'host.name:*',
-          references: [],
-          risk_score: 73,
-          rule_id: '571afc56-5ed9-465d-a2a9-045f099f6e7e',
-          severity: 'high',
-          tags: ['Elastic', 'Endpoint'],
-          threat: [],
-          throttle: null,
-          to: 'now',
-          type: 'query',
-          updated_at: '2020-02-14T19:49:28.320Z',
-          updated_by: 'elastic',
-          version: 1,
-        },
-      ],
-      selectedRuleIds: [],
-    })),
-  };
-});
-
-jest.mock('../../../../containers/detection_engine/rules', () => {
-  return {
-    useRules: jest.fn().mockReturnValue([
-      false,
-      {
-        page: 1,
-        perPage: 20,
-        total: 1,
-        data: [
-          {
-            actions: [],
-            created_at: '2020-02-14T19:49:28.178Z',
-            created_by: 'elastic',
-            description: 'jibber jabber',
-            enabled: false,
-            false_positives: [],
-            filters: [],
-            from: 'now-660s',
-            id: 'rule-id-1',
-            immutable: true,
-            index: ['endgame-*'],
-            interval: '10m',
-            language: 'kuery',
-            max_signals: 100,
-            name: 'Credential Dumping - Detected - Elastic Endpoint',
-            output_index: '.siem-signals-default',
-            query: 'host.name:*',
-            references: [],
-            risk_score: 73,
-            rule_id: '571afc56-5ed9-465d-a2a9-045f099f6e7e',
-            severity: 'high',
-            tags: ['Elastic', 'Endpoint'],
-            threat: [],
-            throttle: null,
-            to: 'now',
-            type: 'query',
-            updated_at: '2020-02-14T19:49:28.320Z',
-            updated_by: 'elastic',
-            version: 1,
-          },
-        ],
-      },
-    ]),
-    useRulesStatuses: jest.fn().mockReturnValue({
-      loading: false,
-      rulesStatuses: [
-        {
-          current_status: {
-            alert_id: 'alertId',
-            bulk_create_time_durations: ['2235.01'],
-            gap: null,
-            last_failure_at: null,
-            last_failure_message: null,
-            last_look_back_date: new Date().toISOString(),
-            last_success_at: new Date().toISOString(),
-            last_success_message: 'it is a success',
-            search_after_time_durations: ['616.97'],
-            status: 'succeeded',
-            status_date: new Date().toISOString(),
-          },
-          failures: [],
-          id: '12345678987654321',
-          activate: true,
-          name: 'Test rule',
-        },
-      ],
-    }),
-  };
-});
-
-jest.mock('react-router-dom', () => {
-  const originalModule = jest.requireActual('react-router-dom');
-
-  return {
-    ...originalModule,
-    useHistory: jest.fn(),
-  };
-});
-
-describe('AllRules', () => {
-  it('renders correctly', () => {
-    const wrapper = shallow(
-      <AllRules
-        createPrePackagedRules={jest.fn()}
-        hasNoPermissions={false}
-        loading={false}
-        loadingCreatePrePackagedRules={false}
-        refetchPrePackagedRulesStatus={jest.fn()}
-        rulesCustomInstalled={0}
-        rulesInstalled={0}
-        rulesNotInstalled={0}
-        rulesNotUpdated={0}
-        setRefreshRulesData={jest.fn()}
-      />
-    );
-
-    expect(wrapper.find('[title="All rules"]')).toHaveLength(1);
-  });
-
-  it('renders rules tab', async () => {
-    const KibanaContext = createKibanaContextProviderMock();
-    const wrapper = mount(
-      <TestProviders>
-        <KibanaContext services={{ storage: { get: jest.fn() } }}>
-          <AllRules
-            createPrePackagedRules={jest.fn()}
-            hasNoPermissions={false}
-            loading={false}
-            loadingCreatePrePackagedRules={false}
-            refetchPrePackagedRulesStatus={jest.fn()}
-            rulesCustomInstalled={1}
-            rulesInstalled={0}
-            rulesNotInstalled={0}
-            rulesNotUpdated={0}
-            setRefreshRulesData={jest.fn()}
-          />
-        </KibanaContext>
-      </TestProviders>
-    );
-
-    await act(async () => {
-      await wait();
-
-      expect(wrapper.exists('[data-test-subj="monitoring-table"]')).toBeFalsy();
-      expect(wrapper.exists('[data-test-subj="rules-table"]')).toBeTruthy();
-    });
-  });
-
-  it('renders monitoring tab when monitoring tab clicked', async () => {
-    const KibanaContext = createKibanaContextProviderMock();
-
-    const wrapper = mount(
-      <TestProviders>
-        <KibanaContext services={{ storage: { get: jest.fn() } }}>
-          <AllRules
-            createPrePackagedRules={jest.fn()}
-            hasNoPermissions={false}
-            loading={false}
-            loadingCreatePrePackagedRules={false}
-            refetchPrePackagedRulesStatus={jest.fn()}
-            rulesCustomInstalled={1}
-            rulesInstalled={0}
-            rulesNotInstalled={0}
-            rulesNotUpdated={0}
-            setRefreshRulesData={jest.fn()}
-          />
-        </KibanaContext>
-      </TestProviders>
-    );
-    const monitoringTab = wrapper.find('[data-test-subj="allRulesTableTab-monitoring"] button');
-    monitoringTab.simulate('click');
-
-    await act(async () => {
-      wrapper.update();
-      await wait();
-
-      expect(wrapper.exists('[data-test-subj="monitoring-table"]')).toBeTruthy();
-      expect(wrapper.exists('[data-test-subj="rules-table"]')).toBeFalsy();
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/all/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/all/index.tsx
deleted file mode 100644
index d9a2fafd144bcb..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/all/index.tsx
+++ /dev/null
@@ -1,423 +0,0 @@
-/*
- * 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 {
-  EuiBasicTable,
-  EuiContextMenuPanel,
-  EuiLoadingContent,
-  EuiSpacer,
-  EuiTab,
-  EuiTabs,
-} from '@elastic/eui';
-import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
-import { useHistory } from 'react-router-dom';
-import uuid from 'uuid';
-
-import {
-  useRules,
-  useRulesStatuses,
-  CreatePreBuiltRules,
-  FilterOptions,
-  Rule,
-  PaginationOptions,
-  exportRules,
-} from '../../../../containers/detection_engine/rules';
-import { HeaderSection } from '../../../../components/header_section';
-import {
-  UtilityBar,
-  UtilityBarAction,
-  UtilityBarGroup,
-  UtilityBarSection,
-  UtilityBarText,
-} from '../../../../components/utility_bar';
-import { useStateToaster } from '../../../../components/toasters';
-import { Loader } from '../../../../components/loader';
-import { Panel } from '../../../../components/panel';
-import { PrePackagedRulesPrompt } from '../components/pre_packaged_rules/load_empty_prompt';
-import { GenericDownloader } from '../../../../components/generic_downloader';
-import { AllRulesTables, SortingType } from '../components/all_rules_tables';
-import { getPrePackagedRuleStatus } from '../helpers';
-import * as i18n from '../translations';
-import { EuiBasicTableOnChange } from '../types';
-import { getBatchItems } from './batch_actions';
-import { getColumns, getMonitoringColumns } from './columns';
-import { showRulesTable } from './helpers';
-import { allRulesReducer, State } from './reducer';
-import { RulesTableFilters } from './rules_table_filters/rules_table_filters';
-import { useMlCapabilities } from '../../../../components/ml_popover/hooks/use_ml_capabilities';
-import { hasMlAdminPermissions } from '../../../../../common/machine_learning/has_ml_admin_permissions';
-
-const SORT_FIELD = 'enabled';
-const initialState: State = {
-  exportRuleIds: [],
-  filterOptions: {
-    filter: '',
-    sortField: SORT_FIELD,
-    sortOrder: 'desc',
-  },
-  loadingRuleIds: [],
-  loadingRulesAction: null,
-  pagination: {
-    page: 1,
-    perPage: 20,
-    total: 0,
-  },
-  rules: [],
-  selectedRuleIds: [],
-};
-
-interface AllRulesProps {
-  createPrePackagedRules: CreatePreBuiltRules | null;
-  hasNoPermissions: boolean;
-  loading: boolean;
-  loadingCreatePrePackagedRules: boolean;
-  refetchPrePackagedRulesStatus: () => void;
-  rulesCustomInstalled: number | null;
-  rulesInstalled: number | null;
-  rulesNotInstalled: number | null;
-  rulesNotUpdated: number | null;
-  setRefreshRulesData: (refreshRule: (refreshPrePackagedRule?: boolean) => void) => void;
-}
-
-export enum AllRulesTabs {
-  rules = 'rules',
-  monitoring = 'monitoring',
-}
-
-const allRulesTabs = [
-  {
-    id: AllRulesTabs.rules,
-    name: i18n.RULES_TAB,
-    disabled: false,
-  },
-  {
-    id: AllRulesTabs.monitoring,
-    name: i18n.MONITORING_TAB,
-    disabled: false,
-  },
-];
-
-/**
- * Table Component for displaying all Rules for a given cluster. Provides the ability to filter
- * by name, sort by enabled, and perform the following actions:
- *   * Enable/Disable
- *   * Duplicate
- *   * Delete
- *   * Import/Export
- */
-export const AllRules = React.memo<AllRulesProps>(
-  ({
-    createPrePackagedRules,
-    hasNoPermissions,
-    loading,
-    loadingCreatePrePackagedRules,
-    refetchPrePackagedRulesStatus,
-    rulesCustomInstalled,
-    rulesInstalled,
-    rulesNotInstalled,
-    rulesNotUpdated,
-    setRefreshRulesData,
-  }) => {
-    const [initLoading, setInitLoading] = useState(true);
-    const tableRef = useRef<EuiBasicTable>();
-    const [
-      {
-        exportRuleIds,
-        filterOptions,
-        loadingRuleIds,
-        loadingRulesAction,
-        pagination,
-        rules,
-        selectedRuleIds,
-      },
-      dispatch,
-    ] = useReducer(allRulesReducer(tableRef), initialState);
-    const { loading: isLoadingRulesStatuses, rulesStatuses } = useRulesStatuses(rules);
-    const history = useHistory();
-    const [, dispatchToaster] = useStateToaster();
-    const mlCapabilities = useMlCapabilities();
-    const [allRulesTab, setAllRulesTab] = useState(AllRulesTabs.rules);
-
-    // TODO: Refactor license check + hasMlAdminPermissions to common check
-    const hasMlPermissions =
-      mlCapabilities.isPlatinumOrTrialLicense && hasMlAdminPermissions(mlCapabilities);
-
-    const setRules = useCallback((newRules: Rule[], newPagination: Partial<PaginationOptions>) => {
-      dispatch({
-        type: 'setRules',
-        rules: newRules,
-        pagination: newPagination,
-      });
-    }, []);
-
-    const [isLoadingRules, , reFetchRulesData] = useRules({
-      pagination,
-      filterOptions,
-      refetchPrePackagedRulesStatus,
-      dispatchRulesInReducer: setRules,
-    });
-
-    const sorting = useMemo(
-      (): SortingType => ({ sort: { field: 'enabled', direction: filterOptions.sortOrder } }),
-      [filterOptions.sortOrder]
-    );
-
-    const prePackagedRuleStatus = getPrePackagedRuleStatus(
-      rulesInstalled,
-      rulesNotInstalled,
-      rulesNotUpdated
-    );
-
-    const getBatchItemsPopoverContent = useCallback(
-      (closePopover: () => void) => (
-        <EuiContextMenuPanel
-          items={getBatchItems({
-            closePopover,
-            dispatch,
-            dispatchToaster,
-            hasMlPermissions,
-            loadingRuleIds,
-            selectedRuleIds,
-            reFetchRules: reFetchRulesData,
-            rules,
-          })}
-        />
-      ),
-      [
-        dispatch,
-        dispatchToaster,
-        hasMlPermissions,
-        loadingRuleIds,
-        reFetchRulesData,
-        rules,
-        selectedRuleIds,
-      ]
-    );
-
-    const paginationMemo = useMemo(
-      () => ({
-        pageIndex: pagination.page - 1,
-        pageSize: pagination.perPage,
-        totalItemCount: pagination.total,
-        pageSizeOptions: [5, 10, 20, 50, 100, 200, 300],
-      }),
-      [pagination]
-    );
-
-    const tableOnChangeCallback = useCallback(
-      ({ page, sort }: EuiBasicTableOnChange) => {
-        dispatch({
-          type: 'updateFilterOptions',
-          filterOptions: {
-            sortField: SORT_FIELD, // Only enabled is supported for sorting currently
-            sortOrder: sort?.direction ?? 'desc',
-          },
-          pagination: { page: page.index + 1, perPage: page.size },
-        });
-      },
-      [dispatch]
-    );
-
-    const rulesColumns = useMemo(() => {
-      return getColumns({
-        dispatch,
-        dispatchToaster,
-        history,
-        hasMlPermissions,
-        hasNoPermissions,
-        loadingRuleIds:
-          loadingRulesAction != null &&
-          (loadingRulesAction === 'enable' || loadingRulesAction === 'disable')
-            ? loadingRuleIds
-            : [],
-        reFetchRules: reFetchRulesData,
-      });
-    }, [
-      dispatch,
-      dispatchToaster,
-      hasMlPermissions,
-      history,
-      loadingRuleIds,
-      loadingRulesAction,
-      reFetchRulesData,
-    ]);
-
-    const monitoringColumns = useMemo(() => getMonitoringColumns(), []);
-
-    useEffect(() => {
-      if (reFetchRulesData != null) {
-        setRefreshRulesData(reFetchRulesData);
-      }
-    }, [reFetchRulesData, setRefreshRulesData]);
-
-    useEffect(() => {
-      if (initLoading && !loading && !isLoadingRules && !isLoadingRulesStatuses) {
-        setInitLoading(false);
-      }
-    }, [initLoading, loading, isLoadingRules, isLoadingRulesStatuses]);
-
-    const handleCreatePrePackagedRules = useCallback(async () => {
-      if (createPrePackagedRules != null && reFetchRulesData != null) {
-        await createPrePackagedRules();
-        reFetchRulesData(true);
-      }
-    }, [createPrePackagedRules, reFetchRulesData]);
-
-    const euiBasicTableSelectionProps = useMemo(
-      () => ({
-        selectable: (item: Rule) => !loadingRuleIds.includes(item.id),
-        onSelectionChange: (selected: Rule[]) =>
-          dispatch({ type: 'selectedRuleIds', ids: selected.map(r => r.id) }),
-      }),
-      [loadingRuleIds]
-    );
-
-    const onFilterChangedCallback = useCallback((newFilterOptions: Partial<FilterOptions>) => {
-      dispatch({
-        type: 'updateFilterOptions',
-        filterOptions: {
-          ...newFilterOptions,
-        },
-        pagination: { page: 1 },
-      });
-    }, []);
-
-    const isLoadingAnActionOnRule = useMemo(() => {
-      if (
-        loadingRuleIds.length > 0 &&
-        (loadingRulesAction === 'disable' || loadingRulesAction === 'enable')
-      ) {
-        return false;
-      } else if (loadingRuleIds.length > 0) {
-        return true;
-      }
-      return false;
-    }, [loadingRuleIds, loadingRulesAction]);
-
-    const tabs = useMemo(
-      () => (
-        <EuiTabs>
-          {allRulesTabs.map(tab => (
-            <EuiTab
-              data-test-subj={`allRulesTableTab-${tab.id}`}
-              onClick={() => setAllRulesTab(tab.id)}
-              isSelected={tab.id === allRulesTab}
-              disabled={tab.disabled}
-              key={tab.id}
-            >
-              {tab.name}
-            </EuiTab>
-          ))}
-        </EuiTabs>
-      ),
-      [allRulesTabs, allRulesTab, setAllRulesTab]
-    );
-
-    return (
-      <>
-        <GenericDownloader
-          filename={`${i18n.EXPORT_FILENAME}.ndjson`}
-          ids={exportRuleIds}
-          onExportSuccess={exportCount => {
-            dispatch({ type: 'loadingRuleIds', ids: [], actionType: null });
-            dispatchToaster({
-              type: 'addToaster',
-              toast: {
-                id: uuid.v4(),
-                title: i18n.SUCCESSFULLY_EXPORTED_RULES(exportCount),
-                color: 'success',
-                iconType: 'check',
-              },
-            });
-          }}
-          exportSelectedData={exportRules}
-        />
-        <EuiSpacer />
-        {tabs}
-        <EuiSpacer />
-
-        <Panel loading={loading || isLoadingRules || isLoadingRulesStatuses}>
-          <>
-            <HeaderSection split title={i18n.ALL_RULES}>
-              <RulesTableFilters
-                onFilterChanged={onFilterChangedCallback}
-                rulesCustomInstalled={rulesCustomInstalled}
-                rulesInstalled={rulesInstalled}
-              />
-            </HeaderSection>
-
-            {(loading || isLoadingRules || isLoadingAnActionOnRule || isLoadingRulesStatuses) &&
-              !initLoading && (
-                <Loader data-test-subj="loadingPanelAllRulesTable" overlay size="xl" />
-              )}
-            {rulesCustomInstalled != null &&
-              rulesCustomInstalled === 0 &&
-              prePackagedRuleStatus === 'ruleNotInstalled' &&
-              !initLoading && (
-                <PrePackagedRulesPrompt
-                  createPrePackagedRules={handleCreatePrePackagedRules}
-                  loading={loadingCreatePrePackagedRules}
-                  userHasNoPermissions={hasNoPermissions}
-                />
-              )}
-            {initLoading && (
-              <EuiLoadingContent data-test-subj="initialLoadingPanelAllRulesTable" lines={10} />
-            )}
-            {showRulesTable({ rulesCustomInstalled, rulesInstalled }) && !initLoading && (
-              <>
-                <UtilityBar>
-                  <UtilityBarSection>
-                    <UtilityBarGroup>
-                      <UtilityBarText dataTestSubj="showingRules">
-                        {i18n.SHOWING_RULES(pagination.total ?? 0)}
-                      </UtilityBarText>
-                    </UtilityBarGroup>
-
-                    <UtilityBarGroup>
-                      <UtilityBarText>{i18n.SELECTED_RULES(selectedRuleIds.length)}</UtilityBarText>
-                      {!hasNoPermissions && (
-                        <UtilityBarAction
-                          dataTestSubj="bulkActions"
-                          iconSide="right"
-                          iconType="arrowDown"
-                          popoverContent={getBatchItemsPopoverContent}
-                        >
-                          {i18n.BATCH_ACTIONS}
-                        </UtilityBarAction>
-                      )}
-                      <UtilityBarAction
-                        iconSide="left"
-                        iconType="refresh"
-                        onClick={() => reFetchRulesData(true)}
-                      >
-                        {i18n.REFRESH}
-                      </UtilityBarAction>
-                    </UtilityBarGroup>
-                  </UtilityBarSection>
-                </UtilityBar>
-                <AllRulesTables
-                  selectedTab={allRulesTab}
-                  euiBasicTableSelectionProps={euiBasicTableSelectionProps}
-                  hasNoPermissions={hasNoPermissions}
-                  monitoringColumns={monitoringColumns}
-                  pagination={paginationMemo}
-                  rules={rules}
-                  rulesColumns={rulesColumns}
-                  rulesStatuses={rulesStatuses}
-                  sorting={sorting}
-                  tableOnChangeCallback={tableOnChangeCallback}
-                  tableRef={tableRef}
-                />
-              </>
-            )}
-          </>
-        </Panel>
-      </>
-    );
-  }
-);
-
-AllRules.displayName = 'AllRules';
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/all/reducer.ts b/x-pack/plugins/siem/public/pages/detection_engine/rules/all/reducer.ts
deleted file mode 100644
index bc5297e7628b7f..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/all/reducer.ts
+++ /dev/null
@@ -1,132 +0,0 @@
-/*
- * 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 { EuiBasicTable } from '@elastic/eui';
-import {
-  FilterOptions,
-  PaginationOptions,
-  Rule,
-} from '../../../../containers/detection_engine/rules';
-
-type LoadingRuleAction = 'duplicate' | 'enable' | 'disable' | 'export' | 'delete' | null;
-export interface State {
-  exportRuleIds: string[];
-  filterOptions: FilterOptions;
-  loadingRuleIds: string[];
-  loadingRulesAction: LoadingRuleAction;
-  pagination: PaginationOptions;
-  rules: Rule[];
-  selectedRuleIds: string[];
-}
-
-export type Action =
-  | { type: 'exportRuleIds'; ids: string[] }
-  | { type: 'loadingRuleIds'; ids: string[]; actionType: LoadingRuleAction }
-  | { type: 'selectedRuleIds'; ids: string[] }
-  | { type: 'setRules'; rules: Rule[]; pagination: Partial<PaginationOptions> }
-  | { type: 'updateRules'; rules: Rule[] }
-  | {
-      type: 'updateFilterOptions';
-      filterOptions: Partial<FilterOptions>;
-      pagination: Partial<PaginationOptions>;
-    }
-  | { type: 'failure' };
-
-export const allRulesReducer = (
-  tableRef: React.MutableRefObject<EuiBasicTable<unknown> | undefined>
-) => (state: State, action: Action): State => {
-  switch (action.type) {
-    case 'exportRuleIds': {
-      return {
-        ...state,
-        loadingRuleIds: action.ids,
-        loadingRulesAction: 'export',
-        exportRuleIds: action.ids,
-      };
-    }
-    case 'loadingRuleIds': {
-      return {
-        ...state,
-        loadingRuleIds: action.actionType == null ? [] : [...state.loadingRuleIds, ...action.ids],
-        loadingRulesAction: action.actionType,
-      };
-    }
-    case 'selectedRuleIds': {
-      return {
-        ...state,
-        selectedRuleIds: action.ids,
-      };
-    }
-    case 'setRules': {
-      if (
-        tableRef != null &&
-        tableRef.current != null &&
-        tableRef.current.changeSelection != null
-      ) {
-        // for future devs: eui basic table is not giving us a prop to set the value, so
-        // we are using the ref in setTimeout to reset on the next loop so that we
-        // do not get a warning telling us we are trying to update during a render
-        window.setTimeout(() => tableRef?.current?.changeSelection([]), 0);
-      }
-
-      return {
-        ...state,
-        rules: action.rules,
-        selectedRuleIds: [],
-        loadingRuleIds: [],
-        loadingRulesAction: null,
-        pagination: {
-          ...state.pagination,
-          ...action.pagination,
-        },
-      };
-    }
-    case 'updateRules': {
-      if (state.rules != null) {
-        const ruleIds = state.rules.map(r => r.id);
-        const updatedRules = action.rules.reduce((rules, updatedRule) => {
-          let newRules = rules;
-          if (ruleIds.includes(updatedRule.id)) {
-            newRules = newRules.map(r => (updatedRule.id === r.id ? updatedRule : r));
-          } else {
-            newRules = [...newRules, updatedRule];
-          }
-          return newRules;
-        }, state.rules);
-        const updatedRuleIds = action.rules.map(r => r.id);
-        const newLoadingRuleIds = state.loadingRuleIds.filter(id => !updatedRuleIds.includes(id));
-        return {
-          ...state,
-          rules: updatedRules,
-          loadingRuleIds: newLoadingRuleIds,
-          loadingRulesAction: newLoadingRuleIds.length === 0 ? null : state.loadingRulesAction,
-        };
-      }
-      return state;
-    }
-    case 'updateFilterOptions': {
-      return {
-        ...state,
-        filterOptions: {
-          ...state.filterOptions,
-          ...action.filterOptions,
-        },
-        pagination: {
-          ...state.pagination,
-          ...action.pagination,
-        },
-      };
-    }
-    case 'failure': {
-      return {
-        ...state,
-        rules: [],
-      };
-    }
-    default:
-      return state;
-  }
-};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/add_item_form/index.test.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/add_item_form/index.test.tsx
deleted file mode 100644
index eafa89a33f5964..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/add_item_form/index.test.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * 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 { AddItem } from './index';
-import { useFormFieldMock } from '../../../../../../public/mock/test_providers';
-
-describe('AddItem', () => {
-  it('renders correctly', () => {
-    const Component = () => {
-      const field = useFormFieldMock();
-
-      return (
-        <AddItem
-          addText="text"
-          field={field}
-          dataTestSubj="dataTestSubj"
-          idAria="idAria"
-          isDisabled={false}
-        />
-      );
-    };
-    const wrapper = shallow(<Component />);
-
-    expect(wrapper.dive().find('[iconType="plusInCircle"]')).toHaveLength(1);
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/add_item_form/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/add_item_form/index.tsx
deleted file mode 100644
index abbaa6d6192eed..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/add_item_form/index.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-/*
- * 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 {
-  EuiButtonEmpty,
-  EuiButtonIcon,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiFormRow,
-  EuiFieldText,
-  EuiSpacer,
-} from '@elastic/eui';
-import { isEmpty } from 'lodash/fp';
-import React, { ChangeEvent, useCallback, useEffect, useState, useRef } from 'react';
-import styled from 'styled-components';
-
-import * as RuleI18n from '../../translations';
-import { FieldHook, getFieldValidityAndErrorMessage } from '../../../../../shared_imports';
-
-interface AddItemProps {
-  addText: string;
-  field: FieldHook;
-  dataTestSubj: string;
-  idAria: string;
-  isDisabled: boolean;
-  validate?: (args: unknown) => boolean;
-}
-
-const MyEuiFormRow = styled(EuiFormRow)`
-  .euiFormRow__labelWrapper {
-    .euiText {
-      padding-right: 32px;
-    }
-  }
-`;
-
-export const MyAddItemButton = styled(EuiButtonEmpty)`
-  margin-top: 4px;
-
-  &.euiButtonEmpty--xSmall {
-    font-size: 12px;
-  }
-
-  .euiIcon {
-    width: 12px;
-    height: 12px;
-  }
-`;
-
-MyAddItemButton.defaultProps = {
-  flush: 'left',
-  iconType: 'plusInCircle',
-  size: 'xs',
-};
-
-export const AddItem = ({
-  addText,
-  dataTestSubj,
-  field,
-  idAria,
-  isDisabled,
-  validate,
-}: AddItemProps) => {
-  const [showValidation, setShowValidation] = useState(false);
-  const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
-  const [haveBeenKeyboardDeleted, setHaveBeenKeyboardDeleted] = useState(-1);
-
-  const inputsRef = useRef<HTMLInputElement[]>([]);
-
-  const removeItem = useCallback(
-    (index: number) => {
-      const values = field.value as string[];
-      const newValues = [...values.slice(0, index), ...values.slice(index + 1)];
-      field.setValue(newValues.length === 0 ? [''] : newValues);
-      inputsRef.current = [
-        ...inputsRef.current.slice(0, index),
-        ...inputsRef.current.slice(index + 1),
-      ];
-      inputsRef.current = inputsRef.current.map((ref, i) => {
-        if (i >= index && inputsRef.current[index] != null) {
-          ref.value = 're-render';
-        }
-        return ref;
-      });
-    },
-    [field]
-  );
-
-  const addItem = useCallback(() => {
-    const values = field.value as string[];
-    field.setValue([...values, '']);
-  }, [field]);
-
-  const updateItem = useCallback(
-    (event: ChangeEvent<HTMLInputElement>, index: number) => {
-      event.persist();
-      const values = field.value as string[];
-      const value = event.target.value;
-      field.setValue([...values.slice(0, index), value, ...values.slice(index + 1)]);
-    },
-    [field]
-  );
-
-  const handleLastInputRef = useCallback(
-    (index: number, element: HTMLInputElement | null) => {
-      if (element != null) {
-        inputsRef.current = [
-          ...inputsRef.current.slice(0, index),
-          element,
-          ...inputsRef.current.slice(index + 1),
-        ];
-      }
-    },
-    [inputsRef]
-  );
-
-  useEffect(() => {
-    if (
-      haveBeenKeyboardDeleted !== -1 &&
-      !isEmpty(inputsRef.current) &&
-      inputsRef.current[haveBeenKeyboardDeleted] != null
-    ) {
-      inputsRef.current[haveBeenKeyboardDeleted].focus();
-      setHaveBeenKeyboardDeleted(-1);
-    }
-  }, [haveBeenKeyboardDeleted, inputsRef.current]);
-
-  const values = field.value as string[];
-  return (
-    <MyEuiFormRow
-      label={field.label}
-      labelAppend={field.labelAppend}
-      error={showValidation ? errorMessage : null}
-      isInvalid={showValidation && isInvalid}
-      fullWidth
-      data-test-subj={dataTestSubj}
-      describedByIds={idAria ? [idAria] : undefined}
-    >
-      <>
-        {values.map((item, index) => {
-          const euiFieldProps = {
-            disabled: isDisabled,
-            ...(index === values.length - 1
-              ? { inputRef: handleLastInputRef.bind(null, index) }
-              : {}),
-            ...((inputsRef.current[index] != null && inputsRef.current[index].value !== item) ||
-            inputsRef.current[index] == null
-              ? { value: item }
-              : {}),
-            isInvalid: validate == null ? false : showValidation && validate(item),
-          };
-          return (
-            <div key={index}>
-              <EuiFlexGroup gutterSize="s" alignItems="center">
-                <EuiFlexItem grow>
-                  <EuiFieldText
-                    onBlur={() => setShowValidation(true)}
-                    onChange={e => updateItem(e, index)}
-                    fullWidth
-                    {...euiFieldProps}
-                  />
-                </EuiFlexItem>
-                <EuiFlexItem grow={false}>
-                  <EuiButtonIcon
-                    color="danger"
-                    iconType="trash"
-                    isDisabled={isDisabled || (isEmpty(item) && values.length === 1)}
-                    onClick={() => removeItem(index)}
-                    aria-label={RuleI18n.DELETE}
-                  />
-                </EuiFlexItem>
-              </EuiFlexGroup>
-
-              {values.length - 1 !== index && <EuiSpacer size="s" />}
-            </div>
-          );
-        })}
-
-        <MyAddItemButton onClick={addItem} isDisabled={isDisabled}>
-          {addText}
-        </MyAddItemButton>
-      </>
-    </MyEuiFormRow>
-  );
-};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/all_rules_tables/index.test.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/all_rules_tables/index.test.tsx
deleted file mode 100644
index 8afb8db0c8d5b4..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/all_rules_tables/index.test.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-/*
- * 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, { useRef } from 'react';
-import { shallow } from 'enzyme';
-
-import { AllRulesTables } from './index';
-import { AllRulesTabs } from '../../all';
-
-describe('AllRulesTables', () => {
-  it('renders correctly', () => {
-    const Component = () => {
-      const ref = useRef();
-
-      return (
-        <AllRulesTables
-          selectedTab={AllRulesTabs.rules}
-          euiBasicTableSelectionProps={{}}
-          hasNoPermissions={false}
-          monitoringColumns={[]}
-          rules={[]}
-          rulesColumns={[]}
-          rulesStatuses={[]}
-          tableOnChangeCallback={jest.fn()}
-          tableRef={ref}
-          pagination={{
-            pageIndex: 0,
-            pageSize: 0,
-            totalItemCount: 0,
-            pageSizeOptions: [0],
-          }}
-          sorting={{
-            sort: {
-              field: 'enabled',
-              direction: 'asc',
-            },
-          }}
-        />
-      );
-    };
-    const wrapper = shallow(<Component />);
-
-    expect(wrapper.dive().find('[data-test-subj="rules-table"]')).toHaveLength(1);
-  });
-
-  it('renders rules tab when "selectedTab" is "rules"', () => {
-    const Component = () => {
-      const ref = useRef();
-
-      return (
-        <AllRulesTables
-          selectedTab={AllRulesTabs.rules}
-          euiBasicTableSelectionProps={{}}
-          hasNoPermissions={false}
-          monitoringColumns={[]}
-          rules={[]}
-          rulesColumns={[]}
-          rulesStatuses={[]}
-          tableOnChangeCallback={jest.fn()}
-          tableRef={ref}
-          pagination={{
-            pageIndex: 0,
-            pageSize: 0,
-            totalItemCount: 0,
-            pageSizeOptions: [0],
-          }}
-          sorting={{
-            sort: {
-              field: 'enabled',
-              direction: 'asc',
-            },
-          }}
-        />
-      );
-    };
-    const wrapper = shallow(<Component />);
-
-    expect(wrapper.dive().find('[data-test-subj="rules-table"]')).toHaveLength(1);
-    expect(wrapper.dive().find('[data-test-subj="monitoring-table"]')).toHaveLength(0);
-  });
-
-  it('renders monitoring tab when "selectedTab" is "monitoring"', () => {
-    const Component = () => {
-      const ref = useRef();
-
-      return (
-        <AllRulesTables
-          selectedTab={AllRulesTabs.monitoring}
-          euiBasicTableSelectionProps={{}}
-          hasNoPermissions={false}
-          monitoringColumns={[]}
-          rules={[]}
-          rulesColumns={[]}
-          rulesStatuses={[]}
-          tableOnChangeCallback={jest.fn()}
-          tableRef={ref}
-          pagination={{
-            pageIndex: 0,
-            pageSize: 0,
-            totalItemCount: 0,
-            pageSizeOptions: [0],
-          }}
-          sorting={{
-            sort: {
-              field: 'enabled',
-              direction: 'asc',
-            },
-          }}
-        />
-      );
-    };
-    const wrapper = shallow(<Component />);
-
-    expect(wrapper.dive().find('[data-test-subj="rules-table"]')).toHaveLength(0);
-    expect(wrapper.dive().find('[data-test-subj="monitoring-table"]')).toHaveLength(1);
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/all_rules_tables/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/all_rules_tables/index.tsx
deleted file mode 100644
index 8ea5606d0082c0..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/all_rules_tables/index.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-/*
- * 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 {
-  EuiBasicTable,
-  EuiBasicTableColumn,
-  EuiEmptyPrompt,
-  Direction,
-  EuiTableSelectionType,
-} from '@elastic/eui';
-import React, { useMemo, memo } from 'react';
-import styled from 'styled-components';
-
-import { EuiBasicTableOnChange } from '../../types';
-import * as i18n from '../../translations';
-import {
-  RulesColumns,
-  RuleStatusRowItemType,
-} from '../../../../../pages/detection_engine/rules/all/columns';
-import { Rule, Rules } from '../../../../../containers/detection_engine/rules';
-import { AllRulesTabs } from '../../all';
-
-// EuiBasicTable give me a hardtime with adding the ref attributes so I went the easy way
-// after few hours of fight with typescript !!!! I lost :(
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const MyEuiBasicTable = styled(EuiBasicTable as any)`` as any;
-
-export interface SortingType {
-  sort: {
-    field: 'enabled';
-    direction: Direction;
-  };
-}
-
-interface AllRulesTablesProps {
-  euiBasicTableSelectionProps: EuiTableSelectionType<Rule>;
-  hasNoPermissions: boolean;
-  monitoringColumns: Array<EuiBasicTableColumn<RuleStatusRowItemType>>;
-  pagination: {
-    pageIndex: number;
-    pageSize: number;
-    totalItemCount: number;
-    pageSizeOptions: number[];
-  };
-  rules: Rules;
-  rulesColumns: RulesColumns[];
-  rulesStatuses: RuleStatusRowItemType[];
-  sorting: {
-    sort: {
-      field: 'enabled';
-      direction: Direction;
-    };
-  };
-  tableOnChangeCallback: ({ page, sort }: EuiBasicTableOnChange) => void;
-  tableRef?: React.MutableRefObject<EuiBasicTable | undefined>;
-  selectedTab: AllRulesTabs;
-}
-
-export const AllRulesTablesComponent: React.FC<AllRulesTablesProps> = ({
-  euiBasicTableSelectionProps,
-  hasNoPermissions,
-  monitoringColumns,
-  pagination,
-  rules,
-  rulesColumns,
-  rulesStatuses,
-  sorting,
-  tableOnChangeCallback,
-  tableRef,
-  selectedTab,
-}) => {
-  const emptyPrompt = useMemo(() => {
-    return (
-      <EuiEmptyPrompt title={<h3>{i18n.NO_RULES}</h3>} titleSize="xs" body={i18n.NO_RULES_BODY} />
-    );
-  }, []);
-
-  return (
-    <>
-      {selectedTab === AllRulesTabs.rules && (
-        <MyEuiBasicTable
-          data-test-subj="rules-table"
-          columns={rulesColumns}
-          isSelectable={!hasNoPermissions ?? false}
-          itemId="id"
-          items={rules ?? []}
-          noItemsMessage={emptyPrompt}
-          onChange={tableOnChangeCallback}
-          pagination={pagination}
-          ref={tableRef}
-          sorting={sorting}
-          selection={hasNoPermissions ? undefined : euiBasicTableSelectionProps}
-        />
-      )}
-      {selectedTab === AllRulesTabs.monitoring && (
-        <MyEuiBasicTable
-          data-test-subj="monitoring-table"
-          columns={monitoringColumns}
-          isSelectable={!hasNoPermissions ?? false}
-          itemId="id"
-          items={rulesStatuses}
-          noItemsMessage={emptyPrompt}
-          onChange={tableOnChangeCallback}
-          pagination={pagination}
-          sorting={sorting}
-        />
-      )}
-    </>
-  );
-};
-
-export const AllRulesTables = memo(AllRulesTablesComponent);
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/anomaly_threshold_slider/index.test.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/anomaly_threshold_slider/index.test.tsx
deleted file mode 100644
index c0e957d94261fe..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/anomaly_threshold_slider/index.test.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-/*
- * 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 { AnomalyThresholdSlider } from './index';
-import { useFormFieldMock } from '../../../../../mock';
-
-describe('AnomalyThresholdSlider', () => {
-  it('renders correctly', () => {
-    const Component = () => {
-      const field = useFormFieldMock();
-
-      return <AnomalyThresholdSlider describedByIds={[]} field={field} />;
-    };
-    const wrapper = shallow(<Component />);
-
-    expect(wrapper.dive().find('EuiRange')).toHaveLength(1);
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/anomaly_threshold_slider/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/anomaly_threshold_slider/index.tsx
deleted file mode 100644
index 01fddf98b97d83..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/anomaly_threshold_slider/index.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-/*
- * 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, { useCallback } from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiRange, EuiFormRow } from '@elastic/eui';
-
-import { FieldHook } from '../../../../../shared_imports';
-
-interface AnomalyThresholdSliderProps {
-  describedByIds: string[];
-  field: FieldHook;
-}
-type Event = React.ChangeEvent<HTMLInputElement>;
-type EventArg = Event | React.MouseEvent<HTMLButtonElement>;
-
-export const AnomalyThresholdSlider = ({
-  describedByIds = [],
-  field,
-}: AnomalyThresholdSliderProps) => {
-  const threshold = field.value as number;
-  const onThresholdChange = useCallback(
-    (event: EventArg) => {
-      const thresholdValue = Number((event as Event).target.value);
-      field.setValue(thresholdValue);
-    },
-    [field]
-  );
-
-  return (
-    <EuiFormRow
-      label={field.label}
-      data-test-subj="anomalyThresholdSlider"
-      describedByIds={describedByIds}
-    >
-      <EuiFlexGroup>
-        <EuiFlexItem>
-          <EuiRange
-            value={threshold}
-            onChange={onThresholdChange}
-            fullWidth
-            showInput
-            showRange
-            showTicks
-            tickInterval={25}
-          />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </EuiFormRow>
-  );
-};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/description_step/helpers.test.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/description_step/helpers.test.tsx
deleted file mode 100644
index 186aeae42246d3..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/description_step/helpers.test.tsx
+++ /dev/null
@@ -1,415 +0,0 @@
-/*
- * 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 { EuiLoadingSpinner } from '@elastic/eui';
-
-import { coreMock } from '../../../../../../../../../src/core/public/mocks';
-import { esFilters, FilterManager } from '../../../../../../../../../src/plugins/data/public';
-import { SeverityBadge } from '../severity_badge';
-
-import * as i18n from './translations';
-import {
-  isNotEmptyArray,
-  buildQueryBarDescription,
-  buildThreatDescription,
-  buildUnorderedListArrayDescription,
-  buildStringArrayDescription,
-  buildSeverityDescription,
-  buildUrlsDescription,
-  buildNoteDescription,
-  buildRuleTypeDescription,
-} from './helpers';
-import { ListItems } from './types';
-
-const setupMock = coreMock.createSetup();
-const uiSettingsMock = (pinnedByDefault: boolean) => (key: string) => {
-  switch (key) {
-    case 'filters:pinnedByDefault':
-      return pinnedByDefault;
-    default:
-      throw new Error(`Unexpected uiSettings key in FilterManager mock: ${key}`);
-  }
-};
-setupMock.uiSettings.get.mockImplementation(uiSettingsMock(true));
-const mockFilterManager = new FilterManager(setupMock.uiSettings);
-
-const mockQueryBar = {
-  query: 'test query',
-  filters: [
-    {
-      $state: {
-        store: esFilters.FilterStateStore.GLOBAL_STATE,
-      },
-      meta: {
-        alias: null,
-        disabled: false,
-        key: 'event.category',
-        negate: false,
-        params: {
-          query: 'file',
-        },
-        type: 'phrase',
-      },
-      query: {
-        match_phrase: {
-          'event.category': 'file',
-        },
-      },
-    },
-  ],
-  saved_id: 'test123',
-};
-
-describe('helpers', () => {
-  describe('isNotEmptyArray', () => {
-    test('returns false if empty array', () => {
-      const result = isNotEmptyArray([]);
-      expect(result).toBeFalsy();
-    });
-
-    test('returns false if array of empty strings', () => {
-      const result = isNotEmptyArray(['', '']);
-      expect(result).toBeFalsy();
-    });
-
-    test('returns true if array of string with space', () => {
-      const result = isNotEmptyArray([' ']);
-      expect(result).toBeTruthy();
-    });
-
-    test('returns true if array with at least one non-empty string', () => {
-      const result = isNotEmptyArray(['', 'abc']);
-      expect(result).toBeTruthy();
-    });
-  });
-
-  describe('buildQueryBarDescription', () => {
-    test('returns empty array if no filters, query or savedId exist', () => {
-      const emptyMockQueryBar = {
-        query: '',
-        filters: [],
-        saved_id: '',
-      };
-      const result: ListItems[] = buildQueryBarDescription({
-        field: 'queryBar',
-        filters: emptyMockQueryBar.filters,
-        filterManager: mockFilterManager,
-        query: emptyMockQueryBar.query,
-        savedId: emptyMockQueryBar.saved_id,
-      });
-      expect(result).toEqual([]);
-    });
-
-    test('returns expected array of ListItems when filters exists, but no indexPatterns passed in', () => {
-      const mockQueryBarWithFilters = {
-        ...mockQueryBar,
-        query: '',
-        saved_id: '',
-      };
-      const result: ListItems[] = buildQueryBarDescription({
-        field: 'queryBar',
-        filters: mockQueryBarWithFilters.filters,
-        filterManager: mockFilterManager,
-        query: mockQueryBarWithFilters.query,
-        savedId: mockQueryBarWithFilters.saved_id,
-      });
-      const wrapper = shallow<React.ReactElement>(result[0].description as React.ReactElement);
-
-      expect(result[0].title).toEqual(<>{i18n.FILTERS_LABEL} </>);
-      expect(wrapper.find(EuiLoadingSpinner).exists()).toBeTruthy();
-    });
-
-    test('returns expected array of ListItems when filters AND indexPatterns exist', () => {
-      const mockQueryBarWithFilters = {
-        ...mockQueryBar,
-        query: '',
-        saved_id: '',
-      };
-      const result: ListItems[] = buildQueryBarDescription({
-        field: 'queryBar',
-        filters: mockQueryBarWithFilters.filters,
-        filterManager: mockFilterManager,
-        query: mockQueryBarWithFilters.query,
-        savedId: mockQueryBarWithFilters.saved_id,
-        indexPatterns: { fields: [{ name: 'test name', type: 'test type' }], title: 'test title' },
-      });
-      const wrapper = shallow<React.ReactElement>(result[0].description as React.ReactElement);
-      const filterLabelComponent = wrapper.find(esFilters.FilterLabel).at(0);
-
-      expect(result[0].title).toEqual(<>{i18n.FILTERS_LABEL} </>);
-      expect(filterLabelComponent.prop('valueLabel')).toEqual('file');
-      expect(filterLabelComponent.prop('filter')).toEqual(mockQueryBar.filters[0]);
-    });
-
-    test('returns expected array of ListItems when "query.query" exists', () => {
-      const mockQueryBarWithQuery = {
-        ...mockQueryBar,
-        filters: [],
-        saved_id: '',
-      };
-      const result: ListItems[] = buildQueryBarDescription({
-        field: 'queryBar',
-        filters: mockQueryBarWithQuery.filters,
-        filterManager: mockFilterManager,
-        query: mockQueryBarWithQuery.query,
-        savedId: mockQueryBarWithQuery.saved_id,
-      });
-      expect(result[0].title).toEqual(<>{i18n.QUERY_LABEL} </>);
-      expect(result[0].description).toEqual(<>{mockQueryBarWithQuery.query} </>);
-    });
-
-    test('returns expected array of ListItems when "savedId" exists', () => {
-      const mockQueryBarWithSavedId = {
-        ...mockQueryBar,
-        query: '',
-        filters: [],
-      };
-      const result: ListItems[] = buildQueryBarDescription({
-        field: 'queryBar',
-        filters: mockQueryBarWithSavedId.filters,
-        filterManager: mockFilterManager,
-        query: mockQueryBarWithSavedId.query,
-        savedId: mockQueryBarWithSavedId.saved_id,
-      });
-      expect(result[0].title).toEqual(<>{i18n.SAVED_ID_LABEL} </>);
-      expect(result[0].description).toEqual(<>{mockQueryBarWithSavedId.saved_id} </>);
-    });
-  });
-
-  describe('buildThreatDescription', () => {
-    test('returns empty array if no threats', () => {
-      const result: ListItems[] = buildThreatDescription({ label: 'Mitre Attack', threat: [] });
-      expect(result).toHaveLength(0);
-    });
-
-    test('returns empty tactic link if no corresponding tactic id found', () => {
-      const result: ListItems[] = buildThreatDescription({
-        label: 'Mitre Attack',
-        threat: [
-          {
-            framework: 'MITRE ATTACK',
-            technique: [{ reference: 'https://test.com', name: 'Audio Capture', id: 'T1123' }],
-            tactic: { reference: 'https://test.com', name: 'Collection', id: 'TA000999' },
-          },
-        ],
-      });
-      const wrapper = shallow<React.ReactElement>(result[0].description as React.ReactElement);
-      expect(result[0].title).toEqual('Mitre Attack');
-      expect(wrapper.find('[data-test-subj="threatTacticLink"]').text()).toEqual('');
-      expect(wrapper.find('[data-test-subj="threatTechniqueLink"]').text()).toEqual(
-        'Audio Capture (T1123)'
-      );
-    });
-
-    test('returns empty technique link if no corresponding technique id found', () => {
-      const result: ListItems[] = buildThreatDescription({
-        label: 'Mitre Attack',
-        threat: [
-          {
-            framework: 'MITRE ATTACK',
-            technique: [{ reference: 'https://test.com', name: 'Audio Capture', id: 'T1123456' }],
-            tactic: { reference: 'https://test.com', name: 'Collection', id: 'TA0009' },
-          },
-        ],
-      });
-      const wrapper = shallow<React.ReactElement>(result[0].description as React.ReactElement);
-      expect(result[0].title).toEqual('Mitre Attack');
-      expect(wrapper.find('[data-test-subj="threatTacticLink"]').text()).toEqual(
-        'Collection (TA0009)'
-      );
-      expect(wrapper.find('[data-test-subj="threatTechniqueLink"]').text()).toEqual('');
-    });
-
-    test('returns with corresponding tactic and technique link text', () => {
-      const result: ListItems[] = buildThreatDescription({
-        label: 'Mitre Attack',
-        threat: [
-          {
-            framework: 'MITRE ATTACK',
-            technique: [{ reference: 'https://test.com', name: 'Audio Capture', id: 'T1123' }],
-            tactic: { reference: 'https://test.com', name: 'Collection', id: 'TA0009' },
-          },
-        ],
-      });
-      const wrapper = shallow<React.ReactElement>(result[0].description as React.ReactElement);
-      expect(result[0].title).toEqual('Mitre Attack');
-      expect(wrapper.find('[data-test-subj="threatTacticLink"]').text()).toEqual(
-        'Collection (TA0009)'
-      );
-      expect(wrapper.find('[data-test-subj="threatTechniqueLink"]').text()).toEqual(
-        'Audio Capture (T1123)'
-      );
-    });
-
-    test('returns corresponding number of tactic and technique links', () => {
-      const result: ListItems[] = buildThreatDescription({
-        label: 'Mitre Attack',
-        threat: [
-          {
-            framework: 'MITRE ATTACK',
-            technique: [
-              { reference: 'https://test.com', name: 'Audio Capture', id: 'T1123' },
-              { reference: 'https://test.com', name: 'Clipboard Data', id: 'T1115' },
-            ],
-            tactic: { reference: 'https://test.com', name: 'Collection', id: 'TA0009' },
-          },
-          {
-            framework: 'MITRE ATTACK',
-            technique: [
-              { reference: 'https://test.com', name: 'Automated Collection', id: 'T1119' },
-            ],
-            tactic: { reference: 'https://test.com', name: 'Discovery', id: 'TA0007' },
-          },
-        ],
-      });
-      const wrapper = shallow<React.ReactElement>(result[0].description as React.ReactElement);
-
-      expect(wrapper.find('[data-test-subj="threatTacticLink"]')).toHaveLength(2);
-      expect(wrapper.find('[data-test-subj="threatTechniqueLink"]')).toHaveLength(3);
-    });
-  });
-
-  describe('buildUnorderedListArrayDescription', () => {
-    test('returns empty array if "values" is empty array', () => {
-      const result: ListItems[] = buildUnorderedListArrayDescription(
-        'Test label',
-        'falsePositives',
-        []
-      );
-      expect(result).toHaveLength(0);
-    });
-
-    test('returns ListItem with corresponding number of valid values items', () => {
-      const result: ListItems[] = buildUnorderedListArrayDescription(
-        'Test label',
-        'falsePositives',
-        ['', 'falsePositive1', 'falsePositive2']
-      );
-      const wrapper = shallow<React.ReactElement>(result[0].description as React.ReactElement);
-
-      expect(result[0].title).toEqual('Test label');
-      expect(wrapper.find('[data-test-subj="unorderedListArrayDescriptionItem"]')).toHaveLength(2);
-    });
-  });
-
-  describe('buildStringArrayDescription', () => {
-    test('returns empty array if "values" is empty array', () => {
-      const result: ListItems[] = buildStringArrayDescription('Test label', 'tags', []);
-      expect(result).toHaveLength(0);
-    });
-
-    test('returns ListItem with corresponding number of valid values items', () => {
-      const result: ListItems[] = buildStringArrayDescription('Test label', 'tags', [
-        '',
-        'tag1',
-        'tag2',
-      ]);
-      const wrapper = shallow<React.ReactElement>(result[0].description as React.ReactElement);
-
-      expect(result[0].title).toEqual('Test label');
-      expect(wrapper.find('[data-test-subj="stringArrayDescriptionBadgeItem"]')).toHaveLength(2);
-      expect(
-        wrapper
-          .find('[data-test-subj="stringArrayDescriptionBadgeItem"]')
-          .first()
-          .text()
-      ).toEqual('tag1');
-      expect(
-        wrapper
-          .find('[data-test-subj="stringArrayDescriptionBadgeItem"]')
-          .at(1)
-          .text()
-      ).toEqual('tag2');
-    });
-  });
-
-  describe('buildSeverityDescription', () => {
-    test('returns ListItem with passed in label and SeverityBadge component', () => {
-      const result: ListItems[] = buildSeverityDescription('Test label', 'Test description value');
-
-      expect(result[0].title).toEqual('Test label');
-      expect(result[0].description).toEqual(<SeverityBadge value="Test description value" />);
-    });
-  });
-
-  describe('buildUrlsDescription', () => {
-    test('returns empty array if "values" is empty array', () => {
-      const result: ListItems[] = buildUrlsDescription('Test label', []);
-      expect(result).toHaveLength(0);
-    });
-
-    test('returns ListItem with corresponding number of valid values items', () => {
-      const result: ListItems[] = buildUrlsDescription('Test label', [
-        'www.test.com',
-        'www.test2.com',
-      ]);
-      const wrapper = shallow<React.ReactElement>(result[0].description as React.ReactElement);
-
-      expect(result[0].title).toEqual('Test label');
-      expect(wrapper.find('[data-test-subj="urlsDescriptionReferenceLinkItem"]')).toHaveLength(2);
-      expect(
-        wrapper
-          .find('[data-test-subj="urlsDescriptionReferenceLinkItem"]')
-          .first()
-          .text()
-      ).toEqual('www.test.com');
-      expect(
-        wrapper
-          .find('[data-test-subj="urlsDescriptionReferenceLinkItem"]')
-          .at(1)
-          .text()
-      ).toEqual('www.test2.com');
-    });
-  });
-
-  describe('buildNoteDescription', () => {
-    test('returns ListItem with passed in label and note content', () => {
-      const noteSample =
-        'Cras mattism. [Pellentesque](https://elastic.co). ### Malesuada adipiscing tristique';
-      const result: ListItems[] = buildNoteDescription('Test label', noteSample);
-      const wrapper = shallow<React.ReactElement>(result[0].description as React.ReactElement);
-      const noteElement = wrapper.find('[data-test-subj="noteDescriptionItem"]').at(0);
-
-      expect(result[0].title).toEqual('Test label');
-      expect(noteElement.exists()).toBeTruthy();
-      expect(noteElement.text()).toEqual(noteSample);
-    });
-
-    test('returns empty array if passed in note is empty string', () => {
-      const result: ListItems[] = buildNoteDescription('Test label', '');
-
-      expect(result).toHaveLength(0);
-    });
-  });
-
-  describe('buildRuleTypeDescription', () => {
-    it('returns the label for a machine_learning type', () => {
-      const [result]: ListItems[] = buildRuleTypeDescription('Test label', 'machine_learning');
-
-      expect(result.title).toEqual('Test label');
-    });
-
-    it('returns a humanized description for a machine_learning type', () => {
-      const [result]: ListItems[] = buildRuleTypeDescription('Test label', 'machine_learning');
-
-      expect(result.description).toEqual('Machine Learning');
-    });
-
-    it('returns the label for a query type', () => {
-      const [result]: ListItems[] = buildRuleTypeDescription('Test label', 'query');
-
-      expect(result.title).toEqual('Test label');
-    });
-
-    it('returns a humanized description for a query type', () => {
-      const [result]: ListItems[] = buildRuleTypeDescription('Test label', 'query');
-
-      expect(result.description).toEqual('Query');
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/description_step/helpers.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/description_step/helpers.tsx
deleted file mode 100644
index 1ac371a3f68297..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/description_step/helpers.tsx
+++ /dev/null
@@ -1,294 +0,0 @@
-/*
- * 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 {
-  EuiBadge,
-  EuiLoadingSpinner,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiButtonEmpty,
-  EuiSpacer,
-  EuiLink,
-  EuiText,
-} from '@elastic/eui';
-
-import { isEmpty } from 'lodash/fp';
-import React from 'react';
-import styled from 'styled-components';
-
-import { RuleType } from '../../../../../../common/detection_engine/types';
-import { esFilters } from '../../../../../../../../../src/plugins/data/public';
-
-import { tacticsOptions, techniquesOptions } from '../../../mitre/mitre_tactics_techniques';
-
-import * as i18n from './translations';
-import { BuildQueryBarDescription, BuildThreatDescription, ListItems } from './types';
-import { SeverityBadge } from '../severity_badge';
-import ListTreeIcon from './assets/list_tree_icon.svg';
-import { assertUnreachable } from '../../../../../lib/helpers';
-
-const NoteDescriptionContainer = styled(EuiFlexItem)`
-  height: 105px;
-  overflow-y: hidden;
-`;
-
-export const isNotEmptyArray = (values: string[]) => !isEmpty(values.join(''));
-
-const EuiBadgeWrap = (styled(EuiBadge)`
-  .euiBadge__text {
-    white-space: pre-wrap !important;
-  }
-` as unknown) as typeof EuiBadge;
-
-export const buildQueryBarDescription = ({
-  field,
-  filters,
-  filterManager,
-  query,
-  savedId,
-  indexPatterns,
-}: BuildQueryBarDescription): ListItems[] => {
-  let items: ListItems[] = [];
-  if (!isEmpty(filters)) {
-    filterManager.setFilters(filters);
-    items = [
-      ...items,
-      {
-        title: <>{i18n.FILTERS_LABEL} </>,
-        description: (
-          <EuiFlexGroup wrap responsive={false} gutterSize="xs">
-            {filterManager.getFilters().map((filter, index) => (
-              <EuiFlexItem grow={false} key={`${field}-filter-${index}`}>
-                <EuiBadgeWrap color="hollow">
-                  {indexPatterns != null ? (
-                    <esFilters.FilterLabel
-                      filter={filter}
-                      valueLabel={esFilters.getDisplayValueFromFilter(filter, [indexPatterns])}
-                    />
-                  ) : (
-                    <EuiLoadingSpinner size="m" />
-                  )}
-                </EuiBadgeWrap>
-              </EuiFlexItem>
-            ))}
-          </EuiFlexGroup>
-        ),
-      },
-    ];
-  }
-  if (!isEmpty(query)) {
-    items = [
-      ...items,
-      {
-        title: <>{i18n.QUERY_LABEL} </>,
-        description: <>{query} </>,
-      },
-    ];
-  }
-  if (!isEmpty(savedId)) {
-    items = [
-      ...items,
-      {
-        title: <>{i18n.SAVED_ID_LABEL} </>,
-        description: <>{savedId} </>,
-      },
-    ];
-  }
-  return items;
-};
-
-const ThreatEuiFlexGroup = styled(EuiFlexGroup)`
-  .euiFlexItem {
-    margin-bottom: 0px;
-  }
-`;
-
-const TechniqueLinkItem = styled(EuiButtonEmpty)`
-  .euiIcon {
-    width: 8px;
-    height: 8px;
-  }
-`;
-
-export const buildThreatDescription = ({ label, threat }: BuildThreatDescription): ListItems[] => {
-  if (threat.length > 0) {
-    return [
-      {
-        title: label,
-        description: (
-          <ThreatEuiFlexGroup direction="column">
-            {threat.map((singleThreat, index) => {
-              const tactic = tacticsOptions.find(t => t.id === singleThreat.tactic.id);
-              return (
-                <EuiFlexItem key={`${singleThreat.tactic.name}-${index}`}>
-                  <EuiLink
-                    data-test-subj="threatTacticLink"
-                    href={singleThreat.tactic.reference}
-                    target="_blank"
-                  >
-                    {tactic != null ? tactic.text : ''}
-                  </EuiLink>
-                  <EuiFlexGroup gutterSize="none" alignItems="flexStart" direction="column">
-                    {singleThreat.technique.map(technique => {
-                      const myTechnique = techniquesOptions.find(t => t.id === technique.id);
-                      return (
-                        <EuiFlexItem>
-                          <TechniqueLinkItem
-                            data-test-subj="threatTechniqueLink"
-                            href={technique.reference}
-                            target="_blank"
-                            iconType={ListTreeIcon}
-                            size="xs"
-                            flush="left"
-                          >
-                            {myTechnique != null ? myTechnique.label : ''}
-                          </TechniqueLinkItem>
-                        </EuiFlexItem>
-                      );
-                    })}
-                  </EuiFlexGroup>
-                </EuiFlexItem>
-              );
-            })}
-            <EuiSpacer />
-          </ThreatEuiFlexGroup>
-        ),
-      },
-    ];
-  }
-  return [];
-};
-
-export const buildUnorderedListArrayDescription = (
-  label: string,
-  field: string,
-  values: string[]
-): ListItems[] => {
-  if (isNotEmptyArray(values)) {
-    return [
-      {
-        title: label,
-        description: (
-          <EuiText size="s">
-            <ul>
-              {values.map(val =>
-                isEmpty(val) ? null : (
-                  <li data-test-subj="unorderedListArrayDescriptionItem" key={`${field}-${val}`}>
-                    {val}
-                  </li>
-                )
-              )}
-            </ul>
-          </EuiText>
-        ),
-      },
-    ];
-  }
-  return [];
-};
-
-export const buildStringArrayDescription = (
-  label: string,
-  field: string,
-  values: string[]
-): ListItems[] => {
-  if (isNotEmptyArray(values)) {
-    return [
-      {
-        title: label,
-        description: (
-          <EuiFlexGroup responsive={false} gutterSize="xs" wrap>
-            {values.map((val: string) =>
-              isEmpty(val) ? null : (
-                <EuiFlexItem grow={false} key={`${field}-${val}`}>
-                  <EuiBadgeWrap data-test-subj="stringArrayDescriptionBadgeItem" color="hollow">
-                    {val}
-                  </EuiBadgeWrap>
-                </EuiFlexItem>
-              )
-            )}
-          </EuiFlexGroup>
-        ),
-      },
-    ];
-  }
-  return [];
-};
-
-export const buildSeverityDescription = (label: string, value: string): ListItems[] => [
-  {
-    title: label,
-    description: <SeverityBadge value={value} />,
-  },
-];
-
-export const buildUrlsDescription = (label: string, values: string[]): ListItems[] => {
-  if (isNotEmptyArray(values)) {
-    return [
-      {
-        title: label,
-        description: (
-          <EuiText size="s">
-            <ul>
-              {values
-                .filter(v => !isEmpty(v))
-                .map((val, index) => (
-                  <li data-test-subj="urlsDescriptionReferenceLinkItem" key={`${index}-${val}`}>
-                    <EuiLink href={val} external target="_blank">
-                      {val}
-                    </EuiLink>
-                  </li>
-                ))}
-            </ul>
-          </EuiText>
-        ),
-      },
-    ];
-  }
-  return [];
-};
-
-export const buildNoteDescription = (label: string, note: string): ListItems[] => {
-  if (note.trim() !== '') {
-    return [
-      {
-        title: label,
-        description: (
-          <NoteDescriptionContainer>
-            <div data-test-subj="noteDescriptionItem" className="eui-yScrollWithShadows">
-              {note}
-            </div>
-          </NoteDescriptionContainer>
-        ),
-      },
-    ];
-  }
-  return [];
-};
-
-export const buildRuleTypeDescription = (label: string, ruleType: RuleType): ListItems[] => {
-  switch (ruleType) {
-    case 'machine_learning': {
-      return [
-        {
-          title: label,
-          description: i18n.ML_TYPE_DESCRIPTION,
-        },
-      ];
-    }
-    case 'query':
-    case 'saved_query': {
-      return [
-        {
-          title: label,
-          description: i18n.QUERY_TYPE_DESCRIPTION,
-        },
-      ];
-    }
-    default:
-      return assertUnreachable(ruleType);
-  }
-};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/description_step/index.test.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/description_step/index.test.tsx
deleted file mode 100644
index fdfcfd0fd85fe3..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/description_step/index.test.tsx
+++ /dev/null
@@ -1,474 +0,0 @@
-/*
- * 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 {
-  StepRuleDescriptionComponent,
-  addFilterStateIfNotThere,
-  buildListItems,
-  getDescriptionItem,
-} from './';
-
-import {
-  esFilters,
-  Filter,
-  FilterManager,
-} from '../../../../../../../../../src/plugins/data/public';
-import { mockAboutStepRule, mockDefineStepRule } from '../../all/__mocks__/mock';
-import { coreMock } from '../../../../../../../../../src/core/public/mocks';
-import { DEFAULT_TIMELINE_TITLE } from '../../../../../components/timeline/translations';
-import * as i18n from './translations';
-
-import { schema } from '../step_about_rule/schema';
-import { ListItems } from './types';
-import { AboutStepRule } from '../../types';
-
-jest.mock('../../../../../lib/kibana');
-
-describe('description_step', () => {
-  const setupMock = coreMock.createSetup();
-  const uiSettingsMock = (pinnedByDefault: boolean) => (key: string) => {
-    switch (key) {
-      case 'filters:pinnedByDefault':
-        return pinnedByDefault;
-      default:
-        throw new Error(`Unexpected uiSettings key in FilterManager mock: ${key}`);
-    }
-  };
-  let mockFilterManager: FilterManager;
-  let mockAboutStep: AboutStepRule;
-
-  beforeEach(() => {
-    setupMock.uiSettings.get.mockImplementation(uiSettingsMock(true));
-    mockFilterManager = new FilterManager(setupMock.uiSettings);
-    mockAboutStep = mockAboutStepRule();
-  });
-
-  describe('StepRuleDescriptionComponent', () => {
-    test('renders correctly against snapshot when columns is "multi"', () => {
-      const wrapper = shallow(
-        <StepRuleDescriptionComponent columns="multi" data={mockAboutStep} schema={schema} />
-      );
-      expect(wrapper).toMatchSnapshot();
-      expect(wrapper.find('[data-test-subj="listItemColumnStepRuleDescription"]')).toHaveLength(2);
-    });
-
-    test('renders correctly against snapshot when columns is "single"', () => {
-      const wrapper = shallow(
-        <StepRuleDescriptionComponent columns="single" data={mockAboutStep} schema={schema} />
-      );
-      expect(wrapper).toMatchSnapshot();
-      expect(wrapper.find('[data-test-subj="listItemColumnStepRuleDescription"]')).toHaveLength(1);
-    });
-
-    test('renders correctly against snapshot when columns is "singleSplit', () => {
-      const wrapper = shallow(
-        <StepRuleDescriptionComponent columns="singleSplit" data={mockAboutStep} schema={schema} />
-      );
-      expect(wrapper).toMatchSnapshot();
-      expect(wrapper.find('[data-test-subj="listItemColumnStepRuleDescription"]')).toHaveLength(1);
-      expect(
-        wrapper
-          .find('[data-test-subj="singleSplitStepRuleDescriptionList"]')
-          .at(0)
-          .prop('type')
-      ).toEqual('column');
-    });
-  });
-
-  describe('addFilterStateIfNotThere', () => {
-    test('it does not change the state if it is global', () => {
-      const filters: Filter[] = [
-        {
-          $state: {
-            store: esFilters.FilterStateStore.GLOBAL_STATE,
-          },
-          meta: {
-            alias: null,
-            disabled: false,
-            key: 'event.category',
-            negate: false,
-            params: {
-              query: 'file',
-            },
-            type: 'phrase',
-          },
-          query: {
-            match_phrase: {
-              'event.category': 'file',
-            },
-          },
-        },
-        {
-          $state: {
-            store: esFilters.FilterStateStore.GLOBAL_STATE,
-          },
-          meta: {
-            alias: null,
-            disabled: false,
-            key: 'event.category',
-            negate: false,
-            params: {
-              query: 'file',
-            },
-            type: 'phrase',
-          },
-          query: {
-            match_phrase: {
-              'event.category': 'file',
-            },
-          },
-        },
-      ];
-      const output = addFilterStateIfNotThere(filters);
-      const expected: Filter[] = [
-        {
-          $state: {
-            store: esFilters.FilterStateStore.GLOBAL_STATE,
-          },
-          meta: {
-            alias: null,
-            disabled: false,
-            key: 'event.category',
-            negate: false,
-            params: {
-              query: 'file',
-            },
-            type: 'phrase',
-          },
-          query: {
-            match_phrase: {
-              'event.category': 'file',
-            },
-          },
-        },
-        {
-          $state: {
-            store: esFilters.FilterStateStore.GLOBAL_STATE,
-          },
-          meta: {
-            alias: null,
-            disabled: false,
-            key: 'event.category',
-            negate: false,
-            params: {
-              query: 'file',
-            },
-            type: 'phrase',
-          },
-          query: {
-            match_phrase: {
-              'event.category': 'file',
-            },
-          },
-        },
-      ];
-      expect(output).toEqual(expected);
-    });
-
-    test('it adds the state if it does not exist as local', () => {
-      const filters: Filter[] = [
-        {
-          meta: {
-            alias: null,
-            disabled: false,
-            key: 'event.category',
-            negate: false,
-            params: {
-              query: 'file',
-            },
-            type: 'phrase',
-          },
-          query: {
-            match_phrase: {
-              'event.category': 'file',
-            },
-          },
-        },
-        {
-          meta: {
-            alias: null,
-            disabled: false,
-            key: 'event.category',
-            negate: false,
-            params: {
-              query: 'file',
-            },
-            type: 'phrase',
-          },
-          query: {
-            match_phrase: {
-              'event.category': 'file',
-            },
-          },
-        },
-      ];
-      const output = addFilterStateIfNotThere(filters);
-      const expected: Filter[] = [
-        {
-          $state: {
-            store: esFilters.FilterStateStore.APP_STATE,
-          },
-          meta: {
-            alias: null,
-            disabled: false,
-            key: 'event.category',
-            negate: false,
-            params: {
-              query: 'file',
-            },
-            type: 'phrase',
-          },
-          query: {
-            match_phrase: {
-              'event.category': 'file',
-            },
-          },
-        },
-        {
-          $state: {
-            store: esFilters.FilterStateStore.APP_STATE,
-          },
-          meta: {
-            alias: null,
-            disabled: false,
-            key: 'event.category',
-            negate: false,
-            params: {
-              query: 'file',
-            },
-            type: 'phrase',
-          },
-          query: {
-            match_phrase: {
-              'event.category': 'file',
-            },
-          },
-        },
-      ];
-      expect(output).toEqual(expected);
-    });
-  });
-
-  describe('buildListItems', () => {
-    test('returns expected ListItems array when given valid inputs', () => {
-      const result: ListItems[] = buildListItems(mockAboutStep, schema, mockFilterManager);
-
-      expect(result.length).toEqual(9);
-    });
-  });
-
-  describe('getDescriptionItem', () => {
-    test('returns ListItem with all values enumerated when value[field] is an array', () => {
-      const result: ListItems[] = getDescriptionItem(
-        'tags',
-        'Tags label',
-        mockAboutStep,
-        mockFilterManager
-      );
-
-      expect(result[0].title).toEqual('Tags label');
-      expect(typeof result[0].description).toEqual('object');
-    });
-
-    test('returns ListItem with description of value[field] when value[field] is a string', () => {
-      const result: ListItems[] = getDescriptionItem(
-        'description',
-        'Description label',
-        mockAboutStep,
-        mockFilterManager
-      );
-
-      expect(result[0].title).toEqual('Description label');
-      expect(result[0].description).toEqual('24/7');
-    });
-
-    test('returns empty array when "value" is a non-existant property in "field"', () => {
-      const result: ListItems[] = getDescriptionItem(
-        'jibberjabber',
-        'JibberJabber label',
-        mockAboutStep,
-        mockFilterManager
-      );
-
-      expect(result.length).toEqual(0);
-    });
-
-    describe('queryBar', () => {
-      test('returns array of ListItems when queryBar exist', () => {
-        const mockQueryBar = {
-          isNew: false,
-          queryBar: {
-            query: {
-              query: 'user.name: root or user.name: admin',
-              language: 'kuery',
-            },
-            filters: null,
-            saved_id: null,
-          },
-        };
-        const result: ListItems[] = getDescriptionItem(
-          'queryBar',
-          'Query bar label',
-          mockQueryBar,
-          mockFilterManager
-        );
-
-        expect(result[0].title).toEqual(<>{i18n.QUERY_LABEL} </>);
-        expect(result[0].description).toEqual(<>{mockQueryBar.queryBar.query.query} </>);
-      });
-    });
-
-    describe('threat', () => {
-      test('returns array of ListItems when threat exist', () => {
-        const result: ListItems[] = getDescriptionItem(
-          'threat',
-          'Threat label',
-          mockAboutStep,
-          mockFilterManager
-        );
-
-        expect(result[0].title).toEqual('Threat label');
-        expect(React.isValidElement(result[0].description)).toBeTruthy();
-      });
-
-      test('filters out threats with tactic.name of "none"', () => {
-        const mockStep = {
-          ...mockAboutStep,
-          threat: [
-            {
-              framework: 'mockFramework',
-              tactic: {
-                id: '1234',
-                name: 'none',
-                reference: 'reference1',
-              },
-              technique: [
-                {
-                  id: '456',
-                  name: 'technique1',
-                  reference: 'technique reference',
-                },
-              ],
-            },
-          ],
-        };
-        const result: ListItems[] = getDescriptionItem(
-          'threat',
-          'Threat label',
-          mockStep,
-          mockFilterManager
-        );
-
-        expect(result.length).toEqual(0);
-      });
-    });
-
-    describe('references', () => {
-      test('returns array of ListItems when references exist', () => {
-        const result: ListItems[] = getDescriptionItem(
-          'references',
-          'Reference label',
-          mockAboutStep,
-          mockFilterManager
-        );
-
-        expect(result[0].title).toEqual('Reference label');
-        expect(React.isValidElement(result[0].description)).toBeTruthy();
-      });
-    });
-
-    describe('falsePositives', () => {
-      test('returns array of ListItems when falsePositives exist', () => {
-        const result: ListItems[] = getDescriptionItem(
-          'falsePositives',
-          'False positives label',
-          mockAboutStep,
-          mockFilterManager
-        );
-
-        expect(result[0].title).toEqual('False positives label');
-        expect(React.isValidElement(result[0].description)).toBeTruthy();
-      });
-    });
-
-    describe('severity', () => {
-      test('returns array of ListItems when severity exist', () => {
-        const result: ListItems[] = getDescriptionItem(
-          'severity',
-          'Severity label',
-          mockAboutStep,
-          mockFilterManager
-        );
-
-        expect(result[0].title).toEqual('Severity label');
-        expect(React.isValidElement(result[0].description)).toBeTruthy();
-      });
-    });
-
-    describe('riskScore', () => {
-      test('returns array of ListItems when riskScore exist', () => {
-        const result: ListItems[] = getDescriptionItem(
-          'riskScore',
-          'Risk score label',
-          mockAboutStep,
-          mockFilterManager
-        );
-
-        expect(result[0].title).toEqual('Risk score label');
-        expect(result[0].description).toEqual(21);
-      });
-    });
-
-    describe('timeline', () => {
-      test('returns timeline title if one exists', () => {
-        const mockDefineStep = mockDefineStepRule();
-        const result: ListItems[] = getDescriptionItem(
-          'timeline',
-          'Timeline label',
-          mockDefineStep,
-          mockFilterManager
-        );
-
-        expect(result[0].title).toEqual('Timeline label');
-        expect(result[0].description).toEqual('Titled timeline');
-      });
-
-      test('returns default timeline title if none exists', () => {
-        const mockStep = {
-          ...mockDefineStepRule(),
-          timeline: {
-            id: '12345',
-          },
-        };
-        const result: ListItems[] = getDescriptionItem(
-          'timeline',
-          'Timeline label',
-          mockStep,
-          mockFilterManager
-        );
-
-        expect(result[0].title).toEqual('Timeline label');
-        expect(result[0].description).toEqual(DEFAULT_TIMELINE_TITLE);
-      });
-    });
-
-    describe('note', () => {
-      test('returns default "note" description', () => {
-        const result: ListItems[] = getDescriptionItem(
-          'note',
-          'Investigation guide',
-          mockAboutStep,
-          mockFilterManager
-        );
-
-        expect(result[0].title).toEqual('Investigation guide');
-        expect(React.isValidElement(result[0].description)).toBeTruthy();
-      });
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/description_step/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/description_step/index.tsx
deleted file mode 100644
index 108f2138114122..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/description_step/index.tsx
+++ /dev/null
@@ -1,205 +0,0 @@
-/*
- * 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 { EuiDescriptionList, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { isEmpty, chunk, get, pick, isNumber } from 'lodash/fp';
-import React, { memo, useState } from 'react';
-import styled from 'styled-components';
-
-import { RuleType } from '../../../../../../common/detection_engine/types';
-import {
-  IIndexPattern,
-  Filter,
-  esFilters,
-  FilterManager,
-} from '../../../../../../../../../src/plugins/data/public';
-import { DEFAULT_TIMELINE_TITLE } from '../../../../../components/timeline/translations';
-import { useKibana } from '../../../../../lib/kibana';
-import { IMitreEnterpriseAttack } from '../../types';
-import { FieldValueTimeline } from '../pick_timeline';
-import { FormSchema } from '../../../../../shared_imports';
-import { ListItems } from './types';
-import {
-  buildQueryBarDescription,
-  buildSeverityDescription,
-  buildStringArrayDescription,
-  buildThreatDescription,
-  buildUnorderedListArrayDescription,
-  buildUrlsDescription,
-  buildNoteDescription,
-  buildRuleTypeDescription,
-} from './helpers';
-import { useSiemJobs } from '../../../../../components/ml_popover/hooks/use_siem_jobs';
-import { buildMlJobDescription } from './ml_job_description';
-
-const DescriptionListContainer = styled(EuiDescriptionList)`
-  &.euiDescriptionList--column .euiDescriptionList__title {
-    width: 30%;
-  }
-  &.euiDescriptionList--column .euiDescriptionList__description {
-    width: 70%;
-  }
-`;
-
-interface StepRuleDescriptionProps {
-  columns?: 'multi' | 'single' | 'singleSplit';
-  data: unknown;
-  indexPatterns?: IIndexPattern;
-  schema: FormSchema;
-}
-
-export const StepRuleDescriptionComponent: React.FC<StepRuleDescriptionProps> = ({
-  data,
-  columns = 'multi',
-  indexPatterns,
-  schema,
-}) => {
-  const kibana = useKibana();
-  const [filterManager] = useState<FilterManager>(new FilterManager(kibana.services.uiSettings));
-  const [, siemJobs] = useSiemJobs(true);
-
-  const keys = Object.keys(schema);
-  const listItems = keys.reduce((acc: ListItems[], key: string) => {
-    if (key === 'machineLearningJobId') {
-      return [
-        ...acc,
-        buildMlJobDescription(
-          get(key, data) as string,
-          (get(key, schema) as { label: string }).label,
-          siemJobs
-        ),
-      ];
-    }
-    return [...acc, ...buildListItems(data, pick(key, schema), filterManager, indexPatterns)];
-  }, []);
-
-  if (columns === 'multi') {
-    return (
-      <EuiFlexGroup>
-        {chunk(Math.ceil(listItems.length / 2), listItems).map((chunkListItems, index) => (
-          <EuiFlexItem
-            data-test-subj="listItemColumnStepRuleDescription"
-            key={`description-step-rule-${index}`}
-          >
-            <EuiDescriptionList listItems={chunkListItems} />
-          </EuiFlexItem>
-        ))}
-      </EuiFlexGroup>
-    );
-  }
-
-  return (
-    <EuiFlexGroup>
-      <EuiFlexItem data-test-subj="listItemColumnStepRuleDescription">
-        {columns === 'single' ? (
-          <EuiDescriptionList listItems={listItems} />
-        ) : (
-          <DescriptionListContainer
-            data-test-subj="singleSplitStepRuleDescriptionList"
-            type="column"
-            listItems={listItems}
-          />
-        )}
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  );
-};
-
-export const StepRuleDescription = memo(StepRuleDescriptionComponent);
-
-export const buildListItems = (
-  data: unknown,
-  schema: FormSchema,
-  filterManager: FilterManager,
-  indexPatterns?: IIndexPattern
-): ListItems[] =>
-  Object.keys(schema).reduce<ListItems[]>(
-    (acc, field) => [
-      ...acc,
-      ...getDescriptionItem(
-        field,
-        get([field, 'label'], schema),
-        data,
-        filterManager,
-        indexPatterns
-      ),
-    ],
-    []
-  );
-
-export const addFilterStateIfNotThere = (filters: Filter[]): Filter[] => {
-  return filters.map(filter => {
-    if (filter.$state == null) {
-      return { $state: { store: esFilters.FilterStateStore.APP_STATE }, ...filter };
-    } else {
-      return filter;
-    }
-  });
-};
-
-export const getDescriptionItem = (
-  field: string,
-  label: string,
-  data: unknown,
-  filterManager: FilterManager,
-  indexPatterns?: IIndexPattern
-): ListItems[] => {
-  if (field === 'queryBar') {
-    const filters = addFilterStateIfNotThere(get('queryBar.filters', data) ?? []);
-    const query = get('queryBar.query.query', data);
-    const savedId = get('queryBar.saved_id', data);
-    return buildQueryBarDescription({
-      field,
-      filters,
-      filterManager,
-      query,
-      savedId,
-      indexPatterns,
-    });
-  } else if (field === 'threat') {
-    const threat: IMitreEnterpriseAttack[] = get(field, data).filter(
-      (singleThreat: IMitreEnterpriseAttack) => singleThreat.tactic.name !== 'none'
-    );
-    return buildThreatDescription({ label, threat });
-  } else if (field === 'references') {
-    const urls: string[] = get(field, data);
-    return buildUrlsDescription(label, urls);
-  } else if (field === 'falsePositives') {
-    const values: string[] = get(field, data);
-    return buildUnorderedListArrayDescription(label, field, values);
-  } else if (Array.isArray(get(field, data))) {
-    const values: string[] = get(field, data);
-    return buildStringArrayDescription(label, field, values);
-  } else if (field === 'severity') {
-    const val: string = get(field, data);
-    return buildSeverityDescription(label, val);
-  } else if (field === 'timeline') {
-    const timeline = get(field, data) as FieldValueTimeline;
-    return [
-      {
-        title: label,
-        description: timeline.title ?? DEFAULT_TIMELINE_TITLE,
-      },
-    ];
-  } else if (field === 'note') {
-    const val: string = get(field, data);
-    return buildNoteDescription(label, val);
-  } else if (field === 'ruleType') {
-    const ruleType: RuleType = get(field, data);
-    return buildRuleTypeDescription(label, ruleType);
-  }
-
-  const description: string = get(field, data);
-  if (isNumber(description) || !isEmpty(description)) {
-    return [
-      {
-        title: label,
-        description,
-      },
-    ];
-  }
-  return [];
-};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/description_step/types.ts b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/description_step/types.ts
deleted file mode 100644
index 564a3c5dc2c018..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/description_step/types.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * 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 { ReactNode } from 'react';
-
-import {
-  IIndexPattern,
-  Filter,
-  FilterManager,
-} from '../../../../../../../../../src/plugins/data/public';
-import { IMitreEnterpriseAttack } from '../../types';
-
-export interface ListItems {
-  title: NonNullable<ReactNode>;
-  description: NonNullable<ReactNode>;
-}
-
-export interface BuildQueryBarDescription {
-  field: string;
-  filters: Filter[];
-  filterManager: FilterManager;
-  query: string;
-  savedId: string;
-  indexPatterns?: IIndexPattern;
-}
-
-export interface BuildThreatDescription {
-  label: string;
-  threat: IMitreEnterpriseAttack[];
-}
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/mitre/helpers.ts b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/mitre/helpers.ts
deleted file mode 100644
index 7a28a16214df63..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/mitre/helpers.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/*
- * 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 { isEmpty } from 'lodash/fp';
-
-import { IMitreAttack } from '../../types';
-
-export const isMitreAttackInvalid = (
-  tacticName: string | null | undefined,
-  technique: IMitreAttack[] | null | undefined
-) => {
-  if (isEmpty(tacticName) || (tacticName !== 'none' && isEmpty(technique))) {
-    return true;
-  }
-  return false;
-};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/mitre/index.test.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/mitre/index.test.tsx
deleted file mode 100644
index 3e8d5426824560..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/mitre/index.test.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * 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 { AddMitreThreat } from './index';
-import { useFormFieldMock } from '../../../../../mock';
-
-describe('AddMitreThreat', () => {
-  it('renders correctly', () => {
-    const Component = () => {
-      const field = useFormFieldMock();
-
-      return (
-        <AddMitreThreat
-          dataTestSubj="dataTestSubj"
-          idAria="idAria"
-          isDisabled={false}
-          field={field}
-        />
-      );
-    };
-    const wrapper = shallow(<Component />);
-
-    expect(wrapper.dive().find('[data-test-subj="addMitre"]')).toHaveLength(1);
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/mitre/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/mitre/index.tsx
deleted file mode 100644
index a2d81e72af40e4..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/mitre/index.tsx
+++ /dev/null
@@ -1,218 +0,0 @@
-/*
- * 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 {
-  EuiButtonIcon,
-  EuiFormRow,
-  EuiSuperSelect,
-  EuiSpacer,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiComboBox,
-  EuiText,
-} from '@elastic/eui';
-import { isEmpty, kebabCase, camelCase } from 'lodash/fp';
-import React, { useCallback, useState } from 'react';
-import styled from 'styled-components';
-
-import { tacticsOptions, techniquesOptions } from '../../../mitre/mitre_tactics_techniques';
-import * as Rulei18n from '../../translations';
-import { FieldHook, getFieldValidityAndErrorMessage } from '../../../../../shared_imports';
-import { threatDefault } from '../step_about_rule/default_value';
-import { IMitreEnterpriseAttack } from '../../types';
-import { MyAddItemButton } from '../add_item_form';
-import { isMitreAttackInvalid } from './helpers';
-import * as i18n from './translations';
-
-const MitreContainer = styled.div`
-  margin-top: 16px;
-`;
-const MyEuiSuperSelect = styled(EuiSuperSelect)`
-  width: 280px;
-`;
-interface AddItemProps {
-  field: FieldHook;
-  dataTestSubj: string;
-  idAria: string;
-  isDisabled: boolean;
-}
-
-export const AddMitreThreat = ({ dataTestSubj, field, idAria, isDisabled }: AddItemProps) => {
-  const [showValidation, setShowValidation] = useState(false);
-  const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
-
-  const removeItem = useCallback(
-    (index: number) => {
-      const values = field.value as string[];
-      const newValues = [...values.slice(0, index), ...values.slice(index + 1)];
-      if (isEmpty(newValues)) {
-        field.setValue(threatDefault);
-      } else {
-        field.setValue(newValues);
-      }
-    },
-    [field]
-  );
-
-  const addItem = useCallback(() => {
-    const values = field.value as IMitreEnterpriseAttack[];
-    if (!isEmpty(values[values.length - 1])) {
-      field.setValue([
-        ...values,
-        { tactic: { id: 'none', name: 'none', reference: 'none' }, technique: [] },
-      ]);
-    } else {
-      field.setValue([{ tactic: { id: 'none', name: 'none', reference: 'none' }, technique: [] }]);
-    }
-  }, [field]);
-
-  const updateTactic = useCallback(
-    (index: number, value: string) => {
-      const values = field.value as IMitreEnterpriseAttack[];
-      const { id, reference, name } = tacticsOptions.find(t => t.value === value) || {
-        id: '',
-        name: '',
-        reference: '',
-      };
-      field.setValue([
-        ...values.slice(0, index),
-        {
-          ...values[index],
-          tactic: { id, reference, name },
-          technique: [],
-        },
-        ...values.slice(index + 1),
-      ]);
-    },
-    [field]
-  );
-
-  const updateTechniques = useCallback(
-    (index: number, selectedOptions: unknown[]) => {
-      field.setValue([
-        ...values.slice(0, index),
-        {
-          ...values[index],
-          technique: selectedOptions,
-        },
-        ...values.slice(index + 1),
-      ]);
-    },
-    [field]
-  );
-
-  const values = field.value as IMitreEnterpriseAttack[];
-
-  const getSelectTactic = (tacticName: string, index: number, disabled: boolean) => (
-    <MyEuiSuperSelect
-      id="selectDocExample"
-      options={[
-        ...(tacticName === 'none'
-          ? [
-              {
-                inputDisplay: <>{i18n.TACTIC_PLACEHOLDER}</>,
-                value: 'none',
-                disabled,
-              },
-            ]
-          : []),
-        ...tacticsOptions.map(t => ({
-          inputDisplay: <>{t.text}</>,
-          value: t.value,
-          disabled,
-        })),
-      ]}
-      aria-label=""
-      onChange={updateTactic.bind(null, index)}
-      fullWidth={false}
-      valueOfSelected={camelCase(tacticName)}
-      data-test-subj="mitreTactic"
-    />
-  );
-
-  const getSelectTechniques = (item: IMitreEnterpriseAttack, index: number, disabled: boolean) => {
-    const invalid = isMitreAttackInvalid(item.tactic.name, item.technique);
-    const options = techniquesOptions.filter(t => t.tactics.includes(kebabCase(item.tactic.name)));
-    const selectedOptions = item.technique.map(technic => ({
-      ...technic,
-      label: `${technic.name} (${technic.id})`, // API doesn't allow for label field
-    }));
-
-    return (
-      <EuiFlexGroup gutterSize="s" alignItems="center">
-        <EuiFlexItem grow>
-          <EuiComboBox
-            data-test-subj="mitreTechniques"
-            placeholder={item.tactic.name === 'none' ? '' : i18n.TECHNIQUES_PLACEHOLDER}
-            options={options}
-            selectedOptions={selectedOptions}
-            onChange={updateTechniques.bind(null, index)}
-            isDisabled={disabled || item.tactic.name === 'none'}
-            fullWidth={true}
-            isInvalid={showValidation && invalid}
-            onBlur={() => setShowValidation(true)}
-          />
-          {showValidation && invalid && (
-            <EuiText color="danger" size="xs">
-              <p>{errorMessage}</p>
-            </EuiText>
-          )}
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiButtonIcon
-            color="danger"
-            iconType="trash"
-            isDisabled={disabled || item.tactic.name === 'none'}
-            onClick={() => removeItem(index)}
-            aria-label={Rulei18n.DELETE}
-          />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    );
-  };
-
-  return (
-    <MitreContainer>
-      {values.map((item, index) => (
-        <div key={index}>
-          <EuiFlexGroup gutterSize="s" justifyContent="spaceBetween" alignItems="flexStart">
-            <EuiFlexItem grow={false}>
-              {index === 0 ? (
-                <EuiFormRow
-                  label={`${field.label} ${i18n.TACTIC}`}
-                  labelAppend={field.labelAppend}
-                  describedByIds={idAria ? [`${idAria} ${i18n.TACTIC}`] : undefined}
-                >
-                  <>{getSelectTactic(item.tactic.name, index, isDisabled)}</>
-                </EuiFormRow>
-              ) : (
-                getSelectTactic(item.tactic.name, index, isDisabled)
-              )}
-            </EuiFlexItem>
-            <EuiFlexItem grow>
-              {index === 0 ? (
-                <EuiFormRow
-                  label={`${field.label} ${i18n.TECHNIQUE}`}
-                  isInvalid={showValidation && isInvalid}
-                  fullWidth
-                  describedByIds={idAria ? [`${idAria} ${i18n.TECHNIQUE}`] : undefined}
-                >
-                  <>{getSelectTechniques(item, index, isDisabled)}</>
-                </EuiFormRow>
-              ) : (
-                getSelectTechniques(item, index, isDisabled)
-              )}
-            </EuiFlexItem>
-          </EuiFlexGroup>
-          {values.length - 1 !== index && <EuiSpacer size="s" />}
-        </div>
-      ))}
-      <MyAddItemButton data-test-subj="addMitre" onClick={addItem} isDisabled={isDisabled}>
-        {i18n.ADD_MITRE_ATTACK}
-      </MyAddItemButton>
-    </MitreContainer>
-  );
-};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/ml_job_select/index.test.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/ml_job_select/index.test.tsx
deleted file mode 100644
index dea27d8d045365..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/ml_job_select/index.test.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * 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 { MlJobSelect } from './index';
-import { useSiemJobs } from '../../../../../components/ml_popover/hooks/use_siem_jobs';
-import { useFormFieldMock } from '../../../../../mock';
-jest.mock('../../../../../components/ml_popover/hooks/use_siem_jobs');
-jest.mock('../../../../../lib/kibana');
-
-describe('MlJobSelect', () => {
-  beforeAll(() => {
-    (useSiemJobs as jest.Mock).mockReturnValue([false, []]);
-  });
-
-  it('renders correctly', () => {
-    const Component = () => {
-      const field = useFormFieldMock();
-
-      return <MlJobSelect describedByIds={[]} field={field} />;
-    };
-    const wrapper = shallow(<Component />);
-
-    expect(wrapper.dive().find('[data-test-subj="mlJobSelect"]')).toHaveLength(1);
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/ml_job_select/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/ml_job_select/index.tsx
deleted file mode 100644
index c011c06e86542e..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/ml_job_select/index.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-/*
- * 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, { useCallback, useMemo } from 'react';
-import { FormattedMessage } from '@kbn/i18n/react';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiFormRow,
-  EuiIcon,
-  EuiLink,
-  EuiSuperSelect,
-  EuiText,
-} from '@elastic/eui';
-
-import styled from 'styled-components';
-import { isJobStarted } from '../../../../../../common/machine_learning/helpers';
-import { FieldHook, getFieldValidityAndErrorMessage } from '../../../../../shared_imports';
-import { useSiemJobs } from '../../../../../components/ml_popover/hooks/use_siem_jobs';
-import { useKibana } from '../../../../../lib/kibana';
-import {
-  ML_JOB_SELECT_PLACEHOLDER_TEXT,
-  ENABLE_ML_JOB_WARNING,
-} from '../step_define_rule/translations';
-
-const HelpTextWarningContainer = styled.div`
-  margin-top: 10px;
-`;
-
-const MlJobSelectEuiFlexGroup = styled(EuiFlexGroup)`
-  margin-bottom: 5px;
-`;
-
-const HelpText: React.FC<{ href: string; showEnableWarning: boolean }> = ({
-  href,
-  showEnableWarning = false,
-}) => (
-  <>
-    <FormattedMessage
-      id="xpack.siem.detectionEngine.createRule.stepDefineRule.machineLearningJobIdHelpText"
-      defaultMessage="We've provided a few common jobs to get you started. To add your own custom jobs, assign a group of “siem” to those jobs in the {machineLearning} application to make them appear here."
-      values={{
-        machineLearning: (
-          <EuiLink href={href} target="_blank">
-            <FormattedMessage
-              id="xpack.siem.components.mlJobSelect.machineLearningLink"
-              defaultMessage="Machine Learning"
-            />
-          </EuiLink>
-        ),
-      }}
-    />
-    {showEnableWarning && (
-      <HelpTextWarningContainer>
-        <EuiText size="xs" color="warning">
-          <EuiIcon type="alert" />
-          <span>{ENABLE_ML_JOB_WARNING}</span>
-        </EuiText>
-      </HelpTextWarningContainer>
-    )}
-  </>
-);
-
-const JobDisplay: React.FC<{ title: string; description: string }> = ({ title, description }) => (
-  <>
-    <strong>{title}</strong>
-    <EuiText size="xs" color="subdued">
-      <p>{description}</p>
-    </EuiText>
-  </>
-);
-
-interface MlJobSelectProps {
-  describedByIds: string[];
-  field: FieldHook;
-}
-
-export const MlJobSelect: React.FC<MlJobSelectProps> = ({ describedByIds = [], field }) => {
-  const jobId = field.value as string;
-  const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
-  const [isLoading, siemJobs] = useSiemJobs(false);
-  const mlUrl = useKibana().services.application.getUrlForApp('ml');
-  const handleJobChange = useCallback(
-    (machineLearningJobId: string) => {
-      field.setValue(machineLearningJobId);
-    },
-    [field]
-  );
-  const placeholderOption = {
-    value: 'placeholder',
-    inputDisplay: ML_JOB_SELECT_PLACEHOLDER_TEXT,
-    dropdownDisplay: ML_JOB_SELECT_PLACEHOLDER_TEXT,
-    disabled: true,
-  };
-
-  const jobOptions = siemJobs.map(job => ({
-    value: job.id,
-    inputDisplay: job.id,
-    dropdownDisplay: <JobDisplay title={job.id} description={job.description} />,
-  }));
-
-  const options = [placeholderOption, ...jobOptions];
-
-  const isJobRunning = useMemo(() => {
-    // If the selected job is not found in the list, it means the placeholder is selected
-    // and so we don't want to show the warning, thus isJobRunning will be true when 'job == null'
-    const job = siemJobs.find(j => j.id === jobId);
-    return job == null || isJobStarted(job.jobState, job.datafeedState);
-  }, [siemJobs, jobId]);
-
-  return (
-    <MlJobSelectEuiFlexGroup>
-      <EuiFlexItem>
-        <EuiFormRow
-          label={field.label}
-          helpText={<HelpText href={mlUrl} showEnableWarning={!isJobRunning} />}
-          isInvalid={isInvalid}
-          error={errorMessage}
-          data-test-subj="mlJobSelect"
-          describedByIds={describedByIds}
-        >
-          <EuiFlexGroup>
-            <EuiFlexItem>
-              <EuiSuperSelect
-                hasDividers
-                isLoading={isLoading}
-                onChange={handleJobChange}
-                options={options}
-                valueOfSelected={jobId || 'placeholder'}
-              />
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiFormRow>
-      </EuiFlexItem>
-    </MlJobSelectEuiFlexGroup>
-  );
-};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/next_step/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/next_step/index.tsx
deleted file mode 100644
index 11332e7af92662..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/next_step/index.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * 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 { EuiHorizontalRule, EuiFlexGroup, EuiFlexItem, EuiButton } from '@elastic/eui';
-import * as RuleI18n from '../../translations';
-
-interface NextStepProps {
-  onClick: () => Promise<void>;
-  isDisabled: boolean;
-  dataTestSubj?: string;
-}
-
-export const NextStep = React.memo<NextStepProps>(
-  ({ onClick, isDisabled, dataTestSubj = 'nextStep-continue' }) => (
-    <>
-      <EuiHorizontalRule margin="m" />
-      <EuiFlexGroup alignItems="center" justifyContent="flexEnd" gutterSize="xs" responsive={false}>
-        <EuiFlexItem grow={false}>
-          <EuiButton fill onClick={onClick} isDisabled={isDisabled} data-test-subj={dataTestSubj}>
-            {RuleI18n.CONTINUE}
-          </EuiButton>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </>
-  )
-);
-
-NextStep.displayName = 'NextStep';
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/optional_field_label/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/optional_field_label/index.tsx
deleted file mode 100644
index 0dab87b0a3b744..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/optional_field_label/index.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-/*
- * 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 { EuiText } from '@elastic/eui';
-import React from 'react';
-
-import * as RuleI18n from '../../translations';
-
-export const OptionalFieldLabel = (
-  <EuiText color="subdued" size="xs">
-    {RuleI18n.OPTIONAL_FIELD}
-  </EuiText>
-);
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/pick_timeline/index.test.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/pick_timeline/index.test.tsx
deleted file mode 100644
index fefc9697176c4c..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/pick_timeline/index.test.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * 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 { PickTimeline } from './index';
-import { useFormFieldMock } from '../../../../../mock';
-
-describe('PickTimeline', () => {
-  it('renders correctly', () => {
-    const Component = () => {
-      const field = useFormFieldMock();
-
-      return (
-        <PickTimeline
-          dataTestSubj="pick-timeline"
-          idAria="idAria"
-          isDisabled={false}
-          field={field}
-        />
-      );
-    };
-    const wrapper = shallow(<Component />);
-
-    expect(wrapper.dive().find('[data-test-subj="pick-timeline"]')).toHaveLength(1);
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/pick_timeline/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/pick_timeline/index.tsx
deleted file mode 100644
index 27d668dc6166c4..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/pick_timeline/index.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-/*
- * 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 { EuiFormRow } from '@elastic/eui';
-import React, { useCallback, useEffect, useState } from 'react';
-
-import { SearchTimelineSuperSelect } from '../../../../../components/timeline/search_super_select';
-import { FieldHook, getFieldValidityAndErrorMessage } from '../../../../../shared_imports';
-
-export interface FieldValueTimeline {
-  id: string | null;
-  title: string | null;
-}
-
-interface QueryBarDefineRuleProps {
-  dataTestSubj: string;
-  field: FieldHook;
-  idAria: string;
-  isDisabled: boolean;
-}
-
-export const PickTimeline = ({
-  dataTestSubj,
-  field,
-  idAria,
-  isDisabled = false,
-}: QueryBarDefineRuleProps) => {
-  const [timelineId, setTimelineId] = useState<string | null>(null);
-  const [timelineTitle, setTimelineTitle] = useState<string | null>(null);
-
-  const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
-
-  useEffect(() => {
-    const { id, title } = field.value as FieldValueTimeline;
-    if (timelineTitle !== title && timelineId !== id) {
-      setTimelineId(id);
-      setTimelineTitle(title);
-    }
-  }, [field.value]);
-
-  const handleOnTimelineChange = useCallback(
-    (title: string, id: string | null) => {
-      if (id === null) {
-        field.setValue({ id, title: null });
-      } else if (timelineTitle !== title && timelineId !== id) {
-        field.setValue({ id, title });
-      }
-    },
-    [field]
-  );
-
-  return (
-    <EuiFormRow
-      label={field.label}
-      labelAppend={field.labelAppend}
-      helpText={field.helpText}
-      error={errorMessage}
-      isInvalid={isInvalid}
-      data-test-subj={dataTestSubj}
-      describedByIds={idAria ? [idAria] : undefined}
-    >
-      <SearchTimelineSuperSelect
-        isDisabled={isDisabled}
-        hideUntitled={true}
-        timelineId={timelineId}
-        timelineTitle={timelineTitle}
-        onTimelineChange={handleOnTimelineChange}
-      />
-    </EuiFormRow>
-  );
-};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/query_bar/index.test.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/query_bar/index.test.tsx
deleted file mode 100644
index cdd06ad58bb4b2..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/query_bar/index.test.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * 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 { QueryBarDefineRule } from './index';
-import { useFormFieldMock } from '../../../../../mock';
-
-jest.mock('../../../../../lib/kibana');
-
-describe('QueryBarDefineRule', () => {
-  it('renders correctly', () => {
-    const Component = () => {
-      const field = useFormFieldMock();
-
-      return (
-        <QueryBarDefineRule
-          browserFields={{}}
-          isLoading={false}
-          indexPattern={{ fields: [], title: 'title' }}
-          onCloseTimelineSearch={jest.fn()}
-          openTimelineSearch={true}
-          dataTestSubj="query-bar-define-rule"
-          idAria="idAria"
-          field={field}
-        />
-      );
-    };
-    const wrapper = shallow(<Component />);
-
-    expect(wrapper.dive().find('[data-test-subj="query-bar-define-rule"]')).toHaveLength(1);
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/query_bar/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/query_bar/index.tsx
deleted file mode 100644
index b92d98a4afb13b..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/query_bar/index.tsx
+++ /dev/null
@@ -1,285 +0,0 @@
-/*
- * 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 { EuiFormRow, EuiMutationObserver } from '@elastic/eui';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Subscription } from 'rxjs';
-import styled from 'styled-components';
-import deepEqual from 'fast-deep-equal';
-
-import {
-  Filter,
-  IIndexPattern,
-  Query,
-  FilterManager,
-  SavedQuery,
-  SavedQueryTimeFilter,
-} from '../../../../../../../../../src/plugins/data/public';
-
-import { BrowserFields } from '../../../../../containers/source';
-import { OpenTimelineModal } from '../../../../../components/open_timeline/open_timeline_modal';
-import { ActionTimelineToShow } from '../../../../../components/open_timeline/types';
-import { QueryBar } from '../../../../../components/query_bar';
-import { buildGlobalQuery } from '../../../../../components/timeline/helpers';
-import { getDataProviderFilter } from '../../../../../components/timeline/query_bar';
-import { convertKueryToElasticSearchQuery } from '../../../../../lib/keury';
-import { useKibana } from '../../../../../lib/kibana';
-import { TimelineModel } from '../../../../../store/timeline/model';
-import { useSavedQueryServices } from '../../../../../utils/saved_query_services';
-import { FieldHook, getFieldValidityAndErrorMessage } from '../../../../../shared_imports';
-import * as i18n from './translations';
-
-export interface FieldValueQueryBar {
-  filters: Filter[];
-  query: Query;
-  saved_id?: string;
-}
-interface QueryBarDefineRuleProps {
-  browserFields: BrowserFields;
-  dataTestSubj: string;
-  field: FieldHook;
-  idAria: string;
-  isLoading: boolean;
-  indexPattern: IIndexPattern;
-  onCloseTimelineSearch: () => void;
-  openTimelineSearch: boolean;
-  resizeParentContainer?: (height: number) => void;
-}
-
-const StyledEuiFormRow = styled(EuiFormRow)`
-  .kbnTypeahead__items {
-    max-height: 45vh !important;
-  }
-  .globalQueryBar {
-    padding: 4px 0px 0px 0px;
-    .kbnQueryBar {
-      & > div:first-child {
-        margin: 0px 0px 0px 4px;
-      }
-    }
-  }
-`;
-
-// TODO need to add disabled in the SearchBar
-
-export const QueryBarDefineRule = ({
-  browserFields,
-  dataTestSubj,
-  field,
-  idAria,
-  indexPattern,
-  isLoading = false,
-  onCloseTimelineSearch,
-  openTimelineSearch = false,
-  resizeParentContainer,
-}: QueryBarDefineRuleProps) => {
-  const [originalHeight, setOriginalHeight] = useState(-1);
-  const [loadingTimeline, setLoadingTimeline] = useState(false);
-  const [savedQuery, setSavedQuery] = useState<SavedQuery | null>(null);
-  const [queryDraft, setQueryDraft] = useState<Query>({ query: '', language: 'kuery' });
-  const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
-
-  const kibana = useKibana();
-  const [filterManager] = useState<FilterManager>(new FilterManager(kibana.services.uiSettings));
-
-  const savedQueryServices = useSavedQueryServices();
-
-  useEffect(() => {
-    let isSubscribed = true;
-    const subscriptions = new Subscription();
-    filterManager.setFilters([]);
-
-    subscriptions.add(
-      filterManager.getUpdates$().subscribe({
-        next: () => {
-          if (isSubscribed) {
-            const newFilters = filterManager.getFilters();
-            const { filters } = field.value as FieldValueQueryBar;
-
-            if (!deepEqual(filters, newFilters)) {
-              field.setValue({ ...(field.value as FieldValueQueryBar), filters: newFilters });
-            }
-          }
-        },
-      })
-    );
-
-    return () => {
-      isSubscribed = false;
-      subscriptions.unsubscribe();
-    };
-  }, [field.value]);
-
-  useEffect(() => {
-    let isSubscribed = true;
-    async function updateFilterQueryFromValue() {
-      const { filters, query, saved_id: savedId } = field.value as FieldValueQueryBar;
-      if (!deepEqual(query, queryDraft)) {
-        setQueryDraft(query);
-      }
-      if (!deepEqual(filters, filterManager.getFilters())) {
-        filterManager.setFilters(filters);
-      }
-      if (
-        (savedId != null && savedQuery != null && savedId !== savedQuery.id) ||
-        (savedId != null && savedQuery == null)
-      ) {
-        try {
-          const mySavedQuery = await savedQueryServices.getSavedQuery(savedId);
-          if (isSubscribed && mySavedQuery != null) {
-            setSavedQuery(mySavedQuery);
-          }
-        } catch {
-          setSavedQuery(null);
-        }
-      } else if (savedId == null && savedQuery != null) {
-        setSavedQuery(null);
-      }
-    }
-    updateFilterQueryFromValue();
-    return () => {
-      isSubscribed = false;
-    };
-  }, [field.value]);
-
-  const onSubmitQuery = useCallback(
-    (newQuery: Query, timefilter?: SavedQueryTimeFilter) => {
-      const { query } = field.value as FieldValueQueryBar;
-      if (!deepEqual(query, newQuery)) {
-        field.setValue({ ...(field.value as FieldValueQueryBar), query: newQuery });
-      }
-    },
-    [field]
-  );
-
-  const onChangedQuery = useCallback(
-    (newQuery: Query) => {
-      const { query } = field.value as FieldValueQueryBar;
-      if (!deepEqual(query, newQuery)) {
-        field.setValue({ ...(field.value as FieldValueQueryBar), query: newQuery });
-      }
-    },
-    [field]
-  );
-
-  const onSavedQuery = useCallback(
-    (newSavedQuery: SavedQuery | null) => {
-      if (newSavedQuery != null) {
-        const { saved_id: savedId } = field.value as FieldValueQueryBar;
-        if (newSavedQuery.id !== savedId) {
-          setSavedQuery(newSavedQuery);
-          field.setValue({
-            filters: newSavedQuery.attributes.filters,
-            query: newSavedQuery.attributes.query,
-            saved_id: newSavedQuery.id,
-          });
-        }
-      }
-    },
-    [field.value]
-  );
-
-  const onCloseTimelineModal = useCallback(() => {
-    setLoadingTimeline(true);
-    onCloseTimelineSearch();
-  }, [onCloseTimelineSearch]);
-
-  const onOpenTimeline = useCallback(
-    (timeline: TimelineModel) => {
-      setLoadingTimeline(false);
-      const newQuery = {
-        query: timeline.kqlQuery.filterQuery?.kuery?.expression ?? '',
-        language: timeline.kqlQuery.filterQuery?.kuery?.kind ?? 'kuery',
-      };
-      const dataProvidersDsl =
-        timeline.dataProviders != null && timeline.dataProviders.length > 0
-          ? convertKueryToElasticSearchQuery(
-              buildGlobalQuery(timeline.dataProviders, browserFields),
-              indexPattern
-            )
-          : '';
-      const newFilters = timeline.filters ?? [];
-      field.setValue({
-        filters:
-          dataProvidersDsl !== ''
-            ? [...newFilters, getDataProviderFilter(dataProvidersDsl)]
-            : newFilters,
-        query: newQuery,
-        saved_id: '',
-      });
-    },
-    [browserFields, field, indexPattern]
-  );
-
-  const onMutation = (event: unknown, observer: unknown) => {
-    if (resizeParentContainer != null) {
-      const suggestionContainer = document.getElementById('kbnTypeahead__items');
-      if (suggestionContainer != null) {
-        const box = suggestionContainer.getBoundingClientRect();
-        const accordionContainer = document.getElementById('define-rule');
-        if (accordionContainer != null) {
-          const accordionBox = accordionContainer.getBoundingClientRect();
-          if (originalHeight === -1 || accordionBox.height < originalHeight + box.height) {
-            resizeParentContainer(originalHeight + box.height - 100);
-          }
-          if (originalHeight === -1) {
-            setOriginalHeight(accordionBox.height);
-          }
-        }
-      } else {
-        resizeParentContainer(-1);
-      }
-    }
-  };
-
-  const actionTimelineToHide = useMemo<ActionTimelineToShow[]>(() => ['duplicate'], []);
-
-  return (
-    <>
-      <StyledEuiFormRow
-        label={field.label}
-        labelAppend={field.labelAppend}
-        helpText={field.helpText}
-        error={errorMessage}
-        isInvalid={isInvalid}
-        fullWidth
-        data-test-subj={dataTestSubj}
-        describedByIds={idAria ? [idAria] : undefined}
-      >
-        <EuiMutationObserver
-          observerOptions={{ subtree: true, attributes: true, childList: true }}
-          onMutation={onMutation}
-        >
-          {mutationRef => (
-            <div ref={mutationRef}>
-              <QueryBar
-                indexPattern={indexPattern}
-                isLoading={isLoading || loadingTimeline}
-                isRefreshPaused={false}
-                filterQuery={queryDraft}
-                filterManager={filterManager}
-                filters={filterManager.getFilters() || []}
-                onChangedQuery={onChangedQuery}
-                onSubmitQuery={onSubmitQuery}
-                savedQuery={savedQuery}
-                onSavedQuery={onSavedQuery}
-                hideSavedQuery={false}
-              />
-            </div>
-          )}
-        </EuiMutationObserver>
-      </StyledEuiFormRow>
-      {openTimelineSearch ? (
-        <OpenTimelineModal
-          hideActions={actionTimelineToHide}
-          modalTitle={i18n.IMPORT_TIMELINE_MODAL}
-          onClose={onCloseTimelineModal}
-          onOpen={onOpenTimeline}
-        />
-      ) : null}
-    </>
-  );
-};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_actions_field/index.test.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_actions_field/index.test.tsx
deleted file mode 100644
index 13ae3ee3d3b7de..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_actions_field/index.test.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
- * 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 { RuleActionsField } from './index';
-import { useKibana } from '../../../../../lib/kibana';
-import { useFormFieldMock } from '../../../../../mock';
-jest.mock('../../../../../lib/kibana');
-
-describe('RuleActionsField', () => {
-  it('should not render ActionForm is no actions are supported', () => {
-    (useKibana as jest.Mock).mockReturnValue({
-      services: {
-        triggers_actions_ui: {
-          actionTypeRegistry: {},
-        },
-        application: {
-          capabilities: {
-            actions: {
-              delete: true,
-              save: true,
-              show: true,
-            },
-          },
-        },
-      },
-    });
-    const Component = () => {
-      const field = useFormFieldMock();
-
-      return <RuleActionsField euiFieldProps={{ options: [] }} field={field} />;
-    };
-    const wrapper = shallow(<Component />);
-
-    expect(wrapper.dive().find('ActionForm')).toHaveLength(0);
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_actions_field/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_actions_field/index.tsx
deleted file mode 100644
index d53cf52cc67b94..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_actions_field/index.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-/*
- * 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, { useCallback, useEffect, useState } from 'react';
-import deepMerge from 'deepmerge';
-
-import { NOTIFICATION_SUPPORTED_ACTION_TYPES_IDS } from '../../../../../../common/constants';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { loadActionTypes } from '../../../../../../../triggers_actions_ui/public/application/lib/action_connector_api';
-import { SelectField } from '../../../../../shared_imports';
-import { ActionForm, ActionType } from '../../../../../../../triggers_actions_ui/public';
-import { AlertAction } from '../../../../../../../alerting/common';
-import { useKibana } from '../../../../../lib/kibana';
-
-type ThrottleSelectField = typeof SelectField;
-
-const DEFAULT_ACTION_GROUP_ID = 'default';
-const DEFAULT_ACTION_MESSAGE =
-  'Rule {{context.rule.name}} generated {{state.signals_count}} signals';
-
-export const RuleActionsField: ThrottleSelectField = ({ field, messageVariables }) => {
-  const [supportedActionTypes, setSupportedActionTypes] = useState<ActionType[] | undefined>();
-  const {
-    http,
-    triggers_actions_ui: { actionTypeRegistry },
-    notifications,
-    docLinks,
-    application: { capabilities },
-  } = useKibana().services;
-
-  const setActionIdByIndex = useCallback(
-    (id: string, index: number) => {
-      const updatedActions = [...(field.value as Array<Partial<AlertAction>>)];
-      updatedActions[index] = deepMerge(updatedActions[index], { id });
-      field.setValue(updatedActions);
-    },
-    [field]
-  );
-
-  const setAlertProperty = useCallback(
-    (updatedActions: AlertAction[]) => field.setValue(updatedActions),
-    [field]
-  );
-
-  const setActionParamsProperty = useCallback(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (key: string, value: any, index: number) => {
-      const updatedActions = [...(field.value as AlertAction[])];
-      updatedActions[index].params[key] = value;
-      field.setValue(updatedActions);
-    },
-    [field]
-  );
-
-  useEffect(() => {
-    (async function() {
-      const actionTypes = await loadActionTypes({ http });
-      const supportedTypes = actionTypes.filter(actionType =>
-        NOTIFICATION_SUPPORTED_ACTION_TYPES_IDS.includes(actionType.id)
-      );
-      setSupportedActionTypes(supportedTypes);
-    })();
-  }, []);
-
-  if (!supportedActionTypes) return <></>;
-
-  return (
-    <ActionForm
-      actions={field.value as AlertAction[]}
-      messageVariables={messageVariables}
-      defaultActionGroupId={DEFAULT_ACTION_GROUP_ID}
-      setActionIdByIndex={setActionIdByIndex}
-      setAlertProperty={setAlertProperty}
-      setActionParamsProperty={setActionParamsProperty}
-      http={http}
-      actionTypeRegistry={actionTypeRegistry}
-      actionTypes={supportedActionTypes}
-      defaultActionMessage={DEFAULT_ACTION_MESSAGE}
-      toastNotifications={notifications.toasts}
-      docLinks={docLinks}
-      capabilities={capabilities}
-    />
-  );
-};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_actions_overflow/index.test.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_actions_overflow/index.test.tsx
deleted file mode 100644
index b54938e6a3cf18..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_actions_overflow/index.test.tsx
+++ /dev/null
@@ -1,295 +0,0 @@
-/*
- * 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 { shallow, mount } from 'enzyme';
-import React from 'react';
-
-import { deleteRulesAction, duplicateRulesAction } from '../../all/actions';
-import { RuleActionsOverflow } from './index';
-import { mockRule } from '../../all/__mocks__/mock';
-
-jest.mock('react-router-dom', () => ({
-  useHistory: () => ({
-    push: jest.fn(),
-  }),
-}));
-
-jest.mock('../../all/actions', () => ({
-  deleteRulesAction: jest.fn(),
-  duplicateRulesAction: jest.fn(),
-}));
-
-describe('RuleActionsOverflow', () => {
-  describe('snapshots', () => {
-    test('renders correctly against snapshot', () => {
-      const wrapper = shallow(
-        <RuleActionsOverflow rule={mockRule('id')} userHasNoPermissions={false} />
-      );
-      expect(wrapper).toMatchSnapshot();
-    });
-  });
-
-  describe('rules details menu panel', () => {
-    test('there is at least one item when there is a rule within the rules-details-menu-panel', () => {
-      const wrapper = mount(
-        <RuleActionsOverflow rule={mockRule('id')} userHasNoPermissions={false} />
-      );
-      wrapper.find('[data-test-subj="rules-details-popover-button-icon"] button').simulate('click');
-      wrapper.update();
-      const items: unknown[] = wrapper
-        .find('[data-test-subj="rules-details-menu-panel"]')
-        .first()
-        .prop('items');
-
-      expect(items.length).toBeGreaterThan(0);
-    });
-
-    test('items are empty when there is a null rule within the rules-details-menu-panel', () => {
-      const wrapper = mount(<RuleActionsOverflow rule={null} userHasNoPermissions={false} />);
-      wrapper.find('[data-test-subj="rules-details-popover-button-icon"] button').simulate('click');
-      wrapper.update();
-      expect(
-        wrapper
-          .find('[data-test-subj="rules-details-menu-panel"]')
-          .first()
-          .prop('items')
-      ).toEqual([]);
-    });
-
-    test('items are empty when there is an undefined rule within the rules-details-menu-panel', () => {
-      const wrapper = mount(<RuleActionsOverflow rule={null} userHasNoPermissions={false} />);
-      wrapper.find('[data-test-subj="rules-details-popover-button-icon"] button').simulate('click');
-      wrapper.update();
-      expect(
-        wrapper
-          .find('[data-test-subj="rules-details-menu-panel"]')
-          .first()
-          .prop('items')
-      ).toEqual([]);
-    });
-
-    test('it opens the popover when rules-details-popover-button-icon is clicked', () => {
-      const wrapper = mount(
-        <RuleActionsOverflow rule={mockRule('id')} userHasNoPermissions={false} />
-      );
-      wrapper.find('[data-test-subj="rules-details-popover-button-icon"] button').simulate('click');
-      wrapper.update();
-      expect(
-        wrapper
-          .find('[data-test-subj="rules-details-popover"]')
-          .first()
-          .prop('isOpen')
-      ).toEqual(true);
-    });
-  });
-
-  describe('rules details pop over button icon', () => {
-    test('it does not open the popover when rules-details-popover-button-icon is clicked when the user does not have permission', () => {
-      const wrapper = mount(
-        <RuleActionsOverflow rule={mockRule('id')} userHasNoPermissions={true} />
-      );
-      wrapper.find('[data-test-subj="rules-details-popover-button-icon"] button').simulate('click');
-      wrapper.update();
-      expect(
-        wrapper
-          .find('[data-test-subj="rules-details-popover"]')
-          .first()
-          .prop('isOpen')
-      ).toEqual(false);
-    });
-  });
-
-  describe('rules details duplicate rule', () => {
-    test('it does not open the popover when rules-details-popover-button-icon is clicked and the user does not have permission', () => {
-      const rule = mockRule('id');
-      const wrapper = mount(<RuleActionsOverflow rule={rule} userHasNoPermissions={true} />);
-      wrapper.find('[data-test-subj="rules-details-popover-button-icon"] button').simulate('click');
-      wrapper.update();
-      expect(wrapper.find('[data-test-subj="rules-details-delete-rule"] button').exists()).toEqual(
-        false
-      );
-    });
-
-    test('it opens the popover when rules-details-popover-button-icon is clicked', () => {
-      const wrapper = mount(
-        <RuleActionsOverflow rule={mockRule('id')} userHasNoPermissions={false} />
-      );
-      wrapper.find('[data-test-subj="rules-details-popover-button-icon"] button').simulate('click');
-      wrapper.update();
-      expect(
-        wrapper
-          .find('[data-test-subj="rules-details-popover"]')
-          .first()
-          .prop('isOpen')
-      ).toEqual(true);
-    });
-
-    test('it closes the popover when rules-details-duplicate-rule is clicked', () => {
-      const wrapper = mount(
-        <RuleActionsOverflow rule={mockRule('id')} userHasNoPermissions={false} />
-      );
-      wrapper.find('[data-test-subj="rules-details-popover-button-icon"] button').simulate('click');
-      wrapper.update();
-      wrapper.find('[data-test-subj="rules-details-duplicate-rule"] button').simulate('click');
-      wrapper.update();
-      expect(
-        wrapper
-          .find('[data-test-subj="rules-details-popover"]')
-          .first()
-          .prop('isOpen')
-      ).toEqual(false);
-    });
-
-    test('it calls duplicateRulesAction when rules-details-duplicate-rule is clicked', () => {
-      const wrapper = mount(
-        <RuleActionsOverflow rule={mockRule('id')} userHasNoPermissions={false} />
-      );
-      wrapper.find('[data-test-subj="rules-details-popover-button-icon"] button').simulate('click');
-      wrapper.update();
-      wrapper.find('[data-test-subj="rules-details-duplicate-rule"] button').simulate('click');
-      wrapper.update();
-      expect(duplicateRulesAction).toHaveBeenCalled();
-    });
-
-    test('it calls duplicateRulesAction with the rule and rule.id when rules-details-duplicate-rule is clicked', () => {
-      const rule = mockRule('id');
-      const wrapper = mount(<RuleActionsOverflow rule={rule} userHasNoPermissions={false} />);
-      wrapper.find('[data-test-subj="rules-details-popover-button-icon"] button').simulate('click');
-      wrapper.update();
-      wrapper.find('[data-test-subj="rules-details-duplicate-rule"] button').simulate('click');
-      wrapper.update();
-      expect(duplicateRulesAction).toHaveBeenCalledWith(
-        [rule],
-        [rule.id],
-        expect.anything(),
-        expect.anything()
-      );
-    });
-  });
-
-  describe('rules details export rule', () => {
-    test('it does not open the popover when rules-details-popover-button-icon is clicked and the user does not have permission', () => {
-      const rule = mockRule('id');
-      const wrapper = mount(<RuleActionsOverflow rule={rule} userHasNoPermissions={true} />);
-      wrapper.find('[data-test-subj="rules-details-popover-button-icon"] button').simulate('click');
-      wrapper.update();
-      expect(wrapper.find('[data-test-subj="rules-details-export-rule"] button').exists()).toEqual(
-        false
-      );
-    });
-
-    test('it closes the popover when rules-details-export-rule is clicked', () => {
-      const wrapper = mount(
-        <RuleActionsOverflow rule={mockRule('id')} userHasNoPermissions={false} />
-      );
-      wrapper.find('[data-test-subj="rules-details-popover-button-icon"] button').simulate('click');
-      wrapper.update();
-      wrapper.find('[data-test-subj="rules-details-export-rule"] button').simulate('click');
-      wrapper.update();
-      expect(
-        wrapper
-          .find('[data-test-subj="rules-details-popover"]')
-          .first()
-          .prop('isOpen')
-      ).toEqual(false);
-    });
-
-    test('it sets the rule.rule_id on the generic downloader when rules-details-export-rule is clicked', () => {
-      const rule = mockRule('id');
-      const wrapper = mount(<RuleActionsOverflow rule={rule} userHasNoPermissions={false} />);
-      wrapper.find('[data-test-subj="rules-details-popover-button-icon"] button').simulate('click');
-      wrapper.update();
-      wrapper.find('[data-test-subj="rules-details-export-rule"] button').simulate('click');
-      wrapper.update();
-      expect(
-        wrapper.find('[data-test-subj="rules-details-generic-downloader"]').prop('ids')
-      ).toEqual([rule.rule_id]);
-    });
-
-    test('it does not close the pop over on rules-details-export-rule when the rule is an immutable rule and the user does a click', () => {
-      const rule = mockRule('id');
-      rule.immutable = true;
-      const wrapper = mount(<RuleActionsOverflow rule={rule} userHasNoPermissions={false} />);
-      wrapper.find('[data-test-subj="rules-details-popover-button-icon"] button').simulate('click');
-      wrapper.update();
-      wrapper.find('[data-test-subj="rules-details-export-rule"] button').simulate('click');
-      wrapper.update();
-      expect(
-        wrapper
-          .find('[data-test-subj="rules-details-popover"]')
-          .first()
-          .prop('isOpen')
-      ).toEqual(true);
-    });
-
-    test('it does not set the rule.rule_id on rules-details-export-rule when the rule is an immutable rule', () => {
-      const rule = mockRule('id');
-      rule.immutable = true;
-      const wrapper = mount(<RuleActionsOverflow rule={rule} userHasNoPermissions={false} />);
-      wrapper.find('[data-test-subj="rules-details-popover-button-icon"] button').simulate('click');
-      wrapper.update();
-      wrapper.find('[data-test-subj="rules-details-export-rule"] button').simulate('click');
-      wrapper.update();
-      expect(
-        wrapper.find('[data-test-subj="rules-details-generic-downloader"]').prop('ids')
-      ).toEqual([]);
-    });
-  });
-
-  describe('rules details delete rule', () => {
-    test('it does not open the popover when rules-details-popover-button-icon is clicked and the user does not have permission', () => {
-      const rule = mockRule('id');
-      const wrapper = mount(<RuleActionsOverflow rule={rule} userHasNoPermissions={true} />);
-      wrapper.find('[data-test-subj="rules-details-popover-button-icon"] button').simulate('click');
-      wrapper.update();
-      expect(wrapper.find('[data-test-subj="rules-details-delete-rule"] button').exists()).toEqual(
-        false
-      );
-    });
-
-    test('it closes the popover when rules-details-delete-rule is clicked', () => {
-      const wrapper = mount(
-        <RuleActionsOverflow rule={mockRule('id')} userHasNoPermissions={false} />
-      );
-      wrapper.find('[data-test-subj="rules-details-popover-button-icon"] button').simulate('click');
-      wrapper.update();
-      wrapper.find('[data-test-subj="rules-details-delete-rule"] button').simulate('click');
-      wrapper.update();
-      expect(
-        wrapper
-          .find('[data-test-subj="rules-details-popover"]')
-          .first()
-          .prop('isOpen')
-      ).toEqual(false);
-    });
-
-    test('it calls deleteRulesAction when rules-details-delete-rule is clicked', () => {
-      const wrapper = mount(
-        <RuleActionsOverflow rule={mockRule('id')} userHasNoPermissions={false} />
-      );
-      wrapper.find('[data-test-subj="rules-details-popover-button-icon"] button').simulate('click');
-      wrapper.update();
-      wrapper.find('[data-test-subj="rules-details-delete-rule"] button').simulate('click');
-      wrapper.update();
-      expect(deleteRulesAction).toHaveBeenCalled();
-    });
-
-    test('it calls deleteRulesAction with the rule.id when rules-details-delete-rule is clicked', () => {
-      const rule = mockRule('id');
-      const wrapper = mount(<RuleActionsOverflow rule={rule} userHasNoPermissions={false} />);
-      wrapper.find('[data-test-subj="rules-details-popover-button-icon"] button').simulate('click');
-      wrapper.update();
-      wrapper.find('[data-test-subj="rules-details-delete-rule"] button').simulate('click');
-      wrapper.update();
-      expect(deleteRulesAction).toHaveBeenCalledWith(
-        [rule.id],
-        expect.anything(),
-        expect.anything(),
-        expect.anything()
-      );
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_actions_overflow/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_actions_overflow/index.tsx
deleted file mode 100644
index a7ce0c85ffdcf7..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_actions_overflow/index.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-/*
- * 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 {
-  EuiButtonIcon,
-  EuiContextMenuItem,
-  EuiContextMenuPanel,
-  EuiPopover,
-  EuiToolTip,
-} from '@elastic/eui';
-import React, { useCallback, useMemo, useState } from 'react';
-import styled from 'styled-components';
-
-import { noop } from 'lodash/fp';
-import { useHistory } from 'react-router-dom';
-import { Rule, exportRules } from '../../../../../containers/detection_engine/rules';
-import * as i18n from './translations';
-import * as i18nActions from '../../../rules/translations';
-import { displaySuccessToast, useStateToaster } from '../../../../../components/toasters';
-import { deleteRulesAction, duplicateRulesAction } from '../../all/actions';
-import { GenericDownloader } from '../../../../../components/generic_downloader';
-import { DETECTION_ENGINE_PAGE_NAME } from '../../../../../components/link_to/redirect_to_detection_engine';
-
-const MyEuiButtonIcon = styled(EuiButtonIcon)`
-  &.euiButtonIcon {
-    svg {
-      transform: rotate(90deg);
-    }
-    border: 1px solid  ${({ theme }) => theme.euiColorPrimary};
-    width: 40px;
-    height: 40px;
-  }
-`;
-
-interface RuleActionsOverflowComponentProps {
-  rule: Rule | null;
-  userHasNoPermissions: boolean;
-}
-
-/**
- * Overflow Actions for a Rule
- */
-const RuleActionsOverflowComponent = ({
-  rule,
-  userHasNoPermissions,
-}: RuleActionsOverflowComponentProps) => {
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-  const [rulesToExport, setRulesToExport] = useState<string[]>([]);
-  const history = useHistory();
-  const [, dispatchToaster] = useStateToaster();
-
-  const onRuleDeletedCallback = useCallback(() => {
-    history.push(`/${DETECTION_ENGINE_PAGE_NAME}/rules`);
-  }, [history]);
-
-  const actions = useMemo(
-    () =>
-      rule != null
-        ? [
-            <EuiContextMenuItem
-              key={i18nActions.DUPLICATE_RULE}
-              icon="copy"
-              disabled={userHasNoPermissions}
-              data-test-subj="rules-details-duplicate-rule"
-              onClick={async () => {
-                setIsPopoverOpen(false);
-                await duplicateRulesAction([rule], [rule.id], noop, dispatchToaster);
-              }}
-            >
-              {i18nActions.DUPLICATE_RULE}
-            </EuiContextMenuItem>,
-            <EuiContextMenuItem
-              key={i18nActions.EXPORT_RULE}
-              icon="exportAction"
-              disabled={userHasNoPermissions || rule.immutable}
-              data-test-subj="rules-details-export-rule"
-              onClick={() => {
-                setIsPopoverOpen(false);
-                setRulesToExport([rule.rule_id]);
-              }}
-            >
-              {i18nActions.EXPORT_RULE}
-            </EuiContextMenuItem>,
-            <EuiContextMenuItem
-              key={i18nActions.DELETE_RULE}
-              icon="trash"
-              disabled={userHasNoPermissions}
-              data-test-subj="rules-details-delete-rule"
-              onClick={async () => {
-                setIsPopoverOpen(false);
-                await deleteRulesAction([rule.id], noop, dispatchToaster, onRuleDeletedCallback);
-              }}
-            >
-              {i18nActions.DELETE_RULE}
-            </EuiContextMenuItem>,
-          ]
-        : [],
-    [rule, userHasNoPermissions]
-  );
-
-  const handlePopoverOpen = useCallback(() => {
-    setIsPopoverOpen(!isPopoverOpen);
-  }, [setIsPopoverOpen, isPopoverOpen]);
-
-  const button = useMemo(
-    () => (
-      <EuiToolTip position="top" content={i18n.ALL_ACTIONS}>
-        <MyEuiButtonIcon
-          iconType="boxesHorizontal"
-          aria-label={i18n.ALL_ACTIONS}
-          isDisabled={userHasNoPermissions}
-          data-test-subj="rules-details-popover-button-icon"
-          onClick={handlePopoverOpen}
-        />
-      </EuiToolTip>
-    ),
-    [handlePopoverOpen, userHasNoPermissions]
-  );
-
-  return (
-    <>
-      <EuiPopover
-        anchorPosition="leftCenter"
-        button={button}
-        closePopover={() => setIsPopoverOpen(false)}
-        id="ruleActionsOverflow"
-        isOpen={isPopoverOpen}
-        data-test-subj="rules-details-popover"
-        ownFocus={true}
-        panelPaddingSize="none"
-      >
-        <EuiContextMenuPanel data-test-subj="rules-details-menu-panel" items={actions} />
-      </EuiPopover>
-      <GenericDownloader
-        filename={`${i18nActions.EXPORT_FILENAME}.ndjson`}
-        ids={rulesToExport}
-        exportSelectedData={exportRules}
-        data-test-subj="rules-details-generic-downloader"
-        onExportSuccess={exportCount => {
-          displaySuccessToast(
-            i18nActions.SUCCESSFULLY_EXPORTED_RULES(exportCount),
-            dispatchToaster
-          );
-        }}
-      />
-    </>
-  );
-};
-
-export const RuleActionsOverflow = React.memo(RuleActionsOverflowComponent);
-
-RuleActionsOverflow.displayName = 'RuleActionsOverflow';
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_status/helpers.ts b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_status/helpers.ts
deleted file mode 100644
index 263f602251ea77..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_status/helpers.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/*
- * 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 { RuleStatusType } from '../../../../../containers/detection_engine/rules';
-
-export const getStatusColor = (status: RuleStatusType | string | null) =>
-  status == null
-    ? 'subdued'
-    : status === 'succeeded'
-    ? 'success'
-    : status === 'failed'
-    ? 'danger'
-    : status === 'executing' || status === 'going to run'
-    ? 'warning'
-    : 'subdued';
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_status/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_status/index.tsx
deleted file mode 100644
index ac457d7345c29e..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_status/index.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-/*
- * 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 {
-  EuiButtonIcon,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiHealth,
-  EuiLoadingSpinner,
-  EuiText,
-} from '@elastic/eui';
-import React, { memo, useCallback, useEffect, useState } from 'react';
-import deepEqual from 'fast-deep-equal';
-
-import { useRuleStatus, RuleInfoStatus } from '../../../../../containers/detection_engine/rules';
-import { FormattedDate } from '../../../../../components/formatted_date';
-import { getEmptyTagValue } from '../../../../../components/empty_value';
-import { getStatusColor } from './helpers';
-import * as i18n from './translations';
-
-interface RuleStatusProps {
-  ruleId: string | null;
-  ruleEnabled?: boolean | null;
-}
-
-const RuleStatusComponent: React.FC<RuleStatusProps> = ({ ruleId, ruleEnabled }) => {
-  const [loading, ruleStatus, fetchRuleStatus] = useRuleStatus(ruleId);
-  const [myRuleEnabled, setMyRuleEnabled] = useState<boolean | null>(ruleEnabled ?? null);
-  const [currentStatus, setCurrentStatus] = useState<RuleInfoStatus | null>(
-    ruleStatus?.current_status ?? null
-  );
-
-  useEffect(() => {
-    if (myRuleEnabled !== ruleEnabled && fetchRuleStatus != null && ruleId != null) {
-      fetchRuleStatus(ruleId);
-      if (myRuleEnabled !== ruleEnabled) {
-        setMyRuleEnabled(ruleEnabled ?? null);
-      }
-    }
-  }, [fetchRuleStatus, myRuleEnabled, ruleId, ruleEnabled, setMyRuleEnabled]);
-
-  useEffect(() => {
-    if (!deepEqual(currentStatus, ruleStatus?.current_status)) {
-      setCurrentStatus(ruleStatus?.current_status ?? null);
-    }
-  }, [currentStatus, ruleStatus, setCurrentStatus]);
-
-  const handleRefresh = useCallback(() => {
-    if (fetchRuleStatus != null && ruleId != null) {
-      fetchRuleStatus(ruleId);
-    }
-  }, [fetchRuleStatus, ruleId]);
-
-  return (
-    <EuiFlexGroup gutterSize="xs" alignItems="center" justifyContent="flexStart">
-      <EuiFlexItem grow={false}>
-        {i18n.STATUS}
-        {':'}
-      </EuiFlexItem>
-      {loading && (
-        <EuiFlexItem>
-          <EuiLoadingSpinner size="m" data-test-subj="rule-status-loader" />
-        </EuiFlexItem>
-      )}
-      {!loading && (
-        <>
-          <EuiFlexItem grow={false}>
-            <EuiHealth color={getStatusColor(currentStatus?.status ?? null)}>
-              <EuiText size="xs">{currentStatus?.status ?? getEmptyTagValue()}</EuiText>
-            </EuiHealth>
-          </EuiFlexItem>
-          {currentStatus?.status_date != null && currentStatus?.status != null && (
-            <>
-              <EuiFlexItem grow={false}>
-                <>{i18n.STATUS_AT}</>
-              </EuiFlexItem>
-              <EuiFlexItem grow={true}>
-                <FormattedDate value={currentStatus?.status_date} fieldName={i18n.STATUS_DATE} />
-              </EuiFlexItem>
-            </>
-          )}
-          <EuiFlexItem grow={false}>
-            <EuiButtonIcon
-              color="primary"
-              onClick={handleRefresh}
-              iconType="refresh"
-              aria-label={i18n.REFRESH}
-            />
-          </EuiFlexItem>
-        </>
-      )}
-    </EuiFlexGroup>
-  );
-};
-
-export const RuleStatus = memo(RuleStatusComponent);
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_switch/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_switch/index.tsx
deleted file mode 100644
index 44845ea68d954a..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/rule_switch/index.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-/*
- * 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 {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiLoadingSpinner,
-  EuiSwitch,
-  EuiSwitchEvent,
-} from '@elastic/eui';
-import { isEmpty } from 'lodash/fp';
-import styled from 'styled-components';
-import React, { useCallback, useState, useEffect } from 'react';
-
-import * as i18n from '../../translations';
-import { enableRules } from '../../../../../containers/detection_engine/rules';
-import { enableRulesAction } from '../../all/actions';
-import { Action } from '../../all/reducer';
-import { useStateToaster, displayErrorToast } from '../../../../../components/toasters';
-import { bucketRulesResponse } from '../../all/helpers';
-
-const StaticSwitch = styled(EuiSwitch)`
-  .euiSwitch__thumb,
-  .euiSwitch__icon {
-    transition: none;
-  }
-`;
-
-StaticSwitch.displayName = 'StaticSwitch';
-
-export interface RuleSwitchProps {
-  dispatch?: React.Dispatch<Action>;
-  id: string;
-  enabled: boolean;
-  isDisabled?: boolean;
-  isLoading?: boolean;
-  optionLabel?: string;
-  onChange?: (enabled: boolean) => void;
-}
-
-/**
- * Basic switch component for displaying loader when enabled/disabled
- */
-export const RuleSwitchComponent = ({
-  dispatch,
-  id,
-  isDisabled,
-  isLoading,
-  enabled,
-  optionLabel,
-  onChange,
-}: RuleSwitchProps) => {
-  const [myIsLoading, setMyIsLoading] = useState(false);
-  const [myEnabled, setMyEnabled] = useState(enabled ?? false);
-  const [, dispatchToaster] = useStateToaster();
-
-  const onRuleStateChange = useCallback(
-    async (event: EuiSwitchEvent) => {
-      setMyIsLoading(true);
-      if (dispatch != null) {
-        await enableRulesAction([id], event.target.checked!, dispatch, dispatchToaster);
-      } else {
-        try {
-          const enabling = event.target.checked!;
-          const response = await enableRules({
-            ids: [id],
-            enabled: enabling,
-          });
-          const { rules, errors } = bucketRulesResponse(response);
-
-          if (errors.length > 0) {
-            setMyIsLoading(false);
-            const title = enabling
-              ? i18n.BATCH_ACTION_ACTIVATE_SELECTED_ERROR(1)
-              : i18n.BATCH_ACTION_DEACTIVATE_SELECTED_ERROR(1);
-            displayErrorToast(
-              title,
-              errors.map(e => e.error.message),
-              dispatchToaster
-            );
-          } else {
-            const [rule] = rules;
-            setMyEnabled(rule.enabled);
-            if (onChange != null) {
-              onChange(rule.enabled);
-            }
-          }
-        } catch {
-          setMyIsLoading(false);
-        }
-      }
-      setMyIsLoading(false);
-    },
-    [dispatch, id]
-  );
-
-  useEffect(() => {
-    if (myEnabled !== enabled) {
-      setMyEnabled(enabled);
-    }
-  }, [enabled]);
-
-  useEffect(() => {
-    if (myIsLoading !== isLoading) {
-      setMyIsLoading(isLoading ?? false);
-    }
-  }, [isLoading]);
-
-  return (
-    <EuiFlexGroup alignItems="center" justifyContent="spaceAround">
-      <EuiFlexItem grow={false}>
-        {myIsLoading ? (
-          <EuiLoadingSpinner size="m" data-test-subj="rule-switch-loader" />
-        ) : (
-          <StaticSwitch
-            data-test-subj="rule-switch"
-            label={optionLabel ?? ''}
-            showLabel={!isEmpty(optionLabel)}
-            disabled={isDisabled}
-            checked={myEnabled}
-            onChange={onRuleStateChange}
-          />
-        )}
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  );
-};
-
-export const RuleSwitch = React.memo(RuleSwitchComponent);
-
-RuleSwitch.displayName = 'RuleSwitch';
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/schedule_item_form/index.test.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/schedule_item_form/index.test.tsx
deleted file mode 100644
index 3829af02ca4f17..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/schedule_item_form/index.test.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * 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 { ScheduleItem } from './index';
-import { useFormFieldMock } from '../../../../../mock';
-
-describe('ScheduleItem', () => {
-  it('renders correctly', () => {
-    const Component = () => {
-      const field = useFormFieldMock();
-
-      return (
-        <ScheduleItem
-          dataTestSubj="schedule-item"
-          idAria="idAria"
-          isDisabled={false}
-          field={field}
-        />
-      );
-    };
-    const wrapper = shallow(<Component />);
-
-    expect(wrapper.dive().find('[data-test-subj="schedule-item"]')).toHaveLength(1);
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/schedule_item_form/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/schedule_item_form/index.tsx
deleted file mode 100644
index 1b7d17016f83c3..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/schedule_item_form/index.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-/*
- * 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 {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiFieldNumber,
-  EuiFormRow,
-  EuiSelect,
-  EuiFormControlLayout,
-} from '@elastic/eui';
-import { isEmpty } from 'lodash/fp';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import styled from 'styled-components';
-
-import { FieldHook, getFieldValidityAndErrorMessage } from '../../../../../shared_imports';
-
-import * as I18n from './translations';
-
-interface ScheduleItemProps {
-  field: FieldHook;
-  dataTestSubj: string;
-  idAria: string;
-  isDisabled: boolean;
-  minimumValue?: number;
-}
-
-const timeTypeOptions = [
-  { value: 's', text: I18n.SECONDS },
-  { value: 'm', text: I18n.MINUTES },
-  { value: 'h', text: I18n.HOURS },
-];
-
-// move optional label to the end of input
-const StyledLabelAppend = styled(EuiFlexItem)`
-  &.euiFlexItem.euiFlexItem--flexGrowZero {
-    margin-left: 31px;
-  }
-`;
-
-const StyledEuiFormRow = styled(EuiFormRow)`
-  max-width: none;
-
-  .euiFormControlLayout {
-    max-width: 200px !important;
-  }
-
-  .euiFormControlLayout__childrenWrapper > *:first-child {
-    box-shadow: none;
-    height: 38px;
-  }
-
-  .euiFormControlLayout:not(:first-child) {
-    border-left: 1px solid ${({ theme }) => theme.eui.euiColorLightShade};
-  }
-`;
-
-const MyEuiSelect = styled(EuiSelect)`
-  width: auto;
-`;
-
-export const ScheduleItem = ({
-  dataTestSubj,
-  field,
-  idAria,
-  isDisabled,
-  minimumValue = 0,
-}: ScheduleItemProps) => {
-  const [timeType, setTimeType] = useState('s');
-  const [timeVal, setTimeVal] = useState<number>(0);
-  const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
-
-  const onChangeTimeType = useCallback(
-    e => {
-      setTimeType(e.target.value);
-      field.setValue(`${timeVal}${e.target.value}`);
-    },
-    [timeVal]
-  );
-
-  const onChangeTimeVal = useCallback(
-    e => {
-      const sanitizedValue: number = parseInt(e.target.value, 10);
-      setTimeVal(sanitizedValue);
-      field.setValue(`${sanitizedValue}${timeType}`);
-    },
-    [timeType]
-  );
-
-  useEffect(() => {
-    if (field.value !== `${timeVal}${timeType}`) {
-      const filterTimeVal = (field.value as string).match(/\d+/g);
-      const filterTimeType = (field.value as string).match(/[a-zA-Z]+/g);
-      if (
-        !isEmpty(filterTimeVal) &&
-        filterTimeVal != null &&
-        !isNaN(Number(filterTimeVal[0])) &&
-        Number(filterTimeVal[0]) !== Number(timeVal)
-      ) {
-        setTimeVal(Number(filterTimeVal[0]));
-      }
-      if (
-        !isEmpty(filterTimeType) &&
-        filterTimeType != null &&
-        ['s', 'm', 'h'].includes(filterTimeType[0]) &&
-        filterTimeType[0] !== timeType
-      ) {
-        setTimeType(filterTimeType[0]);
-      }
-    }
-  }, [field.value]);
-
-  // EUI missing some props
-  const rest = { disabled: isDisabled };
-  const label = useMemo(
-    () => (
-      <EuiFlexGroup gutterSize="s" justifyContent="flexStart" alignItems="center">
-        <EuiFlexItem grow={false} component="span">
-          {field.label}
-        </EuiFlexItem>
-        <StyledLabelAppend grow={false} component="span">
-          {field.labelAppend}
-        </StyledLabelAppend>
-      </EuiFlexGroup>
-    ),
-    [field.label, field.labelAppend]
-  );
-
-  return (
-    <StyledEuiFormRow
-      label={label}
-      helpText={field.helpText}
-      error={errorMessage}
-      isInvalid={isInvalid}
-      fullWidth={false}
-      data-test-subj={dataTestSubj}
-      describedByIds={idAria ? [idAria] : undefined}
-    >
-      <EuiFormControlLayout
-        append={
-          <MyEuiSelect
-            fullWidth={false}
-            options={timeTypeOptions}
-            onChange={onChangeTimeType}
-            value={timeType}
-            {...rest}
-          />
-        }
-      >
-        <EuiFieldNumber
-          fullWidth
-          min={minimumValue}
-          onChange={onChangeTimeVal}
-          value={timeVal}
-          {...rest}
-        />
-      </EuiFormControlLayout>
-    </StyledEuiFormRow>
-  );
-};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/select_rule_type/index.test.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/select_rule_type/index.test.tsx
deleted file mode 100644
index 3d832d61abb283..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/select_rule_type/index.test.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
- * 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 { SelectRuleType } from './index';
-import { useFormFieldMock } from '../../../../../mock';
-jest.mock('../../../../../lib/kibana');
-
-describe('SelectRuleType', () => {
-  it('renders correctly', () => {
-    const Component = () => {
-      const field = useFormFieldMock();
-
-      return <SelectRuleType field={field} />;
-    };
-    const wrapper = shallow(<Component />);
-
-    expect(wrapper.dive().find('[data-test-subj="selectRuleType"]')).toHaveLength(1);
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/select_rule_type/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/select_rule_type/index.tsx
deleted file mode 100644
index dc9a832f820ba7..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/select_rule_type/index.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-/*
- * 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, { useCallback } from 'react';
-import { FormattedMessage } from '@kbn/i18n/react';
-import {
-  EuiCard,
-  EuiFlexGrid,
-  EuiFlexItem,
-  EuiFormRow,
-  EuiIcon,
-  EuiLink,
-  EuiText,
-} from '@elastic/eui';
-
-import { isMlRule } from '../../../../../../common/machine_learning/helpers';
-import { RuleType } from '../../../../../../common/detection_engine/types';
-import { FieldHook } from '../../../../../shared_imports';
-import { useKibana } from '../../../../../lib/kibana';
-import * as i18n from './translations';
-
-const MlCardDescription = ({
-  subscriptionUrl,
-  hasValidLicense = false,
-}: {
-  subscriptionUrl: string;
-  hasValidLicense?: boolean;
-}) => (
-  <EuiText size="s">
-    {hasValidLicense ? (
-      i18n.ML_TYPE_DESCRIPTION
-    ) : (
-      <FormattedMessage
-        id="xpack.siem.detectionEngine.createRule.stepDefineRule.ruleTypeField.mlTypeDisabledDescription"
-        defaultMessage="Access to ML requires a {subscriptionsLink}."
-        values={{
-          subscriptionsLink: (
-            <EuiLink href={subscriptionUrl} target="_blank">
-              <FormattedMessage
-                id="xpack.siem.components.stepDefineRule.ruleTypeField.subscriptionsLink"
-                defaultMessage="Platinum subscription"
-              />
-            </EuiLink>
-          ),
-        }}
-      />
-    )}
-  </EuiText>
-);
-
-interface SelectRuleTypeProps {
-  describedByIds?: string[];
-  field: FieldHook;
-  hasValidLicense?: boolean;
-  isMlAdmin?: boolean;
-  isReadOnly?: boolean;
-}
-
-export const SelectRuleType: React.FC<SelectRuleTypeProps> = ({
-  describedByIds = [],
-  field,
-  isReadOnly = false,
-  hasValidLicense = false,
-  isMlAdmin = false,
-}) => {
-  const ruleType = field.value as RuleType;
-  const setType = useCallback(
-    (type: RuleType) => {
-      field.setValue(type);
-    },
-    [field]
-  );
-  const setMl = useCallback(() => setType('machine_learning'), [setType]);
-  const setQuery = useCallback(() => setType('query'), [setType]);
-  const mlCardDisabled = isReadOnly || !hasValidLicense || !isMlAdmin;
-  const licensingUrl = useKibana().services.application.getUrlForApp('kibana', {
-    path: '#/management/elasticsearch/license_management',
-  });
-
-  return (
-    <EuiFormRow
-      fullWidth
-      data-test-subj="selectRuleType"
-      describedByIds={describedByIds}
-      label={field.label}
-    >
-      <EuiFlexGrid columns={4}>
-        <EuiFlexItem>
-          <EuiCard
-            data-test-subj="customRuleType"
-            title={i18n.QUERY_TYPE_TITLE}
-            description={i18n.QUERY_TYPE_DESCRIPTION}
-            icon={<EuiIcon size="l" type="search" />}
-            selectable={{
-              isDisabled: isReadOnly,
-              onClick: setQuery,
-              isSelected: !isMlRule(ruleType),
-            }}
-          />
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiCard
-            data-test-subj="machineLearningRuleType"
-            title={i18n.ML_TYPE_TITLE}
-            description={
-              <MlCardDescription subscriptionUrl={licensingUrl} hasValidLicense={hasValidLicense} />
-            }
-            icon={<EuiIcon size="l" type="machineLearningApp" />}
-            isDisabled={mlCardDisabled}
-            selectable={{
-              isDisabled: mlCardDisabled,
-              onClick: setMl,
-              isSelected: isMlRule(ruleType),
-            }}
-          />
-        </EuiFlexItem>
-      </EuiFlexGrid>
-    </EuiFormRow>
-  );
-};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/status_icon/index.test.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/status_icon/index.test.tsx
deleted file mode 100644
index 89b8a56e790541..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/status_icon/index.test.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-/*
- * 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 { TestProviders } from '../../../../../mock';
-import { RuleStatusIcon } from './index';
-jest.mock('../../../../../lib/kibana');
-
-describe('RuleStatusIcon', () => {
-  it('renders correctly', () => {
-    const wrapper = shallow(<RuleStatusIcon name="name" type="active" />, {
-      wrappingComponent: TestProviders,
-    });
-
-    expect(wrapper.find('EuiAvatar')).toHaveLength(1);
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/status_icon/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/status_icon/index.tsx
deleted file mode 100644
index 3ec5bf1a12eb0f..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/status_icon/index.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-/*
- * 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 { EuiAvatar, EuiIcon } from '@elastic/eui';
-import React, { memo } from 'react';
-import styled from 'styled-components';
-
-import { useEuiTheme } from '../../../../../lib/theme/use_eui_theme';
-import { RuleStatusType } from '../../types';
-
-export interface RuleStatusIconProps {
-  name: string;
-  type: RuleStatusType;
-}
-
-const RuleStatusIconStyled = styled.div`
-  position: relative;
-  svg {
-    position: absolute;
-    top: 8px;
-    left: 9px;
-  }
-`;
-
-const RuleStatusIconComponent: React.FC<RuleStatusIconProps> = ({ name, type }) => {
-  const theme = useEuiTheme();
-  const color = type === 'passive' ? theme.euiColorLightestShade : theme.euiColorPrimary;
-  return (
-    <RuleStatusIconStyled>
-      <EuiAvatar color={color} name={type === 'valid' ? '' : name} size="l" />
-      {type === 'valid' ? <EuiIcon type="check" color={theme.euiColorEmptyShade} size="l" /> : null}
-    </RuleStatusIconStyled>
-  );
-};
-
-export const RuleStatusIcon = memo(RuleStatusIconComponent);
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule/index.test.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule/index.test.tsx
deleted file mode 100644
index 3c28e697789acf..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule/index.test.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-/*
- * 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 { mount, shallow } from 'enzyme';
-import { ThemeProvider } from 'styled-components';
-import euiDarkVars from '@elastic/eui/dist/eui_theme_light.json';
-
-import { StepAboutRule } from './';
-import { mockAboutStepRule } from '../../all/__mocks__/mock';
-import { StepRuleDescription } from '../description_step';
-import { stepAboutDefaultValue } from './default_value';
-
-const theme = () => ({ eui: euiDarkVars, darkMode: true });
-
-/* eslint-disable no-console */
-// Silence until enzyme fixed to use ReactTestUtils.act()
-const originalError = console.error;
-beforeAll(() => {
-  console.error = jest.fn();
-});
-afterAll(() => {
-  console.error = originalError;
-});
-/* eslint-enable no-console */
-
-describe('StepAboutRuleComponent', () => {
-  test('it renders StepRuleDescription if isReadOnlyView is true and "name" property exists', () => {
-    const wrapper = shallow(
-      <StepAboutRule
-        addPadding={false}
-        defaultValues={mockAboutStepRule()}
-        descriptionColumns="multi"
-        isReadOnlyView={true}
-        isLoading={false}
-      />
-    );
-
-    expect(wrapper.find(StepRuleDescription).exists()).toBeTruthy();
-  });
-
-  test('it prevents user from clicking continue if no "description" defined', () => {
-    const wrapper = mount(
-      <ThemeProvider theme={theme}>
-        <StepAboutRule
-          addPadding={true}
-          defaultValues={stepAboutDefaultValue}
-          descriptionColumns="multi"
-          isReadOnlyView={false}
-          isLoading={false}
-          setForm={jest.fn()}
-          setStepData={jest.fn()}
-        />
-      </ThemeProvider>
-    );
-
-    const nameInput = wrapper
-      .find('input[aria-describedby="detectionEngineStepAboutRuleName"]')
-      .at(0);
-    nameInput.simulate('change', { target: { value: 'Test name text' } });
-
-    const descriptionInput = wrapper
-      .find('textarea[aria-describedby="detectionEngineStepAboutRuleDescription"]')
-      .at(0);
-    const nextButton = wrapper.find('button[data-test-subj="about-continue"]').at(0);
-    nextButton.simulate('click');
-
-    expect(
-      wrapper
-        .find('input[aria-describedby="detectionEngineStepAboutRuleName"]')
-        .at(0)
-        .props().value
-    ).toEqual('Test name text');
-    expect(descriptionInput.props().value).toEqual('');
-    expect(
-      wrapper
-        .find('EuiFormRow[data-test-subj="detectionEngineStepAboutRuleDescription"] label')
-        .at(0)
-        .hasClass('euiFormLabel-isInvalid')
-    ).toBeTruthy();
-    expect(
-      wrapper
-        .find('EuiFormRow[data-test-subj="detectionEngineStepAboutRuleDescription"] EuiTextArea')
-        .at(0)
-        .prop('isInvalid')
-    ).toBeTruthy();
-  });
-
-  test('it prevents user from clicking continue if no "name" defined', () => {
-    const wrapper = mount(
-      <ThemeProvider theme={theme}>
-        <StepAboutRule
-          addPadding={true}
-          defaultValues={stepAboutDefaultValue}
-          descriptionColumns="multi"
-          isReadOnlyView={false}
-          isLoading={false}
-          setForm={jest.fn()}
-          setStepData={jest.fn()}
-        />
-      </ThemeProvider>
-    );
-
-    const descriptionInput = wrapper
-      .find('textarea[aria-describedby="detectionEngineStepAboutRuleDescription"]')
-      .at(0);
-    descriptionInput.simulate('change', { target: { value: 'Test description text' } });
-
-    const nameInput = wrapper
-      .find('input[aria-describedby="detectionEngineStepAboutRuleName"]')
-      .at(0);
-    const nextButton = wrapper.find('button[data-test-subj="about-continue"]').at(0);
-    nextButton.simulate('click');
-
-    expect(
-      wrapper
-        .find('textarea[aria-describedby="detectionEngineStepAboutRuleDescription"]')
-        .at(0)
-        .props().value
-    ).toEqual('Test description text');
-    expect(nameInput.props().value).toEqual('');
-    expect(
-      wrapper
-        .find('EuiFormRow[data-test-subj="detectionEngineStepAboutRuleName"] label')
-        .at(0)
-        .hasClass('euiFormLabel-isInvalid')
-    ).toBeTruthy();
-    expect(
-      wrapper
-        .find('EuiFormRow[data-test-subj="detectionEngineStepAboutRuleName"] EuiFieldText')
-        .at(0)
-        .prop('isInvalid')
-    ).toBeTruthy();
-  });
-
-  test('it allows user to click continue if "name" and "description" are defined', () => {
-    const wrapper = mount(
-      <ThemeProvider theme={theme}>
-        <StepAboutRule
-          addPadding={true}
-          defaultValues={stepAboutDefaultValue}
-          descriptionColumns="multi"
-          isReadOnlyView={false}
-          isLoading={false}
-          setForm={jest.fn()}
-          setStepData={jest.fn()}
-        />
-      </ThemeProvider>
-    );
-
-    const descriptionInput = wrapper
-      .find('textarea[aria-describedby="detectionEngineStepAboutRuleDescription"]')
-      .at(0);
-    descriptionInput.simulate('change', { target: { value: 'Test description text' } });
-
-    const nameInput = wrapper
-      .find('input[aria-describedby="detectionEngineStepAboutRuleName"]')
-      .at(0);
-    nameInput.simulate('change', { target: { value: 'Test name text' } });
-
-    const nextButton = wrapper.find('button[data-test-subj="about-continue"]').at(0);
-    nextButton.simulate('click');
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule/index.tsx
deleted file mode 100644
index eaf543780d7774..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule/index.tsx
+++ /dev/null
@@ -1,279 +0,0 @@
-/*
- * 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 { EuiAccordion, EuiFlexItem, EuiSpacer, EuiButtonEmpty } from '@elastic/eui';
-import React, { FC, memo, useCallback, useEffect, useState } from 'react';
-import styled from 'styled-components';
-import deepEqual from 'fast-deep-equal';
-
-import { setFieldValue } from '../../helpers';
-import { RuleStepProps, RuleStep, AboutStepRule } from '../../types';
-import { AddItem } from '../add_item_form';
-import { StepRuleDescription } from '../description_step';
-import { AddMitreThreat } from '../mitre';
-import {
-  Field,
-  Form,
-  FormDataProvider,
-  getUseField,
-  UseField,
-  useForm,
-} from '../../../../../shared_imports';
-
-import { defaultRiskScoreBySeverity, severityOptions, SeverityValue } from './data';
-import { stepAboutDefaultValue } from './default_value';
-import { isUrlInvalid } from './helpers';
-import { schema } from './schema';
-import * as I18n from './translations';
-import { StepContentWrapper } from '../step_content_wrapper';
-import { NextStep } from '../next_step';
-import { MarkdownEditorForm } from '../../../../../components/markdown_editor/form';
-
-const CommonUseField = getUseField({ component: Field });
-
-interface StepAboutRuleProps extends RuleStepProps {
-  defaultValues?: AboutStepRule | null;
-}
-
-const ThreeQuartersContainer = styled.div`
-  max-width: 740px;
-`;
-
-ThreeQuartersContainer.displayName = 'ThreeQuartersContainer';
-
-const TagContainer = styled.div`
-  margin-top: 16px;
-`;
-
-TagContainer.displayName = 'TagContainer';
-
-const AdvancedSettingsAccordion = styled(EuiAccordion)`
-  .euiAccordion__iconWrapper {
-    display: none;
-  }
-
-  .euiAccordion__childWrapper {
-    transition-duration: 1ms; /* hack to fire Step accordion to set proper content's height */
-  }
-
-  &.euiAccordion-isOpen .euiButtonEmpty__content > svg {
-    transform: rotate(90deg);
-  }
-`;
-
-const AdvancedSettingsAccordionButton = (
-  <EuiButtonEmpty flush="left" size="s" iconType="arrowRight">
-    {I18n.ADVANCED_SETTINGS}
-  </EuiButtonEmpty>
-);
-
-const StepAboutRuleComponent: FC<StepAboutRuleProps> = ({
-  addPadding = false,
-  defaultValues,
-  descriptionColumns = 'singleSplit',
-  isReadOnlyView,
-  isUpdateView = false,
-  isLoading,
-  setForm,
-  setStepData,
-}) => {
-  const [myStepData, setMyStepData] = useState<AboutStepRule>(stepAboutDefaultValue);
-
-  const { form } = useForm({
-    defaultValue: myStepData,
-    options: { stripEmptyFields: false },
-    schema,
-  });
-
-  const onSubmit = useCallback(async () => {
-    if (setStepData) {
-      setStepData(RuleStep.aboutRule, null, false);
-      const { isValid, data } = await form.submit();
-      if (isValid) {
-        setStepData(RuleStep.aboutRule, data, isValid);
-        setMyStepData({ ...data, isNew: false } as AboutStepRule);
-      }
-    }
-  }, [form]);
-
-  useEffect(() => {
-    const { isNew, ...initDefaultValue } = myStepData;
-    if (defaultValues != null && !deepEqual(initDefaultValue, defaultValues)) {
-      const myDefaultValues = {
-        ...defaultValues,
-        isNew: false,
-      };
-      setMyStepData(myDefaultValues);
-      setFieldValue(form, schema, myDefaultValues);
-    }
-  }, [defaultValues]);
-
-  useEffect(() => {
-    if (setForm != null) {
-      setForm(RuleStep.aboutRule, form);
-    }
-  }, [form]);
-
-  return isReadOnlyView && myStepData.name != null ? (
-    <StepContentWrapper data-test-subj="aboutStep" addPadding={addPadding}>
-      <StepRuleDescription columns={descriptionColumns} schema={schema} data={myStepData} />
-    </StepContentWrapper>
-  ) : (
-    <>
-      <StepContentWrapper addPadding={!isUpdateView}>
-        <Form form={form}>
-          <ThreeQuartersContainer>
-            <CommonUseField
-              path="name"
-              componentProps={{
-                idAria: 'detectionEngineStepAboutRuleName',
-                'data-test-subj': 'detectionEngineStepAboutRuleName',
-                euiFieldProps: {
-                  fullWidth: true,
-                  disabled: isLoading,
-                },
-              }}
-            />
-          </ThreeQuartersContainer>
-          <EuiSpacer size="m" />
-          <ThreeQuartersContainer>
-            <CommonUseField
-              path="description"
-              componentProps={{
-                idAria: 'detectionEngineStepAboutRuleDescription',
-                'data-test-subj': 'detectionEngineStepAboutRuleDescription',
-                euiFieldProps: {
-                  disabled: isLoading,
-                  compressed: true,
-                  fullWidth: true,
-                },
-              }}
-            />
-          </ThreeQuartersContainer>
-          <EuiSpacer size="m" />
-          <EuiFlexItem>
-            <CommonUseField
-              path="severity"
-              componentProps={{
-                idAria: 'detectionEngineStepAboutRuleSeverity',
-                'data-test-subj': 'detectionEngineStepAboutRuleSeverity',
-                euiFieldProps: {
-                  fullWidth: false,
-                  disabled: isLoading,
-                  options: severityOptions,
-                },
-              }}
-            />
-          </EuiFlexItem>
-          <EuiSpacer size="m" />
-          <EuiFlexItem>
-            <CommonUseField
-              path="riskScore"
-              componentProps={{
-                idAria: 'detectionEngineStepAboutRuleRiskScore',
-                'data-test-subj': 'detectionEngineStepAboutRuleRiskScore',
-                euiFieldProps: {
-                  max: 100,
-                  min: 0,
-                  fullWidth: false,
-                  disabled: isLoading,
-                  showTicks: true,
-                  tickInterval: 25,
-                },
-              }}
-            />
-          </EuiFlexItem>
-          <TagContainer>
-            <CommonUseField
-              path="tags"
-              componentProps={{
-                idAria: 'detectionEngineStepAboutRuleTags',
-                'data-test-subj': 'detectionEngineStepAboutRuleTags',
-                euiFieldProps: {
-                  fullWidth: true,
-                  isDisabled: isLoading,
-                  placeholder: '',
-                },
-              }}
-            />
-          </TagContainer>
-          <EuiSpacer size="m" />
-          <AdvancedSettingsAccordion
-            data-test-subj="advancedSettings"
-            id="advancedSettingsAccordion"
-            buttonContent={AdvancedSettingsAccordionButton}
-          >
-            <EuiSpacer size="m" />
-            <UseField
-              path="references"
-              component={AddItem}
-              componentProps={{
-                addText: I18n.ADD_REFERENCE,
-                idAria: 'detectionEngineStepAboutRuleReferenceUrls',
-                isDisabled: isLoading,
-                dataTestSubj: 'detectionEngineStepAboutRuleReferenceUrls',
-                validate: isUrlInvalid,
-              }}
-            />
-            <UseField
-              path="falsePositives"
-              component={AddItem}
-              componentProps={{
-                addText: I18n.ADD_FALSE_POSITIVE,
-                idAria: 'detectionEngineStepAboutRuleFalsePositives',
-                isDisabled: isLoading,
-                dataTestSubj: 'detectionEngineStepAboutRuleFalsePositives',
-              }}
-            />
-            <UseField
-              path="threat"
-              component={AddMitreThreat}
-              componentProps={{
-                idAria: 'detectionEngineStepAboutRuleMitreThreat',
-                isDisabled: isLoading,
-                dataTestSubj: 'detectionEngineStepAboutRuleMitreThreat',
-              }}
-            />
-            <EuiSpacer size="m" />
-            <ThreeQuartersContainer>
-              <UseField
-                path="note"
-                component={MarkdownEditorForm}
-                componentProps={{
-                  idAria: 'detectionEngineStepAboutRuleNote',
-                  isDisabled: isLoading,
-                  dataTestSubj: 'detectionEngineStepAboutRuleNote',
-                  placeholder: I18n.ADD_RULE_NOTE_HELP_TEXT,
-                }}
-              />
-            </ThreeQuartersContainer>
-          </AdvancedSettingsAccordion>
-          <FormDataProvider pathsToWatch="severity">
-            {({ severity }) => {
-              const newRiskScore = defaultRiskScoreBySeverity[severity as SeverityValue];
-              const severityField = form.getFields().severity;
-              const riskScoreField = form.getFields().riskScore;
-              if (
-                severityField.value !== severity &&
-                newRiskScore != null &&
-                riskScoreField.value !== newRiskScore
-              ) {
-                riskScoreField.setValue(newRiskScore);
-              }
-              return null;
-            }}
-          </FormDataProvider>
-        </Form>
-      </StepContentWrapper>
-
-      {!isUpdateView && (
-        <NextStep dataTestSubj="about-continue" onClick={onSubmit} isDisabled={isLoading} />
-      )}
-    </>
-  );
-};
-
-export const StepAboutRule = memo(StepAboutRuleComponent);
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule/schema.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule/schema.tsx
deleted file mode 100644
index 7c088c068c9b25..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule/schema.tsx
+++ /dev/null
@@ -1,190 +0,0 @@
-/*
- * 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 { i18n } from '@kbn/i18n';
-
-import { IMitreEnterpriseAttack } from '../../types';
-import {
-  FIELD_TYPES,
-  fieldValidators,
-  FormSchema,
-  ValidationFunc,
-  ERROR_CODE,
-} from '../../../../../shared_imports';
-import { isMitreAttackInvalid } from '../mitre/helpers';
-import { OptionalFieldLabel } from '../optional_field_label';
-import { isUrlInvalid } from './helpers';
-import * as I18n from './translations';
-
-const { emptyField } = fieldValidators;
-
-export const schema: FormSchema = {
-  name: {
-    type: FIELD_TYPES.TEXT,
-    label: i18n.translate('xpack.siem.detectionEngine.createRule.stepAboutRule.fieldNameLabel', {
-      defaultMessage: 'Name',
-    }),
-    validations: [
-      {
-        validator: emptyField(
-          i18n.translate(
-            'xpack.siem.detectionEngine.createRule.stepAboutRule.nameFieldRequiredError',
-            {
-              defaultMessage: 'A name is required.',
-            }
-          )
-        ),
-      },
-    ],
-  },
-  description: {
-    type: FIELD_TYPES.TEXTAREA,
-    label: i18n.translate(
-      'xpack.siem.detectionEngine.createRule.stepAboutRule.fieldDescriptionLabel',
-      {
-        defaultMessage: 'Description',
-      }
-    ),
-    validations: [
-      {
-        validator: emptyField(
-          i18n.translate(
-            'xpack.siem.detectionEngine.createRule.stepAboutRule.descriptionFieldRequiredError',
-            {
-              defaultMessage: 'A description is required.',
-            }
-          )
-        ),
-      },
-    ],
-  },
-  severity: {
-    type: FIELD_TYPES.SUPER_SELECT,
-    label: i18n.translate(
-      'xpack.siem.detectionEngine.createRule.stepAboutRule.fieldSeverityLabel',
-      {
-        defaultMessage: 'Severity',
-      }
-    ),
-    validations: [
-      {
-        validator: emptyField(
-          i18n.translate(
-            'xpack.siem.detectionEngine.createRule.stepAboutRule.severityFieldRequiredError',
-            {
-              defaultMessage: 'A severity is required.',
-            }
-          )
-        ),
-      },
-    ],
-  },
-  riskScore: {
-    type: FIELD_TYPES.RANGE,
-    label: i18n.translate(
-      'xpack.siem.detectionEngine.createRule.stepAboutRule.fieldRiskScoreLabel',
-      {
-        defaultMessage: 'Risk score',
-      }
-    ),
-  },
-  references: {
-    label: i18n.translate(
-      'xpack.siem.detectionEngine.createRule.stepAboutRule.fieldReferenceUrlsLabel',
-      {
-        defaultMessage: 'Reference URLs',
-      }
-    ),
-    labelAppend: OptionalFieldLabel,
-    validations: [
-      {
-        validator: (
-          ...args: Parameters<ValidationFunc>
-        ): ReturnType<ValidationFunc<{}, ERROR_CODE>> | undefined => {
-          const [{ value, path }] = args;
-          let hasError = false;
-          (value as string[]).forEach(url => {
-            if (isUrlInvalid(url)) {
-              hasError = true;
-            }
-          });
-          return hasError
-            ? {
-                code: 'ERR_FIELD_FORMAT',
-                path,
-                message: I18n.URL_FORMAT_INVALID,
-              }
-            : undefined;
-        },
-      },
-    ],
-  },
-  falsePositives: {
-    label: i18n.translate(
-      'xpack.siem.detectionEngine.createRule.stepAboutRule.fieldFalsePositiveLabel',
-      {
-        defaultMessage: 'False positive examples',
-      }
-    ),
-    labelAppend: OptionalFieldLabel,
-  },
-  threat: {
-    label: i18n.translate(
-      'xpack.siem.detectionEngine.createRule.stepAboutRule.fieldMitreThreatLabel',
-      {
-        defaultMessage: 'MITRE ATT&CK\\u2122',
-      }
-    ),
-    labelAppend: OptionalFieldLabel,
-    validations: [
-      {
-        validator: (
-          ...args: Parameters<ValidationFunc>
-        ): ReturnType<ValidationFunc<{}, ERROR_CODE>> | undefined => {
-          const [{ value, path }] = args;
-          let hasError = false;
-          (value as IMitreEnterpriseAttack[]).forEach(v => {
-            if (isMitreAttackInvalid(v.tactic.name, v.technique)) {
-              hasError = true;
-            }
-          });
-          return hasError
-            ? {
-                code: 'ERR_FIELD_MISSING',
-                path,
-                message: I18n.CUSTOM_MITRE_ATTACK_TECHNIQUES_REQUIRED,
-              }
-            : undefined;
-        },
-      },
-    ],
-  },
-  tags: {
-    type: FIELD_TYPES.COMBO_BOX,
-    label: i18n.translate('xpack.siem.detectionEngine.createRule.stepAboutRule.fieldTagsLabel', {
-      defaultMessage: 'Tags',
-    }),
-    helpText: i18n.translate(
-      'xpack.siem.detectionEngine.createRule.stepAboutRule.fieldTagsHelpText',
-      {
-        defaultMessage:
-          'Type one or more custom identifying tags for this rule. Press enter after each tag to begin a new one.',
-      }
-    ),
-    labelAppend: OptionalFieldLabel,
-  },
-  note: {
-    type: FIELD_TYPES.TEXTAREA,
-    label: i18n.translate('xpack.siem.detectionEngine.createRule.stepAboutRule.guideLabel', {
-      defaultMessage: 'Investigation guide',
-    }),
-    helpText: i18n.translate('xpack.siem.detectionEngine.createRule.stepAboutRule.guideHelpText', {
-      defaultMessage:
-        'Provide helpful information for analysts that are performing a signal investigation. This guide will appear on both the rule details page and in timelines created from signals generated by this rule.',
-    }),
-    labelAppend: OptionalFieldLabel,
-  },
-};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule_details/index.test.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule_details/index.test.tsx
deleted file mode 100644
index 76a3c590a62a6d..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule_details/index.test.tsx
+++ /dev/null
@@ -1,170 +0,0 @@
-/*
- * 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 { mount, shallow } from 'enzyme';
-import { EuiProgress, EuiButtonGroup } from '@elastic/eui';
-import { ThemeProvider } from 'styled-components';
-import euiDarkVars from '@elastic/eui/dist/eui_theme_light.json';
-
-import { StepAboutRuleToggleDetails } from './';
-import { mockAboutStepRule } from '../../all/__mocks__/mock';
-import { HeaderSection } from '../../../../../components/header_section';
-import { StepAboutRule } from '../step_about_rule/';
-import { AboutStepRule } from '../../types';
-
-jest.mock('../../../../../lib/kibana');
-
-const theme = () => ({ eui: euiDarkVars, darkMode: true });
-
-describe('StepAboutRuleToggleDetails', () => {
-  let mockRule: AboutStepRule;
-
-  beforeEach(() => {
-    mockRule = mockAboutStepRule();
-  });
-
-  test('it renders loading component when "loading" is true', () => {
-    const wrapper = shallow(
-      <StepAboutRuleToggleDetails
-        loading={true}
-        stepDataDetails={{
-          note: mockRule.note,
-          description: mockRule.description,
-        }}
-        stepData={mockRule}
-      />
-    );
-
-    expect(wrapper.find(EuiProgress).exists()).toBeTruthy();
-    expect(wrapper.find(HeaderSection).exists()).toBeTruthy();
-  });
-
-  test('it does not render details if stepDataDetails is null', () => {
-    const wrapper = shallow(
-      <StepAboutRuleToggleDetails loading={true} stepDataDetails={null} stepData={mockRule} />
-    );
-
-    expect(wrapper.find(StepAboutRule).exists()).toBeFalsy();
-  });
-
-  test('it does not render details if stepData is null', () => {
-    const wrapper = shallow(
-      <StepAboutRuleToggleDetails
-        loading={true}
-        stepDataDetails={{
-          note: '',
-          description: '',
-        }}
-        stepData={null}
-      />
-    );
-
-    expect(wrapper.find(StepAboutRule).exists()).toBeFalsy();
-  });
-
-  describe('note value is empty string', () => {
-    test('it does not render toggle buttons', () => {
-      const mockAboutStepWithoutNote = {
-        ...mockRule,
-        note: '',
-      };
-      const wrapper = shallow(
-        <StepAboutRuleToggleDetails
-          loading={false}
-          stepDataDetails={{
-            note: '',
-            description: mockRule.description,
-          }}
-          stepData={mockAboutStepWithoutNote}
-        />
-      );
-
-      expect(wrapper.find('[data-test-subj="stepAboutDetailsToggle"]').exists()).toBeFalsy();
-      expect(wrapper.find('[data-test-subj="stepAboutDetailsNoteContent"]').exists()).toBeFalsy();
-      expect(wrapper.find('[data-test-subj="stepAboutDetailsContent"]').exists()).toBeTruthy();
-    });
-  });
-
-  describe('note value does exist', () => {
-    test('it renders toggle buttons, defaulted to "details"', () => {
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <StepAboutRuleToggleDetails
-            loading={false}
-            stepDataDetails={{
-              note: mockRule.note,
-              description: mockRule.description,
-            }}
-            stepData={mockRule}
-          />
-        </ThemeProvider>
-      );
-
-      expect(wrapper.find(EuiButtonGroup).exists()).toBeTruthy();
-      expect(
-        wrapper
-          .find('EuiButtonToggle[id="details"]')
-          .at(0)
-          .prop('isSelected')
-      ).toBeTruthy();
-      expect(
-        wrapper
-          .find('EuiButtonToggle[id="notes"]')
-          .at(0)
-          .prop('isSelected')
-      ).toBeFalsy();
-    });
-
-    test('it allows users to toggle between "details" and "note"', () => {
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <StepAboutRuleToggleDetails
-            loading={false}
-            stepDataDetails={{
-              note: mockRule.note,
-              description: mockRule.description,
-            }}
-            stepData={mockRule}
-          />
-        </ThemeProvider>
-      );
-
-      expect(wrapper.find('EuiButtonGroup[idSelected="details"]').exists()).toBeTruthy();
-      expect(wrapper.find('EuiButtonGroup[idSelected="notes"]').exists()).toBeFalsy();
-
-      wrapper
-        .find('input[title="Investigation guide"]')
-        .at(0)
-        .simulate('change', { target: { value: 'notes' } });
-
-      expect(wrapper.find('EuiButtonGroup[idSelected="details"]').exists()).toBeFalsy();
-      expect(wrapper.find('EuiButtonGroup[idSelected="notes"]').exists()).toBeTruthy();
-    });
-
-    test('it displays notes markdown when user toggles to "notes"', () => {
-      const wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <StepAboutRuleToggleDetails
-            loading={false}
-            stepDataDetails={{
-              note: mockRule.note,
-              description: mockRule.description,
-            }}
-            stepData={mockRule}
-          />
-        </ThemeProvider>
-      );
-
-      wrapper
-        .find('input[title="Investigation guide"]')
-        .at(0)
-        .simulate('change', { target: { value: 'notes' } });
-
-      expect(wrapper.find('EuiButtonGroup[idSelected="notes"]').exists()).toBeTruthy();
-      expect(wrapper.find('Markdown h1').text()).toEqual('this is some markdown documentation');
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule_details/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule_details/index.tsx
deleted file mode 100644
index 5d9803214fa0a6..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_about_rule_details/index.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-/*
- * 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 {
-  EuiPanel,
-  EuiProgress,
-  EuiButtonGroup,
-  EuiButtonGroupOption,
-  EuiSpacer,
-  EuiFlexItem,
-  EuiText,
-  EuiFlexGroup,
-  EuiResizeObserver,
-} from '@elastic/eui';
-import React, { memo, useCallback, useState } from 'react';
-import styled from 'styled-components';
-import { isEmpty } from 'lodash/fp';
-
-import { HeaderSection } from '../../../../../components/header_section';
-import { Markdown } from '../../../../../components/markdown';
-import { AboutStepRule, AboutStepRuleDetails } from '../../types';
-import * as i18n from './translations';
-import { StepAboutRule } from '../step_about_rule/';
-
-const MyPanel = styled(EuiPanel)`
-  position: relative;
-`;
-
-const FlexGroupFullHeight = styled(EuiFlexGroup)`
-  height: 100%;
-`;
-
-const VerticalOverflowContainer = styled.div((props: { maxHeight: number }) => ({
-  'max-height': `${props.maxHeight}px`,
-  'overflow-y': 'hidden',
-}));
-
-const VerticalOverflowContent = styled.div((props: { maxHeight: number }) => ({
-  'max-height': `${props.maxHeight}px`,
-}));
-
-const AboutContent = styled.div`
-  height: 100%;
-`;
-
-const toggleOptions: EuiButtonGroupOption[] = [
-  {
-    id: 'details',
-    label: i18n.ABOUT_PANEL_DETAILS_TAB,
-  },
-  {
-    id: 'notes',
-    label: i18n.ABOUT_PANEL_NOTES_TAB,
-  },
-];
-
-interface StepPanelProps {
-  stepData: AboutStepRule | null;
-  stepDataDetails: AboutStepRuleDetails | null;
-  loading: boolean;
-}
-
-const StepAboutRuleToggleDetailsComponent: React.FC<StepPanelProps> = ({
-  stepData,
-  stepDataDetails,
-  loading,
-}) => {
-  const [selectedToggleOption, setToggleOption] = useState('details');
-  const [aboutPanelHeight, setAboutPanelHeight] = useState(0);
-
-  const onResize = useCallback(
-    (e: { height: number; width: number }) => {
-      setAboutPanelHeight(e.height);
-    },
-    [setAboutPanelHeight]
-  );
-
-  return (
-    <MyPanel>
-      {loading && (
-        <>
-          <EuiProgress size="xs" color="accent" position="absolute" />
-          <HeaderSection title={i18n.ABOUT_TEXT} />
-        </>
-      )}
-      {stepData != null && stepDataDetails != null && (
-        <FlexGroupFullHeight gutterSize="xs" direction="column">
-          <EuiFlexItem grow={1} key="header">
-            <HeaderSection title={i18n.ABOUT_TEXT}>
-              {!isEmpty(stepDataDetails.note) && stepDataDetails.note.trim() !== '' && (
-                <EuiButtonGroup
-                  options={toggleOptions}
-                  idSelected={selectedToggleOption}
-                  onChange={val => {
-                    setToggleOption(val);
-                  }}
-                  data-test-subj="stepAboutDetailsToggle"
-                />
-              )}
-            </HeaderSection>
-          </EuiFlexItem>
-          <EuiFlexItem grow={5} key="details">
-            {selectedToggleOption === 'details' ? (
-              <EuiResizeObserver data-test-subj="stepAboutDetailsContent" onResize={onResize}>
-                {resizeRef => (
-                  <AboutContent ref={resizeRef}>
-                    <VerticalOverflowContainer maxHeight={120}>
-                      <VerticalOverflowContent maxHeight={120} className="eui-yScrollWithShadows">
-                        <EuiText
-                          size="s"
-                          data-test-subj="stepAboutRuleDetailsToggleDescriptionText"
-                        >
-                          {stepDataDetails.description}
-                        </EuiText>
-                      </VerticalOverflowContent>
-                    </VerticalOverflowContainer>
-                    <EuiSpacer size="m" />
-                    <StepAboutRule
-                      descriptionColumns="singleSplit"
-                      isReadOnlyView={true}
-                      isLoading={false}
-                      defaultValues={stepData}
-                    />
-                  </AboutContent>
-                )}
-              </EuiResizeObserver>
-            ) : (
-              <VerticalOverflowContainer
-                data-test-subj="stepAboutDetailsNoteContent"
-                maxHeight={aboutPanelHeight}
-              >
-                <VerticalOverflowContent
-                  maxHeight={aboutPanelHeight}
-                  className="eui-yScrollWithShadows"
-                >
-                  <Markdown raw={stepDataDetails.note} />
-                </VerticalOverflowContent>
-              </VerticalOverflowContainer>
-            )}
-          </EuiFlexItem>
-        </FlexGroupFullHeight>
-      )}
-    </MyPanel>
-  );
-};
-
-export const StepAboutRuleToggleDetails = memo(StepAboutRuleToggleDetailsComponent);
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_define_rule/index.test.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_define_rule/index.test.tsx
deleted file mode 100644
index ebef6348d477ea..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_define_rule/index.test.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-/*
- * 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 { StepDefineRule } from './index';
-
-jest.mock('../../../../../lib/kibana');
-
-describe('StepDefineRule', () => {
-  it('renders correctly', () => {
-    const wrapper = shallow(<StepDefineRule isReadOnlyView={false} isLoading={false} />);
-
-    expect(wrapper.find('Form[data-test-subj="stepDefineRule"]')).toHaveLength(1);
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_define_rule/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_define_rule/index.tsx
deleted file mode 100644
index 3517c6fb21e695..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_define_rule/index.tsx
+++ /dev/null
@@ -1,276 +0,0 @@
-/*
- * 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 { EuiButtonEmpty, EuiFormRow } from '@elastic/eui';
-import React, { FC, memo, useCallback, useState, useEffect } from 'react';
-import styled from 'styled-components';
-import deepEqual from 'fast-deep-equal';
-
-import { DEFAULT_INDEX_KEY } from '../../../../../../common/constants';
-import { isMlRule } from '../../../../../../common/machine_learning/helpers';
-import { IIndexPattern } from '../../../../../../../../../src/plugins/data/public';
-import { useFetchIndexPatterns } from '../../../../../containers/detection_engine/rules';
-import { DEFAULT_TIMELINE_TITLE } from '../../../../../components/timeline/translations';
-import { useMlCapabilities } from '../../../../../components/ml_popover/hooks/use_ml_capabilities';
-import { useUiSetting$ } from '../../../../../lib/kibana';
-import { setFieldValue } from '../../helpers';
-import { DefineStepRule, RuleStep, RuleStepProps } from '../../types';
-import { StepRuleDescription } from '../description_step';
-import { QueryBarDefineRule } from '../query_bar';
-import { SelectRuleType } from '../select_rule_type';
-import { AnomalyThresholdSlider } from '../anomaly_threshold_slider';
-import { MlJobSelect } from '../ml_job_select';
-import { PickTimeline } from '../pick_timeline';
-import { StepContentWrapper } from '../step_content_wrapper';
-import { NextStep } from '../next_step';
-import {
-  Field,
-  Form,
-  FormDataProvider,
-  getUseField,
-  UseField,
-  useForm,
-  FormSchema,
-} from '../../../../../shared_imports';
-import { schema } from './schema';
-import * as i18n from './translations';
-import { filterRuleFieldsForType, RuleFields } from '../../create/helpers';
-import { hasMlAdminPermissions } from '../../../../../../common/machine_learning/has_ml_admin_permissions';
-
-const CommonUseField = getUseField({ component: Field });
-
-interface StepDefineRuleProps extends RuleStepProps {
-  defaultValues?: DefineStepRule | null;
-}
-
-const stepDefineDefaultValue: DefineStepRule = {
-  anomalyThreshold: 50,
-  index: [],
-  isNew: true,
-  machineLearningJobId: '',
-  ruleType: 'query',
-  queryBar: {
-    query: { query: '', language: 'kuery' },
-    filters: [],
-    saved_id: undefined,
-  },
-  timeline: {
-    id: null,
-    title: DEFAULT_TIMELINE_TITLE,
-  },
-};
-
-const MyLabelButton = styled(EuiButtonEmpty)`
-  height: 18px;
-  font-size: 12px;
-
-  .euiIcon {
-    width: 14px;
-    height: 14px;
-  }
-`;
-
-MyLabelButton.defaultProps = {
-  flush: 'right',
-};
-
-const StepDefineRuleComponent: FC<StepDefineRuleProps> = ({
-  addPadding = false,
-  defaultValues,
-  descriptionColumns = 'singleSplit',
-  isReadOnlyView,
-  isLoading,
-  isUpdateView = false,
-  setForm,
-  setStepData,
-}) => {
-  const mlCapabilities = useMlCapabilities();
-  const [openTimelineSearch, setOpenTimelineSearch] = useState(false);
-  const [indexModified, setIndexModified] = useState(false);
-  const [localIsMlRule, setIsMlRule] = useState(false);
-  const [indicesConfig] = useUiSetting$<string[]>(DEFAULT_INDEX_KEY);
-  const [myStepData, setMyStepData] = useState<DefineStepRule>({
-    ...stepDefineDefaultValue,
-    index: indicesConfig ?? [],
-  });
-  const [
-    { browserFields, indexPatterns: indexPatternQueryBar, isLoading: indexPatternLoadingQueryBar },
-  ] = useFetchIndexPatterns(myStepData.index);
-
-  const { form } = useForm({
-    defaultValue: myStepData,
-    options: { stripEmptyFields: false },
-    schema,
-  });
-  const clearErrors = useCallback(() => form.reset({ resetValues: false }), [form]);
-
-  const onSubmit = useCallback(async () => {
-    if (setStepData) {
-      setStepData(RuleStep.defineRule, null, false);
-      const { isValid, data } = await form.submit();
-      if (isValid && setStepData) {
-        setStepData(RuleStep.defineRule, data, isValid);
-        setMyStepData({ ...data, isNew: false } as DefineStepRule);
-      }
-    }
-  }, [form]);
-
-  useEffect(() => {
-    const { isNew, ...values } = myStepData;
-    if (defaultValues != null && !deepEqual(values, defaultValues)) {
-      const newValues = { ...values, ...defaultValues, isNew: false };
-      setMyStepData(newValues);
-      setFieldValue(form, schema, newValues);
-    }
-  }, [defaultValues, setMyStepData, setFieldValue]);
-
-  useEffect(() => {
-    if (setForm != null) {
-      setForm(RuleStep.defineRule, form);
-    }
-  }, [form]);
-
-  const handleResetIndices = useCallback(() => {
-    const indexField = form.getFields().index;
-    indexField.setValue(indicesConfig);
-  }, [form, indicesConfig]);
-
-  const handleOpenTimelineSearch = useCallback(() => {
-    setOpenTimelineSearch(true);
-  }, []);
-
-  const handleCloseTimelineSearch = useCallback(() => {
-    setOpenTimelineSearch(false);
-  }, []);
-
-  return isReadOnlyView ? (
-    <StepContentWrapper data-test-subj="definitionRule" addPadding={addPadding}>
-      <StepRuleDescription
-        columns={descriptionColumns}
-        indexPatterns={indexPatternQueryBar as IIndexPattern}
-        schema={filterRuleFieldsForType(schema as FormSchema & RuleFields, myStepData.ruleType)}
-        data={filterRuleFieldsForType(myStepData, myStepData.ruleType)}
-      />
-    </StepContentWrapper>
-  ) : (
-    <>
-      <StepContentWrapper addPadding={!isUpdateView}>
-        <Form form={form} data-test-subj="stepDefineRule">
-          <UseField
-            path="ruleType"
-            component={SelectRuleType}
-            componentProps={{
-              describedByIds: ['detectionEngineStepDefineRuleType'],
-              isReadOnly: isUpdateView,
-              hasValidLicense: mlCapabilities.isPlatinumOrTrialLicense,
-              isMlAdmin: hasMlAdminPermissions(mlCapabilities),
-            }}
-          />
-          <EuiFormRow fullWidth style={{ display: localIsMlRule ? 'none' : 'flex' }}>
-            <>
-              <CommonUseField
-                path="index"
-                config={{
-                  ...schema.index,
-                  labelAppend: indexModified ? (
-                    <MyLabelButton onClick={handleResetIndices} iconType="refresh">
-                      {i18n.RESET_DEFAULT_INDEX}
-                    </MyLabelButton>
-                  ) : null,
-                }}
-                componentProps={{
-                  idAria: 'detectionEngineStepDefineRuleIndices',
-                  'data-test-subj': 'detectionEngineStepDefineRuleIndices',
-                  euiFieldProps: {
-                    fullWidth: true,
-                    isDisabled: isLoading,
-                    placeholder: '',
-                  },
-                }}
-              />
-              <UseField
-                path="queryBar"
-                config={{
-                  ...schema.queryBar,
-                  labelAppend: (
-                    <MyLabelButton onClick={handleOpenTimelineSearch}>
-                      {i18n.IMPORT_TIMELINE_QUERY}
-                    </MyLabelButton>
-                  ),
-                }}
-                component={QueryBarDefineRule}
-                componentProps={{
-                  browserFields,
-                  idAria: 'detectionEngineStepDefineRuleQueryBar',
-                  indexPattern: indexPatternQueryBar,
-                  isDisabled: isLoading,
-                  isLoading: indexPatternLoadingQueryBar,
-                  dataTestSubj: 'detectionEngineStepDefineRuleQueryBar',
-                  openTimelineSearch,
-                  onCloseTimelineSearch: handleCloseTimelineSearch,
-                }}
-              />
-            </>
-          </EuiFormRow>
-          <EuiFormRow fullWidth style={{ display: localIsMlRule ? 'flex' : 'none' }}>
-            <>
-              <UseField
-                path="machineLearningJobId"
-                component={MlJobSelect}
-                componentProps={{
-                  describedByIds: ['detectionEngineStepDefineRulemachineLearningJobId'],
-                }}
-              />
-              <UseField
-                path="anomalyThreshold"
-                component={AnomalyThresholdSlider}
-                componentProps={{
-                  describedByIds: ['detectionEngineStepDefineRuleAnomalyThreshold'],
-                }}
-              />
-            </>
-          </EuiFormRow>
-          <UseField
-            path="timeline"
-            component={PickTimeline}
-            componentProps={{
-              idAria: 'detectionEngineStepDefineRuleTimeline',
-              isDisabled: isLoading,
-              dataTestSubj: 'detectionEngineStepDefineRuleTimeline',
-            }}
-          />
-          <FormDataProvider pathsToWatch={['index', 'ruleType']}>
-            {({ index, ruleType }) => {
-              if (index != null) {
-                if (deepEqual(index, indicesConfig) && indexModified) {
-                  setIndexModified(false);
-                } else if (!deepEqual(index, indicesConfig) && !indexModified) {
-                  setIndexModified(true);
-                }
-              }
-
-              if (isMlRule(ruleType) && !localIsMlRule) {
-                setIsMlRule(true);
-                clearErrors();
-              } else if (!isMlRule(ruleType) && localIsMlRule) {
-                setIsMlRule(false);
-                clearErrors();
-              }
-
-              return null;
-            }}
-          </FormDataProvider>
-        </Form>
-      </StepContentWrapper>
-
-      {!isUpdateView && (
-        <NextStep dataTestSubj="define-continue" onClick={onSubmit} isDisabled={isLoading} />
-      )}
-    </>
-  );
-};
-
-export const StepDefineRule = memo(StepDefineRuleComponent);
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_define_rule/schema.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_define_rule/schema.tsx
deleted file mode 100644
index 08832c5dfe4f53..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_define_rule/schema.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-/*
- * 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 { i18n } from '@kbn/i18n';
-import { EuiText } from '@elastic/eui';
-import { isEmpty } from 'lodash/fp';
-import React from 'react';
-
-import { isMlRule } from '../../../../../../common/machine_learning/helpers';
-import { esKuery } from '../../../../../../../../../src/plugins/data/public';
-import { FieldValueQueryBar } from '../query_bar';
-import {
-  ERROR_CODE,
-  FIELD_TYPES,
-  fieldValidators,
-  FormSchema,
-  ValidationFunc,
-} from '../../../../../shared_imports';
-import { CUSTOM_QUERY_REQUIRED, INVALID_CUSTOM_QUERY, INDEX_HELPER_TEXT } from './translations';
-
-export const schema: FormSchema = {
-  index: {
-    type: FIELD_TYPES.COMBO_BOX,
-    label: i18n.translate(
-      'xpack.siem.detectionEngine.createRule.stepAboutRule.fiedIndexPatternsLabel',
-      {
-        defaultMessage: 'Index patterns',
-      }
-    ),
-    helpText: <EuiText size="xs">{INDEX_HELPER_TEXT}</EuiText>,
-    validations: [
-      {
-        validator: (
-          ...args: Parameters<ValidationFunc>
-        ): ReturnType<ValidationFunc<{}, ERROR_CODE>> | undefined => {
-          const [{ formData }] = args;
-          const needsValidation = !isMlRule(formData.ruleType);
-
-          if (!needsValidation) {
-            return;
-          }
-
-          return fieldValidators.emptyField(
-            i18n.translate(
-              'xpack.siem.detectionEngine.createRule.stepDefineRule.outputIndiceNameFieldRequiredError',
-              {
-                defaultMessage: 'A minimum of one index pattern is required.',
-              }
-            )
-          )(...args);
-        },
-      },
-    ],
-  },
-  queryBar: {
-    label: i18n.translate(
-      'xpack.siem.detectionEngine.createRule.stepDefineRule.fieldQuerBarLabel',
-      {
-        defaultMessage: 'Custom query',
-      }
-    ),
-    validations: [
-      {
-        validator: (
-          ...args: Parameters<ValidationFunc>
-        ): ReturnType<ValidationFunc<{}, ERROR_CODE>> | undefined => {
-          const [{ value, path, formData }] = args;
-          const { query, filters } = value as FieldValueQueryBar;
-          const needsValidation = !isMlRule(formData.ruleType);
-          if (!needsValidation) {
-            return;
-          }
-
-          return isEmpty(query.query as string) && isEmpty(filters)
-            ? {
-                code: 'ERR_FIELD_MISSING',
-                path,
-                message: CUSTOM_QUERY_REQUIRED,
-              }
-            : undefined;
-        },
-      },
-      {
-        validator: (
-          ...args: Parameters<ValidationFunc>
-        ): ReturnType<ValidationFunc<{}, ERROR_CODE>> | undefined => {
-          const [{ value, path, formData }] = args;
-          const { query } = value as FieldValueQueryBar;
-          const needsValidation = !isMlRule(formData.ruleType);
-          if (!needsValidation) {
-            return;
-          }
-
-          if (!isEmpty(query.query as string) && query.language === 'kuery') {
-            try {
-              esKuery.fromKueryExpression(query.query);
-            } catch (err) {
-              return {
-                code: 'ERR_FIELD_FORMAT',
-                path,
-                message: INVALID_CUSTOM_QUERY,
-              };
-            }
-          }
-        },
-      },
-    ],
-  },
-  ruleType: {
-    label: i18n.translate(
-      'xpack.siem.detectionEngine.createRule.stepDefineRule.fieldRuleTypeLabel',
-      {
-        defaultMessage: 'Rule type',
-      }
-    ),
-    validations: [],
-  },
-  anomalyThreshold: {
-    label: i18n.translate(
-      'xpack.siem.detectionEngine.createRule.stepDefineRule.fieldAnomalyThresholdLabel',
-      {
-        defaultMessage: 'Anomaly score threshold',
-      }
-    ),
-    validations: [],
-  },
-  machineLearningJobId: {
-    label: i18n.translate(
-      'xpack.siem.detectionEngine.createRule.stepDefineRule.fieldMachineLearningJobIdLabel',
-      {
-        defaultMessage: 'Machine Learning job',
-      }
-    ),
-    validations: [
-      {
-        validator: (
-          ...args: Parameters<ValidationFunc>
-        ): ReturnType<ValidationFunc<{}, ERROR_CODE>> | undefined => {
-          const [{ formData }] = args;
-          const needsValidation = isMlRule(formData.ruleType);
-
-          if (!needsValidation) {
-            return;
-          }
-
-          return fieldValidators.emptyField(
-            i18n.translate(
-              'xpack.siem.detectionEngine.createRule.stepDefineRule.machineLearningJobIdRequired',
-              {
-                defaultMessage: 'A Machine Learning job is required.',
-              }
-            )
-          )(...args);
-        },
-      },
-    ],
-  },
-  timeline: {
-    label: i18n.translate(
-      'xpack.siem.detectionEngine.createRule.stepAboutRule.fieldTimelineTemplateLabel',
-      {
-        defaultMessage: 'Timeline template',
-      }
-    ),
-    helpText: i18n.translate(
-      'xpack.siem.detectionEngine.createRule.stepAboutRule.fieldTimelineTemplateHelpText',
-      {
-        defaultMessage:
-          'Select an existing timeline to use as a template when investigating generated signals.',
-      }
-    ),
-  },
-};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_panel/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_panel/index.tsx
deleted file mode 100644
index 1923ed09252dda..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_panel/index.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * 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 { EuiPanel, EuiProgress } from '@elastic/eui';
-import React, { memo } from 'react';
-import styled from 'styled-components';
-
-import { HeaderSection } from '../../../../../components/header_section';
-
-interface StepPanelProps {
-  children: React.ReactNode;
-  loading: boolean;
-  title: string;
-}
-
-const MyPanel = styled(EuiPanel)`
-  position: relative;
-`;
-
-MyPanel.displayName = 'MyPanel';
-
-const StepPanelComponent: React.FC<StepPanelProps> = ({ children, loading, title }) => (
-  <MyPanel>
-    {loading && <EuiProgress size="xs" color="accent" position="absolute" />}
-    <HeaderSection title={title} />
-    {children}
-  </MyPanel>
-);
-
-export const StepPanel = memo(StepPanelComponent);
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_rule_actions/index.test.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_rule_actions/index.test.tsx
deleted file mode 100644
index 69d118ba9f28eb..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_rule_actions/index.test.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-/*
- * 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 { StepRuleActions } from './index';
-
-jest.mock('../../../../../lib/kibana');
-
-describe('StepRuleActions', () => {
-  it('renders correctly', () => {
-    const wrapper = shallow(
-      <StepRuleActions actionMessageParams={[]} isReadOnlyView={false} isLoading={false} />
-    );
-
-    expect(wrapper.find('[data-test-subj="stepRuleActions"]')).toHaveLength(1);
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_rule_actions/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_rule_actions/index.tsx
deleted file mode 100644
index aec315938b6aef..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_rule_actions/index.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-/*
- * 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 { EuiHorizontalRule, EuiFlexGroup, EuiFlexItem, EuiButton, EuiSpacer } from '@elastic/eui';
-import React, { FC, memo, useCallback, useEffect, useMemo, useState } from 'react';
-import deepEqual from 'fast-deep-equal';
-
-import { setFieldValue } from '../../helpers';
-import { RuleStep, RuleStepProps, ActionsStepRule } from '../../types';
-import { StepRuleDescription } from '../description_step';
-import { Form, UseField, useForm } from '../../../../../shared_imports';
-import { StepContentWrapper } from '../step_content_wrapper';
-import { ThrottleSelectField, THROTTLE_OPTIONS } from '../throttle_select_field';
-import { RuleActionsField } from '../rule_actions_field';
-import { useKibana } from '../../../../../lib/kibana';
-import { schema } from './schema';
-import * as I18n from './translations';
-
-interface StepRuleActionsProps extends RuleStepProps {
-  defaultValues?: ActionsStepRule | null;
-  actionMessageParams: string[];
-}
-
-const stepActionsDefaultValue = {
-  enabled: true,
-  isNew: true,
-  actions: [],
-  kibanaSiemAppUrl: '',
-  throttle: THROTTLE_OPTIONS[0].value,
-};
-
-const GhostFormField = () => <></>;
-
-const StepRuleActionsComponent: FC<StepRuleActionsProps> = ({
-  addPadding = false,
-  defaultValues,
-  isReadOnlyView,
-  isLoading,
-  isUpdateView = false,
-  setStepData,
-  setForm,
-  actionMessageParams,
-}) => {
-  const [myStepData, setMyStepData] = useState<ActionsStepRule>(stepActionsDefaultValue);
-  const {
-    services: { application },
-  } = useKibana();
-
-  const { form } = useForm({
-    defaultValue: myStepData,
-    options: { stripEmptyFields: false },
-    schema,
-  });
-
-  const kibanaAbsoluteUrl = useMemo(() => application.getUrlForApp('siem', { absolute: true }), [
-    application,
-  ]);
-
-  const onSubmit = useCallback(
-    async (enabled: boolean) => {
-      if (setStepData) {
-        setStepData(RuleStep.ruleActions, null, false);
-        const { isValid: newIsValid, data } = await form.submit();
-        if (newIsValid) {
-          setStepData(RuleStep.ruleActions, { ...data, enabled }, newIsValid);
-          setMyStepData({ ...data, isNew: false } as ActionsStepRule);
-        }
-      }
-    },
-    [form]
-  );
-
-  useEffect(() => {
-    const { isNew, ...initDefaultValue } = myStepData;
-    if (defaultValues != null && !deepEqual(initDefaultValue, defaultValues)) {
-      const myDefaultValues = {
-        ...defaultValues,
-        isNew: false,
-      };
-      setMyStepData(myDefaultValues);
-      setFieldValue(form, schema, myDefaultValues);
-    }
-  }, [defaultValues]);
-
-  useEffect(() => {
-    if (setForm != null) {
-      setForm(RuleStep.ruleActions, form);
-    }
-  }, [form]);
-
-  const updateThrottle = useCallback(throttle => setMyStepData({ ...myStepData, throttle }), [
-    myStepData,
-    setMyStepData,
-  ]);
-
-  const throttleFieldComponentProps = useMemo(
-    () => ({
-      idAria: 'detectionEngineStepRuleActionsThrottle',
-      isDisabled: isLoading,
-      dataTestSubj: 'detectionEngineStepRuleActionsThrottle',
-      hasNoInitialSelection: false,
-      handleChange: updateThrottle,
-      euiFieldProps: {
-        options: THROTTLE_OPTIONS,
-      },
-    }),
-    [isLoading, updateThrottle]
-  );
-
-  return isReadOnlyView && myStepData != null ? (
-    <StepContentWrapper addPadding={addPadding}>
-      <StepRuleDescription schema={schema} data={myStepData} />
-    </StepContentWrapper>
-  ) : (
-    <>
-      <StepContentWrapper addPadding={!isUpdateView}>
-        <Form form={form} data-test-subj="stepRuleActions">
-          <UseField
-            path="throttle"
-            component={ThrottleSelectField}
-            componentProps={throttleFieldComponentProps}
-          />
-          {myStepData.throttle !== stepActionsDefaultValue.throttle && (
-            <>
-              <EuiSpacer />
-              <UseField
-                path="actions"
-                defaultValue={myStepData.actions}
-                component={RuleActionsField}
-                componentProps={{
-                  messageVariables: actionMessageParams,
-                }}
-              />
-              <UseField
-                path="kibanaSiemAppUrl"
-                defaultValue={kibanaAbsoluteUrl}
-                component={GhostFormField}
-              />
-            </>
-          )}
-          <UseField path="enabled" defaultValue={myStepData.enabled} component={GhostFormField} />
-        </Form>
-      </StepContentWrapper>
-
-      {!isUpdateView && (
-        <>
-          <EuiHorizontalRule margin="m" />
-          <EuiFlexGroup
-            alignItems="center"
-            justifyContent="flexEnd"
-            gutterSize="xs"
-            responsive={false}
-          >
-            <EuiFlexItem grow={false}>
-              <EuiButton
-                fill={false}
-                isDisabled={isLoading}
-                isLoading={isLoading}
-                onClick={onSubmit.bind(null, false)}
-              >
-                {I18n.COMPLETE_WITHOUT_ACTIVATING}
-              </EuiButton>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiButton
-                fill
-                isDisabled={isLoading}
-                isLoading={isLoading}
-                onClick={onSubmit.bind(null, true)}
-                data-test-subj="create-activate"
-              >
-                {I18n.COMPLETE_WITH_ACTIVATING}
-              </EuiButton>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </>
-      )}
-    </>
-  );
-};
-
-export const StepRuleActions = memo(StepRuleActionsComponent);
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_rule_actions/schema.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_rule_actions/schema.tsx
deleted file mode 100644
index 1b27d0e0fcc0ed..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_rule_actions/schema.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * 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.
- */
-
-/* istanbul ignore file */
-
-import { i18n } from '@kbn/i18n';
-
-import { FormSchema } from '../../../../../shared_imports';
-
-export const schema: FormSchema = {
-  actions: {},
-  enabled: {},
-  kibanaSiemAppUrl: {},
-  throttle: {
-    label: i18n.translate(
-      'xpack.siem.detectionEngine.createRule.stepRuleActions.fieldThrottleLabel',
-      {
-        defaultMessage: 'Actions frequency',
-      }
-    ),
-    helpText: i18n.translate(
-      'xpack.siem.detectionEngine.createRule.stepRuleActions.fieldThrottleHelpText',
-      {
-        defaultMessage:
-          'Select when automated actions should be performed if a rule evaluates as true.',
-      }
-    ),
-  },
-};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_schedule_rule/index.test.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_schedule_rule/index.test.tsx
deleted file mode 100644
index 98de933590d606..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_schedule_rule/index.test.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-/*
- * 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, mount } from 'enzyme';
-
-import { TestProviders } from '../../../../../mock';
-import { StepScheduleRule } from './index';
-
-describe('StepScheduleRule', () => {
-  it('renders correctly', () => {
-    const wrapper = mount(<StepScheduleRule isReadOnlyView={false} isLoading={false} />, {
-      wrappingComponent: TestProviders,
-    });
-
-    expect(wrapper.find('Form[data-test-subj="stepScheduleRule"]')).toHaveLength(1);
-  });
-
-  it('renders correctly if isReadOnlyView', () => {
-    const wrapper = shallow(<StepScheduleRule isReadOnlyView={true} isLoading={false} />);
-
-    expect(wrapper.find('StepContentWrapper')).toHaveLength(1);
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_schedule_rule/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_schedule_rule/index.tsx
deleted file mode 100644
index de9abcefdea2e6..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_schedule_rule/index.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-/*
- * 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, { FC, memo, useCallback, useEffect, useState } from 'react';
-import deepEqual from 'fast-deep-equal';
-import styled from 'styled-components';
-
-import { setFieldValue } from '../../helpers';
-import { RuleStep, RuleStepProps, ScheduleStepRule } from '../../types';
-import { StepRuleDescription } from '../description_step';
-import { ScheduleItem } from '../schedule_item_form';
-import { Form, UseField, useForm } from '../../../../../shared_imports';
-import { StepContentWrapper } from '../step_content_wrapper';
-import { NextStep } from '../next_step';
-import { schema } from './schema';
-
-interface StepScheduleRuleProps extends RuleStepProps {
-  defaultValues?: ScheduleStepRule | null;
-}
-
-const RestrictedWidthContainer = styled.div`
-  max-width: 300px;
-`;
-
-const stepScheduleDefaultValue = {
-  interval: '5m',
-  isNew: true,
-  from: '1m',
-};
-
-const StepScheduleRuleComponent: FC<StepScheduleRuleProps> = ({
-  addPadding = false,
-  defaultValues,
-  descriptionColumns = 'singleSplit',
-  isReadOnlyView,
-  isLoading,
-  isUpdateView = false,
-  setStepData,
-  setForm,
-}) => {
-  const [myStepData, setMyStepData] = useState<ScheduleStepRule>(stepScheduleDefaultValue);
-
-  const { form } = useForm({
-    defaultValue: myStepData,
-    options: { stripEmptyFields: false },
-    schema,
-  });
-
-  const onSubmit = useCallback(async () => {
-    if (setStepData) {
-      setStepData(RuleStep.scheduleRule, null, false);
-      const { isValid: newIsValid, data } = await form.submit();
-      if (newIsValid) {
-        setStepData(RuleStep.scheduleRule, { ...data }, newIsValid);
-        setMyStepData({ ...data, isNew: false } as ScheduleStepRule);
-      }
-    }
-  }, [form]);
-
-  useEffect(() => {
-    const { isNew, ...initDefaultValue } = myStepData;
-    if (defaultValues != null && !deepEqual(initDefaultValue, defaultValues)) {
-      const myDefaultValues = {
-        ...defaultValues,
-        isNew: false,
-      };
-      setMyStepData(myDefaultValues);
-      setFieldValue(form, schema, myDefaultValues);
-    }
-  }, [defaultValues]);
-
-  useEffect(() => {
-    if (setForm != null) {
-      setForm(RuleStep.scheduleRule, form);
-    }
-  }, [form]);
-
-  return isReadOnlyView && myStepData != null ? (
-    <StepContentWrapper addPadding={addPadding}>
-      <StepRuleDescription columns={descriptionColumns} schema={schema} data={myStepData} />
-    </StepContentWrapper>
-  ) : (
-    <>
-      <StepContentWrapper addPadding={!isUpdateView}>
-        <Form form={form} data-test-subj="stepScheduleRule">
-          <RestrictedWidthContainer>
-            <UseField
-              path="interval"
-              component={ScheduleItem}
-              componentProps={{
-                idAria: 'detectionEngineStepScheduleRuleInterval',
-                isDisabled: isLoading,
-                dataTestSubj: 'detectionEngineStepScheduleRuleInterval',
-              }}
-            />
-          </RestrictedWidthContainer>
-          <RestrictedWidthContainer>
-            <UseField
-              path="from"
-              component={ScheduleItem}
-              componentProps={{
-                idAria: 'detectionEngineStepScheduleRuleFrom',
-                isDisabled: isLoading,
-                dataTestSubj: 'detectionEngineStepScheduleRuleFrom',
-                minimumValue: 1,
-              }}
-            />
-          </RestrictedWidthContainer>
-        </Form>
-      </StepContentWrapper>
-
-      {!isUpdateView && (
-        <NextStep dataTestSubj="schedule-continue" onClick={onSubmit} isDisabled={isLoading} />
-      )}
-    </>
-  );
-};
-
-export const StepScheduleRule = memo(StepScheduleRuleComponent);
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_schedule_rule/schema.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_schedule_rule/schema.tsx
deleted file mode 100644
index e79aec2be6e153..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/step_schedule_rule/schema.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-/*
- * 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.
- */
-
-/* istanbul ignore file */
-
-import { i18n } from '@kbn/i18n';
-
-import { OptionalFieldLabel } from '../optional_field_label';
-import { FormSchema } from '../../../../../shared_imports';
-
-export const schema: FormSchema = {
-  interval: {
-    label: i18n.translate(
-      'xpack.siem.detectionEngine.createRule.stepScheduleRule.fieldIntervalLabel',
-      {
-        defaultMessage: 'Runs every',
-      }
-    ),
-    helpText: i18n.translate(
-      'xpack.siem.detectionEngine.createRule.stepScheduleRule.fieldIntervalHelpText',
-      {
-        defaultMessage:
-          'Rules run periodically and detect signals within the specified time frame.',
-      }
-    ),
-  },
-  from: {
-    label: i18n.translate(
-      'xpack.siem.detectionEngine.createRule.stepScheduleRule.fieldAdditionalLookBackLabel',
-      {
-        defaultMessage: 'Additional look-back time',
-      }
-    ),
-    labelAppend: OptionalFieldLabel,
-    helpText: i18n.translate(
-      'xpack.siem.detectionEngine.createRule.stepScheduleRule.fieldAdditionalLookBackHelpText',
-      {
-        defaultMessage: 'Adds time to the look-back period to prevent missed signals.',
-      }
-    ),
-  },
-};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/throttle_select_field/index.test.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/throttle_select_field/index.test.tsx
deleted file mode 100644
index 0ab19b671494ef..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/throttle_select_field/index.test.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-/*
- * 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 { ThrottleSelectField } from './index';
-import { useFormFieldMock } from '../../../../../mock';
-
-describe('ThrottleSelectField', () => {
-  it('renders correctly', () => {
-    const Component = () => {
-      const field = useFormFieldMock();
-
-      return <ThrottleSelectField field={field} euiFieldProps={{ options: [] }} />;
-    };
-    const wrapper = shallow(<Component />);
-
-    expect(wrapper.dive().find('SelectField')).toHaveLength(1);
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/throttle_select_field/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/components/throttle_select_field/index.tsx
deleted file mode 100644
index 0cf15c41a0f913..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/components/throttle_select_field/index.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
- * 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, { useCallback } from 'react';
-
-import {
-  NOTIFICATION_THROTTLE_RULE,
-  NOTIFICATION_THROTTLE_NO_ACTIONS,
-} from '../../../../../../common/constants';
-import { SelectField } from '../../../../../shared_imports';
-
-export const THROTTLE_OPTIONS = [
-  { value: NOTIFICATION_THROTTLE_NO_ACTIONS, text: 'Perform no actions' },
-  { value: NOTIFICATION_THROTTLE_RULE, text: 'On each rule execution' },
-  { value: '1h', text: 'Hourly' },
-  { value: '1d', text: 'Daily' },
-  { value: '7d', text: 'Weekly' },
-];
-
-type ThrottleSelectField = typeof SelectField;
-
-export const ThrottleSelectField: ThrottleSelectField = props => {
-  const onChange = useCallback(
-    e => {
-      const throttle = e.target.value;
-      props.field.setValue(throttle);
-      props.handleChange(throttle);
-    },
-    [props.field.setValue, props.handleChange]
-  );
-  const newEuiFieldProps = { ...props.euiFieldProps, onChange };
-  return <SelectField {...props} euiFieldProps={newEuiFieldProps} />;
-};
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/create/helpers.test.ts b/x-pack/plugins/siem/public/pages/detection_engine/rules/create/helpers.test.ts
deleted file mode 100644
index 8d793f39afa997..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/create/helpers.test.ts
+++ /dev/null
@@ -1,730 +0,0 @@
-/*
- * 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 { NewRule } from '../../../../containers/detection_engine/rules';
-import {
-  DefineStepRuleJson,
-  ScheduleStepRuleJson,
-  AboutStepRuleJson,
-  ActionsStepRuleJson,
-  AboutStepRule,
-  ActionsStepRule,
-  ScheduleStepRule,
-  DefineStepRule,
-} from '../types';
-import {
-  getTimeTypeValue,
-  formatDefineStepData,
-  formatScheduleStepData,
-  formatAboutStepData,
-  formatActionsStepData,
-  formatRule,
-  filterRuleFieldsForType,
-} from './helpers';
-import {
-  mockDefineStepRule,
-  mockQueryBar,
-  mockScheduleStepRule,
-  mockAboutStepRule,
-  mockActionsStepRule,
-} from '../all/__mocks__/mock';
-
-describe('helpers', () => {
-  describe('getTimeTypeValue', () => {
-    test('returns timeObj with value 0 if no time value found', () => {
-      const result = getTimeTypeValue('m');
-
-      expect(result).toEqual({ unit: 'm', value: 0 });
-    });
-
-    test('returns timeObj with unit set to empty string if no expected time type found', () => {
-      const result = getTimeTypeValue('5l');
-
-      expect(result).toEqual({ unit: '', value: 5 });
-    });
-
-    test('returns timeObj with unit of s and value 5 when time is 5s ', () => {
-      const result = getTimeTypeValue('5s');
-
-      expect(result).toEqual({ unit: 's', value: 5 });
-    });
-
-    test('returns timeObj with unit of m and value 5 when time is 5m ', () => {
-      const result = getTimeTypeValue('5m');
-
-      expect(result).toEqual({ unit: 'm', value: 5 });
-    });
-
-    test('returns timeObj with unit of h and value 5 when time is 5h ', () => {
-      const result = getTimeTypeValue('5h');
-
-      expect(result).toEqual({ unit: 'h', value: 5 });
-    });
-
-    test('returns timeObj with value of 5 when time is float like 5.6m ', () => {
-      const result = getTimeTypeValue('5m');
-
-      expect(result).toEqual({ unit: 'm', value: 5 });
-    });
-
-    test('returns timeObj with value of 0 and unit of "" if random string passed in', () => {
-      const result = getTimeTypeValue('random');
-
-      expect(result).toEqual({ unit: '', value: 0 });
-    });
-  });
-
-  describe('formatDefineStepData', () => {
-    let mockData: DefineStepRule;
-
-    beforeEach(() => {
-      mockData = mockDefineStepRule();
-    });
-
-    test('returns formatted object as DefineStepRuleJson', () => {
-      const result: DefineStepRuleJson = formatDefineStepData(mockData);
-      const expected = {
-        language: 'kuery',
-        filters: mockQueryBar.filters,
-        query: 'test query',
-        saved_id: 'test123',
-        index: ['filebeat-'],
-        type: 'saved_query',
-        timeline_id: '86aa74d0-2136-11ea-9864-ebc8cc1cb8c2',
-        timeline_title: 'Titled timeline',
-      };
-
-      expect(result).toEqual(expected);
-    });
-
-    test('returns formatted object with no saved_id if no savedId provided', () => {
-      const mockStepData = {
-        ...mockData,
-        queryBar: {
-          ...mockData.queryBar,
-          saved_id: '',
-        },
-      };
-      const result: DefineStepRuleJson = formatDefineStepData(mockStepData);
-      const expected = {
-        language: 'kuery',
-        filters: mockQueryBar.filters,
-        query: 'test query',
-        index: ['filebeat-'],
-        saved_id: '',
-        type: 'query',
-        timeline_id: '86aa74d0-2136-11ea-9864-ebc8cc1cb8c2',
-        timeline_title: 'Titled timeline',
-      };
-
-      expect(result).toEqual(expected);
-    });
-
-    test('returns formatted object without timeline_id and timeline_title if timeline.id is null', () => {
-      const mockStepData = {
-        ...mockData,
-      };
-      delete mockStepData.timeline.id;
-
-      const result: DefineStepRuleJson = formatDefineStepData(mockStepData);
-
-      const expected = {
-        language: 'kuery',
-        filters: mockQueryBar.filters,
-        query: 'test query',
-        index: ['filebeat-'],
-        saved_id: 'test123',
-        type: 'saved_query',
-      };
-
-      expect(result).toEqual(expected);
-    });
-
-    test('returns formatted object with timeline_id and timeline_title if timeline.id is "', () => {
-      const mockStepData = {
-        ...mockData,
-        timeline: {
-          ...mockData.timeline,
-          id: '',
-        },
-      };
-      const result: DefineStepRuleJson = formatDefineStepData(mockStepData);
-
-      const expected = {
-        language: 'kuery',
-        filters: mockQueryBar.filters,
-        query: 'test query',
-        index: ['filebeat-'],
-        saved_id: 'test123',
-        type: 'saved_query',
-        timeline_id: '',
-        timeline_title: 'Titled timeline',
-      };
-
-      expect(result).toEqual(expected);
-    });
-
-    test('returns formatted object without timeline_id and timeline_title if timeline.title is null', () => {
-      const mockStepData = {
-        ...mockData,
-        timeline: {
-          ...mockData.timeline,
-          id: '86aa74d0-2136-11ea-9864-ebc8cc1cb8c2',
-        },
-      };
-      delete mockStepData.timeline.title;
-      const result: DefineStepRuleJson = formatDefineStepData(mockStepData);
-
-      const expected = {
-        language: 'kuery',
-        filters: mockQueryBar.filters,
-        query: 'test query',
-        index: ['filebeat-'],
-        saved_id: 'test123',
-        type: 'saved_query',
-      };
-
-      expect(result).toEqual(expected);
-    });
-
-    test('returns formatted object with timeline_id and timeline_title if timeline.title is "', () => {
-      const mockStepData = {
-        ...mockData,
-        timeline: {
-          ...mockData.timeline,
-          title: '',
-        },
-      };
-      const result: DefineStepRuleJson = formatDefineStepData(mockStepData);
-
-      const expected = {
-        language: 'kuery',
-        filters: mockQueryBar.filters,
-        query: 'test query',
-        index: ['filebeat-'],
-        saved_id: 'test123',
-        type: 'saved_query',
-        timeline_id: '86aa74d0-2136-11ea-9864-ebc8cc1cb8c2',
-        timeline_title: '',
-      };
-
-      expect(result).toEqual(expected);
-    });
-
-    test('returns ML fields if type is machine_learning', () => {
-      const mockStepData: DefineStepRule = {
-        ...mockData,
-        ruleType: 'machine_learning',
-        anomalyThreshold: 44,
-        machineLearningJobId: 'some_jobert_id',
-      };
-      const result: DefineStepRuleJson = formatDefineStepData(mockStepData);
-
-      const expected = {
-        type: 'machine_learning',
-        anomaly_threshold: 44,
-        machine_learning_job_id: 'some_jobert_id',
-        timeline_id: '86aa74d0-2136-11ea-9864-ebc8cc1cb8c2',
-        timeline_title: 'Titled timeline',
-      };
-
-      expect(result).toEqual(expected);
-    });
-  });
-
-  describe('formatScheduleStepData', () => {
-    let mockData: ScheduleStepRule;
-
-    beforeEach(() => {
-      mockData = mockScheduleStepRule();
-    });
-
-    test('returns formatted object as ScheduleStepRuleJson', () => {
-      const result: ScheduleStepRuleJson = formatScheduleStepData(mockData);
-      const expected = {
-        from: 'now-660s',
-        to: 'now',
-        interval: '5m',
-        meta: {
-          from: '6m',
-        },
-      };
-
-      expect(result).toEqual(expected);
-    });
-
-    test('returns formatted object with "to" as "now" if "to" not supplied', () => {
-      const mockStepData = {
-        ...mockData,
-      };
-      delete mockStepData.to;
-      const result: ScheduleStepRuleJson = formatScheduleStepData(mockStepData);
-      const expected = {
-        from: 'now-660s',
-        to: 'now',
-        interval: '5m',
-        meta: {
-          from: '6m',
-        },
-      };
-
-      expect(result).toEqual(expected);
-    });
-
-    test('returns formatted object with "to" as "now" if "to" random string', () => {
-      const mockStepData = {
-        ...mockData,
-        to: 'random',
-      };
-      const result: ScheduleStepRuleJson = formatScheduleStepData(mockStepData);
-      const expected = {
-        from: 'now-660s',
-        to: 'now',
-        interval: '5m',
-        meta: {
-          from: '6m',
-        },
-      };
-
-      expect(result).toEqual(expected);
-    });
-
-    test('returns formatted object  if "from" random string', () => {
-      const mockStepData = {
-        ...mockData,
-        from: 'random',
-      };
-      const result: ScheduleStepRuleJson = formatScheduleStepData(mockStepData);
-      const expected = {
-        from: 'now-300s',
-        to: 'now',
-        interval: '5m',
-        meta: {
-          from: 'random',
-        },
-      };
-
-      expect(result).toEqual(expected);
-    });
-
-    test('returns formatted object  if "interval" random string', () => {
-      const mockStepData = {
-        ...mockData,
-        interval: 'random',
-      };
-      const result: ScheduleStepRuleJson = formatScheduleStepData(mockStepData);
-      const expected = {
-        from: 'now-360s',
-        to: 'now',
-        interval: 'random',
-        meta: {
-          from: '6m',
-        },
-      };
-
-      expect(result).toEqual(expected);
-    });
-  });
-
-  describe('formatAboutStepData', () => {
-    let mockData: AboutStepRule;
-
-    beforeEach(() => {
-      mockData = mockAboutStepRule();
-    });
-
-    test('returns formatted object as AboutStepRuleJson', () => {
-      const result: AboutStepRuleJson = formatAboutStepData(mockData);
-      const expected = {
-        description: '24/7',
-        false_positives: ['test'],
-        name: 'Query with rule-id',
-        note: '# this is some markdown documentation',
-        references: ['www.test.co'],
-        risk_score: 21,
-        severity: 'low',
-        tags: ['tag1', 'tag2'],
-        threat: [
-          {
-            framework: 'MITRE ATT&CK',
-            tactic: {
-              id: '1234',
-              name: 'tactic1',
-              reference: 'reference1',
-            },
-            technique: [
-              {
-                id: '456',
-                name: 'technique1',
-                reference: 'technique reference',
-              },
-            ],
-          },
-        ],
-      };
-
-      expect(result).toEqual(expected);
-    });
-
-    test('returns formatted object with empty falsePositive and references filtered out', () => {
-      const mockStepData = {
-        ...mockData,
-        falsePositives: ['', 'test', ''],
-        references: ['www.test.co', ''],
-      };
-      const result: AboutStepRuleJson = formatAboutStepData(mockStepData);
-      const expected = {
-        description: '24/7',
-        false_positives: ['test'],
-        name: 'Query with rule-id',
-        note: '# this is some markdown documentation',
-        references: ['www.test.co'],
-        risk_score: 21,
-        severity: 'low',
-        tags: ['tag1', 'tag2'],
-        threat: [
-          {
-            framework: 'MITRE ATT&CK',
-            tactic: {
-              id: '1234',
-              name: 'tactic1',
-              reference: 'reference1',
-            },
-            technique: [
-              {
-                id: '456',
-                name: 'technique1',
-                reference: 'technique reference',
-              },
-            ],
-          },
-        ],
-      };
-
-      expect(result).toEqual(expected);
-    });
-
-    test('returns formatted object without note if note is empty string', () => {
-      const mockStepData = {
-        ...mockData,
-        note: '',
-      };
-      const result: AboutStepRuleJson = formatAboutStepData(mockStepData);
-      const expected = {
-        description: '24/7',
-        false_positives: ['test'],
-        name: 'Query with rule-id',
-        references: ['www.test.co'],
-        risk_score: 21,
-        severity: 'low',
-        tags: ['tag1', 'tag2'],
-        threat: [
-          {
-            framework: 'MITRE ATT&CK',
-            tactic: {
-              id: '1234',
-              name: 'tactic1',
-              reference: 'reference1',
-            },
-            technique: [
-              {
-                id: '456',
-                name: 'technique1',
-                reference: 'technique reference',
-              },
-            ],
-          },
-        ],
-      };
-
-      expect(result).toEqual(expected);
-    });
-
-    test('returns formatted object with threats filtered out where tactic.name is "none"', () => {
-      const mockStepData = {
-        ...mockData,
-        threat: [
-          {
-            framework: 'mockFramework',
-            tactic: {
-              id: '1234',
-              name: 'tactic1',
-              reference: 'reference1',
-            },
-            technique: [
-              {
-                id: '456',
-                name: 'technique1',
-                reference: 'technique reference',
-              },
-            ],
-          },
-          {
-            framework: 'mockFramework',
-            tactic: {
-              id: '1234',
-              name: 'none',
-              reference: 'reference1',
-            },
-            technique: [
-              {
-                id: '456',
-                name: 'technique1',
-                reference: 'technique reference',
-              },
-            ],
-          },
-        ],
-      };
-      const result: AboutStepRuleJson = formatAboutStepData(mockStepData);
-      const expected = {
-        description: '24/7',
-        false_positives: ['test'],
-        name: 'Query with rule-id',
-        note: '# this is some markdown documentation',
-        references: ['www.test.co'],
-        risk_score: 21,
-        severity: 'low',
-        tags: ['tag1', 'tag2'],
-        threat: [
-          {
-            framework: 'MITRE ATT&CK',
-            tactic: { id: '1234', name: 'tactic1', reference: 'reference1' },
-            technique: [{ id: '456', name: 'technique1', reference: 'technique reference' }],
-          },
-        ],
-      };
-
-      expect(result).toEqual(expected);
-    });
-  });
-
-  describe('formatActionsStepData', () => {
-    let mockData: ActionsStepRule;
-
-    beforeEach(() => {
-      mockData = mockActionsStepRule();
-    });
-
-    test('returns formatted object as ActionsStepRuleJson', () => {
-      const result: ActionsStepRuleJson = formatActionsStepData(mockData);
-      const expected = {
-        actions: [],
-        enabled: false,
-        meta: {
-          kibana_siem_app_url: 'http://localhost:5601/app/siem',
-        },
-        throttle: 'no_actions',
-      };
-
-      expect(result).toEqual(expected);
-    });
-
-    test('returns proper throttle value for no_actions', () => {
-      const mockStepData = {
-        ...mockData,
-        throttle: 'no_actions',
-      };
-      const result: ActionsStepRuleJson = formatActionsStepData(mockStepData);
-      const expected = {
-        actions: [],
-        enabled: false,
-        meta: {
-          kibana_siem_app_url: mockStepData.kibanaSiemAppUrl,
-        },
-        throttle: 'no_actions',
-      };
-
-      expect(result).toEqual(expected);
-    });
-
-    test('returns proper throttle value for rule', () => {
-      const mockStepData = {
-        ...mockData,
-        throttle: 'rule',
-        actions: [
-          {
-            group: 'default',
-            id: 'id',
-            actionTypeId: 'actionTypeId',
-            params: {},
-          },
-        ],
-      };
-      const result: ActionsStepRuleJson = formatActionsStepData(mockStepData);
-      const expected = {
-        actions: [
-          {
-            group: mockStepData.actions[0].group,
-            id: mockStepData.actions[0].id,
-            action_type_id: mockStepData.actions[0].actionTypeId,
-            params: mockStepData.actions[0].params,
-          },
-        ],
-        enabled: false,
-        meta: {
-          kibana_siem_app_url: mockStepData.kibanaSiemAppUrl,
-        },
-        throttle: 'rule',
-      };
-
-      expect(result).toEqual(expected);
-    });
-
-    test('returns proper throttle value for interval', () => {
-      const mockStepData = {
-        ...mockData,
-        throttle: '1d',
-        actions: [
-          {
-            group: 'default',
-            id: 'id',
-            actionTypeId: 'actionTypeId',
-            params: {},
-          },
-        ],
-      };
-      const result: ActionsStepRuleJson = formatActionsStepData(mockStepData);
-      const expected = {
-        actions: [
-          {
-            group: mockStepData.actions[0].group,
-            id: mockStepData.actions[0].id,
-            action_type_id: mockStepData.actions[0].actionTypeId,
-            params: mockStepData.actions[0].params,
-          },
-        ],
-        enabled: false,
-        meta: {
-          kibana_siem_app_url: mockStepData.kibanaSiemAppUrl,
-        },
-        throttle: mockStepData.throttle,
-      };
-
-      expect(result).toEqual(expected);
-    });
-
-    test('returns actions with action_type_id', () => {
-      const mockAction = {
-        group: 'default',
-        id: '99403909-ca9b-49ba-9d7a-7e5320e68d05',
-        params: { message: 'ML Rule generated {{state.signals_count}} signals' },
-        actionTypeId: '.slack',
-      };
-
-      const mockStepData = {
-        ...mockData,
-        actions: [mockAction],
-      };
-      const result: ActionsStepRuleJson = formatActionsStepData(mockStepData);
-      const expected = {
-        actions: [
-          {
-            group: mockAction.group,
-            id: mockAction.id,
-            params: mockAction.params,
-            action_type_id: mockAction.actionTypeId,
-          },
-        ],
-        enabled: false,
-        meta: {
-          kibana_siem_app_url: mockStepData.kibanaSiemAppUrl,
-        },
-        throttle: 'no_actions',
-      };
-
-      expect(result).toEqual(expected);
-    });
-  });
-
-  describe('formatRule', () => {
-    let mockAbout: AboutStepRule;
-    let mockDefine: DefineStepRule;
-    let mockSchedule: ScheduleStepRule;
-    let mockActions: ActionsStepRule;
-
-    beforeEach(() => {
-      mockAbout = mockAboutStepRule();
-      mockDefine = mockDefineStepRule();
-      mockSchedule = mockScheduleStepRule();
-      mockActions = mockActionsStepRule();
-    });
-
-    test('returns NewRule with type of saved_query when saved_id exists', () => {
-      const result: NewRule = formatRule(mockDefine, mockAbout, mockSchedule, mockActions);
-
-      expect(result.type).toEqual('saved_query');
-    });
-
-    test('returns NewRule with type of query when saved_id does not exist', () => {
-      const mockDefineStepRuleWithoutSavedId = {
-        ...mockDefine,
-        queryBar: {
-          ...mockDefine.queryBar,
-          saved_id: '',
-        },
-      };
-      const result: NewRule = formatRule(
-        mockDefineStepRuleWithoutSavedId,
-        mockAbout,
-        mockSchedule,
-        mockActions
-      );
-
-      expect(result.type).toEqual('query');
-    });
-
-    test('returns NewRule without id if ruleId does not exist', () => {
-      const result: NewRule = formatRule(mockDefine, mockAbout, mockSchedule, mockActions);
-
-      expect(result.id).toBeUndefined();
-    });
-  });
-
-  describe('filterRuleFieldsForType', () => {
-    let fields: DefineStepRule;
-
-    beforeEach(() => {
-      fields = mockDefineStepRule();
-    });
-
-    it('removes query fields if the type is machine learning', () => {
-      const result = filterRuleFieldsForType(fields, 'machine_learning');
-      expect(result).not.toHaveProperty('index');
-      expect(result).not.toHaveProperty('queryBar');
-    });
-
-    it('leaves ML fields if the type is machine learning', () => {
-      const result = filterRuleFieldsForType(fields, 'machine_learning');
-      expect(result).toHaveProperty('anomalyThreshold');
-      expect(result).toHaveProperty('machineLearningJobId');
-    });
-
-    it('leaves arbitrary fields if the type is machine learning', () => {
-      const result = filterRuleFieldsForType(fields, 'machine_learning');
-      expect(result).toHaveProperty('timeline');
-      expect(result).toHaveProperty('ruleType');
-    });
-
-    it('removes ML fields if the type is not machine learning', () => {
-      const result = filterRuleFieldsForType(fields, 'query');
-      expect(result).not.toHaveProperty('anomalyThreshold');
-      expect(result).not.toHaveProperty('machineLearningJobId');
-    });
-
-    it('leaves query fields if the type is query', () => {
-      const result = filterRuleFieldsForType(fields, 'query');
-      expect(result).toHaveProperty('index');
-      expect(result).toHaveProperty('queryBar');
-    });
-
-    it('leaves arbitrary fields if the type is query', () => {
-      const result = filterRuleFieldsForType(fields, 'query');
-      expect(result).toHaveProperty('timeline');
-      expect(result).toHaveProperty('ruleType');
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/create/helpers.ts b/x-pack/plugins/siem/public/pages/detection_engine/rules/create/helpers.ts
deleted file mode 100644
index b912c182a7c658..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/create/helpers.ts
+++ /dev/null
@@ -1,174 +0,0 @@
-/*
- * 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 { has, isEmpty } from 'lodash/fp';
-import moment from 'moment';
-import deepmerge from 'deepmerge';
-
-import { NOTIFICATION_THROTTLE_NO_ACTIONS } from '../../../../../common/constants';
-import { transformAlertToRuleAction } from '../../../../../common/detection_engine/transform_actions';
-import { RuleType } from '../../../../../common/detection_engine/types';
-import { isMlRule } from '../../../../../common/machine_learning/helpers';
-import { NewRule } from '../../../../containers/detection_engine/rules';
-
-import {
-  AboutStepRule,
-  DefineStepRule,
-  ScheduleStepRule,
-  ActionsStepRule,
-  DefineStepRuleJson,
-  ScheduleStepRuleJson,
-  AboutStepRuleJson,
-  ActionsStepRuleJson,
-} from '../types';
-
-export const getTimeTypeValue = (time: string): { unit: string; value: number } => {
-  const timeObj = {
-    unit: '',
-    value: 0,
-  };
-  const filterTimeVal = (time as string).match(/\d+/g);
-  const filterTimeType = (time as string).match(/[a-zA-Z]+/g);
-  if (!isEmpty(filterTimeVal) && filterTimeVal != null && !isNaN(Number(filterTimeVal[0]))) {
-    timeObj.value = Number(filterTimeVal[0]);
-  }
-  if (
-    !isEmpty(filterTimeType) &&
-    filterTimeType != null &&
-    ['s', 'm', 'h'].includes(filterTimeType[0])
-  ) {
-    timeObj.unit = filterTimeType[0];
-  }
-  return timeObj;
-};
-
-export interface RuleFields {
-  anomalyThreshold: unknown;
-  machineLearningJobId: unknown;
-  queryBar: unknown;
-  index: unknown;
-  ruleType: unknown;
-}
-type QueryRuleFields<T> = Omit<T, 'anomalyThreshold' | 'machineLearningJobId'>;
-type MlRuleFields<T> = Omit<T, 'queryBar' | 'index'>;
-
-const isMlFields = <T>(fields: QueryRuleFields<T> | MlRuleFields<T>): fields is MlRuleFields<T> =>
-  has('anomalyThreshold', fields);
-
-export const filterRuleFieldsForType = <T extends RuleFields>(fields: T, type: RuleType) => {
-  if (isMlRule(type)) {
-    const { index, queryBar, ...mlRuleFields } = fields;
-    return mlRuleFields;
-  } else {
-    const { anomalyThreshold, machineLearningJobId, ...queryRuleFields } = fields;
-    return queryRuleFields;
-  }
-};
-
-export const formatDefineStepData = (defineStepData: DefineStepRule): DefineStepRuleJson => {
-  const ruleFields = filterRuleFieldsForType(defineStepData, defineStepData.ruleType);
-  const { ruleType, timeline } = ruleFields;
-  const baseFields = {
-    type: ruleType,
-    ...(timeline.id != null &&
-      timeline.title != null && {
-        timeline_id: timeline.id,
-        timeline_title: timeline.title,
-      }),
-  };
-
-  const typeFields = isMlFields(ruleFields)
-    ? {
-        anomaly_threshold: ruleFields.anomalyThreshold,
-        machine_learning_job_id: ruleFields.machineLearningJobId,
-      }
-    : {
-        index: ruleFields.index,
-        filters: ruleFields.queryBar?.filters,
-        language: ruleFields.queryBar?.query?.language,
-        query: ruleFields.queryBar?.query?.query as string,
-        saved_id: ruleFields.queryBar?.saved_id,
-        ...(ruleType === 'query' &&
-          ruleFields.queryBar?.saved_id && { type: 'saved_query' as RuleType }),
-      };
-
-  return {
-    ...baseFields,
-    ...typeFields,
-  };
-};
-
-export const formatScheduleStepData = (scheduleData: ScheduleStepRule): ScheduleStepRuleJson => {
-  const { isNew, ...formatScheduleData } = scheduleData;
-  if (!isEmpty(formatScheduleData.interval) && !isEmpty(formatScheduleData.from)) {
-    const { unit: intervalUnit, value: intervalValue } = getTimeTypeValue(
-      formatScheduleData.interval
-    );
-    const { unit: fromUnit, value: fromValue } = getTimeTypeValue(formatScheduleData.from);
-    const duration = moment.duration(intervalValue, intervalUnit as 's' | 'm' | 'h');
-    duration.add(fromValue, fromUnit as 's' | 'm' | 'h');
-    formatScheduleData.from = `now-${duration.asSeconds()}s`;
-    formatScheduleData.to = 'now';
-  }
-  return {
-    ...formatScheduleData,
-    meta: {
-      from: scheduleData.from,
-    },
-  };
-};
-
-export const formatAboutStepData = (aboutStepData: AboutStepRule): AboutStepRuleJson => {
-  const { falsePositives, references, riskScore, threat, isNew, note, ...rest } = aboutStepData;
-  return {
-    false_positives: falsePositives.filter(item => !isEmpty(item)),
-    references: references.filter(item => !isEmpty(item)),
-    risk_score: riskScore,
-    threat: threat
-      .filter(singleThreat => singleThreat.tactic.name !== 'none')
-      .map(singleThreat => ({
-        ...singleThreat,
-        framework: 'MITRE ATT&CK',
-        technique: singleThreat.technique.map(technique => {
-          const { id, name, reference } = technique;
-          return { id, name, reference };
-        }),
-      })),
-    ...(!isEmpty(note) ? { note } : {}),
-    ...rest,
-  };
-};
-
-export const formatActionsStepData = (actionsStepData: ActionsStepRule): ActionsStepRuleJson => {
-  const {
-    actions = [],
-    enabled,
-    kibanaSiemAppUrl,
-    throttle = NOTIFICATION_THROTTLE_NO_ACTIONS,
-  } = actionsStepData;
-
-  return {
-    actions: actions.map(transformAlertToRuleAction),
-    enabled,
-    throttle: actions.length ? throttle : NOTIFICATION_THROTTLE_NO_ACTIONS,
-    meta: {
-      kibana_siem_app_url: kibanaSiemAppUrl,
-    },
-  };
-};
-
-export const formatRule = (
-  defineStepData: DefineStepRule,
-  aboutStepData: AboutStepRule,
-  scheduleData: ScheduleStepRule,
-  actionsData: ActionsStepRule
-): NewRule =>
-  deepmerge.all([
-    formatDefineStepData(defineStepData),
-    formatAboutStepData(aboutStepData),
-    formatScheduleStepData(scheduleData),
-    formatActionsStepData(actionsData),
-  ]) as NewRule;
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/create/index.test.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/create/index.test.tsx
deleted file mode 100644
index db32be652d0f76..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/create/index.test.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
- * 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 { TestProviders } from '../../../../mock';
-import { CreateRulePage } from './index';
-import { useUserInfo } from '../../components/user_info';
-
-jest.mock('../../components/user_info');
-
-describe('CreateRulePage', () => {
-  it('renders correctly', () => {
-    (useUserInfo as jest.Mock).mockReturnValue({});
-    const wrapper = shallow(<CreateRulePage />, { wrappingComponent: TestProviders });
-
-    expect(wrapper.find('[title="Create new rule"]')).toHaveLength(1);
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/create/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/create/index.tsx
deleted file mode 100644
index 2686bb47925b6c..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/create/index.tsx
+++ /dev/null
@@ -1,428 +0,0 @@
-/*
- * 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 { EuiButtonEmpty, EuiAccordion, EuiHorizontalRule, EuiPanel, EuiSpacer } from '@elastic/eui';
-import React, { useCallback, useRef, useState, useMemo } from 'react';
-import { Redirect } from 'react-router-dom';
-import styled, { StyledComponent } from 'styled-components';
-
-import { usePersistRule } from '../../../../containers/detection_engine/rules';
-
-import { DETECTION_ENGINE_PAGE_NAME } from '../../../../components/link_to/redirect_to_detection_engine';
-import { WrapperPage } from '../../../../components/wrapper_page';
-import { displaySuccessToast, useStateToaster } from '../../../../components/toasters';
-import { SpyRoute } from '../../../../utils/route/spy_routes';
-import { useUserInfo } from '../../components/user_info';
-import { AccordionTitle } from '../components/accordion_title';
-import { FormData, FormHook } from '../../../../shared_imports';
-import { StepAboutRule } from '../components/step_about_rule';
-import { StepDefineRule } from '../components/step_define_rule';
-import { StepScheduleRule } from '../components/step_schedule_rule';
-import { StepRuleActions } from '../components/step_rule_actions';
-import { DetectionEngineHeaderPage } from '../../components/detection_engine_header_page';
-import * as RuleI18n from '../translations';
-import { redirectToDetections, getActionMessageParams, userHasNoPermissions } from '../helpers';
-import {
-  AboutStepRule,
-  DefineStepRule,
-  RuleStep,
-  RuleStepData,
-  ScheduleStepRule,
-  ActionsStepRule,
-} from '../types';
-import { formatRule } from './helpers';
-import * as i18n from './translations';
-
-const stepsRuleOrder = [
-  RuleStep.defineRule,
-  RuleStep.aboutRule,
-  RuleStep.scheduleRule,
-  RuleStep.ruleActions,
-];
-
-const MyEuiPanel = styled(EuiPanel)<{
-  zindex?: number;
-}>`
-  position: relative;
-  z-index: ${props => props.zindex}; /* ugly fix to allow searchBar to overflow the EuiPanel */
-
-  > .euiAccordion > .euiAccordion__triggerWrapper {
-    .euiAccordion__button {
-      cursor: default !important;
-      &:hover {
-        text-decoration: none !important;
-      }
-    }
-
-    .euiAccordion__iconWrapper {
-      display: none;
-    }
-  }
-`;
-
-MyEuiPanel.displayName = 'MyEuiPanel';
-
-const StepDefineRuleAccordion: StyledComponent<
-  typeof EuiAccordion,
-  any, // eslint-disable-line
-  { ref: React.MutableRefObject<EuiAccordion | null> },
-  never
-> = styled(EuiAccordion)`
-  .euiAccordion__childWrapper {
-    overflow: visible;
-  }
-`;
-
-StepDefineRuleAccordion.displayName = 'StepDefineRuleAccordion';
-
-const CreateRulePageComponent: React.FC = () => {
-  const {
-    loading,
-    isSignalIndexExists,
-    isAuthenticated,
-    hasEncryptionKey,
-    canUserCRUD,
-  } = useUserInfo();
-  const [, dispatchToaster] = useStateToaster();
-  const [openAccordionId, setOpenAccordionId] = useState<RuleStep>(RuleStep.defineRule);
-  const defineRuleRef = useRef<EuiAccordion | null>(null);
-  const aboutRuleRef = useRef<EuiAccordion | null>(null);
-  const scheduleRuleRef = useRef<EuiAccordion | null>(null);
-  const ruleActionsRef = useRef<EuiAccordion | null>(null);
-  const stepsForm = useRef<Record<RuleStep, FormHook<FormData> | null>>({
-    [RuleStep.defineRule]: null,
-    [RuleStep.aboutRule]: null,
-    [RuleStep.scheduleRule]: null,
-    [RuleStep.ruleActions]: null,
-  });
-  const stepsData = useRef<Record<RuleStep, RuleStepData>>({
-    [RuleStep.defineRule]: { isValid: false, data: {} },
-    [RuleStep.aboutRule]: { isValid: false, data: {} },
-    [RuleStep.scheduleRule]: { isValid: false, data: {} },
-    [RuleStep.ruleActions]: { isValid: false, data: {} },
-  });
-  const [isStepRuleInReadOnlyView, setIsStepRuleInEditView] = useState<Record<RuleStep, boolean>>({
-    [RuleStep.defineRule]: false,
-    [RuleStep.aboutRule]: false,
-    [RuleStep.scheduleRule]: false,
-    [RuleStep.ruleActions]: false,
-  });
-  const [{ isLoading, isSaved }, setRule] = usePersistRule();
-  const actionMessageParams = useMemo(
-    () =>
-      getActionMessageParams((stepsData.current['define-rule'].data as DefineStepRule).ruleType),
-    [stepsData.current['define-rule'].data]
-  );
-
-  const setStepData = useCallback(
-    (step: RuleStep, data: unknown, isValid: boolean) => {
-      stepsData.current[step] = { ...stepsData.current[step], data, isValid };
-      if (isValid) {
-        const stepRuleIdx = stepsRuleOrder.findIndex(item => step === item);
-        if ([0, 1, 2].includes(stepRuleIdx)) {
-          if (isStepRuleInReadOnlyView[stepsRuleOrder[stepRuleIdx + 1]]) {
-            setOpenAccordionId(stepsRuleOrder[stepRuleIdx + 1]);
-            setIsStepRuleInEditView({
-              ...isStepRuleInReadOnlyView,
-              [step]: true,
-              [stepsRuleOrder[stepRuleIdx + 1]]: false,
-            });
-          } else if (openAccordionId !== stepsRuleOrder[stepRuleIdx + 1]) {
-            setIsStepRuleInEditView({
-              ...isStepRuleInReadOnlyView,
-              [step]: true,
-            });
-            openCloseAccordion(stepsRuleOrder[stepRuleIdx + 1]);
-            setOpenAccordionId(stepsRuleOrder[stepRuleIdx + 1]);
-          }
-        } else if (
-          stepRuleIdx === 3 &&
-          stepsData.current[RuleStep.defineRule].isValid &&
-          stepsData.current[RuleStep.aboutRule].isValid &&
-          stepsData.current[RuleStep.scheduleRule].isValid
-        ) {
-          setRule(
-            formatRule(
-              stepsData.current[RuleStep.defineRule].data as DefineStepRule,
-              stepsData.current[RuleStep.aboutRule].data as AboutStepRule,
-              stepsData.current[RuleStep.scheduleRule].data as ScheduleStepRule,
-              stepsData.current[RuleStep.ruleActions].data as ActionsStepRule
-            )
-          );
-        }
-      }
-    },
-    [isStepRuleInReadOnlyView, openAccordionId, stepsData.current, setRule]
-  );
-
-  const setStepsForm = useCallback((step: RuleStep, form: FormHook<FormData>) => {
-    stepsForm.current[step] = form;
-  }, []);
-
-  const getAccordionType = useCallback(
-    (accordionId: RuleStep) => {
-      if (accordionId === openAccordionId) {
-        return 'active';
-      } else if (stepsData.current[accordionId].isValid) {
-        return 'valid';
-      }
-      return 'passive';
-    },
-    [openAccordionId, stepsData.current]
-  );
-
-  const defineRuleButton = (
-    <AccordionTitle
-      name="1"
-      title={RuleI18n.DEFINE_RULE}
-      type={getAccordionType(RuleStep.defineRule)}
-    />
-  );
-
-  const aboutRuleButton = (
-    <AccordionTitle
-      name="2"
-      title={RuleI18n.ABOUT_RULE}
-      type={getAccordionType(RuleStep.aboutRule)}
-    />
-  );
-
-  const scheduleRuleButton = (
-    <AccordionTitle
-      name="3"
-      title={RuleI18n.SCHEDULE_RULE}
-      type={getAccordionType(RuleStep.scheduleRule)}
-    />
-  );
-
-  const ruleActionsButton = (
-    <AccordionTitle
-      name="4"
-      title={RuleI18n.RULE_ACTIONS}
-      type={getAccordionType(RuleStep.ruleActions)}
-    />
-  );
-
-  const openCloseAccordion = (accordionId: RuleStep | null) => {
-    if (accordionId != null) {
-      if (accordionId === RuleStep.defineRule && defineRuleRef.current != null) {
-        defineRuleRef.current.onToggle();
-      } else if (accordionId === RuleStep.aboutRule && aboutRuleRef.current != null) {
-        aboutRuleRef.current.onToggle();
-      } else if (accordionId === RuleStep.scheduleRule && scheduleRuleRef.current != null) {
-        scheduleRuleRef.current.onToggle();
-      } else if (accordionId === RuleStep.ruleActions && ruleActionsRef.current != null) {
-        ruleActionsRef.current.onToggle();
-      }
-    }
-  };
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const manageAccordions = useCallback(
-    (id: RuleStep, isOpen: boolean) => {
-      const activeRuleIdx = stepsRuleOrder.findIndex(step => step === openAccordionId);
-      const stepRuleIdx = stepsRuleOrder.findIndex(step => step === id);
-
-      if ((id === openAccordionId || stepRuleIdx < activeRuleIdx) && !isOpen) {
-        openCloseAccordion(id);
-      } else if (stepRuleIdx >= activeRuleIdx) {
-        if (
-          openAccordionId !== id &&
-          !stepsData.current[openAccordionId].isValid &&
-          !isStepRuleInReadOnlyView[id] &&
-          isOpen
-        ) {
-          openCloseAccordion(id);
-        }
-      }
-    },
-    [isStepRuleInReadOnlyView, openAccordionId, stepsData]
-  );
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const manageIsEditable = useCallback(
-    async (id: RuleStep) => {
-      const activeForm = await stepsForm.current[openAccordionId]?.submit();
-      if (activeForm != null && activeForm?.isValid) {
-        stepsData.current[openAccordionId] = {
-          ...stepsData.current[openAccordionId],
-          data: activeForm.data,
-          isValid: activeForm.isValid,
-        };
-        setOpenAccordionId(id);
-        setIsStepRuleInEditView({
-          ...isStepRuleInReadOnlyView,
-          [openAccordionId]: true,
-          [id]: false,
-        });
-      }
-    },
-    [isStepRuleInReadOnlyView, openAccordionId]
-  );
-
-  if (isSaved) {
-    const ruleName = (stepsData.current[RuleStep.aboutRule].data as AboutStepRule).name;
-    displaySuccessToast(i18n.SUCCESSFULLY_CREATED_RULES(ruleName), dispatchToaster);
-    return <Redirect to={`/${DETECTION_ENGINE_PAGE_NAME}/rules`} />;
-  }
-
-  if (redirectToDetections(isSignalIndexExists, isAuthenticated, hasEncryptionKey)) {
-    return <Redirect to={`/${DETECTION_ENGINE_PAGE_NAME}`} />;
-  } else if (userHasNoPermissions(canUserCRUD)) {
-    return <Redirect to={`/${DETECTION_ENGINE_PAGE_NAME}/rules`} />;
-  }
-
-  return (
-    <>
-      <WrapperPage restrictWidth>
-        <DetectionEngineHeaderPage
-          backOptions={{ href: '#detections/rules', text: i18n.BACK_TO_RULES }}
-          border
-          isLoading={isLoading || loading}
-          title={i18n.PAGE_TITLE}
-        />
-        <MyEuiPanel zindex={4}>
-          <StepDefineRuleAccordion
-            initialIsOpen={true}
-            id={RuleStep.defineRule}
-            buttonContent={defineRuleButton}
-            paddingSize="xs"
-            ref={defineRuleRef}
-            onToggle={manageAccordions.bind(null, RuleStep.defineRule)}
-            extraAction={
-              stepsData.current[RuleStep.defineRule].isValid && (
-                <EuiButtonEmpty
-                  iconType="pencil"
-                  size="xs"
-                  onClick={manageIsEditable.bind(null, RuleStep.defineRule)}
-                >
-                  {i18n.EDIT_RULE}
-                </EuiButtonEmpty>
-              )
-            }
-          >
-            <EuiHorizontalRule margin="m" />
-            <StepDefineRule
-              addPadding={true}
-              defaultValues={
-                (stepsData.current[RuleStep.defineRule].data as DefineStepRule) ?? null
-              }
-              isReadOnlyView={isStepRuleInReadOnlyView[RuleStep.defineRule]}
-              isLoading={isLoading || loading}
-              setForm={setStepsForm}
-              setStepData={setStepData}
-              descriptionColumns="singleSplit"
-            />
-          </StepDefineRuleAccordion>
-        </MyEuiPanel>
-        <EuiSpacer size="l" />
-        <MyEuiPanel zindex={3}>
-          <EuiAccordion
-            initialIsOpen={false}
-            id={RuleStep.aboutRule}
-            buttonContent={aboutRuleButton}
-            paddingSize="xs"
-            ref={aboutRuleRef}
-            onToggle={manageAccordions.bind(null, RuleStep.aboutRule)}
-            extraAction={
-              stepsData.current[RuleStep.aboutRule].isValid && (
-                <EuiButtonEmpty
-                  iconType="pencil"
-                  size="xs"
-                  onClick={manageIsEditable.bind(null, RuleStep.aboutRule)}
-                >
-                  {i18n.EDIT_RULE}
-                </EuiButtonEmpty>
-              )
-            }
-          >
-            <EuiHorizontalRule margin="m" />
-            <StepAboutRule
-              addPadding={true}
-              defaultValues={(stepsData.current[RuleStep.aboutRule].data as AboutStepRule) ?? null}
-              descriptionColumns="singleSplit"
-              isReadOnlyView={isStepRuleInReadOnlyView[RuleStep.aboutRule]}
-              isLoading={isLoading || loading}
-              setForm={setStepsForm}
-              setStepData={setStepData}
-            />
-          </EuiAccordion>
-        </MyEuiPanel>
-        <EuiSpacer size="l" />
-        <MyEuiPanel zindex={2}>
-          <EuiAccordion
-            initialIsOpen={false}
-            id={RuleStep.scheduleRule}
-            buttonContent={scheduleRuleButton}
-            paddingSize="xs"
-            ref={scheduleRuleRef}
-            onToggle={manageAccordions.bind(null, RuleStep.scheduleRule)}
-            extraAction={
-              stepsData.current[RuleStep.scheduleRule].isValid && (
-                <EuiButtonEmpty
-                  iconType="pencil"
-                  size="xs"
-                  onClick={manageIsEditable.bind(null, RuleStep.scheduleRule)}
-                >
-                  {i18n.EDIT_RULE}
-                </EuiButtonEmpty>
-              )
-            }
-          >
-            <EuiHorizontalRule margin="m" />
-            <StepScheduleRule
-              addPadding={true}
-              defaultValues={
-                (stepsData.current[RuleStep.scheduleRule].data as ScheduleStepRule) ?? null
-              }
-              descriptionColumns="singleSplit"
-              isReadOnlyView={isStepRuleInReadOnlyView[RuleStep.scheduleRule]}
-              isLoading={isLoading || loading}
-              setForm={setStepsForm}
-              setStepData={setStepData}
-            />
-          </EuiAccordion>
-        </MyEuiPanel>
-        <EuiSpacer size="l" />
-        <MyEuiPanel zindex={1}>
-          <EuiAccordion
-            initialIsOpen={false}
-            id={RuleStep.ruleActions}
-            buttonContent={ruleActionsButton}
-            paddingSize="xs"
-            ref={ruleActionsRef}
-            onToggle={manageAccordions.bind(null, RuleStep.ruleActions)}
-            extraAction={
-              stepsData.current[RuleStep.ruleActions].isValid && (
-                <EuiButtonEmpty
-                  iconType="pencil"
-                  size="xs"
-                  onClick={manageIsEditable.bind(null, RuleStep.ruleActions)}
-                >
-                  {i18n.EDIT_RULE}
-                </EuiButtonEmpty>
-              )
-            }
-          >
-            <EuiHorizontalRule margin="m" />
-            <StepRuleActions
-              addPadding={true}
-              isReadOnlyView={isStepRuleInReadOnlyView[RuleStep.ruleActions]}
-              isLoading={isLoading || loading}
-              setForm={setStepsForm}
-              setStepData={setStepData}
-              actionMessageParams={actionMessageParams}
-            />
-          </EuiAccordion>
-        </MyEuiPanel>
-      </WrapperPage>
-
-      <SpyRoute />
-    </>
-  );
-};
-
-export const CreateRulePage = React.memo(CreateRulePageComponent);
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/details/index.test.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/details/index.test.tsx
deleted file mode 100644
index 19c6f39a9bc7ef..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/details/index.test.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
- * 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 '../../../../mock/match_media';
-import { TestProviders } from '../../../../mock';
-import { RuleDetailsPageComponent } from './index';
-import { setAbsoluteRangeDatePicker } from '../../../../store/inputs/actions';
-import { useUserInfo } from '../../components/user_info';
-import { useParams } from 'react-router-dom';
-
-jest.mock('../../components/user_info');
-jest.mock('react-router-dom', () => {
-  const originalModule = jest.requireActual('react-router-dom');
-
-  return {
-    ...originalModule,
-    useParams: jest.fn(),
-  };
-});
-
-describe('RuleDetailsPageComponent', () => {
-  beforeAll(() => {
-    (useUserInfo as jest.Mock).mockReturnValue({});
-    (useParams as jest.Mock).mockReturnValue({});
-  });
-
-  it('renders correctly', () => {
-    const wrapper = shallow(
-      <RuleDetailsPageComponent
-        query={{ query: '', language: 'language' }}
-        filters={[]}
-        setAbsoluteRangeDatePicker={setAbsoluteRangeDatePicker}
-      />,
-      {
-        wrappingComponent: TestProviders,
-      }
-    );
-
-    expect(wrapper.find('WithSource')).toHaveLength(1);
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/details/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/details/index.tsx
deleted file mode 100644
index 6a43c217e5ff5b..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/details/index.tsx
+++ /dev/null
@@ -1,429 +0,0 @@
-/*
- * 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.
- */
-
-/* eslint-disable react-hooks/rules-of-hooks */
-
-import {
-  EuiButton,
-  EuiLoadingSpinner,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiSpacer,
-  EuiTab,
-  EuiTabs,
-  EuiToolTip,
-} from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n/react';
-import React, { FC, memo, useCallback, useMemo, useState } from 'react';
-import { Redirect, useParams } from 'react-router-dom';
-import { StickyContainer } from 'react-sticky';
-import { connect, ConnectedProps } from 'react-redux';
-
-import { UpdateDateRange } from '../../../../components/charts/common';
-import { FiltersGlobal } from '../../../../components/filters_global';
-import { FormattedDate } from '../../../../components/formatted_date';
-import {
-  getEditRuleUrl,
-  getRulesUrl,
-  DETECTION_ENGINE_PAGE_NAME,
-} from '../../../../components/link_to/redirect_to_detection_engine';
-import { SiemSearchBar } from '../../../../components/search_bar';
-import { WrapperPage } from '../../../../components/wrapper_page';
-import { useRule } from '../../../../containers/detection_engine/rules';
-
-import {
-  indicesExistOrDataTemporarilyUnavailable,
-  WithSource,
-} from '../../../../containers/source';
-import { SpyRoute } from '../../../../utils/route/spy_routes';
-
-import { StepAboutRuleToggleDetails } from '../components/step_about_rule_details/';
-import { DetectionEngineHeaderPage } from '../../components/detection_engine_header_page';
-import { SignalsHistogramPanel } from '../../components/signals_histogram_panel';
-import { SignalsTable } from '../../components/signals';
-import { useUserInfo } from '../../components/user_info';
-import { DetectionEngineEmptyPage } from '../../detection_engine_empty_page';
-import { useSignalInfo } from '../../components/signals_info';
-import { StepDefineRule } from '../components/step_define_rule';
-import { StepScheduleRule } from '../components/step_schedule_rule';
-import { buildSignalsRuleIdFilter } from '../../components/signals/default_config';
-import { NoWriteSignalsCallOut } from '../../components/no_write_signals_callout';
-import * as detectionI18n from '../../translations';
-import { ReadOnlyCallOut } from '../components/read_only_callout';
-import { RuleSwitch } from '../components/rule_switch';
-import { StepPanel } from '../components/step_panel';
-import { getStepsData, redirectToDetections, userHasNoPermissions } from '../helpers';
-import * as ruleI18n from '../translations';
-import * as i18n from './translations';
-import { GlobalTime } from '../../../../containers/global_time';
-import { signalsHistogramOptions } from '../../components/signals_histogram_panel/config';
-import { inputsSelectors } from '../../../../store/inputs';
-import { State } from '../../../../store';
-import { InputsRange } from '../../../../store/inputs/model';
-import { setAbsoluteRangeDatePicker as dispatchSetAbsoluteRangeDatePicker } from '../../../../store/inputs/actions';
-import { RuleActionsOverflow } from '../components/rule_actions_overflow';
-import { RuleStatusFailedCallOut } from './status_failed_callout';
-import { FailureHistory } from './failure_history';
-import { RuleStatus } from '../components/rule_status';
-import { useMlCapabilities } from '../../../../components/ml_popover/hooks/use_ml_capabilities';
-import { hasMlAdminPermissions } from '../../../../../common/machine_learning/has_ml_admin_permissions';
-
-enum RuleDetailTabs {
-  signals = 'signals',
-  failures = 'failures',
-}
-
-const ruleDetailTabs = [
-  {
-    id: RuleDetailTabs.signals,
-    name: detectionI18n.SIGNAL,
-    disabled: false,
-  },
-  {
-    id: RuleDetailTabs.failures,
-    name: i18n.FAILURE_HISTORY_TAB,
-    disabled: false,
-  },
-];
-
-export const RuleDetailsPageComponent: FC<PropsFromRedux> = ({
-  filters,
-  query,
-  setAbsoluteRangeDatePicker,
-}) => {
-  const {
-    loading,
-    isSignalIndexExists,
-    isAuthenticated,
-    hasEncryptionKey,
-    canUserCRUD,
-    hasIndexWrite,
-    signalIndexName,
-  } = useUserInfo();
-  const { detailName: ruleId } = useParams();
-  const [isLoading, rule] = useRule(ruleId);
-  // This is used to re-trigger api rule status when user de/activate rule
-  const [ruleEnabled, setRuleEnabled] = useState<boolean | null>(null);
-  const [ruleDetailTab, setRuleDetailTab] = useState(RuleDetailTabs.signals);
-  const { aboutRuleData, modifiedAboutRuleDetailsData, defineRuleData, scheduleRuleData } =
-    rule != null
-      ? getStepsData({ rule, detailsView: true })
-      : {
-          aboutRuleData: null,
-          modifiedAboutRuleDetailsData: null,
-          defineRuleData: null,
-          scheduleRuleData: null,
-        };
-  const [lastSignals] = useSignalInfo({ ruleId });
-  const mlCapabilities = useMlCapabilities();
-
-  // TODO: Refactor license check + hasMlAdminPermissions to common check
-  const hasMlPermissions =
-    mlCapabilities.isPlatinumOrTrialLicense && hasMlAdminPermissions(mlCapabilities);
-
-  const title = isLoading === true || rule === null ? <EuiLoadingSpinner size="m" /> : rule.name;
-  const subTitle = useMemo(
-    () =>
-      isLoading === true || rule === null ? (
-        <EuiLoadingSpinner size="m" />
-      ) : (
-        [
-          <FormattedMessage
-            id="xpack.siem.detectionEngine.ruleDetails.ruleCreationDescription"
-            defaultMessage="Created by: {by} on {date}"
-            values={{
-              by: rule?.created_by ?? i18n.UNKNOWN,
-              date: (
-                <FormattedDate
-                  value={rule?.created_at ?? new Date().toISOString()}
-                  fieldName="createdAt"
-                />
-              ),
-            }}
-          />,
-          rule?.updated_by != null ? (
-            <FormattedMessage
-              id="xpack.siem.detectionEngine.ruleDetails.ruleUpdateDescription"
-              defaultMessage="Updated by: {by} on {date}"
-              values={{
-                by: rule?.updated_by ?? i18n.UNKNOWN,
-                date: (
-                  <FormattedDate
-                    value={rule?.updated_at ?? new Date().toISOString()}
-                    fieldName="updatedAt"
-                  />
-                ),
-              }}
-            />
-          ) : (
-            ''
-          ),
-        ]
-      ),
-    [isLoading, rule]
-  );
-
-  const signalDefaultFilters = useMemo(
-    () => (ruleId != null ? buildSignalsRuleIdFilter(ruleId) : []),
-    [ruleId]
-  );
-
-  const signalMergedFilters = useMemo(() => [...signalDefaultFilters, ...filters], [
-    signalDefaultFilters,
-    filters,
-  ]);
-
-  const tabs = useMemo(
-    () => (
-      <EuiTabs>
-        {ruleDetailTabs.map(tab => (
-          <EuiTab
-            onClick={() => setRuleDetailTab(tab.id)}
-            isSelected={tab.id === ruleDetailTab}
-            disabled={tab.disabled}
-            key={tab.id}
-          >
-            {tab.name}
-          </EuiTab>
-        ))}
-      </EuiTabs>
-    ),
-    [ruleDetailTabs, ruleDetailTab, setRuleDetailTab]
-  );
-  const ruleError = useMemo(
-    () =>
-      rule?.status === 'failed' &&
-      ruleDetailTab === RuleDetailTabs.signals &&
-      rule?.last_failure_at != null ? (
-        <RuleStatusFailedCallOut
-          message={rule?.last_failure_message ?? ''}
-          date={rule?.last_failure_at}
-        />
-      ) : null,
-    [rule, ruleDetailTab]
-  );
-
-  const indexToAdd = useMemo(() => (signalIndexName == null ? [] : [signalIndexName]), [
-    signalIndexName,
-  ]);
-
-  const updateDateRangeCallback = useCallback<UpdateDateRange>(
-    ({ x }) => {
-      if (!x) {
-        return;
-      }
-      const [min, max] = x;
-      setAbsoluteRangeDatePicker({ id: 'global', from: min, to: max });
-    },
-    [setAbsoluteRangeDatePicker]
-  );
-
-  const handleOnChangeEnabledRule = useCallback(
-    (enabled: boolean) => {
-      if (ruleEnabled == null || enabled !== ruleEnabled) {
-        setRuleEnabled(enabled);
-      }
-    },
-    [ruleEnabled, setRuleEnabled]
-  );
-
-  if (redirectToDetections(isSignalIndexExists, isAuthenticated, hasEncryptionKey)) {
-    return <Redirect to={`/${DETECTION_ENGINE_PAGE_NAME}`} />;
-  }
-
-  return (
-    <>
-      {hasIndexWrite != null && !hasIndexWrite && <NoWriteSignalsCallOut />}
-      {userHasNoPermissions(canUserCRUD) && <ReadOnlyCallOut />}
-      <WithSource sourceId="default" indexToAdd={indexToAdd}>
-        {({ indicesExist, indexPattern }) => {
-          return indicesExistOrDataTemporarilyUnavailable(indicesExist) ? (
-            <GlobalTime>
-              {({ to, from, deleteQuery, setQuery }) => (
-                <StickyContainer>
-                  <FiltersGlobal>
-                    <SiemSearchBar id="global" indexPattern={indexPattern} />
-                  </FiltersGlobal>
-
-                  <WrapperPage>
-                    <DetectionEngineHeaderPage
-                      backOptions={{
-                        href: getRulesUrl(),
-                        text: i18n.BACK_TO_RULES,
-                      }}
-                      border
-                      subtitle={subTitle}
-                      subtitle2={[
-                        ...(lastSignals != null
-                          ? [
-                              <>
-                                {detectionI18n.LAST_SIGNAL}
-                                {': '}
-                                {lastSignals}
-                              </>,
-                            ]
-                          : []),
-                        <RuleStatus ruleId={ruleId ?? null} ruleEnabled={ruleEnabled} />,
-                      ]}
-                      title={title}
-                    >
-                      <EuiFlexGroup alignItems="center">
-                        <EuiFlexItem grow={false}>
-                          <EuiToolTip
-                            position="top"
-                            content={
-                              rule?.type === 'machine_learning' && !hasMlPermissions
-                                ? detectionI18n.ML_RULES_DISABLED_MESSAGE
-                                : undefined
-                            }
-                          >
-                            <RuleSwitch
-                              id={rule?.id ?? '-1'}
-                              isDisabled={
-                                userHasNoPermissions(canUserCRUD) ||
-                                (!hasMlPermissions && !rule?.enabled)
-                              }
-                              enabled={rule?.enabled ?? false}
-                              optionLabel={i18n.ACTIVATE_RULE}
-                              onChange={handleOnChangeEnabledRule}
-                            />
-                          </EuiToolTip>
-                        </EuiFlexItem>
-
-                        <EuiFlexItem grow={false}>
-                          <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
-                            <EuiFlexItem grow={false}>
-                              <EuiButton
-                                href={getEditRuleUrl(ruleId ?? '')}
-                                iconType="controlsHorizontal"
-                                isDisabled={userHasNoPermissions(canUserCRUD) ?? true}
-                              >
-                                {ruleI18n.EDIT_RULE_SETTINGS}
-                              </EuiButton>
-                            </EuiFlexItem>
-                            <EuiFlexItem grow={false}>
-                              <RuleActionsOverflow
-                                rule={rule}
-                                userHasNoPermissions={userHasNoPermissions(canUserCRUD)}
-                              />
-                            </EuiFlexItem>
-                          </EuiFlexGroup>
-                        </EuiFlexItem>
-                      </EuiFlexGroup>
-                    </DetectionEngineHeaderPage>
-                    {ruleError}
-                    <EuiSpacer />
-                    <EuiFlexGroup>
-                      <EuiFlexItem data-test-subj="aboutRule" component="section" grow={1}>
-                        <StepAboutRuleToggleDetails
-                          loading={isLoading}
-                          stepData={aboutRuleData}
-                          stepDataDetails={modifiedAboutRuleDetailsData}
-                        />
-                      </EuiFlexItem>
-
-                      <EuiFlexItem grow={1}>
-                        <EuiFlexGroup direction="column">
-                          <EuiFlexItem component="section" grow={1}>
-                            <StepPanel loading={isLoading} title={ruleI18n.DEFINITION}>
-                              {defineRuleData != null && (
-                                <StepDefineRule
-                                  descriptionColumns="singleSplit"
-                                  isReadOnlyView={true}
-                                  isLoading={false}
-                                  defaultValues={defineRuleData}
-                                />
-                              )}
-                            </StepPanel>
-                          </EuiFlexItem>
-                          <EuiSpacer />
-                          <EuiFlexItem data-test-subj="schedule" component="section" grow={1}>
-                            <StepPanel loading={isLoading} title={ruleI18n.SCHEDULE}>
-                              {scheduleRuleData != null && (
-                                <StepScheduleRule
-                                  descriptionColumns="singleSplit"
-                                  isReadOnlyView={true}
-                                  isLoading={false}
-                                  defaultValues={scheduleRuleData}
-                                />
-                              )}
-                            </StepPanel>
-                          </EuiFlexItem>
-                        </EuiFlexGroup>
-                      </EuiFlexItem>
-                    </EuiFlexGroup>
-                    <EuiSpacer />
-                    {tabs}
-                    <EuiSpacer />
-                    {ruleDetailTab === RuleDetailTabs.signals && (
-                      <>
-                        <SignalsHistogramPanel
-                          deleteQuery={deleteQuery}
-                          filters={signalMergedFilters}
-                          query={query}
-                          from={from}
-                          signalIndexName={signalIndexName}
-                          setQuery={setQuery}
-                          stackByOptions={signalsHistogramOptions}
-                          to={to}
-                          updateDateRange={updateDateRangeCallback}
-                        />
-                        <EuiSpacer />
-                        {ruleId != null && (
-                          <SignalsTable
-                            canUserCRUD={canUserCRUD ?? false}
-                            defaultFilters={signalDefaultFilters}
-                            hasIndexWrite={hasIndexWrite ?? false}
-                            from={from}
-                            loading={loading}
-                            signalsIndex={signalIndexName ?? ''}
-                            to={to}
-                          />
-                        )}
-                      </>
-                    )}
-                    {ruleDetailTab === RuleDetailTabs.failures && <FailureHistory id={rule?.id} />}
-                  </WrapperPage>
-                </StickyContainer>
-              )}
-            </GlobalTime>
-          ) : (
-            <WrapperPage>
-              <DetectionEngineHeaderPage border title={i18n.PAGE_TITLE} />
-
-              <DetectionEngineEmptyPage />
-            </WrapperPage>
-          );
-        }}
-      </WithSource>
-
-      <SpyRoute state={{ ruleName: rule?.name }} />
-    </>
-  );
-};
-
-const makeMapStateToProps = () => {
-  const getGlobalInputs = inputsSelectors.globalSelector();
-  return (state: State) => {
-    const globalInputs: InputsRange = getGlobalInputs(state);
-    const { query, filters } = globalInputs;
-
-    return {
-      query,
-      filters,
-    };
-  };
-};
-
-const mapDispatchToProps = {
-  setAbsoluteRangeDatePicker: dispatchSetAbsoluteRangeDatePicker,
-};
-
-const connector = connect(makeMapStateToProps, mapDispatchToProps);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-export const RuleDetailsPage = connector(memo(RuleDetailsPageComponent));
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/edit/index.test.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/edit/index.test.tsx
deleted file mode 100644
index d22bc12abf9fa1..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/edit/index.test.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * 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 { TestProviders } from '../../../../mock';
-import { EditRulePage } from './index';
-import { useUserInfo } from '../../components/user_info';
-import { useParams } from 'react-router-dom';
-
-jest.mock('../../components/user_info');
-jest.mock('react-router-dom', () => {
-  const originalModule = jest.requireActual('react-router-dom');
-
-  return {
-    ...originalModule,
-    useParams: jest.fn(),
-  };
-});
-
-describe('EditRulePage', () => {
-  it('renders correctly', () => {
-    (useUserInfo as jest.Mock).mockReturnValue({});
-    (useParams as jest.Mock).mockReturnValue({});
-    const wrapper = shallow(<EditRulePage />, { wrappingComponent: TestProviders });
-
-    expect(wrapper.find('[title="Edit rule settings"]')).toHaveLength(1);
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/edit/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/edit/index.tsx
deleted file mode 100644
index c42e7b902cd5c5..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/edit/index.tsx
+++ /dev/null
@@ -1,431 +0,0 @@
-/*
- * 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.
- */
-
-/* eslint-disable react-hooks/rules-of-hooks */
-
-import {
-  EuiButton,
-  EuiCallOut,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiSpacer,
-  EuiTabbedContent,
-  EuiTabbedContentTab,
-} from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n/react';
-import React, { FC, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Redirect, useParams } from 'react-router-dom';
-
-import { useRule, usePersistRule } from '../../../../containers/detection_engine/rules';
-import { WrapperPage } from '../../../../components/wrapper_page';
-import { DETECTION_ENGINE_PAGE_NAME } from '../../../../components/link_to/redirect_to_detection_engine';
-import { displaySuccessToast, useStateToaster } from '../../../../components/toasters';
-import { SpyRoute } from '../../../../utils/route/spy_routes';
-import { useUserInfo } from '../../components/user_info';
-import { DetectionEngineHeaderPage } from '../../components/detection_engine_header_page';
-import { FormHook, FormData } from '../../../../shared_imports';
-import { StepPanel } from '../components/step_panel';
-import { StepAboutRule } from '../components/step_about_rule';
-import { StepDefineRule } from '../components/step_define_rule';
-import { StepScheduleRule } from '../components/step_schedule_rule';
-import { StepRuleActions } from '../components/step_rule_actions';
-import { formatRule } from '../create/helpers';
-import {
-  getStepsData,
-  redirectToDetections,
-  getActionMessageParams,
-  userHasNoPermissions,
-} from '../helpers';
-import * as ruleI18n from '../translations';
-import {
-  RuleStep,
-  DefineStepRule,
-  AboutStepRule,
-  ScheduleStepRule,
-  ActionsStepRule,
-} from '../types';
-import * as i18n from './translations';
-
-interface StepRuleForm {
-  isValid: boolean;
-}
-interface AboutStepRuleForm extends StepRuleForm {
-  data: AboutStepRule | null;
-}
-interface DefineStepRuleForm extends StepRuleForm {
-  data: DefineStepRule | null;
-}
-interface ScheduleStepRuleForm extends StepRuleForm {
-  data: ScheduleStepRule | null;
-}
-
-interface ActionsStepRuleForm extends StepRuleForm {
-  data: ActionsStepRule | null;
-}
-
-const EditRulePageComponent: FC = () => {
-  const [, dispatchToaster] = useStateToaster();
-  const {
-    loading: initLoading,
-    isSignalIndexExists,
-    isAuthenticated,
-    hasEncryptionKey,
-    canUserCRUD,
-  } = useUserInfo();
-  const { detailName: ruleId } = useParams();
-  const [loading, rule] = useRule(ruleId);
-
-  const [initForm, setInitForm] = useState(false);
-  const [myAboutRuleForm, setMyAboutRuleForm] = useState<AboutStepRuleForm>({
-    data: null,
-    isValid: false,
-  });
-  const [myDefineRuleForm, setMyDefineRuleForm] = useState<DefineStepRuleForm>({
-    data: null,
-    isValid: false,
-  });
-  const [myScheduleRuleForm, setMyScheduleRuleForm] = useState<ScheduleStepRuleForm>({
-    data: null,
-    isValid: false,
-  });
-  const [myActionsRuleForm, setMyActionsRuleForm] = useState<ActionsStepRuleForm>({
-    data: null,
-    isValid: false,
-  });
-  const [selectedTab, setSelectedTab] = useState<EuiTabbedContentTab>();
-  const stepsForm = useRef<Record<RuleStep, FormHook<FormData> | null>>({
-    [RuleStep.defineRule]: null,
-    [RuleStep.aboutRule]: null,
-    [RuleStep.scheduleRule]: null,
-    [RuleStep.ruleActions]: null,
-  });
-  const [{ isLoading, isSaved }, setRule] = usePersistRule();
-  const [tabHasError, setTabHasError] = useState<RuleStep[]>([]);
-  const actionMessageParams = useMemo(() => getActionMessageParams(rule?.type), [rule]);
-  const setStepsForm = useCallback(
-    (step: RuleStep, form: FormHook<FormData>) => {
-      stepsForm.current[step] = form;
-      if (initForm && step === (selectedTab?.id as RuleStep) && form.isSubmitted === false) {
-        setInitForm(false);
-        form.submit();
-      }
-    },
-    [initForm, selectedTab]
-  );
-  const tabs = useMemo(
-    () => [
-      {
-        id: RuleStep.defineRule,
-        name: ruleI18n.DEFINITION,
-        disabled: rule?.immutable,
-        content: (
-          <>
-            <EuiSpacer />
-            <StepPanel loading={loading || initLoading} title={ruleI18n.DEFINITION}>
-              {myDefineRuleForm.data != null && (
-                <StepDefineRule
-                  isReadOnlyView={false}
-                  isLoading={isLoading}
-                  isUpdateView
-                  defaultValues={myDefineRuleForm.data}
-                  setForm={setStepsForm}
-                />
-              )}
-              <EuiSpacer />
-            </StepPanel>
-          </>
-        ),
-      },
-      {
-        id: RuleStep.aboutRule,
-        name: ruleI18n.ABOUT,
-        disabled: rule?.immutable,
-        content: (
-          <>
-            <EuiSpacer />
-            <StepPanel loading={loading || initLoading} title={ruleI18n.ABOUT}>
-              {myAboutRuleForm.data != null && (
-                <StepAboutRule
-                  isReadOnlyView={false}
-                  isLoading={isLoading}
-                  isUpdateView
-                  defaultValues={myAboutRuleForm.data}
-                  setForm={setStepsForm}
-                />
-              )}
-              <EuiSpacer />
-            </StepPanel>
-          </>
-        ),
-      },
-      {
-        id: RuleStep.scheduleRule,
-        name: ruleI18n.SCHEDULE,
-        disabled: rule?.immutable,
-        content: (
-          <>
-            <EuiSpacer />
-            <StepPanel loading={loading || initLoading} title={ruleI18n.SCHEDULE}>
-              {myScheduleRuleForm.data != null && (
-                <StepScheduleRule
-                  isReadOnlyView={false}
-                  isLoading={isLoading}
-                  isUpdateView
-                  defaultValues={myScheduleRuleForm.data}
-                  setForm={setStepsForm}
-                />
-              )}
-              <EuiSpacer />
-            </StepPanel>
-          </>
-        ),
-      },
-      {
-        id: RuleStep.ruleActions,
-        name: ruleI18n.ACTIONS,
-        content: (
-          <>
-            <EuiSpacer />
-            <StepPanel loading={loading || initLoading} title={ruleI18n.ACTIONS}>
-              {myActionsRuleForm.data != null && (
-                <StepRuleActions
-                  isReadOnlyView={false}
-                  isLoading={isLoading}
-                  isUpdateView
-                  defaultValues={myActionsRuleForm.data}
-                  setForm={setStepsForm}
-                  actionMessageParams={actionMessageParams}
-                />
-              )}
-              <EuiSpacer />
-            </StepPanel>
-          </>
-        ),
-      },
-    ],
-    [
-      rule,
-      loading,
-      initLoading,
-      isLoading,
-      myAboutRuleForm,
-      myDefineRuleForm,
-      myScheduleRuleForm,
-      myActionsRuleForm,
-      setStepsForm,
-      stepsForm,
-      actionMessageParams,
-    ]
-  );
-
-  const onSubmit = useCallback(async () => {
-    const activeFormId = selectedTab?.id as RuleStep;
-    const activeForm = await stepsForm.current[activeFormId]?.submit();
-
-    const invalidForms = [
-      RuleStep.aboutRule,
-      RuleStep.defineRule,
-      RuleStep.scheduleRule,
-      RuleStep.ruleActions,
-    ].reduce<RuleStep[]>((acc, step) => {
-      if (
-        (step === activeFormId && activeForm != null && !activeForm?.isValid) ||
-        (step === RuleStep.aboutRule && !myAboutRuleForm.isValid) ||
-        (step === RuleStep.defineRule && !myDefineRuleForm.isValid) ||
-        (step === RuleStep.scheduleRule && !myScheduleRuleForm.isValid) ||
-        (step === RuleStep.ruleActions && !myActionsRuleForm.isValid)
-      ) {
-        return [...acc, step];
-      }
-      return acc;
-    }, []);
-
-    if (invalidForms.length === 0 && activeForm != null) {
-      setTabHasError([]);
-      setRule({
-        ...formatRule(
-          (activeFormId === RuleStep.defineRule
-            ? activeForm.data
-            : myDefineRuleForm.data) as DefineStepRule,
-          (activeFormId === RuleStep.aboutRule
-            ? activeForm.data
-            : myAboutRuleForm.data) as AboutStepRule,
-          (activeFormId === RuleStep.scheduleRule
-            ? activeForm.data
-            : myScheduleRuleForm.data) as ScheduleStepRule,
-          (activeFormId === RuleStep.ruleActions
-            ? activeForm.data
-            : myActionsRuleForm.data) as ActionsStepRule
-        ),
-        ...(ruleId ? { id: ruleId } : {}),
-      });
-    } else {
-      setTabHasError(invalidForms);
-    }
-  }, [
-    stepsForm,
-    myAboutRuleForm,
-    myDefineRuleForm,
-    myScheduleRuleForm,
-    myActionsRuleForm,
-    selectedTab,
-    ruleId,
-  ]);
-
-  useEffect(() => {
-    if (rule != null) {
-      const { aboutRuleData, defineRuleData, scheduleRuleData, ruleActionsData } = getStepsData({
-        rule,
-      });
-      setMyAboutRuleForm({ data: aboutRuleData, isValid: true });
-      setMyDefineRuleForm({ data: defineRuleData, isValid: true });
-      setMyScheduleRuleForm({ data: scheduleRuleData, isValid: true });
-      setMyActionsRuleForm({ data: ruleActionsData, isValid: true });
-    }
-  }, [rule]);
-
-  const onTabClick = useCallback(
-    async (tab: EuiTabbedContentTab) => {
-      if (selectedTab != null) {
-        const ruleStep = selectedTab.id as RuleStep;
-        const respForm = await stepsForm.current[ruleStep]?.submit();
-
-        if (respForm != null) {
-          if (ruleStep === RuleStep.aboutRule) {
-            setMyAboutRuleForm({
-              data: respForm.data as AboutStepRule,
-              isValid: respForm.isValid,
-            });
-          } else if (ruleStep === RuleStep.defineRule) {
-            setMyDefineRuleForm({
-              data: respForm.data as DefineStepRule,
-              isValid: respForm.isValid,
-            });
-          } else if (ruleStep === RuleStep.scheduleRule) {
-            setMyScheduleRuleForm({
-              data: respForm.data as ScheduleStepRule,
-              isValid: respForm.isValid,
-            });
-          } else if (ruleStep === RuleStep.ruleActions) {
-            setMyActionsRuleForm({
-              data: respForm.data as ActionsStepRule,
-              isValid: respForm.isValid,
-            });
-          }
-        }
-      }
-      setInitForm(true);
-      setSelectedTab(tab);
-    },
-    [selectedTab, stepsForm.current]
-  );
-
-  useEffect(() => {
-    if (rule != null) {
-      const { aboutRuleData, defineRuleData, scheduleRuleData, ruleActionsData } = getStepsData({
-        rule,
-      });
-      setMyAboutRuleForm({ data: aboutRuleData, isValid: true });
-      setMyDefineRuleForm({ data: defineRuleData, isValid: true });
-      setMyScheduleRuleForm({ data: scheduleRuleData, isValid: true });
-      setMyActionsRuleForm({ data: ruleActionsData, isValid: true });
-    }
-  }, [rule]);
-
-  useEffect(() => {
-    const tabIndex = rule?.immutable ? 3 : 0;
-    setSelectedTab(tabs[tabIndex]);
-  }, [rule]);
-
-  if (isSaved) {
-    displaySuccessToast(i18n.SUCCESSFULLY_SAVED_RULE(rule?.name ?? ''), dispatchToaster);
-    return <Redirect to={`/${DETECTION_ENGINE_PAGE_NAME}/rules/id/${ruleId}`} />;
-  }
-
-  if (redirectToDetections(isSignalIndexExists, isAuthenticated, hasEncryptionKey)) {
-    return <Redirect to={`/${DETECTION_ENGINE_PAGE_NAME}`} />;
-  } else if (userHasNoPermissions(canUserCRUD)) {
-    return <Redirect to={`/${DETECTION_ENGINE_PAGE_NAME}/rules/id/${ruleId}`} />;
-  }
-
-  return (
-    <>
-      <WrapperPage restrictWidth>
-        <DetectionEngineHeaderPage
-          backOptions={{
-            href: `#/${DETECTION_ENGINE_PAGE_NAME}/rules/id/${ruleId}`,
-            text: `${i18n.BACK_TO} ${rule?.name ?? ''}`,
-          }}
-          isLoading={isLoading}
-          title={i18n.PAGE_TITLE}
-        />
-        {tabHasError.length > 0 && (
-          <EuiCallOut title={i18n.SORRY_ERRORS} color="danger" iconType="alert">
-            <FormattedMessage
-              id="xpack.siem.detectionEngine.rule.editRule.errorMsgDescription"
-              defaultMessage="You have an invalid input in {countError, plural, one {this tab} other {these tabs}}: {tabHasError}"
-              values={{
-                countError: tabHasError.length,
-                tabHasError: tabHasError
-                  .map(t => {
-                    if (t === RuleStep.aboutRule) {
-                      return ruleI18n.ABOUT;
-                    } else if (t === RuleStep.defineRule) {
-                      return ruleI18n.DEFINITION;
-                    } else if (t === RuleStep.scheduleRule) {
-                      return ruleI18n.SCHEDULE;
-                    } else if (t === RuleStep.ruleActions) {
-                      return ruleI18n.RULE_ACTIONS;
-                    }
-                    return t;
-                  })
-                  .join(', '),
-              }}
-            />
-          </EuiCallOut>
-        )}
-
-        <EuiTabbedContent
-          initialSelectedTab={tabs[0]}
-          selectedTab={tabs.find(t => t.id === selectedTab?.id)}
-          onTabClick={onTabClick}
-          tabs={tabs}
-        />
-
-        <EuiSpacer />
-
-        <EuiFlexGroup
-          alignItems="center"
-          gutterSize="s"
-          justifyContent="flexEnd"
-          responsive={false}
-        >
-          <EuiFlexItem grow={false}>
-            <EuiButton iconType="cross" href={`#/${DETECTION_ENGINE_PAGE_NAME}/rules/id/${ruleId}`}>
-              {i18n.CANCEL}
-            </EuiButton>
-          </EuiFlexItem>
-
-          <EuiFlexItem grow={false}>
-            <EuiButton
-              fill
-              onClick={onSubmit}
-              iconType="save"
-              isLoading={isLoading}
-              isDisabled={initLoading}
-            >
-              {i18n.SAVE_CHANGES}
-            </EuiButton>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </WrapperPage>
-
-      <SpyRoute state={{ ruleName: rule?.name }} />
-    </>
-  );
-};
-
-export const EditRulePage = memo(EditRulePageComponent);
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/helpers.test.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/helpers.test.tsx
deleted file mode 100644
index f2a04a87ced278..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/helpers.test.tsx
+++ /dev/null
@@ -1,378 +0,0 @@
-/*
- * 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 {
-  GetStepsData,
-  getDefineStepsData,
-  getScheduleStepsData,
-  getStepsData,
-  getAboutStepsData,
-  getActionsStepsData,
-  getHumanizedDuration,
-  getModifiedAboutDetailsData,
-  determineDetailsValue,
-  userHasNoPermissions,
-} from './helpers';
-import { mockRuleWithEverything, mockRule } from './all/__mocks__/mock';
-import { esFilters } from '../../../../../../../src/plugins/data/public';
-import { Rule } from '../../../containers/detection_engine/rules';
-import {
-  AboutStepRule,
-  AboutStepRuleDetails,
-  DefineStepRule,
-  ScheduleStepRule,
-  ActionsStepRule,
-} from './types';
-
-describe('rule helpers', () => {
-  describe('getStepsData', () => {
-    test('returns object with about, define, schedule and actions step properties formatted', () => {
-      const {
-        defineRuleData,
-        modifiedAboutRuleDetailsData,
-        aboutRuleData,
-        scheduleRuleData,
-        ruleActionsData,
-      }: GetStepsData = getStepsData({
-        rule: mockRuleWithEverything('test-id'),
-      });
-      const defineRuleStepData = {
-        isNew: false,
-        ruleType: 'saved_query',
-        anomalyThreshold: 50,
-        index: ['auditbeat-*'],
-        machineLearningJobId: '',
-        queryBar: {
-          query: {
-            query: 'user.name: root or user.name: admin',
-            language: 'kuery',
-          },
-          filters: [
-            {
-              $state: {
-                store: esFilters.FilterStateStore.GLOBAL_STATE,
-              },
-              meta: {
-                alias: null,
-                disabled: false,
-                key: 'event.category',
-                negate: false,
-                params: {
-                  query: 'file',
-                },
-                type: 'phrase',
-              },
-              query: {
-                match_phrase: {
-                  'event.category': 'file',
-                },
-              },
-            },
-          ],
-          saved_id: 'test123',
-        },
-        timeline: {
-          id: '86aa74d0-2136-11ea-9864-ebc8cc1cb8c2',
-          title: 'Titled timeline',
-        },
-      };
-      const aboutRuleStepData = {
-        description: '24/7',
-        falsePositives: ['test'],
-        isNew: false,
-        name: 'Query with rule-id',
-        note: '# this is some markdown documentation',
-        references: ['www.test.co'],
-        riskScore: 21,
-        severity: 'low',
-        tags: ['tag1', 'tag2'],
-        threat: [
-          {
-            framework: 'mockFramework',
-            tactic: {
-              id: '1234',
-              name: 'tactic1',
-              reference: 'reference1',
-            },
-            technique: [
-              {
-                id: '456',
-                name: 'technique1',
-                reference: 'technique reference',
-              },
-            ],
-          },
-        ],
-      };
-      const scheduleRuleStepData = { from: '0s', interval: '5m', isNew: false };
-      const ruleActionsStepData = {
-        enabled: true,
-        throttle: 'no_actions',
-        isNew: false,
-        actions: [],
-      };
-      const aboutRuleDataDetailsData = {
-        note: '# this is some markdown documentation',
-        description: '24/7',
-      };
-
-      expect(defineRuleData).toEqual(defineRuleStepData);
-      expect(aboutRuleData).toEqual(aboutRuleStepData);
-      expect(scheduleRuleData).toEqual(scheduleRuleStepData);
-      expect(ruleActionsData).toEqual(ruleActionsStepData);
-      expect(modifiedAboutRuleDetailsData).toEqual(aboutRuleDataDetailsData);
-    });
-  });
-
-  describe('getAboutStepsData', () => {
-    test('returns name, description, and note as empty string if detailsView is true', () => {
-      const result: AboutStepRule = getAboutStepsData(mockRuleWithEverything('test-id'), true);
-
-      expect(result.name).toEqual('');
-      expect(result.description).toEqual('');
-      expect(result.note).toEqual('');
-    });
-
-    test('returns note as empty string if property does not exist on rule', () => {
-      const mockedRule = mockRuleWithEverything('test-id');
-      delete mockedRule.note;
-      const result: AboutStepRule = getAboutStepsData(mockedRule, false);
-
-      expect(result.note).toEqual('');
-    });
-  });
-
-  describe('determineDetailsValue', () => {
-    test('returns name, description, and note as empty string if detailsView is true', () => {
-      const result: Pick<Rule, 'name' | 'description' | 'note'> = determineDetailsValue(
-        mockRuleWithEverything('test-id'),
-        true
-      );
-      const expected = { name: '', description: '', note: '' };
-
-      expect(result).toEqual(expected);
-    });
-
-    test('returns name, description, and note values if detailsView is false', () => {
-      const mockedRule = mockRuleWithEverything('test-id');
-      const result: Pick<Rule, 'name' | 'description' | 'note'> = determineDetailsValue(
-        mockedRule,
-        false
-      );
-      const expected = {
-        name: mockedRule.name,
-        description: mockedRule.description,
-        note: mockedRule.note,
-      };
-
-      expect(result).toEqual(expected);
-    });
-
-    test('returns note as empty string if property does not exist on rule', () => {
-      const mockedRule = mockRuleWithEverything('test-id');
-      delete mockedRule.note;
-      const result: Pick<Rule, 'name' | 'description' | 'note'> = determineDetailsValue(
-        mockedRule,
-        false
-      );
-      const expected = { name: mockedRule.name, description: mockedRule.description, note: '' };
-
-      expect(result).toEqual(expected);
-    });
-  });
-
-  describe('getDefineStepsData', () => {
-    test('returns with saved_id if value exists on rule', () => {
-      const result: DefineStepRule = getDefineStepsData(mockRule('test-id'));
-      const expected = {
-        isNew: false,
-        ruleType: 'saved_query',
-        anomalyThreshold: 50,
-        machineLearningJobId: '',
-        index: ['auditbeat-*'],
-        queryBar: {
-          query: {
-            query: '',
-            language: 'kuery',
-          },
-          filters: [],
-          saved_id: "Garrett's IP",
-        },
-        timeline: {
-          id: '86aa74d0-2136-11ea-9864-ebc8cc1cb8c2',
-          title: 'Untitled timeline',
-        },
-      };
-
-      expect(result).toEqual(expected);
-    });
-
-    test('returns with saved_id of undefined if value does not exist on rule', () => {
-      const mockedRule = {
-        ...mockRule('test-id'),
-      };
-      delete mockedRule.saved_id;
-      const result: DefineStepRule = getDefineStepsData(mockedRule);
-      const expected = {
-        isNew: false,
-        ruleType: 'saved_query',
-        anomalyThreshold: 50,
-        machineLearningJobId: '',
-        index: ['auditbeat-*'],
-        queryBar: {
-          query: {
-            query: '',
-            language: 'kuery',
-          },
-          filters: [],
-          saved_id: undefined,
-        },
-        timeline: {
-          id: '86aa74d0-2136-11ea-9864-ebc8cc1cb8c2',
-          title: 'Untitled timeline',
-        },
-      };
-
-      expect(result).toEqual(expected);
-    });
-
-    test('returns timeline id and title of null if they do not exist on rule', () => {
-      const mockedRule = mockRuleWithEverything('test-id');
-      delete mockedRule.timeline_id;
-      delete mockedRule.timeline_title;
-      const result: DefineStepRule = getDefineStepsData(mockedRule);
-
-      expect(result.timeline.id).toBeNull();
-      expect(result.timeline.title).toBeNull();
-    });
-  });
-
-  describe('getHumanizedDuration', () => {
-    test('returns from as seconds if from duration is less than a minute', () => {
-      const result = getHumanizedDuration('now-62s', '1m');
-
-      expect(result).toEqual('2s');
-    });
-
-    test('returns from as minutes if from duration is less than an hour', () => {
-      const result = getHumanizedDuration('now-660s', '5m');
-
-      expect(result).toEqual('6m');
-    });
-
-    test('returns from as hours if from duration is more than 60 minutes', () => {
-      const result = getHumanizedDuration('now-7400s', '5m');
-
-      expect(result).toEqual('1h');
-    });
-
-    test('returns from as if from is not parsable as dateMath', () => {
-      const result = getHumanizedDuration('randomstring', '5m');
-
-      expect(result).toEqual('NaNh');
-    });
-
-    test('returns from as 5m if interval is not parsable as dateMath', () => {
-      const result = getHumanizedDuration('now-300s', 'randomstring');
-
-      expect(result).toEqual('5m');
-    });
-  });
-
-  describe('getScheduleStepsData', () => {
-    test('returns expected ScheduleStep rule object', () => {
-      const mockedRule = {
-        ...mockRule('test-id'),
-      };
-      const result: ScheduleStepRule = getScheduleStepsData(mockedRule);
-      const expected = {
-        isNew: false,
-        interval: mockedRule.interval,
-        from: '0s',
-      };
-
-      expect(result).toEqual(expected);
-    });
-  });
-
-  describe('getActionsStepsData', () => {
-    test('returns expected ActionsStepRule rule object', () => {
-      const mockedRule = {
-        ...mockRule('test-id'),
-        actions: [
-          {
-            id: 'id',
-            group: 'group',
-            params: {},
-            action_type_id: 'action_type_id',
-          },
-        ],
-      };
-      const result: ActionsStepRule = getActionsStepsData(mockedRule);
-      const expected = {
-        actions: [
-          {
-            id: 'id',
-            group: 'group',
-            params: {},
-            actionTypeId: 'action_type_id',
-          },
-        ],
-        enabled: mockedRule.enabled,
-        isNew: false,
-        throttle: 'no_actions',
-      };
-
-      expect(result).toEqual(expected);
-    });
-  });
-
-  describe('getModifiedAboutDetailsData', () => {
-    test('returns object with "note" and "description" being those of passed in rule', () => {
-      const result: AboutStepRuleDetails = getModifiedAboutDetailsData(
-        mockRuleWithEverything('test-id')
-      );
-      const aboutRuleDataDetailsData = {
-        note: '# this is some markdown documentation',
-        description: '24/7',
-      };
-
-      expect(result).toEqual(aboutRuleDataDetailsData);
-    });
-
-    test('returns "note" with empty string if "note" does not exist', () => {
-      const { note, ...mockRuleWithoutNote } = { ...mockRuleWithEverything('test-id') };
-      const result: AboutStepRuleDetails = getModifiedAboutDetailsData(mockRuleWithoutNote);
-
-      const aboutRuleDetailsData = { note: '', description: mockRuleWithoutNote.description };
-
-      expect(result).toEqual(aboutRuleDetailsData);
-    });
-  });
-
-  describe('userHasNoPermissions', () => {
-    test("returns false when user's CRUD operations are null", () => {
-      const result: boolean = userHasNoPermissions(null);
-      const userHasNoPermissionsExpectedResult = false;
-
-      expect(result).toEqual(userHasNoPermissionsExpectedResult);
-    });
-
-    test('returns true when user cannot CRUD', () => {
-      const result: boolean = userHasNoPermissions(false);
-      const userHasNoPermissionsExpectedResult = true;
-
-      expect(result).toEqual(userHasNoPermissionsExpectedResult);
-    });
-
-    test('returns false when user can CRUD', () => {
-      const result: boolean = userHasNoPermissions(true);
-      const userHasNoPermissionsExpectedResult = false;
-
-      expect(result).toEqual(userHasNoPermissionsExpectedResult);
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/helpers.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/helpers.tsx
deleted file mode 100644
index 3dbcf3b2425cc6..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/helpers.tsx
+++ /dev/null
@@ -1,273 +0,0 @@
-/*
- * 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 dateMath from '@elastic/datemath';
-import { get } from 'lodash/fp';
-import moment from 'moment';
-import memoizeOne from 'memoize-one';
-import { useLocation } from 'react-router-dom';
-
-import { RuleAlertAction, RuleType } from '../../../../common/detection_engine/types';
-import { isMlRule } from '../../../../common/machine_learning/helpers';
-import { transformRuleToAlertAction } from '../../../../common/detection_engine/transform_actions';
-import { Filter } from '../../../../../../../src/plugins/data/public';
-import { Rule } from '../../../containers/detection_engine/rules';
-import { FormData, FormHook, FormSchema } from '../../../shared_imports';
-import {
-  AboutStepRule,
-  AboutStepRuleDetails,
-  DefineStepRule,
-  IMitreEnterpriseAttack,
-  ScheduleStepRule,
-  ActionsStepRule,
-} from './types';
-
-export interface GetStepsData {
-  aboutRuleData: AboutStepRule;
-  modifiedAboutRuleDetailsData: AboutStepRuleDetails;
-  defineRuleData: DefineStepRule;
-  scheduleRuleData: ScheduleStepRule;
-  ruleActionsData: ActionsStepRule;
-}
-
-export const getStepsData = ({
-  rule,
-  detailsView = false,
-}: {
-  rule: Rule;
-  detailsView?: boolean;
-}): GetStepsData => {
-  const defineRuleData: DefineStepRule = getDefineStepsData(rule);
-  const aboutRuleData: AboutStepRule = getAboutStepsData(rule, detailsView);
-  const modifiedAboutRuleDetailsData: AboutStepRuleDetails = getModifiedAboutDetailsData(rule);
-  const scheduleRuleData: ScheduleStepRule = getScheduleStepsData(rule);
-  const ruleActionsData: ActionsStepRule = getActionsStepsData(rule);
-
-  return {
-    aboutRuleData,
-    modifiedAboutRuleDetailsData,
-    defineRuleData,
-    scheduleRuleData,
-    ruleActionsData,
-  };
-};
-
-export const getActionsStepsData = (
-  rule: Omit<Rule, 'actions'> & { actions: RuleAlertAction[] }
-): ActionsStepRule => {
-  const { enabled, throttle, meta, actions = [] } = rule;
-
-  return {
-    actions: actions?.map(transformRuleToAlertAction),
-    isNew: false,
-    throttle,
-    kibanaSiemAppUrl: meta?.kibana_siem_app_url,
-    enabled,
-  };
-};
-
-export const getDefineStepsData = (rule: Rule): DefineStepRule => ({
-  isNew: false,
-  ruleType: rule.type,
-  anomalyThreshold: rule.anomaly_threshold ?? 50,
-  machineLearningJobId: rule.machine_learning_job_id ?? '',
-  index: rule.index ?? [],
-  queryBar: {
-    query: { query: rule.query ?? '', language: rule.language ?? '' },
-    filters: (rule.filters ?? []) as Filter[],
-    saved_id: rule.saved_id,
-  },
-  timeline: {
-    id: rule.timeline_id ?? null,
-    title: rule.timeline_title ?? null,
-  },
-});
-
-export const getScheduleStepsData = (rule: Rule): ScheduleStepRule => {
-  const { interval, from } = rule;
-  const fromHumanizedValue = getHumanizedDuration(from, interval);
-
-  return {
-    isNew: false,
-    interval,
-    from: fromHumanizedValue,
-  };
-};
-
-export const getHumanizedDuration = (from: string, interval: string): string => {
-  const fromValue = dateMath.parse(from) ?? moment();
-  const intervalValue = dateMath.parse(`now-${interval}`) ?? moment();
-
-  const fromDuration = moment.duration(intervalValue.diff(fromValue));
-  const fromHumanize = `${Math.floor(fromDuration.asHours())}h`;
-
-  if (fromDuration.asSeconds() < 60) {
-    return `${Math.floor(fromDuration.asSeconds())}s`;
-  } else if (fromDuration.asMinutes() < 60) {
-    return `${Math.floor(fromDuration.asMinutes())}m`;
-  }
-
-  return fromHumanize;
-};
-
-export const getAboutStepsData = (rule: Rule, detailsView: boolean): AboutStepRule => {
-  const { name, description, note } = determineDetailsValue(rule, detailsView);
-  const {
-    references,
-    severity,
-    false_positives: falsePositives,
-    risk_score: riskScore,
-    tags,
-    threat,
-  } = rule;
-
-  return {
-    isNew: false,
-    name,
-    description,
-    note: note!,
-    references,
-    severity,
-    tags,
-    riskScore,
-    falsePositives,
-    threat: threat as IMitreEnterpriseAttack[],
-  };
-};
-
-export const determineDetailsValue = (
-  rule: Rule,
-  detailsView: boolean
-): Pick<Rule, 'name' | 'description' | 'note'> => {
-  const { name, description, note } = rule;
-  if (detailsView) {
-    return { name: '', description: '', note: '' };
-  }
-
-  return { name, description, note: note ?? '' };
-};
-
-export const getModifiedAboutDetailsData = (rule: Rule): AboutStepRuleDetails => ({
-  note: rule.note ?? '',
-  description: rule.description,
-});
-
-export const useQuery = () => new URLSearchParams(useLocation().search);
-
-export type PrePackagedRuleStatus =
-  | 'ruleInstalled'
-  | 'ruleNotInstalled'
-  | 'ruleNeedUpdate'
-  | 'someRuleUninstall'
-  | 'unknown';
-
-export const getPrePackagedRuleStatus = (
-  rulesInstalled: number | null,
-  rulesNotInstalled: number | null,
-  rulesNotUpdated: number | null
-): PrePackagedRuleStatus => {
-  if (
-    rulesNotInstalled != null &&
-    rulesInstalled === 0 &&
-    rulesNotInstalled > 0 &&
-    rulesNotUpdated === 0
-  ) {
-    return 'ruleNotInstalled';
-  } else if (
-    rulesInstalled != null &&
-    rulesInstalled > 0 &&
-    rulesNotInstalled === 0 &&
-    rulesNotUpdated === 0
-  ) {
-    return 'ruleInstalled';
-  } else if (
-    rulesInstalled != null &&
-    rulesNotInstalled != null &&
-    rulesInstalled > 0 &&
-    rulesNotInstalled > 0 &&
-    rulesNotUpdated === 0
-  ) {
-    return 'someRuleUninstall';
-  } else if (
-    rulesInstalled != null &&
-    rulesNotInstalled != null &&
-    rulesNotUpdated != null &&
-    rulesInstalled > 0 &&
-    rulesNotInstalled >= 0 &&
-    rulesNotUpdated > 0
-  ) {
-    return 'ruleNeedUpdate';
-  }
-  return 'unknown';
-};
-export const setFieldValue = (
-  form: FormHook<FormData>,
-  schema: FormSchema<FormData>,
-  defaultValues: unknown
-) =>
-  Object.keys(schema).forEach(key => {
-    const val = get(key, defaultValues);
-    if (val != null) {
-      form.setFieldValue(key, val);
-    }
-  });
-
-export const redirectToDetections = (
-  isSignalIndexExists: boolean | null,
-  isAuthenticated: boolean | null,
-  hasEncryptionKey: boolean | null
-) =>
-  isSignalIndexExists != null &&
-  isAuthenticated != null &&
-  hasEncryptionKey != null &&
-  (!isSignalIndexExists || !isAuthenticated || !hasEncryptionKey);
-
-export const getActionMessageRuleParams = (ruleType: RuleType): string[] => {
-  const commonRuleParamsKeys = [
-    'id',
-    'name',
-    'description',
-    'false_positives',
-    'rule_id',
-    'max_signals',
-    'risk_score',
-    'output_index',
-    'references',
-    'severity',
-    'timeline_id',
-    'timeline_title',
-    'threat',
-    'type',
-    'version',
-    // 'lists',
-  ];
-
-  const ruleParamsKeys = [
-    ...commonRuleParamsKeys,
-    ...(isMlRule(ruleType)
-      ? ['anomaly_threshold', 'machine_learning_job_id']
-      : ['index', 'filters', 'language', 'query', 'saved_id']),
-  ].sort();
-
-  return ruleParamsKeys;
-};
-
-export const getActionMessageParams = memoizeOne((ruleType: RuleType | undefined): string[] => {
-  if (!ruleType) {
-    return [];
-  }
-  const actionMessageRuleParams = getActionMessageRuleParams(ruleType);
-
-  return [
-    'state.signals_count',
-    '{context.results_link}',
-    ...actionMessageRuleParams.map(param => `context.rule.${param}`),
-  ];
-});
-
-// typed as null not undefined as the initial state for this value is null.
-export const userHasNoPermissions = (canUserCRUD: boolean | null): boolean =>
-  canUserCRUD != null ? !canUserCRUD : false;
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/index.test.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/index.test.tsx
deleted file mode 100644
index 3fa81ca3ced086..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/index.test.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-/*
- * 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 { RulesPage } from './index';
-import { useUserInfo } from '../components/user_info';
-import { usePrePackagedRules } from '../../../containers/detection_engine/rules';
-
-jest.mock('../components/user_info');
-jest.mock('../../../containers/detection_engine/rules');
-
-describe('RulesPage', () => {
-  beforeAll(() => {
-    (useUserInfo as jest.Mock).mockReturnValue({});
-    (usePrePackagedRules as jest.Mock).mockReturnValue({});
-  });
-  it('renders correctly', () => {
-    const wrapper = shallow(<RulesPage />);
-
-    expect(wrapper.find('AllRules')).toHaveLength(1);
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/index.tsx b/x-pack/plugins/siem/public/pages/detection_engine/rules/index.tsx
deleted file mode 100644
index 8831bc77691fa7..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/index.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-/*
- * 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 { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import React, { useCallback, useRef, useState } from 'react';
-import { Redirect } from 'react-router-dom';
-
-import { usePrePackagedRules, importRules } from '../../../containers/detection_engine/rules';
-import {
-  DETECTION_ENGINE_PAGE_NAME,
-  getDetectionEngineUrl,
-  getCreateRuleUrl,
-} from '../../../components/link_to/redirect_to_detection_engine';
-import { DetectionEngineHeaderPage } from '../components/detection_engine_header_page';
-import { WrapperPage } from '../../../components/wrapper_page';
-import { SpyRoute } from '../../../utils/route/spy_routes';
-
-import { useUserInfo } from '../components/user_info';
-import { AllRules } from './all';
-import { ImportDataModal } from '../../../components/import_data_modal';
-import { ReadOnlyCallOut } from './components/read_only_callout';
-import { UpdatePrePackagedRulesCallOut } from './components/pre_packaged_rules/update_callout';
-import { getPrePackagedRuleStatus, redirectToDetections, userHasNoPermissions } from './helpers';
-import * as i18n from './translations';
-
-type Func = (refreshPrePackagedRule?: boolean) => void;
-
-const RulesPageComponent: React.FC = () => {
-  const [showImportModal, setShowImportModal] = useState(false);
-  const refreshRulesData = useRef<null | Func>(null);
-  const {
-    loading,
-    isSignalIndexExists,
-    isAuthenticated,
-    hasEncryptionKey,
-    canUserCRUD,
-    hasIndexWrite,
-  } = useUserInfo();
-  const {
-    createPrePackagedRules,
-    loading: prePackagedRuleLoading,
-    loadingCreatePrePackagedRules,
-    refetchPrePackagedRulesStatus,
-    rulesCustomInstalled,
-    rulesInstalled,
-    rulesNotInstalled,
-    rulesNotUpdated,
-  } = usePrePackagedRules({
-    canUserCRUD,
-    hasIndexWrite,
-    isSignalIndexExists,
-    isAuthenticated,
-    hasEncryptionKey,
-  });
-  const prePackagedRuleStatus = getPrePackagedRuleStatus(
-    rulesInstalled,
-    rulesNotInstalled,
-    rulesNotUpdated
-  );
-
-  const handleRefreshRules = useCallback(async () => {
-    if (refreshRulesData.current != null) {
-      refreshRulesData.current(true);
-    }
-  }, [refreshRulesData]);
-
-  const handleCreatePrePackagedRules = useCallback(async () => {
-    if (createPrePackagedRules != null) {
-      await createPrePackagedRules();
-      handleRefreshRules();
-    }
-  }, [createPrePackagedRules, handleRefreshRules]);
-
-  const handleRefetchPrePackagedRulesStatus = useCallback(() => {
-    if (refetchPrePackagedRulesStatus != null) {
-      refetchPrePackagedRulesStatus();
-    }
-  }, [refetchPrePackagedRulesStatus]);
-
-  const handleSetRefreshRulesData = useCallback((refreshRule: Func) => {
-    refreshRulesData.current = refreshRule;
-  }, []);
-
-  if (redirectToDetections(isSignalIndexExists, isAuthenticated, hasEncryptionKey)) {
-    return <Redirect to={`/${DETECTION_ENGINE_PAGE_NAME}`} />;
-  }
-
-  return (
-    <>
-      {userHasNoPermissions(canUserCRUD) && <ReadOnlyCallOut />}
-      <ImportDataModal
-        checkBoxLabel={i18n.OVERWRITE_WITH_SAME_NAME}
-        closeModal={() => setShowImportModal(false)}
-        description={i18n.SELECT_RULE}
-        errorMessage={i18n.IMPORT_FAILED}
-        failedDetailed={i18n.IMPORT_FAILED_DETAILED}
-        importComplete={handleRefreshRules}
-        importData={importRules}
-        successMessage={i18n.SUCCESSFULLY_IMPORTED_RULES}
-        showCheckBox={true}
-        showModal={showImportModal}
-        submitBtnText={i18n.IMPORT_RULE_BTN_TITLE}
-        subtitle={i18n.INITIAL_PROMPT_TEXT}
-        title={i18n.IMPORT_RULE}
-      />
-      <WrapperPage>
-        <DetectionEngineHeaderPage
-          backOptions={{
-            href: getDetectionEngineUrl(),
-            text: i18n.BACK_TO_DETECTION_ENGINE,
-          }}
-          title={i18n.PAGE_TITLE}
-        >
-          <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false} wrap={true}>
-            {prePackagedRuleStatus === 'ruleNotInstalled' && (
-              <EuiFlexItem grow={false}>
-                <EuiButton
-                  iconType="indexOpen"
-                  isLoading={loadingCreatePrePackagedRules}
-                  isDisabled={userHasNoPermissions(canUserCRUD) || loading}
-                  onClick={handleCreatePrePackagedRules}
-                >
-                  {i18n.LOAD_PREPACKAGED_RULES}
-                </EuiButton>
-              </EuiFlexItem>
-            )}
-            {prePackagedRuleStatus === 'someRuleUninstall' && (
-              <EuiFlexItem grow={false}>
-                <EuiButton
-                  data-test-subj="reloadPrebuiltRulesBtn"
-                  iconType="plusInCircle"
-                  isLoading={loadingCreatePrePackagedRules}
-                  isDisabled={userHasNoPermissions(canUserCRUD) || loading}
-                  onClick={handleCreatePrePackagedRules}
-                >
-                  {i18n.RELOAD_MISSING_PREPACKAGED_RULES(rulesNotInstalled ?? 0)}
-                </EuiButton>
-              </EuiFlexItem>
-            )}
-            <EuiFlexItem grow={false}>
-              <EuiButton
-                iconType="importAction"
-                isDisabled={userHasNoPermissions(canUserCRUD) || loading}
-                onClick={() => {
-                  setShowImportModal(true);
-                }}
-              >
-                {i18n.IMPORT_RULE}
-              </EuiButton>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiButton
-                data-test-subj="create-new-rule"
-                fill
-                href={getCreateRuleUrl()}
-                iconType="plusInCircle"
-                isDisabled={userHasNoPermissions(canUserCRUD) || loading}
-              >
-                {i18n.ADD_NEW_RULE}
-              </EuiButton>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </DetectionEngineHeaderPage>
-        {prePackagedRuleStatus === 'ruleNeedUpdate' && (
-          <UpdatePrePackagedRulesCallOut
-            loading={loadingCreatePrePackagedRules}
-            numberOfUpdatedRules={rulesNotUpdated ?? 0}
-            updateRules={handleCreatePrePackagedRules}
-          />
-        )}
-        <AllRules
-          createPrePackagedRules={createPrePackagedRules}
-          loading={loading || prePackagedRuleLoading}
-          loadingCreatePrePackagedRules={loadingCreatePrePackagedRules}
-          hasNoPermissions={userHasNoPermissions(canUserCRUD)}
-          refetchPrePackagedRulesStatus={handleRefetchPrePackagedRulesStatus}
-          rulesCustomInstalled={rulesCustomInstalled}
-          rulesInstalled={rulesInstalled}
-          rulesNotInstalled={rulesNotInstalled}
-          rulesNotUpdated={rulesNotUpdated}
-          setRefreshRulesData={handleSetRefreshRulesData}
-        />
-      </WrapperPage>
-
-      <SpyRoute />
-    </>
-  );
-};
-
-export const RulesPage = React.memo(RulesPageComponent);
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/types.ts b/x-pack/plugins/siem/public/pages/detection_engine/rules/types.ts
deleted file mode 100644
index dcb5397d28f7ce..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/types.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-/*
- * 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 { RuleAlertAction, RuleType } from '../../../../common/detection_engine/types';
-import { AlertAction } from '../../../../../alerting/common';
-import { Filter } from '../../../../../../../src/plugins/data/common';
-import { FieldValueQueryBar } from './components/query_bar';
-import { FormData, FormHook } from '../../../shared_imports';
-import { FieldValueTimeline } from './components/pick_timeline';
-
-export interface EuiBasicTableSortTypes {
-  field: string;
-  direction: 'asc' | 'desc';
-}
-
-export interface EuiBasicTableOnChange {
-  page: {
-    index: number;
-    size: number;
-  };
-  sort?: EuiBasicTableSortTypes;
-}
-
-export enum RuleStep {
-  defineRule = 'define-rule',
-  aboutRule = 'about-rule',
-  scheduleRule = 'schedule-rule',
-  ruleActions = 'rule-actions',
-}
-export type RuleStatusType = 'passive' | 'active' | 'valid';
-
-export interface RuleStepData {
-  data: unknown;
-  isValid: boolean;
-}
-
-export interface RuleStepProps {
-  addPadding?: boolean;
-  descriptionColumns?: 'multi' | 'single' | 'singleSplit';
-  setStepData?: (step: RuleStep, data: unknown, isValid: boolean) => void;
-  isReadOnlyView: boolean;
-  isUpdateView?: boolean;
-  isLoading: boolean;
-  resizeParentContainer?: (height: number) => void;
-  setForm?: (step: RuleStep, form: FormHook<FormData>) => void;
-}
-
-interface StepRuleData {
-  isNew: boolean;
-}
-export interface AboutStepRule extends StepRuleData {
-  name: string;
-  description: string;
-  severity: string;
-  riskScore: number;
-  references: string[];
-  falsePositives: string[];
-  tags: string[];
-  threat: IMitreEnterpriseAttack[];
-  note: string;
-}
-
-export interface AboutStepRuleDetails {
-  note: string;
-  description: string;
-}
-
-export interface DefineStepRule extends StepRuleData {
-  anomalyThreshold: number;
-  index: string[];
-  machineLearningJobId: string;
-  queryBar: FieldValueQueryBar;
-  ruleType: RuleType;
-  timeline: FieldValueTimeline;
-}
-
-export interface ScheduleStepRule extends StepRuleData {
-  interval: string;
-  from: string;
-  to?: string;
-}
-
-export interface ActionsStepRule extends StepRuleData {
-  actions: AlertAction[];
-  enabled: boolean;
-  kibanaSiemAppUrl?: string;
-  throttle?: string | null;
-}
-
-export interface DefineStepRuleJson {
-  anomaly_threshold?: number;
-  index?: string[];
-  filters?: Filter[];
-  machine_learning_job_id?: string;
-  saved_id?: string;
-  query?: string;
-  language?: string;
-  timeline_id?: string;
-  timeline_title?: string;
-  type: RuleType;
-}
-
-export interface AboutStepRuleJson {
-  name: string;
-  description: string;
-  severity: string;
-  risk_score: number;
-  references: string[];
-  false_positives: string[];
-  tags: string[];
-  threat: IMitreEnterpriseAttack[];
-  note?: string;
-}
-
-export interface ScheduleStepRuleJson {
-  interval: string;
-  from: string;
-  to?: string;
-  meta?: unknown;
-}
-
-export interface ActionsStepRuleJson {
-  actions: RuleAlertAction[];
-  enabled: boolean;
-  throttle?: string | null;
-  meta?: unknown;
-}
-
-export interface IMitreAttack {
-  id: string;
-  name: string;
-  reference: string;
-}
-export interface IMitreEnterpriseAttack {
-  framework: string;
-  tactic: IMitreAttack;
-  technique: IMitreAttack[];
-}
diff --git a/x-pack/plugins/siem/public/pages/detection_engine/rules/utils.ts b/x-pack/plugins/siem/public/pages/detection_engine/rules/utils.ts
deleted file mode 100644
index f93ad94dd462b0..00000000000000
--- a/x-pack/plugins/siem/public/pages/detection_engine/rules/utils.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-/*
- * 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 { isEmpty } from 'lodash/fp';
-
-import { ChromeBreadcrumb } from '../../../../../../../src/core/public';
-import {
-  getDetectionEngineUrl,
-  getDetectionEngineTabUrl,
-  getRulesUrl,
-  getRuleDetailsUrl,
-  getCreateRuleUrl,
-  getEditRuleUrl,
-} from '../../../components/link_to/redirect_to_detection_engine';
-import * as i18nDetections from '../translations';
-import * as i18nRules from './translations';
-import { RouteSpyState } from '../../../utils/route/types';
-
-const getTabBreadcrumb = (pathname: string, search: string[]) => {
-  const tabPath = pathname.split('/')[2];
-
-  if (tabPath === 'alerts') {
-    return {
-      text: i18nDetections.ALERT,
-      href: `${getDetectionEngineTabUrl(tabPath)}${!isEmpty(search[0]) ? search[0] : ''}`,
-    };
-  }
-
-  if (tabPath === 'signals') {
-    return {
-      text: i18nDetections.SIGNAL,
-      href: `${getDetectionEngineTabUrl(tabPath)}${!isEmpty(search[0]) ? search[0] : ''}`,
-    };
-  }
-
-  if (tabPath === 'rules') {
-    return {
-      text: i18nRules.PAGE_TITLE,
-      href: `${getRulesUrl()}${!isEmpty(search[0]) ? search[0] : ''}`,
-    };
-  }
-};
-
-const isRuleCreatePage = (pathname: string) =>
-  pathname.includes('/rules') && pathname.includes('/create');
-
-const isRuleEditPage = (pathname: string) =>
-  pathname.includes('/rules') && pathname.includes('/edit');
-
-export const getBreadcrumbs = (params: RouteSpyState, search: string[]): ChromeBreadcrumb[] => {
-  let breadcrumb = [
-    {
-      text: i18nDetections.PAGE_TITLE,
-      href: `${getDetectionEngineUrl()}${!isEmpty(search[0]) ? search[0] : ''}`,
-    },
-  ];
-
-  const tabBreadcrumb = getTabBreadcrumb(params.pathName, search);
-
-  if (tabBreadcrumb) {
-    breadcrumb = [...breadcrumb, tabBreadcrumb];
-  }
-
-  if (params.detailName && params.state?.ruleName) {
-    breadcrumb = [
-      ...breadcrumb,
-      {
-        text: params.state.ruleName,
-        href: `${getRuleDetailsUrl(params.detailName)}${!isEmpty(search[1]) ? search[1] : ''}`,
-      },
-    ];
-  }
-
-  if (isRuleCreatePage(params.pathName)) {
-    breadcrumb = [
-      ...breadcrumb,
-      {
-        text: i18nRules.ADD_PAGE_TITLE,
-        href: `${getCreateRuleUrl()}${!isEmpty(search[1]) ? search[1] : ''}`,
-      },
-    ];
-  }
-
-  if (isRuleEditPage(params.pathName) && params.detailName && params.state?.ruleName) {
-    breadcrumb = [
-      ...breadcrumb,
-      {
-        text: i18nRules.EDIT_PAGE_TITLE,
-        href: `${getEditRuleUrl(params.detailName)}${!isEmpty(search[1]) ? search[1] : ''}`,
-      },
-    ];
-  }
-
-  return breadcrumb;
-};
diff --git a/x-pack/plugins/siem/public/pages/home/index.tsx b/x-pack/plugins/siem/public/pages/home/index.tsx
deleted file mode 100644
index a9e0962f16e6ed..00000000000000
--- a/x-pack/plugins/siem/public/pages/home/index.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-/*
- * 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, { useMemo } from 'react';
-import { Redirect, Route, Switch } from 'react-router-dom';
-import styled from 'styled-components';
-
-import { useThrottledResizeObserver } from '../../components/utils';
-import { DragDropContextWrapper } from '../../components/drag_and_drop/drag_drop_context_wrapper';
-import { Flyout } from '../../components/flyout';
-import { HeaderGlobal } from '../../components/header_global';
-import { HelpMenu } from '../../components/help_menu';
-import { LinkToPage } from '../../components/link_to';
-import { MlHostConditionalContainer } from '../../components/ml/conditional_links/ml_host_conditional_container';
-import { MlNetworkConditionalContainer } from '../../components/ml/conditional_links/ml_network_conditional_container';
-import { AutoSaveWarningMsg } from '../../components/timeline/auto_save_warning';
-import { UseUrlState } from '../../components/url_state';
-import { WithSource, indicesExistOrDataTemporarilyUnavailable } from '../../containers/source';
-import { SpyRoute } from '../../utils/route/spy_routes';
-import { useShowTimeline } from '../../utils/timeline/use_show_timeline';
-import { NotFoundPage } from '../404';
-import { DetectionEngineContainer } from '../detection_engine';
-import { HostsContainer } from '../hosts';
-import { NetworkContainer } from '../network';
-import { Overview } from '../overview';
-import { Case } from '../case';
-import { Timelines } from '../timelines';
-import { navTabs } from './home_navigations';
-import { SiemPageName } from './types';
-
-const WrappedByAutoSizer = styled.div`
-  height: 100%;
-`;
-WrappedByAutoSizer.displayName = 'WrappedByAutoSizer';
-
-const Main = styled.main`
-  height: 100%;
-`;
-Main.displayName = 'Main';
-
-const usersViewing = ['elastic']; // TODO: get the users viewing this timeline from Elasticsearch (persistance)
-
-/** the global Kibana navigation at the top of every page */
-const globalHeaderHeightPx = 48;
-
-const calculateFlyoutHeight = ({
-  globalHeaderSize,
-  windowHeight,
-}: {
-  globalHeaderSize: number;
-  windowHeight: number;
-}): number => Math.max(0, windowHeight - globalHeaderSize);
-
-export const HomePage: React.FC = () => {
-  const { ref: measureRef, height: windowHeight = 0 } = useThrottledResizeObserver();
-  const flyoutHeight = useMemo(
-    () =>
-      calculateFlyoutHeight({
-        globalHeaderSize: globalHeaderHeightPx,
-        windowHeight,
-      }),
-    [windowHeight]
-  );
-
-  const [showTimeline] = useShowTimeline();
-
-  return (
-    <WrappedByAutoSizer data-test-subj="wrapped-by-auto-sizer" ref={measureRef}>
-      <HeaderGlobal />
-
-      <Main data-test-subj="pageContainer">
-        <WithSource sourceId="default">
-          {({ browserFields, indexPattern, indicesExist }) => (
-            <DragDropContextWrapper browserFields={browserFields}>
-              <UseUrlState indexPattern={indexPattern} navTabs={navTabs} />
-              {indicesExistOrDataTemporarilyUnavailable(indicesExist) && showTimeline && (
-                <>
-                  <AutoSaveWarningMsg />
-                  <Flyout
-                    flyoutHeight={flyoutHeight}
-                    timelineId="timeline-1"
-                    usersViewing={usersViewing}
-                  />
-                </>
-              )}
-
-              <Switch>
-                <Redirect exact from="/" to={`/${SiemPageName.overview}`} />
-                <Route path={`/:pageName(${SiemPageName.overview})`} render={() => <Overview />} />
-                <Route
-                  path={`/:pageName(${SiemPageName.hosts})`}
-                  render={({ match }) => <HostsContainer url={match.url} />}
-                />
-                <Route
-                  path={`/:pageName(${SiemPageName.network})`}
-                  render={({ location, match }) => (
-                    <NetworkContainer location={location} url={match.url} />
-                  )}
-                />
-                <Route
-                  path={`/:pageName(${SiemPageName.detections})`}
-                  render={({ location, match }) => (
-                    <DetectionEngineContainer location={location} url={match.url} />
-                  )}
-                />
-                <Route
-                  path={`/:pageName(${SiemPageName.timelines})`}
-                  render={() => <Timelines />}
-                />
-                <Route path="/link-to" render={props => <LinkToPage {...props} />} />
-                <Route
-                  path="/ml-hosts"
-                  render={({ location, match }) => (
-                    <MlHostConditionalContainer location={location} url={match.url} />
-                  )}
-                />
-                <Route
-                  path="/ml-network"
-                  render={({ location, match }) => (
-                    <MlNetworkConditionalContainer location={location} url={match.url} />
-                  )}
-                />
-                <Route path={`/:pageName(${SiemPageName.case})`}>
-                  <Case />
-                </Route>
-                <Route render={() => <NotFoundPage />} />
-              </Switch>
-            </DragDropContextWrapper>
-          )}
-        </WithSource>
-      </Main>
-
-      <HelpMenu />
-
-      <SpyRoute />
-    </WrappedByAutoSizer>
-  );
-};
-
-HomePage.displayName = 'HomePage';
diff --git a/x-pack/plugins/siem/public/pages/home/types.ts b/x-pack/plugins/siem/public/pages/home/types.ts
deleted file mode 100644
index 6445ac91d9e131..00000000000000
--- a/x-pack/plugins/siem/public/pages/home/types.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/*
- * 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 { NavTab } from '../../components/navigation/types';
-
-export enum SiemPageName {
-  overview = 'overview',
-  hosts = 'hosts',
-  network = 'network',
-  detections = 'detections',
-  timelines = 'timelines',
-  case = 'case',
-}
-
-export type SiemNavTabKey =
-  | SiemPageName.overview
-  | SiemPageName.hosts
-  | SiemPageName.network
-  | SiemPageName.detections
-  | SiemPageName.timelines
-  | SiemPageName.case;
-
-export type SiemNavTab = Record<SiemNavTabKey, NavTab>;
diff --git a/x-pack/plugins/siem/public/pages/hosts/details/helpers.ts b/x-pack/plugins/siem/public/pages/hosts/details/helpers.ts
deleted file mode 100644
index 6da76f2fb5cac9..00000000000000
--- a/x-pack/plugins/siem/public/pages/hosts/details/helpers.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-/*
- * 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 { escapeQueryValue } from '../../../lib/keury';
-import { Filter } from '../../../../../../../src/plugins/data/public';
-
-/** Returns the kqlQueryExpression for the `Events` widget on the `Host Details` page */
-export const getHostDetailsEventsKqlQueryExpression = ({
-  filterQueryExpression,
-  hostName,
-}: {
-  filterQueryExpression: string;
-  hostName: string;
-}): string => {
-  if (filterQueryExpression.length) {
-    return `${filterQueryExpression}${
-      hostName.length ? ` and host.name: ${escapeQueryValue(hostName)}` : ''
-    }`;
-  } else {
-    return hostName.length ? `host.name: ${escapeQueryValue(hostName)}` : '';
-  }
-};
-
-export const getHostDetailsPageFilters = (hostName: string): Filter[] => [
-  {
-    meta: {
-      alias: null,
-      negate: false,
-      disabled: false,
-      type: 'phrase',
-      key: 'host.name',
-      value: hostName,
-      params: {
-        query: hostName,
-      },
-    },
-    query: {
-      match: {
-        'host.name': {
-          query: hostName,
-          type: 'phrase',
-        },
-      },
-    },
-  },
-];
diff --git a/x-pack/plugins/siem/public/pages/hosts/details/index.tsx b/x-pack/plugins/siem/public/pages/hosts/details/index.tsx
deleted file mode 100644
index afed0fab0ade7c..00000000000000
--- a/x-pack/plugins/siem/public/pages/hosts/details/index.tsx
+++ /dev/null
@@ -1,234 +0,0 @@
-/*
- * 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 { EuiHorizontalRule, EuiSpacer } from '@elastic/eui';
-import React, { useEffect, useCallback, useMemo } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
-import { StickyContainer } from 'react-sticky';
-
-import { UpdateDateRange } from '../../../components/charts/common';
-import { FiltersGlobal } from '../../../components/filters_global';
-import { HeaderPage } from '../../../components/header_page';
-import { LastEventTime } from '../../../components/last_event_time';
-import { AnomalyTableProvider } from '../../../components/ml/anomaly/anomaly_table_provider';
-import { hostToCriteria } from '../../../components/ml/criteria/host_to_criteria';
-import { hasMlUserPermissions } from '../../../../common/machine_learning/has_ml_user_permissions';
-import { useMlCapabilities } from '../../../components/ml_popover/hooks/use_ml_capabilities';
-import { scoreIntervalToDateTime } from '../../../components/ml/score/score_interval_to_datetime';
-import { SiemNavigation } from '../../../components/navigation';
-import { KpiHostsComponent } from '../../../components/page/hosts';
-import { HostOverview } from '../../../components/page/hosts/host_overview';
-import { manageQuery } from '../../../components/page/manage_query';
-import { SiemSearchBar } from '../../../components/search_bar';
-import { WrapperPage } from '../../../components/wrapper_page';
-import { HostOverviewByNameQuery } from '../../../containers/hosts/overview';
-import { KpiHostDetailsQuery } from '../../../containers/kpi_host_details';
-import { indicesExistOrDataTemporarilyUnavailable, WithSource } from '../../../containers/source';
-import { LastEventIndexKey } from '../../../graphql/types';
-import { useKibana } from '../../../lib/kibana';
-import { convertToBuildEsQuery } from '../../../lib/keury';
-import { inputsSelectors, State } from '../../../store';
-import { setHostDetailsTablesActivePageToZero as dispatchHostDetailsTablesActivePageToZero } from '../../../store/hosts/actions';
-import { setAbsoluteRangeDatePicker as dispatchAbsoluteRangeDatePicker } from '../../../store/inputs/actions';
-import { SpyRoute } from '../../../utils/route/spy_routes';
-import { esQuery, Filter } from '../../../../../../../src/plugins/data/public';
-
-import { HostsEmptyPage } from '../hosts_empty_page';
-import { HostDetailsTabs } from './details_tabs';
-import { navTabsHostDetails } from './nav_tabs';
-import { HostDetailsProps } from './types';
-import { type } from './utils';
-import { getHostDetailsPageFilters } from './helpers';
-
-const HostOverviewManage = manageQuery(HostOverview);
-const KpiHostDetailsManage = manageQuery(KpiHostsComponent);
-
-const HostDetailsComponent = React.memo<HostDetailsProps & PropsFromRedux>(
-  ({
-    filters,
-    from,
-    isInitializing,
-    query,
-    setAbsoluteRangeDatePicker,
-    setHostDetailsTablesActivePageToZero,
-    setQuery,
-    to,
-    detailName,
-    deleteQuery,
-    hostDetailsPagePath,
-  }) => {
-    useEffect(() => {
-      setHostDetailsTablesActivePageToZero();
-    }, [setHostDetailsTablesActivePageToZero, detailName]);
-    const capabilities = useMlCapabilities();
-    const kibana = useKibana();
-    const hostDetailsPageFilters: Filter[] = useMemo(() => getHostDetailsPageFilters(detailName), [
-      detailName,
-    ]);
-    const getFilters = () => [...hostDetailsPageFilters, ...filters];
-    const narrowDateRange = useCallback<UpdateDateRange>(
-      ({ x }) => {
-        if (!x) {
-          return;
-        }
-        const [min, max] = x;
-        setAbsoluteRangeDatePicker({ id: 'global', from: min, to: max });
-      },
-      [setAbsoluteRangeDatePicker]
-    );
-
-    return (
-      <>
-        <WithSource sourceId="default">
-          {({ indicesExist, indexPattern }) => {
-            const filterQuery = convertToBuildEsQuery({
-              config: esQuery.getEsQueryConfig(kibana.services.uiSettings),
-              indexPattern,
-              queries: [query],
-              filters: getFilters(),
-            });
-            return indicesExistOrDataTemporarilyUnavailable(indicesExist) ? (
-              <StickyContainer>
-                <FiltersGlobal>
-                  <SiemSearchBar indexPattern={indexPattern} id="global" />
-                </FiltersGlobal>
-
-                <WrapperPage>
-                  <HeaderPage
-                    border
-                    subtitle={
-                      <LastEventTime
-                        indexKey={LastEventIndexKey.hostDetails}
-                        hostName={detailName}
-                      />
-                    }
-                    title={detailName}
-                  />
-
-                  <HostOverviewByNameQuery
-                    sourceId="default"
-                    hostName={detailName}
-                    skip={isInitializing}
-                    startDate={from}
-                    endDate={to}
-                  >
-                    {({ hostOverview, loading, id, inspect, refetch }) => (
-                      <AnomalyTableProvider
-                        criteriaFields={hostToCriteria(hostOverview)}
-                        startDate={from}
-                        endDate={to}
-                        skip={isInitializing}
-                      >
-                        {({ isLoadingAnomaliesData, anomaliesData }) => (
-                          <HostOverviewManage
-                            id={id}
-                            inspect={inspect}
-                            refetch={refetch}
-                            setQuery={setQuery}
-                            data={hostOverview}
-                            anomaliesData={anomaliesData}
-                            isLoadingAnomaliesData={isLoadingAnomaliesData}
-                            loading={loading}
-                            startDate={from}
-                            endDate={to}
-                            narrowDateRange={(score, interval) => {
-                              const fromTo = scoreIntervalToDateTime(score, interval);
-                              setAbsoluteRangeDatePicker({
-                                id: 'global',
-                                from: fromTo.from,
-                                to: fromTo.to,
-                              });
-                            }}
-                          />
-                        )}
-                      </AnomalyTableProvider>
-                    )}
-                  </HostOverviewByNameQuery>
-
-                  <EuiHorizontalRule />
-
-                  <KpiHostDetailsQuery
-                    sourceId="default"
-                    filterQuery={filterQuery}
-                    skip={isInitializing}
-                    startDate={from}
-                    endDate={to}
-                  >
-                    {({ kpiHostDetails, id, inspect, loading, refetch }) => (
-                      <KpiHostDetailsManage
-                        data={kpiHostDetails}
-                        from={from}
-                        id={id}
-                        inspect={inspect}
-                        loading={loading}
-                        refetch={refetch}
-                        setQuery={setQuery}
-                        to={to}
-                        narrowDateRange={narrowDateRange}
-                      />
-                    )}
-                  </KpiHostDetailsQuery>
-
-                  <EuiSpacer />
-
-                  <SiemNavigation
-                    navTabs={navTabsHostDetails(detailName, hasMlUserPermissions(capabilities))}
-                  />
-
-                  <EuiSpacer />
-
-                  <HostDetailsTabs
-                    isInitializing={isInitializing}
-                    deleteQuery={deleteQuery}
-                    pageFilters={hostDetailsPageFilters}
-                    to={to}
-                    from={from}
-                    detailName={detailName}
-                    type={type}
-                    setQuery={setQuery}
-                    filterQuery={filterQuery}
-                    hostDetailsPagePath={hostDetailsPagePath}
-                    indexPattern={indexPattern}
-                    setAbsoluteRangeDatePicker={setAbsoluteRangeDatePicker}
-                  />
-                </WrapperPage>
-              </StickyContainer>
-            ) : (
-              <WrapperPage>
-                <HeaderPage border title={detailName} />
-
-                <HostsEmptyPage />
-              </WrapperPage>
-            );
-          }}
-        </WithSource>
-
-        <SpyRoute />
-      </>
-    );
-  }
-);
-HostDetailsComponent.displayName = 'HostDetailsComponent';
-
-export const makeMapStateToProps = () => {
-  const getGlobalQuerySelector = inputsSelectors.globalQuerySelector();
-  const getGlobalFiltersQuerySelector = inputsSelectors.globalFiltersQuerySelector();
-  return (state: State) => ({
-    query: getGlobalQuerySelector(state),
-    filters: getGlobalFiltersQuerySelector(state),
-  });
-};
-
-const mapDispatchToProps = {
-  setAbsoluteRangeDatePicker: dispatchAbsoluteRangeDatePicker,
-  setHostDetailsTablesActivePageToZero: dispatchHostDetailsTablesActivePageToZero,
-};
-
-const connector = connect(makeMapStateToProps, mapDispatchToProps);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-export const HostDetails = connector(HostDetailsComponent);
diff --git a/x-pack/plugins/siem/public/pages/hosts/details/nav_tabs.test.tsx b/x-pack/plugins/siem/public/pages/hosts/details/nav_tabs.test.tsx
deleted file mode 100644
index 6710edb7b20fae..00000000000000
--- a/x-pack/plugins/siem/public/pages/hosts/details/nav_tabs.test.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-/*
- * 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 { HostsTableType } from '../../../store/hosts/model';
-import { navTabsHostDetails } from './nav_tabs';
-
-describe('navTabsHostDetails', () => {
-  const mockHostName = 'mockHostName';
-  test('it should skip anomalies tab if without mlUserPermission', () => {
-    const tabs = navTabsHostDetails(mockHostName, false);
-    expect(tabs).toHaveProperty(HostsTableType.authentications);
-    expect(tabs).toHaveProperty(HostsTableType.uncommonProcesses);
-    expect(tabs).not.toHaveProperty(HostsTableType.anomalies);
-    expect(tabs).toHaveProperty(HostsTableType.events);
-  });
-
-  test('it should display anomalies tab if with mlUserPermission', () => {
-    const tabs = navTabsHostDetails(mockHostName, true);
-    expect(tabs).toHaveProperty(HostsTableType.authentications);
-    expect(tabs).toHaveProperty(HostsTableType.uncommonProcesses);
-    expect(tabs).toHaveProperty(HostsTableType.anomalies);
-    expect(tabs).toHaveProperty(HostsTableType.events);
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/hosts/details/nav_tabs.tsx b/x-pack/plugins/siem/public/pages/hosts/details/nav_tabs.tsx
deleted file mode 100644
index f828dc250f0d30..00000000000000
--- a/x-pack/plugins/siem/public/pages/hosts/details/nav_tabs.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-/*
- * 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 { omit } from 'lodash/fp';
-import * as i18n from './../translations';
-import { HostDetailsNavTab } from './types';
-import { HostsTableType } from '../../../store/hosts/model';
-import { SiemPageName } from '../../home/types';
-
-const getTabsOnHostDetailsUrl = (hostName: string, tabName: HostsTableType) =>
-  `#/${SiemPageName.hosts}/${hostName}/${tabName}`;
-
-export const navTabsHostDetails = (
-  hostName: string,
-  hasMlUserPermissions: boolean
-): HostDetailsNavTab => {
-  const hostDetailsNavTabs = {
-    [HostsTableType.authentications]: {
-      id: HostsTableType.authentications,
-      name: i18n.NAVIGATION_AUTHENTICATIONS_TITLE,
-      href: getTabsOnHostDetailsUrl(hostName, HostsTableType.authentications),
-      disabled: false,
-      urlKey: 'host',
-      isDetailPage: true,
-    },
-    [HostsTableType.uncommonProcesses]: {
-      id: HostsTableType.uncommonProcesses,
-      name: i18n.NAVIGATION_UNCOMMON_PROCESSES_TITLE,
-      href: getTabsOnHostDetailsUrl(hostName, HostsTableType.uncommonProcesses),
-      disabled: false,
-      urlKey: 'host',
-      isDetailPage: true,
-    },
-    [HostsTableType.anomalies]: {
-      id: HostsTableType.anomalies,
-      name: i18n.NAVIGATION_ANOMALIES_TITLE,
-      href: getTabsOnHostDetailsUrl(hostName, HostsTableType.anomalies),
-      disabled: false,
-      urlKey: 'host',
-      isDetailPage: true,
-    },
-    [HostsTableType.events]: {
-      id: HostsTableType.events,
-      name: i18n.NAVIGATION_EVENTS_TITLE,
-      href: getTabsOnHostDetailsUrl(hostName, HostsTableType.events),
-      disabled: false,
-      urlKey: 'host',
-      isDetailPage: true,
-    },
-    [HostsTableType.alerts]: {
-      id: HostsTableType.alerts,
-      name: i18n.NAVIGATION_ALERTS_TITLE,
-      href: getTabsOnHostDetailsUrl(hostName, HostsTableType.alerts),
-      disabled: false,
-      urlKey: 'host',
-    },
-  };
-
-  return hasMlUserPermissions
-    ? hostDetailsNavTabs
-    : omit(HostsTableType.anomalies, hostDetailsNavTabs);
-};
diff --git a/x-pack/plugins/siem/public/pages/hosts/details/types.ts b/x-pack/plugins/siem/public/pages/hosts/details/types.ts
deleted file mode 100644
index 03c8646bae1478..00000000000000
--- a/x-pack/plugins/siem/public/pages/hosts/details/types.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-/*
- * 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 { ActionCreator } from 'typescript-fsa';
-import { Query, IIndexPattern, Filter } from 'src/plugins/data/public';
-import { InputsModelId } from '../../../store/inputs/constants';
-import { HostComponentProps } from '../../../components/link_to/redirect_to_hosts';
-import { HostsTableType } from '../../../store/hosts/model';
-import { HostsQueryProps } from '../types';
-import { NavTab } from '../../../components/navigation/types';
-import { KeyHostsNavTabWithoutMlPermission } from '../navigation/types';
-import { hostsModel } from '../../../store';
-
-interface HostDetailsComponentReduxProps {
-  query: Query;
-  filters: Filter[];
-}
-
-interface HostBodyComponentDispatchProps {
-  setAbsoluteRangeDatePicker: ActionCreator<{
-    id: InputsModelId;
-    from: number;
-    to: number;
-  }>;
-  detailName: string;
-  hostDetailsPagePath: string;
-}
-
-interface HostDetailsComponentDispatchProps extends HostBodyComponentDispatchProps {
-  setHostDetailsTablesActivePageToZero: ActionCreator<null>;
-}
-
-export interface HostDetailsProps extends HostsQueryProps {
-  detailName: string;
-  hostDetailsPagePath: string;
-}
-
-export type HostDetailsComponentProps = HostDetailsComponentReduxProps &
-  HostDetailsComponentDispatchProps &
-  HostComponentProps &
-  HostsQueryProps;
-
-type KeyHostDetailsNavTabWithoutMlPermission = HostsTableType.authentications &
-  HostsTableType.uncommonProcesses &
-  HostsTableType.events;
-
-type KeyHostDetailsNavTabWithMlPermission = KeyHostsNavTabWithoutMlPermission &
-  HostsTableType.anomalies;
-
-type KeyHostDetailsNavTab =
-  | KeyHostDetailsNavTabWithoutMlPermission
-  | KeyHostDetailsNavTabWithMlPermission;
-
-export type HostDetailsNavTab = Record<KeyHostDetailsNavTab, NavTab>;
-
-export type HostDetailsTabsProps = HostBodyComponentDispatchProps &
-  HostsQueryProps & {
-    pageFilters?: Filter[];
-    filterQuery: string;
-    indexPattern: IIndexPattern;
-    type: hostsModel.HostsType;
-  };
-
-export type SetAbsoluteRangeDatePicker = ActionCreator<{
-  id: InputsModelId;
-  from: number;
-  to: number;
-}>;
diff --git a/x-pack/plugins/siem/public/pages/hosts/details/utils.ts b/x-pack/plugins/siem/public/pages/hosts/details/utils.ts
deleted file mode 100644
index af4ba8eb091e20..00000000000000
--- a/x-pack/plugins/siem/public/pages/hosts/details/utils.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-/*
- * 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 { get, isEmpty } from 'lodash/fp';
-
-import { ChromeBreadcrumb } from '../../../../../../../src/core/public';
-import { hostsModel } from '../../../store';
-import { HostsTableType } from '../../../store/hosts/model';
-import { getHostsUrl, getHostDetailsUrl } from '../../../components/link_to/redirect_to_hosts';
-
-import * as i18n from '../translations';
-import { HostRouteSpyState } from '../../../utils/route/types';
-
-export const type = hostsModel.HostsType.details;
-
-const TabNameMappedToI18nKey: Record<HostsTableType, string> = {
-  [HostsTableType.hosts]: i18n.NAVIGATION_ALL_HOSTS_TITLE,
-  [HostsTableType.authentications]: i18n.NAVIGATION_AUTHENTICATIONS_TITLE,
-  [HostsTableType.uncommonProcesses]: i18n.NAVIGATION_UNCOMMON_PROCESSES_TITLE,
-  [HostsTableType.anomalies]: i18n.NAVIGATION_ANOMALIES_TITLE,
-  [HostsTableType.events]: i18n.NAVIGATION_EVENTS_TITLE,
-  [HostsTableType.alerts]: i18n.NAVIGATION_ALERTS_TITLE,
-};
-
-export const getBreadcrumbs = (params: HostRouteSpyState, search: string[]): ChromeBreadcrumb[] => {
-  let breadcrumb = [
-    {
-      text: i18n.PAGE_TITLE,
-      href: `${getHostsUrl()}${!isEmpty(search[0]) ? search[0] : ''}`,
-    },
-  ];
-
-  if (params.detailName != null) {
-    breadcrumb = [
-      ...breadcrumb,
-      {
-        text: params.detailName,
-        href: `${getHostDetailsUrl(params.detailName)}${!isEmpty(search[1]) ? search[1] : ''}`,
-      },
-    ];
-  }
-  if (params.tabName != null) {
-    const tabName = get('tabName', params);
-    if (!tabName) return breadcrumb;
-
-    breadcrumb = [
-      ...breadcrumb,
-      {
-        text: TabNameMappedToI18nKey[tabName],
-        href: '',
-      },
-    ];
-  }
-  return breadcrumb;
-};
diff --git a/x-pack/plugins/siem/public/pages/hosts/index.tsx b/x-pack/plugins/siem/public/pages/hosts/index.tsx
deleted file mode 100644
index 699b1441905c3a..00000000000000
--- a/x-pack/plugins/siem/public/pages/hosts/index.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-/*
- * 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 { Redirect, Route, Switch, RouteComponentProps } from 'react-router-dom';
-
-import { HostDetails } from './details';
-import { HostsTableType } from '../../store/hosts/model';
-
-import { GlobalTime } from '../../containers/global_time';
-import { SiemPageName } from '../home/types';
-import { Hosts } from './hosts';
-import { hostsPagePath, hostDetailsPagePath } from './types';
-
-const getHostsTabPath = (pagePath: string) =>
-  `${pagePath}/:tabName(` +
-  `${HostsTableType.hosts}|` +
-  `${HostsTableType.authentications}|` +
-  `${HostsTableType.uncommonProcesses}|` +
-  `${HostsTableType.anomalies}|` +
-  `${HostsTableType.events}|` +
-  `${HostsTableType.alerts})`;
-
-const getHostDetailsTabPath = (pagePath: string) =>
-  `${hostDetailsPagePath}/:tabName(` +
-  `${HostsTableType.authentications}|` +
-  `${HostsTableType.uncommonProcesses}|` +
-  `${HostsTableType.anomalies}|` +
-  `${HostsTableType.events}|` +
-  `${HostsTableType.alerts})`;
-
-type Props = Partial<RouteComponentProps<{}>> & { url: string };
-
-export const HostsContainer = React.memo<Props>(({ url }) => (
-  <GlobalTime>
-    {({ to, from, setQuery, deleteQuery, isInitializing }) => (
-      <Switch>
-        <Route
-          strict
-          exact
-          path={getHostsTabPath(hostsPagePath)}
-          render={() => (
-            <Hosts
-              hostsPagePath={hostsPagePath}
-              from={from}
-              to={to}
-              setQuery={setQuery}
-              isInitializing={isInitializing}
-              deleteQuery={deleteQuery}
-            />
-          )}
-        />
-        <Route
-          strict
-          path={getHostDetailsTabPath(hostsPagePath)}
-          render={({
-            match: {
-              params: { detailName },
-            },
-          }) => (
-            <HostDetails
-              hostDetailsPagePath={hostDetailsPagePath}
-              detailName={detailName}
-              from={from}
-              to={to}
-              setQuery={setQuery}
-              isInitializing={isInitializing}
-              deleteQuery={deleteQuery}
-            />
-          )}
-        />
-        <Route
-          path={hostDetailsPagePath}
-          render={({
-            match: {
-              params: { detailName },
-            },
-            location: { search = '' },
-          }) => <Redirect to={`${url}/${detailName}/${HostsTableType.authentications}${search}`} />}
-        />
-        <Route
-          path={`${hostsPagePath}/`}
-          render={({ location: { search = '' } }) => (
-            <Redirect to={`/${SiemPageName.hosts}/${HostsTableType.hosts}${search}`} />
-          )}
-        />
-      </Switch>
-    )}
-  </GlobalTime>
-));
-
-HostsContainer.displayName = 'HostsContainer';
diff --git a/x-pack/plugins/siem/public/pages/hosts/nav_tabs.test.tsx b/x-pack/plugins/siem/public/pages/hosts/nav_tabs.test.tsx
deleted file mode 100644
index a42e83c835c61c..00000000000000
--- a/x-pack/plugins/siem/public/pages/hosts/nav_tabs.test.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-/*
- * 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 { HostsTableType } from '../../store/hosts/model';
-import { navTabsHosts } from './nav_tabs';
-
-describe('navTabsHosts', () => {
-  test('it should skip anomalies tab if without mlUserPermission', () => {
-    const tabs = navTabsHosts(false);
-    expect(tabs).toHaveProperty(HostsTableType.hosts);
-    expect(tabs).toHaveProperty(HostsTableType.authentications);
-    expect(tabs).toHaveProperty(HostsTableType.uncommonProcesses);
-    expect(tabs).not.toHaveProperty(HostsTableType.anomalies);
-    expect(tabs).toHaveProperty(HostsTableType.events);
-  });
-
-  test('it should display anomalies tab if with mlUserPermission', () => {
-    const tabs = navTabsHosts(true);
-    expect(tabs).toHaveProperty(HostsTableType.hosts);
-    expect(tabs).toHaveProperty(HostsTableType.authentications);
-    expect(tabs).toHaveProperty(HostsTableType.uncommonProcesses);
-    expect(tabs).toHaveProperty(HostsTableType.anomalies);
-    expect(tabs).toHaveProperty(HostsTableType.events);
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/hosts/nav_tabs.tsx b/x-pack/plugins/siem/public/pages/hosts/nav_tabs.tsx
deleted file mode 100644
index 4109feff099e06..00000000000000
--- a/x-pack/plugins/siem/public/pages/hosts/nav_tabs.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-/*
- * 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 { omit } from 'lodash/fp';
-import * as i18n from './translations';
-import { HostsTableType } from '../../store/hosts/model';
-import { HostsNavTab } from './navigation/types';
-import { SiemPageName } from '../home/types';
-
-const getTabsOnHostsUrl = (tabName: HostsTableType) => `#/${SiemPageName.hosts}/${tabName}`;
-
-export const navTabsHosts = (hasMlUserPermissions: boolean): HostsNavTab => {
-  const hostsNavTabs = {
-    [HostsTableType.hosts]: {
-      id: HostsTableType.hosts,
-      name: i18n.NAVIGATION_ALL_HOSTS_TITLE,
-      href: getTabsOnHostsUrl(HostsTableType.hosts),
-      disabled: false,
-      urlKey: 'host',
-    },
-    [HostsTableType.authentications]: {
-      id: HostsTableType.authentications,
-      name: i18n.NAVIGATION_AUTHENTICATIONS_TITLE,
-      href: getTabsOnHostsUrl(HostsTableType.authentications),
-      disabled: false,
-      urlKey: 'host',
-    },
-    [HostsTableType.uncommonProcesses]: {
-      id: HostsTableType.uncommonProcesses,
-      name: i18n.NAVIGATION_UNCOMMON_PROCESSES_TITLE,
-      href: getTabsOnHostsUrl(HostsTableType.uncommonProcesses),
-      disabled: false,
-      urlKey: 'host',
-    },
-    [HostsTableType.anomalies]: {
-      id: HostsTableType.anomalies,
-      name: i18n.NAVIGATION_ANOMALIES_TITLE,
-      href: getTabsOnHostsUrl(HostsTableType.anomalies),
-      disabled: false,
-      urlKey: 'host',
-    },
-    [HostsTableType.events]: {
-      id: HostsTableType.events,
-      name: i18n.NAVIGATION_EVENTS_TITLE,
-      href: getTabsOnHostsUrl(HostsTableType.events),
-      disabled: false,
-      urlKey: 'host',
-    },
-    [HostsTableType.alerts]: {
-      id: HostsTableType.alerts,
-      name: i18n.NAVIGATION_ALERTS_TITLE,
-      href: getTabsOnHostsUrl(HostsTableType.alerts),
-      disabled: false,
-      urlKey: 'host',
-    },
-  };
-
-  return hasMlUserPermissions ? hostsNavTabs : omit([HostsTableType.anomalies], hostsNavTabs);
-};
diff --git a/x-pack/plugins/siem/public/pages/hosts/navigation/alerts_query_tab_body.tsx b/x-pack/plugins/siem/public/pages/hosts/navigation/alerts_query_tab_body.tsx
deleted file mode 100644
index ec33834b1bf734..00000000000000
--- a/x-pack/plugins/siem/public/pages/hosts/navigation/alerts_query_tab_body.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-/*
- * 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, { useMemo } from 'react';
-
-import { Filter } from '../../../../../../../src/plugins/data/public';
-import { AlertsView } from '../../../components/alerts_viewer';
-import { AlertsComponentQueryProps } from './types';
-
-export const filterHostData: Filter[] = [
-  {
-    query: {
-      bool: {
-        filter: [
-          {
-            bool: {
-              should: [
-                {
-                  exists: {
-                    field: 'host.name',
-                  },
-                },
-              ],
-              minimum_should_match: 1,
-            },
-          },
-        ],
-      },
-    },
-    meta: {
-      alias: '',
-      disabled: false,
-      key: 'bool',
-      negate: false,
-      type: 'custom',
-      value:
-        '{"query": {"bool": {"filter": [{"bool": {"should": [{"exists": {"field": "host.name"}}],"minimum_should_match": 1}}]}}}',
-    },
-  },
-];
-export const HostAlertsQueryTabBody = React.memo((alertsProps: AlertsComponentQueryProps) => {
-  const { pageFilters, ...rest } = alertsProps;
-  const hostPageFilters = useMemo(
-    () => (pageFilters != null ? [...filterHostData, ...pageFilters] : filterHostData),
-    [pageFilters]
-  );
-
-  return <AlertsView {...rest} pageFilters={hostPageFilters} />;
-});
-
-HostAlertsQueryTabBody.displayName = 'HostAlertsQueryTabBody';
diff --git a/x-pack/plugins/siem/public/pages/hosts/navigation/types.ts b/x-pack/plugins/siem/public/pages/hosts/navigation/types.ts
deleted file mode 100644
index 20d4d4e463a7f0..00000000000000
--- a/x-pack/plugins/siem/public/pages/hosts/navigation/types.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-/*
- * 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 { ESTermQuery } from '../../../../common/typed_json';
-import { Filter, IIndexPattern } from '../../../../../../../src/plugins/data/public';
-import { NarrowDateRange } from '../../../components/ml/types';
-import { InspectQuery, Refetch } from '../../../store/inputs/model';
-
-import { HostsTableType, HostsType } from '../../../store/hosts/model';
-import { NavTab } from '../../../components/navigation/types';
-import { UpdateDateRange } from '../../../components/charts/common';
-
-export type KeyHostsNavTabWithoutMlPermission = HostsTableType.hosts &
-  HostsTableType.authentications &
-  HostsTableType.uncommonProcesses &
-  HostsTableType.events;
-
-type KeyHostsNavTabWithMlPermission = KeyHostsNavTabWithoutMlPermission & HostsTableType.anomalies;
-
-type KeyHostsNavTab = KeyHostsNavTabWithoutMlPermission | KeyHostsNavTabWithMlPermission;
-
-export type HostsNavTab = Record<KeyHostsNavTab, NavTab>;
-
-export type SetQuery = ({
-  id,
-  inspect,
-  loading,
-  refetch,
-}: {
-  id: string;
-  inspect: InspectQuery | null;
-  loading: boolean;
-  refetch: Refetch;
-}) => void;
-
-export interface QueryTabBodyProps {
-  type: HostsType;
-  startDate: number;
-  endDate: number;
-  filterQuery?: string | ESTermQuery;
-}
-
-export type HostsComponentsQueryProps = QueryTabBodyProps & {
-  deleteQuery?: ({ id }: { id: string }) => void;
-  indexPattern: IIndexPattern;
-  pageFilters?: Filter[];
-  skip: boolean;
-  setQuery: SetQuery;
-  updateDateRange?: UpdateDateRange;
-  narrowDateRange?: NarrowDateRange;
-};
-
-export type AlertsComponentQueryProps = HostsComponentsQueryProps & {
-  filterQuery: string;
-  pageFilters?: Filter[];
-};
-
-export type CommonChildren = (args: HostsComponentsQueryProps) => JSX.Element;
diff --git a/x-pack/plugins/siem/public/pages/hosts/types.ts b/x-pack/plugins/siem/public/pages/hosts/types.ts
deleted file mode 100644
index 408450aebebbdc..00000000000000
--- a/x-pack/plugins/siem/public/pages/hosts/types.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * 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 { IIndexPattern } from 'src/plugins/data/public';
-import { ActionCreator } from 'typescript-fsa';
-
-import { SiemPageName } from '../home/types';
-import { hostsModel } from '../../store';
-import { GlobalTimeArgs } from '../../containers/global_time';
-import { InputsModelId } from '../../store/inputs/constants';
-
-export const hostsPagePath = `/:pageName(${SiemPageName.hosts})`;
-export const hostDetailsPagePath = `${hostsPagePath}/:detailName`;
-
-export type HostsTabsProps = HostsComponentProps & {
-  filterQuery: string;
-  type: hostsModel.HostsType;
-  indexPattern: IIndexPattern;
-  setAbsoluteRangeDatePicker: ActionCreator<{
-    id: InputsModelId;
-    from: number;
-    to: number;
-  }>;
-};
-
-export type HostsQueryProps = GlobalTimeArgs;
-
-export type HostsComponentProps = HostsQueryProps & { hostsPagePath: string };
diff --git a/x-pack/plugins/siem/public/pages/network/index.tsx b/x-pack/plugins/siem/public/pages/network/index.tsx
deleted file mode 100644
index 412e51e74059e0..00000000000000
--- a/x-pack/plugins/siem/public/pages/network/index.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-/*
- * 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, { useMemo } from 'react';
-import { Redirect, Route, Switch, RouteComponentProps } from 'react-router-dom';
-
-import { useMlCapabilities } from '../../components/ml_popover/hooks/use_ml_capabilities';
-import { hasMlUserPermissions } from '../../../common/machine_learning/has_ml_user_permissions';
-import { FlowTarget } from '../../graphql/types';
-
-import { IPDetails } from './ip_details';
-import { Network } from './network';
-import { GlobalTime } from '../../containers/global_time';
-import { SiemPageName } from '../home/types';
-import { getNetworkRoutePath } from './navigation';
-import { NetworkRouteType } from './navigation/types';
-
-type Props = Partial<RouteComponentProps<{}>> & { url: string };
-
-const networkPagePath = `/:pageName(${SiemPageName.network})`;
-const ipDetailsPageBasePath = `${networkPagePath}/ip/:detailName`;
-
-const NetworkContainerComponent: React.FC<Props> = () => {
-  const capabilities = useMlCapabilities();
-  const capabilitiesFetched = capabilities.capabilitiesFetched;
-  const userHasMlUserPermissions = useMemo(() => hasMlUserPermissions(capabilities), [
-    capabilities,
-  ]);
-  const networkRoutePath = useMemo(
-    () => getNetworkRoutePath(networkPagePath, capabilitiesFetched, userHasMlUserPermissions),
-    [capabilitiesFetched, userHasMlUserPermissions]
-  );
-
-  return (
-    <GlobalTime>
-      {({ to, from, setQuery, deleteQuery, isInitializing }) => (
-        <Switch>
-          <Route
-            strict
-            path={networkRoutePath}
-            render={() => (
-              <Network
-                networkPagePath={networkPagePath}
-                to={to}
-                from={from}
-                setQuery={setQuery}
-                deleteQuery={deleteQuery}
-                isInitializing={isInitializing}
-                capabilitiesFetched={capabilities.capabilitiesFetched}
-                hasMlUserPermissions={userHasMlUserPermissions}
-              />
-            )}
-          />
-          <Route
-            path={`${ipDetailsPageBasePath}/:flowTarget`}
-            render={({
-              match: {
-                params: { detailName, flowTarget },
-              },
-            }) => (
-              <IPDetails
-                detailName={detailName}
-                flowTarget={flowTarget}
-                to={to}
-                from={from}
-                setQuery={setQuery}
-                deleteQuery={deleteQuery}
-                isInitializing={isInitializing}
-              />
-            )}
-          />
-          <Route
-            path={ipDetailsPageBasePath}
-            render={({
-              location: { search = '' },
-              match: {
-                params: { detailName },
-              },
-            }) => (
-              <Redirect
-                to={`/${SiemPageName.network}/ip/${detailName}/${FlowTarget.source}${search}`}
-              />
-            )}
-          />
-          <Route
-            path={`/${SiemPageName.network}/`}
-            render={({ location: { search = '' } }) => (
-              <Redirect to={`/${SiemPageName.network}/${NetworkRouteType.flows}${search}`} />
-            )}
-          />
-        </Switch>
-      )}
-    </GlobalTime>
-  );
-};
-
-export const NetworkContainer = React.memo(NetworkContainerComponent);
diff --git a/x-pack/plugins/siem/public/pages/network/ip_details/index.test.tsx b/x-pack/plugins/siem/public/pages/network/ip_details/index.test.tsx
deleted file mode 100644
index 02132d790796c5..00000000000000
--- a/x-pack/plugins/siem/public/pages/network/ip_details/index.test.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-/*
- * 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 { shallow } from 'enzyme';
-import { cloneDeep } from 'lodash/fp';
-import React from 'react';
-import { Router } from 'react-router-dom';
-import { MockedProvider } from 'react-apollo/test-utils';
-import { ActionCreator } from 'typescript-fsa';
-
-import '../../../mock/match_media';
-
-import { mocksSource } from '../../../containers/source/mock';
-import { FlowTarget } from '../../../graphql/types';
-import { apolloClientObservable, mockGlobalState, TestProviders } from '../../../mock';
-import { useMountAppended } from '../../../utils/use_mount_appended';
-import { createStore, State } from '../../../store';
-import { InputsModelId } from '../../../store/inputs/constants';
-
-import { IPDetailsComponent, IPDetails } from './index';
-
-type Action = 'PUSH' | 'POP' | 'REPLACE';
-const pop: Action = 'POP';
-
-type GlobalWithFetch = NodeJS.Global & { fetch: jest.Mock };
-
-// Test will fail because we will to need to mock some core services to make the test work
-// For now let's forget about SiemSearchBar and QueryBar
-jest.mock('../../../components/search_bar', () => ({
-  SiemSearchBar: () => null,
-}));
-jest.mock('../../../components/query_bar', () => ({
-  QueryBar: () => null,
-}));
-
-let localSource: Array<{
-  request: {};
-  result: {
-    data: {
-      source: {
-        status: {
-          indicesExist: boolean;
-        };
-      };
-    };
-  };
-}>;
-
-const getMockHistory = (ip: string) => ({
-  length: 2,
-  location: {
-    pathname: `/network/ip/${ip}`,
-    search: '',
-    state: '',
-    hash: '',
-  },
-  action: pop,
-  push: jest.fn(),
-  replace: jest.fn(),
-  go: jest.fn(),
-  goBack: jest.fn(),
-  goForward: jest.fn(),
-  block: jest.fn(),
-  createHref: jest.fn(),
-  listen: jest.fn(),
-});
-
-const to = new Date('2018-03-23T18:49:23.132Z').valueOf();
-const from = new Date('2018-03-24T03:33:52.253Z').valueOf();
-const getMockProps = (ip: string) => ({
-  to,
-  from,
-  isInitializing: false,
-  setQuery: jest.fn(),
-  query: { query: 'coolQueryhuh?', language: 'keury' },
-  filters: [],
-  flowTarget: FlowTarget.source,
-  history: getMockHistory(ip),
-  location: {
-    pathname: `/network/ip/${ip}`,
-    search: '',
-    state: '',
-    hash: '',
-  },
-  detailName: ip,
-  match: { params: { detailName: ip, search: '' }, isExact: true, path: '', url: '' },
-  setAbsoluteRangeDatePicker: (jest.fn() as unknown) as ActionCreator<{
-    id: InputsModelId;
-    from: number;
-    to: number;
-  }>,
-  setIpDetailsTablesActivePageToZero: (jest.fn() as unknown) as ActionCreator<void>,
-});
-
-describe('Ip Details', () => {
-  const mount = useMountAppended();
-
-  beforeAll(() => {
-    (global as GlobalWithFetch).fetch = jest.fn().mockImplementationOnce(() =>
-      Promise.resolve({
-        ok: true,
-        json: () => {
-          return null;
-        },
-      })
-    );
-  });
-
-  afterAll(() => {
-    delete (global as GlobalWithFetch).fetch;
-  });
-
-  const state: State = mockGlobalState;
-  let store = createStore(state, apolloClientObservable);
-
-  beforeEach(() => {
-    store = createStore(state, apolloClientObservable);
-    localSource = cloneDeep(mocksSource);
-  });
-
-  test('it renders', () => {
-    const wrapper = shallow(<IPDetailsComponent {...getMockProps('123.456.78.90')} />);
-    expect(wrapper.find('[data-test-subj="ip-details-page"]').exists()).toBe(true);
-  });
-
-  test('it matches the snapshot', () => {
-    const wrapper = shallow(<IPDetailsComponent {...getMockProps('123.456.78.90')} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  test('it renders ipv6 headline', async () => {
-    localSource[0].result.data.source.status.indicesExist = true;
-    const ip = 'fe80--24ce-f7ff-fede-a571';
-    const wrapper = mount(
-      <TestProviders store={store}>
-        <MockedProvider mocks={localSource} addTypename={false}>
-          <Router history={getMockHistory(ip)}>
-            <IPDetails {...getMockProps(ip)} />
-          </Router>
-        </MockedProvider>
-      </TestProviders>
-    );
-    // Why => https://github.com/apollographql/react-apollo/issues/1711
-    await new Promise(resolve => setTimeout(resolve));
-    wrapper.update();
-    expect(
-      wrapper
-        .find('[data-test-subj="ip-details-headline"] [data-test-subj="header-page-title"]')
-        .text()
-    ).toEqual('fe80::24ce:f7ff:fede:a571');
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/network/ip_details/index.tsx b/x-pack/plugins/siem/public/pages/network/ip_details/index.tsx
deleted file mode 100644
index 350d6e34c1c0f7..00000000000000
--- a/x-pack/plugins/siem/public/pages/network/ip_details/index.tsx
+++ /dev/null
@@ -1,298 +0,0 @@
-/*
- * 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 { EuiHorizontalRule, EuiSpacer, EuiFlexItem } from '@elastic/eui';
-import React, { useCallback, useEffect } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
-import { StickyContainer } from 'react-sticky';
-
-import { FiltersGlobal } from '../../../components/filters_global';
-import { HeaderPage } from '../../../components/header_page';
-import { LastEventTime } from '../../../components/last_event_time';
-import { AnomalyTableProvider } from '../../../components/ml/anomaly/anomaly_table_provider';
-import { networkToCriteria } from '../../../components/ml/criteria/network_to_criteria';
-import { scoreIntervalToDateTime } from '../../../components/ml/score/score_interval_to_datetime';
-import { AnomaliesNetworkTable } from '../../../components/ml/tables/anomalies_network_table';
-import { manageQuery } from '../../../components/page/manage_query';
-import { FlowTargetSelectConnected } from '../../../components/page/network/flow_target_select_connected';
-import { IpOverview } from '../../../components/page/network/ip_overview';
-import { SiemSearchBar } from '../../../components/search_bar';
-import { WrapperPage } from '../../../components/wrapper_page';
-import { IpOverviewQuery } from '../../../containers/ip_overview';
-import { indicesExistOrDataTemporarilyUnavailable, WithSource } from '../../../containers/source';
-import { FlowTargetSourceDest, LastEventIndexKey } from '../../../graphql/types';
-import { useKibana } from '../../../lib/kibana';
-import { decodeIpv6 } from '../../../lib/helpers';
-import { convertToBuildEsQuery } from '../../../lib/keury';
-import { ConditionalFlexGroup } from '../../../pages/network/navigation/conditional_flex_group';
-import { networkModel, State, inputsSelectors } from '../../../store';
-import { setAbsoluteRangeDatePicker as dispatchAbsoluteRangeDatePicker } from '../../../store/inputs/actions';
-import { setIpDetailsTablesActivePageToZero as dispatchIpDetailsTablesActivePageToZero } from '../../../store/network/actions';
-import { SpyRoute } from '../../../utils/route/spy_routes';
-import { NetworkEmptyPage } from '../network_empty_page';
-import { NetworkHttpQueryTable } from './network_http_query_table';
-import { NetworkTopCountriesQueryTable } from './network_top_countries_query_table';
-import { NetworkTopNFlowQueryTable } from './network_top_n_flow_query_table';
-import { TlsQueryTable } from './tls_query_table';
-import { IPDetailsComponentProps } from './types';
-import { UsersQueryTable } from './users_query_table';
-import { AnomaliesQueryTabBody } from '../../../containers/anomalies/anomalies_query_tab_body';
-import { esQuery } from '../../../../../../../src/plugins/data/public';
-
-export { getBreadcrumbs } from './utils';
-
-const IpOverviewManage = manageQuery(IpOverview);
-
-export const IPDetailsComponent: React.FC<IPDetailsComponentProps & PropsFromRedux> = ({
-  detailName,
-  filters,
-  flowTarget,
-  from,
-  isInitializing,
-  query,
-  setAbsoluteRangeDatePicker,
-  setIpDetailsTablesActivePageToZero,
-  setQuery,
-  to,
-}) => {
-  const type = networkModel.NetworkType.details;
-  const narrowDateRange = useCallback(
-    (score, interval) => {
-      const fromTo = scoreIntervalToDateTime(score, interval);
-      setAbsoluteRangeDatePicker({
-        id: 'global',
-        from: fromTo.from,
-        to: fromTo.to,
-      });
-    },
-    [setAbsoluteRangeDatePicker]
-  );
-  const kibana = useKibana();
-
-  useEffect(() => {
-    setIpDetailsTablesActivePageToZero();
-  }, [detailName, setIpDetailsTablesActivePageToZero]);
-
-  return (
-    <>
-      <WithSource sourceId="default" data-test-subj="ip-details-page">
-        {({ indicesExist, indexPattern }) => {
-          const ip = decodeIpv6(detailName);
-          const filterQuery = convertToBuildEsQuery({
-            config: esQuery.getEsQueryConfig(kibana.services.uiSettings),
-            indexPattern,
-            queries: [query],
-            filters,
-          });
-
-          return indicesExistOrDataTemporarilyUnavailable(indicesExist) ? (
-            <StickyContainer>
-              <FiltersGlobal>
-                <SiemSearchBar indexPattern={indexPattern} id="global" />
-              </FiltersGlobal>
-
-              <WrapperPage>
-                <HeaderPage
-                  border
-                  data-test-subj="ip-details-headline"
-                  draggableArguments={{ field: `${flowTarget}.ip`, value: ip }}
-                  subtitle={<LastEventTime indexKey={LastEventIndexKey.ipDetails} ip={ip} />}
-                  title={ip}
-                >
-                  <FlowTargetSelectConnected flowTarget={flowTarget} />
-                </HeaderPage>
-
-                <IpOverviewQuery
-                  skip={isInitializing}
-                  sourceId="default"
-                  filterQuery={filterQuery}
-                  type={type}
-                  ip={ip}
-                >
-                  {({ id, inspect, ipOverviewData, loading, refetch }) => (
-                    <AnomalyTableProvider
-                      criteriaFields={networkToCriteria(detailName, flowTarget)}
-                      startDate={from}
-                      endDate={to}
-                      skip={isInitializing}
-                    >
-                      {({ isLoadingAnomaliesData, anomaliesData }) => (
-                        <IpOverviewManage
-                          id={id}
-                          inspect={inspect}
-                          ip={ip}
-                          data={ipOverviewData}
-                          anomaliesData={anomaliesData}
-                          loading={loading}
-                          isLoadingAnomaliesData={isLoadingAnomaliesData}
-                          type={type}
-                          flowTarget={flowTarget}
-                          refetch={refetch}
-                          setQuery={setQuery}
-                          startDate={from}
-                          endDate={to}
-                          narrowDateRange={narrowDateRange}
-                        />
-                      )}
-                    </AnomalyTableProvider>
-                  )}
-                </IpOverviewQuery>
-
-                <EuiHorizontalRule />
-
-                <ConditionalFlexGroup direction="column">
-                  <EuiFlexItem>
-                    <NetworkTopNFlowQueryTable
-                      endDate={to}
-                      filterQuery={filterQuery}
-                      flowTarget={FlowTargetSourceDest.source}
-                      ip={ip}
-                      skip={isInitializing}
-                      startDate={from}
-                      type={type}
-                      setQuery={setQuery}
-                      indexPattern={indexPattern}
-                    />
-                  </EuiFlexItem>
-
-                  <EuiFlexItem>
-                    <NetworkTopNFlowQueryTable
-                      endDate={to}
-                      flowTarget={FlowTargetSourceDest.destination}
-                      filterQuery={filterQuery}
-                      ip={ip}
-                      skip={isInitializing}
-                      startDate={from}
-                      type={type}
-                      setQuery={setQuery}
-                      indexPattern={indexPattern}
-                    />
-                  </EuiFlexItem>
-                </ConditionalFlexGroup>
-
-                <EuiSpacer />
-
-                <ConditionalFlexGroup direction="column">
-                  <EuiFlexItem>
-                    <NetworkTopCountriesQueryTable
-                      endDate={to}
-                      filterQuery={filterQuery}
-                      flowTarget={FlowTargetSourceDest.source}
-                      ip={ip}
-                      skip={isInitializing}
-                      startDate={from}
-                      type={type}
-                      setQuery={setQuery}
-                      indexPattern={indexPattern}
-                    />
-                  </EuiFlexItem>
-
-                  <EuiFlexItem>
-                    <NetworkTopCountriesQueryTable
-                      endDate={to}
-                      flowTarget={FlowTargetSourceDest.destination}
-                      filterQuery={filterQuery}
-                      ip={ip}
-                      skip={isInitializing}
-                      startDate={from}
-                      type={type}
-                      setQuery={setQuery}
-                      indexPattern={indexPattern}
-                    />
-                  </EuiFlexItem>
-                </ConditionalFlexGroup>
-
-                <EuiSpacer />
-
-                <UsersQueryTable
-                  endDate={to}
-                  filterQuery={filterQuery}
-                  flowTarget={flowTarget}
-                  ip={ip}
-                  skip={isInitializing}
-                  startDate={from}
-                  type={type}
-                  setQuery={setQuery}
-                />
-
-                <EuiSpacer />
-
-                <NetworkHttpQueryTable
-                  endDate={to}
-                  filterQuery={filterQuery}
-                  ip={ip}
-                  skip={isInitializing}
-                  startDate={from}
-                  type={type}
-                  setQuery={setQuery}
-                />
-
-                <EuiSpacer />
-
-                <TlsQueryTable
-                  endDate={to}
-                  filterQuery={filterQuery}
-                  flowTarget={(flowTarget as unknown) as FlowTargetSourceDest}
-                  ip={ip}
-                  setQuery={setQuery}
-                  skip={isInitializing}
-                  startDate={from}
-                  type={type}
-                />
-
-                <EuiSpacer />
-
-                <AnomaliesQueryTabBody
-                  filterQuery={filterQuery}
-                  setQuery={setQuery}
-                  startDate={from}
-                  endDate={to}
-                  skip={isInitializing}
-                  ip={ip}
-                  type={type}
-                  flowTarget={flowTarget}
-                  narrowDateRange={narrowDateRange}
-                  hideHistogramIfEmpty={true}
-                  AnomaliesTableComponent={AnomaliesNetworkTable}
-                />
-              </WrapperPage>
-            </StickyContainer>
-          ) : (
-            <WrapperPage>
-              <HeaderPage border title={ip} />
-
-              <NetworkEmptyPage />
-            </WrapperPage>
-          );
-        }}
-      </WithSource>
-
-      <SpyRoute />
-    </>
-  );
-};
-IPDetailsComponent.displayName = 'IPDetailsComponent';
-
-const makeMapStateToProps = () => {
-  const getGlobalQuerySelector = inputsSelectors.globalQuerySelector();
-  const getGlobalFiltersQuerySelector = inputsSelectors.globalFiltersQuerySelector();
-
-  return (state: State) => ({
-    query: getGlobalQuerySelector(state),
-    filters: getGlobalFiltersQuerySelector(state),
-  });
-};
-
-const mapDispatchToProps = {
-  setAbsoluteRangeDatePicker: dispatchAbsoluteRangeDatePicker,
-  setIpDetailsTablesActivePageToZero: dispatchIpDetailsTablesActivePageToZero,
-};
-
-export const connector = connect(makeMapStateToProps, mapDispatchToProps);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-export const IPDetails = connector(React.memo(IPDetailsComponent));
diff --git a/x-pack/plugins/siem/public/pages/network/ip_details/types.ts b/x-pack/plugins/siem/public/pages/network/ip_details/types.ts
deleted file mode 100644
index 11c41fc74515e2..00000000000000
--- a/x-pack/plugins/siem/public/pages/network/ip_details/types.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-/*
- * 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 { IIndexPattern } from 'src/plugins/data/public';
-
-import { ESTermQuery } from '../../../../common/typed_json';
-import { NetworkType } from '../../../store/network/model';
-import { InspectQuery, Refetch } from '../../../store/inputs/model';
-import { FlowTarget, FlowTargetSourceDest } from '../../../graphql/types';
-import { GlobalTimeArgs } from '../../../containers/global_time';
-
-export const type = NetworkType.details;
-
-export type IPDetailsComponentProps = GlobalTimeArgs & {
-  detailName: string;
-  flowTarget: FlowTarget;
-};
-
-export interface OwnProps {
-  type: NetworkType;
-  startDate: number;
-  endDate: number;
-  filterQuery: string | ESTermQuery;
-  ip: string;
-  skip: boolean;
-  setQuery: ({
-    id,
-    inspect,
-    loading,
-    refetch,
-  }: {
-    id: string;
-    inspect: InspectQuery | null;
-    loading: boolean;
-    refetch: Refetch;
-  }) => void;
-}
-
-export type NetworkComponentsQueryProps = OwnProps & {
-  flowTarget: FlowTarget;
-};
-
-export type TlsQueryTableComponentProps = OwnProps & {
-  flowTarget: FlowTargetSourceDest;
-};
-
-export type NetworkWithIndexComponentsQueryTableProps = OwnProps & {
-  flowTarget: FlowTargetSourceDest;
-  indexPattern: IIndexPattern;
-};
diff --git a/x-pack/plugins/siem/public/pages/network/ip_details/utils.ts b/x-pack/plugins/siem/public/pages/network/ip_details/utils.ts
deleted file mode 100644
index 9d15d7ee250c99..00000000000000
--- a/x-pack/plugins/siem/public/pages/network/ip_details/utils.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-/*
- * 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 { get, isEmpty } from 'lodash/fp';
-
-import { ChromeBreadcrumb } from '../../../../../../../src/core/public';
-import { decodeIpv6 } from '../../../lib/helpers';
-import { getNetworkUrl, getIPDetailsUrl } from '../../../components/link_to/redirect_to_network';
-import { networkModel } from '../../../store/network';
-import * as i18n from '../translations';
-import { NetworkRouteType } from '../navigation/types';
-import { NetworkRouteSpyState } from '../../../utils/route/types';
-
-export const type = networkModel.NetworkType.details;
-const TabNameMappedToI18nKey: Record<NetworkRouteType, string> = {
-  [NetworkRouteType.alerts]: i18n.NAVIGATION_ALERTS_TITLE,
-  [NetworkRouteType.anomalies]: i18n.NAVIGATION_ANOMALIES_TITLE,
-  [NetworkRouteType.flows]: i18n.NAVIGATION_FLOWS_TITLE,
-  [NetworkRouteType.dns]: i18n.NAVIGATION_DNS_TITLE,
-  [NetworkRouteType.http]: i18n.NAVIGATION_HTTP_TITLE,
-  [NetworkRouteType.tls]: i18n.NAVIGATION_TLS_TITLE,
-};
-
-export const getBreadcrumbs = (
-  params: NetworkRouteSpyState,
-  search: string[]
-): ChromeBreadcrumb[] => {
-  let breadcrumb = [
-    {
-      text: i18n.PAGE_TITLE,
-      href: `${getNetworkUrl()}${!isEmpty(search[0]) ? search[0] : ''}`,
-    },
-  ];
-  if (params.detailName != null) {
-    breadcrumb = [
-      ...breadcrumb,
-      {
-        text: decodeIpv6(params.detailName),
-        href: `${getIPDetailsUrl(params.detailName, params.flowTarget)}${
-          !isEmpty(search[1]) ? search[1] : ''
-        }`,
-      },
-    ];
-  }
-
-  const tabName = get('tabName', params);
-  if (!tabName) return breadcrumb;
-
-  breadcrumb = [
-    ...breadcrumb,
-    {
-      text: TabNameMappedToI18nKey[tabName],
-      href: '',
-    },
-  ];
-  return breadcrumb;
-};
diff --git a/x-pack/plugins/siem/public/pages/network/navigation/alerts_query_tab_body.tsx b/x-pack/plugins/siem/public/pages/network/navigation/alerts_query_tab_body.tsx
deleted file mode 100644
index 4c4f6c06ce1e1a..00000000000000
--- a/x-pack/plugins/siem/public/pages/network/navigation/alerts_query_tab_body.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-/*
- * 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 { Filter } from '../../../../../../../src/plugins/data/common/es_query';
-import { AlertsView } from '../../../components/alerts_viewer';
-import { NetworkComponentQueryProps } from './types';
-
-export const filterNetworkData: Filter[] = [
-  {
-    query: {
-      bool: {
-        filter: [
-          {
-            bool: {
-              should: [
-                {
-                  bool: {
-                    should: [
-                      {
-                        exists: {
-                          field: 'source.ip',
-                        },
-                      },
-                    ],
-                    minimum_should_match: 1,
-                  },
-                },
-                {
-                  bool: {
-                    should: [
-                      {
-                        exists: {
-                          field: 'destination.ip',
-                        },
-                      },
-                    ],
-                    minimum_should_match: 1,
-                  },
-                },
-              ],
-              minimum_should_match: 1,
-            },
-          },
-        ],
-      },
-    },
-    meta: {
-      alias: '',
-      disabled: false,
-      key: 'bool',
-      negate: false,
-      type: 'custom',
-      value:
-        '{"bool":{"filter":[{"bool":{"should":[{"bool":{"should":[{"exists":{"field": "source.ip"}}],"minimum_should_match":1}},{"bool":{"should":[{"exists":{"field": "destination.ip"}}],"minimum_should_match":1}}],"minimum_should_match":1}}]}}',
-    },
-  },
-];
-
-export const NetworkAlertsQueryTabBody = React.memo((alertsProps: NetworkComponentQueryProps) => (
-  <AlertsView {...alertsProps} pageFilters={filterNetworkData} />
-));
-
-NetworkAlertsQueryTabBody.displayName = 'NetworkAlertsQueryTabBody';
diff --git a/x-pack/plugins/siem/public/pages/network/navigation/types.ts b/x-pack/plugins/siem/public/pages/network/navigation/types.ts
deleted file mode 100644
index ee03bff99b9677..00000000000000
--- a/x-pack/plugins/siem/public/pages/network/navigation/types.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-/*
- * 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 { ESTermQuery } from '../../../../common/typed_json';
-import { IIndexPattern } from '../../../../../../../src/plugins/data/common';
-
-import { NavTab } from '../../../components/navigation/types';
-import { FlowTargetSourceDest } from '../../../graphql/types';
-import { networkModel } from '../../../store';
-import { GlobalTimeArgs } from '../../../containers/global_time';
-
-import { SetAbsoluteRangeDatePicker } from '../types';
-import { NarrowDateRange } from '../../../components/ml/types';
-
-interface QueryTabBodyProps extends Pick<GlobalTimeArgs, 'setQuery' | 'deleteQuery'> {
-  skip: boolean;
-  type: networkModel.NetworkType;
-  startDate: number;
-  endDate: number;
-  filterQuery?: string | ESTermQuery;
-  narrowDateRange?: NarrowDateRange;
-}
-
-export type NetworkComponentQueryProps = QueryTabBodyProps;
-
-export type IPsQueryTabBodyProps = QueryTabBodyProps & {
-  indexPattern: IIndexPattern;
-  flowTarget: FlowTargetSourceDest;
-};
-
-export type TlsQueryTabBodyProps = QueryTabBodyProps & {
-  flowTarget: FlowTargetSourceDest;
-  ip?: string;
-};
-
-export type HttpQueryTabBodyProps = QueryTabBodyProps & {
-  ip?: string;
-};
-
-export type NetworkRoutesProps = GlobalTimeArgs & {
-  networkPagePath: string;
-  type: networkModel.NetworkType;
-  filterQuery?: string | ESTermQuery;
-  indexPattern: IIndexPattern;
-  setAbsoluteRangeDatePicker: SetAbsoluteRangeDatePicker;
-};
-
-export type KeyNetworkNavTabWithoutMlPermission = NetworkRouteType.dns &
-  NetworkRouteType.flows &
-  NetworkRouteType.http &
-  NetworkRouteType.tls &
-  NetworkRouteType.alerts;
-
-type KeyNetworkNavTabWithMlPermission = KeyNetworkNavTabWithoutMlPermission &
-  NetworkRouteType.anomalies;
-
-type KeyNetworkNavTab = KeyNetworkNavTabWithoutMlPermission | KeyNetworkNavTabWithMlPermission;
-
-export type NetworkNavTab = Record<KeyNetworkNavTab, NavTab>;
-
-export enum NetworkRouteType {
-  flows = 'flows',
-  dns = 'dns',
-  anomalies = 'anomalies',
-  tls = 'tls',
-  http = 'http',
-  alerts = 'alerts',
-}
-
-export type GetNetworkRoutePath = (
-  pagePath: string,
-  capabilitiesFetched: boolean,
-  hasMlUserPermission: boolean
-) => string;
diff --git a/x-pack/plugins/siem/public/pages/network/network.tsx b/x-pack/plugins/siem/public/pages/network/network.tsx
deleted file mode 100644
index 698f51efbb451c..00000000000000
--- a/x-pack/plugins/siem/public/pages/network/network.tsx
+++ /dev/null
@@ -1,199 +0,0 @@
-/*
- * 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 { EuiSpacer } from '@elastic/eui';
-import React, { useCallback, useMemo } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
-import { useParams } from 'react-router-dom';
-import { StickyContainer } from 'react-sticky';
-
-import { esQuery } from '../../../../../../src/plugins/data/public';
-import { UpdateDateRange } from '../../components/charts/common';
-import { EmbeddedMap } from '../../components/embeddables/embedded_map';
-import { FiltersGlobal } from '../../components/filters_global';
-import { HeaderPage } from '../../components/header_page';
-import { LastEventTime } from '../../components/last_event_time';
-import { SiemNavigation } from '../../components/navigation';
-import { manageQuery } from '../../components/page/manage_query';
-import { KpiNetworkComponent } from '../../components/page/network';
-import { SiemSearchBar } from '../../components/search_bar';
-import { WrapperPage } from '../../components/wrapper_page';
-import { KpiNetworkQuery } from '../../containers/kpi_network';
-import { indicesExistOrDataTemporarilyUnavailable, WithSource } from '../../containers/source';
-import { LastEventIndexKey } from '../../graphql/types';
-import { useKibana } from '../../lib/kibana';
-import { convertToBuildEsQuery } from '../../lib/keury';
-import { networkModel, State, inputsSelectors } from '../../store';
-import { setAbsoluteRangeDatePicker as dispatchSetAbsoluteRangeDatePicker } from '../../store/inputs/actions';
-import { SpyRoute } from '../../utils/route/spy_routes';
-import { navTabsNetwork, NetworkRoutes, NetworkRoutesLoading } from './navigation';
-import { filterNetworkData } from './navigation/alerts_query_tab_body';
-import { NetworkEmptyPage } from './network_empty_page';
-import * as i18n from './translations';
-import { NetworkComponentProps } from './types';
-import { NetworkRouteType } from './navigation/types';
-
-const KpiNetworkComponentManage = manageQuery(KpiNetworkComponent);
-const sourceId = 'default';
-
-const NetworkComponent = React.memo<NetworkComponentProps & PropsFromRedux>(
-  ({
-    filters,
-    query,
-    setAbsoluteRangeDatePicker,
-    networkPagePath,
-    to,
-    from,
-    setQuery,
-    isInitializing,
-    hasMlUserPermissions,
-    capabilitiesFetched,
-  }) => {
-    const kibana = useKibana();
-    const { tabName } = useParams();
-
-    const tabsFilters = useMemo(() => {
-      if (tabName === NetworkRouteType.alerts) {
-        return filters.length > 0 ? [...filters, ...filterNetworkData] : filterNetworkData;
-      }
-      return filters;
-    }, [tabName, filters]);
-
-    const narrowDateRange = useCallback<UpdateDateRange>(
-      ({ x }) => {
-        if (!x) {
-          return;
-        }
-        const [min, max] = x;
-        setAbsoluteRangeDatePicker({ id: 'global', from: min, to: max });
-      },
-      [setAbsoluteRangeDatePicker]
-    );
-
-    return (
-      <>
-        <WithSource sourceId={sourceId}>
-          {({ indicesExist, indexPattern }) => {
-            const filterQuery = convertToBuildEsQuery({
-              config: esQuery.getEsQueryConfig(kibana.services.uiSettings),
-              indexPattern,
-              queries: [query],
-              filters,
-            });
-            const tabsFilterQuery = convertToBuildEsQuery({
-              config: esQuery.getEsQueryConfig(kibana.services.uiSettings),
-              indexPattern,
-              queries: [query],
-              filters: tabsFilters,
-            });
-
-            return indicesExistOrDataTemporarilyUnavailable(indicesExist) ? (
-              <StickyContainer>
-                <FiltersGlobal>
-                  <SiemSearchBar indexPattern={indexPattern} id="global" />
-                </FiltersGlobal>
-
-                <WrapperPage>
-                  <HeaderPage
-                    border
-                    subtitle={<LastEventTime indexKey={LastEventIndexKey.network} />}
-                    title={i18n.PAGE_TITLE}
-                  />
-
-                  <EmbeddedMap
-                    query={query}
-                    filters={filters}
-                    startDate={from}
-                    endDate={to}
-                    setQuery={setQuery}
-                  />
-
-                  <EuiSpacer />
-
-                  <KpiNetworkQuery
-                    endDate={to}
-                    filterQuery={filterQuery}
-                    skip={isInitializing}
-                    sourceId={sourceId}
-                    startDate={from}
-                  >
-                    {({ kpiNetwork, loading, id, inspect, refetch }) => (
-                      <KpiNetworkComponentManage
-                        id={id}
-                        inspect={inspect}
-                        setQuery={setQuery}
-                        refetch={refetch}
-                        data={kpiNetwork}
-                        loading={loading}
-                        from={from}
-                        to={to}
-                        narrowDateRange={narrowDateRange}
-                      />
-                    )}
-                  </KpiNetworkQuery>
-
-                  {capabilitiesFetched && !isInitializing ? (
-                    <>
-                      <EuiSpacer />
-
-                      <SiemNavigation navTabs={navTabsNetwork(hasMlUserPermissions)} />
-
-                      <EuiSpacer />
-
-                      <NetworkRoutes
-                        filterQuery={tabsFilterQuery}
-                        from={from}
-                        isInitializing={isInitializing}
-                        indexPattern={indexPattern}
-                        setQuery={setQuery}
-                        setAbsoluteRangeDatePicker={setAbsoluteRangeDatePicker}
-                        type={networkModel.NetworkType.page}
-                        to={to}
-                        networkPagePath={networkPagePath}
-                      />
-                    </>
-                  ) : (
-                    <NetworkRoutesLoading />
-                  )}
-
-                  <EuiSpacer />
-                </WrapperPage>
-              </StickyContainer>
-            ) : (
-              <WrapperPage>
-                <HeaderPage border title={i18n.PAGE_TITLE} />
-                <NetworkEmptyPage />
-              </WrapperPage>
-            );
-          }}
-        </WithSource>
-
-        <SpyRoute />
-      </>
-    );
-  }
-);
-NetworkComponent.displayName = 'NetworkComponent';
-
-const makeMapStateToProps = () => {
-  const getGlobalQuerySelector = inputsSelectors.globalQuerySelector();
-  const getGlobalFiltersQuerySelector = inputsSelectors.globalFiltersQuerySelector();
-  const mapStateToProps = (state: State) => ({
-    query: getGlobalQuerySelector(state),
-    filters: getGlobalFiltersQuerySelector(state),
-  });
-  return mapStateToProps;
-};
-
-const mapDispatchToProps = {
-  setAbsoluteRangeDatePicker: dispatchSetAbsoluteRangeDatePicker,
-};
-
-const connector = connect(makeMapStateToProps, mapDispatchToProps);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-export const Network = connector(NetworkComponent);
diff --git a/x-pack/plugins/siem/public/pages/network/types.ts b/x-pack/plugins/siem/public/pages/network/types.ts
deleted file mode 100644
index 01d3fb6b48c631..00000000000000
--- a/x-pack/plugins/siem/public/pages/network/types.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
- * 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 { RouteComponentProps } from 'react-router-dom';
-import { ActionCreator } from 'typescript-fsa';
-import { InputsModelId } from '../../store/inputs/constants';
-import { GlobalTimeArgs } from '../../containers/global_time';
-
-export type SetAbsoluteRangeDatePicker = ActionCreator<{
-  id: InputsModelId;
-  from: number;
-  to: number;
-}>;
-
-export type NetworkComponentProps = Partial<RouteComponentProps<{}>> &
-  GlobalTimeArgs & {
-    networkPagePath: string;
-    hasMlUserPermissions: boolean;
-    capabilitiesFetched: boolean;
-  };
diff --git a/x-pack/plugins/siem/public/pages/overview/alerts_by_category/index.test.tsx b/x-pack/plugins/siem/public/pages/overview/alerts_by_category/index.test.tsx
deleted file mode 100644
index bd9743bdccb4b6..00000000000000
--- a/x-pack/plugins/siem/public/pages/overview/alerts_by_category/index.test.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-/*
- * 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.
- */
-
-/* eslint-disable react/display-name */
-
-import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
-import { mount, ReactWrapper } from 'enzyme';
-import React from 'react';
-import { ThemeProvider } from 'styled-components';
-
-import { useQuery } from '../../../containers/matrix_histogram';
-import { wait } from '../../../lib/helpers';
-import { mockIndexPattern, TestProviders } from '../../../mock';
-
-import { AlertsByCategory } from '.';
-
-jest.mock('../../../lib/kibana');
-
-jest.mock('../../../containers/matrix_histogram', () => {
-  return {
-    useQuery: jest.fn(),
-  };
-});
-
-const theme = () => ({ eui: { ...euiDarkVars, euiSizeL: '24px' }, darkMode: true });
-const from = new Date('2020-03-31T06:00:00.000Z').valueOf();
-const to = new Date('2019-03-31T06:00:00.000Z').valueOf();
-
-describe('Alerts by category', () => {
-  let wrapper: ReactWrapper;
-
-  describe('before loading data', () => {
-    beforeAll(async () => {
-      (useQuery as jest.Mock).mockReturnValue({
-        data: null,
-        loading: false,
-        inspect: false,
-        totalCount: null,
-      });
-
-      wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <TestProviders>
-            <AlertsByCategory
-              deleteQuery={jest.fn()}
-              filters={[]}
-              from={from}
-              indexPattern={mockIndexPattern}
-              setQuery={jest.fn()}
-              to={to}
-            />
-          </TestProviders>
-        </ThemeProvider>
-      );
-
-      await wait();
-      wrapper.update();
-    });
-
-    test('it renders the expected title', () => {
-      expect(wrapper.find('[data-test-subj="header-section-title"]').text()).toEqual(
-        'External alert count'
-      );
-    });
-
-    test('it renders the subtitle (to prevent layout thrashing)', () => {
-      expect(wrapper.find('[data-test-subj="header-panel-subtitle"]').exists()).toBe(true);
-    });
-
-    test('it renders the expected filter fields', () => {
-      const expectedOptions = ['event.category', 'event.module'];
-
-      expectedOptions.forEach(option => {
-        expect(wrapper.find(`option[value="${option}"]`).text()).toEqual(option);
-      });
-    });
-
-    test('it renders the `View alerts` button', () => {
-      expect(wrapper.find('[data-test-subj="view-alerts"]').exists()).toBe(true);
-    });
-
-    test('it does NOT render the bar chart when data is not available', () => {
-      expect(wrapper.find(`.echChart`).exists()).toBe(false);
-    });
-  });
-
-  describe('after loading data', () => {
-    beforeAll(async () => {
-      (useQuery as jest.Mock).mockReturnValue({
-        data: [
-          { x: 1, y: 2, g: 'g1' },
-          { x: 2, y: 4, g: 'g1' },
-          { x: 3, y: 6, g: 'g1' },
-          { x: 1, y: 1, g: 'g2' },
-          { x: 2, y: 3, g: 'g2' },
-          { x: 3, y: 5, g: 'g2' },
-        ],
-        loading: false,
-        inspect: false,
-        totalCount: 6,
-      });
-
-      wrapper = mount(
-        <ThemeProvider theme={theme}>
-          <TestProviders>
-            <AlertsByCategory
-              deleteQuery={jest.fn()}
-              filters={[]}
-              from={from}
-              indexPattern={mockIndexPattern}
-              setQuery={jest.fn()}
-              to={to}
-            />
-          </TestProviders>
-        </ThemeProvider>
-      );
-
-      await wait();
-      wrapper.update();
-    });
-
-    test('it renders the expected subtitle', () => {
-      expect(wrapper.find('[data-test-subj="header-panel-subtitle"]').text()).toEqual(
-        'Showing: 6 external alerts'
-      );
-    });
-
-    test('it renders the bar chart when data is available', () => {
-      expect(wrapper.find(`.echChart`).exists()).toBe(true);
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/overview/alerts_by_category/index.tsx b/x-pack/plugins/siem/public/pages/overview/alerts_by_category/index.tsx
deleted file mode 100644
index a1936cf9221f85..00000000000000
--- a/x-pack/plugins/siem/public/pages/overview/alerts_by_category/index.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-/*
- * 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 { EuiButton } from '@elastic/eui';
-import numeral from '@elastic/numeral';
-import React, { useEffect, useMemo } from 'react';
-import { Position } from '@elastic/charts';
-
-import { DEFAULT_NUMBER_FORMAT } from '../../../../common/constants';
-import { SHOWING, UNIT } from '../../../components/alerts_viewer/translations';
-import { getDetectionEngineAlertUrl } from '../../../components/link_to/redirect_to_detection_engine';
-import { MatrixHistogramContainer } from '../../../components/matrix_histogram';
-import { useKibana, useUiSetting$ } from '../../../lib/kibana';
-import { convertToBuildEsQuery } from '../../../lib/keury';
-import {
-  Filter,
-  esQuery,
-  IIndexPattern,
-  Query,
-} from '../../../../../../../src/plugins/data/public';
-import { inputsModel } from '../../../store';
-import { HostsType } from '../../../store/hosts/model';
-
-import * as i18n from '../translations';
-import {
-  alertsStackByOptions,
-  histogramConfigs,
-} from '../../../components/alerts_viewer/histogram_configs';
-import { MatrixHisrogramConfigs } from '../../../components/matrix_histogram/types';
-import { useGetUrlSearch } from '../../../components/navigation/use_get_url_search';
-import { navTabs } from '../../home/home_navigations';
-
-const ID = 'alertsByCategoryOverview';
-
-const NO_FILTERS: Filter[] = [];
-const DEFAULT_QUERY: Query = { query: '', language: 'kuery' };
-const DEFAULT_STACK_BY = 'event.module';
-
-interface Props {
-  deleteQuery?: ({ id }: { id: string }) => void;
-  filters?: Filter[];
-  from: number;
-  hideHeaderChildren?: boolean;
-  indexPattern: IIndexPattern;
-  query?: Query;
-  setQuery: (params: {
-    id: string;
-    inspect: inputsModel.InspectQuery | null;
-    loading: boolean;
-    refetch: inputsModel.Refetch;
-  }) => void;
-  to: number;
-}
-
-const AlertsByCategoryComponent: React.FC<Props> = ({
-  deleteQuery,
-  filters = NO_FILTERS,
-  from,
-  hideHeaderChildren = false,
-  indexPattern,
-  query = DEFAULT_QUERY,
-  setQuery,
-  to,
-}) => {
-  useEffect(() => {
-    return () => {
-      if (deleteQuery) {
-        deleteQuery({ id: ID });
-      }
-    };
-  }, []);
-
-  const kibana = useKibana();
-  const [defaultNumberFormat] = useUiSetting$<string>(DEFAULT_NUMBER_FORMAT);
-  const urlSearch = useGetUrlSearch(navTabs.detections);
-
-  const alertsCountViewAlertsButton = useMemo(
-    () => (
-      <EuiButton data-test-subj="view-alerts" href={getDetectionEngineAlertUrl(urlSearch)}>
-        {i18n.VIEW_ALERTS}
-      </EuiButton>
-    ),
-    [urlSearch]
-  );
-
-  const alertsByCategoryHistogramConfigs: MatrixHisrogramConfigs = useMemo(
-    () => ({
-      ...histogramConfigs,
-      defaultStackByOption:
-        alertsStackByOptions.find(o => o.text === DEFAULT_STACK_BY) ?? alertsStackByOptions[0],
-      subtitle: (totalCount: number) =>
-        `${SHOWING}: ${numeral(totalCount).format(defaultNumberFormat)} ${UNIT(totalCount)}`,
-      legendPosition: Position.Right,
-    }),
-    []
-  );
-
-  return (
-    <MatrixHistogramContainer
-      endDate={to}
-      filterQuery={convertToBuildEsQuery({
-        config: esQuery.getEsQueryConfig(kibana.services.uiSettings),
-        indexPattern,
-        queries: [query],
-        filters,
-      })}
-      headerChildren={hideHeaderChildren ? null : alertsCountViewAlertsButton}
-      id={ID}
-      setQuery={setQuery}
-      sourceId="default"
-      startDate={from}
-      type={HostsType.page}
-      {...alertsByCategoryHistogramConfigs}
-    />
-  );
-};
-
-AlertsByCategoryComponent.displayName = 'AlertsByCategoryComponent';
-
-export const AlertsByCategory = React.memo(AlertsByCategoryComponent);
diff --git a/x-pack/plugins/siem/public/pages/overview/event_counts/index.test.tsx b/x-pack/plugins/siem/public/pages/overview/event_counts/index.test.tsx
deleted file mode 100644
index f5419a3ff50e9e..00000000000000
--- a/x-pack/plugins/siem/public/pages/overview/event_counts/index.test.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-/*
- * 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 { mount } from 'enzyme';
-import React from 'react';
-
-import { OverviewHostProps } from '../../../components/page/overview/overview_host';
-import { OverviewNetworkProps } from '../../../components/page/overview/overview_network';
-import { mockIndexPattern, TestProviders } from '../../../mock';
-
-import { EventCounts } from '.';
-
-describe('EventCounts', () => {
-  const from = 1579553397080;
-  const to = 1579639797080;
-
-  test('it filters the `Host events` widget with a `host.name` `exists` filter', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <EventCounts from={from} indexPattern={mockIndexPattern} setQuery={jest.fn()} to={to} />
-      </TestProviders>
-    );
-
-    expect(
-      (wrapper
-        .find('[data-test-subj="overview-host-query"]')
-        .first()
-        .props() as OverviewHostProps).filterQuery
-    ).toContain('[{"bool":{"should":[{"exists":{"field":"host.name"}}]');
-  });
-
-  test('it filters the `Network events` widget with a `source.ip` or `destination.ip` `exists` filter', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <EventCounts from={from} indexPattern={mockIndexPattern} setQuery={jest.fn()} to={to} />
-      </TestProviders>
-    );
-
-    expect(
-      (wrapper
-        .find('[data-test-subj="overview-network-query"]')
-        .first()
-        .props() as OverviewNetworkProps).filterQuery
-    ).toContain(
-      '{"bool":{"filter":[{"bool":{"should":[{"bool":{"should":[{"exists":{"field":"source.ip"}}],"minimum_should_match":1}},{"bool":{"should":[{"exists":{"field":"destination.ip"}}],"minimum_should_match":1}}],"minimum_should_match":1}}]}}]'
-    );
-  });
-});
diff --git a/x-pack/plugins/siem/public/pages/overview/event_counts/index.tsx b/x-pack/plugins/siem/public/pages/overview/event_counts/index.tsx
deleted file mode 100644
index f242b0d84d7c13..00000000000000
--- a/x-pack/plugins/siem/public/pages/overview/event_counts/index.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-/*
- * 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 { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import React from 'react';
-import styled from 'styled-components';
-
-import { OverviewHost } from '../../../components/page/overview/overview_host';
-import { OverviewNetwork } from '../../../components/page/overview/overview_network';
-import { filterHostData } from '../../hosts/navigation/alerts_query_tab_body';
-import { useKibana } from '../../../lib/kibana';
-import { convertToBuildEsQuery } from '../../../lib/keury';
-import { filterNetworkData } from '../../network/navigation/alerts_query_tab_body';
-import {
-  Filter,
-  esQuery,
-  IIndexPattern,
-  Query,
-} from '../../../../../../../src/plugins/data/public';
-import { inputsModel } from '../../../store';
-
-const HorizontalSpacer = styled(EuiFlexItem)`
-  width: 24px;
-`;
-
-const NO_FILTERS: Filter[] = [];
-const DEFAULT_QUERY: Query = { query: '', language: 'kuery' };
-
-interface Props {
-  filters?: Filter[];
-  from: number;
-  indexPattern: IIndexPattern;
-  query?: Query;
-  setQuery: (params: {
-    id: string;
-    inspect: inputsModel.InspectQuery | null;
-    loading: boolean;
-    refetch: inputsModel.Refetch;
-  }) => void;
-  to: number;
-}
-
-const EventCountsComponent: React.FC<Props> = ({
-  filters = NO_FILTERS,
-  from,
-  indexPattern,
-  query = DEFAULT_QUERY,
-  setQuery,
-  to,
-}) => {
-  const kibana = useKibana();
-
-  return (
-    <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween">
-      <EuiFlexItem grow={true}>
-        <OverviewHost
-          endDate={to}
-          filterQuery={convertToBuildEsQuery({
-            config: esQuery.getEsQueryConfig(kibana.services.uiSettings),
-            indexPattern,
-            queries: [query],
-            filters: [...filters, ...filterHostData],
-          })}
-          startDate={from}
-          setQuery={setQuery}
-        />
-      </EuiFlexItem>
-
-      <HorizontalSpacer grow={false} />
-
-      <EuiFlexItem grow={true}>
-        <OverviewNetwork
-          endDate={to}
-          filterQuery={convertToBuildEsQuery({
-            config: esQuery.getEsQueryConfig(kibana.services.uiSettings),
-            indexPattern,
-            queries: [query],
-            filters: [...filters, ...filterNetworkData],
-          })}
-          startDate={from}
-          setQuery={setQuery}
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  );
-};
-
-export const EventCounts = React.memo(EventCountsComponent);
diff --git a/x-pack/plugins/siem/public/pages/overview/events_by_dataset/index.tsx b/x-pack/plugins/siem/public/pages/overview/events_by_dataset/index.tsx
deleted file mode 100644
index 77d6da7a7efc4d..00000000000000
--- a/x-pack/plugins/siem/public/pages/overview/events_by_dataset/index.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-/*
- * 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 { Position } from '@elastic/charts';
-import { EuiButton } from '@elastic/eui';
-import numeral from '@elastic/numeral';
-import React, { useEffect, useMemo } from 'react';
-import uuid from 'uuid';
-
-import { DEFAULT_NUMBER_FORMAT } from '../../../../common/constants';
-import { SHOWING, UNIT } from '../../../components/events_viewer/translations';
-import { getTabsOnHostsUrl } from '../../../components/link_to/redirect_to_hosts';
-import { MatrixHistogramContainer } from '../../../components/matrix_histogram';
-import {
-  MatrixHisrogramConfigs,
-  MatrixHistogramOption,
-} from '../../../components/matrix_histogram/types';
-import { useGetUrlSearch } from '../../../components/navigation/use_get_url_search';
-import { navTabs } from '../../home/home_navigations';
-import { eventsStackByOptions } from '../../hosts/navigation';
-import { convertToBuildEsQuery } from '../../../lib/keury';
-import { useKibana, useUiSetting$ } from '../../../lib/kibana';
-import { histogramConfigs } from '../../../pages/hosts/navigation/events_query_tab_body';
-import {
-  Filter,
-  esQuery,
-  IIndexPattern,
-  Query,
-} from '../../../../../../../src/plugins/data/public';
-import { inputsModel } from '../../../store';
-import { HostsTableType, HostsType } from '../../../store/hosts/model';
-import { InputsModelId } from '../../../store/inputs/constants';
-
-import * as i18n from '../translations';
-
-const NO_FILTERS: Filter[] = [];
-const DEFAULT_QUERY: Query = { query: '', language: 'kuery' };
-const DEFAULT_STACK_BY = 'event.dataset';
-
-const ID = 'eventsByDatasetOverview';
-
-interface Props {
-  combinedQueries?: string;
-  deleteQuery?: ({ id }: { id: string }) => void;
-  filters?: Filter[];
-  from: number;
-  headerChildren?: React.ReactNode;
-  indexPattern: IIndexPattern;
-  indexToAdd?: string[] | null;
-  onlyField?: string;
-  query?: Query;
-  setAbsoluteRangeDatePickerTarget?: InputsModelId;
-  setQuery: (params: {
-    id: string;
-    inspect: inputsModel.InspectQuery | null;
-    loading: boolean;
-    refetch: inputsModel.Refetch;
-  }) => void;
-  showSpacer?: boolean;
-  to: number;
-}
-
-const getHistogramOption = (fieldName: string): MatrixHistogramOption => ({
-  text: fieldName,
-  value: fieldName,
-});
-
-const EventsByDatasetComponent: React.FC<Props> = ({
-  combinedQueries,
-  deleteQuery,
-  filters = NO_FILTERS,
-  from,
-  headerChildren,
-  indexPattern,
-  indexToAdd,
-  onlyField,
-  query = DEFAULT_QUERY,
-  setAbsoluteRangeDatePickerTarget,
-  setQuery,
-  showSpacer = true,
-  to,
-}) => {
-  // create a unique, but stable (across re-renders) query id
-  const uniqueQueryId = useMemo(() => `${ID}-${uuid.v4()}`, []);
-
-  useEffect(() => {
-    return () => {
-      if (deleteQuery) {
-        deleteQuery({ id: uniqueQueryId });
-      }
-    };
-  }, [deleteQuery, uniqueQueryId]);
-
-  const kibana = useKibana();
-  const [defaultNumberFormat] = useUiSetting$<string>(DEFAULT_NUMBER_FORMAT);
-  const urlSearch = useGetUrlSearch(navTabs.hosts);
-
-  const eventsCountViewEventsButton = useMemo(
-    () => (
-      <EuiButton href={getTabsOnHostsUrl(HostsTableType.events, urlSearch)}>
-        {i18n.VIEW_EVENTS}
-      </EuiButton>
-    ),
-    [urlSearch]
-  );
-
-  const filterQuery = useMemo(
-    () =>
-      combinedQueries == null
-        ? convertToBuildEsQuery({
-            config: esQuery.getEsQueryConfig(kibana.services.uiSettings),
-            indexPattern,
-            queries: [query],
-            filters,
-          })
-        : combinedQueries,
-    [combinedQueries, kibana, indexPattern, query, filters]
-  );
-
-  const eventsByDatasetHistogramConfigs: MatrixHisrogramConfigs = useMemo(
-    () => ({
-      ...histogramConfigs,
-      stackByOptions:
-        onlyField != null ? [getHistogramOption(onlyField)] : histogramConfigs.stackByOptions,
-      defaultStackByOption:
-        onlyField != null
-          ? getHistogramOption(onlyField)
-          : eventsStackByOptions.find(o => o.text === DEFAULT_STACK_BY) ?? eventsStackByOptions[0],
-      legendPosition: Position.Right,
-      subtitle: (totalCount: number) =>
-        `${SHOWING}: ${numeral(totalCount).format(defaultNumberFormat)} ${UNIT(totalCount)}`,
-      titleSize: onlyField == null ? 'm' : 's',
-    }),
-    [onlyField, defaultNumberFormat]
-  );
-
-  const headerContent = useMemo(() => {
-    if (onlyField == null || headerChildren != null) {
-      return (
-        <>
-          {headerChildren}
-          {onlyField == null && eventsCountViewEventsButton}
-        </>
-      );
-    } else {
-      return null;
-    }
-  }, [onlyField, headerChildren, eventsCountViewEventsButton]);
-
-  return (
-    <MatrixHistogramContainer
-      endDate={to}
-      filterQuery={filterQuery}
-      headerChildren={headerContent}
-      id={uniqueQueryId}
-      indexToAdd={indexToAdd}
-      setAbsoluteRangeDatePickerTarget={setAbsoluteRangeDatePickerTarget}
-      setQuery={setQuery}
-      showSpacer={showSpacer}
-      sourceId="default"
-      startDate={from}
-      type={HostsType.page}
-      {...eventsByDatasetHistogramConfigs}
-      title={onlyField != null ? i18n.TOP(onlyField) : eventsByDatasetHistogramConfigs.title}
-    />
-  );
-};
-
-EventsByDatasetComponent.displayName = 'EventsByDatasetComponent';
-
-export const EventsByDataset = React.memo(EventsByDatasetComponent);
diff --git a/x-pack/plugins/siem/public/pages/overview/overview_empty/index.tsx b/x-pack/plugins/siem/public/pages/overview/overview_empty/index.tsx
deleted file mode 100644
index 1325826f172c71..00000000000000
--- a/x-pack/plugins/siem/public/pages/overview/overview_empty/index.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
- * 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 * as i18nCommon from '../../common/translations';
-import { EmptyPage } from '../../../components/empty_page';
-import { useKibana } from '../../../lib/kibana';
-
-const OverviewEmptyComponent: React.FC = () => {
-  const { http, docLinks } = useKibana().services;
-  const basePath = http.basePath.get();
-
-  return (
-    <EmptyPage
-      actionPrimaryIcon="gear"
-      actionPrimaryLabel={i18nCommon.EMPTY_ACTION_PRIMARY}
-      actionPrimaryUrl={`${basePath}/app/kibana#/home/tutorial_directory/siem`}
-      actionSecondaryIcon="popout"
-      actionSecondaryLabel={i18nCommon.EMPTY_ACTION_SECONDARY}
-      actionSecondaryTarget="_blank"
-      actionSecondaryUrl={docLinks.links.siem.gettingStarted}
-      data-test-subj="empty-page"
-      message={i18nCommon.EMPTY_MESSAGE}
-      title={i18nCommon.EMPTY_TITLE}
-    />
-  );
-};
-
-OverviewEmptyComponent.displayName = 'OverviewEmptyComponent';
-
-export const OverviewEmpty = React.memo(OverviewEmptyComponent);
diff --git a/x-pack/plugins/siem/public/pages/overview/sidebar/index.tsx b/x-pack/plugins/siem/public/pages/overview/sidebar/index.tsx
deleted file mode 100644
index 3797eae2bb8536..00000000000000
--- a/x-pack/plugins/siem/public/pages/overview/sidebar/index.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * 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, { useState } from 'react';
-
-import { FilterMode as RecentTimelinesFilterMode } from '../../../components/recent_timelines/types';
-import { FilterMode as RecentCasesFilterMode } from '../../../components/recent_cases/types';
-
-import { Sidebar } from './sidebar';
-
-export const StatefulSidebar = React.memo(() => {
-  const [recentTimelinesFilterBy, setRecentTimelinesFilterBy] = useState<RecentTimelinesFilterMode>(
-    'favorites'
-  );
-  const [recentCasesFilterBy, setRecentCasesFilterBy] = useState<RecentCasesFilterMode>(
-    'recentlyCreated'
-  );
-
-  return (
-    <Sidebar
-      recentCasesFilterBy={recentCasesFilterBy}
-      setRecentCasesFilterBy={setRecentCasesFilterBy}
-      recentTimelinesFilterBy={recentTimelinesFilterBy}
-      setRecentTimelinesFilterBy={setRecentTimelinesFilterBy}
-    />
-  );
-});
-
-StatefulSidebar.displayName = 'StatefulSidebar';
diff --git a/x-pack/plugins/siem/public/pages/overview/signals_by_category/index.tsx b/x-pack/plugins/siem/public/pages/overview/signals_by_category/index.tsx
deleted file mode 100644
index e5863effa906d4..00000000000000
--- a/x-pack/plugins/siem/public/pages/overview/signals_by_category/index.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-/*
- * 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, { useCallback } from 'react';
-
-import { SignalsHistogramPanel } from '../../detection_engine/components/signals_histogram_panel';
-import { signalsHistogramOptions } from '../../detection_engine/components/signals_histogram_panel/config';
-import { useSignalIndex } from '../../../containers/detection_engine/signals/use_signal_index';
-import { SetAbsoluteRangeDatePicker } from '../../network/types';
-import { Filter, IIndexPattern, Query } from '../../../../../../../src/plugins/data/public';
-import { inputsModel } from '../../../store';
-import { InputsModelId } from '../../../store/inputs/constants';
-import * as i18n from '../translations';
-import { UpdateDateRange } from '../../../components/charts/common';
-
-const DEFAULT_QUERY: Query = { query: '', language: 'kuery' };
-const DEFAULT_STACK_BY = 'signal.rule.threat.tactic.name';
-const NO_FILTERS: Filter[] = [];
-
-interface Props {
-  deleteQuery?: ({ id }: { id: string }) => void;
-  filters?: Filter[];
-  from: number;
-  headerChildren?: React.ReactNode;
-  indexPattern: IIndexPattern;
-  /** Override all defaults, and only display this field */
-  onlyField?: string;
-  query?: Query;
-  setAbsoluteRangeDatePicker: SetAbsoluteRangeDatePicker;
-  setAbsoluteRangeDatePickerTarget?: InputsModelId;
-  setQuery: (params: {
-    id: string;
-    inspect: inputsModel.InspectQuery | null;
-    loading: boolean;
-    refetch: inputsModel.Refetch;
-  }) => void;
-  to: number;
-}
-
-const SignalsByCategoryComponent: React.FC<Props> = ({
-  deleteQuery,
-  filters = NO_FILTERS,
-  from,
-  headerChildren,
-  onlyField,
-  query = DEFAULT_QUERY,
-  setAbsoluteRangeDatePicker,
-  setAbsoluteRangeDatePickerTarget = 'global',
-  setQuery,
-  to,
-}) => {
-  const { signalIndexName } = useSignalIndex();
-  const updateDateRangeCallback = useCallback<UpdateDateRange>(
-    ({ x }) => {
-      if (!x) {
-        return;
-      }
-      const [min, max] = x;
-      setAbsoluteRangeDatePicker({ id: setAbsoluteRangeDatePickerTarget, from: min, to: max });
-    },
-    [setAbsoluteRangeDatePicker]
-  );
-
-  const defaultStackByOption =
-    signalsHistogramOptions.find(o => o.text === DEFAULT_STACK_BY) ?? signalsHistogramOptions[0];
-
-  return (
-    <SignalsHistogramPanel
-      deleteQuery={deleteQuery}
-      defaultStackByOption={defaultStackByOption}
-      filters={filters}
-      from={from}
-      headerChildren={headerChildren}
-      onlyField={onlyField}
-      query={query}
-      signalIndexName={signalIndexName}
-      setQuery={setQuery}
-      showTotalSignalsCount={true}
-      showLinkToSignals={onlyField == null ? true : false}
-      stackByOptions={onlyField == null ? signalsHistogramOptions : undefined}
-      legendPosition={'right'}
-      to={to}
-      title={i18n.SIGNAL_COUNT}
-      updateDateRange={updateDateRangeCallback}
-    />
-  );
-};
-
-SignalsByCategoryComponent.displayName = 'SignalsByCategoryComponent';
-
-export const SignalsByCategory = React.memo(SignalsByCategoryComponent);
diff --git a/x-pack/plugins/siem/public/pages/timelines/index.tsx b/x-pack/plugins/siem/public/pages/timelines/index.tsx
deleted file mode 100644
index 343be5cbe3839e..00000000000000
--- a/x-pack/plugins/siem/public/pages/timelines/index.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-/*
- * 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 { ApolloConsumer } from 'react-apollo';
-import { Switch, Route, Redirect } from 'react-router-dom';
-
-import { ChromeBreadcrumb } from '../../../../../../src/core/public';
-
-import { TimelineType } from '../../../common/types/timeline';
-import { TAB_TIMELINES, TAB_TEMPLATES } from '../../components/open_timeline/translations';
-import { getTimelinesUrl } from '../../components/link_to';
-import { TimelineRouteSpyState } from '../../utils/route/types';
-
-import { SiemPageName } from '../home/types';
-
-import { TimelinesPage } from './timelines_page';
-import { PAGE_TITLE } from './translations';
-import { appendSearch } from '../../components/link_to/helpers';
-const timelinesPagePath = `/:pageName(${SiemPageName.timelines})/:tabName(${TimelineType.default}|${TimelineType.template})`;
-const timelinesDefaultPath = `/${SiemPageName.timelines}/${TimelineType.default}`;
-
-const TabNameMappedToI18nKey: Record<TimelineType, string> = {
-  [TimelineType.default]: TAB_TIMELINES,
-  [TimelineType.template]: TAB_TEMPLATES,
-};
-
-export const getBreadcrumbs = (
-  params: TimelineRouteSpyState,
-  search: string[]
-): ChromeBreadcrumb[] => {
-  let breadcrumb = [
-    {
-      text: PAGE_TITLE,
-      href: `${getTimelinesUrl(appendSearch(search[1]))}`,
-    },
-  ];
-
-  const tabName = params?.tabName;
-  if (!tabName) return breadcrumb;
-
-  breadcrumb = [
-    ...breadcrumb,
-    {
-      text: TabNameMappedToI18nKey[tabName],
-      href: '',
-    },
-  ];
-  return breadcrumb;
-};
-
-export const Timelines = React.memo(() => {
-  return (
-    <Switch>
-      <Route exact path={timelinesPagePath}>
-        <ApolloConsumer>{client => <TimelinesPage apolloClient={client} />}</ApolloConsumer>
-      </Route>
-      <Route
-        path={`/${SiemPageName.timelines}/`}
-        render={({ location: { search = '' } }) => (
-          <Redirect to={`${timelinesDefaultPath}${appendSearch(search)}`} />
-        )}
-      />
-    </Switch>
-  );
-});
-
-Timelines.displayName = 'Timelines';
diff --git a/x-pack/plugins/siem/public/plugin.tsx b/x-pack/plugins/siem/public/plugin.tsx
index f4310e1b073ab3..cc46025ddc4a6a 100644
--- a/x-pack/plugins/siem/public/plugin.tsx
+++ b/x-pack/plugins/siem/public/plugin.tsx
@@ -30,9 +30,9 @@ import {
 } from '../../triggers_actions_ui/public';
 import { SecurityPluginSetup } from '../../security/public';
 import { APP_ID, APP_NAME, APP_PATH, APP_ICON } from '../common/constants';
-import { initTelemetry } from './lib/telemetry';
-import { KibanaServices } from './lib/kibana/services';
-import { serviceNowActionType, jiraActionType } from './lib/connectors';
+import { initTelemetry } from './common/lib/telemetry';
+import { KibanaServices } from './common/lib/kibana/services';
+import { serviceNowActionType, jiraActionType } from './common/lib/connectors';
 
 export interface SetupPlugins {
   home: HomePublicPluginSetup;
@@ -87,6 +87,53 @@ export class Plugin implements IPlugin<PluginSetup, PluginStart, SetupPlugins, S
     plugins.triggers_actions_ui.actionTypeRegistry.register(serviceNowActionType());
     plugins.triggers_actions_ui.actionTypeRegistry.register(jiraActionType());
 
+    const mountSecurityApp = async (params: AppMountParameters) => {
+      const [coreStart, startPlugins] = await core.getStartServices();
+      const { renderApp } = await import('./app');
+      const services = {
+        ...coreStart,
+        ...startPlugins,
+        security: plugins.security,
+      } as StartServices;
+
+      const alertsSubPlugin = new (await import('./alerts')).Alerts();
+      const casesSubPlugin = new (await import('./cases')).Cases();
+      const hostsSubPlugin = new (await import('./hosts')).Hosts();
+      const networkSubPlugin = new (await import('./network')).Network();
+      const overviewSubPlugin = new (await import('./overview')).Overview();
+      const timelinesSubPlugin = new (await import('./timelines')).Timelines();
+
+      const alertsStart = alertsSubPlugin.start();
+      const casesStart = casesSubPlugin.start();
+      const hostsStart = hostsSubPlugin.start();
+      const networkStart = networkSubPlugin.start();
+      const overviewStart = overviewSubPlugin.start();
+      const timelinesStart = timelinesSubPlugin.start();
+
+      return renderApp(services, params, {
+        routes: [
+          ...alertsStart.routes,
+          ...casesStart.routes,
+          ...hostsStart.routes,
+          ...networkStart.routes,
+          ...overviewStart.routes,
+          ...timelinesStart.routes,
+        ],
+        store: {
+          initialState: {
+            ...hostsStart.store.initialState,
+            ...networkStart.store.initialState,
+            ...timelinesStart.store.initialState,
+          },
+          reducer: {
+            ...hostsStart.store.reducer,
+            ...networkStart.store.reducer,
+            ...timelinesStart.store.reducer,
+          },
+        },
+      });
+    };
+
     core.application.register({
       id: APP_ID,
       title: APP_NAME,
@@ -94,15 +141,7 @@ export class Plugin implements IPlugin<PluginSetup, PluginStart, SetupPlugins, S
       euiIconType: APP_ICON,
       category: DEFAULT_APP_CATEGORIES.security,
       async mount(params: AppMountParameters) {
-        const [coreStart, startPlugins] = await core.getStartServices();
-        const { renderApp } = await import('./app');
-        const services = {
-          ...coreStart,
-          ...startPlugins,
-          security: plugins.security,
-        } as StartServices;
-
-        return renderApp(services, params);
+        return mountSecurityApp(params);
       },
     });
 
diff --git a/x-pack/plugins/siem/public/routes.tsx b/x-pack/plugins/siem/public/routes.tsx
deleted file mode 100644
index a989fa9873435e..00000000000000
--- a/x-pack/plugins/siem/public/routes.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * 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 { History } from 'history';
-import React, { FC, memo } from 'react';
-import { Route, Router, Switch } from 'react-router-dom';
-
-import { NotFoundPage } from './pages/404';
-import { HomePage } from './pages/home';
-import { ManageRoutesSpy } from './utils/route/manage_spy_routes';
-
-interface RouterProps {
-  history: History;
-}
-
-const PageRouterComponent: FC<RouterProps> = ({ history }) => (
-  <ManageRoutesSpy>
-    <Router history={history}>
-      <Switch>
-        <Route path="/">
-          <HomePage />
-        </Route>
-        <Route>
-          <NotFoundPage />
-        </Route>
-      </Switch>
-    </Router>
-  </ManageRoutesSpy>
-);
-
-export const PageRouter = memo(PageRouterComponent);
diff --git a/x-pack/plugins/siem/public/store/actions.ts b/x-pack/plugins/siem/public/store/actions.ts
deleted file mode 100644
index 12da695d2966d9..00000000000000
--- a/x-pack/plugins/siem/public/store/actions.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/*
- * 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.
- */
-
-export { appActions } from './app';
-export { dragAndDropActions } from './drag_and_drop';
-export { hostsActions } from './hosts';
-export { inputsActions } from './inputs';
-export { networkActions } from './network';
-export { timelineActions } from './timeline';
diff --git a/x-pack/plugins/siem/public/store/drag_and_drop/actions.ts b/x-pack/plugins/siem/public/store/drag_and_drop/actions.ts
deleted file mode 100644
index 5d3cdc5a126f92..00000000000000
--- a/x-pack/plugins/siem/public/store/drag_and_drop/actions.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * 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 actionCreatorFactory from 'typescript-fsa';
-
-import { DataProvider } from '../../components/timeline/data_providers/data_provider';
-
-const actionCreator = actionCreatorFactory('x-pack/siem/local/drag_and_drop');
-
-export const registerProvider = actionCreator<{ provider: DataProvider }>('REGISTER_PROVIDER');
-
-export const unRegisterProvider = actionCreator<{ id: string }>('UNREGISTER_PROVIDER');
-
-export const noProviderFound = actionCreator<{ id: string }>('NO_PROVIDER_FOUND');
diff --git a/x-pack/plugins/siem/public/store/drag_and_drop/model.ts b/x-pack/plugins/siem/public/store/drag_and_drop/model.ts
deleted file mode 100644
index 6b6491b32a1d0e..00000000000000
--- a/x-pack/plugins/siem/public/store/drag_and_drop/model.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/*
- * 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 { DataProvider } from '../../components/timeline/data_providers/data_provider';
-
-export interface IdToDataProvider {
-  [id: string]: DataProvider;
-}
-
-export interface DragAndDropModel {
-  dataProviders: IdToDataProvider;
-}
diff --git a/x-pack/plugins/siem/public/store/drag_and_drop/reducer.test.ts b/x-pack/plugins/siem/public/store/drag_and_drop/reducer.test.ts
deleted file mode 100644
index e779b990b590e5..00000000000000
--- a/x-pack/plugins/siem/public/store/drag_and_drop/reducer.test.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
- * 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 { DataProvider } from '../../components/timeline/data_providers/data_provider';
-import { mockDataProviders } from '../../components/timeline/data_providers/mock/mock_data_providers';
-
-import { IdToDataProvider } from './model';
-import { registerProviderHandler, unRegisterProviderHandler } from './reducer';
-
-const dataProviders: IdToDataProvider = mockDataProviders.reduce(
-  (acc, provider) => ({
-    ...acc,
-    [provider.id]: provider,
-  }),
-  {}
-);
-
-describe('reducer', () => {
-  describe('#registerProviderHandler', () => {
-    test('it registers the data provider', () => {
-      const provider: DataProvider = {
-        ...mockDataProviders[0],
-        id: 'abcd',
-        name: 'Provider abcd',
-      };
-
-      expect(registerProviderHandler({ provider, dataProviders })).toEqual({
-        ...dataProviders,
-        [provider.id]: provider,
-      });
-    });
-  });
-
-  describe('#unRegisterProviderHandler', () => {
-    test('it un-registers the data provider', () => {
-      const id = mockDataProviders[0].id;
-
-      const expected = unRegisterProviderHandler({ id, dataProviders });
-
-      expect(Object.keys(expected)).not.toContain(id);
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/store/drag_and_drop/reducer.ts b/x-pack/plugins/siem/public/store/drag_and_drop/reducer.ts
deleted file mode 100644
index d5d49f3a0a1b1f..00000000000000
--- a/x-pack/plugins/siem/public/store/drag_and_drop/reducer.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-/*
- * 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 { omit } from 'lodash/fp';
-import { reducerWithInitialState } from 'typescript-fsa-reducers';
-
-import { DataProvider } from '../../components/timeline/data_providers/data_provider';
-
-import { registerProvider, unRegisterProvider } from './actions';
-import { DragAndDropModel, IdToDataProvider } from './model';
-
-export type DragAndDropState = DragAndDropModel;
-
-export const initialDragAndDropState: DragAndDropState = { dataProviders: {} };
-
-interface RegisterProviderHandlerParams {
-  provider: DataProvider;
-  dataProviders: IdToDataProvider;
-}
-
-export const registerProviderHandler = ({
-  provider,
-  dataProviders,
-}: RegisterProviderHandlerParams): IdToDataProvider => ({
-  ...dataProviders,
-  [provider.id]: provider,
-});
-
-interface UnRegisterProviderHandlerParams {
-  id: string;
-  dataProviders: IdToDataProvider;
-}
-
-export const unRegisterProviderHandler = ({
-  id,
-  dataProviders,
-}: UnRegisterProviderHandlerParams): IdToDataProvider => omit(id, dataProviders);
-
-export const dragAndDropReducer = reducerWithInitialState(initialDragAndDropState)
-  .case(registerProvider, (state, { provider }) => ({
-    ...state,
-    dataProviders: registerProviderHandler({ provider, dataProviders: state.dataProviders }),
-  }))
-  .case(unRegisterProvider, (state, { id }) => ({
-    ...state,
-    dataProviders: unRegisterProviderHandler({ id, dataProviders: state.dataProviders }),
-  }))
-  .build();
diff --git a/x-pack/plugins/siem/public/store/epic.ts b/x-pack/plugins/siem/public/store/epic.ts
deleted file mode 100644
index 336960588f48c6..00000000000000
--- a/x-pack/plugins/siem/public/store/epic.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/*
- * 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 { combineEpics } from 'redux-observable';
-import { createTimelineEpic } from './timeline/epic';
-import { createTimelineFavoriteEpic } from './timeline/epic_favorite';
-import { createTimelineNoteEpic } from './timeline/epic_note';
-import { createTimelinePinnedEventEpic } from './timeline/epic_pinned_event';
-
-export const createRootEpic = <State>() =>
-  combineEpics(
-    createTimelineEpic<State>(),
-    createTimelineFavoriteEpic<State>(),
-    createTimelineNoteEpic<State>(),
-    createTimelinePinnedEventEpic<State>()
-  );
diff --git a/x-pack/plugins/siem/public/store/hosts/helpers.test.ts b/x-pack/plugins/siem/public/store/hosts/helpers.test.ts
deleted file mode 100644
index a4eddb31b3e31e..00000000000000
--- a/x-pack/plugins/siem/public/store/hosts/helpers.test.ts
+++ /dev/null
@@ -1,127 +0,0 @@
-/*
- * 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 { Direction, HostsFields } from '../../graphql/types';
-import { DEFAULT_TABLE_LIMIT } from '../constants';
-import { HostsModel, HostsTableType, HostsType } from './model';
-import { setHostsQueriesActivePageToZero } from './helpers';
-
-export const mockHostsState: HostsModel = {
-  page: {
-    queries: {
-      [HostsTableType.authentications]: {
-        activePage: 5,
-        limit: DEFAULT_TABLE_LIMIT,
-      },
-      [HostsTableType.hosts]: {
-        activePage: 9,
-        direction: Direction.desc,
-        limit: DEFAULT_TABLE_LIMIT,
-        sortField: HostsFields.lastSeen,
-      },
-      [HostsTableType.events]: {
-        activePage: 4,
-        limit: DEFAULT_TABLE_LIMIT,
-      },
-      [HostsTableType.uncommonProcesses]: {
-        activePage: 8,
-        limit: DEFAULT_TABLE_LIMIT,
-      },
-      [HostsTableType.anomalies]: null,
-      [HostsTableType.alerts]: {
-        activePage: 4,
-        limit: DEFAULT_TABLE_LIMIT,
-      },
-    },
-  },
-  details: {
-    queries: {
-      [HostsTableType.authentications]: {
-        activePage: 5,
-        limit: DEFAULT_TABLE_LIMIT,
-      },
-      [HostsTableType.hosts]: {
-        activePage: 9,
-        direction: Direction.desc,
-        limit: DEFAULT_TABLE_LIMIT,
-        sortField: HostsFields.lastSeen,
-      },
-      [HostsTableType.events]: {
-        activePage: 4,
-        limit: DEFAULT_TABLE_LIMIT,
-      },
-      [HostsTableType.uncommonProcesses]: {
-        activePage: 8,
-        limit: DEFAULT_TABLE_LIMIT,
-      },
-      [HostsTableType.anomalies]: null,
-      [HostsTableType.alerts]: {
-        activePage: 4,
-        limit: DEFAULT_TABLE_LIMIT,
-      },
-    },
-  },
-};
-
-describe('Hosts redux store', () => {
-  describe('#setHostsQueriesActivePageToZero', () => {
-    test('set activePage to zero for all queries in hosts page  ', () => {
-      expect(setHostsQueriesActivePageToZero(mockHostsState, HostsType.page)).toEqual({
-        allHosts: {
-          activePage: 0,
-          direction: 'desc',
-          limit: 10,
-          sortField: 'lastSeen',
-        },
-        anomalies: null,
-        authentications: {
-          activePage: 0,
-          limit: 10,
-        },
-        events: {
-          activePage: 0,
-          limit: 10,
-        },
-        uncommonProcesses: {
-          activePage: 0,
-          limit: 10,
-        },
-        alerts: {
-          activePage: 0,
-          limit: 10,
-        },
-      });
-    });
-
-    test('set activePage to zero for all queries in host details  ', () => {
-      expect(setHostsQueriesActivePageToZero(mockHostsState, HostsType.details)).toEqual({
-        allHosts: {
-          activePage: 0,
-          direction: 'desc',
-          limit: 10,
-          sortField: 'lastSeen',
-        },
-        anomalies: null,
-        authentications: {
-          activePage: 0,
-          limit: 10,
-        },
-        events: {
-          activePage: 0,
-          limit: 10,
-        },
-        uncommonProcesses: {
-          activePage: 0,
-          limit: 10,
-        },
-        alerts: {
-          activePage: 0,
-          limit: 10,
-        },
-      });
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/store/hosts/helpers.ts b/x-pack/plugins/siem/public/store/hosts/helpers.ts
deleted file mode 100644
index f6b5596b382f63..00000000000000
--- a/x-pack/plugins/siem/public/store/hosts/helpers.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-/*
- * 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 { DEFAULT_TABLE_ACTIVE_PAGE } from '../constants';
-
-import { HostsModel, HostsTableType, Queries, HostsType } from './model';
-
-export const setHostPageQueriesActivePageToZero = (state: HostsModel): Queries => ({
-  ...state.page.queries,
-  [HostsTableType.authentications]: {
-    ...state.page.queries[HostsTableType.authentications],
-    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-  },
-  [HostsTableType.hosts]: {
-    ...state.page.queries[HostsTableType.hosts],
-    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-  },
-  [HostsTableType.events]: {
-    ...state.page.queries[HostsTableType.events],
-    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-  },
-  [HostsTableType.uncommonProcesses]: {
-    ...state.page.queries[HostsTableType.uncommonProcesses],
-    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-  },
-  [HostsTableType.alerts]: {
-    ...state.page.queries[HostsTableType.alerts],
-    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-  },
-});
-
-export const setHostDetailsQueriesActivePageToZero = (state: HostsModel): Queries => ({
-  ...state.details.queries,
-  [HostsTableType.authentications]: {
-    ...state.details.queries[HostsTableType.authentications],
-    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-  },
-  [HostsTableType.hosts]: {
-    ...state.details.queries[HostsTableType.hosts],
-    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-  },
-  [HostsTableType.events]: {
-    ...state.details.queries[HostsTableType.events],
-    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-  },
-  [HostsTableType.uncommonProcesses]: {
-    ...state.details.queries[HostsTableType.uncommonProcesses],
-    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-  },
-  [HostsTableType.alerts]: {
-    ...state.page.queries[HostsTableType.alerts],
-    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-  },
-});
-
-export const setHostsQueriesActivePageToZero = (state: HostsModel, type: HostsType): Queries => {
-  if (type === HostsType.page) {
-    return setHostPageQueriesActivePageToZero(state);
-  } else if (type === HostsType.details) {
-    return setHostDetailsQueriesActivePageToZero(state);
-  }
-  throw new Error(`HostsType ${type} is unknown`);
-};
diff --git a/x-pack/plugins/siem/public/store/hosts/index.ts b/x-pack/plugins/siem/public/store/hosts/index.ts
deleted file mode 100644
index 93bdde791a7acf..00000000000000
--- a/x-pack/plugins/siem/public/store/hosts/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/*
- * 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 * as hostsActions from './actions';
-import * as hostsModel from './model';
-import * as hostsSelectors from './selectors';
-
-export { hostsActions, hostsModel, hostsSelectors };
-export * from './reducer';
diff --git a/x-pack/plugins/siem/public/store/hosts/reducer.ts b/x-pack/plugins/siem/public/store/hosts/reducer.ts
deleted file mode 100644
index 53fe9a3ea6a2c2..00000000000000
--- a/x-pack/plugins/siem/public/store/hosts/reducer.ts
+++ /dev/null
@@ -1,143 +0,0 @@
-/*
- * 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 { reducerWithInitialState } from 'typescript-fsa-reducers';
-
-import { Direction, HostsFields } from '../../graphql/types';
-import { DEFAULT_TABLE_ACTIVE_PAGE, DEFAULT_TABLE_LIMIT } from '../constants';
-
-import {
-  setHostDetailsTablesActivePageToZero,
-  setHostTablesActivePageToZero,
-  updateHostsSort,
-  updateTableActivePage,
-  updateTableLimit,
-} from './actions';
-import {
-  setHostPageQueriesActivePageToZero,
-  setHostDetailsQueriesActivePageToZero,
-} from './helpers';
-import { HostsModel, HostsTableType } from './model';
-
-export type HostsState = HostsModel;
-
-export const initialHostsState: HostsState = {
-  page: {
-    queries: {
-      [HostsTableType.authentications]: {
-        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-        limit: DEFAULT_TABLE_LIMIT,
-      },
-      [HostsTableType.hosts]: {
-        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-        direction: Direction.desc,
-        limit: DEFAULT_TABLE_LIMIT,
-        sortField: HostsFields.lastSeen,
-      },
-      [HostsTableType.events]: {
-        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-        limit: DEFAULT_TABLE_LIMIT,
-      },
-      [HostsTableType.uncommonProcesses]: {
-        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-        limit: DEFAULT_TABLE_LIMIT,
-      },
-      [HostsTableType.anomalies]: null,
-      [HostsTableType.alerts]: {
-        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-        limit: DEFAULT_TABLE_LIMIT,
-      },
-    },
-  },
-  details: {
-    queries: {
-      [HostsTableType.authentications]: {
-        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-        limit: DEFAULT_TABLE_LIMIT,
-      },
-      [HostsTableType.hosts]: {
-        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-        direction: Direction.desc,
-        limit: DEFAULT_TABLE_LIMIT,
-        sortField: HostsFields.lastSeen,
-      },
-      [HostsTableType.events]: {
-        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-        limit: DEFAULT_TABLE_LIMIT,
-      },
-      [HostsTableType.uncommonProcesses]: {
-        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-        limit: DEFAULT_TABLE_LIMIT,
-      },
-      [HostsTableType.anomalies]: null,
-      [HostsTableType.alerts]: {
-        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-        limit: DEFAULT_TABLE_LIMIT,
-      },
-    },
-  },
-};
-
-export const hostsReducer = reducerWithInitialState(initialHostsState)
-  .case(setHostTablesActivePageToZero, state => ({
-    ...state,
-    page: {
-      ...state.page,
-      queries: setHostPageQueriesActivePageToZero(state),
-    },
-    details: {
-      ...state.details,
-      queries: setHostDetailsQueriesActivePageToZero(state),
-    },
-  }))
-  .case(setHostDetailsTablesActivePageToZero, state => ({
-    ...state,
-    details: {
-      ...state.details,
-      queries: setHostDetailsQueriesActivePageToZero(state),
-    },
-  }))
-  .case(updateTableActivePage, (state, { activePage, hostsType, tableType }) => ({
-    ...state,
-    [hostsType]: {
-      ...state[hostsType],
-      queries: {
-        ...state[hostsType].queries,
-        [tableType]: {
-          ...state[hostsType].queries[tableType],
-          activePage,
-        },
-      },
-    },
-  }))
-  .case(updateTableLimit, (state, { limit, hostsType, tableType }) => ({
-    ...state,
-    [hostsType]: {
-      ...state[hostsType],
-      queries: {
-        ...state[hostsType].queries,
-        [tableType]: {
-          ...state[hostsType].queries[tableType],
-          limit,
-        },
-      },
-    },
-  }))
-  .case(updateHostsSort, (state, { sort, hostsType }) => ({
-    ...state,
-    [hostsType]: {
-      ...state[hostsType],
-      queries: {
-        ...state[hostsType].queries,
-        [HostsTableType.hosts]: {
-          ...state[hostsType].queries[HostsTableType.hosts],
-          direction: sort.direction,
-          sortField: sort.field,
-        },
-      },
-    },
-  }))
-  .build();
diff --git a/x-pack/plugins/siem/public/store/hosts/selectors.ts b/x-pack/plugins/siem/public/store/hosts/selectors.ts
deleted file mode 100644
index e50968db31f604..00000000000000
--- a/x-pack/plugins/siem/public/store/hosts/selectors.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
- * 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 { get } from 'lodash/fp';
-import { createSelector } from 'reselect';
-
-import { State } from '../reducer';
-
-import { GenericHostsModel, HostsType, HostsTableType } from './model';
-
-const selectHosts = (state: State, hostsType: HostsType): GenericHostsModel =>
-  get(hostsType, state.hosts);
-
-export const authenticationsSelector = () =>
-  createSelector(selectHosts, hosts => hosts.queries.authentications);
-
-export const hostsSelector = () =>
-  createSelector(selectHosts, hosts => hosts.queries[HostsTableType.hosts]);
-
-export const eventsSelector = () => createSelector(selectHosts, hosts => hosts.queries.events);
-
-export const uncommonProcessesSelector = () =>
-  createSelector(selectHosts, hosts => hosts.queries.uncommonProcesses);
-
-export const alertsSelector = () =>
-  createSelector(selectHosts, hosts => hosts.queries[HostsTableType.alerts]);
diff --git a/x-pack/plugins/siem/public/store/inputs/actions.ts b/x-pack/plugins/siem/public/store/inputs/actions.ts
deleted file mode 100644
index 04cdf5246de2ce..00000000000000
--- a/x-pack/plugins/siem/public/store/inputs/actions.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-/*
- * 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 actionCreatorFactory from 'typescript-fsa';
-
-import { InspectQuery, Refetch, RefetchKql } from './model';
-import { InputsModelId } from './constants';
-import { Filter, SavedQuery } from '../../../../../../src/plugins/data/public';
-
-const actionCreator = actionCreatorFactory('x-pack/siem/local/inputs');
-
-export const setAbsoluteRangeDatePicker = actionCreator<{
-  id: InputsModelId;
-  from: number;
-  to: number;
-}>('SET_ABSOLUTE_RANGE_DATE_PICKER');
-
-export const setTimelineRangeDatePicker = actionCreator<{
-  from: number;
-  to: number;
-}>('SET_TIMELINE_RANGE_DATE_PICKER');
-
-export const setRelativeRangeDatePicker = actionCreator<{
-  id: InputsModelId;
-  fromStr: string;
-  toStr: string;
-  from: number;
-  to: number;
-}>('SET_RELATIVE_RANGE_DATE_PICKER');
-
-export const setDuration = actionCreator<{ id: InputsModelId; duration: number }>('SET_DURATION');
-
-export const startAutoReload = actionCreator<{ id: InputsModelId }>('START_KQL_AUTO_RELOAD');
-
-export const stopAutoReload = actionCreator<{ id: InputsModelId }>('STOP_KQL_AUTO_RELOAD');
-
-export const setQuery = actionCreator<{
-  inputId: InputsModelId;
-  id: string;
-  loading: boolean;
-  refetch: Refetch | RefetchKql;
-  inspect: InspectQuery | null;
-}>('SET_QUERY');
-
-export const deleteOneQuery = actionCreator<{
-  inputId: InputsModelId;
-  id: string;
-}>('DELETE_QUERY');
-
-export const setInspectionParameter = actionCreator<{
-  id: string;
-  inputId: InputsModelId;
-  isInspected: boolean;
-  selectedInspectIndex: number;
-}>('SET_INSPECTION_PARAMETER');
-
-export const deleteAllQuery = actionCreator<{ id: InputsModelId }>('DELETE_ALL_QUERY');
-
-export const toggleTimelineLinkTo = actionCreator<{ linkToId: InputsModelId }>(
-  'TOGGLE_TIMELINE_LINK_TO'
-);
-
-export const removeTimelineLinkTo = actionCreator('REMOVE_TIMELINE_LINK_TO');
-export const addTimelineLinkTo = actionCreator<{ linkToId: InputsModelId }>('ADD_TIMELINE_LINK_TO');
-
-export const removeGlobalLinkTo = actionCreator('REMOVE_GLOBAL_LINK_TO');
-export const addGlobalLinkTo = actionCreator<{ linkToId: InputsModelId }>('ADD_GLOBAL_LINK_TO');
-
-export const setFilterQuery = actionCreator<{
-  id: InputsModelId;
-  query: string | { [key: string]: unknown };
-  language: string;
-}>('SET_FILTER_QUERY');
-
-export const setSavedQuery = actionCreator<{
-  id: InputsModelId;
-  savedQuery: SavedQuery | undefined;
-}>('SET_SAVED_QUERY');
-
-export const setSearchBarFilter = actionCreator<{
-  id: InputsModelId;
-  filters: Filter[];
-}>('SET_SEARCH_BAR_FILTER');
diff --git a/x-pack/plugins/siem/public/store/inputs/model.ts b/x-pack/plugins/siem/public/store/inputs/model.ts
deleted file mode 100644
index 3e6be6ce859e59..00000000000000
--- a/x-pack/plugins/siem/public/store/inputs/model.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-/*
- * 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 { Dispatch } from 'redux';
-import { InputsModelId } from './constants';
-import { CONSTANTS } from '../../components/url_state/constants';
-import { Query, Filter, SavedQuery } from '../../../../../../src/plugins/data/public';
-
-export interface AbsoluteTimeRange {
-  kind: 'absolute';
-  fromStr: undefined;
-  toStr: undefined;
-  from: number;
-  to: number;
-}
-
-export interface RelativeTimeRange {
-  kind: 'relative';
-  fromStr: string;
-  toStr: string;
-  from: number;
-  to: number;
-}
-
-export const isRelativeTimeRange = (
-  timeRange: RelativeTimeRange | AbsoluteTimeRange | URLTimeRange
-): timeRange is RelativeTimeRange => timeRange.kind === 'relative';
-
-export const isAbsoluteTimeRange = (
-  timeRange: RelativeTimeRange | AbsoluteTimeRange | URLTimeRange
-): timeRange is AbsoluteTimeRange => timeRange.kind === 'absolute';
-
-export type TimeRange = AbsoluteTimeRange | RelativeTimeRange;
-
-export type URLTimeRange = Omit<TimeRange, 'from' | 'to'> & {
-  from: string | TimeRange['from'];
-  to: string | TimeRange['to'];
-};
-
-export interface Policy {
-  kind: 'manual' | 'interval';
-  duration: number; // in ms
-}
-
-interface InspectVariables {
-  inspect: boolean;
-}
-export type RefetchWithParams = ({ inspect }: InspectVariables) => void;
-export type RefetchKql = (dispatch: Dispatch) => boolean;
-export type Refetch = () => void;
-
-export interface InspectQuery {
-  dsl: string[];
-  response: string[];
-}
-
-export interface GlobalGenericQuery {
-  inspect: InspectQuery | null;
-  isInspected: boolean;
-  loading: boolean;
-  selectedInspectIndex: number;
-}
-
-export interface GlobalGraphqlQuery extends GlobalGenericQuery {
-  id: string;
-  refetch: null | Refetch | RefetchWithParams;
-}
-export interface GlobalKqlQuery extends GlobalGenericQuery {
-  id: 'kql';
-  refetch: RefetchKql;
-}
-
-export type GlobalQuery = GlobalGraphqlQuery | GlobalKqlQuery;
-
-export interface InputsRange {
-  timerange: TimeRange;
-  policy: Policy;
-  queries: GlobalQuery[];
-  linkTo: InputsModelId[];
-  query: Query;
-  filters: Filter[];
-  savedQuery?: SavedQuery;
-}
-
-export interface LinkTo {
-  linkTo: InputsModelId[];
-}
-
-export interface InputsModel {
-  global: InputsRange;
-  timeline: InputsRange;
-}
-export interface UrlInputsModelInputs {
-  linkTo: InputsModelId[];
-  [CONSTANTS.timerange]: TimeRange;
-}
-export interface UrlInputsModel {
-  global: UrlInputsModelInputs;
-  timeline: UrlInputsModelInputs;
-}
diff --git a/x-pack/plugins/siem/public/store/model.ts b/x-pack/plugins/siem/public/store/model.ts
deleted file mode 100644
index 686dc096e61b01..00000000000000
--- a/x-pack/plugins/siem/public/store/model.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/*
- * 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.
- */
-
-export { appModel } from './app';
-export { dragAndDropModel } from './drag_and_drop';
-export { hostsModel } from './hosts';
-export { inputsModel } from './inputs';
-export { networkModel } from './network';
-export * from './types';
diff --git a/x-pack/plugins/siem/public/store/network/actions.ts b/x-pack/plugins/siem/public/store/network/actions.ts
deleted file mode 100644
index be7d9b1ad4518c..00000000000000
--- a/x-pack/plugins/siem/public/store/network/actions.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
- * 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 actionCreatorFactory from 'typescript-fsa';
-
-import { networkModel } from '../model';
-
-const actionCreator = actionCreatorFactory('x-pack/siem/local/network');
-
-export const updateNetworkTable = actionCreator<{
-  networkType: networkModel.NetworkType;
-  tableType: networkModel.NetworkTableType | networkModel.IpDetailsTableType;
-  updates: networkModel.TableUpdates;
-}>('UPDATE_NETWORK_TABLE');
-
-export const setIpDetailsTablesActivePageToZero = actionCreator(
-  'SET_IP_DETAILS_TABLES_ACTIVE_PAGE_TO_ZERO'
-);
-
-export const setNetworkTablesActivePageToZero = actionCreator(
-  'SET_NETWORK_TABLES_ACTIVE_PAGE_TO_ZERO'
-);
diff --git a/x-pack/plugins/siem/public/store/network/helpers.test.ts b/x-pack/plugins/siem/public/store/network/helpers.test.ts
deleted file mode 100644
index 933c2f05a57ba6..00000000000000
--- a/x-pack/plugins/siem/public/store/network/helpers.test.ts
+++ /dev/null
@@ -1,248 +0,0 @@
-/*
- * 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 {
-  Direction,
-  FlowTarget,
-  NetworkDnsFields,
-  NetworkTopTablesFields,
-  TlsFields,
-  UsersFields,
-} from '../../graphql/types';
-import { DEFAULT_TABLE_LIMIT } from '../constants';
-import { NetworkModel, NetworkTableType, IpDetailsTableType, NetworkType } from './model';
-import { setNetworkQueriesActivePageToZero } from './helpers';
-
-export const mockNetworkState: NetworkModel = {
-  page: {
-    queries: {
-      [NetworkTableType.topCountriesSource]: {
-        activePage: 7,
-        limit: DEFAULT_TABLE_LIMIT,
-        sort: {
-          field: NetworkTopTablesFields.bytes_out,
-          direction: Direction.desc,
-        },
-      },
-      [NetworkTableType.topCountriesDestination]: {
-        activePage: 3,
-        limit: DEFAULT_TABLE_LIMIT,
-        sort: {
-          field: NetworkTopTablesFields.bytes_out,
-          direction: Direction.desc,
-        },
-      },
-      [NetworkTableType.topNFlowSource]: {
-        activePage: 7,
-        limit: DEFAULT_TABLE_LIMIT,
-        sort: {
-          field: NetworkTopTablesFields.bytes_out,
-          direction: Direction.desc,
-        },
-      },
-      [NetworkTableType.topNFlowDestination]: {
-        activePage: 3,
-        limit: DEFAULT_TABLE_LIMIT,
-        sort: {
-          field: NetworkTopTablesFields.bytes_out,
-          direction: Direction.desc,
-        },
-      },
-      [NetworkTableType.dns]: {
-        activePage: 5,
-        limit: DEFAULT_TABLE_LIMIT,
-        sort: {
-          field: NetworkDnsFields.uniqueDomains,
-          direction: Direction.desc,
-        },
-        isPtrIncluded: false,
-      },
-      [NetworkTableType.tls]: {
-        activePage: 2,
-        limit: DEFAULT_TABLE_LIMIT,
-        sort: {
-          field: TlsFields._id,
-          direction: Direction.desc,
-        },
-      },
-      [NetworkTableType.http]: {
-        activePage: 0,
-        limit: DEFAULT_TABLE_LIMIT,
-        sort: { direction: Direction.desc },
-      },
-      [NetworkTableType.alerts]: {
-        activePage: 0,
-        limit: DEFAULT_TABLE_LIMIT,
-      },
-    },
-  },
-  details: {
-    queries: {
-      [IpDetailsTableType.topCountriesSource]: {
-        activePage: 7,
-        limit: DEFAULT_TABLE_LIMIT,
-        sort: {
-          field: NetworkTopTablesFields.bytes_out,
-          direction: Direction.desc,
-        },
-      },
-      [IpDetailsTableType.topCountriesDestination]: {
-        activePage: 3,
-        limit: DEFAULT_TABLE_LIMIT,
-        sort: {
-          field: NetworkTopTablesFields.bytes_out,
-          direction: Direction.desc,
-        },
-      },
-      [IpDetailsTableType.topNFlowSource]: {
-        activePage: 7,
-        limit: DEFAULT_TABLE_LIMIT,
-        sort: {
-          field: NetworkTopTablesFields.bytes_out,
-          direction: Direction.desc,
-        },
-      },
-      [IpDetailsTableType.topNFlowDestination]: {
-        activePage: 3,
-        limit: DEFAULT_TABLE_LIMIT,
-        sort: {
-          field: NetworkTopTablesFields.bytes_out,
-          direction: Direction.desc,
-        },
-      },
-      [IpDetailsTableType.tls]: {
-        activePage: 2,
-        limit: DEFAULT_TABLE_LIMIT,
-        sort: {
-          field: TlsFields._id,
-          direction: Direction.desc,
-        },
-      },
-      [IpDetailsTableType.users]: {
-        activePage: 6,
-        limit: DEFAULT_TABLE_LIMIT,
-        sort: {
-          field: UsersFields.name,
-          direction: Direction.asc,
-        },
-      },
-      [IpDetailsTableType.http]: {
-        activePage: 0,
-        limit: DEFAULT_TABLE_LIMIT,
-        sort: { direction: Direction.desc },
-      },
-    },
-    flowTarget: FlowTarget.source,
-  },
-};
-
-describe('Network redux store', () => {
-  describe('#setNetworkQueriesActivePageToZero', () => {
-    test('set activePage to zero for all queries in network page', () => {
-      expect(setNetworkQueriesActivePageToZero(mockNetworkState, NetworkType.page)).toEqual({
-        [NetworkTableType.topNFlowSource]: {
-          activePage: 0,
-          limit: 10,
-          sort: { field: 'bytes_out', direction: 'desc' },
-        },
-        [NetworkTableType.topNFlowDestination]: {
-          activePage: 0,
-          limit: 10,
-          sort: { field: 'bytes_out', direction: 'desc' },
-        },
-        [NetworkTableType.dns]: {
-          activePage: 0,
-          limit: 10,
-          sort: { field: 'uniqueDomains', direction: 'desc' },
-          isPtrIncluded: false,
-        },
-        [NetworkTableType.http]: {
-          activePage: 0,
-          limit: 10,
-          sort: {
-            direction: 'desc',
-          },
-        },
-        [NetworkTableType.tls]: {
-          activePage: 0,
-          limit: 10,
-          sort: {
-            direction: 'desc',
-            field: '_id',
-          },
-        },
-        [NetworkTableType.topCountriesDestination]: {
-          activePage: 0,
-          limit: 10,
-          sort: {
-            direction: 'desc',
-            field: 'bytes_out',
-          },
-        },
-        [NetworkTableType.topCountriesSource]: {
-          activePage: 0,
-          limit: 10,
-          sort: {
-            direction: 'desc',
-            field: 'bytes_out',
-          },
-        },
-        [NetworkTableType.alerts]: {
-          activePage: 0,
-          limit: 10,
-        },
-      });
-    });
-
-    test('set activePage to zero for all queries in ip details  ', () => {
-      expect(setNetworkQueriesActivePageToZero(mockNetworkState, NetworkType.details)).toEqual({
-        [IpDetailsTableType.topNFlowSource]: {
-          activePage: 0,
-          limit: 10,
-          sort: { field: 'bytes_out', direction: 'desc' },
-        },
-        [IpDetailsTableType.topNFlowDestination]: {
-          activePage: 0,
-          limit: 10,
-          sort: { field: 'bytes_out', direction: 'desc' },
-        },
-        [IpDetailsTableType.topCountriesDestination]: {
-          activePage: 0,
-          limit: 10,
-          sort: {
-            direction: 'desc',
-            field: 'bytes_out',
-          },
-        },
-        [IpDetailsTableType.topCountriesSource]: {
-          activePage: 0,
-          limit: 10,
-          sort: {
-            direction: 'desc',
-            field: 'bytes_out',
-          },
-        },
-        [IpDetailsTableType.http]: {
-          activePage: 0,
-          limit: 10,
-          sort: {
-            direction: 'desc',
-          },
-        },
-        [IpDetailsTableType.tls]: {
-          activePage: 0,
-          limit: 10,
-          sort: { field: '_id', direction: 'desc' },
-        },
-        [IpDetailsTableType.users]: {
-          activePage: 0,
-          limit: 10,
-          sort: { field: 'name', direction: 'asc' },
-        },
-      });
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/store/network/helpers.ts b/x-pack/plugins/siem/public/store/network/helpers.ts
deleted file mode 100644
index 0b3a5e65346b8f..00000000000000
--- a/x-pack/plugins/siem/public/store/network/helpers.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-/*
- * 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 {
-  NetworkModel,
-  NetworkType,
-  NetworkTableType,
-  IpDetailsTableType,
-  NetworkQueries,
-  IpOverviewQueries,
-} from './model';
-import { DEFAULT_TABLE_ACTIVE_PAGE } from '../constants';
-
-export const setNetworkPageQueriesActivePageToZero = (state: NetworkModel): NetworkQueries => ({
-  ...state.page.queries,
-  [NetworkTableType.topCountriesSource]: {
-    ...state.page.queries[NetworkTableType.topCountriesSource],
-    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-  },
-  [NetworkTableType.topCountriesDestination]: {
-    ...state.page.queries[NetworkTableType.topCountriesDestination],
-    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-  },
-  [NetworkTableType.topNFlowSource]: {
-    ...state.page.queries[NetworkTableType.topNFlowSource],
-    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-  },
-  [NetworkTableType.topNFlowDestination]: {
-    ...state.page.queries[NetworkTableType.topNFlowDestination],
-    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-  },
-  [NetworkTableType.dns]: {
-    ...state.page.queries[NetworkTableType.dns],
-    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-  },
-  [NetworkTableType.tls]: {
-    ...state.page.queries[NetworkTableType.tls],
-    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-  },
-  [NetworkTableType.http]: {
-    ...state.page.queries[NetworkTableType.http],
-    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-  },
-});
-
-export const setNetworkDetailsQueriesActivePageToZero = (
-  state: NetworkModel
-): IpOverviewQueries => ({
-  ...state.details.queries,
-  [IpDetailsTableType.topCountriesSource]: {
-    ...state.details.queries[IpDetailsTableType.topCountriesSource],
-    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-  },
-  [IpDetailsTableType.topCountriesDestination]: {
-    ...state.details.queries[IpDetailsTableType.topCountriesDestination],
-    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-  },
-  [IpDetailsTableType.topNFlowSource]: {
-    ...state.details.queries[IpDetailsTableType.topNFlowSource],
-    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-  },
-  [IpDetailsTableType.topNFlowDestination]: {
-    ...state.details.queries[IpDetailsTableType.topNFlowDestination],
-    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-  },
-  [IpDetailsTableType.tls]: {
-    ...state.details.queries[IpDetailsTableType.tls],
-    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-  },
-  [IpDetailsTableType.users]: {
-    ...state.details.queries[IpDetailsTableType.users],
-    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-  },
-  [IpDetailsTableType.http]: {
-    ...state.details.queries[IpDetailsTableType.http],
-    activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-  },
-});
-
-export const setNetworkQueriesActivePageToZero = (
-  state: NetworkModel,
-  type: NetworkType
-): NetworkQueries | IpOverviewQueries => {
-  if (type === NetworkType.page) {
-    return setNetworkPageQueriesActivePageToZero(state);
-  } else if (type === NetworkType.details) {
-    return setNetworkDetailsQueriesActivePageToZero(state);
-  }
-  throw new Error(`NetworkType ${type} is unknown`);
-};
diff --git a/x-pack/plugins/siem/public/store/network/index.ts b/x-pack/plugins/siem/public/store/network/index.ts
deleted file mode 100644
index dcd32fe17ac97f..00000000000000
--- a/x-pack/plugins/siem/public/store/network/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/*
- * 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 * as networkActions from './actions';
-import * as networkModel from './model';
-import * as networkSelectors from './selectors';
-
-export { networkActions, networkModel, networkSelectors };
-export * from './reducer';
diff --git a/x-pack/plugins/siem/public/store/network/reducer.ts b/x-pack/plugins/siem/public/store/network/reducer.ts
deleted file mode 100644
index e6d7efc9cbb5f4..00000000000000
--- a/x-pack/plugins/siem/public/store/network/reducer.ts
+++ /dev/null
@@ -1,191 +0,0 @@
-/*
- * 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 { reducerWithInitialState } from 'typescript-fsa-reducers';
-import { get } from 'lodash/fp';
-import {
-  Direction,
-  FlowTarget,
-  NetworkDnsFields,
-  NetworkTopTablesFields,
-  TlsFields,
-  UsersFields,
-} from '../../graphql/types';
-import { DEFAULT_TABLE_ACTIVE_PAGE, DEFAULT_TABLE_LIMIT } from '../constants';
-
-import {
-  setIpDetailsTablesActivePageToZero,
-  setNetworkTablesActivePageToZero,
-  updateNetworkTable,
-} from './actions';
-import {
-  setNetworkDetailsQueriesActivePageToZero,
-  setNetworkPageQueriesActivePageToZero,
-} from './helpers';
-import { IpDetailsTableType, NetworkModel, NetworkTableType } from './model';
-
-export type NetworkState = NetworkModel;
-
-export const initialNetworkState: NetworkState = {
-  page: {
-    queries: {
-      [NetworkTableType.topNFlowSource]: {
-        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-        limit: DEFAULT_TABLE_LIMIT,
-        sort: {
-          field: NetworkTopTablesFields.bytes_out,
-          direction: Direction.desc,
-        },
-      },
-      [NetworkTableType.topNFlowDestination]: {
-        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-        limit: DEFAULT_TABLE_LIMIT,
-        sort: {
-          field: NetworkTopTablesFields.bytes_in,
-          direction: Direction.desc,
-        },
-      },
-      [NetworkTableType.dns]: {
-        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-        limit: DEFAULT_TABLE_LIMIT,
-        sort: {
-          field: NetworkDnsFields.uniqueDomains,
-          direction: Direction.desc,
-        },
-        isPtrIncluded: false,
-      },
-      [NetworkTableType.http]: {
-        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-        limit: DEFAULT_TABLE_LIMIT,
-        sort: {
-          direction: Direction.desc,
-        },
-      },
-      [NetworkTableType.tls]: {
-        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-        limit: DEFAULT_TABLE_LIMIT,
-        sort: {
-          field: TlsFields._id,
-          direction: Direction.desc,
-        },
-      },
-      [NetworkTableType.topCountriesSource]: {
-        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-        limit: DEFAULT_TABLE_LIMIT,
-        sort: {
-          field: NetworkTopTablesFields.bytes_out,
-          direction: Direction.desc,
-        },
-      },
-      [NetworkTableType.topCountriesDestination]: {
-        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-        limit: DEFAULT_TABLE_LIMIT,
-        sort: {
-          field: NetworkTopTablesFields.bytes_in,
-          direction: Direction.desc,
-        },
-      },
-      [NetworkTableType.alerts]: {
-        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-        limit: DEFAULT_TABLE_LIMIT,
-      },
-    },
-  },
-  details: {
-    queries: {
-      [IpDetailsTableType.http]: {
-        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-        limit: DEFAULT_TABLE_LIMIT,
-        sort: {
-          direction: Direction.desc,
-        },
-      },
-      [IpDetailsTableType.topCountriesSource]: {
-        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-        limit: DEFAULT_TABLE_LIMIT,
-        sort: {
-          field: NetworkTopTablesFields.bytes_out,
-          direction: Direction.desc,
-        },
-      },
-      [IpDetailsTableType.topCountriesDestination]: {
-        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-        limit: DEFAULT_TABLE_LIMIT,
-        sort: {
-          field: NetworkTopTablesFields.bytes_in,
-          direction: Direction.desc,
-        },
-      },
-      [IpDetailsTableType.topNFlowSource]: {
-        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-        limit: DEFAULT_TABLE_LIMIT,
-        sort: {
-          field: NetworkTopTablesFields.bytes_out,
-          direction: Direction.desc,
-        },
-      },
-      [IpDetailsTableType.topNFlowDestination]: {
-        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-        limit: DEFAULT_TABLE_LIMIT,
-        sort: {
-          field: NetworkTopTablesFields.bytes_in,
-          direction: Direction.desc,
-        },
-      },
-      [IpDetailsTableType.tls]: {
-        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-        limit: DEFAULT_TABLE_LIMIT,
-        sort: {
-          field: TlsFields._id,
-          direction: Direction.desc,
-        },
-      },
-      [IpDetailsTableType.users]: {
-        activePage: DEFAULT_TABLE_ACTIVE_PAGE,
-        limit: DEFAULT_TABLE_LIMIT,
-        sort: {
-          field: UsersFields.name,
-          direction: Direction.asc,
-        },
-      },
-    },
-    flowTarget: FlowTarget.source,
-  },
-};
-
-export const networkReducer = reducerWithInitialState(initialNetworkState)
-  .case(updateNetworkTable, (state, { networkType, tableType, updates }) => ({
-    ...state,
-    [networkType]: {
-      ...state[networkType],
-      queries: {
-        ...state[networkType].queries,
-        [tableType]: {
-          ...get([networkType, 'queries', tableType], state),
-          ...updates,
-        },
-      },
-    },
-  }))
-  .case(setNetworkTablesActivePageToZero, state => ({
-    ...state,
-    page: {
-      ...state.page,
-      queries: setNetworkPageQueriesActivePageToZero(state),
-    },
-    details: {
-      ...state.details,
-      queries: setNetworkDetailsQueriesActivePageToZero(state),
-    },
-  }))
-  .case(setIpDetailsTablesActivePageToZero, state => ({
-    ...state,
-    details: {
-      ...state.details,
-      queries: setNetworkDetailsQueriesActivePageToZero(state),
-    },
-  }))
-  .build();
diff --git a/x-pack/plugins/siem/public/store/network/selectors.ts b/x-pack/plugins/siem/public/store/network/selectors.ts
deleted file mode 100644
index 273eaf7c0ee7fe..00000000000000
--- a/x-pack/plugins/siem/public/store/network/selectors.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-/*
- * 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 { createSelector } from 'reselect';
-import { get } from 'lodash/fp';
-
-import { FlowTargetSourceDest } from '../../graphql/types';
-import { State } from '../reducer';
-import { initialNetworkState } from './reducer';
-import {
-  IpDetailsTableType,
-  NetworkDetailsModel,
-  NetworkPageModel,
-  NetworkTableType,
-  NetworkType,
-  TopCountriesQuery,
-  TlsQuery,
-  HttpQuery,
-} from './model';
-
-const selectNetworkPage = (state: State): NetworkPageModel => state.network.page;
-
-const selectNetworkDetails = (state: State): NetworkDetailsModel => state.network.details;
-
-// Network Page Selectors
-export const dnsSelector = () => createSelector(selectNetworkPage, network => network.queries.dns);
-
-const selectTopNFlowByType = (
-  state: State,
-  networkType: NetworkType,
-  flowTarget: FlowTargetSourceDest
-) => {
-  const ft = flowTarget === FlowTargetSourceDest.source ? 'topNFlowSource' : 'topNFlowDestination';
-  const nFlowType =
-    networkType === NetworkType.page ? NetworkTableType[ft] : IpDetailsTableType[ft];
-  return (
-    get([networkType, 'queries', nFlowType], state.network) ||
-    get([networkType, 'queries', nFlowType], initialNetworkState)
-  );
-};
-
-export const topNFlowSelector = () =>
-  createSelector(selectTopNFlowByType, topNFlowQueries => topNFlowQueries);
-const selectTlsByType = (state: State, networkType: NetworkType): TlsQuery => {
-  const tlsType = networkType === NetworkType.page ? NetworkTableType.tls : IpDetailsTableType.tls;
-  return (
-    get([networkType, 'queries', tlsType], state.network) ||
-    get([networkType, 'queries', tlsType], initialNetworkState)
-  );
-};
-
-export const tlsSelector = () => createSelector(selectTlsByType, tlsQueries => tlsQueries);
-
-const selectTopCountriesByType = (
-  state: State,
-  networkType: NetworkType,
-  flowTarget: FlowTargetSourceDest
-): TopCountriesQuery => {
-  const ft =
-    flowTarget === FlowTargetSourceDest.source ? 'topCountriesSource' : 'topCountriesDestination';
-  const nFlowType =
-    networkType === NetworkType.page ? NetworkTableType[ft] : IpDetailsTableType[ft];
-
-  return (
-    get([networkType, 'queries', nFlowType], state.network) ||
-    get([networkType, 'queries', nFlowType], initialNetworkState)
-  );
-};
-
-export const topCountriesSelector = () =>
-  createSelector(selectTopCountriesByType, topCountriesQueries => topCountriesQueries);
-
-const selectHttpByType = (state: State, networkType: NetworkType): HttpQuery => {
-  const httpType =
-    networkType === NetworkType.page ? NetworkTableType.http : IpDetailsTableType.http;
-  return (
-    get([networkType, 'queries', httpType], state.network) ||
-    get([networkType, 'queries', httpType], initialNetworkState)
-  );
-};
-
-export const httpSelector = () => createSelector(selectHttpByType, httpQueries => httpQueries);
-
-export const usersSelector = () =>
-  createSelector(selectNetworkDetails, network => network.queries.users);
diff --git a/x-pack/plugins/siem/public/store/reducer.ts b/x-pack/plugins/siem/public/store/reducer.ts
deleted file mode 100644
index 32554653febd55..00000000000000
--- a/x-pack/plugins/siem/public/store/reducer.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
- * 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 { combineReducers } from 'redux';
-
-import { appReducer, AppState, initialAppState } from './app';
-import { dragAndDropReducer, DragAndDropState, initialDragAndDropState } from './drag_and_drop';
-import { hostsReducer, HostsState, initialHostsState } from './hosts';
-import { createInitialInputsState, initialInputsState, inputsReducer, InputsState } from './inputs';
-import { initialNetworkState, networkReducer, NetworkState } from './network';
-import { initialTimelineState, timelineReducer } from './timeline/reducer';
-import { TimelineState } from './timeline/types';
-
-export interface State {
-  app: AppState;
-  dragAndDrop: DragAndDropState;
-  hosts: HostsState;
-  inputs: InputsState;
-  network: NetworkState;
-  timeline: TimelineState;
-}
-
-export const initialState: State = {
-  app: initialAppState,
-  dragAndDrop: initialDragAndDropState,
-  hosts: initialHostsState,
-  inputs: initialInputsState,
-  network: initialNetworkState,
-  timeline: initialTimelineState,
-};
-
-export const createInitialState = (): State => ({
-  ...initialState,
-  inputs: createInitialInputsState(),
-});
-
-export const reducer = combineReducers<State>({
-  app: appReducer,
-  dragAndDrop: dragAndDropReducer,
-  hosts: hostsReducer,
-  inputs: inputsReducer,
-  network: networkReducer,
-  timeline: timelineReducer,
-});
diff --git a/x-pack/plugins/siem/public/store/selectors.ts b/x-pack/plugins/siem/public/store/selectors.ts
deleted file mode 100644
index b188f95ad27cfa..00000000000000
--- a/x-pack/plugins/siem/public/store/selectors.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/*
- * 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.
- */
-
-export { appSelectors } from './app';
-export { dragAndDropSelectors } from './drag_and_drop';
-export { hostsSelectors } from './hosts';
-export { inputsSelectors } from './inputs';
-export { networkSelectors } from './network';
-export { timelineSelectors } from './timeline';
diff --git a/x-pack/plugins/siem/public/store/timeline/actions.ts b/x-pack/plugins/siem/public/store/timeline/actions.ts
deleted file mode 100644
index 12155decf40d44..00000000000000
--- a/x-pack/plugins/siem/public/store/timeline/actions.ts
+++ /dev/null
@@ -1,249 +0,0 @@
-/*
- * 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 actionCreatorFactory from 'typescript-fsa';
-
-import { Filter } from '../../../../../../src/plugins/data/public';
-import { Sort } from '../../components/timeline/body/sort';
-import {
-  DataProvider,
-  QueryOperator,
-} from '../../components/timeline/data_providers/data_provider';
-import { KueryFilterQuery, SerializedFilterQuery } from '../types';
-
-import { EventType, KqlMode, TimelineModel, ColumnHeaderOptions } from './model';
-import { TimelineNonEcsData } from '../../graphql/types';
-
-const actionCreator = actionCreatorFactory('x-pack/siem/local/timeline');
-
-export const addHistory = actionCreator<{ id: string; historyId: string }>('ADD_HISTORY');
-
-export const addNote = actionCreator<{ id: string; noteId: string }>('ADD_NOTE');
-
-export const addNoteToEvent = actionCreator<{ id: string; noteId: string; eventId: string }>(
-  'ADD_NOTE_TO_EVENT'
-);
-
-export const upsertColumn = actionCreator<{
-  column: ColumnHeaderOptions;
-  id: string;
-  index: number;
-}>('UPSERT_COLUMN');
-
-export const addProvider = actionCreator<{ id: string; provider: DataProvider }>('ADD_PROVIDER');
-
-export const applyDeltaToWidth = actionCreator<{
-  id: string;
-  delta: number;
-  bodyClientWidthPixels: number;
-  minWidthPixels: number;
-  maxWidthPercent: number;
-}>('APPLY_DELTA_TO_WIDTH');
-
-export const applyDeltaToColumnWidth = actionCreator<{
-  id: string;
-  columnId: string;
-  delta: number;
-}>('APPLY_DELTA_TO_COLUMN_WIDTH');
-
-export const createTimeline = actionCreator<{
-  id: string;
-  dataProviders?: DataProvider[];
-  dateRange?: {
-    start: number;
-    end: number;
-  };
-  filters?: Filter[];
-  columns: ColumnHeaderOptions[];
-  itemsPerPage?: number;
-  kqlQuery?: {
-    filterQuery: SerializedFilterQuery | null;
-    filterQueryDraft: KueryFilterQuery | null;
-  };
-  show?: boolean;
-  sort?: Sort;
-  showCheckboxes?: boolean;
-  showRowRenderers?: boolean;
-}>('CREATE_TIMELINE');
-
-export const pinEvent = actionCreator<{ id: string; eventId: string }>('PIN_EVENT');
-
-export const removeColumn = actionCreator<{
-  id: string;
-  columnId: string;
-}>('REMOVE_COLUMN');
-
-export const removeProvider = actionCreator<{
-  id: string;
-  providerId: string;
-  andProviderId?: string;
-}>('REMOVE_PROVIDER');
-
-export const showTimeline = actionCreator<{ id: string; show: boolean }>('SHOW_TIMELINE');
-
-export const unPinEvent = actionCreator<{ id: string; eventId: string }>('UN_PIN_EVENT');
-
-export const updateTimeline = actionCreator<{
-  id: string;
-  timeline: TimelineModel;
-}>('UPDATE_TIMELINE');
-
-export const addTimeline = actionCreator<{
-  id: string;
-  timeline: TimelineModel;
-}>('ADD_TIMELINE');
-
-export const startTimelineSaving = actionCreator<{
-  id: string;
-}>('START_TIMELINE_SAVING');
-
-export const endTimelineSaving = actionCreator<{
-  id: string;
-}>('END_TIMELINE_SAVING');
-
-export const updateIsLoading = actionCreator<{
-  id: string;
-  isLoading: boolean;
-}>('UPDATE_LOADING');
-
-export const updateColumns = actionCreator<{
-  id: string;
-  columns: ColumnHeaderOptions[];
-}>('UPDATE_COLUMNS');
-
-export const updateDataProviderEnabled = actionCreator<{
-  id: string;
-  enabled: boolean;
-  providerId: string;
-  andProviderId?: string;
-}>('TOGGLE_PROVIDER_ENABLED');
-
-export const updateDataProviderExcluded = actionCreator<{
-  id: string;
-  excluded: boolean;
-  providerId: string;
-  andProviderId?: string;
-}>('TOGGLE_PROVIDER_EXCLUDED');
-
-export const dataProviderEdited = actionCreator<{
-  andProviderId?: string;
-  excluded: boolean;
-  field: string;
-  id: string;
-  operator: QueryOperator;
-  providerId: string;
-  value: string | number;
-}>('DATA_PROVIDER_EDITED');
-
-export const updateDataProviderKqlQuery = actionCreator<{
-  id: string;
-  kqlQuery: string;
-  providerId: string;
-}>('PROVIDER_EDIT_KQL_QUERY');
-
-export const updateHighlightedDropAndProviderId = actionCreator<{
-  id: string;
-  providerId: string;
-}>('UPDATE_DROP_AND_PROVIDER');
-
-export const updateDescription = actionCreator<{ id: string; description: string }>(
-  'UPDATE_DESCRIPTION'
-);
-
-export const updateKqlMode = actionCreator<{ id: string; kqlMode: KqlMode }>('UPDATE_KQL_MODE');
-
-export const setKqlFilterQueryDraft = actionCreator<{
-  id: string;
-  filterQueryDraft: KueryFilterQuery;
-}>('SET_KQL_FILTER_QUERY_DRAFT');
-
-export const applyKqlFilterQuery = actionCreator<{
-  id: string;
-  filterQuery: SerializedFilterQuery;
-}>('APPLY_KQL_FILTER_QUERY');
-
-export const updateIsFavorite = actionCreator<{ id: string; isFavorite: boolean }>(
-  'UPDATE_IS_FAVORITE'
-);
-
-export const updateIsLive = actionCreator<{ id: string; isLive: boolean }>('UPDATE_IS_LIVE');
-
-export const updateItemsPerPage = actionCreator<{ id: string; itemsPerPage: number }>(
-  'UPDATE_ITEMS_PER_PAGE'
-);
-
-export const updateItemsPerPageOptions = actionCreator<{
-  id: string;
-  itemsPerPageOptions: number[];
-}>('UPDATE_ITEMS_PER_PAGE_OPTIONS');
-
-export const updateTitle = actionCreator<{ id: string; title: string }>('UPDATE_TITLE');
-
-export const updatePageIndex = actionCreator<{ id: string; activePage: number }>(
-  'UPDATE_PAGE_INDEX'
-);
-
-export const updateProviders = actionCreator<{ id: string; providers: DataProvider[] }>(
-  'UPDATE_PROVIDERS'
-);
-
-export const updateRange = actionCreator<{ id: string; start: number; end: number }>(
-  'UPDATE_RANGE'
-);
-
-export const updateSort = actionCreator<{ id: string; sort: Sort }>('UPDATE_SORT');
-
-export const updateAutoSaveMsg = actionCreator<{
-  timelineId: string | null;
-  newTimelineModel: TimelineModel | null;
-}>('UPDATE_AUTO_SAVE');
-
-export const showCallOutUnauthorizedMsg = actionCreator('SHOW_CALL_OUT_UNAUTHORIZED_MSG');
-
-export const setSavedQueryId = actionCreator<{
-  id: string;
-  savedQueryId: string | null;
-}>('SET_TIMELINE_SAVED_QUERY');
-
-export const setFilters = actionCreator<{
-  id: string;
-  filters: Filter[];
-}>('SET_TIMELINE_FILTERS');
-
-export const setSelected = actionCreator<{
-  id: string;
-  eventIds: Readonly<Record<string, TimelineNonEcsData[]>>;
-  isSelected: boolean;
-  isSelectAllChecked: boolean;
-}>('SET_TIMELINE_SELECTED');
-
-export const clearSelected = actionCreator<{
-  id: string;
-}>('CLEAR_TIMELINE_SELECTED');
-
-export const setEventsLoading = actionCreator<{
-  id: string;
-  eventIds: string[];
-  isLoading: boolean;
-}>('SET_TIMELINE_EVENTS_LOADING');
-
-export const clearEventsLoading = actionCreator<{
-  id: string;
-}>('CLEAR_TIMELINE_EVENTS_LOADING');
-
-export const setEventsDeleted = actionCreator<{
-  id: string;
-  eventIds: string[];
-  isDeleted: boolean;
-}>('SET_TIMELINE_EVENTS_DELETED');
-
-export const clearEventsDeleted = actionCreator<{
-  id: string;
-}>('CLEAR_TIMELINE_EVENTS_DELETED');
-
-export const updateEventType = actionCreator<{ id: string; eventType: EventType }>(
-  'UPDATE_EVENT_TYPE'
-);
diff --git a/x-pack/plugins/siem/public/store/timeline/epic.ts b/x-pack/plugins/siem/public/store/timeline/epic.ts
deleted file mode 100644
index a7b8c48b45068e..00000000000000
--- a/x-pack/plugins/siem/public/store/timeline/epic.ts
+++ /dev/null
@@ -1,394 +0,0 @@
-/*
- * 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 {
-  get,
-  has,
-  merge as mergeObject,
-  set,
-  omit,
-  isObject,
-  toString as fpToString,
-} from 'lodash/fp';
-import { Action } from 'redux';
-import { Epic } from 'redux-observable';
-import { from, Observable, empty, merge } from 'rxjs';
-import {
-  filter,
-  map,
-  startWith,
-  withLatestFrom,
-  debounceTime,
-  mergeMap,
-  concatMap,
-  delay,
-  takeUntil,
-} from 'rxjs/operators';
-
-import { esFilters, Filter, MatchAllFilter } from '../../../../../../src/plugins/data/public';
-import { TimelineType } from '../../../common/types/timeline';
-import { TimelineInput, ResponseTimeline, TimelineResult } from '../../graphql/types';
-import { AppApolloClient } from '../../lib/lib';
-import { addError } from '../app/actions';
-import { NotesById } from '../app/model';
-import { inputsModel } from '../inputs';
-
-import {
-  applyKqlFilterQuery,
-  addProvider,
-  dataProviderEdited,
-  removeColumn,
-  removeProvider,
-  updateColumns,
-  updateEventType,
-  updateDataProviderEnabled,
-  updateDataProviderExcluded,
-  updateDataProviderKqlQuery,
-  updateDescription,
-  updateKqlMode,
-  updateProviders,
-  updateRange,
-  updateSort,
-  upsertColumn,
-  updateTimeline,
-  updateTitle,
-  updateAutoSaveMsg,
-  setFilters,
-  setSavedQueryId,
-  startTimelineSaving,
-  endTimelineSaving,
-  createTimeline,
-  addTimeline,
-  showCallOutUnauthorizedMsg,
-} from './actions';
-import { ColumnHeaderOptions, TimelineModel } from './model';
-import { epicPersistNote, timelineNoteActionsType } from './epic_note';
-import { epicPersistPinnedEvent, timelinePinnedEventActionsType } from './epic_pinned_event';
-import { epicPersistTimelineFavorite, timelineFavoriteActionsType } from './epic_favorite';
-import { isNotNull } from './helpers';
-import { dispatcherTimelinePersistQueue } from './epic_dispatcher_timeline_persistence_queue';
-import { myEpicTimelineId } from './my_epic_timeline_id';
-import { ActionTimeline, TimelineById } from './types';
-import { persistTimeline } from '../../containers/timeline/api';
-import { ALL_TIMELINE_QUERY_ID } from '../../containers/timeline/all';
-
-interface TimelineEpicDependencies<State> {
-  timelineByIdSelector: (state: State) => TimelineById;
-  timelineTimeRangeSelector: (state: State) => inputsModel.TimeRange;
-  selectAllTimelineQuery: () => (state: State, id: string) => inputsModel.GlobalQuery;
-  selectNotesByIdSelector: (state: State) => NotesById;
-  apolloClient$: Observable<AppApolloClient>;
-}
-
-const timelineActionsType = [
-  applyKqlFilterQuery.type,
-  addProvider.type,
-  dataProviderEdited.type,
-  removeColumn.type,
-  removeProvider.type,
-  setFilters.type,
-  setSavedQueryId.type,
-  updateColumns.type,
-  updateDataProviderEnabled.type,
-  updateDataProviderExcluded.type,
-  updateDataProviderKqlQuery.type,
-  updateDescription.type,
-  updateEventType.type,
-  updateKqlMode.type,
-  updateProviders.type,
-  updateSort.type,
-  updateTitle.type,
-  updateRange.type,
-  upsertColumn.type,
-];
-
-const isItAtimelineAction = (timelineId: string | undefined) =>
-  timelineId && timelineId.toLowerCase().startsWith('timeline');
-
-export const createTimelineEpic = <State>(): Epic<
-  Action,
-  Action,
-  State,
-  TimelineEpicDependencies<State>
-> => (
-  action$,
-  state$,
-  {
-    selectAllTimelineQuery,
-    selectNotesByIdSelector,
-    timelineByIdSelector,
-    timelineTimeRangeSelector,
-    apolloClient$,
-  }
-) => {
-  const timeline$ = state$.pipe(map(timelineByIdSelector), filter(isNotNull));
-
-  const allTimelineQuery$ = state$.pipe(
-    map(state => {
-      const getQuery = selectAllTimelineQuery();
-      return getQuery(state, ALL_TIMELINE_QUERY_ID);
-    }),
-    filter(isNotNull)
-  );
-
-  const notes$ = state$.pipe(map(selectNotesByIdSelector), filter(isNotNull));
-
-  const timelineTimeRange$ = state$.pipe(map(timelineTimeRangeSelector), filter(isNotNull));
-
-  return merge(
-    action$.pipe(
-      withLatestFrom(timeline$),
-      filter(([action, timeline]) => {
-        const timelineId: string = get('payload.id', action);
-        const timelineObj: TimelineModel = timeline[timelineId];
-        if (action.type === addError.type) {
-          return true;
-        }
-        if (action.type === createTimeline.type && isItAtimelineAction(timelineId)) {
-          myEpicTimelineId.setTimelineId(null);
-          myEpicTimelineId.setTimelineVersion(null);
-        } else if (action.type === addTimeline.type && isItAtimelineAction(timelineId)) {
-          const addNewTimeline: TimelineModel = get('payload.timeline', action);
-          myEpicTimelineId.setTimelineId(addNewTimeline.savedObjectId);
-          myEpicTimelineId.setTimelineVersion(addNewTimeline.version);
-          return true;
-        } else if (
-          timelineActionsType.includes(action.type) &&
-          !timelineObj.isLoading &&
-          isItAtimelineAction(timelineId)
-        ) {
-          return true;
-        }
-        return false;
-      }),
-      debounceTime(500),
-      mergeMap(([action]) => {
-        dispatcherTimelinePersistQueue.next({ action });
-        return empty();
-      })
-    ),
-    dispatcherTimelinePersistQueue.pipe(
-      delay(500),
-      withLatestFrom(timeline$, apolloClient$, notes$, timelineTimeRange$),
-      concatMap(([objAction, timeline, apolloClient, notes, timelineTimeRange]) => {
-        const action: ActionTimeline = get('action', objAction);
-        const timelineId = myEpicTimelineId.getTimelineId();
-        const version = myEpicTimelineId.getTimelineVersion();
-
-        if (timelineNoteActionsType.includes(action.type)) {
-          return epicPersistNote(
-            apolloClient,
-            action,
-            timeline,
-            notes,
-            action$,
-            timeline$,
-            notes$,
-            allTimelineQuery$
-          );
-        } else if (timelinePinnedEventActionsType.includes(action.type)) {
-          return epicPersistPinnedEvent(
-            apolloClient,
-            action,
-            timeline,
-            action$,
-            timeline$,
-            allTimelineQuery$
-          );
-        } else if (timelineFavoriteActionsType.includes(action.type)) {
-          return epicPersistTimelineFavorite(
-            apolloClient,
-            action,
-            timeline,
-            action$,
-            timeline$,
-            allTimelineQuery$
-          );
-        } else if (timelineActionsType.includes(action.type)) {
-          return from(
-            persistTimeline({
-              timelineId,
-              version,
-              timeline: convertTimelineAsInput(timeline[action.payload.id], timelineTimeRange),
-            })
-          ).pipe(
-            withLatestFrom(timeline$, allTimelineQuery$),
-            mergeMap(([result, recentTimeline, allTimelineQuery]) => {
-              const savedTimeline = recentTimeline[action.payload.id];
-              const response: ResponseTimeline = get('data.persistTimeline', result);
-              const callOutMsg = response.code === 403 ? [showCallOutUnauthorizedMsg()] : [];
-
-              if (allTimelineQuery.refetch != null) {
-                (allTimelineQuery.refetch as inputsModel.Refetch)();
-              }
-
-              return [
-                response.code === 409
-                  ? updateAutoSaveMsg({
-                      timelineId: action.payload.id,
-                      newTimelineModel: omitTypenameInTimeline(savedTimeline, response.timeline),
-                    })
-                  : updateTimeline({
-                      id: action.payload.id,
-                      timeline: {
-                        ...savedTimeline,
-                        savedObjectId: response.timeline.savedObjectId,
-                        version: response.timeline.version,
-                        timelineType: response.timeline.timelineType ?? TimelineType.default,
-                        templateTimelineId: response.timeline.templateTimelineId ?? null,
-                        templateTimelineVersion: response.timeline.templateTimelineVersion ?? null,
-                        isSaving: false,
-                      },
-                    }),
-                ...callOutMsg,
-                endTimelineSaving({
-                  id: action.payload.id,
-                }),
-              ];
-            }),
-            startWith(startTimelineSaving({ id: action.payload.id })),
-            takeUntil(
-              action$.pipe(
-                withLatestFrom(timeline$),
-                filter(([checkAction, updatedTimeline]) => {
-                  if (
-                    checkAction.type === endTimelineSaving.type &&
-                    updatedTimeline[get('payload.id', checkAction)].savedObjectId != null
-                  ) {
-                    myEpicTimelineId.setTimelineId(
-                      updatedTimeline[get('payload.id', checkAction)].savedObjectId
-                    );
-                    myEpicTimelineId.setTimelineVersion(
-                      updatedTimeline[get('payload.id', checkAction)].version
-                    );
-                    return true;
-                  }
-                  return false;
-                })
-              )
-            )
-          );
-        }
-        return empty();
-      })
-    )
-  );
-};
-
-const timelineInput: TimelineInput = {
-  columns: null,
-  dataProviders: null,
-  description: null,
-  eventType: null,
-  filters: null,
-  kqlMode: null,
-  kqlQuery: null,
-  title: null,
-  timelineType: TimelineType.default,
-  templateTimelineVersion: null,
-  templateTimelineId: null,
-  dateRange: null,
-  savedQueryId: null,
-  sort: null,
-};
-
-export const convertTimelineAsInput = (
-  timeline: TimelineModel,
-  timelineTimeRange: inputsModel.TimeRange
-): TimelineInput =>
-  Object.keys(timelineInput).reduce<TimelineInput>((acc, key) => {
-    if (has(key, timeline)) {
-      if (key === 'kqlQuery') {
-        return set(`${key}.filterQuery`, get(`${key}.filterQuery`, timeline), acc);
-      } else if (key === 'dateRange') {
-        return set(`${key}`, { start: timelineTimeRange.from, end: timelineTimeRange.to }, acc);
-      } else if (key === 'columns' && get(key, timeline) != null) {
-        return set(
-          key,
-          get(key, timeline).map((col: ColumnHeaderOptions) => omit(['width', '__typename'], col)),
-          acc
-        );
-      } else if (key === 'filters' && get(key, timeline) != null) {
-        const filters = get(key, timeline);
-        return set(
-          key,
-          filters != null
-            ? filters.map((myFilter: Filter) => {
-                const basicFilter = omit(['$state'], myFilter);
-                return {
-                  ...basicFilter,
-                  meta: {
-                    ...basicFilter.meta,
-                    field:
-                      (esFilters.isMatchAllFilter(basicFilter) ||
-                        esFilters.isPhraseFilter(basicFilter) ||
-                        esFilters.isPhrasesFilter(basicFilter) ||
-                        esFilters.isRangeFilter(basicFilter)) &&
-                      basicFilter.meta.field != null
-                        ? convertToString(basicFilter.meta.field)
-                        : null,
-                    value:
-                      basicFilter.meta.value != null
-                        ? convertToString(basicFilter.meta.value)
-                        : null,
-                    params:
-                      basicFilter.meta.params != null
-                        ? convertToString(basicFilter.meta.params)
-                        : null,
-                  },
-                  ...(esFilters.isMatchAllFilter(basicFilter)
-                    ? {
-                        match_all: convertToString((basicFilter as MatchAllFilter).match_all),
-                      }
-                    : { match_all: null }),
-                  ...(esFilters.isMissingFilter(basicFilter) && basicFilter.missing != null
-                    ? { missing: convertToString(basicFilter.missing) }
-                    : { missing: null }),
-                  ...(esFilters.isExistsFilter(basicFilter) && basicFilter.exists != null
-                    ? { exists: convertToString(basicFilter.exists) }
-                    : { exists: null }),
-                  ...((esFilters.isQueryStringFilter(basicFilter) ||
-                    get('query', basicFilter) != null) &&
-                  basicFilter.query != null
-                    ? { query: convertToString(basicFilter.query) }
-                    : { query: null }),
-                  ...(esFilters.isRangeFilter(basicFilter) && basicFilter.range != null
-                    ? { range: convertToString(basicFilter.range) }
-                    : { range: null }),
-                  ...(esFilters.isRangeFilter(basicFilter) &&
-                  basicFilter.script !=
-                    null /* TODO remove it when PR50713 is merged || esFilters.isPhraseFilter(basicFilter) */
-                    ? { script: convertToString(basicFilter.script) }
-                    : { script: null }),
-                };
-              })
-            : [],
-          acc
-        );
-      }
-      return set(key, get(key, timeline), acc);
-    }
-    return acc;
-  }, timelineInput);
-
-const omitTypename = (key: string, value: keyof TimelineModel) =>
-  key === '__typename' ? undefined : value;
-
-const omitTypenameInTimeline = (
-  oldTimeline: TimelineModel,
-  newTimeline: TimelineResult
-): TimelineModel => JSON.parse(JSON.stringify(mergeObject(oldTimeline, newTimeline)), omitTypename);
-
-const convertToString = (obj: unknown) => {
-  try {
-    if (isObject(obj)) {
-      return JSON.stringify(obj);
-    }
-    return fpToString(obj);
-  } catch {
-    return '';
-  }
-};
diff --git a/x-pack/plugins/siem/public/store/timeline/helpers.ts b/x-pack/plugins/siem/public/store/timeline/helpers.ts
deleted file mode 100644
index adab029c11150d..00000000000000
--- a/x-pack/plugins/siem/public/store/timeline/helpers.ts
+++ /dev/null
@@ -1,1325 +0,0 @@
-/*
- * 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 { getOr, omit, uniq, isEmpty, isEqualWith, union } from 'lodash/fp';
-
-import { Filter } from '../../../../../../src/plugins/data/public';
-
-import { getColumnWidthFromType } from '../../components/timeline/body/column_headers/helpers';
-import { Sort } from '../../components/timeline/body/sort';
-import {
-  DataProvider,
-  QueryOperator,
-  QueryMatch,
-} from '../../components/timeline/data_providers/data_provider';
-import { KueryFilterQuery, SerializedFilterQuery } from '../model';
-
-import { timelineDefaults } from './defaults';
-import { ColumnHeaderOptions, KqlMode, TimelineModel, EventType } from './model';
-import { TimelineById, TimelineState } from './types';
-import { TimelineNonEcsData } from '../../graphql/types';
-
-const EMPTY_TIMELINE_BY_ID: TimelineById = {}; // stable reference
-
-export const isNotNull = <T>(value: T | null): value is T => value !== null;
-
-export const initialTimelineState: TimelineState = {
-  timelineById: EMPTY_TIMELINE_BY_ID,
-  autoSavedWarningMsg: {
-    timelineId: null,
-    newTimelineModel: null,
-  },
-  showCallOutUnauthorizedMsg: false,
-};
-
-interface AddTimelineHistoryParams {
-  id: string;
-  historyId: string;
-  timelineById: TimelineById;
-}
-
-export const addTimelineHistory = ({
-  id,
-  historyId,
-  timelineById,
-}: AddTimelineHistoryParams): TimelineById => {
-  const timeline = timelineById[id];
-
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      historyIds: uniq([...timeline.historyIds, historyId]),
-    },
-  };
-};
-
-interface AddTimelineNoteParams {
-  id: string;
-  noteId: string;
-  timelineById: TimelineById;
-}
-
-export const addTimelineNote = ({
-  id,
-  noteId,
-  timelineById,
-}: AddTimelineNoteParams): TimelineById => {
-  const timeline = timelineById[id];
-
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      noteIds: [...timeline.noteIds, noteId],
-    },
-  };
-};
-
-interface AddTimelineNoteToEventParams {
-  id: string;
-  noteId: string;
-  eventId: string;
-  timelineById: TimelineById;
-}
-
-export const addTimelineNoteToEvent = ({
-  id,
-  noteId,
-  eventId,
-  timelineById,
-}: AddTimelineNoteToEventParams): TimelineById => {
-  const timeline = timelineById[id];
-  const existingNoteIds = getOr([], `eventIdToNoteIds.${eventId}`, timeline);
-
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      eventIdToNoteIds: {
-        ...timeline.eventIdToNoteIds,
-        ...{ [eventId]: uniq([...existingNoteIds, noteId]) },
-      },
-    },
-  };
-};
-
-interface AddTimelineParams {
-  id: string;
-  timeline: TimelineModel;
-  timelineById: TimelineById;
-}
-
-/**
- * Add a saved object timeline to the store
- * and default the value to what need to be if values are null
- */
-export const addTimelineToStore = ({
-  id,
-  timeline,
-  timelineById,
-}: AddTimelineParams): TimelineById => ({
-  ...timelineById,
-  [id]: {
-    ...timeline,
-    isLoading: timelineById[id].isLoading,
-  },
-});
-
-interface AddNewTimelineParams {
-  columns: ColumnHeaderOptions[];
-  dataProviders?: DataProvider[];
-  dateRange?: {
-    start: number;
-    end: number;
-  };
-  filters?: Filter[];
-  id: string;
-  itemsPerPage?: number;
-  kqlQuery?: {
-    filterQuery: SerializedFilterQuery | null;
-    filterQueryDraft: KueryFilterQuery | null;
-  };
-  show?: boolean;
-  sort?: Sort;
-  showCheckboxes?: boolean;
-  showRowRenderers?: boolean;
-  timelineById: TimelineById;
-}
-
-/** Adds a new `Timeline` to the provided collection of `TimelineById` */
-export const addNewTimeline = ({
-  columns,
-  dataProviders = [],
-  dateRange = { start: 0, end: 0 },
-  filters = timelineDefaults.filters,
-  id,
-  itemsPerPage = timelineDefaults.itemsPerPage,
-  kqlQuery = { filterQuery: null, filterQueryDraft: null },
-  sort = timelineDefaults.sort,
-  show = false,
-  showCheckboxes = false,
-  showRowRenderers = true,
-  timelineById,
-}: AddNewTimelineParams): TimelineById => ({
-  ...timelineById,
-  [id]: {
-    id,
-    ...timelineDefaults,
-    columns,
-    dataProviders,
-    dateRange,
-    filters,
-    itemsPerPage,
-    kqlQuery,
-    sort,
-    show,
-    savedObjectId: null,
-    version: null,
-    isSaving: false,
-    isLoading: false,
-    showCheckboxes,
-    showRowRenderers,
-  },
-});
-
-interface PinTimelineEventParams {
-  id: string;
-  eventId: string;
-  timelineById: TimelineById;
-}
-
-export const pinTimelineEvent = ({
-  id,
-  eventId,
-  timelineById,
-}: PinTimelineEventParams): TimelineById => {
-  const timeline = timelineById[id];
-
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      pinnedEventIds: {
-        ...timeline.pinnedEventIds,
-        ...{ [eventId]: true },
-      },
-    },
-  };
-};
-
-interface UpdateShowTimelineProps {
-  id: string;
-  show: boolean;
-  timelineById: TimelineById;
-}
-
-export const updateTimelineShowTimeline = ({
-  id,
-  show,
-  timelineById,
-}: UpdateShowTimelineProps): TimelineById => {
-  const timeline = timelineById[id];
-
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      show,
-    },
-  };
-};
-
-interface ApplyDeltaToCurrentWidthParams {
-  id: string;
-  delta: number;
-  bodyClientWidthPixels: number;
-  minWidthPixels: number;
-  maxWidthPercent: number;
-  timelineById: TimelineById;
-}
-
-export const applyDeltaToCurrentWidth = ({
-  id,
-  delta,
-  bodyClientWidthPixels,
-  minWidthPixels,
-  maxWidthPercent,
-  timelineById,
-}: ApplyDeltaToCurrentWidthParams): TimelineById => {
-  const timeline = timelineById[id];
-
-  const requestedWidth = timeline.width + delta * -1; // raw change in width
-  const maxWidthPixels = (maxWidthPercent / 100) * bodyClientWidthPixels;
-  const clampedWidth = Math.min(requestedWidth, maxWidthPixels);
-  const width = Math.max(minWidthPixels, clampedWidth); // if the clamped width is smaller than the min, use the min
-
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      width,
-    },
-  };
-};
-
-const queryMatchCustomizer = (dp1: QueryMatch, dp2: QueryMatch) => {
-  if (dp1.field === dp2.field && dp1.value === dp2.value && dp1.operator === dp2.operator) {
-    return true;
-  }
-  return false;
-};
-
-const addAndToProviderInTimeline = (
-  id: string,
-  provider: DataProvider,
-  timeline: TimelineModel,
-  timelineById: TimelineById
-): TimelineById => {
-  const alreadyExistsProviderIndex = timeline.dataProviders.findIndex(
-    p => p.id === timeline.highlightedDropAndProviderId
-  );
-  const newProvider = timeline.dataProviders[alreadyExistsProviderIndex];
-  const alreadyExistsAndProviderIndex = newProvider.and.findIndex(p => p.id === provider.id);
-  const { and, ...andProvider } = provider;
-
-  if (
-    isEqualWith(queryMatchCustomizer, newProvider.queryMatch, andProvider.queryMatch) ||
-    (alreadyExistsAndProviderIndex === -1 &&
-      newProvider.and.filter(itemAndProvider =>
-        isEqualWith(queryMatchCustomizer, itemAndProvider.queryMatch, andProvider.queryMatch)
-      ).length > 0)
-  ) {
-    return timelineById;
-  }
-
-  const dataProviders = [
-    ...timeline.dataProviders.slice(0, alreadyExistsProviderIndex),
-    {
-      ...timeline.dataProviders[alreadyExistsProviderIndex],
-      and:
-        alreadyExistsAndProviderIndex > -1
-          ? [
-              ...newProvider.and.slice(0, alreadyExistsAndProviderIndex),
-              andProvider,
-              ...newProvider.and.slice(alreadyExistsAndProviderIndex + 1),
-            ]
-          : [...newProvider.and, andProvider],
-    },
-    ...timeline.dataProviders.slice(alreadyExistsProviderIndex + 1),
-  ];
-
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      dataProviders,
-    },
-  };
-};
-
-const addProviderToTimeline = (
-  id: string,
-  provider: DataProvider,
-  timeline: TimelineModel,
-  timelineById: TimelineById
-): TimelineById => {
-  const alreadyExistsAtIndex = timeline.dataProviders.findIndex(p => p.id === provider.id);
-
-  if (alreadyExistsAtIndex > -1 && !isEmpty(timeline.dataProviders[alreadyExistsAtIndex].and)) {
-    provider.id = `${provider.id}-${
-      timeline.dataProviders.filter(p => p.id === provider.id).length
-    }`;
-  }
-
-  const dataProviders =
-    alreadyExistsAtIndex > -1 && isEmpty(timeline.dataProviders[alreadyExistsAtIndex].and)
-      ? [
-          ...timeline.dataProviders.slice(0, alreadyExistsAtIndex),
-          provider,
-          ...timeline.dataProviders.slice(alreadyExistsAtIndex + 1),
-        ]
-      : [...timeline.dataProviders, provider];
-
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      dataProviders,
-    },
-  };
-};
-
-interface AddTimelineColumnParams {
-  column: ColumnHeaderOptions;
-  id: string;
-  index: number;
-  timelineById: TimelineById;
-}
-
-/**
- * Adds or updates a column. When updating a column, it will be moved to the
- * new index
- */
-export const upsertTimelineColumn = ({
-  column,
-  id,
-  index,
-  timelineById,
-}: AddTimelineColumnParams): TimelineById => {
-  const timeline = timelineById[id];
-  const alreadyExistsAtIndex = timeline.columns.findIndex(c => c.id === column.id);
-
-  if (alreadyExistsAtIndex !== -1) {
-    // remove the existing entry and add the new one at the specified index
-    const reordered = timeline.columns.filter(c => c.id !== column.id);
-    reordered.splice(index, 0, column); // ⚠️ mutation
-
-    return {
-      ...timelineById,
-      [id]: {
-        ...timeline,
-        columns: reordered,
-      },
-    };
-  }
-
-  // add the new entry at the specified index
-  const columns = [...timeline.columns];
-  columns.splice(index, 0, column); // ⚠️ mutation
-
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      columns,
-    },
-  };
-};
-
-interface RemoveTimelineColumnParams {
-  id: string;
-  columnId: string;
-  timelineById: TimelineById;
-}
-
-export const removeTimelineColumn = ({
-  id,
-  columnId,
-  timelineById,
-}: RemoveTimelineColumnParams): TimelineById => {
-  const timeline = timelineById[id];
-
-  const columns = timeline.columns.filter(c => c.id !== columnId);
-
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      columns,
-    },
-  };
-};
-
-interface ApplyDeltaToTimelineColumnWidth {
-  id: string;
-  columnId: string;
-  delta: number;
-  timelineById: TimelineById;
-}
-
-export const applyDeltaToTimelineColumnWidth = ({
-  id,
-  columnId,
-  delta,
-  timelineById,
-}: ApplyDeltaToTimelineColumnWidth): TimelineById => {
-  const timeline = timelineById[id];
-
-  const columnIndex = timeline.columns.findIndex(c => c.id === columnId);
-  if (columnIndex === -1) {
-    // the column was not found
-    return {
-      ...timelineById,
-      [id]: {
-        ...timeline,
-      },
-    };
-  }
-  const minWidthPixels = getColumnWidthFromType(timeline.columns[columnIndex].type!);
-  const requestedWidth = timeline.columns[columnIndex].width + delta; // raw change in width
-  const width = Math.max(minWidthPixels, requestedWidth); // if the requested width is smaller than the min, use the min
-
-  const columnWithNewWidth = {
-    ...timeline.columns[columnIndex],
-    width,
-  };
-
-  const columns = [
-    ...timeline.columns.slice(0, columnIndex),
-    columnWithNewWidth,
-    ...timeline.columns.slice(columnIndex + 1),
-  ];
-
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      columns,
-    },
-  };
-};
-
-interface AddTimelineProviderParams {
-  id: string;
-  provider: DataProvider;
-  timelineById: TimelineById;
-}
-
-export const addTimelineProvider = ({
-  id,
-  provider,
-  timelineById,
-}: AddTimelineProviderParams): TimelineById => {
-  const timeline = timelineById[id];
-
-  if (timeline.highlightedDropAndProviderId !== '') {
-    return addAndToProviderInTimeline(id, provider, timeline, timelineById);
-  } else {
-    return addProviderToTimeline(id, provider, timeline, timelineById);
-  }
-};
-
-interface ApplyKqlFilterQueryDraftParams {
-  id: string;
-  filterQuery: SerializedFilterQuery;
-  timelineById: TimelineById;
-}
-
-export const applyKqlFilterQueryDraft = ({
-  id,
-  filterQuery,
-  timelineById,
-}: ApplyKqlFilterQueryDraftParams): TimelineById => {
-  const timeline = timelineById[id];
-
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      kqlQuery: {
-        ...timeline.kqlQuery,
-        filterQuery,
-      },
-    },
-  };
-};
-
-interface UpdateTimelineKqlModeParams {
-  id: string;
-  kqlMode: KqlMode;
-  timelineById: TimelineById;
-}
-
-export const updateTimelineKqlMode = ({
-  id,
-  kqlMode,
-  timelineById,
-}: UpdateTimelineKqlModeParams): TimelineById => {
-  const timeline = timelineById[id];
-
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      kqlMode,
-    },
-  };
-};
-
-interface UpdateKqlFilterQueryDraftParams {
-  id: string;
-  filterQueryDraft: KueryFilterQuery;
-  timelineById: TimelineById;
-}
-
-export const updateKqlFilterQueryDraft = ({
-  id,
-  filterQueryDraft,
-  timelineById,
-}: UpdateKqlFilterQueryDraftParams): TimelineById => {
-  const timeline = timelineById[id];
-
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      kqlQuery: {
-        ...timeline.kqlQuery,
-        filterQueryDraft,
-      },
-    },
-  };
-};
-
-interface UpdateTimelineColumnsParams {
-  id: string;
-  columns: ColumnHeaderOptions[];
-  timelineById: TimelineById;
-}
-
-export const updateTimelineColumns = ({
-  id,
-  columns,
-  timelineById,
-}: UpdateTimelineColumnsParams): TimelineById => {
-  const timeline = timelineById[id];
-
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      columns,
-    },
-  };
-};
-
-interface UpdateTimelineDescriptionParams {
-  id: string;
-  description: string;
-  timelineById: TimelineById;
-}
-
-export const updateTimelineDescription = ({
-  id,
-  description,
-  timelineById,
-}: UpdateTimelineDescriptionParams): TimelineById => {
-  const timeline = timelineById[id];
-
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      description: description.endsWith(' ') ? `${description.trim()} ` : description.trim(),
-    },
-  };
-};
-
-interface UpdateTimelineTitleParams {
-  id: string;
-  title: string;
-  timelineById: TimelineById;
-}
-
-export const updateTimelineTitle = ({
-  id,
-  title,
-  timelineById,
-}: UpdateTimelineTitleParams): TimelineById => {
-  const timeline = timelineById[id];
-
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      title: title.endsWith(' ') ? `${title.trim()} ` : title.trim(),
-    },
-  };
-};
-
-interface UpdateTimelineEventTypeParams {
-  id: string;
-  eventType: EventType;
-  timelineById: TimelineById;
-}
-
-export const updateTimelineEventType = ({
-  id,
-  eventType,
-  timelineById,
-}: UpdateTimelineEventTypeParams): TimelineById => {
-  const timeline = timelineById[id];
-
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      eventType,
-    },
-  };
-};
-
-interface UpdateTimelineIsFavoriteParams {
-  id: string;
-  isFavorite: boolean;
-  timelineById: TimelineById;
-}
-
-export const updateTimelineIsFavorite = ({
-  id,
-  isFavorite,
-  timelineById,
-}: UpdateTimelineIsFavoriteParams): TimelineById => {
-  const timeline = timelineById[id];
-
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      isFavorite,
-    },
-  };
-};
-
-interface UpdateTimelineIsLiveParams {
-  id: string;
-  isLive: boolean;
-  timelineById: TimelineById;
-}
-
-export const updateTimelineIsLive = ({
-  id,
-  isLive,
-  timelineById,
-}: UpdateTimelineIsLiveParams): TimelineById => {
-  const timeline = timelineById[id];
-
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      isLive,
-    },
-  };
-};
-
-interface UpdateTimelineProvidersParams {
-  id: string;
-  providers: DataProvider[];
-  timelineById: TimelineById;
-}
-
-export const updateTimelineProviders = ({
-  id,
-  providers,
-  timelineById,
-}: UpdateTimelineProvidersParams): TimelineById => {
-  const timeline = timelineById[id];
-
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      dataProviders: providers,
-    },
-  };
-};
-
-interface UpdateTimelineRangeParams {
-  id: string;
-  start: number;
-  end: number;
-  timelineById: TimelineById;
-}
-
-export const updateTimelineRange = ({
-  id,
-  start,
-  end,
-  timelineById,
-}: UpdateTimelineRangeParams): TimelineById => {
-  const timeline = timelineById[id];
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      dateRange: {
-        start,
-        end,
-      },
-    },
-  };
-};
-
-interface UpdateTimelineSortParams {
-  id: string;
-  sort: Sort;
-  timelineById: TimelineById;
-}
-
-export const updateTimelineSort = ({
-  id,
-  sort,
-  timelineById,
-}: UpdateTimelineSortParams): TimelineById => {
-  const timeline = timelineById[id];
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      sort,
-    },
-  };
-};
-
-const updateEnabledAndProvider = (
-  andProviderId: string,
-  enabled: boolean,
-  providerId: string,
-  timeline: TimelineModel
-) =>
-  timeline.dataProviders.map(provider =>
-    provider.id === providerId
-      ? {
-          ...provider,
-          and: provider.and.map(andProvider =>
-            andProvider.id === andProviderId ? { ...andProvider, enabled } : andProvider
-          ),
-        }
-      : provider
-  );
-
-const updateEnabledProvider = (enabled: boolean, providerId: string, timeline: TimelineModel) =>
-  timeline.dataProviders.map(provider =>
-    provider.id === providerId
-      ? {
-          ...provider,
-          enabled,
-        }
-      : provider
-  );
-
-interface UpdateTimelineProviderEnabledParams {
-  id: string;
-  providerId: string;
-  enabled: boolean;
-  timelineById: TimelineById;
-  andProviderId?: string;
-}
-
-export const updateTimelineProviderEnabled = ({
-  id,
-  providerId,
-  enabled,
-  timelineById,
-  andProviderId,
-}: UpdateTimelineProviderEnabledParams): TimelineById => {
-  const timeline = timelineById[id];
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      dataProviders: andProviderId
-        ? updateEnabledAndProvider(andProviderId, enabled, providerId, timeline)
-        : updateEnabledProvider(enabled, providerId, timeline),
-    },
-  };
-};
-
-const updateExcludedAndProvider = (
-  andProviderId: string,
-  excluded: boolean,
-  providerId: string,
-  timeline: TimelineModel
-) =>
-  timeline.dataProviders.map(provider =>
-    provider.id === providerId
-      ? {
-          ...provider,
-          and: provider.and.map(andProvider =>
-            andProvider.id === andProviderId ? { ...andProvider, excluded } : andProvider
-          ),
-        }
-      : provider
-  );
-
-const updateExcludedProvider = (excluded: boolean, providerId: string, timeline: TimelineModel) =>
-  timeline.dataProviders.map(provider =>
-    provider.id === providerId
-      ? {
-          ...provider,
-          excluded,
-        }
-      : provider
-  );
-
-interface UpdateTimelineProviderExcludedParams {
-  id: string;
-  providerId: string;
-  excluded: boolean;
-  timelineById: TimelineById;
-  andProviderId?: string;
-}
-
-export const updateTimelineProviderExcluded = ({
-  id,
-  providerId,
-  excluded,
-  timelineById,
-  andProviderId,
-}: UpdateTimelineProviderExcludedParams): TimelineById => {
-  const timeline = timelineById[id];
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      dataProviders: andProviderId
-        ? updateExcludedAndProvider(andProviderId, excluded, providerId, timeline)
-        : updateExcludedProvider(excluded, providerId, timeline),
-    },
-  };
-};
-
-const updateProviderProperties = ({
-  excluded,
-  field,
-  operator,
-  providerId,
-  timeline,
-  value,
-}: {
-  excluded: boolean;
-  field: string;
-  operator: QueryOperator;
-  providerId: string;
-  timeline: TimelineModel;
-  value: string | number;
-}) =>
-  timeline.dataProviders.map(provider =>
-    provider.id === providerId
-      ? {
-          ...provider,
-          excluded,
-          queryMatch: {
-            ...provider.queryMatch,
-            field,
-            displayField: field,
-            value,
-            displayValue: value,
-            operator,
-          },
-        }
-      : provider
-  );
-
-const updateAndProviderProperties = ({
-  andProviderId,
-  excluded,
-  field,
-  operator,
-  providerId,
-  timeline,
-  value,
-}: {
-  andProviderId: string;
-  excluded: boolean;
-  field: string;
-  operator: QueryOperator;
-  providerId: string;
-  timeline: TimelineModel;
-  value: string | number;
-}) =>
-  timeline.dataProviders.map(provider =>
-    provider.id === providerId
-      ? {
-          ...provider,
-          and: provider.and.map(andProvider =>
-            andProvider.id === andProviderId
-              ? {
-                  ...andProvider,
-                  excluded,
-                  queryMatch: {
-                    ...andProvider.queryMatch,
-                    field,
-                    displayField: field,
-                    value,
-                    displayValue: value,
-                    operator,
-                  },
-                }
-              : andProvider
-          ),
-        }
-      : provider
-  );
-
-interface UpdateTimelineProviderEditPropertiesParams {
-  andProviderId?: string;
-  excluded: boolean;
-  field: string;
-  id: string;
-  operator: QueryOperator;
-  providerId: string;
-  timelineById: TimelineById;
-  value: string | number;
-}
-
-export const updateTimelineProviderProperties = ({
-  andProviderId,
-  excluded,
-  field,
-  id,
-  operator,
-  providerId,
-  timelineById,
-  value,
-}: UpdateTimelineProviderEditPropertiesParams): TimelineById => {
-  const timeline = timelineById[id];
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      dataProviders: andProviderId
-        ? updateAndProviderProperties({
-            andProviderId,
-            excluded,
-            field,
-            operator,
-            providerId,
-            timeline,
-            value,
-          })
-        : updateProviderProperties({
-            excluded,
-            field,
-            operator,
-            providerId,
-            timeline,
-            value,
-          }),
-    },
-  };
-};
-
-interface UpdateTimelineProviderKqlQueryParams {
-  id: string;
-  providerId: string;
-  kqlQuery: string;
-  timelineById: TimelineById;
-}
-
-export const updateTimelineProviderKqlQuery = ({
-  id,
-  providerId,
-  kqlQuery,
-  timelineById,
-}: UpdateTimelineProviderKqlQueryParams): TimelineById => {
-  const timeline = timelineById[id];
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      dataProviders: timeline.dataProviders.map(provider =>
-        provider.id === providerId ? { ...provider, ...{ kqlQuery } } : provider
-      ),
-    },
-  };
-};
-
-interface UpdateTimelineItemsPerPageParams {
-  id: string;
-  itemsPerPage: number;
-  timelineById: TimelineById;
-}
-
-export const updateTimelineItemsPerPage = ({
-  id,
-  itemsPerPage,
-  timelineById,
-}: UpdateTimelineItemsPerPageParams) => {
-  const timeline = timelineById[id];
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      itemsPerPage,
-    },
-  };
-};
-
-interface UpdateTimelinePageIndexParams {
-  id: string;
-  activePage: number;
-  timelineById: TimelineById;
-}
-
-export const updateTimelinePageIndex = ({
-  id,
-  activePage,
-  timelineById,
-}: UpdateTimelinePageIndexParams) => {
-  const timeline = timelineById[id];
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      activePage,
-    },
-  };
-};
-
-interface UpdateTimelinePerPageOptionsParams {
-  id: string;
-  itemsPerPageOptions: number[];
-  timelineById: TimelineById;
-}
-
-export const updateTimelinePerPageOptions = ({
-  id,
-  itemsPerPageOptions,
-  timelineById,
-}: UpdateTimelinePerPageOptionsParams) => {
-  const timeline = timelineById[id];
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      itemsPerPageOptions,
-    },
-  };
-};
-
-const removeAndProvider = (andProviderId: string, providerId: string, timeline: TimelineModel) => {
-  const providerIndex = timeline.dataProviders.findIndex(p => p.id === providerId);
-  const providerAndIndex = timeline.dataProviders[providerIndex].and.findIndex(
-    p => p.id === andProviderId
-  );
-  return [
-    ...timeline.dataProviders.slice(0, providerIndex),
-    {
-      ...timeline.dataProviders[providerIndex],
-      and: [
-        ...timeline.dataProviders[providerIndex].and.slice(0, providerAndIndex),
-        ...timeline.dataProviders[providerIndex].and.slice(providerAndIndex + 1),
-      ],
-    },
-    ...timeline.dataProviders.slice(providerIndex + 1),
-  ];
-};
-
-const removeProvider = (providerId: string, timeline: TimelineModel) => {
-  const providerIndex = timeline.dataProviders.findIndex(p => p.id === providerId);
-  return [
-    ...timeline.dataProviders.slice(0, providerIndex),
-    ...(timeline.dataProviders[providerIndex].and.length
-      ? [
-          {
-            ...timeline.dataProviders[providerIndex].and.slice(0, 1)[0],
-            and: [...timeline.dataProviders[providerIndex].and.slice(1)],
-          },
-        ]
-      : []),
-    ...timeline.dataProviders.slice(providerIndex + 1),
-  ];
-};
-
-interface RemoveTimelineProviderParams {
-  id: string;
-  providerId: string;
-  timelineById: TimelineById;
-  andProviderId?: string;
-}
-
-export const removeTimelineProvider = ({
-  id,
-  providerId,
-  timelineById,
-  andProviderId,
-}: RemoveTimelineProviderParams): TimelineById => {
-  const timeline = timelineById[id];
-
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      dataProviders: andProviderId
-        ? removeAndProvider(andProviderId, providerId, timeline)
-        : removeProvider(providerId, timeline),
-    },
-  };
-};
-
-interface SetDeletedTimelineEventsParams {
-  id: string;
-  eventIds: string[];
-  isDeleted: boolean;
-  timelineById: TimelineById;
-}
-
-export const setDeletedTimelineEvents = ({
-  id,
-  eventIds,
-  isDeleted,
-  timelineById,
-}: SetDeletedTimelineEventsParams): TimelineById => {
-  const timeline = timelineById[id];
-
-  const deletedEventIds = isDeleted
-    ? union(timeline.deletedEventIds, eventIds)
-    : timeline.deletedEventIds.filter(currentEventId => !eventIds.includes(currentEventId));
-
-  const selectedEventIds = Object.fromEntries(
-    Object.entries(timeline.selectedEventIds).filter(
-      ([selectedEventId]) => !deletedEventIds.includes(selectedEventId)
-    )
-  );
-
-  const isSelectAllChecked =
-    Object.keys(selectedEventIds).length > 0 ? timeline.isSelectAllChecked : false;
-
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      deletedEventIds,
-      selectedEventIds,
-      isSelectAllChecked,
-    },
-  };
-};
-
-interface SetLoadingTimelineEventsParams {
-  id: string;
-  eventIds: string[];
-  isLoading: boolean;
-  timelineById: TimelineById;
-}
-
-export const setLoadingTimelineEvents = ({
-  id,
-  eventIds,
-  isLoading,
-  timelineById,
-}: SetLoadingTimelineEventsParams): TimelineById => {
-  const timeline = timelineById[id];
-
-  const loadingEventIds = isLoading
-    ? union(timeline.loadingEventIds, eventIds)
-    : timeline.loadingEventIds.filter(currentEventId => !eventIds.includes(currentEventId));
-
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      loadingEventIds,
-    },
-  };
-};
-
-interface SetSelectedTimelineEventsParams {
-  id: string;
-  eventIds: Record<string, TimelineNonEcsData[]>;
-  isSelectAllChecked: boolean;
-  isSelected: boolean;
-  timelineById: TimelineById;
-}
-
-export const setSelectedTimelineEvents = ({
-  id,
-  eventIds,
-  isSelectAllChecked = false,
-  isSelected,
-  timelineById,
-}: SetSelectedTimelineEventsParams): TimelineById => {
-  const timeline = timelineById[id];
-
-  const selectedEventIds = isSelected
-    ? { ...timeline.selectedEventIds, ...eventIds }
-    : omit(Object.keys(eventIds), timeline.selectedEventIds);
-
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      selectedEventIds,
-      isSelectAllChecked,
-    },
-  };
-};
-
-interface UnPinTimelineEventParams {
-  id: string;
-  eventId: string;
-  timelineById: TimelineById;
-}
-
-export const unPinTimelineEvent = ({
-  id,
-  eventId,
-  timelineById,
-}: UnPinTimelineEventParams): TimelineById => {
-  const timeline = timelineById[id];
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      pinnedEventIds: omit(eventId, timeline.pinnedEventIds),
-    },
-  };
-};
-
-interface UpdateHighlightedDropAndProviderIdParams {
-  id: string;
-  providerId: string;
-  timelineById: TimelineById;
-}
-
-export const updateHighlightedDropAndProvider = ({
-  id,
-  providerId,
-  timelineById,
-}: UpdateHighlightedDropAndProviderIdParams): TimelineById => {
-  const timeline = timelineById[id];
-
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      highlightedDropAndProviderId: providerId,
-    },
-  };
-};
-
-interface UpdateSavedQueryParams {
-  id: string;
-  savedQueryId: string | null;
-  timelineById: TimelineById;
-}
-
-export const updateSavedQuery = ({
-  id,
-  savedQueryId,
-  timelineById,
-}: UpdateSavedQueryParams): TimelineById => {
-  const timeline = timelineById[id];
-
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      savedQueryId,
-    },
-  };
-};
-
-interface UpdateFiltersParams {
-  id: string;
-  filters: Filter[];
-  timelineById: TimelineById;
-}
-
-export const updateFilters = ({ id, filters, timelineById }: UpdateFiltersParams): TimelineById => {
-  const timeline = timelineById[id];
-
-  return {
-    ...timelineById,
-    [id]: {
-      ...timeline,
-      filters,
-    },
-  };
-};
diff --git a/x-pack/plugins/siem/public/store/timeline/index.ts b/x-pack/plugins/siem/public/store/timeline/index.ts
deleted file mode 100644
index a1c51905e8d0bf..00000000000000
--- a/x-pack/plugins/siem/public/store/timeline/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- * 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 * as timelineActions from './actions';
-import * as timelineSelectors from './selectors';
-
-export { timelineActions, timelineSelectors };
diff --git a/x-pack/plugins/siem/public/store/timeline/model.ts b/x-pack/plugins/siem/public/store/timeline/model.ts
deleted file mode 100644
index 54e19812634ac2..00000000000000
--- a/x-pack/plugins/siem/public/store/timeline/model.ts
+++ /dev/null
@@ -1,161 +0,0 @@
-/*
- * 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 { Filter } from '../../../../../../src/plugins/data/public';
-
-import { TimelineTypeLiteralWithNull } from '../../../common/types/timeline';
-
-import { DataProvider } from '../../components/timeline/data_providers/data_provider';
-import { Sort } from '../../components/timeline/body/sort';
-import { PinnedEvent, TimelineNonEcsData } from '../../graphql/types';
-import { KueryFilterQuery, SerializedFilterQuery } from '../model';
-
-export const DEFAULT_PAGE_COUNT = 2; // Eui Pager will not render unless this is a minimum of 2 pages
-export type KqlMode = 'filter' | 'search';
-export type EventType = 'all' | 'raw' | 'signal';
-
-export type ColumnHeaderType = 'not-filtered' | 'text-filter';
-
-/** Uniquely identifies a column */
-export type ColumnId = string;
-
-/** The specification of a column header */
-export interface ColumnHeaderOptions {
-  aggregatable?: boolean;
-  category?: string;
-  columnHeaderType: ColumnHeaderType;
-  description?: string;
-  example?: string;
-  format?: string;
-  id: ColumnId;
-  label?: string;
-  linkField?: string;
-  placeholder?: string;
-  type?: string;
-  width: number;
-}
-
-export interface TimelineModel {
-  /** The columns displayed in the timeline */
-  columns: ColumnHeaderOptions[];
-  /** The sources of the event data shown in the timeline */
-  dataProviders: DataProvider[];
-  /** Events to not be rendered **/
-  deletedEventIds: string[];
-  /** A summary of the events and notes in this timeline */
-  description: string;
-  /** Typoe of event you want to see in this timeline */
-  eventType?: EventType;
-  /** A map of events in this timeline to the chronologically ordered notes (in this timeline) associated with the event */
-  eventIdToNoteIds: Record<string, string[]>;
-  filters?: Filter[];
-  /** The chronological history of actions related to this timeline */
-  historyIds: string[];
-  /** The chronological history of actions related to this timeline */
-  highlightedDropAndProviderId: string;
-  /** Uniquely identifies the timeline */
-  id: string;
-  /** If selectAll checkbox in header is checked **/
-  isSelectAllChecked: boolean;
-  /** Events to be rendered as loading **/
-  loadingEventIds: string[];
-  savedObjectId: string | null;
-  /** When true, this timeline was marked as "favorite" by the user */
-  isFavorite: boolean;
-  /** When true, the timeline will update as new data arrives */
-  isLive: boolean;
-  /** The number of items to show in a single page of results */
-  itemsPerPage: number;
-  /** Displays a series of choices that when selected, become the value of `itemsPerPage` */
-  itemsPerPageOptions: number[];
-  /** determines the behavior of the KQL bar */
-  kqlMode: KqlMode;
-  /** the KQL query in the KQL bar */
-  kqlQuery: {
-    filterQuery: SerializedFilterQuery | null;
-    filterQueryDraft: KueryFilterQuery | null;
-  };
-  /** Title */
-  title: string;
-  /** timelineType: default | template */
-  timelineType: TimelineTypeLiteralWithNull;
-  /** an unique id for template timeline */
-  templateTimelineId: string | null;
-  /** null for default timeline, number for template timeline */
-  templateTimelineVersion: number | null;
-  /** Notes added to the timeline itself. Notes added to events are stored (separately) in `eventIdToNote` */
-  noteIds: string[];
-  /** Events pinned to this timeline */
-  pinnedEventIds: Record<string, boolean>;
-  pinnedEventsSaveObject: Record<string, PinnedEvent>;
-  /** Specifies the granularity of the date range (e.g. 1 Day / Week / Month) applicable to the mini-map */
-  dateRange: {
-    start: number;
-    end: number;
-  };
-  savedQueryId?: string | null;
-  /** Events selected on this timeline -- eventId to TimelineNonEcsData[] mapping of data required for batch actions **/
-  selectedEventIds: Record<string, TimelineNonEcsData[]>;
-  /** When true, show the timeline flyover */
-  show: boolean;
-  /** When true, shows checkboxes enabling selection. Selected events store in selectedEventIds **/
-  showCheckboxes: boolean;
-  /** When true, shows additional rowRenderers below the PlainRowRenderer **/
-  showRowRenderers: boolean;
-  /**  Specifies which column the timeline is sorted on, and the direction (ascending / descending) */
-  sort: Sort;
-  /** Persists the UI state (width) of the timeline flyover */
-  width: number;
-  /** timeline is saving */
-  isSaving: boolean;
-  isLoading: boolean;
-  version: string | null;
-}
-
-export type SubsetTimelineModel = Readonly<
-  Pick<
-    TimelineModel,
-    | 'columns'
-    | 'dataProviders'
-    | 'deletedEventIds'
-    | 'description'
-    | 'eventType'
-    | 'eventIdToNoteIds'
-    | 'highlightedDropAndProviderId'
-    | 'historyIds'
-    | 'isFavorite'
-    | 'isLive'
-    | 'isSelectAllChecked'
-    | 'itemsPerPage'
-    | 'itemsPerPageOptions'
-    | 'kqlMode'
-    | 'kqlQuery'
-    | 'title'
-    | 'timelineType'
-    | 'templateTimelineId'
-    | 'templateTimelineVersion'
-    | 'loadingEventIds'
-    | 'noteIds'
-    | 'pinnedEventIds'
-    | 'pinnedEventsSaveObject'
-    | 'dateRange'
-    | 'selectedEventIds'
-    | 'show'
-    | 'showCheckboxes'
-    | 'showRowRenderers'
-    | 'sort'
-    | 'width'
-    | 'isSaving'
-    | 'isLoading'
-    | 'savedObjectId'
-    | 'version'
-  >
->;
-
-export interface TimelineUrl {
-  id: string;
-  isOpen: boolean;
-}
diff --git a/x-pack/plugins/siem/public/store/timeline/reducer.test.ts b/x-pack/plugins/siem/public/store/timeline/reducer.test.ts
deleted file mode 100644
index 42c6d6ecb0e51b..00000000000000
--- a/x-pack/plugins/siem/public/store/timeline/reducer.test.ts
+++ /dev/null
@@ -1,2254 +0,0 @@
-/*
- * 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 { cloneDeep, set } from 'lodash/fp';
-
-import { TimelineType } from '../../../common/types/timeline';
-
-import {
-  IS_OPERATOR,
-  DataProvider,
-  DataProvidersAnd,
-} from '../../components/timeline/data_providers/data_provider';
-import { defaultColumnHeaderType } from '../../components/timeline/body/column_headers/default_headers';
-import {
-  DEFAULT_COLUMN_MIN_WIDTH,
-  DEFAULT_TIMELINE_WIDTH,
-} from '../../components/timeline/body/constants';
-import { getColumnWidthFromType } from '../../components/timeline/body/column_headers/helpers';
-import { Direction } from '../../graphql/types';
-import { defaultHeaders } from '../../mock';
-
-import {
-  addNewTimeline,
-  addTimelineProvider,
-  addTimelineToStore,
-  applyDeltaToTimelineColumnWidth,
-  removeTimelineColumn,
-  removeTimelineProvider,
-  updateTimelineColumns,
-  updateTimelineDescription,
-  updateTimelineItemsPerPage,
-  updateTimelinePerPageOptions,
-  updateTimelineProviderEnabled,
-  updateTimelineProviderExcluded,
-  updateTimelineProviders,
-  updateTimelineRange,
-  updateTimelineShowTimeline,
-  updateTimelineSort,
-  updateTimelineTitle,
-  upsertTimelineColumn,
-} from './helpers';
-import { ColumnHeaderOptions } from './model';
-import { timelineDefaults } from './defaults';
-import { TimelineById } from './types';
-
-const timelineByIdMock: TimelineById = {
-  foo: {
-    dataProviders: [
-      {
-        and: [],
-        id: '123',
-        name: 'data provider 1',
-        enabled: true,
-        queryMatch: {
-          field: '',
-          value: '',
-          operator: IS_OPERATOR,
-        },
-
-        excluded: false,
-        kqlQuery: '',
-      },
-    ],
-    columns: [],
-    description: '',
-    deletedEventIds: [],
-    eventIdToNoteIds: {},
-    highlightedDropAndProviderId: '',
-    historyIds: [],
-    id: 'foo',
-    savedObjectId: null,
-    isFavorite: false,
-    isLive: false,
-    isSelectAllChecked: false,
-    isLoading: false,
-    itemsPerPage: 25,
-    itemsPerPageOptions: [10, 25, 50],
-    kqlMode: 'filter',
-    kqlQuery: { filterQuery: null, filterQueryDraft: null },
-    loadingEventIds: [],
-    title: '',
-    timelineType: TimelineType.default,
-    templateTimelineVersion: null,
-    templateTimelineId: null,
-    noteIds: [],
-    pinnedEventIds: {},
-    pinnedEventsSaveObject: {},
-    dateRange: {
-      start: 0,
-      end: 0,
-    },
-    selectedEventIds: {},
-    show: true,
-    showCheckboxes: false,
-    showRowRenderers: true,
-    sort: {
-      columnId: '@timestamp',
-      sortDirection: Direction.desc,
-    },
-    width: DEFAULT_TIMELINE_WIDTH,
-    isSaving: false,
-    version: null,
-  },
-};
-
-const columnsMock: ColumnHeaderOptions[] = [
-  defaultHeaders[0],
-  defaultHeaders[1],
-  defaultHeaders[2],
-];
-
-describe('Timeline', () => {
-  describe('#add saved object Timeline to store ', () => {
-    test('should return a timelineModel with default value and not just a timelineResult ', () => {
-      const update = addTimelineToStore({
-        id: 'foo',
-        timeline: {
-          ...timelineByIdMock.foo,
-        },
-        timelineById: timelineByIdMock,
-      });
-
-      expect(update).toEqual({
-        foo: {
-          ...timelineByIdMock.foo,
-          show: true,
-        },
-      });
-    });
-  });
-
-  describe('#addNewTimeline', () => {
-    test('should return a new reference and not the same reference', () => {
-      const update = addNewTimeline({
-        id: 'bar',
-        columns: defaultHeaders,
-        timelineById: timelineByIdMock,
-      });
-      expect(update).not.toBe(timelineByIdMock);
-    });
-
-    test('should add a new timeline', () => {
-      const update = addNewTimeline({
-        id: 'bar',
-        columns: timelineDefaults.columns,
-        timelineById: timelineByIdMock,
-      });
-      expect(update).toEqual({
-        foo: timelineByIdMock.foo,
-        bar: set('id', 'bar', timelineDefaults),
-      });
-    });
-
-    test('should add the specified columns to the timeline', () => {
-      const barWithEmptyColumns = set('id', 'bar', timelineDefaults);
-      const barWithPopulatedColumns = set('columns', defaultHeaders, barWithEmptyColumns);
-
-      const update = addNewTimeline({
-        id: 'bar',
-        columns: defaultHeaders,
-        timelineById: timelineByIdMock,
-      });
-      expect(update).toEqual({
-        foo: timelineByIdMock.foo,
-        bar: barWithPopulatedColumns,
-      });
-    });
-  });
-
-  describe('#updateTimelineShowTimeline', () => {
-    test('should return a new reference and not the same reference', () => {
-      const update = updateTimelineShowTimeline({
-        id: 'foo',
-        show: false,
-        timelineById: timelineByIdMock,
-      });
-      expect(update).not.toBe(timelineByIdMock);
-    });
-
-    test('should change show from true to false', () => {
-      const update = updateTimelineShowTimeline({
-        id: 'foo',
-        show: false, // value we are changing from true to false
-        timelineById: timelineByIdMock,
-      });
-      expect(update).toEqual(set('foo.show', false, timelineByIdMock));
-    });
-  });
-
-  describe('#upsertTimelineColumn', () => {
-    let timelineById: TimelineById = {};
-    let columns: ColumnHeaderOptions[] = [];
-    let columnToAdd: ColumnHeaderOptions;
-
-    beforeEach(() => {
-      timelineById = cloneDeep(timelineByIdMock);
-      columns = cloneDeep(columnsMock);
-      columnToAdd = {
-        category: 'event',
-        columnHeaderType: defaultColumnHeaderType,
-        description:
-          'The action captured by the event.\nThis 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',
-        aggregatable: true,
-        width: DEFAULT_COLUMN_MIN_WIDTH,
-      };
-    });
-
-    test('should return a new reference and not the same reference', () => {
-      const update = upsertTimelineColumn({
-        column: columnToAdd,
-        id: 'foo',
-        index: 0,
-        timelineById,
-      });
-
-      expect(update).not.toBe(timelineById);
-    });
-
-    test('should add a new column to an empty collection of columns', () => {
-      const expectedColumns = [columnToAdd];
-      const update = upsertTimelineColumn({
-        column: columnToAdd,
-        id: 'foo',
-        index: 0,
-        timelineById,
-      });
-
-      expect(update).toEqual(set('foo.columns', expectedColumns, timelineById));
-    });
-
-    test('should add a new column to an existing collection of columns at the beginning of the collection', () => {
-      const expectedColumns = [columnToAdd, ...columns];
-      const mockWithExistingColumns = set('foo.columns', columns, timelineById);
-
-      const update = upsertTimelineColumn({
-        column: columnToAdd,
-        id: 'foo',
-        index: 0,
-        timelineById: mockWithExistingColumns,
-      });
-
-      expect(update).toEqual(set('foo.columns', expectedColumns, mockWithExistingColumns));
-    });
-
-    test('should add a new column to an existing collection of columns in the middle of the collection', () => {
-      const expectedColumns = [columns[0], columnToAdd, columns[1], columns[2]];
-      const mockWithExistingColumns = set('foo.columns', columns, timelineById);
-
-      const update = upsertTimelineColumn({
-        column: columnToAdd,
-        id: 'foo',
-        index: 1,
-        timelineById: mockWithExistingColumns,
-      });
-
-      expect(update).toEqual(set('foo.columns', expectedColumns, mockWithExistingColumns));
-    });
-
-    test('should add a new column to an existing collection of columns at the end of the collection', () => {
-      const expectedColumns = [...columns, columnToAdd];
-      const mockWithExistingColumns = set('foo.columns', columns, timelineById);
-
-      const update = upsertTimelineColumn({
-        column: columnToAdd,
-        id: 'foo',
-        index: expectedColumns.length - 1,
-        timelineById: mockWithExistingColumns,
-      });
-
-      expect(update).toEqual(set('foo.columns', expectedColumns, mockWithExistingColumns));
-    });
-
-    columns.forEach((column, i) => {
-      test(`should upsert (NOT add a new column) a column when already exists at the same index (${i})`, () => {
-        const mockWithExistingColumns = set('foo.columns', columns, timelineById);
-
-        const update = upsertTimelineColumn({
-          column,
-          id: 'foo',
-          index: i,
-          timelineById: mockWithExistingColumns,
-        });
-
-        expect(update).toEqual(set('foo.columns', columns, mockWithExistingColumns));
-      });
-    });
-
-    test('should allow the 1st column to be moved to the 2nd column', () => {
-      const expectedColumns = [columns[1], columns[0], columns[2]];
-      const mockWithExistingColumns = set('foo.columns', columns, timelineById);
-
-      const update = upsertTimelineColumn({
-        column: columns[0],
-        id: 'foo',
-        index: 1,
-        timelineById: mockWithExistingColumns,
-      });
-
-      expect(update).toEqual(set('foo.columns', expectedColumns, mockWithExistingColumns));
-    });
-
-    test('should allow the 1st column to be moved to the 3rd column', () => {
-      const expectedColumns = [columns[1], columns[2], columns[0]];
-      const mockWithExistingColumns = set('foo.columns', columns, timelineById);
-
-      const update = upsertTimelineColumn({
-        column: columns[0],
-        id: 'foo',
-        index: 2,
-        timelineById: mockWithExistingColumns,
-      });
-
-      expect(update).toEqual(set('foo.columns', expectedColumns, mockWithExistingColumns));
-    });
-
-    test('should allow the 2nd column to be moved to the 1st column', () => {
-      const expectedColumns = [columns[1], columns[0], columns[2]];
-      const mockWithExistingColumns = set('foo.columns', columns, timelineById);
-
-      const update = upsertTimelineColumn({
-        column: columns[1],
-        id: 'foo',
-        index: 0,
-        timelineById: mockWithExistingColumns,
-      });
-
-      expect(update).toEqual(set('foo.columns', expectedColumns, mockWithExistingColumns));
-    });
-
-    test('should allow the 2nd column to be moved to the 3rd column', () => {
-      const expectedColumns = [columns[0], columns[2], columns[1]];
-      const mockWithExistingColumns = set('foo.columns', columns, timelineById);
-
-      const update = upsertTimelineColumn({
-        column: columns[1],
-        id: 'foo',
-        index: 2,
-        timelineById: mockWithExistingColumns,
-      });
-
-      expect(update).toEqual(set('foo.columns', expectedColumns, mockWithExistingColumns));
-    });
-
-    test('should allow the 3rd column to be moved to the 1st column', () => {
-      const expectedColumns = [columns[2], columns[0], columns[1]];
-      const mockWithExistingColumns = set('foo.columns', columns, timelineById);
-
-      const update = upsertTimelineColumn({
-        column: columns[2],
-        id: 'foo',
-        index: 0,
-        timelineById: mockWithExistingColumns,
-      });
-
-      expect(update).toEqual(set('foo.columns', expectedColumns, mockWithExistingColumns));
-    });
-
-    test('should allow the 3rd column to be moved to the 2nd column', () => {
-      const expectedColumns = [columns[0], columns[2], columns[1]];
-      const mockWithExistingColumns = set('foo.columns', columns, timelineById);
-
-      const update = upsertTimelineColumn({
-        column: columns[2],
-        id: 'foo',
-        index: 1,
-        timelineById: mockWithExistingColumns,
-      });
-
-      expect(update).toEqual(set('foo.columns', expectedColumns, mockWithExistingColumns));
-    });
-  });
-
-  describe('#addTimelineProvider', () => {
-    test('should return a new reference and not the same reference', () => {
-      const update = addTimelineProvider({
-        id: 'foo',
-        provider: {
-          and: [],
-          id: '567',
-          name: 'data provider 2',
-          enabled: true,
-          queryMatch: {
-            field: '',
-            value: '',
-            operator: IS_OPERATOR,
-          },
-
-          excluded: false,
-          kqlQuery: '',
-        },
-        timelineById: timelineByIdMock,
-      });
-      expect(update).not.toBe(timelineByIdMock);
-    });
-
-    test('should add a new timeline provider', () => {
-      const providerToAdd: DataProvider = {
-        and: [],
-        id: '567',
-        name: 'data provider 2',
-        enabled: true,
-        queryMatch: {
-          field: '',
-          value: '',
-          operator: IS_OPERATOR,
-        },
-
-        excluded: false,
-        kqlQuery: '',
-      };
-      const update = addTimelineProvider({
-        id: 'foo',
-        provider: providerToAdd,
-        timelineById: timelineByIdMock,
-      });
-      const addedDataProvider = timelineByIdMock.foo.dataProviders.concat(providerToAdd);
-      expect(update).toEqual(set('foo.dataProviders', addedDataProvider, timelineByIdMock));
-    });
-
-    test('should NOT add a new timeline provider if it already exists and the attributes "and" is empty', () => {
-      const providerToAdd: DataProvider = {
-        and: [],
-        id: '123',
-        name: 'data provider 1',
-        enabled: true,
-        queryMatch: {
-          field: '',
-          value: '',
-          operator: IS_OPERATOR,
-        },
-
-        excluded: false,
-        kqlQuery: '',
-      };
-      const update = addTimelineProvider({
-        id: 'foo',
-        provider: providerToAdd,
-        timelineById: timelineByIdMock,
-      });
-      expect(update).toEqual(timelineByIdMock);
-    });
-
-    test('should add a new timeline provider if it already exists and the attributes "and" is NOT empty', () => {
-      const myMockTimelineByIdMock = cloneDeep(timelineByIdMock);
-      myMockTimelineByIdMock.foo.dataProviders[0].and = [
-        {
-          id: '456',
-          name: 'and data provider 1',
-          enabled: true,
-          excluded: false,
-          kqlQuery: '',
-          queryMatch: {
-            field: '',
-            value: '',
-            operator: IS_OPERATOR,
-          },
-        },
-      ];
-      const providerToAdd: DataProvider = {
-        and: [],
-        id: '123',
-        name: 'data provider 1',
-        enabled: true,
-        queryMatch: {
-          field: '',
-          value: '',
-          operator: IS_OPERATOR,
-        },
-
-        excluded: false,
-        kqlQuery: '',
-      };
-      const update = addTimelineProvider({
-        id: 'foo',
-        provider: providerToAdd,
-        timelineById: myMockTimelineByIdMock,
-      });
-      expect(update).toEqual(set('foo.dataProviders[1]', providerToAdd, myMockTimelineByIdMock));
-    });
-
-    test('should UPSERT an existing timeline provider if it already exists', () => {
-      const providerToAdd: DataProvider = {
-        and: [],
-        id: '123',
-        name: 'my name changed',
-        enabled: true,
-        queryMatch: {
-          field: '',
-          value: '',
-          operator: IS_OPERATOR,
-        },
-        excluded: false,
-        kqlQuery: '',
-      };
-      const update = addTimelineProvider({
-        id: 'foo',
-        provider: providerToAdd,
-        timelineById: timelineByIdMock,
-      });
-      expect(update).toEqual(set('foo.dataProviders[0].name', 'my name changed', timelineByIdMock));
-    });
-  });
-
-  describe('#removeTimelineColumn', () => {
-    test('should return a new reference and not the same reference', () => {
-      // pre-populate a new mock with existing columns:
-      const mockWithExistingColumns = set('foo.columns', columnsMock, timelineByIdMock);
-
-      const update = removeTimelineColumn({
-        id: 'foo',
-        columnId: columnsMock[0].id,
-        timelineById: mockWithExistingColumns,
-      });
-
-      expect(update).not.toBe(timelineByIdMock);
-    });
-
-    test('should remove just the first column when the id matches', () => {
-      const expectedColumns = [columnsMock[1], columnsMock[2]];
-
-      // pre-populate a new mock with existing columns:
-      const mockWithExistingColumns = set('foo.columns', columnsMock, timelineByIdMock);
-
-      const update = removeTimelineColumn({
-        id: 'foo',
-        columnId: columnsMock[0].id,
-        timelineById: mockWithExistingColumns,
-      });
-
-      expect(update).toEqual(set('foo.columns', expectedColumns, mockWithExistingColumns));
-    });
-
-    test('should remove just the last column when the id matches', () => {
-      const expectedColumns = [columnsMock[0], columnsMock[1]];
-
-      // pre-populate a new mock with existing columns:
-      const mockWithExistingColumns = set('foo.columns', columnsMock, timelineByIdMock);
-
-      const update = removeTimelineColumn({
-        id: 'foo',
-        columnId: columnsMock[2].id,
-        timelineById: mockWithExistingColumns,
-      });
-
-      expect(update).toEqual(set('foo.columns', expectedColumns, mockWithExistingColumns));
-    });
-
-    test('should remove just the middle column when the id matches', () => {
-      const expectedColumns = [columnsMock[0], columnsMock[2]];
-
-      // pre-populate a new mock with existing columns:
-      const mockWithExistingColumns = set('foo.columns', columnsMock, timelineByIdMock);
-
-      const update = removeTimelineColumn({
-        id: 'foo',
-        columnId: columnsMock[1].id,
-        timelineById: mockWithExistingColumns,
-      });
-
-      expect(update).toEqual(set('foo.columns', expectedColumns, mockWithExistingColumns));
-    });
-
-    test('should not modify the columns if the id to remove was not found', () => {
-      const expectedColumns = cloneDeep(columnsMock);
-
-      // pre-populate a new mock with existing columns:
-      const mockWithExistingColumns = set('foo.columns', columnsMock, timelineByIdMock);
-
-      const update = removeTimelineColumn({
-        id: 'foo',
-        columnId: 'does.not.exist',
-        timelineById: mockWithExistingColumns,
-      });
-
-      expect(update).toEqual(set('foo.columns', expectedColumns, mockWithExistingColumns));
-    });
-  });
-
-  describe('#applyDeltaToColumnWidth', () => {
-    test('should return a new reference and not the same reference', () => {
-      const delta = 50;
-      // pre-populate a new mock with existing columns:
-      const mockWithExistingColumns = set('foo.columns', columnsMock, timelineByIdMock);
-
-      const update = applyDeltaToTimelineColumnWidth({
-        id: 'foo',
-        columnId: columnsMock[0].id,
-        delta,
-        timelineById: mockWithExistingColumns,
-      });
-
-      expect(update).not.toBe(timelineByIdMock);
-    });
-
-    test('should update (just) the specified column of type `date` when the id matches, and the result of applying the delta is greater than the min width for a date column', () => {
-      const aDateColumn = columnsMock[0];
-      const delta = 50;
-      const expectedToHaveNewWidth = {
-        ...aDateColumn,
-        width: getColumnWidthFromType(aDateColumn.type!) + delta,
-      };
-      const expectedColumns = [expectedToHaveNewWidth, columnsMock[1], columnsMock[2]];
-
-      // pre-populate a new mock with existing columns:
-      const mockWithExistingColumns = set('foo.columns', columnsMock, timelineByIdMock);
-
-      const update = applyDeltaToTimelineColumnWidth({
-        id: 'foo',
-        columnId: aDateColumn.id,
-        delta,
-        timelineById: mockWithExistingColumns,
-      });
-
-      expect(update).toEqual(set('foo.columns', expectedColumns, mockWithExistingColumns));
-    });
-
-    test('should NOT update (just) the specified column of type `date` when the id matches, because the result of applying the delta is less than the min width for a date column', () => {
-      const aDateColumn = columnsMock[0];
-      const delta = -50; // this will be less than the min
-      const expectedToHaveNewWidth = {
-        ...aDateColumn,
-        width: getColumnWidthFromType(aDateColumn.type!), // we expect the minimum
-      };
-      const expectedColumns = [expectedToHaveNewWidth, columnsMock[1], columnsMock[2]];
-
-      // pre-populate a new mock with existing columns:
-      const mockWithExistingColumns = set('foo.columns', columnsMock, timelineByIdMock);
-
-      const update = applyDeltaToTimelineColumnWidth({
-        id: 'foo',
-        columnId: aDateColumn.id,
-        delta,
-        timelineById: mockWithExistingColumns,
-      });
-
-      expect(update).toEqual(set('foo.columns', expectedColumns, mockWithExistingColumns));
-    });
-
-    test('should update (just) the specified non-date column when the id matches, and the result of applying the delta is greater than the min width for the column', () => {
-      const aNonDateColumn = columnsMock[1];
-      const delta = 50;
-      const expectedToHaveNewWidth = {
-        ...aNonDateColumn,
-        width: getColumnWidthFromType(aNonDateColumn.type!) + delta,
-      };
-      const expectedColumns = [columnsMock[0], expectedToHaveNewWidth, columnsMock[2]];
-
-      // pre-populate a new mock with existing columns:
-      const mockWithExistingColumns = set('foo.columns', columnsMock, timelineByIdMock);
-
-      const update = applyDeltaToTimelineColumnWidth({
-        id: 'foo',
-        columnId: aNonDateColumn.id,
-        delta,
-        timelineById: mockWithExistingColumns,
-      });
-
-      expect(update).toEqual(set('foo.columns', expectedColumns, mockWithExistingColumns));
-    });
-
-    test('should NOT update the specified non-date column when the id matches, because the result of applying the delta is less than the min width for the column', () => {
-      const aNonDateColumn = columnsMock[1];
-      const delta = -50;
-      const expectedToHaveNewWidth = {
-        ...aNonDateColumn,
-        width: getColumnWidthFromType(aNonDateColumn.type!),
-      };
-      const expectedColumns = [columnsMock[0], expectedToHaveNewWidth, columnsMock[2]];
-
-      // pre-populate a new mock with existing columns:
-      const mockWithExistingColumns = set('foo.columns', columnsMock, timelineByIdMock);
-
-      const update = applyDeltaToTimelineColumnWidth({
-        id: 'foo',
-        columnId: aNonDateColumn.id,
-        delta,
-        timelineById: mockWithExistingColumns,
-      });
-
-      expect(update).toEqual(set('foo.columns', expectedColumns, mockWithExistingColumns));
-    });
-  });
-
-  describe('#addAndProviderToTimelineProvider', () => {
-    test('should add a new and provider to an existing timeline provider', () => {
-      const providerToAdd: DataProvider = {
-        and: [],
-        id: '567',
-        name: 'data provider 2',
-        enabled: true,
-        queryMatch: {
-          field: 'handsome',
-          value: 'garrett',
-          operator: IS_OPERATOR,
-        },
-        excluded: false,
-        kqlQuery: '',
-      };
-
-      const newTimeline = addTimelineProvider({
-        id: 'foo',
-        provider: providerToAdd,
-        timelineById: timelineByIdMock,
-      });
-
-      newTimeline.foo.highlightedDropAndProviderId = '567';
-
-      const andProviderToAdd: DataProvider = {
-        and: [],
-        id: '568',
-        name: 'And Data Provider',
-        enabled: true,
-        queryMatch: {
-          field: 'smart',
-          value: 'frank',
-          operator: IS_OPERATOR,
-        },
-
-        excluded: false,
-        kqlQuery: '',
-      };
-
-      const update = addTimelineProvider({
-        id: 'foo',
-        provider: andProviderToAdd,
-        timelineById: newTimeline,
-      });
-      const indexProvider = update.foo.dataProviders.findIndex(i => i.id === '567');
-      const addedAndDataProvider = update.foo.dataProviders[indexProvider].and[0];
-      const { and, ...expectedResult } = andProviderToAdd;
-      expect(addedAndDataProvider).toEqual(expectedResult);
-      newTimeline.foo.highlightedDropAndProviderId = '';
-    });
-
-    test('should add another and provider because it is not a duplicate', () => {
-      const providerToAdd: DataProvider = {
-        and: [
-          {
-            id: '568',
-            name: 'And Data Provider',
-            enabled: true,
-            queryMatch: {
-              field: 'smart',
-              value: 'garrett',
-              operator: IS_OPERATOR,
-            },
-            excluded: false,
-            kqlQuery: '',
-          },
-        ],
-        id: '567',
-        name: 'data provider 1',
-        enabled: true,
-        queryMatch: {
-          field: 'handsome',
-          value: 'frank',
-          operator: IS_OPERATOR,
-        },
-        excluded: false,
-        kqlQuery: '',
-      };
-
-      const newTimeline = addTimelineProvider({
-        id: 'foo',
-        provider: providerToAdd,
-        timelineById: timelineByIdMock,
-      });
-
-      newTimeline.foo.highlightedDropAndProviderId = '567';
-
-      const andProviderToAdd: DataProvider = {
-        and: [],
-        id: '569',
-        name: 'And Data Provider',
-        enabled: true,
-        queryMatch: {
-          field: 'happy',
-          value: 'andrewG',
-          operator: IS_OPERATOR,
-        },
-        excluded: false,
-        kqlQuery: '',
-      };
-      // temporary, we will have to decouple DataProvider & DataProvidersAnd
-      // that's bigger a refactor than just fixing a bug
-      delete andProviderToAdd.and;
-      const update = addTimelineProvider({
-        id: 'foo',
-        provider: andProviderToAdd,
-        timelineById: newTimeline,
-      });
-
-      expect(update).toEqual(set('foo.dataProviders[1].and[1]', andProviderToAdd, newTimeline));
-      newTimeline.foo.highlightedDropAndProviderId = '';
-    });
-
-    test('should NOT add another and provider because it is a duplicate', () => {
-      const providerToAdd: DataProvider = {
-        and: [
-          {
-            id: '568',
-            name: 'And Data Provider',
-            enabled: true,
-            queryMatch: {
-              field: 'smart',
-              value: 'garrett',
-              operator: IS_OPERATOR,
-            },
-            excluded: false,
-            kqlQuery: '',
-          },
-        ],
-        id: '567',
-        name: 'data provider 1',
-        enabled: true,
-        queryMatch: {
-          field: 'handsome',
-          value: 'frank',
-          operator: IS_OPERATOR,
-        },
-        excluded: false,
-        kqlQuery: '',
-      };
-
-      const newTimeline = addTimelineProvider({
-        id: 'foo',
-        provider: providerToAdd,
-        timelineById: timelineByIdMock,
-      });
-
-      newTimeline.foo.highlightedDropAndProviderId = '567';
-
-      const andProviderToAdd: DataProvider = {
-        and: [],
-        id: '569',
-        name: 'And Data Provider',
-        enabled: true,
-        queryMatch: {
-          field: 'smart',
-          value: 'garrett',
-          operator: IS_OPERATOR,
-        },
-        excluded: false,
-        kqlQuery: '',
-      };
-      const update = addTimelineProvider({
-        id: 'foo',
-        provider: andProviderToAdd,
-        timelineById: newTimeline,
-      });
-
-      expect(update).toEqual(newTimeline);
-      newTimeline.foo.highlightedDropAndProviderId = '';
-    });
-  });
-
-  describe('#updateTimelineColumns', () => {
-    test('should return a new reference and not the same reference', () => {
-      const update = updateTimelineColumns({
-        id: 'foo',
-        columns: columnsMock,
-        timelineById: timelineByIdMock,
-      });
-      expect(update).not.toBe(timelineByIdMock);
-    });
-
-    test('should update a timeline with new columns', () => {
-      const update = updateTimelineColumns({
-        id: 'foo',
-        columns: columnsMock,
-        timelineById: timelineByIdMock,
-      });
-      expect(update).toEqual(set('foo.columns', [...columnsMock], timelineByIdMock));
-    });
-  });
-
-  describe('#updateTimelineDescription', () => {
-    const newDescription = 'a new description';
-
-    test('should return a new reference and not the same reference', () => {
-      const update = updateTimelineDescription({
-        id: 'foo',
-        description: newDescription,
-        timelineById: timelineByIdMock,
-      });
-      expect(update).not.toBe(timelineByIdMock);
-    });
-
-    test('should update the timeline description', () => {
-      const update = updateTimelineDescription({
-        id: 'foo',
-        description: newDescription,
-        timelineById: timelineByIdMock,
-      });
-      expect(update).toEqual(set('foo.description', newDescription, timelineByIdMock));
-    });
-
-    test('should always trim all leading whitespace and allow only one trailing space', () => {
-      const update = updateTimelineDescription({
-        id: 'foo',
-        description: '      breathing room      ',
-        timelineById: timelineByIdMock,
-      });
-      expect(update).toEqual(set('foo.description', 'breathing room ', timelineByIdMock));
-    });
-  });
-
-  describe('#updateTimelineTitle', () => {
-    const newTitle = 'a new title';
-
-    test('should return a new reference and not the same reference', () => {
-      const update = updateTimelineTitle({
-        id: 'foo',
-        title: newTitle,
-        timelineById: timelineByIdMock,
-      });
-      expect(update).not.toBe(timelineByIdMock);
-    });
-
-    test('should update the timeline title', () => {
-      const update = updateTimelineTitle({
-        id: 'foo',
-        title: newTitle,
-        timelineById: timelineByIdMock,
-      });
-      expect(update).toEqual(set('foo.title', newTitle, timelineByIdMock));
-    });
-
-    test('should always trim all leading whitespace and allow only one trailing space', () => {
-      const update = updateTimelineTitle({
-        id: 'foo',
-        title: '      room at the back      ',
-        timelineById: timelineByIdMock,
-      });
-      expect(update).toEqual(set('foo.title', 'room at the back ', timelineByIdMock));
-    });
-  });
-
-  describe('#updateTimelineProviders', () => {
-    test('should return a new reference and not the same reference', () => {
-      const update = updateTimelineProviders({
-        id: 'foo',
-        providers: [
-          {
-            and: [],
-            id: '567',
-            name: 'data provider 2',
-            enabled: true,
-            queryMatch: {
-              field: '',
-              value: '',
-              operator: IS_OPERATOR,
-            },
-
-            excluded: false,
-            kqlQuery: '',
-          },
-        ],
-        timelineById: timelineByIdMock,
-      });
-      expect(update).not.toBe(timelineByIdMock);
-    });
-
-    test('should add update a timeline with new providers', () => {
-      const providerToAdd: DataProvider = {
-        and: [],
-        id: '567',
-        name: 'data provider 2',
-        enabled: true,
-        queryMatch: {
-          field: '',
-          value: '',
-          operator: IS_OPERATOR,
-        },
-
-        excluded: false,
-        kqlQuery: '',
-      };
-      const update = updateTimelineProviders({
-        id: 'foo',
-        providers: [providerToAdd],
-        timelineById: timelineByIdMock,
-      });
-      expect(update).toEqual(set('foo.dataProviders', [providerToAdd], timelineByIdMock));
-    });
-  });
-
-  describe('#updateTimelineRange', () => {
-    test('should return a new reference and not the same reference', () => {
-      const update = updateTimelineRange({
-        id: 'foo',
-        start: 23,
-        end: 33,
-        timelineById: timelineByIdMock,
-      });
-      expect(update).not.toBe(timelineByIdMock);
-    });
-
-    test('should update the timeline range', () => {
-      const update = updateTimelineRange({
-        id: 'foo',
-        start: 23,
-        end: 33,
-        timelineById: timelineByIdMock,
-      });
-      expect(update).toEqual(
-        set(
-          'foo.dateRange',
-          {
-            start: 23,
-            end: 33,
-          },
-          timelineByIdMock
-        )
-      );
-    });
-  });
-
-  describe('#updateTimelineSort', () => {
-    test('should return a new reference and not the same reference', () => {
-      const update = updateTimelineSort({
-        id: 'foo',
-        sort: {
-          columnId: 'some column',
-          sortDirection: Direction.desc,
-        },
-        timelineById: timelineByIdMock,
-      });
-      expect(update).not.toBe(timelineByIdMock);
-    });
-
-    test('should update the timeline range', () => {
-      const update = updateTimelineSort({
-        id: 'foo',
-        sort: {
-          columnId: 'some column',
-          sortDirection: Direction.desc,
-        },
-        timelineById: timelineByIdMock,
-      });
-      expect(update).toEqual(
-        set(
-          'foo.sort',
-          { columnId: 'some column', sortDirection: Direction.desc },
-          timelineByIdMock
-        )
-      );
-    });
-  });
-
-  describe('#updateTimelineProviderEnabled', () => {
-    test('should return a new reference and not the same reference', () => {
-      const update = updateTimelineProviderEnabled({
-        id: 'foo',
-        providerId: '123',
-        enabled: false, // value we are updating from true to false
-        timelineById: timelineByIdMock,
-      });
-      expect(update).not.toBe(timelineByIdMock);
-    });
-
-    test('should return a new reference for data provider and not the same reference of data provider', () => {
-      const update = updateTimelineProviderEnabled({
-        id: 'foo',
-        providerId: '123',
-        enabled: false, // value we are updating from true to false
-        timelineById: timelineByIdMock,
-      });
-      expect(update.foo.dataProviders).not.toBe(timelineByIdMock.foo.dataProviders);
-    });
-
-    test('should update the timeline provider enabled from true to false', () => {
-      const update = updateTimelineProviderEnabled({
-        id: 'foo',
-        providerId: '123',
-        enabled: false, // value we are updating from true to false
-        timelineById: timelineByIdMock,
-      });
-      const expected: TimelineById = {
-        foo: {
-          id: 'foo',
-          savedObjectId: null,
-          columns: [],
-          dataProviders: [
-            {
-              and: [],
-              id: '123',
-              name: 'data provider 1',
-              enabled: false, // This value changed from true to false
-              excluded: false,
-              kqlQuery: '',
-              queryMatch: {
-                field: '',
-                value: '',
-                operator: IS_OPERATOR,
-              },
-            },
-          ],
-          deletedEventIds: [],
-          description: '',
-          eventIdToNoteIds: {},
-          highlightedDropAndProviderId: '',
-          historyIds: [],
-          isFavorite: false,
-          isLive: false,
-          isSelectAllChecked: false,
-          isLoading: false,
-          kqlMode: 'filter',
-          kqlQuery: { filterQuery: null, filterQueryDraft: null },
-          loadingEventIds: [],
-          title: '',
-          timelineType: TimelineType.default,
-          templateTimelineVersion: null,
-          templateTimelineId: null,
-          noteIds: [],
-          dateRange: {
-            start: 0,
-            end: 0,
-          },
-          selectedEventIds: {},
-          show: true,
-          showRowRenderers: true,
-          showCheckboxes: false,
-          sort: {
-            columnId: '@timestamp',
-            sortDirection: Direction.desc,
-          },
-          pinnedEventIds: {},
-          pinnedEventsSaveObject: {},
-          itemsPerPage: 25,
-          itemsPerPageOptions: [10, 25, 50],
-          width: DEFAULT_TIMELINE_WIDTH,
-          isSaving: false,
-          version: null,
-        },
-      };
-      expect(update).toEqual(expected);
-    });
-
-    test('should update only one data provider and not two data providers', () => {
-      const multiDataProvider = timelineByIdMock.foo.dataProviders.concat({
-        and: [],
-        id: '456',
-        name: 'data provider 1',
-        enabled: true,
-        excluded: false,
-        kqlQuery: '',
-        queryMatch: {
-          field: '',
-          value: '',
-          operator: IS_OPERATOR,
-        },
-      });
-      const multiDataProviderMock = set('foo.dataProviders', multiDataProvider, timelineByIdMock);
-      const update = updateTimelineProviderEnabled({
-        id: 'foo',
-        providerId: '123',
-        enabled: false, // value we are updating from true to false
-        timelineById: multiDataProviderMock,
-      });
-      const expected: TimelineById = {
-        foo: {
-          id: 'foo',
-          savedObjectId: null,
-          columns: [],
-          dataProviders: [
-            {
-              and: [],
-              id: '123',
-              name: 'data provider 1',
-              enabled: false, // value we are updating from true to false
-              excluded: false,
-              kqlQuery: '',
-              queryMatch: {
-                field: '',
-                value: '',
-                operator: IS_OPERATOR,
-              },
-            },
-            {
-              and: [],
-              id: '456',
-              name: 'data provider 1',
-              enabled: true,
-              excluded: false,
-              kqlQuery: '',
-              queryMatch: {
-                field: '',
-                value: '',
-                operator: IS_OPERATOR,
-              },
-            },
-          ],
-          description: '',
-          deletedEventIds: [],
-          eventIdToNoteIds: {},
-          highlightedDropAndProviderId: '',
-          historyIds: [],
-          isFavorite: false,
-          isLive: false,
-          isSelectAllChecked: false,
-          isLoading: false,
-          kqlMode: 'filter',
-          kqlQuery: { filterQuery: null, filterQueryDraft: null },
-          loadingEventIds: [],
-          title: '',
-          timelineType: TimelineType.default,
-          templateTimelineVersion: null,
-          templateTimelineId: null,
-          noteIds: [],
-          dateRange: {
-            start: 0,
-            end: 0,
-          },
-          selectedEventIds: {},
-          show: true,
-          showRowRenderers: true,
-          showCheckboxes: false,
-          sort: {
-            columnId: '@timestamp',
-            sortDirection: Direction.desc,
-          },
-          pinnedEventIds: {},
-          pinnedEventsSaveObject: {},
-          itemsPerPage: 25,
-          itemsPerPageOptions: [10, 25, 50],
-          width: DEFAULT_TIMELINE_WIDTH,
-          isSaving: false,
-          version: null,
-        },
-      };
-      expect(update).toEqual(expected);
-    });
-  });
-
-  describe('#updateTimelineAndProviderEnabled', () => {
-    let timelineByIdwithAndMock: TimelineById = timelineByIdMock;
-    beforeEach(() => {
-      const providerToAdd: DataProvider = {
-        and: [
-          {
-            id: '568',
-            name: 'And Data Provider',
-            enabled: true,
-            queryMatch: {
-              field: '',
-              value: '',
-              operator: IS_OPERATOR,
-            },
-
-            excluded: false,
-            kqlQuery: '',
-          },
-        ],
-        id: '567',
-        name: 'data provider 1',
-        enabled: true,
-        queryMatch: {
-          field: '',
-          value: '',
-          operator: IS_OPERATOR,
-        },
-
-        excluded: false,
-        kqlQuery: '',
-      };
-
-      timelineByIdwithAndMock = addTimelineProvider({
-        id: 'foo',
-        provider: providerToAdd,
-        timelineById: timelineByIdMock,
-      });
-    });
-
-    test('should return a new reference and not the same reference', () => {
-      const update = updateTimelineProviderEnabled({
-        id: 'foo',
-        providerId: '567',
-        enabled: false, // value we are updating from true to false
-        timelineById: timelineByIdwithAndMock,
-        andProviderId: '568',
-      });
-      expect(update).not.toBe(timelineByIdwithAndMock);
-    });
-
-    test('should return a new reference for and data provider and not the same reference of data and provider', () => {
-      const update = updateTimelineProviderEnabled({
-        id: 'foo',
-        providerId: '567',
-        enabled: false, // value we are updating from true to false
-        timelineById: timelineByIdwithAndMock,
-        andProviderId: '568',
-      });
-      expect(update.foo.dataProviders).not.toBe(timelineByIdMock.foo.dataProviders);
-    });
-
-    test('should update the timeline and provider enabled from true to false', () => {
-      const update = updateTimelineProviderEnabled({
-        id: 'foo',
-        providerId: '567',
-        enabled: false, // value we are updating from true to false
-        timelineById: timelineByIdwithAndMock,
-        andProviderId: '568',
-      });
-      const indexProvider = update.foo.dataProviders.findIndex(i => i.id === '567');
-      expect(update.foo.dataProviders[indexProvider].and[0].enabled).toEqual(false);
-    });
-
-    test('should update only one and data provider and not two and data providers', () => {
-      const indexProvider = timelineByIdwithAndMock.foo.dataProviders.findIndex(
-        i => i.id === '567'
-      );
-      const multiAndDataProvider = timelineByIdwithAndMock.foo.dataProviders[
-        indexProvider
-      ].and.concat({
-        id: '456',
-        name: 'new and data provider',
-        enabled: true,
-        queryMatch: {
-          field: '',
-          value: '',
-          operator: IS_OPERATOR,
-        },
-
-        excluded: false,
-        kqlQuery: '',
-      });
-      const multiAndDataProviderMock = set(
-        `foo.dataProviders[${indexProvider}].and`,
-        multiAndDataProvider,
-        timelineByIdwithAndMock
-      );
-      const update = updateTimelineProviderEnabled({
-        id: 'foo',
-        providerId: '567',
-        enabled: false, // value we are updating from true to false
-        timelineById: multiAndDataProviderMock,
-        andProviderId: '568',
-      });
-      const oldAndProvider = update.foo.dataProviders[indexProvider].and.find(i => i.id === '568');
-      const newAndProvider = update.foo.dataProviders[indexProvider].and.find(i => i.id === '456');
-      expect(oldAndProvider!.enabled).toEqual(false);
-      expect(newAndProvider!.enabled).toEqual(true);
-    });
-  });
-
-  describe('#updateTimelineProviderExcluded', () => {
-    test('should return a new reference and not the same reference', () => {
-      const update = updateTimelineProviderExcluded({
-        id: 'foo',
-        providerId: '123',
-        excluded: true, // value we are updating from false to true
-        timelineById: timelineByIdMock,
-      });
-      expect(update).not.toBe(timelineByIdMock);
-    });
-
-    test('should return a new reference for data provider and not the same reference of data provider', () => {
-      const update = updateTimelineProviderExcluded({
-        id: 'foo',
-        providerId: '123',
-        excluded: true, // value we are updating from false to true
-        timelineById: timelineByIdMock,
-      });
-      expect(update.foo.dataProviders).not.toBe(timelineByIdMock.foo.dataProviders);
-    });
-
-    test('should update the timeline provider excluded from true to false', () => {
-      const update = updateTimelineProviderExcluded({
-        id: 'foo',
-        providerId: '123',
-        excluded: true, // value we are updating from false to true
-        timelineById: timelineByIdMock,
-      });
-      const expected: TimelineById = {
-        foo: {
-          id: 'foo',
-          savedObjectId: null,
-          columns: [],
-          dataProviders: [
-            {
-              and: [],
-              id: '123',
-              name: 'data provider 1',
-              enabled: true,
-              excluded: true, // This value changed from true to false
-              kqlQuery: '',
-              queryMatch: {
-                field: '',
-                value: '',
-                operator: IS_OPERATOR,
-              },
-            },
-          ],
-          description: '',
-          deletedEventIds: [],
-          eventIdToNoteIds: {},
-          highlightedDropAndProviderId: '',
-          historyIds: [],
-          isFavorite: false,
-          isLive: false,
-          isSelectAllChecked: false,
-          isLoading: false,
-          kqlMode: 'filter',
-          kqlQuery: { filterQuery: null, filterQueryDraft: null },
-          loadingEventIds: [],
-          title: '',
-          timelineType: TimelineType.default,
-          templateTimelineVersion: null,
-          templateTimelineId: null,
-          noteIds: [],
-          dateRange: {
-            start: 0,
-            end: 0,
-          },
-          selectedEventIds: {},
-          show: true,
-          showRowRenderers: true,
-          showCheckboxes: false,
-          sort: {
-            columnId: '@timestamp',
-            sortDirection: Direction.desc,
-          },
-          pinnedEventIds: {},
-          pinnedEventsSaveObject: {},
-          itemsPerPage: 25,
-          itemsPerPageOptions: [10, 25, 50],
-          width: DEFAULT_TIMELINE_WIDTH,
-          isSaving: false,
-          version: null,
-        },
-      };
-      expect(update).toEqual(expected);
-    });
-
-    test('should update only one data provider and not two data providers', () => {
-      const multiDataProvider = timelineByIdMock.foo.dataProviders.concat({
-        and: [],
-        id: '456',
-        name: 'data provider 1',
-        enabled: true,
-        excluded: false,
-        kqlQuery: '',
-        queryMatch: {
-          field: '',
-          value: '',
-          operator: IS_OPERATOR,
-        },
-      });
-      const multiDataProviderMock = set('foo.dataProviders', multiDataProvider, timelineByIdMock);
-      const update = updateTimelineProviderExcluded({
-        id: 'foo',
-        providerId: '123',
-        excluded: true, // value we are updating from false to true
-        timelineById: multiDataProviderMock,
-      });
-      const expected: TimelineById = {
-        foo: {
-          id: 'foo',
-          savedObjectId: null,
-          columns: [],
-          dataProviders: [
-            {
-              and: [],
-              id: '123',
-              name: 'data provider 1',
-              enabled: true,
-              excluded: true, // value we are updating from false to true
-              kqlQuery: '',
-              queryMatch: {
-                field: '',
-                value: '',
-                operator: IS_OPERATOR,
-              },
-            },
-            {
-              and: [],
-              id: '456',
-              name: 'data provider 1',
-              enabled: true,
-              excluded: false,
-              kqlQuery: '',
-              queryMatch: {
-                field: '',
-                value: '',
-                operator: IS_OPERATOR,
-              },
-            },
-          ],
-          description: '',
-          deletedEventIds: [],
-          eventIdToNoteIds: {},
-          highlightedDropAndProviderId: '',
-          historyIds: [],
-          isFavorite: false,
-          isLive: false,
-          isSelectAllChecked: false,
-          isLoading: false,
-          kqlMode: 'filter',
-          kqlQuery: { filterQuery: null, filterQueryDraft: null },
-          loadingEventIds: [],
-          title: '',
-          timelineType: TimelineType.default,
-          templateTimelineId: null,
-          templateTimelineVersion: null,
-          noteIds: [],
-          dateRange: {
-            start: 0,
-            end: 0,
-          },
-          selectedEventIds: {},
-          show: true,
-          showRowRenderers: true,
-          showCheckboxes: false,
-          sort: {
-            columnId: '@timestamp',
-            sortDirection: Direction.desc,
-          },
-          pinnedEventIds: {},
-          pinnedEventsSaveObject: {},
-          itemsPerPage: 25,
-          itemsPerPageOptions: [10, 25, 50],
-          width: DEFAULT_TIMELINE_WIDTH,
-          isSaving: false,
-          version: null,
-        },
-      };
-      expect(update).toEqual(expected);
-    });
-  });
-
-  describe('#updateTimelineAndProviderExcluded', () => {
-    let timelineByIdwithAndMock: TimelineById = timelineByIdMock;
-    beforeEach(() => {
-      const providerToAdd: DataProvider = {
-        and: [
-          {
-            id: '568',
-            name: 'And Data Provider',
-            enabled: true,
-            queryMatch: {
-              field: '',
-              value: '',
-              operator: IS_OPERATOR,
-            },
-
-            excluded: false,
-            kqlQuery: '',
-          },
-        ],
-        id: '567',
-        name: 'data provider 1',
-        enabled: true,
-        queryMatch: {
-          field: '',
-          value: '',
-          operator: IS_OPERATOR,
-        },
-
-        excluded: false,
-        kqlQuery: '',
-      };
-
-      timelineByIdwithAndMock = addTimelineProvider({
-        id: 'foo',
-        provider: providerToAdd,
-        timelineById: timelineByIdMock,
-      });
-    });
-
-    test('should return a new reference and not the same reference', () => {
-      const update = updateTimelineProviderExcluded({
-        id: 'foo',
-        providerId: '567',
-        excluded: true, // value we are updating from true to false
-        timelineById: timelineByIdwithAndMock,
-        andProviderId: '568',
-      });
-      expect(update).not.toBe(timelineByIdwithAndMock);
-    });
-
-    test('should return a new reference for and data provider and not the same reference of data and provider', () => {
-      const update = updateTimelineProviderExcluded({
-        id: 'foo',
-        providerId: '567',
-        excluded: true, // value we are updating from false to true
-        timelineById: timelineByIdwithAndMock,
-        andProviderId: '568',
-      });
-      expect(update.foo.dataProviders).not.toBe(timelineByIdMock.foo.dataProviders);
-    });
-
-    test('should update the timeline and provider excluded from true to false', () => {
-      const update = updateTimelineProviderExcluded({
-        id: 'foo',
-        providerId: '567',
-        excluded: true, // value we are updating from true to false
-        timelineById: timelineByIdwithAndMock,
-        andProviderId: '568',
-      });
-      const indexProvider = update.foo.dataProviders.findIndex(i => i.id === '567');
-      expect(update.foo.dataProviders[indexProvider].and[0].enabled).toEqual(true);
-    });
-
-    test('should update only one and data provider and not two and data providers', () => {
-      const indexProvider = timelineByIdwithAndMock.foo.dataProviders.findIndex(
-        i => i.id === '567'
-      );
-      const multiAndDataProvider = timelineByIdwithAndMock.foo.dataProviders[
-        indexProvider
-      ].and.concat({
-        id: '456',
-        name: 'new and data provider',
-        enabled: true,
-        queryMatch: {
-          field: '',
-          value: '',
-          operator: IS_OPERATOR,
-        },
-
-        excluded: false,
-        kqlQuery: '',
-      });
-      const multiAndDataProviderMock = set(
-        `foo.dataProviders[${indexProvider}].and`,
-        multiAndDataProvider,
-        timelineByIdwithAndMock
-      );
-      const update = updateTimelineProviderExcluded({
-        id: 'foo',
-        providerId: '567',
-        excluded: true, // value we are updating from true to false
-        timelineById: multiAndDataProviderMock,
-        andProviderId: '568',
-      });
-      const oldAndProvider = update.foo.dataProviders[indexProvider].and.find(i => i.id === '568');
-      const newAndProvider = update.foo.dataProviders[indexProvider].and.find(i => i.id === '456');
-      expect(oldAndProvider!.excluded).toEqual(true);
-      expect(newAndProvider!.excluded).toEqual(false);
-    });
-  });
-
-  describe('#updateTimelineItemsPerPage', () => {
-    test('should return a new reference and not the same reference', () => {
-      const update = updateTimelineItemsPerPage({
-        id: 'foo',
-        itemsPerPage: 10, // value we are updating from 5 to 10
-        timelineById: timelineByIdMock,
-      });
-      expect(update).not.toBe(timelineByIdMock);
-    });
-
-    test('should update the items per page from 25 to 50', () => {
-      const update = updateTimelineItemsPerPage({
-        id: 'foo',
-        itemsPerPage: 50, // value we are updating from 25 to 50
-        timelineById: timelineByIdMock,
-      });
-      const expected: TimelineById = {
-        foo: {
-          id: 'foo',
-          savedObjectId: null,
-          columns: [],
-          dataProviders: [
-            {
-              and: [],
-              id: '123',
-              name: 'data provider 1',
-              enabled: true,
-              queryMatch: {
-                field: '',
-                value: '',
-                operator: IS_OPERATOR,
-              },
-
-              excluded: false,
-              kqlQuery: '',
-            },
-          ],
-          description: '',
-          deletedEventIds: [],
-          eventIdToNoteIds: {},
-          highlightedDropAndProviderId: '',
-          historyIds: [],
-          isFavorite: false,
-          isLive: false,
-          isSelectAllChecked: false,
-          isLoading: false,
-          kqlMode: 'filter',
-          kqlQuery: { filterQuery: null, filterQueryDraft: null },
-          loadingEventIds: [],
-          title: '',
-          timelineType: TimelineType.default,
-          templateTimelineVersion: null,
-          templateTimelineId: null,
-          noteIds: [],
-          dateRange: {
-            start: 0,
-            end: 0,
-          },
-          selectedEventIds: {},
-          show: true,
-          showRowRenderers: true,
-          showCheckboxes: false,
-          sort: {
-            columnId: '@timestamp',
-            sortDirection: Direction.desc,
-          },
-          pinnedEventIds: {},
-          pinnedEventsSaveObject: {},
-          itemsPerPage: 50,
-          itemsPerPageOptions: [10, 25, 50],
-          width: DEFAULT_TIMELINE_WIDTH,
-          isSaving: false,
-          version: null,
-        },
-      };
-      expect(update).toEqual(expected);
-    });
-  });
-
-  describe('#updateTimelinePerPageOptions', () => {
-    test('should return a new reference and not the same reference', () => {
-      const update = updateTimelinePerPageOptions({
-        id: 'foo',
-        itemsPerPageOptions: [100, 200, 300], // value we are updating from [5, 10, 20]
-        timelineById: timelineByIdMock,
-      });
-      expect(update).not.toBe(timelineByIdMock);
-    });
-
-    test('should update the items per page options from [10, 25, 50] to [100, 200, 300]', () => {
-      const update = updateTimelinePerPageOptions({
-        id: 'foo',
-        itemsPerPageOptions: [100, 200, 300], // value we are updating from [10, 25, 50]
-        timelineById: timelineByIdMock,
-      });
-      const expected: TimelineById = {
-        foo: {
-          columns: [],
-          dataProviders: [
-            {
-              and: [],
-              id: '123',
-              name: 'data provider 1',
-              enabled: true,
-              queryMatch: {
-                field: '',
-                value: '',
-                operator: IS_OPERATOR,
-              },
-
-              excluded: false,
-              kqlQuery: '',
-            },
-          ],
-          description: '',
-          deletedEventIds: [],
-          eventIdToNoteIds: {},
-          highlightedDropAndProviderId: '',
-          historyIds: [],
-          isFavorite: false,
-          isLive: false,
-          isSelectAllChecked: false,
-          isLoading: false,
-          id: 'foo',
-          savedObjectId: null,
-          kqlMode: 'filter',
-          kqlQuery: { filterQuery: null, filterQueryDraft: null },
-          loadingEventIds: [],
-          title: '',
-          timelineType: TimelineType.default,
-          templateTimelineVersion: null,
-          templateTimelineId: null,
-          noteIds: [],
-          dateRange: {
-            start: 0,
-            end: 0,
-          },
-          selectedEventIds: {},
-          show: true,
-          showRowRenderers: true,
-          showCheckboxes: false,
-          sort: {
-            columnId: '@timestamp',
-            sortDirection: Direction.desc,
-          },
-          pinnedEventIds: {},
-          pinnedEventsSaveObject: {},
-          itemsPerPage: 25,
-          itemsPerPageOptions: [100, 200, 300], // updated
-          width: DEFAULT_TIMELINE_WIDTH,
-          isSaving: false,
-          version: null,
-        },
-      };
-      expect(update).toEqual(expected);
-    });
-  });
-
-  describe('#removeTimelineProvider', () => {
-    test('should return a new reference and not the same reference', () => {
-      const update = removeTimelineProvider({
-        id: 'foo',
-        providerId: '123',
-        timelineById: timelineByIdMock,
-      });
-      expect(update).not.toBe(timelineByIdMock);
-    });
-
-    test('should remove a timeline provider', () => {
-      const update = removeTimelineProvider({
-        id: 'foo',
-        providerId: '123',
-        timelineById: timelineByIdMock,
-      });
-      expect(update).toEqual(set('foo.dataProviders', [], timelineByIdMock));
-    });
-
-    test('should remove only one data provider and not two data providers', () => {
-      const multiDataProvider = timelineByIdMock.foo.dataProviders.concat({
-        and: [],
-        id: '456',
-        name: 'data provider 2',
-        enabled: true,
-        queryMatch: {
-          field: '',
-          value: '',
-          operator: IS_OPERATOR,
-        },
-
-        excluded: false,
-        kqlQuery: '',
-      });
-      const multiDataProviderMock = set('foo.dataProviders', multiDataProvider, timelineByIdMock);
-      const update = removeTimelineProvider({
-        id: 'foo',
-        providerId: '123',
-        timelineById: multiDataProviderMock,
-      });
-      const expected: TimelineById = {
-        foo: {
-          columns: [],
-          dataProviders: [
-            {
-              and: [],
-              id: '456',
-              name: 'data provider 2',
-              enabled: true,
-              queryMatch: {
-                field: '',
-                value: '',
-                operator: IS_OPERATOR,
-              },
-
-              excluded: false,
-              kqlQuery: '',
-            },
-          ],
-          description: '',
-          deletedEventIds: [],
-          eventIdToNoteIds: {},
-          highlightedDropAndProviderId: '',
-          historyIds: [],
-          id: 'foo',
-          savedObjectId: null,
-          isFavorite: false,
-          isLive: false,
-          isSelectAllChecked: false,
-          isLoading: false,
-          kqlMode: 'filter',
-          kqlQuery: { filterQuery: null, filterQueryDraft: null },
-          loadingEventIds: [],
-          title: '',
-          timelineType: TimelineType.default,
-          templateTimelineVersion: null,
-          templateTimelineId: null,
-          noteIds: [],
-          dateRange: {
-            start: 0,
-            end: 0,
-          },
-          selectedEventIds: {},
-          show: true,
-          showRowRenderers: true,
-          showCheckboxes: false,
-          sort: {
-            columnId: '@timestamp',
-            sortDirection: Direction.desc,
-          },
-          pinnedEventIds: {},
-          pinnedEventsSaveObject: {},
-          itemsPerPage: 25,
-          itemsPerPageOptions: [10, 25, 50],
-          width: DEFAULT_TIMELINE_WIDTH,
-          isSaving: false,
-          version: null,
-        },
-      };
-      expect(update).toEqual(expected);
-    });
-
-    test('should remove only first provider and not nested andProvider', () => {
-      const dataProviders: DataProvider[] = [
-        {
-          and: [],
-          id: '111',
-          name: 'data provider 1',
-          enabled: true,
-          queryMatch: {
-            field: '',
-            value: '',
-            operator: IS_OPERATOR,
-          },
-
-          excluded: false,
-          kqlQuery: '',
-        },
-        {
-          and: [],
-          id: '222',
-          name: 'data provider 2',
-          enabled: true,
-          queryMatch: {
-            field: '',
-            value: '',
-            operator: IS_OPERATOR,
-          },
-
-          excluded: false,
-          kqlQuery: '',
-        },
-        {
-          and: [],
-          id: '333',
-          name: 'data provider 3',
-          enabled: true,
-          queryMatch: {
-            field: '',
-            value: '',
-            operator: IS_OPERATOR,
-          },
-
-          excluded: false,
-          kqlQuery: '',
-        },
-      ];
-
-      const multiDataProviderMock = set('foo.dataProviders', dataProviders, timelineByIdMock);
-
-      const andDataProvider: DataProvidersAnd = {
-        id: '211',
-        name: 'And Data Provider',
-        enabled: true,
-        queryMatch: {
-          field: '',
-          value: '',
-          operator: IS_OPERATOR,
-        },
-
-        excluded: false,
-        kqlQuery: '',
-      };
-
-      const nestedMultiAndDataProviderMock = set(
-        'foo.dataProviders[1].and',
-        [andDataProvider],
-        multiDataProviderMock
-      );
-
-      const update = removeTimelineProvider({
-        id: 'foo',
-        providerId: '222',
-        timelineById: nestedMultiAndDataProviderMock,
-      });
-      expect(update).toEqual(
-        set(
-          'foo.dataProviders',
-          [
-            nestedMultiAndDataProviderMock.foo.dataProviders[0],
-            { ...andDataProvider, and: [] },
-            nestedMultiAndDataProviderMock.foo.dataProviders[2],
-          ],
-          timelineByIdMock
-        )
-      );
-    });
-
-    test('should remove only the first provider and keep multiple nested andProviders', () => {
-      const multiDataProvider: DataProvider[] = [
-        {
-          and: [
-            {
-              enabled: true,
-              id: 'socket_closed-MSoH7GoB9v5HJNSHRYj1-user_name-root',
-              name: 'root',
-              excluded: false,
-              kqlQuery: '',
-              queryMatch: {
-                field: 'user.name',
-                value: 'root',
-                operator: ':',
-              },
-            },
-            {
-              enabled: true,
-              id: 'executed-yioH7GoB9v5HJNSHKnp5-auditd_result-success',
-              name: 'success',
-              excluded: false,
-              kqlQuery: '',
-              queryMatch: {
-                field: 'auditd.result',
-                value: 'success',
-                operator: ':',
-              },
-            },
-          ],
-          enabled: true,
-          excluded: false,
-          id: 'hosts-table-hostName-suricata-iowa',
-          name: 'suricata-iowa',
-          kqlQuery: '',
-          queryMatch: {
-            field: 'host.name',
-            value: 'suricata-iowa',
-            operator: ':',
-          },
-        },
-      ];
-
-      const multiDataProviderMock = set('foo.dataProviders', multiDataProvider, timelineByIdMock);
-
-      const update = removeTimelineProvider({
-        id: 'foo',
-        providerId: 'hosts-table-hostName-suricata-iowa',
-        timelineById: multiDataProviderMock,
-      });
-
-      expect(update).toEqual(
-        set(
-          'foo.dataProviders',
-          [
-            {
-              enabled: true,
-              id: 'socket_closed-MSoH7GoB9v5HJNSHRYj1-user_name-root',
-              name: 'root',
-              excluded: false,
-              kqlQuery: '',
-              queryMatch: {
-                field: 'user.name',
-                value: 'root',
-                operator: ':',
-              },
-              and: [
-                {
-                  enabled: true,
-                  id: 'executed-yioH7GoB9v5HJNSHKnp5-auditd_result-success',
-                  name: 'success',
-                  excluded: false,
-                  kqlQuery: '',
-                  queryMatch: {
-                    field: 'auditd.result',
-                    value: 'success',
-                    operator: ':',
-                  },
-                },
-              ],
-            },
-          ],
-          timelineByIdMock
-        )
-      );
-    });
-    test('should remove only the first AND provider when the first AND is deleted, and there are multiple andProviders', () => {
-      const multiDataProvider: DataProvider[] = [
-        {
-          and: [
-            {
-              enabled: true,
-              id: 'socket_closed-MSoH7GoB9v5HJNSHRYj1-user_name-root',
-              name: 'root',
-              excluded: false,
-              kqlQuery: '',
-              queryMatch: {
-                field: 'user.name',
-                value: 'root',
-                operator: ':',
-              },
-            },
-            {
-              enabled: true,
-              id: 'executed-yioH7GoB9v5HJNSHKnp5-auditd_result-success',
-              name: 'success',
-              excluded: false,
-              kqlQuery: '',
-              queryMatch: {
-                field: 'auditd.result',
-                value: 'success',
-                operator: ':',
-              },
-            },
-          ],
-          enabled: true,
-          excluded: false,
-          id: 'hosts-table-hostName-suricata-iowa',
-          name: 'suricata-iowa',
-          kqlQuery: '',
-          queryMatch: {
-            field: 'host.name',
-            value: 'suricata-iowa',
-            operator: ':',
-          },
-        },
-      ];
-
-      const multiDataProviderMock = set('foo.dataProviders', multiDataProvider, timelineByIdMock);
-
-      const update = removeTimelineProvider({
-        andProviderId: 'socket_closed-MSoH7GoB9v5HJNSHRYj1-user_name-root',
-        id: 'foo',
-        providerId: 'hosts-table-hostName-suricata-iowa',
-        timelineById: multiDataProviderMock,
-      });
-
-      expect(update).toEqual(
-        set(
-          'foo.dataProviders',
-          [
-            {
-              and: [
-                {
-                  enabled: true,
-                  id: 'executed-yioH7GoB9v5HJNSHKnp5-auditd_result-success',
-                  name: 'success',
-                  excluded: false,
-                  kqlQuery: '',
-                  queryMatch: {
-                    field: 'auditd.result',
-                    value: 'success',
-                    operator: ':',
-                  },
-                },
-              ],
-              enabled: true,
-              excluded: false,
-              id: 'hosts-table-hostName-suricata-iowa',
-              name: 'suricata-iowa',
-              kqlQuery: '',
-              queryMatch: {
-                field: 'host.name',
-                value: 'suricata-iowa',
-                operator: ':',
-              },
-            },
-          ],
-          timelineByIdMock
-        )
-      );
-    });
-
-    test('should remove only the second AND provider when the second AND is deleted, and there are multiple andProviders', () => {
-      const multiDataProvider: DataProvider[] = [
-        {
-          and: [
-            {
-              enabled: true,
-              id: 'socket_closed-MSoH7GoB9v5HJNSHRYj1-user_name-root',
-              name: 'root',
-              excluded: false,
-              kqlQuery: '',
-              queryMatch: {
-                field: 'user.name',
-                value: 'root',
-                operator: ':',
-              },
-            },
-            {
-              enabled: true,
-              id: 'executed-yioH7GoB9v5HJNSHKnp5-auditd_result-success',
-              name: 'success',
-              excluded: false,
-              kqlQuery: '',
-              queryMatch: {
-                field: 'auditd.result',
-                value: 'success',
-                operator: ':',
-              },
-            },
-          ],
-          enabled: true,
-          excluded: false,
-          id: 'hosts-table-hostName-suricata-iowa',
-          name: 'suricata-iowa',
-          kqlQuery: '',
-          queryMatch: {
-            field: 'host.name',
-            value: 'suricata-iowa',
-            operator: ':',
-          },
-        },
-      ];
-
-      const multiDataProviderMock = set('foo.dataProviders', multiDataProvider, timelineByIdMock);
-
-      const update = removeTimelineProvider({
-        andProviderId: 'executed-yioH7GoB9v5HJNSHKnp5-auditd_result-success',
-        id: 'foo',
-        providerId: 'hosts-table-hostName-suricata-iowa',
-        timelineById: multiDataProviderMock,
-      });
-
-      expect(update).toEqual(
-        set(
-          'foo.dataProviders',
-          [
-            {
-              and: [
-                {
-                  enabled: true,
-                  id: 'socket_closed-MSoH7GoB9v5HJNSHRYj1-user_name-root',
-                  name: 'root',
-                  excluded: false,
-                  kqlQuery: '',
-                  queryMatch: {
-                    field: 'user.name',
-                    value: 'root',
-                    operator: ':',
-                  },
-                },
-              ],
-              enabled: true,
-              excluded: false,
-              id: 'hosts-table-hostName-suricata-iowa',
-              name: 'suricata-iowa',
-              kqlQuery: '',
-              queryMatch: {
-                field: 'host.name',
-                value: 'suricata-iowa',
-                operator: ':',
-              },
-            },
-          ],
-          timelineByIdMock
-        )
-      );
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/store/timeline/refetch_queries.ts b/x-pack/plugins/siem/public/store/timeline/refetch_queries.ts
deleted file mode 100644
index a19f91aa530e8c..00000000000000
--- a/x-pack/plugins/siem/public/store/timeline/refetch_queries.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-/*
- * 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 { allTimelinesQuery } from '../../containers/timeline/all/index.gql_query';
-import { Direction } from '../../graphql/types';
-import { DEFAULT_SORT_FIELD } from '../../components/open_timeline/constants';
-
-export const refetchQueries = [
-  {
-    query: allTimelinesQuery,
-    variables: {
-      search: '',
-      pageInfo: {
-        pageIndex: 1,
-        pageSize: 10,
-      },
-      sort: { sortField: DEFAULT_SORT_FIELD, sortOrder: Direction.desc },
-      onlyUserFavorite: false,
-    },
-  },
-];
diff --git a/x-pack/plugins/siem/public/store/timeline/selectors.ts b/x-pack/plugins/siem/public/store/timeline/selectors.ts
deleted file mode 100644
index 780145ebfa54c6..00000000000000
--- a/x-pack/plugins/siem/public/store/timeline/selectors.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-/*
- * 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 { createSelector } from 'reselect';
-
-import { isFromKueryExpressionValid } from '../../lib/keury';
-import { State } from '../reducer';
-
-import { TimelineModel } from './model';
-import { AutoSavedWarningMsg, TimelineById } from './types';
-
-const selectTimelineById = (state: State): TimelineById => state.timeline.timelineById;
-
-const selectAutoSaveMsg = (state: State): AutoSavedWarningMsg => state.timeline.autoSavedWarningMsg;
-
-const selectCallOutUnauthorizedMsg = (state: State): boolean =>
-  state.timeline.showCallOutUnauthorizedMsg;
-
-export const selectTimeline = (state: State, timelineId: string): TimelineModel =>
-  state.timeline.timelineById[timelineId];
-
-export const autoSaveMsgSelector = createSelector(selectAutoSaveMsg, autoSaveMsg => autoSaveMsg);
-
-export const timelineByIdSelector = createSelector(
-  selectTimelineById,
-  timelineById => timelineById
-);
-
-export const getShowCallOutUnauthorizedMsg = () =>
-  createSelector(
-    selectCallOutUnauthorizedMsg,
-    showCallOutUnauthorizedMsg => showCallOutUnauthorizedMsg
-  );
-
-export const getTimelines = () => timelineByIdSelector;
-
-export const getTimelineByIdSelector = () => createSelector(selectTimeline, timeline => timeline);
-
-export const getEventsByIdSelector = () => createSelector(selectTimeline, timeline => timeline);
-
-export const getKqlFilterQuerySelector = () =>
-  createSelector(selectTimeline, timeline =>
-    timeline &&
-    timeline.kqlQuery &&
-    timeline.kqlQuery.filterQuery &&
-    timeline.kqlQuery.filterQuery.kuery
-      ? timeline.kqlQuery.filterQuery.kuery.expression
-      : null
-  );
-
-export const getKqlFilterQueryDraftSelector = () =>
-  createSelector(selectTimeline, timeline =>
-    timeline && timeline.kqlQuery ? timeline.kqlQuery.filterQueryDraft : null
-  );
-
-export const getKqlFilterKuerySelector = () =>
-  createSelector(selectTimeline, timeline =>
-    timeline &&
-    timeline.kqlQuery &&
-    timeline.kqlQuery.filterQuery &&
-    timeline.kqlQuery.filterQuery.kuery
-      ? timeline.kqlQuery.filterQuery.kuery
-      : null
-  );
-
-export const isFilterQueryDraftValidSelector = () =>
-  createSelector(
-    selectTimeline,
-    timeline =>
-      timeline &&
-      timeline.kqlQuery &&
-      isFromKueryExpressionValid(timeline.kqlQuery.filterQueryDraft)
-  );
diff --git a/x-pack/plugins/siem/public/timelines/components/certificate_fingerprint/index.test.tsx b/x-pack/plugins/siem/public/timelines/components/certificate_fingerprint/index.test.tsx
new file mode 100644
index 00000000000000..16d4d3b6c7cbae
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/certificate_fingerprint/index.test.tsx
@@ -0,0 +1,78 @@
+/*
+ * 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 { TestProviders } from '../../../common/mock';
+import { useMountAppended } from '../../../common/utils/use_mount_appended';
+
+import { CertificateFingerprint } from '.';
+
+describe('CertificateFingerprint', () => {
+  const mount = useMountAppended();
+  test('renders the expected label', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <CertificateFingerprint
+          eventId="Tgwnt2kBqd-n62SwPZDP"
+          certificateType="client"
+          contextId="test"
+          fieldName="tls.client_certificate.fingerprint.sha1"
+          value="3f4c57934e089f02ae7511200aee2d7e7aabd272"
+        />
+      </TestProviders>
+    );
+    expect(
+      wrapper
+        .find('[data-test-subj="fingerprint-label"]')
+        .first()
+        .text()
+    ).toEqual('client cert');
+  });
+
+  test('renders the fingerprint as text', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <CertificateFingerprint
+          eventId="Tgwnt2kBqd-n62SwPZDP"
+          certificateType="client"
+          contextId="test"
+          fieldName="tls.client_certificate.fingerprint.sha1"
+          value="3f4c57934e089f02ae7511200aee2d7e7aabd272"
+        />
+      </TestProviders>
+    );
+    expect(
+      wrapper
+        .find('[data-test-subj="certificate-fingerprint-link"]')
+        .first()
+        .text()
+    ).toEqual('3f4c57934e089f02ae7511200aee2d7e7aabd272');
+  });
+
+  test('it renders a hyperlink to an external site to compare the fingerprint against a known set of signatures', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <CertificateFingerprint
+          eventId="Tgwnt2kBqd-n62SwPZDP"
+          certificateType="client"
+          contextId="test"
+          fieldName="tls.client_certificate.fingerprint.sha1"
+          value="3f4c57934e089f02ae7511200aee2d7e7aabd272"
+        />
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="certificate-fingerprint-link"]')
+        .first()
+        .props().href
+    ).toEqual(
+      'https://sslbl.abuse.ch/ssl-certificates/sha1/3f4c57934e089f02ae7511200aee2d7e7aabd272'
+    );
+  });
+});
diff --git a/x-pack/plugins/siem/public/timelines/components/certificate_fingerprint/index.tsx b/x-pack/plugins/siem/public/timelines/components/certificate_fingerprint/index.tsx
new file mode 100644
index 00000000000000..dc3b6ea61b9c3c
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/certificate_fingerprint/index.tsx
@@ -0,0 +1,68 @@
+/*
+ * 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 { EuiText } from '@elastic/eui';
+import React from 'react';
+import styled from 'styled-components';
+
+import { DraggableBadge } from '../../../common/components/draggables';
+import { ExternalLinkIcon } from '../../../common/components/external_link_icon';
+import { CertificateFingerprintLink } from '../../../common/components/links';
+
+import * as i18n from './translations';
+
+export type CertificateType = 'client' | 'server';
+
+export const TLS_CLIENT_CERTIFICATE_FINGERPRINT_SHA1_FIELD_NAME =
+  'tls.client_certificate.fingerprint.sha1';
+export const TLS_SERVER_CERTIFICATE_FINGERPRINT_SHA1_FIELD_NAME =
+  'tls.server_certificate.fingerprint.sha1';
+
+const FingerprintLabel = styled.span`
+  margin-right: 5px;
+`;
+
+FingerprintLabel.displayName = 'FingerprintLabel';
+
+/**
+ * Represents a field containing a certificate fingerprint (e.g. a sha1), with
+ * a link to an external site, which in-turn compares the fingerprint against a
+ * set of known fingerprints
+ * Examples:
+ * 'tls.client_certificate.fingerprint.sha1'
+ * 'tls.server_certificate.fingerprint.sha1'
+ */
+export const CertificateFingerprint = React.memo<{
+  eventId: string;
+  certificateType: CertificateType;
+  contextId: string;
+  fieldName: string;
+  value?: string | null;
+}>(({ eventId, certificateType, contextId, fieldName, value }) => {
+  return (
+    <DraggableBadge
+      contextId={contextId}
+      data-test-subj={`${certificateType}-certificate-fingerprint`}
+      eventId={eventId}
+      field={fieldName}
+      iconType="snowflake"
+      tooltipContent={
+        <EuiText size="xs">
+          <span>{fieldName}</span>
+        </EuiText>
+      }
+      value={value}
+    >
+      <FingerprintLabel data-test-subj="fingerprint-label">
+        {certificateType === 'client' ? i18n.CLIENT_CERT : i18n.SERVER_CERT}
+      </FingerprintLabel>
+      <CertificateFingerprintLink certificateFingerprint={value || ''} />
+      <ExternalLinkIcon />
+    </DraggableBadge>
+  );
+});
+
+CertificateFingerprint.displayName = 'CertificateFingerprint';
diff --git a/x-pack/plugins/siem/public/components/certificate_fingerprint/translations.ts b/x-pack/plugins/siem/public/timelines/components/certificate_fingerprint/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/certificate_fingerprint/translations.ts
rename to x-pack/plugins/siem/public/timelines/components/certificate_fingerprint/translations.ts
diff --git a/x-pack/plugins/siem/public/timelines/components/duration/index.test.tsx b/x-pack/plugins/siem/public/timelines/components/duration/index.test.tsx
new file mode 100644
index 00000000000000..8063921668c90f
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/duration/index.test.tsx
@@ -0,0 +1,36 @@
+/*
+ * 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 { TestProviders } from '../../../common/mock';
+import { ONE_MILLISECOND_AS_NANOSECONDS } from '../formatted_duration/helpers';
+import { useMountAppended } from '../../../common/utils/use_mount_appended';
+
+import { Duration } from '.';
+
+describe('Duration', () => {
+  const mount = useMountAppended();
+
+  test('it renders the expected formatted duration', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <Duration
+          contextId="test"
+          eventId="abc"
+          fieldName="event.duration"
+          value={`${ONE_MILLISECOND_AS_NANOSECONDS}`}
+        />
+      </TestProviders>
+    );
+    expect(
+      wrapper
+        .find('[data-test-subj="formatted-duration"]')
+        .first()
+        .text()
+    ).toEqual('1ms');
+  });
+});
diff --git a/x-pack/plugins/siem/public/timelines/components/duration/index.tsx b/x-pack/plugins/siem/public/timelines/components/duration/index.tsx
new file mode 100644
index 00000000000000..1106ee63a03cba
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/duration/index.tsx
@@ -0,0 +1,35 @@
+/*
+ * 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 { DefaultDraggable } from '../../../common/components/draggables';
+import { FormattedDuration } from '../formatted_duration';
+
+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 = React.memo<{
+  contextId: string;
+  eventId: string;
+  fieldName: string;
+  value?: string | null;
+}>(({ contextId, eventId, fieldName, value }) => (
+  <DefaultDraggable
+    id={`duration-default-draggable-${contextId}-${eventId}-${fieldName}-${value}`}
+    name={name}
+    field={fieldName}
+    tooltipContent={null}
+    value={value}
+  >
+    <FormattedDuration maybeDurationNanoseconds={value} tooltipTitle={fieldName} />
+  </DefaultDraggable>
+));
+
+Duration.displayName = 'Duration';
diff --git a/x-pack/plugins/siem/public/timelines/components/edit_data_provider/helpers.test.tsx b/x-pack/plugins/siem/public/timelines/components/edit_data_provider/helpers.test.tsx
new file mode 100644
index 00000000000000..87388960dc5d85
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/edit_data_provider/helpers.test.tsx
@@ -0,0 +1,295 @@
+/*
+ * 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 { mockBrowserFields } from '../../../common/containers/source/mock';
+import { EXISTS_OPERATOR, IS_OPERATOR } from '../timeline/data_providers/data_provider';
+
+import {
+  getCategorizedFieldNames,
+  getExcludedFromSelection,
+  getFieldNames,
+  getQueryOperatorFromSelection,
+  selectionsAreValid,
+} from './helpers';
+
+import * as i18n from './translations';
+
+describe('helpers', () => {
+  describe('getFieldNames', () => {
+    test('it should return the expected field names in a category', () => {
+      expect(getFieldNames(mockBrowserFields.auditd)).toEqual([
+        'auditd.data.a0',
+        'auditd.data.a1',
+        'auditd.data.a2',
+      ]);
+    });
+  });
+
+  describe('getCategorizedFieldNames', () => {
+    test('it should return the expected field names grouped by category', () => {
+      expect(getCategorizedFieldNames(mockBrowserFields)).toEqual([
+        {
+          label: 'agent',
+          options: [
+            { label: 'agent.ephemeral_id' },
+            { label: 'agent.hostname' },
+            { label: 'agent.id' },
+            { label: 'agent.name' },
+          ],
+        },
+        {
+          label: 'auditd',
+          options: [
+            { label: 'auditd.data.a0' },
+            { label: 'auditd.data.a1' },
+            { label: 'auditd.data.a2' },
+          ],
+        },
+        { label: 'base', options: [{ label: '@timestamp' }] },
+        {
+          label: 'client',
+          options: [
+            { label: 'client.address' },
+            { label: 'client.bytes' },
+            { label: 'client.domain' },
+            { label: 'client.geo.country_iso_code' },
+          ],
+        },
+        {
+          label: 'cloud',
+          options: [{ label: 'cloud.account.id' }, { label: 'cloud.availability_zone' }],
+        },
+        {
+          label: 'container',
+          options: [
+            { label: 'container.id' },
+            { label: 'container.image.name' },
+            { label: 'container.image.tag' },
+          ],
+        },
+        {
+          label: 'destination',
+          options: [
+            { label: 'destination.address' },
+            { label: 'destination.bytes' },
+            { label: 'destination.domain' },
+            { label: 'destination.ip' },
+            { label: 'destination.port' },
+          ],
+        },
+        { label: 'event', options: [{ label: 'event.end' }] },
+        { label: 'source', options: [{ label: 'source.ip' }, { label: 'source.port' }] },
+      ]);
+    });
+  });
+
+  describe('selectionsAreValid', () => {
+    test('it should return true when the selected field and operator are valid', () => {
+      expect(
+        selectionsAreValid({
+          browserFields: mockBrowserFields,
+          selectedField: [
+            {
+              label: 'destination.bytes',
+            },
+          ],
+          selectedOperator: [
+            {
+              label: 'is',
+            },
+          ],
+        })
+      ).toBe(true);
+    });
+
+    test('it should return false when the selected field is empty', () => {
+      expect(
+        selectionsAreValid({
+          browserFields: mockBrowserFields,
+          selectedField: [
+            {
+              label: '',
+            },
+          ],
+          selectedOperator: [
+            {
+              label: 'is',
+            },
+          ],
+        })
+      ).toBe(false);
+    });
+
+    test('it should return false when the selected field is unknown', () => {
+      expect(
+        selectionsAreValid({
+          browserFields: mockBrowserFields,
+          selectedField: [
+            {
+              label: 'invalid-field',
+            },
+          ],
+          selectedOperator: [
+            {
+              label: 'is',
+            },
+          ],
+        })
+      ).toBe(false);
+    });
+
+    test('it should return false when the selected operator is empty', () => {
+      expect(
+        selectionsAreValid({
+          browserFields: mockBrowserFields,
+          selectedField: [
+            {
+              label: 'destination.bytes',
+            },
+          ],
+          selectedOperator: [
+            {
+              label: '',
+            },
+          ],
+        })
+      ).toBe(false);
+    });
+
+    test('it should return false when the selected operator is unknown', () => {
+      expect(
+        selectionsAreValid({
+          browserFields: mockBrowserFields,
+          selectedField: [
+            {
+              label: 'destination.bytes',
+            },
+          ],
+          selectedOperator: [
+            {
+              label: 'invalid-operator',
+            },
+          ],
+        })
+      ).toBe(false);
+    });
+  });
+
+  describe('getQueryOperatorFromSelection', () => {
+    const validSelections = [
+      {
+        operator: i18n.IS,
+        expected: IS_OPERATOR,
+      },
+      {
+        operator: i18n.IS_NOT,
+        expected: IS_OPERATOR,
+      },
+      {
+        operator: i18n.EXISTS,
+        expected: EXISTS_OPERATOR,
+      },
+      {
+        operator: i18n.DOES_NOT_EXIST,
+        expected: EXISTS_OPERATOR,
+      },
+    ];
+
+    validSelections.forEach(({ operator, expected }) => {
+      test(`it should the expected operator given "${operator}", a valid selection`, () => {
+        expect(
+          getQueryOperatorFromSelection([
+            {
+              label: operator,
+            },
+          ])
+        ).toEqual(expected);
+      });
+    });
+
+    test('it should default to the "is" operator given an empty selection', () => {
+      expect(
+        getQueryOperatorFromSelection([
+          {
+            label: '',
+          },
+        ])
+      ).toEqual(IS_OPERATOR);
+    });
+
+    test('it should default to the "is" operator given an invalid selection', () => {
+      expect(
+        getQueryOperatorFromSelection([
+          {
+            label: 'invalid',
+          },
+        ])
+      ).toEqual(IS_OPERATOR);
+    });
+  });
+
+  describe('getExcludedFromSelection', () => {
+    test('it returns false when the selected operator is empty', () => {
+      expect(
+        getExcludedFromSelection([
+          {
+            label: '',
+          },
+        ])
+      ).toBe(false);
+    });
+
+    test('it returns false when the "is" operator is selected', () => {
+      expect(
+        getExcludedFromSelection([
+          {
+            label: i18n.IS,
+          },
+        ])
+      ).toBe(false);
+    });
+
+    test('it returns false when the "exists" operator is selected', () => {
+      expect(
+        getExcludedFromSelection([
+          {
+            label: i18n.EXISTS,
+          },
+        ])
+      ).toBe(false);
+    });
+
+    test('it returns false when an unknown selection is made', () => {
+      expect(
+        getExcludedFromSelection([
+          {
+            label: 'an unknown selection',
+          },
+        ])
+      ).toBe(false);
+    });
+
+    test('it returns true when "is not" is selected', () => {
+      expect(
+        getExcludedFromSelection([
+          {
+            label: i18n.IS_NOT,
+          },
+        ])
+      ).toBe(true);
+    });
+
+    test('it returns true when "does not exist" is selected', () => {
+      expect(
+        getExcludedFromSelection([
+          {
+            label: i18n.DOES_NOT_EXIST,
+          },
+        ])
+      ).toBe(true);
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/timelines/components/edit_data_provider/helpers.tsx b/x-pack/plugins/siem/public/timelines/components/edit_data_provider/helpers.tsx
new file mode 100644
index 00000000000000..03eb4f9bb515e3
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/edit_data_provider/helpers.tsx
@@ -0,0 +1,101 @@
+/*
+ * 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 { findIndex } from 'lodash/fp';
+import { EuiComboBoxOptionOption } from '@elastic/eui';
+
+import { BrowserField, BrowserFields, getAllFieldsByName } from '../../../common/containers/source';
+import {
+  QueryOperator,
+  EXISTS_OPERATOR,
+  IS_OPERATOR,
+} from '../timeline/data_providers/data_provider';
+
+import * as i18n from './translations';
+
+/** The list of operators to display in the `Operator` select  */
+export const operatorLabels: EuiComboBoxOptionOption[] = [
+  {
+    label: i18n.IS,
+  },
+  {
+    label: i18n.IS_NOT,
+  },
+  {
+    label: i18n.EXISTS,
+  },
+  {
+    label: i18n.DOES_NOT_EXIST,
+  },
+];
+
+/** Returns the names of fields in a category */
+export const getFieldNames = (category: Partial<BrowserField>): string[] =>
+  category.fields != null && Object.keys(category.fields).length > 0
+    ? Object.keys(category.fields)
+    : [];
+
+/** Returns all field names by category, for display in an `EuiComboBox`  */
+export const getCategorizedFieldNames = (browserFields: BrowserFields): EuiComboBoxOptionOption[] =>
+  Object.keys(browserFields)
+    .sort()
+    .map(categoryId => ({
+      label: categoryId,
+      options: getFieldNames(browserFields[categoryId]).map(fieldId => ({
+        label: fieldId,
+      })),
+    }));
+
+/** Returns true if the specified field name is valid */
+export const selectionsAreValid = ({
+  browserFields,
+  selectedField,
+  selectedOperator,
+}: {
+  browserFields: BrowserFields;
+  selectedField: EuiComboBoxOptionOption[];
+  selectedOperator: EuiComboBoxOptionOption[];
+}): boolean => {
+  const fieldId = selectedField.length > 0 ? selectedField[0].label : '';
+  const operator = selectedOperator.length > 0 ? selectedOperator[0].label : '';
+
+  const fieldIsValid = getAllFieldsByName(browserFields)[fieldId] != null;
+  const operatorIsValid = findIndex(o => o.label === operator, operatorLabels) !== -1;
+
+  return fieldIsValid && operatorIsValid;
+};
+
+/** Returns a `QueryOperator` based on the user's Operator selection */
+export const getQueryOperatorFromSelection = (
+  selectedOperator: EuiComboBoxOptionOption[]
+): QueryOperator => {
+  const selection = selectedOperator.length > 0 ? selectedOperator[0].label : '';
+
+  switch (selection) {
+    case i18n.IS: // fall through
+    case i18n.IS_NOT:
+      return IS_OPERATOR;
+    case i18n.EXISTS: // fall through
+    case i18n.DOES_NOT_EXIST:
+      return EXISTS_OPERATOR;
+    default:
+      return IS_OPERATOR;
+  }
+};
+
+/**
+ * Returns `true` when the search excludes results that match the specified data provider
+ */
+export const getExcludedFromSelection = (selectedOperator: EuiComboBoxOptionOption[]): boolean => {
+  const selection = selectedOperator.length > 0 ? selectedOperator[0].label : '';
+
+  switch (selection) {
+    case i18n.IS_NOT: // fall through
+    case i18n.DOES_NOT_EXIST:
+      return true;
+    default:
+      return false;
+  }
+};
diff --git a/x-pack/plugins/siem/public/timelines/components/edit_data_provider/index.test.tsx b/x-pack/plugins/siem/public/timelines/components/edit_data_provider/index.test.tsx
new file mode 100644
index 00000000000000..035d1bb59796e7
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/edit_data_provider/index.test.tsx
@@ -0,0 +1,428 @@
+/*
+ * 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 { mount } from 'enzyme';
+import React from 'react';
+
+import { mockBrowserFields } from '../../../common/containers/source/mock';
+import { TestProviders } from '../../../common/mock';
+import { IS_OPERATOR, EXISTS_OPERATOR } from '../timeline/data_providers/data_provider';
+
+import { StatefulEditDataProvider } from '.';
+
+interface HasIsDisabled {
+  isDisabled: boolean;
+}
+
+describe('StatefulEditDataProvider', () => {
+  const field = 'client.address';
+  const timelineId = 'test';
+  const value = 'test-host';
+
+  test('it renders the current field', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <StatefulEditDataProvider
+          andProviderId={undefined}
+          browserFields={mockBrowserFields}
+          field={field}
+          isExcluded={false}
+          onDataProviderEdited={jest.fn()}
+          operator={IS_OPERATOR}
+          providerId={`hosts-table-hostName-${value}`}
+          timelineId={timelineId}
+          value={value}
+        />
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="field"]')
+        .first()
+        .text()
+    ).toEqual(field);
+  });
+
+  test('it renders the expected placeholder for the current field when field is empty', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <StatefulEditDataProvider
+          andProviderId={undefined}
+          browserFields={mockBrowserFields}
+          field=""
+          isExcluded={false}
+          onDataProviderEdited={jest.fn()}
+          operator={IS_OPERATOR}
+          providerId={`hosts-table-hostName-${value}`}
+          timelineId={timelineId}
+          value={value}
+        />
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="field"]')
+        .first()
+        .props().placeholder
+    ).toEqual('Select a field');
+  });
+
+  test('it renders the "is" operator in a humanized format', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <StatefulEditDataProvider
+          andProviderId={undefined}
+          browserFields={mockBrowserFields}
+          field={field}
+          isExcluded={false}
+          onDataProviderEdited={jest.fn()}
+          operator={IS_OPERATOR}
+          providerId={`hosts-table-hostName-${value}`}
+          timelineId={timelineId}
+          value={value}
+        />
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="operator"]')
+        .first()
+        .text()
+    ).toEqual('is');
+  });
+
+  test('it renders the negated "is" operator in a humanized format when isExcluded is true', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <StatefulEditDataProvider
+          andProviderId={undefined}
+          browserFields={mockBrowserFields}
+          field={field}
+          isExcluded={true}
+          onDataProviderEdited={jest.fn()}
+          operator={IS_OPERATOR}
+          providerId={`hosts-table-hostName-${value}`}
+          timelineId={timelineId}
+          value={value}
+        />
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="operator"]')
+        .first()
+        .text()
+    ).toEqual('is not');
+  });
+
+  test('it renders the "exists" operator in human-readable format', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <StatefulEditDataProvider
+          andProviderId={undefined}
+          browserFields={mockBrowserFields}
+          field={field}
+          isExcluded={false}
+          onDataProviderEdited={jest.fn()}
+          operator={EXISTS_OPERATOR}
+          providerId={`hosts-table-hostName-${value}`}
+          timelineId={timelineId}
+          value={value}
+        />
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="operator"]')
+        .first()
+        .text()
+    ).toEqual('exists');
+  });
+
+  test('it renders the negated "exists" operator in a humanized format when isExcluded is true', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <StatefulEditDataProvider
+          andProviderId={undefined}
+          browserFields={mockBrowserFields}
+          field={field}
+          isExcluded={true}
+          onDataProviderEdited={jest.fn()}
+          operator={EXISTS_OPERATOR}
+          providerId={`hosts-table-hostName-${value}`}
+          timelineId={timelineId}
+          value={value}
+        />
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="operator"]')
+        .first()
+        .text()
+    ).toEqual('does not exist');
+  });
+
+  test('it renders the current value when the operator is "is"', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <StatefulEditDataProvider
+          andProviderId={undefined}
+          browserFields={mockBrowserFields}
+          field={field}
+          isExcluded={false}
+          onDataProviderEdited={jest.fn()}
+          operator={IS_OPERATOR}
+          providerId={`hosts-table-hostName-${value}`}
+          timelineId={timelineId}
+          value={value}
+        />
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="value"]')
+        .first()
+        .props().value
+    ).toEqual(value);
+  });
+
+  test('it renders the current value when the type of value is an array', () => {
+    const reallyAnArray = ([value] as unknown) as string;
+
+    const wrapper = mount(
+      <TestProviders>
+        <StatefulEditDataProvider
+          andProviderId={undefined}
+          browserFields={mockBrowserFields}
+          field={field}
+          isExcluded={false}
+          onDataProviderEdited={jest.fn()}
+          operator={IS_OPERATOR}
+          providerId={`hosts-table-hostName-${value}`}
+          timelineId={timelineId}
+          value={reallyAnArray}
+        />
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="value"]')
+        .first()
+        .props().value
+    ).toEqual(value);
+  });
+
+  test('it does NOT render the current value when the operator is "is not" (isExcluded is true)', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <StatefulEditDataProvider
+          andProviderId={undefined}
+          browserFields={mockBrowserFields}
+          field={field}
+          isExcluded={true}
+          onDataProviderEdited={jest.fn()}
+          operator={IS_OPERATOR}
+          providerId={`hosts-table-hostName-${value}`}
+          timelineId={timelineId}
+          value={value}
+        />
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="value"]')
+        .first()
+        .props().value
+    ).toEqual(value);
+  });
+
+  test('it renders the expected placeholder when value is empty', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <StatefulEditDataProvider
+          andProviderId={undefined}
+          browserFields={mockBrowserFields}
+          field={field}
+          isExcluded={false}
+          onDataProviderEdited={jest.fn()}
+          operator={IS_OPERATOR}
+          providerId={`hosts-table-hostName-${value}`}
+          timelineId={timelineId}
+          value=""
+        />
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="value"]')
+        .first()
+        .props().placeholder
+    ).toEqual('value');
+  });
+
+  test('it does NOT render value when the operator is "exists"', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <StatefulEditDataProvider
+          andProviderId={undefined}
+          browserFields={mockBrowserFields}
+          field={field}
+          isExcluded={false}
+          onDataProviderEdited={jest.fn()}
+          operator={EXISTS_OPERATOR}
+          providerId={`hosts-table-hostName-${value}`}
+          timelineId={timelineId}
+          value={value}
+        />
+      </TestProviders>
+    );
+
+    expect(wrapper.find('[data-test-subj="value"]').exists()).toBe(false);
+  });
+
+  test('it does NOT render value when the operator is "not exists" (isExcluded is true)', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <StatefulEditDataProvider
+          andProviderId={undefined}
+          browserFields={mockBrowserFields}
+          field={field}
+          isExcluded={true}
+          onDataProviderEdited={jest.fn()}
+          operator={EXISTS_OPERATOR}
+          providerId={`hosts-table-hostName-${value}`}
+          timelineId={timelineId}
+          value={value}
+        />
+      </TestProviders>
+    );
+
+    expect(wrapper.find('[data-test-subj="value"]').exists()).toBe(false);
+  });
+
+  test('it does NOT disable the save button when field is valid', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <StatefulEditDataProvider
+          andProviderId={undefined}
+          browserFields={mockBrowserFields}
+          field={field}
+          isExcluded={false}
+          onDataProviderEdited={jest.fn()}
+          operator={IS_OPERATOR}
+          providerId={`hosts-table-hostName-${value}`}
+          timelineId={timelineId}
+          value={value}
+        />
+      </TestProviders>
+    );
+
+    const props = wrapper
+      .find('[data-test-subj="save"]')
+      .first()
+      .props() as HasIsDisabled;
+
+    expect(props.isDisabled).toBe(false);
+  });
+
+  test('it disables the save button when field is invalid because it is empty', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <StatefulEditDataProvider
+          andProviderId={undefined}
+          browserFields={mockBrowserFields}
+          field=""
+          isExcluded={false}
+          onDataProviderEdited={jest.fn()}
+          operator={IS_OPERATOR}
+          providerId={`hosts-table-hostName-${value}`}
+          timelineId={timelineId}
+          value={value}
+        />
+      </TestProviders>
+    );
+
+    const props = wrapper
+      .find('[data-test-subj="save"]')
+      .first()
+      .props() as HasIsDisabled;
+
+    expect(props.isDisabled).toBe(true);
+  });
+
+  test('it disables the save button when field is invalid because it is not contained in the browser fields', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <StatefulEditDataProvider
+          andProviderId={undefined}
+          browserFields={mockBrowserFields}
+          field="not-in-browser-fields"
+          isExcluded={false}
+          onDataProviderEdited={jest.fn()}
+          operator={IS_OPERATOR}
+          providerId={`hosts-table-hostName-${value}`}
+          timelineId={timelineId}
+          value={value}
+        />
+      </TestProviders>
+    );
+
+    const props = wrapper
+      .find('[data-test-subj="save"]')
+      .first()
+      .props() as HasIsDisabled;
+
+    expect(props.isDisabled).toBe(true);
+  });
+
+  test('it invokes onDataProviderEdited with the expected values when the user clicks the save button', () => {
+    const onDataProviderEdited = jest.fn();
+
+    const wrapper = mount(
+      <TestProviders>
+        <StatefulEditDataProvider
+          andProviderId={undefined}
+          browserFields={mockBrowserFields}
+          field={field}
+          isExcluded={false}
+          onDataProviderEdited={onDataProviderEdited}
+          operator={IS_OPERATOR}
+          providerId={`hosts-table-hostName-${value}`}
+          timelineId={timelineId}
+          value={value}
+        />
+      </TestProviders>
+    );
+
+    wrapper
+      .find('[data-test-subj="save"]')
+      .first()
+      .simulate('click');
+
+    wrapper.update();
+
+    expect(onDataProviderEdited).toBeCalledWith({
+      andProviderId: undefined,
+      excluded: false,
+      field: 'client.address',
+      id: 'test',
+      operator: ':',
+      providerId: 'hosts-table-hostName-test-host',
+      value: 'test-host',
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/timelines/components/edit_data_provider/index.tsx b/x-pack/plugins/siem/public/timelines/components/edit_data_provider/index.tsx
new file mode 100644
index 00000000000000..95f3ec3b316493
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/edit_data_provider/index.tsx
@@ -0,0 +1,253 @@
+/*
+ * 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 { noop } from 'lodash/fp';
+import {
+  EuiButton,
+  EuiComboBox,
+  EuiComboBoxOptionOption,
+  EuiFieldText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiPanel,
+  EuiSpacer,
+  EuiToolTip,
+} from '@elastic/eui';
+import React, { useEffect, useState, useCallback } from 'react';
+import styled from 'styled-components';
+
+import { BrowserFields } from '../../../common/containers/source';
+import { OnDataProviderEdited } from '../timeline/events';
+import { QueryOperator } from '../timeline/data_providers/data_provider';
+
+import {
+  getCategorizedFieldNames,
+  getExcludedFromSelection,
+  getQueryOperatorFromSelection,
+  operatorLabels,
+  selectionsAreValid,
+} from './helpers';
+
+import * as i18n from './translations';
+
+const EDIT_DATA_PROVIDER_WIDTH = 400;
+const FIELD_COMBO_BOX_WIDTH = 195;
+const OPERATOR_COMBO_BOX_WIDTH = 160;
+const SAVE_CLASS_NAME = 'edit-data-provider-save';
+const VALUE_INPUT_CLASS_NAME = 'edit-data-provider-value';
+
+export const HeaderContainer = styled.div`
+  width: ${EDIT_DATA_PROVIDER_WIDTH};
+`;
+
+HeaderContainer.displayName = 'HeaderContainer';
+
+interface Props {
+  andProviderId?: string;
+  browserFields: BrowserFields;
+  field: string;
+  isExcluded: boolean;
+  onDataProviderEdited: OnDataProviderEdited;
+  operator: QueryOperator;
+  providerId: string;
+  timelineId: string;
+  value: string | number;
+}
+
+const sanatizeValue = (value: string | number): string =>
+  Array.isArray(value) ? `${value[0]}` : `${value}`; // fun fact: value should never be an array
+
+export const getInitialOperatorLabel = (
+  isExcluded: boolean,
+  operator: QueryOperator
+): EuiComboBoxOptionOption[] => {
+  if (operator === ':') {
+    return isExcluded ? [{ label: i18n.IS_NOT }] : [{ label: i18n.IS }];
+  } else {
+    return isExcluded ? [{ label: i18n.DOES_NOT_EXIST }] : [{ label: i18n.EXISTS }];
+  }
+};
+
+export const StatefulEditDataProvider = React.memo<Props>(
+  ({
+    andProviderId,
+    browserFields,
+    field,
+    isExcluded,
+    onDataProviderEdited,
+    operator,
+    providerId,
+    timelineId,
+    value,
+  }) => {
+    const [updatedField, setUpdatedField] = useState<EuiComboBoxOptionOption[]>([{ label: field }]);
+    const [updatedOperator, setUpdatedOperator] = useState<EuiComboBoxOptionOption[]>(
+      getInitialOperatorLabel(isExcluded, operator)
+    );
+    const [updatedValue, setUpdatedValue] = useState<string | number>(value);
+
+    /** Focuses the Value input if it is visible, falling back to the Save button if it's not */
+    const focusInput = () => {
+      const elements = document.getElementsByClassName(VALUE_INPUT_CLASS_NAME);
+
+      if (elements.length > 0) {
+        (elements[0] as HTMLElement).focus(); // this cast is required because focus() does not exist on every `Element` returned by `getElementsByClassName`
+      } else {
+        const saveElements = document.getElementsByClassName(SAVE_CLASS_NAME);
+
+        if (saveElements.length > 0) {
+          (saveElements[0] as HTMLElement).focus();
+        }
+      }
+    };
+
+    const onFieldSelected = useCallback((selectedField: EuiComboBoxOptionOption[]) => {
+      setUpdatedField(selectedField);
+
+      focusInput();
+    }, []);
+
+    const onOperatorSelected = useCallback((operatorSelected: EuiComboBoxOptionOption[]) => {
+      setUpdatedOperator(operatorSelected);
+
+      focusInput();
+    }, []);
+
+    const onValueChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+      setUpdatedValue(e.target.value);
+    }, []);
+
+    const disableScrolling = () => {
+      const x =
+        window.pageXOffset !== undefined
+          ? window.pageXOffset
+          : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
+
+      const y =
+        window.pageYOffset !== undefined
+          ? window.pageYOffset
+          : (document.documentElement || document.body.parentNode || document.body).scrollTop;
+
+      window.onscroll = () => window.scrollTo(x, y);
+    };
+
+    const enableScrolling = () => {
+      window.onscroll = () => noop;
+    };
+
+    useEffect(() => {
+      disableScrolling();
+      focusInput();
+      return () => {
+        enableScrolling();
+      };
+    }, []);
+
+    return (
+      <EuiPanel paddingSize="s">
+        <EuiFlexGroup direction="column" gutterSize="none">
+          <EuiFlexItem grow={false}>
+            <EuiFlexGroup direction="row" gutterSize="none" justifyContent="spaceBetween">
+              <EuiFlexItem grow={false}>
+                <EuiFormRow label={i18n.FIELD}>
+                  <EuiToolTip content={updatedField.length > 0 ? updatedField[0].label : null}>
+                    <EuiComboBox
+                      data-test-subj="field"
+                      isClearable={false}
+                      onChange={onFieldSelected}
+                      options={getCategorizedFieldNames(browserFields)}
+                      placeholder={i18n.FIELD_PLACEHOLDER}
+                      selectedOptions={updatedField}
+                      singleSelection={{ asPlainText: true }}
+                      style={{ width: `${FIELD_COMBO_BOX_WIDTH}px` }}
+                    />
+                  </EuiToolTip>
+                </EuiFormRow>
+              </EuiFlexItem>
+
+              <EuiFlexItem grow={false}>
+                <EuiFormRow label={i18n.OPERATOR}>
+                  <EuiComboBox
+                    data-test-subj="operator"
+                    isClearable={false}
+                    onChange={onOperatorSelected}
+                    options={operatorLabels}
+                    placeholder={i18n.SELECT_AN_OPERATOR}
+                    selectedOptions={updatedOperator}
+                    singleSelection={{ asPlainText: true }}
+                    style={{ width: `${OPERATOR_COMBO_BOX_WIDTH}px` }}
+                  />
+                </EuiFormRow>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+
+          <EuiFlexItem grow={false}>
+            <EuiSpacer />
+          </EuiFlexItem>
+
+          {updatedOperator.length > 0 &&
+          updatedOperator[0].label !== i18n.EXISTS &&
+          updatedOperator[0].label !== i18n.DOES_NOT_EXIST ? (
+            <EuiFlexItem grow={false}>
+              <EuiFormRow label={i18n.VALUE_LABEL}>
+                <EuiFieldText
+                  className={VALUE_INPUT_CLASS_NAME}
+                  data-test-subj="value"
+                  onChange={onValueChange}
+                  placeholder={i18n.VALUE}
+                  value={sanatizeValue(updatedValue)}
+                />
+              </EuiFormRow>
+            </EuiFlexItem>
+          ) : null}
+
+          <EuiFlexItem grow={false}>
+            <EuiSpacer />
+          </EuiFlexItem>
+
+          <EuiFlexItem grow={false}>
+            <EuiFlexGroup justifyContent="flexEnd" gutterSize="none">
+              <EuiFlexItem grow={false}>
+                <EuiButton
+                  autoFocus
+                  className={SAVE_CLASS_NAME}
+                  color="primary"
+                  data-test-subj="save"
+                  fill={true}
+                  isDisabled={
+                    !selectionsAreValid({
+                      browserFields,
+                      selectedField: updatedField,
+                      selectedOperator: updatedOperator,
+                    })
+                  }
+                  onClick={() => {
+                    onDataProviderEdited({
+                      andProviderId,
+                      excluded: getExcludedFromSelection(updatedOperator),
+                      field: updatedField.length > 0 ? updatedField[0].label : '',
+                      id: timelineId,
+                      operator: getQueryOperatorFromSelection(updatedOperator),
+                      providerId,
+                      value: updatedValue,
+                    });
+                  }}
+                  size="s"
+                >
+                  {i18n.SAVE}
+                </EuiButton>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPanel>
+    );
+  }
+);
+
+StatefulEditDataProvider.displayName = 'StatefulEditDataProvider';
diff --git a/x-pack/plugins/siem/public/components/edit_data_provider/translations.ts b/x-pack/plugins/siem/public/timelines/components/edit_data_provider/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/edit_data_provider/translations.ts
rename to x-pack/plugins/siem/public/timelines/components/edit_data_provider/translations.ts
diff --git a/x-pack/plugins/siem/public/components/field_renderers/__snapshots__/field_renderers.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/field_renderers/__snapshots__/field_renderers.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/field_renderers/__snapshots__/field_renderers.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/field_renderers/__snapshots__/field_renderers.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/field_renderers/field_renderers.test.tsx b/x-pack/plugins/siem/public/timelines/components/field_renderers/field_renderers.test.tsx
similarity index 97%
rename from x-pack/plugins/siem/public/components/field_renderers/field_renderers.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/field_renderers/field_renderers.test.tsx
index 88d03d8db67611..b853a978c15e2d 100644
--- a/x-pack/plugins/siem/public/components/field_renderers/field_renderers.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/field_renderers/field_renderers.test.tsx
@@ -7,9 +7,9 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 
-import { FlowTarget, GetIpOverviewQuery, HostEcsFields } from '../../graphql/types';
-import { TestProviders } from '../../mock';
-import { getEmptyValue } from '../empty_value';
+import { FlowTarget, GetIpOverviewQuery, HostEcsFields } from '../../../graphql/types';
+import { TestProviders } from '../../../common/mock';
+import { getEmptyValue } from '../../../common/components/empty_value';
 
 import {
   autonomousSystemRenderer,
@@ -22,8 +22,8 @@ import {
   DEFAULT_MORE_MAX_HEIGHT,
   MoreContainer,
 } from './field_renderers';
-import { mockData } from '../page/network/ip_overview/mock';
-import { useMountAppended } from '../../utils/use_mount_appended';
+import { mockData } from '../../../network/components/ip_overview/mock';
+import { useMountAppended } from '../../../common/utils/use_mount_appended';
 
 type AutonomousSystem = GetIpOverviewQuery.AutonomousSystem;
 
diff --git a/x-pack/plugins/siem/public/components/field_renderers/field_renderers.tsx b/x-pack/plugins/siem/public/timelines/components/field_renderers/field_renderers.tsx
similarity index 92%
rename from x-pack/plugins/siem/public/components/field_renderers/field_renderers.tsx
rename to x-pack/plugins/siem/public/timelines/components/field_renderers/field_renderers.tsx
index 222eef515958c4..1d53299c0975e9 100644
--- a/x-pack/plugins/siem/public/components/field_renderers/field_renderers.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/field_renderers/field_renderers.tsx
@@ -10,14 +10,24 @@ import { getOr } from 'lodash/fp';
 import React, { Fragment, useState } from 'react';
 import styled from 'styled-components';
 
-import { AutonomousSystem, FlowTarget, HostEcsFields, IpOverviewData } from '../../graphql/types';
-import { escapeDataProviderId } from '../drag_and_drop/helpers';
-import { DefaultDraggable } from '../draggables';
-import { getEmptyTagValue } from '../empty_value';
-import { FormattedRelativePreferenceDate } from '../formatted_date';
-import { HostDetailsLink, ReputationLink, WhoIsLink, ReputationLinkSetting } from '../links';
-import { Spacer } from '../page';
-import * as i18n from '../page/network/ip_overview/translations';
+import {
+  AutonomousSystem,
+  FlowTarget,
+  HostEcsFields,
+  IpOverviewData,
+} from '../../../graphql/types';
+import { escapeDataProviderId } from '../../../common/components/drag_and_drop/helpers';
+import { DefaultDraggable } from '../../../common/components/draggables';
+import { getEmptyTagValue } from '../../../common/components/empty_value';
+import { FormattedRelativePreferenceDate } from '../../../common/components/formatted_date';
+import {
+  HostDetailsLink,
+  ReputationLink,
+  WhoIsLink,
+  ReputationLinkSetting,
+} from '../../../common/components/links';
+import { Spacer } from '../../../common/components/page';
+import * as i18n from '../../../network/components/ip_overview/translations';
 
 const DraggableContainerFlexGroup = styled(EuiFlexGroup)`
   flex-grow: unset;
diff --git a/x-pack/plugins/siem/public/components/fields_browser/categories_pane.test.tsx b/x-pack/plugins/siem/public/timelines/components/fields_browser/categories_pane.test.tsx
similarity index 96%
rename from x-pack/plugins/siem/public/components/fields_browser/categories_pane.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/fields_browser/categories_pane.test.tsx
index 361a0789135e41..9a1f9a9d073577 100644
--- a/x-pack/plugins/siem/public/components/fields_browser/categories_pane.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/fields_browser/categories_pane.test.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 import { ThemeProvider } from 'styled-components';
 import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
 
-import { mockBrowserFields } from '../../containers/source/mock';
+import { mockBrowserFields } from '../../../common/containers/source/mock';
 
 import { CATEGORY_PANE_WIDTH } from './helpers';
 import { CategoriesPane } from './categories_pane';
diff --git a/x-pack/plugins/siem/public/components/fields_browser/categories_pane.tsx b/x-pack/plugins/siem/public/timelines/components/fields_browser/categories_pane.tsx
similarity index 97%
rename from x-pack/plugins/siem/public/components/fields_browser/categories_pane.tsx
rename to x-pack/plugins/siem/public/timelines/components/fields_browser/categories_pane.tsx
index d6972625821cf3..93407e43739105 100644
--- a/x-pack/plugins/siem/public/components/fields_browser/categories_pane.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/fields_browser/categories_pane.tsx
@@ -8,7 +8,7 @@ import { EuiInMemoryTable, EuiTitle } from '@elastic/eui';
 import React from 'react';
 import styled from 'styled-components';
 
-import { BrowserFields } from '../../containers/source';
+import { BrowserFields } from '../../../common/containers/source';
 
 import { FieldBrowserProps } from './types';
 import { getCategoryColumns } from './category_columns';
diff --git a/x-pack/plugins/siem/public/components/fields_browser/category.test.tsx b/x-pack/plugins/siem/public/timelines/components/fields_browser/category.test.tsx
similarity index 94%
rename from x-pack/plugins/siem/public/components/fields_browser/category.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/fields_browser/category.test.tsx
index 38eaf43977fa21..177ce5648e79b1 100644
--- a/x-pack/plugins/siem/public/components/fields_browser/category.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/fields_browser/category.test.tsx
@@ -6,13 +6,13 @@
 
 import React from 'react';
 
-import { mockBrowserFields } from '../../containers/source/mock';
+import { mockBrowserFields } from '../../../common/containers/source/mock';
 
 import { Category } from './category';
 import { getFieldItems } from './field_items';
 import { FIELDS_PANE_WIDTH } from './helpers';
-import { TestProviders } from '../../mock';
-import { useMountAppended } from '../../utils/use_mount_appended';
+import { TestProviders } from '../../../common/mock';
+import { useMountAppended } from '../../../common/utils/use_mount_appended';
 
 import * as i18n from './translations';
 
diff --git a/x-pack/plugins/siem/public/components/fields_browser/category.tsx b/x-pack/plugins/siem/public/timelines/components/fields_browser/category.tsx
similarity index 96%
rename from x-pack/plugins/siem/public/components/fields_browser/category.tsx
rename to x-pack/plugins/siem/public/timelines/components/fields_browser/category.tsx
index 9d2a7da9b2d00f..fc916930394494 100644
--- a/x-pack/plugins/siem/public/components/fields_browser/category.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/fields_browser/category.tsx
@@ -8,7 +8,7 @@ import { EuiInMemoryTable } from '@elastic/eui';
 import React from 'react';
 import styled from 'styled-components';
 
-import { BrowserFields } from '../../containers/source';
+import { BrowserFields } from '../../../common/containers/source';
 
 import { CategoryTitle } from './category_title';
 import { FieldItem, getFieldColumns } from './field_items';
diff --git a/x-pack/plugins/siem/public/components/fields_browser/category_columns.test.tsx b/x-pack/plugins/siem/public/timelines/components/fields_browser/category_columns.test.tsx
similarity index 98%
rename from x-pack/plugins/siem/public/components/fields_browser/category_columns.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/fields_browser/category_columns.test.tsx
index e116209ba5d6a1..ec2156bb609fd6 100644
--- a/x-pack/plugins/siem/public/components/fields_browser/category_columns.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/fields_browser/category_columns.test.tsx
@@ -7,7 +7,7 @@
 import { mount } from 'enzyme';
 import React from 'react';
 
-import { mockBrowserFields } from '../../containers/source/mock';
+import { mockBrowserFields } from '../../../common/containers/source/mock';
 
 import { CATEGORY_PANE_WIDTH, getFieldCount } from './helpers';
 import { CategoriesPane } from './categories_pane';
diff --git a/x-pack/plugins/siem/public/components/fields_browser/category_columns.tsx b/x-pack/plugins/siem/public/timelines/components/fields_browser/category_columns.tsx
similarity index 92%
rename from x-pack/plugins/siem/public/components/fields_browser/category_columns.tsx
rename to x-pack/plugins/siem/public/timelines/components/fields_browser/category_columns.tsx
index 7133e9b848c5ca..2e952dc24dbd82 100644
--- a/x-pack/plugins/siem/public/components/fields_browser/category_columns.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/fields_browser/category_columns.tsx
@@ -10,12 +10,12 @@ import { EuiIcon, EuiFlexGroup, EuiFlexItem, EuiLink, EuiText, EuiToolTip } from
 import React, { useContext } from 'react';
 import styled from 'styled-components';
 
-import { BrowserFields } from '../../containers/source';
-import { getColumnsWithTimestamp } from '../event_details/helpers';
-import { CountBadge } from '../page';
+import { BrowserFields } from '../../../common/containers/source';
+import { getColumnsWithTimestamp } from '../../../common/components/event_details/helpers';
+import { CountBadge } from '../../../common/components/page';
 import { OnUpdateColumns } from '../timeline/events';
 import { TimelineContext } from '../timeline/timeline_context';
-import { WithHoverActions } from '../with_hover_actions';
+import { WithHoverActions } from '../../../common/components/with_hover_actions';
 import { LoadingSpinner, getCategoryPaneCategoryClassName, getFieldCount } from './helpers';
 import * as i18n from './translations';
 
diff --git a/x-pack/plugins/siem/public/components/fields_browser/category_title.test.tsx b/x-pack/plugins/siem/public/timelines/components/fields_browser/category_title.test.tsx
similarity index 96%
rename from x-pack/plugins/siem/public/components/fields_browser/category_title.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/fields_browser/category_title.test.tsx
index 792e0342a6d592..8ad9cea9b29414 100644
--- a/x-pack/plugins/siem/public/components/fields_browser/category_title.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/fields_browser/category_title.test.tsx
@@ -7,7 +7,7 @@
 import { mount } from 'enzyme';
 import React from 'react';
 
-import { mockBrowserFields } from '../../containers/source/mock';
+import { mockBrowserFields } from '../../../common/containers/source/mock';
 
 import { CategoryTitle } from './category_title';
 import { getFieldCount } from './helpers';
diff --git a/x-pack/plugins/siem/public/components/fields_browser/category_title.tsx b/x-pack/plugins/siem/public/timelines/components/fields_browser/category_title.tsx
similarity index 93%
rename from x-pack/plugins/siem/public/components/fields_browser/category_title.tsx
rename to x-pack/plugins/siem/public/timelines/components/fields_browser/category_title.tsx
index cd14cef328a7e6..c8d59f5c0dfa41 100644
--- a/x-pack/plugins/siem/public/components/fields_browser/category_title.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/fields_browser/category_title.tsx
@@ -8,9 +8,9 @@ import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
 import React from 'react';
 import styled from 'styled-components';
 
-import { BrowserFields } from '../../containers/source';
+import { BrowserFields } from '../../../common/containers/source';
 import { getFieldBrowserCategoryTitleClassName, getFieldCount } from './helpers';
-import { CountBadge } from '../page';
+import { CountBadge } from '../../../common/components/page';
 
 const CountBadgeContainer = styled.div`
   position: relative;
diff --git a/x-pack/plugins/siem/public/components/fields_browser/field_browser.test.tsx b/x-pack/plugins/siem/public/timelines/components/fields_browser/field_browser.test.tsx
similarity index 98%
rename from x-pack/plugins/siem/public/components/fields_browser/field_browser.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/fields_browser/field_browser.test.tsx
index 9214fd5f2540ce..d4a6d85c7ccddf 100644
--- a/x-pack/plugins/siem/public/components/fields_browser/field_browser.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/fields_browser/field_browser.test.tsx
@@ -7,8 +7,8 @@
 import { mount } from 'enzyme';
 import React from 'react';
 
-import { mockBrowserFields } from '../../containers/source/mock';
-import { TestProviders } from '../../mock';
+import { mockBrowserFields } from '../../../common/containers/source/mock';
+import { TestProviders } from '../../../common/mock';
 
 import { FieldsBrowser } from './field_browser';
 import { FIELD_BROWSER_HEIGHT, FIELD_BROWSER_WIDTH } from './helpers';
diff --git a/x-pack/plugins/siem/public/components/fields_browser/field_browser.tsx b/x-pack/plugins/siem/public/timelines/components/fields_browser/field_browser.tsx
similarity index 98%
rename from x-pack/plugins/siem/public/components/fields_browser/field_browser.tsx
rename to x-pack/plugins/siem/public/timelines/components/fields_browser/field_browser.tsx
index 02aeab74f8babf..c255bd062bb4cb 100644
--- a/x-pack/plugins/siem/public/components/fields_browser/field_browser.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/fields_browser/field_browser.tsx
@@ -9,8 +9,8 @@ import React, { useEffect, useCallback } from 'react';
 import { noop } from 'lodash/fp';
 import styled from 'styled-components';
 
-import { BrowserFields } from '../../containers/source';
-import { ColumnHeaderOptions } from '../../store/timeline/model';
+import { BrowserFields } from '../../../common/containers/source';
+import { ColumnHeaderOptions } from '../../../timelines/store/timeline/model';
 import { CategoriesPane } from './categories_pane';
 import { FieldsPane } from './fields_pane';
 import { Header } from './header';
diff --git a/x-pack/plugins/siem/public/components/fields_browser/field_items.test.tsx b/x-pack/plugins/siem/public/timelines/components/fields_browser/field_items.test.tsx
similarity index 97%
rename from x-pack/plugins/siem/public/components/fields_browser/field_items.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/fields_browser/field_items.test.tsx
index 226b56dad8c4f2..3b9e5368ff196a 100644
--- a/x-pack/plugins/siem/public/components/fields_browser/field_items.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/fields_browser/field_items.test.tsx
@@ -7,16 +7,16 @@
 import { omit } from 'lodash/fp';
 import React from 'react';
 
-import { mockBrowserFields } from '../../containers/source/mock';
-import { TestProviders } from '../../mock';
-import { ColumnHeaderOptions } from '../../store/timeline/model';
+import { mockBrowserFields } from '../../../common/containers/source/mock';
+import { TestProviders } from '../../../common/mock';
+import { ColumnHeaderOptions } from '../../../timelines/store/timeline/model';
 import { defaultColumnHeaderType } from '../timeline/body/column_headers/default_headers';
 import { DEFAULT_DATE_COLUMN_MIN_WIDTH } from '../timeline/body/constants';
 
 import { Category } from './category';
 import { getFieldColumns, getFieldItems } from './field_items';
 import { FIELDS_PANE_WIDTH } from './helpers';
-import { useMountAppended } from '../../utils/use_mount_appended';
+import { useMountAppended } from '../../../common/utils/use_mount_appended';
 
 const selectedCategoryId = 'base';
 const selectedCategoryFields = mockBrowserFields[selectedCategoryId].fields;
diff --git a/x-pack/plugins/siem/public/components/fields_browser/field_items.tsx b/x-pack/plugins/siem/public/timelines/components/fields_browser/field_items.tsx
similarity index 85%
rename from x-pack/plugins/siem/public/components/fields_browser/field_items.tsx
rename to x-pack/plugins/siem/public/timelines/components/fields_browser/field_items.tsx
index 62f9297c38ef52..9abcc909a161f4 100644
--- a/x-pack/plugins/siem/public/components/fields_browser/field_items.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/fields_browser/field_items.tsx
@@ -12,19 +12,27 @@ import React from 'react';
 import { Draggable } from 'react-beautiful-dnd';
 import styled from 'styled-components';
 
-import { BrowserField, BrowserFields } from '../../containers/source';
-import { ColumnHeaderOptions } from '../../store/timeline/model';
-import { DragEffects } from '../drag_and_drop/draggable_wrapper';
-import { DroppableWrapper } from '../drag_and_drop/droppable_wrapper';
-import { getDraggableFieldId, getDroppableId, DRAG_TYPE_FIELD } from '../drag_and_drop/helpers';
-import { DraggableFieldBadge } from '../draggables/field_badge';
-import { getEmptyValue } from '../empty_value';
-import { getColumnsWithTimestamp, getExampleText, getIconFromType } from '../event_details/helpers';
-import { SelectableText } from '../selectable_text';
+import { BrowserField, BrowserFields } from '../../../common/containers/source';
+import { ColumnHeaderOptions } from '../../../timelines/store/timeline/model';
+import { DragEffects } from '../../../common/components/drag_and_drop/draggable_wrapper';
+import { DroppableWrapper } from '../../../common/components/drag_and_drop/droppable_wrapper';
+import {
+  getDraggableFieldId,
+  getDroppableId,
+  DRAG_TYPE_FIELD,
+} from '../../../common/components/drag_and_drop/helpers';
+import { DraggableFieldBadge } from '../../../common/components/draggables/field_badge';
+import { getEmptyValue } from '../../../common/components/empty_value';
+import {
+  getColumnsWithTimestamp,
+  getExampleText,
+  getIconFromType,
+} from '../../../common/components/event_details/helpers';
+import { SelectableText } from '../../../common/components/selectable_text';
 import { defaultColumnHeaderType } from '../timeline/body/column_headers/default_headers';
 import { DEFAULT_COLUMN_MIN_WIDTH } from '../timeline/body/constants';
 import { OnUpdateColumns } from '../timeline/events';
-import { TruncatableText } from '../truncatable_text';
+import { TruncatableText } from '../../../common/components/truncatable_text';
 import { FieldName } from './field_name';
 import * as i18n from './translations';
 
diff --git a/x-pack/plugins/siem/public/components/fields_browser/field_name.test.tsx b/x-pack/plugins/siem/public/timelines/components/fields_browser/field_name.test.tsx
similarity index 91%
rename from x-pack/plugins/siem/public/components/fields_browser/field_name.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/fields_browser/field_name.test.tsx
index 31f1e7678aa451..473dd9eca4d1e9 100644
--- a/x-pack/plugins/siem/public/components/fields_browser/field_name.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/fields_browser/field_name.test.tsx
@@ -7,9 +7,9 @@
 import { mount } from 'enzyme';
 import React from 'react';
 
-import { mockBrowserFields } from '../../containers/source/mock';
-import { TestProviders } from '../../mock';
-import { getColumnsWithTimestamp } from '../event_details/helpers';
+import { mockBrowserFields } from '../../../common/containers/source/mock';
+import { TestProviders } from '../../../common/mock';
+import { getColumnsWithTimestamp } from '../../../common/components/event_details/helpers';
 
 import { FieldName } from './field_name';
 
diff --git a/x-pack/plugins/siem/public/components/fields_browser/field_name.tsx b/x-pack/plugins/siem/public/timelines/components/fields_browser/field_name.tsx
similarity index 93%
rename from x-pack/plugins/siem/public/components/fields_browser/field_name.tsx
rename to x-pack/plugins/siem/public/timelines/components/fields_browser/field_name.tsx
index fc9633b6f87485..4043623f5d4a49 100644
--- a/x-pack/plugins/siem/public/components/fields_browser/field_name.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/fields_browser/field_name.tsx
@@ -8,13 +8,13 @@ import { EuiButtonIcon, EuiHighlight, EuiIcon, EuiText, EuiToolTip } from '@elas
 import React, { useCallback, useContext, useState, useMemo } from 'react';
 import styled from 'styled-components';
 
-import { ColumnHeaderOptions } from '../../store/timeline/model';
+import { ColumnHeaderOptions } from '../../../timelines/store/timeline/model';
 import { OnUpdateColumns } from '../timeline/events';
 import { TimelineContext } from '../timeline/timeline_context';
-import { WithHoverActions } from '../with_hover_actions';
+import { WithHoverActions } from '../../../common/components/with_hover_actions';
 import { LoadingSpinner } from './helpers';
 import * as i18n from './translations';
-import { DraggableWrapperHoverContent } from '../drag_and_drop/draggable_wrapper_hover_content';
+import { DraggableWrapperHoverContent } from '../../../common/components/drag_and_drop/draggable_wrapper_hover_content';
 
 /**
  * The name of a (draggable) field
diff --git a/x-pack/plugins/siem/public/components/fields_browser/fields_pane.test.tsx b/x-pack/plugins/siem/public/timelines/components/fields_browser/fields_pane.test.tsx
similarity index 94%
rename from x-pack/plugins/siem/public/components/fields_browser/fields_pane.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/fields_browser/fields_pane.test.tsx
index f3ec87a96d46b6..be77b62d2d0a4b 100644
--- a/x-pack/plugins/siem/public/components/fields_browser/fields_pane.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/fields_browser/fields_pane.test.tsx
@@ -6,9 +6,9 @@
 
 import React from 'react';
 
-import { mockBrowserFields } from '../../containers/source/mock';
-import { TestProviders } from '../../mock';
-import { useMountAppended } from '../../utils/use_mount_appended';
+import { mockBrowserFields } from '../../../common/containers/source/mock';
+import { TestProviders } from '../../../common/mock';
+import { useMountAppended } from '../../../common/utils/use_mount_appended';
 
 import { FIELDS_PANE_WIDTH } from './helpers';
 import { FieldsPane } from './fields_pane';
diff --git a/x-pack/plugins/siem/public/components/fields_browser/fields_pane.tsx b/x-pack/plugins/siem/public/timelines/components/fields_browser/fields_pane.tsx
similarity index 95%
rename from x-pack/plugins/siem/public/components/fields_browser/fields_pane.tsx
rename to x-pack/plugins/siem/public/timelines/components/fields_browser/fields_pane.tsx
index 354b2ae5e5eb83..9829a63101f823 100644
--- a/x-pack/plugins/siem/public/components/fields_browser/fields_pane.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/fields_browser/fields_pane.tsx
@@ -8,8 +8,8 @@ import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import React from 'react';
 import styled from 'styled-components';
 
-import { BrowserFields } from '../../containers/source';
-import { ColumnHeaderOptions } from '../../store/timeline/model';
+import { BrowserFields } from '../../../common/containers/source';
+import { ColumnHeaderOptions } from '../../../timelines/store/timeline/model';
 
 import { Category } from './category';
 import { FieldBrowserProps } from './types';
diff --git a/x-pack/plugins/siem/public/components/fields_browser/header.test.tsx b/x-pack/plugins/siem/public/timelines/components/fields_browser/header.test.tsx
similarity index 98%
rename from x-pack/plugins/siem/public/components/fields_browser/header.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/fields_browser/header.test.tsx
index 2abc2fd1046e06..ca05d075e56168 100644
--- a/x-pack/plugins/siem/public/components/fields_browser/header.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/fields_browser/header.test.tsx
@@ -6,8 +6,8 @@
 
 import { mount } from 'enzyme';
 import React from 'react';
-import { mockBrowserFields } from '../../containers/source/mock';
-import { TestProviders } from '../../mock';
+import { mockBrowserFields } from '../../../common/containers/source/mock';
+import { TestProviders } from '../../../common/mock';
 import { defaultHeaders } from '../timeline/body/column_headers/default_headers';
 import { Header } from './header';
 
diff --git a/x-pack/plugins/siem/public/components/fields_browser/header.tsx b/x-pack/plugins/siem/public/timelines/components/fields_browser/header.tsx
similarity index 93%
rename from x-pack/plugins/siem/public/components/fields_browser/header.tsx
rename to x-pack/plugins/siem/public/timelines/components/fields_browser/header.tsx
index ccf6ec67521b0b..1136b7c8d0dc42 100644
--- a/x-pack/plugins/siem/public/components/fields_browser/header.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/fields_browser/header.tsx
@@ -15,10 +15,10 @@ import {
 import React, { useCallback } from 'react';
 import styled from 'styled-components';
 
-import { BrowserFields } from '../../containers/source';
-import { signalsHeaders } from '../../pages/detection_engine/components/signals/default_config';
-import { alertsHeaders } from '../alerts_viewer/default_headers';
-import { defaultHeaders as eventsDefaultHeaders } from '../events_viewer/default_headers';
+import { BrowserFields } from '../../../common/containers/source';
+import { signalsHeaders } from '../../../alerts/components/signals/default_config';
+import { alertsHeaders } from '../../../common/components/alerts_viewer/default_headers';
+import { defaultHeaders as eventsDefaultHeaders } from '../../../common/components/events_viewer/default_headers';
 import { defaultHeaders } from '../timeline/body/column_headers/default_headers';
 import { OnUpdateColumns } from '../timeline/events';
 import { useTimelineTypeContext } from '../timeline/timeline_context';
diff --git a/x-pack/plugins/siem/public/timelines/components/fields_browser/helpers.test.tsx b/x-pack/plugins/siem/public/timelines/components/fields_browser/helpers.test.tsx
new file mode 100644
index 00000000000000..0e1b00dd9b8642
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/fields_browser/helpers.test.tsx
@@ -0,0 +1,376 @@
+/*
+ * 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 { mockBrowserFields } from '../../../common/containers/source/mock';
+
+import {
+  categoryHasFields,
+  createVirtualCategory,
+  getCategoryPaneCategoryClassName,
+  getFieldBrowserCategoryTitleClassName,
+  getFieldBrowserSearchInputClassName,
+  getFieldCount,
+  filterBrowserFieldsByFieldName,
+} from './helpers';
+import { BrowserFields } from '../../../common/containers/source';
+
+const timelineId = 'test';
+
+describe('helpers', () => {
+  describe('getCategoryPaneCategoryClassName', () => {
+    test('it returns the expected class name', () => {
+      const categoryId = 'auditd';
+
+      expect(getCategoryPaneCategoryClassName({ categoryId, timelineId })).toEqual(
+        'field-browser-category-pane-auditd-test'
+      );
+    });
+  });
+
+  describe('getFieldBrowserCategoryTitleClassName', () => {
+    test('it returns the expected class name', () => {
+      const categoryId = 'auditd';
+
+      expect(getFieldBrowserCategoryTitleClassName({ categoryId, timelineId })).toEqual(
+        'field-browser-category-title-auditd-test'
+      );
+    });
+  });
+
+  describe('getFieldBrowserSearchInputClassName', () => {
+    test('it returns the expected class name', () => {
+      expect(getFieldBrowserSearchInputClassName(timelineId)).toEqual(
+        'field-browser-search-input-test'
+      );
+    });
+  });
+
+  describe('categoryHasFields', () => {
+    test('it returns false if the category fields property is undefined', () => {
+      expect(categoryHasFields({})).toBe(false);
+    });
+
+    test('it returns false if the category fields property is empty', () => {
+      expect(categoryHasFields({ fields: {} })).toBe(false);
+    });
+
+    test('it returns true if the category has one field', () => {
+      expect(
+        categoryHasFields({
+          fields: {
+            'auditd.data.a0': {
+              aggregatable: true,
+              category: 'auditd',
+              description: null,
+              example: null,
+              format: '',
+              indexes: ['auditbeat'],
+              name: 'auditd.data.a0',
+              searchable: true,
+              type: 'string',
+            },
+          },
+        })
+      ).toBe(true);
+    });
+
+    test('it returns true if the category has multiple fields', () => {
+      expect(
+        categoryHasFields({
+          fields: {
+            'agent.ephemeral_id': {
+              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: ['auditbeat', 'filebeat', 'packetbeat'],
+              name: 'agent.ephemeral_id',
+              searchable: true,
+              type: 'string',
+            },
+            'agent.hostname': {
+              aggregatable: true,
+              category: 'agent',
+              description: null,
+              example: null,
+              format: '',
+              indexes: ['auditbeat', 'filebeat', 'packetbeat'],
+              name: 'agent.hostname',
+              searchable: true,
+              type: 'string',
+            },
+          },
+        })
+      ).toBe(true);
+    });
+  });
+
+  describe('getFieldCount', () => {
+    test('it returns 0 if the category fields property is undefined', () => {
+      expect(getFieldCount({})).toEqual(0);
+    });
+
+    test('it returns 0 if the category fields property is empty', () => {
+      expect(getFieldCount({ fields: {} })).toEqual(0);
+    });
+
+    test('it returns 1 if the category has one field', () => {
+      expect(
+        getFieldCount({
+          fields: {
+            'auditd.data.a0': {
+              aggregatable: true,
+              category: 'auditd',
+              description: null,
+              example: null,
+              format: '',
+              indexes: ['auditbeat'],
+              name: 'auditd.data.a0',
+              searchable: true,
+              type: 'string',
+            },
+          },
+        })
+      ).toEqual(1);
+    });
+
+    test('it returns the correct count when category has multiple fields', () => {
+      expect(
+        getFieldCount({
+          fields: {
+            'agent.ephemeral_id': {
+              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: ['auditbeat', 'filebeat', 'packetbeat'],
+              name: 'agent.ephemeral_id',
+              searchable: true,
+              type: 'string',
+            },
+            'agent.hostname': {
+              aggregatable: true,
+              category: 'agent',
+              description: null,
+              example: null,
+              format: '',
+              indexes: ['auditbeat', 'filebeat', 'packetbeat'],
+              name: 'agent.hostname',
+              searchable: true,
+              type: 'string',
+            },
+          },
+        })
+      ).toEqual(2);
+    });
+  });
+
+  describe('filterBrowserFieldsByFieldName', () => {
+    test('it returns an empty collection when browserFields is empty', () => {
+      expect(filterBrowserFieldsByFieldName({ browserFields: {}, substring: '' })).toEqual({});
+    });
+
+    test('it returns an empty collection when browserFields is empty and substring is non empty', () => {
+      expect(
+        filterBrowserFieldsByFieldName({ browserFields: {}, substring: 'nothing to match' })
+      ).toEqual({});
+    });
+
+    test('it returns an empty collection when browserFields is NOT empty and substring does not match any fields', () => {
+      expect(
+        filterBrowserFieldsByFieldName({
+          browserFields: mockBrowserFields,
+          substring: 'nothing to match',
+        })
+      ).toEqual({});
+    });
+
+    test('it returns the original collection when browserFields is NOT empty and substring is empty', () => {
+      expect(
+        filterBrowserFieldsByFieldName({
+          browserFields: mockBrowserFields,
+          substring: '',
+        })
+      ).toEqual(mockBrowserFields);
+    });
+
+    test('it returns (only) non-empty categories, where each category contains only the fields matching the substring', () => {
+      const filtered: BrowserFields = {
+        agent: {
+          fields: {
+            'agent.ephemeral_id': {
+              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: ['auditbeat', 'filebeat', 'packetbeat'],
+              name: 'agent.ephemeral_id',
+              searchable: true,
+              type: 'string',
+            },
+            'agent.id': {
+              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: ['auditbeat', 'filebeat', 'packetbeat'],
+              name: 'agent.id',
+              searchable: true,
+              type: 'string',
+            },
+          },
+        },
+        cloud: {
+          fields: {
+            'cloud.account.id': {
+              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: ['auditbeat', 'filebeat', 'packetbeat'],
+              name: 'cloud.account.id',
+              searchable: true,
+              type: 'string',
+            },
+          },
+        },
+        container: {
+          fields: {
+            'container.id': {
+              aggregatable: true,
+              category: 'container',
+              description: 'Unique container id.',
+              example: null,
+              format: '',
+              indexes: ['auditbeat', 'filebeat', 'packetbeat'],
+              name: 'container.id',
+              searchable: true,
+              type: 'string',
+            },
+          },
+        },
+      };
+
+      expect(
+        filterBrowserFieldsByFieldName({
+          browserFields: mockBrowserFields,
+          substring: 'id',
+        })
+      ).toEqual(filtered);
+    });
+  });
+
+  describe('createVirtualCategory', () => {
+    test('it combines the specified fields into a virtual category when the input ONLY contains field names that contain dots (e.g. agent.hostname)', () => {
+      const expectedMatchingFields = {
+        fields: {
+          'agent.hostname': {
+            aggregatable: true,
+            category: 'agent',
+            description: null,
+            example: null,
+            format: '',
+            indexes: ['auditbeat', 'filebeat', 'packetbeat'],
+            name: 'agent.hostname',
+            searchable: true,
+            type: 'string',
+          },
+          'client.domain': {
+            aggregatable: true,
+            category: 'client',
+            description: 'Client domain.',
+            example: null,
+            format: '',
+            indexes: ['auditbeat', 'filebeat', 'packetbeat'],
+            name: 'client.domain',
+            searchable: true,
+            type: 'string',
+          },
+          'client.geo.country_iso_code': {
+            aggregatable: true,
+            category: 'client',
+            description: 'Country ISO code.',
+            example: 'CA',
+            format: '',
+            indexes: ['auditbeat', 'filebeat', 'packetbeat'],
+            name: 'client.geo.country_iso_code',
+            searchable: true,
+            type: 'string',
+          },
+        },
+      };
+
+      const fieldIds = ['agent.hostname', 'client.domain', 'client.geo.country_iso_code'];
+
+      expect(
+        createVirtualCategory({
+          browserFields: mockBrowserFields,
+          fieldIds,
+        })
+      ).toEqual(expectedMatchingFields);
+    });
+
+    test('it combines the specified fields into a virtual category when the input includes field names from the base category that do NOT contain dots (e.g. @timestamp)', () => {
+      const expectedMatchingFields = {
+        fields: {
+          'agent.hostname': {
+            aggregatable: true,
+            category: 'agent',
+            description: null,
+            example: null,
+            format: '',
+            indexes: ['auditbeat', 'filebeat', 'packetbeat'],
+            name: 'agent.hostname',
+            searchable: true,
+            type: 'string',
+          },
+          '@timestamp': {
+            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: ['auditbeat', 'filebeat', 'packetbeat'],
+            name: '@timestamp',
+            searchable: true,
+            type: 'date',
+          },
+          'client.domain': {
+            aggregatable: true,
+            category: 'client',
+            description: 'Client domain.',
+            example: null,
+            format: '',
+            indexes: ['auditbeat', 'filebeat', 'packetbeat'],
+            name: 'client.domain',
+            searchable: true,
+            type: 'string',
+          },
+        },
+      };
+
+      const fieldIds = ['agent.hostname', '@timestamp', 'client.domain'];
+
+      expect(
+        createVirtualCategory({
+          browserFields: mockBrowserFields,
+          fieldIds,
+        })
+      ).toEqual(expectedMatchingFields);
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/timelines/components/fields_browser/helpers.tsx b/x-pack/plugins/siem/public/timelines/components/fields_browser/helpers.tsx
new file mode 100644
index 00000000000000..d176e68bc8414e
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/fields_browser/helpers.tsx
@@ -0,0 +1,143 @@
+/*
+ * 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 { EuiLoadingSpinner } from '@elastic/eui';
+import { filter, get, pickBy } from 'lodash/fp';
+import styled from 'styled-components';
+
+import { BrowserField, BrowserFields } from '../../../common/containers/source';
+import {
+  DEFAULT_CATEGORY_NAME,
+  defaultHeaders,
+} from '../timeline/body/column_headers/default_headers';
+
+export const LoadingSpinner = styled(EuiLoadingSpinner)`
+  cursor: pointer;
+  position: relative;
+  top: 3px;
+`;
+
+LoadingSpinner.displayName = 'LoadingSpinner';
+
+export const CATEGORY_PANE_WIDTH = 200;
+export const DESCRIPTION_COLUMN_WIDTH = 300;
+export const FIELD_COLUMN_WIDTH = 200;
+export const FIELD_BROWSER_WIDTH = 900;
+export const FIELD_BROWSER_HEIGHT = 300;
+export const FIELDS_PANE_WIDTH = 670;
+export const HEADER_HEIGHT = 40;
+export const PANES_FLEX_GROUP_WIDTH = CATEGORY_PANE_WIDTH + FIELDS_PANE_WIDTH + 10;
+export const SEARCH_INPUT_WIDTH = 850;
+export const TABLE_HEIGHT = 260;
+export const TYPE_COLUMN_WIDTH = 50;
+
+/**
+ * Returns the CSS class name for the title of a category shown in the left
+ * side field browser
+ */
+export const getCategoryPaneCategoryClassName = ({
+  categoryId,
+  timelineId,
+}: {
+  categoryId: string;
+  timelineId: string;
+}): string => `field-browser-category-pane-${categoryId}-${timelineId}`;
+
+/**
+ * Returns the CSS class name for the title of a category shown in the right
+ * side of field browser
+ */
+export const getFieldBrowserCategoryTitleClassName = ({
+  categoryId,
+  timelineId,
+}: {
+  categoryId: string;
+  timelineId: string;
+}): string => `field-browser-category-title-${categoryId}-${timelineId}`;
+
+/** Returns the class name for a field browser search input */
+export const getFieldBrowserSearchInputClassName = (timelineId: string): string =>
+  `field-browser-search-input-${timelineId}`;
+
+/** Returns true if the specified category has at least one field */
+export const categoryHasFields = (category: Partial<BrowserField>): boolean =>
+  category.fields != null && Object.keys(category.fields).length > 0;
+
+/** Returns the count of fields in the specified category */
+export const getFieldCount = (category: Partial<BrowserField> | undefined): number =>
+  category != null && category.fields != null ? Object.keys(category.fields).length : 0;
+
+/**
+ * Filters the specified `BrowserFields` to return a new collection where every
+ * category contains at least one field name that matches the specified substring.
+ */
+export const filterBrowserFieldsByFieldName = ({
+  browserFields,
+  substring,
+}: {
+  browserFields: BrowserFields;
+  substring: string;
+}): BrowserFields => {
+  const trimmedSubstring = substring.trim();
+
+  // filter each category such that it only contains fields with field names
+  // that contain the specified substring:
+  const filteredBrowserFields: BrowserFields = Object.keys(browserFields).reduce(
+    (filteredCategories, categoryId) => ({
+      ...filteredCategories,
+      [categoryId]: {
+        ...browserFields[categoryId],
+        fields: filter(
+          f => f.name != null && f.name.includes(trimmedSubstring),
+          browserFields[categoryId].fields
+        ).reduce((filtered, field) => ({ ...filtered, [field.name!]: field }), {}),
+      },
+    }),
+    {}
+  );
+
+  // only pick non-empty categories from the filtered browser fields
+  const nonEmptyCategories: BrowserFields = pickBy(
+    category => categoryHasFields(category),
+    filteredBrowserFields
+  );
+
+  return nonEmptyCategories;
+};
+
+/**
+ * Returns a "virtual" category (e.g. default ECS) from the specified fieldIds
+ */
+export const createVirtualCategory = ({
+  browserFields,
+  fieldIds,
+}: {
+  browserFields: BrowserFields;
+  fieldIds: string[];
+}): Partial<BrowserField> => ({
+  fields: fieldIds.reduce<Readonly<Record<string, Partial<BrowserField>>>>((fields, fieldId) => {
+    const splitId = fieldId.split('.'); // source.geo.city_name -> [source, geo, city_name]
+
+    return {
+      ...fields,
+      [fieldId]: {
+        ...get([splitId.length > 1 ? splitId[0] : 'base', 'fields', fieldId], browserFields),
+        name: fieldId,
+      },
+    };
+  }, {}),
+});
+
+/** Merges the specified browser fields with the default category (i.e. `default ECS`) */
+export const mergeBrowserFieldsWithDefaultCategory = (
+  browserFields: BrowserFields
+): BrowserFields => ({
+  ...browserFields,
+  [DEFAULT_CATEGORY_NAME]: createVirtualCategory({
+    browserFields,
+    fieldIds: defaultHeaders.map(header => header.id),
+  }),
+});
diff --git a/x-pack/plugins/siem/public/timelines/components/fields_browser/index.test.tsx b/x-pack/plugins/siem/public/timelines/components/fields_browser/index.test.tsx
new file mode 100644
index 00000000000000..798fa53e607ed2
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/fields_browser/index.test.tsx
@@ -0,0 +1,275 @@
+/*
+ * 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 { mount } from 'enzyme';
+import React from 'react';
+import { ActionCreator } from 'typescript-fsa';
+
+import { mockBrowserFields } from '../../../common/containers/source/mock';
+import { TestProviders } from '../../../common/mock';
+import { ColumnHeaderOptions } from '../../../timelines/store/timeline/model';
+
+import { FIELD_BROWSER_HEIGHT, FIELD_BROWSER_WIDTH } from './helpers';
+
+import { StatefulFieldsBrowserComponent } from '.';
+
+// Suppress warnings about "react-beautiful-dnd" until we migrate to @testing-library/react
+/* eslint-disable no-console */
+const originalError = console.error;
+const originalWarn = console.warn;
+beforeAll(() => {
+  console.warn = jest.fn();
+  console.error = jest.fn();
+});
+afterAll(() => {
+  console.error = originalError;
+  console.warn = originalWarn;
+});
+
+const removeColumnMock = (jest.fn() as unknown) as ActionCreator<{
+  id: string;
+  columnId: string;
+}>;
+
+const upsertColumnMock = (jest.fn() as unknown) as ActionCreator<{
+  column: ColumnHeaderOptions;
+  id: string;
+  index: number;
+}>;
+
+describe('StatefulFieldsBrowser', () => {
+  const timelineId = 'test';
+
+  test('it renders the Fields button, which displays the fields browser on click', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <StatefulFieldsBrowserComponent
+          browserFields={mockBrowserFields}
+          columnHeaders={[]}
+          height={FIELD_BROWSER_HEIGHT}
+          onUpdateColumns={jest.fn()}
+          timelineId={timelineId}
+          toggleColumn={jest.fn()}
+          width={FIELD_BROWSER_WIDTH}
+          removeColumn={removeColumnMock}
+          upsertColumn={upsertColumnMock}
+        />
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="show-field-browser"]')
+        .first()
+        .text()
+    ).toEqual('Columns');
+  });
+
+  describe('toggleShow', () => {
+    test('it does NOT render the fields browser until the Fields button is clicked', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <StatefulFieldsBrowserComponent
+            browserFields={mockBrowserFields}
+            columnHeaders={[]}
+            height={FIELD_BROWSER_HEIGHT}
+            onUpdateColumns={jest.fn()}
+            timelineId={timelineId}
+            toggleColumn={jest.fn()}
+            width={FIELD_BROWSER_WIDTH}
+            removeColumn={removeColumnMock}
+            upsertColumn={upsertColumnMock}
+          />
+        </TestProviders>
+      );
+
+      expect(wrapper.find('[data-test-subj="fields-browser-container"]').exists()).toBe(false);
+    });
+
+    test('it renders the fields browser when the Fields button is clicked', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <StatefulFieldsBrowserComponent
+            browserFields={mockBrowserFields}
+            columnHeaders={[]}
+            height={FIELD_BROWSER_HEIGHT}
+            onUpdateColumns={jest.fn()}
+            timelineId={timelineId}
+            toggleColumn={jest.fn()}
+            width={FIELD_BROWSER_WIDTH}
+            removeColumn={removeColumnMock}
+            upsertColumn={upsertColumnMock}
+          />
+        </TestProviders>
+      );
+
+      wrapper
+        .find('[data-test-subj="show-field-browser"]')
+        .first()
+        .simulate('click');
+
+      expect(wrapper.find('[data-test-subj="fields-browser-container"]').exists()).toBe(true);
+    });
+  });
+
+  describe('updateSelectedCategoryId', () => {
+    beforeEach(() => {
+      jest.useFakeTimers();
+    });
+    test('it updates the selectedCategoryId state, which makes the category bold, when the user clicks a category name in the left hand side of the field browser', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <StatefulFieldsBrowserComponent
+            browserFields={mockBrowserFields}
+            columnHeaders={[]}
+            height={FIELD_BROWSER_HEIGHT}
+            onUpdateColumns={jest.fn()}
+            timelineId={timelineId}
+            toggleColumn={jest.fn()}
+            width={FIELD_BROWSER_WIDTH}
+            removeColumn={removeColumnMock}
+            upsertColumn={upsertColumnMock}
+          />
+        </TestProviders>
+      );
+
+      wrapper
+        .find('[data-test-subj="show-field-browser"]')
+        .first()
+        .simulate('click');
+
+      wrapper
+        .find(`.field-browser-category-pane-auditd-${timelineId}`)
+        .first()
+        .simulate('click');
+
+      wrapper.update();
+      expect(
+        wrapper.find(`.field-browser-category-pane-auditd-${timelineId}`).first()
+      ).toHaveStyleRule('font-weight', 'bold', { modifier: '.euiText' });
+    });
+
+    test('it updates the selectedCategoryId state according to most fields returned', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <StatefulFieldsBrowserComponent
+            browserFields={mockBrowserFields}
+            columnHeaders={[]}
+            height={FIELD_BROWSER_HEIGHT}
+            onUpdateColumns={jest.fn()}
+            timelineId={timelineId}
+            toggleColumn={jest.fn()}
+            width={FIELD_BROWSER_WIDTH}
+            removeColumn={removeColumnMock}
+            upsertColumn={upsertColumnMock}
+          />
+        </TestProviders>
+      );
+
+      wrapper
+        .find('[data-test-subj="show-field-browser"]')
+        .first()
+        .simulate('click');
+      expect(
+        wrapper.find(`.field-browser-category-pane-cloud-${timelineId}`).first()
+      ).toHaveStyleRule('font-weight', 'normal', { modifier: '.euiText' });
+      wrapper
+        .find('[data-test-subj="field-search"]')
+        .last()
+        .simulate('change', { target: { value: 'cloud' } });
+
+      jest.runOnlyPendingTimers();
+      wrapper.update();
+      expect(
+        wrapper.find(`.field-browser-category-pane-cloud-${timelineId}`).first()
+      ).toHaveStyleRule('font-weight', 'bold', { modifier: '.euiText' });
+    });
+  });
+
+  test('it renders the Fields Browser button as a settings gear when the isEventViewer prop is true', () => {
+    const isEventViewer = true;
+
+    const wrapper = mount(
+      <TestProviders>
+        <StatefulFieldsBrowserComponent
+          browserFields={mockBrowserFields}
+          columnHeaders={[]}
+          height={FIELD_BROWSER_HEIGHT}
+          isEventViewer={isEventViewer}
+          onUpdateColumns={jest.fn()}
+          timelineId={timelineId}
+          toggleColumn={jest.fn()}
+          width={FIELD_BROWSER_WIDTH}
+          removeColumn={removeColumnMock}
+          upsertColumn={upsertColumnMock}
+        />
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="show-field-browser-gear"]')
+        .first()
+        .exists()
+    ).toBe(true);
+  });
+
+  test('it does NOT render the Fields Browser button as a settings gear when the isEventViewer prop is false', () => {
+    const isEventViewer = false;
+
+    const wrapper = mount(
+      <TestProviders>
+        <StatefulFieldsBrowserComponent
+          browserFields={mockBrowserFields}
+          columnHeaders={[]}
+          height={FIELD_BROWSER_HEIGHT}
+          isEventViewer={isEventViewer}
+          onUpdateColumns={jest.fn()}
+          timelineId={timelineId}
+          toggleColumn={jest.fn()}
+          width={FIELD_BROWSER_WIDTH}
+          removeColumn={removeColumnMock}
+          upsertColumn={upsertColumnMock}
+        />
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="show-field-browser-gear"]')
+        .first()
+        .exists()
+    ).toBe(false);
+  });
+
+  test('it does NOT render the default Fields Browser button when the isEventViewer prop is true', () => {
+    const isEventViewer = true;
+
+    const wrapper = mount(
+      <TestProviders>
+        <StatefulFieldsBrowserComponent
+          browserFields={mockBrowserFields}
+          columnHeaders={[]}
+          height={FIELD_BROWSER_HEIGHT}
+          isEventViewer={isEventViewer}
+          onUpdateColumns={jest.fn()}
+          timelineId={timelineId}
+          toggleColumn={jest.fn()}
+          width={FIELD_BROWSER_WIDTH}
+          removeColumn={removeColumnMock}
+          upsertColumn={upsertColumnMock}
+        />
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="show-field-browser"]')
+        .first()
+        .exists()
+    ).toBe(false);
+  });
+});
diff --git a/x-pack/plugins/siem/public/timelines/components/fields_browser/index.tsx b/x-pack/plugins/siem/public/timelines/components/fields_browser/index.tsx
new file mode 100644
index 00000000000000..11c44cce89956d
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/fields_browser/index.tsx
@@ -0,0 +1,211 @@
+/*
+ * 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 { EuiButtonEmpty, EuiButtonIcon, EuiToolTip } from '@elastic/eui';
+import { noop } from 'lodash/fp';
+import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react';
+import { connect, ConnectedProps } from 'react-redux';
+import styled from 'styled-components';
+
+import { BrowserFields } from '../../../common/containers/source';
+import { timelineActions } from '../../store/timeline';
+import { ColumnHeaderOptions } from '../../../timelines/store/timeline/model';
+import { DEFAULT_CATEGORY_NAME } from '../timeline/body/column_headers/default_headers';
+import { FieldsBrowser } from './field_browser';
+import { filterBrowserFieldsByFieldName, mergeBrowserFieldsWithDefaultCategory } from './helpers';
+import * as i18n from './translations';
+import { FieldBrowserProps } from './types';
+
+const fieldsButtonClassName = 'fields-button';
+
+/** wait this many ms after the user completes typing before applying the filter input */
+export const INPUT_TIMEOUT = 250;
+
+const FieldsBrowserButtonContainer = styled.div`
+  position: relative;
+`;
+
+FieldsBrowserButtonContainer.displayName = 'FieldsBrowserButtonContainer';
+
+/**
+ * Manages the state of the field browser
+ */
+export const StatefulFieldsBrowserComponent = React.memo<FieldBrowserProps & PropsFromRedux>(
+  ({
+    columnHeaders,
+    browserFields,
+    height,
+    isEventViewer = false,
+    onFieldSelected,
+    onUpdateColumns,
+    timelineId,
+    toggleColumn,
+    width,
+  }) => {
+    /** tracks the latest timeout id from `setTimeout`*/
+    const inputTimeoutId = useRef(0);
+
+    /** all field names shown in the field browser must contain this string (when specified) */
+    const [filterInput, setFilterInput] = useState('');
+    /** all fields in this collection have field names that match the filterInput */
+    const [filteredBrowserFields, setFilteredBrowserFields] = useState<BrowserFields | null>(null);
+    /** when true, show a spinner in the input to indicate the field browser is searching for matching field names */
+    const [isSearching, setIsSearching] = useState(false);
+    /** this category will be displayed in the right-hand pane of the field browser */
+    const [selectedCategoryId, setSelectedCategoryId] = useState(DEFAULT_CATEGORY_NAME);
+    /** show the field browser */
+    const [show, setShow] = useState(false);
+    useEffect(() => {
+      return () => {
+        if (inputTimeoutId.current !== 0) {
+          // ⚠️ mutation: cancel any remaining timers and zero-out the timer id:
+          clearTimeout(inputTimeoutId.current);
+          inputTimeoutId.current = 0;
+        }
+      };
+    }, []);
+
+    /** Shows / hides the field browser */
+    const toggleShow = useCallback(() => {
+      setShow(!show);
+    }, [show]);
+
+    /** Invoked when the user types in the filter input */
+    const updateFilter = useCallback(
+      (newFilterInput: string) => {
+        setFilterInput(newFilterInput);
+        setIsSearching(true);
+        if (inputTimeoutId.current !== 0) {
+          clearTimeout(inputTimeoutId.current); // ⚠️ mutation: cancel any previous timers
+        }
+        // ⚠️ mutation: schedule a new timer that will apply the filter when it fires:
+        inputTimeoutId.current = window.setTimeout(() => {
+          const newFilteredBrowserFields = filterBrowserFieldsByFieldName({
+            browserFields: mergeBrowserFieldsWithDefaultCategory(browserFields),
+            substring: newFilterInput,
+          });
+          setFilteredBrowserFields(newFilteredBrowserFields);
+          setIsSearching(false);
+
+          const newSelectedCategoryId =
+            newFilterInput === '' || Object.keys(newFilteredBrowserFields).length === 0
+              ? DEFAULT_CATEGORY_NAME
+              : Object.keys(newFilteredBrowserFields)
+                  .sort()
+                  .reduce<string>(
+                    (selected, category) =>
+                      newFilteredBrowserFields[category].fields != null &&
+                      newFilteredBrowserFields[selected].fields != null &&
+                      Object.keys(newFilteredBrowserFields[category].fields!).length >
+                        Object.keys(newFilteredBrowserFields[selected].fields!).length
+                        ? category
+                        : selected,
+                    Object.keys(newFilteredBrowserFields)[0]
+                  );
+          setSelectedCategoryId(newSelectedCategoryId);
+        }, INPUT_TIMEOUT);
+      },
+      [browserFields, filterInput, inputTimeoutId.current]
+    );
+
+    /**
+     * Invoked when the user clicks a category name in the left-hand side of
+     * the field browser
+     */
+    const updateSelectedCategoryId = useCallback((categoryId: string) => {
+      setSelectedCategoryId(categoryId);
+    }, []);
+
+    /**
+     * Invoked when the user clicks on the context menu to view a category's
+     * columns in the timeline, this function dispatches the action that
+     * causes the timeline display those columns.
+     */
+    const updateColumnsAndSelectCategoryId = useCallback((columns: ColumnHeaderOptions[]) => {
+      onUpdateColumns(columns); // show the category columns in the timeline
+    }, []);
+
+    /** Invoked when the field browser should be hidden */
+    const hideFieldBrowser = useCallback(() => {
+      setFilterInput('');
+      setFilterInput('');
+      setFilteredBrowserFields(null);
+      setIsSearching(false);
+      setSelectedCategoryId(DEFAULT_CATEGORY_NAME);
+      setShow(false);
+    }, []);
+    // only merge in the default category if the field browser is visible
+    const browserFieldsWithDefaultCategory = useMemo(
+      () => (show ? mergeBrowserFieldsWithDefaultCategory(browserFields) : {}),
+      [show, browserFields]
+    );
+
+    return (
+      <>
+        <FieldsBrowserButtonContainer data-test-subj="fields-browser-button-container">
+          <EuiToolTip content={i18n.CUSTOMIZE_COLUMNS}>
+            {isEventViewer ? (
+              <EuiButtonIcon
+                aria-label={i18n.CUSTOMIZE_COLUMNS}
+                className={fieldsButtonClassName}
+                data-test-subj="show-field-browser-gear"
+                iconType="list"
+                onClick={toggleShow}
+              />
+            ) : (
+              <EuiButtonEmpty
+                className={fieldsButtonClassName}
+                data-test-subj="show-field-browser"
+                iconType="list"
+                onClick={toggleShow}
+                size="xs"
+              >
+                {i18n.FIELDS}
+              </EuiButtonEmpty>
+            )}
+          </EuiToolTip>
+
+          {show && (
+            <FieldsBrowser
+              browserFields={browserFieldsWithDefaultCategory}
+              columnHeaders={columnHeaders}
+              filteredBrowserFields={
+                filteredBrowserFields != null
+                  ? filteredBrowserFields
+                  : browserFieldsWithDefaultCategory
+              }
+              height={height}
+              isEventViewer={isEventViewer}
+              isSearching={isSearching}
+              onCategorySelected={updateSelectedCategoryId}
+              onFieldSelected={onFieldSelected}
+              onHideFieldBrowser={hideFieldBrowser}
+              onOutsideClick={show ? hideFieldBrowser : noop}
+              onSearchInputChange={updateFilter}
+              onUpdateColumns={updateColumnsAndSelectCategoryId}
+              searchInput={filterInput}
+              selectedCategoryId={selectedCategoryId}
+              timelineId={timelineId}
+              toggleColumn={toggleColumn}
+              width={width}
+            />
+          )}
+        </FieldsBrowserButtonContainer>
+      </>
+    );
+  }
+);
+
+const mapDispatchToProps = {
+  removeColumn: timelineActions.removeColumn,
+  upsertColumn: timelineActions.upsertColumn,
+};
+
+const connector = connect(null, mapDispatchToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export const StatefulFieldsBrowser = connector(React.memo(StatefulFieldsBrowserComponent));
diff --git a/x-pack/plugins/siem/public/components/fields_browser/translations.ts b/x-pack/plugins/siem/public/timelines/components/fields_browser/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/fields_browser/translations.ts
rename to x-pack/plugins/siem/public/timelines/components/fields_browser/translations.ts
diff --git a/x-pack/plugins/siem/public/timelines/components/fields_browser/types.ts b/x-pack/plugins/siem/public/timelines/components/fields_browser/types.ts
new file mode 100644
index 00000000000000..2b9889ec13e794
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/fields_browser/types.ts
@@ -0,0 +1,37 @@
+/*
+ * 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 { BrowserFields } from '../../../common/containers/source';
+import { ColumnHeaderOptions } from '../../../timelines/store/timeline/model';
+import { OnUpdateColumns } from '../timeline/events';
+
+export type OnFieldSelected = (fieldId: string) => void;
+export type OnHideFieldBrowser = () => void;
+
+export interface FieldBrowserProps {
+  /** The timeline's current column headers */
+  columnHeaders: ColumnHeaderOptions[];
+  /** A map of categoryId -> metadata about the fields in that category */
+  browserFields: BrowserFields;
+  /** The height of the field browser */
+  height: number;
+  /** When true, this Fields Browser is being used as an "events viewer" */
+  isEventViewer?: boolean;
+  /**
+   * Overrides the default behavior of the `FieldBrowser` to enable
+   * "selection" mode, where a field is selected by clicking a button
+   * instead of dragging it to the timeline
+   */
+  onFieldSelected?: OnFieldSelected;
+  /** Invoked when a user chooses to view a new set of columns in the timeline */
+  onUpdateColumns: OnUpdateColumns;
+  /** The timeline associated with this field browser */
+  timelineId: string;
+  /** Adds or removes a column to / from the timeline */
+  toggleColumn: (column: ColumnHeaderOptions) => void;
+  /** The width of the field browser */
+  width: number;
+}
diff --git a/x-pack/plugins/siem/public/components/flyout/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/flyout/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/flyout/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/flyout/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/timelines/components/flyout/button/index.tsx b/x-pack/plugins/siem/public/timelines/components/flyout/button/index.tsx
new file mode 100644
index 00000000000000..a80b8de4351673
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/flyout/button/index.tsx
@@ -0,0 +1,148 @@
+/*
+ * 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 { noop } from 'lodash/fp';
+import { EuiButton, EuiNotificationBadge, EuiPanel } from '@elastic/eui';
+import { rgba } from 'polished';
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+
+import { WithSource } from '../../../../common/containers/source';
+import { IS_DRAGGING_CLASS_NAME } from '../../../../common/components/drag_and_drop/helpers';
+import { DataProvider } from '../../timeline/data_providers/data_provider';
+import { flattenIntoAndGroups } from '../../timeline/data_providers/helpers';
+import { DataProviders } from '../../timeline/data_providers';
+import * as i18n from './translations';
+
+export const FLYOUT_BUTTON_CLASS_NAME = 'timeline-flyout-button';
+
+export const getBadgeCount = (dataProviders: DataProvider[]): number =>
+  flattenIntoAndGroups(dataProviders).reduce((total, group) => total + group.length, 0);
+
+const SHOW_HIDE_TRANSLATE_X = 497; // px
+
+const Container = styled.div`
+  padding-top: 8px;
+  position: fixed;
+  right: 0px;
+  top: 40%;
+  transform: translateX(${SHOW_HIDE_TRANSLATE_X}px);
+  user-select: none;
+  width: 500px;
+  z-index: ${({ theme }) => theme.eui.euiZLevel9};
+
+  .${IS_DRAGGING_CLASS_NAME} & {
+    transform: none;
+  }
+
+  .${FLYOUT_BUTTON_CLASS_NAME} {
+    border-radius: 4px 4px 0 0;
+    box-shadow: none;
+    height: 46px;
+  }
+
+  .${IS_DRAGGING_CLASS_NAME} & .${FLYOUT_BUTTON_CLASS_NAME} {
+    color: ${({ theme }) => theme.eui.euiColorSuccess};
+    background: ${({ theme }) => rgba(theme.eui.euiColorSuccess, 0.2)} !important;
+    border: 1px solid ${({ theme }) => theme.eui.euiColorSuccess};
+    border-bottom: none;
+    text-decoration: none;
+  }
+`;
+
+Container.displayName = 'Container';
+
+const BadgeButtonContainer = styled.div`
+  align-items: flex-start;
+  display: flex;
+  flex-direction: row;
+  left: -87px;
+  position: absolute;
+  top: 34px;
+  transform: rotate(-90deg);
+`;
+
+BadgeButtonContainer.displayName = 'BadgeButtonContainer';
+
+const DataProvidersPanel = styled(EuiPanel)`
+  border-radius: 0;
+  padding: 0 4px 0 4px;
+  user-select: none;
+  z-index: ${({ theme }) => theme.eui.euiZLevel9};
+`;
+
+interface FlyoutButtonProps {
+  dataProviders: DataProvider[];
+  onOpen: () => void;
+  show: boolean;
+  timelineId: string;
+}
+
+export const FlyoutButton = React.memo<FlyoutButtonProps>(
+  ({ onOpen, show, dataProviders, timelineId }) => {
+    const badgeCount = useMemo(() => getBadgeCount(dataProviders), [dataProviders]);
+
+    if (!show) {
+      return null;
+    }
+
+    return (
+      <Container>
+        <BadgeButtonContainer
+          className="flyout-overlay"
+          data-test-subj="flyoutOverlay"
+          onClick={onOpen}
+        >
+          <EuiButton
+            className={FLYOUT_BUTTON_CLASS_NAME}
+            data-test-subj="flyout-button-not-ready-to-drop"
+            fill={false}
+            iconSide="right"
+            iconType="arrowUp"
+          >
+            {i18n.FLYOUT_BUTTON}
+          </EuiButton>
+          <EuiNotificationBadge
+            color="accent"
+            data-test-subj="badge"
+            style={{
+              left: '-9px',
+              position: 'relative',
+              top: '-6px',
+              transform: 'rotate(90deg)',
+              visibility: dataProviders.length !== 0 ? 'inherit' : 'hidden',
+              zIndex: 10,
+            }}
+          >
+            {badgeCount}
+          </EuiNotificationBadge>
+        </BadgeButtonContainer>
+        <DataProvidersPanel paddingSize="none">
+          <WithSource sourceId="default">
+            {({ browserFields }) => (
+              <DataProviders
+                browserFields={browserFields}
+                id={timelineId}
+                dataProviders={dataProviders}
+                onDataProviderEdited={noop}
+                onDataProviderRemoved={noop}
+                onToggleDataProviderEnabled={noop}
+                onToggleDataProviderExcluded={noop}
+                show={show}
+              />
+            )}
+          </WithSource>
+        </DataProvidersPanel>
+      </Container>
+    );
+  },
+  (prevProps, nextProps) =>
+    prevProps.show === nextProps.show &&
+    prevProps.dataProviders === nextProps.dataProviders &&
+    prevProps.timelineId === nextProps.timelineId
+);
+
+FlyoutButton.displayName = 'FlyoutButton';
diff --git a/x-pack/plugins/siem/public/components/flyout/button/translations.ts b/x-pack/plugins/siem/public/timelines/components/flyout/button/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/flyout/button/translations.ts
rename to x-pack/plugins/siem/public/timelines/components/flyout/button/translations.ts
diff --git a/x-pack/plugins/siem/public/timelines/components/flyout/header/index.tsx b/x-pack/plugins/siem/public/timelines/components/flyout/header/index.tsx
new file mode 100644
index 00000000000000..b332260597f223
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/flyout/header/index.tsx
@@ -0,0 +1,143 @@
+/*
+ * 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, { useCallback } from 'react';
+import { connect, ConnectedProps } from 'react-redux';
+import { Dispatch } from 'redux';
+
+import { isEmpty, get } from 'lodash/fp';
+import { History } from '../../../../common/lib/history';
+import { Note } from '../../../../common/lib/note';
+import { appSelectors, inputsModel, inputsSelectors, State } from '../../../../common/store';
+import { defaultHeaders } from '../../timeline/body/column_headers/default_headers';
+import { Properties } from '../../timeline/properties';
+import { appActions } from '../../../../common/store/app';
+import { inputsActions } from '../../../../common/store/inputs';
+import { timelineActions, timelineSelectors } from '../../../store/timeline';
+import { TimelineModel } from '../../../../timelines/store/timeline/model';
+import { timelineDefaults } from '../../../../timelines/store/timeline/defaults';
+import { InputsModelId } from '../../../../common/store/inputs/constants';
+
+interface OwnProps {
+  timelineId: string;
+  usersViewing: string[];
+}
+
+type Props = OwnProps & PropsFromRedux;
+
+const StatefulFlyoutHeader = React.memo<Props>(
+  ({
+    associateNote,
+    createTimeline,
+    description,
+    isFavorite,
+    isDataInTimeline,
+    isDatepickerLocked,
+    title,
+    noteIds,
+    notesById,
+    timelineId,
+    toggleLock,
+    updateDescription,
+    updateIsFavorite,
+    updateNote,
+    updateTitle,
+    usersViewing,
+  }) => {
+    const getNotesByIds = useCallback(
+      (noteIdsVar: string[]): Note[] => appSelectors.getNotes(notesById, noteIdsVar),
+      [notesById]
+    );
+    return (
+      <Properties
+        associateNote={associateNote}
+        createTimeline={createTimeline}
+        description={description}
+        getNotesByIds={getNotesByIds}
+        isDataInTimeline={isDataInTimeline}
+        isDatepickerLocked={isDatepickerLocked}
+        isFavorite={isFavorite}
+        title={title}
+        noteIds={noteIds}
+        timelineId={timelineId}
+        toggleLock={toggleLock}
+        updateDescription={updateDescription}
+        updateIsFavorite={updateIsFavorite}
+        updateTitle={updateTitle}
+        updateNote={updateNote}
+        usersViewing={usersViewing}
+      />
+    );
+  }
+);
+
+StatefulFlyoutHeader.displayName = 'StatefulFlyoutHeader';
+
+const emptyHistory: History[] = []; // stable reference
+
+const emptyNotesId: string[] = []; // stable reference
+
+const makeMapStateToProps = () => {
+  const getTimeline = timelineSelectors.getTimelineByIdSelector();
+  const getNotesByIds = appSelectors.notesByIdsSelector();
+  const getGlobalInput = inputsSelectors.globalSelector();
+  const mapStateToProps = (state: State, { timelineId }: OwnProps) => {
+    const timeline: TimelineModel = getTimeline(state, timelineId) ?? timelineDefaults;
+    const globalInput: inputsModel.InputsRange = getGlobalInput(state);
+    const {
+      dataProviders,
+      description = '',
+      isFavorite = false,
+      kqlQuery,
+      title = '',
+      noteIds = emptyNotesId,
+    } = timeline;
+
+    const history = emptyHistory; // TODO: get history from store via selector
+
+    return {
+      description,
+      notesById: getNotesByIds(state),
+      history,
+      isDataInTimeline:
+        !isEmpty(dataProviders) || !isEmpty(get('filterQuery.kuery.expression', kqlQuery)),
+      isFavorite,
+      isDatepickerLocked: globalInput.linkTo.includes('timeline'),
+      noteIds,
+      title,
+    };
+  };
+  return mapStateToProps;
+};
+
+const mapDispatchToProps = (dispatch: Dispatch, { timelineId }: OwnProps) => ({
+  associateNote: (noteId: string) => dispatch(timelineActions.addNote({ id: timelineId, noteId })),
+  createTimeline: ({ id, show }: { id: string; show?: boolean }) =>
+    dispatch(
+      timelineActions.createTimeline({
+        id,
+        columns: defaultHeaders,
+        show,
+      })
+    ),
+  updateDescription: ({ id, description }: { id: string; description: string }) =>
+    dispatch(timelineActions.updateDescription({ id, description })),
+  updateIsFavorite: ({ id, isFavorite }: { id: string; isFavorite: boolean }) =>
+    dispatch(timelineActions.updateIsFavorite({ id, isFavorite })),
+  updateIsLive: ({ id, isLive }: { id: string; isLive: boolean }) =>
+    dispatch(timelineActions.updateIsLive({ id, isLive })),
+  updateNote: (note: Note) => dispatch(appActions.updateNote({ note })),
+  updateTitle: ({ id, title }: { id: string; title: string }) =>
+    dispatch(timelineActions.updateTitle({ id, title })),
+  toggleLock: ({ linkToId }: { linkToId: InputsModelId }) =>
+    dispatch(inputsActions.toggleTimelineLinkTo({ linkToId })),
+});
+
+const connector = connect(makeMapStateToProps, mapDispatchToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export const FlyoutHeader = connector(StatefulFlyoutHeader);
diff --git a/x-pack/plugins/siem/public/components/flyout/header_with_close_button/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/flyout/header_with_close_button/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/flyout/header_with_close_button/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/flyout/header_with_close_button/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/timelines/components/flyout/header_with_close_button/index.test.tsx b/x-pack/plugins/siem/public/timelines/components/flyout/header_with_close_button/index.test.tsx
new file mode 100644
index 00000000000000..57fd61561c65bc
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/flyout/header_with_close_button/index.test.tsx
@@ -0,0 +1,45 @@
+/*
+ * 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 { mount, shallow } from 'enzyme';
+import React from 'react';
+
+import { TestProviders } from '../../../../common/mock';
+import { FlyoutHeaderWithCloseButton } from '.';
+
+describe('FlyoutHeaderWithCloseButton', () => {
+  test('renders correctly against snapshot', () => {
+    const EmptyComponent = shallow(
+      <TestProviders>
+        <FlyoutHeaderWithCloseButton
+          onClose={jest.fn()}
+          timelineId={'test'}
+          usersViewing={['elastic']}
+        />
+      </TestProviders>
+    );
+    expect(EmptyComponent.find('FlyoutHeaderWithCloseButton')).toMatchSnapshot();
+  });
+
+  test('it should invoke onClose when the close button is clicked', () => {
+    const closeMock = jest.fn();
+    const wrapper = mount(
+      <TestProviders>
+        <FlyoutHeaderWithCloseButton
+          onClose={closeMock}
+          timelineId={'test'}
+          usersViewing={['elastic']}
+        />
+      </TestProviders>
+    );
+    wrapper
+      .find('[data-test-subj="close-timeline"] button')
+      .first()
+      .simulate('click');
+
+    expect(closeMock).toBeCalled();
+  });
+});
diff --git a/x-pack/plugins/siem/public/components/flyout/header_with_close_button/index.tsx b/x-pack/plugins/siem/public/timelines/components/flyout/header_with_close_button/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/flyout/header_with_close_button/index.tsx
rename to x-pack/plugins/siem/public/timelines/components/flyout/header_with_close_button/index.tsx
diff --git a/x-pack/plugins/siem/public/components/flyout/header_with_close_button/translations.ts b/x-pack/plugins/siem/public/timelines/components/flyout/header_with_close_button/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/flyout/header_with_close_button/translations.ts
rename to x-pack/plugins/siem/public/timelines/components/flyout/header_with_close_button/translations.ts
diff --git a/x-pack/plugins/siem/public/timelines/components/flyout/index.test.tsx b/x-pack/plugins/siem/public/timelines/components/flyout/index.test.tsx
new file mode 100644
index 00000000000000..b73f2f943bb0ae
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/flyout/index.test.tsx
@@ -0,0 +1,267 @@
+/*
+ * 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 { mount, shallow } from 'enzyme';
+import { set } from 'lodash/fp';
+import React from 'react';
+import { ActionCreator } from 'typescript-fsa';
+
+import {
+  apolloClientObservable,
+  mockGlobalState,
+  TestProviders,
+  SUB_PLUGINS_REDUCER,
+} from '../../../common/mock';
+import { createStore, State } from '../../../common/store';
+import { mockDataProviders } from '../timeline/data_providers/mock/mock_data_providers';
+
+import { Flyout, FlyoutComponent } from '.';
+import { FlyoutButton } from './button';
+
+jest.mock('../timeline', () => ({
+  // eslint-disable-next-line react/display-name
+  StatefulTimeline: () => <div />,
+}));
+
+const testFlyoutHeight = 980;
+const usersViewing = ['elastic'];
+
+describe('Flyout', () => {
+  const state: State = mockGlobalState;
+
+  describe('rendering', () => {
+    test('it renders correctly against snapshot', () => {
+      const wrapper = shallow(
+        <TestProviders>
+          <Flyout flyoutHeight={testFlyoutHeight} timelineId="test" usersViewing={usersViewing} />
+        </TestProviders>
+      );
+      expect(wrapper.find('Flyout')).toMatchSnapshot();
+    });
+
+    test('it renders the default flyout state as a button', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <Flyout flyoutHeight={testFlyoutHeight} timelineId="test" usersViewing={usersViewing} />
+        </TestProviders>
+      );
+
+      expect(
+        wrapper
+          .find('[data-test-subj="flyout-button-not-ready-to-drop"]')
+          .first()
+          .text()
+      ).toContain('Timeline');
+    });
+
+    test('it does NOT render the fly out button when its state is set to flyout is true', () => {
+      const stateShowIsTrue = set('timeline.timelineById.test.show', true, state);
+      const storeShowIsTrue = createStore(
+        stateShowIsTrue,
+        SUB_PLUGINS_REDUCER,
+        apolloClientObservable
+      );
+
+      const wrapper = mount(
+        <TestProviders store={storeShowIsTrue}>
+          <Flyout flyoutHeight={testFlyoutHeight} timelineId="test" usersViewing={usersViewing} />
+        </TestProviders>
+      );
+
+      expect(wrapper.find('[data-test-subj="flyout-button-not-ready-to-drop"]').exists()).toEqual(
+        false
+      );
+    });
+
+    test('it does render the data providers badge when the number is greater than 0', () => {
+      const stateWithDataProviders = set(
+        'timeline.timelineById.test.dataProviders',
+        mockDataProviders,
+        state
+      );
+      const storeWithDataProviders = createStore(
+        stateWithDataProviders,
+        SUB_PLUGINS_REDUCER,
+        apolloClientObservable
+      );
+
+      const wrapper = mount(
+        <TestProviders store={storeWithDataProviders}>
+          <Flyout flyoutHeight={testFlyoutHeight} timelineId="test" usersViewing={usersViewing} />
+        </TestProviders>
+      );
+
+      expect(wrapper.find('[data-test-subj="badge"]').exists()).toEqual(true);
+    });
+
+    test('it renders the correct number of data providers badge when the number is greater than 0', () => {
+      const stateWithDataProviders = set(
+        'timeline.timelineById.test.dataProviders',
+        mockDataProviders,
+        state
+      );
+      const storeWithDataProviders = createStore(
+        stateWithDataProviders,
+        SUB_PLUGINS_REDUCER,
+        apolloClientObservable
+      );
+
+      const wrapper = mount(
+        <TestProviders store={storeWithDataProviders}>
+          <Flyout flyoutHeight={testFlyoutHeight} timelineId="test" usersViewing={usersViewing} />
+        </TestProviders>
+      );
+
+      expect(
+        wrapper
+          .find('[data-test-subj="badge"]')
+          .first()
+          .text()
+      ).toContain('10');
+    });
+
+    test('it hides the data providers badge when the timeline does NOT have data providers', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <Flyout flyoutHeight={testFlyoutHeight} timelineId="test" usersViewing={usersViewing} />
+        </TestProviders>
+      );
+
+      expect(
+        wrapper
+          .find('[data-test-subj="badge"]')
+          .first()
+          .props().style!.visibility
+      ).toEqual('hidden');
+    });
+
+    test('it does NOT hide the data providers badge when the timeline has data providers', () => {
+      const stateWithDataProviders = set(
+        'timeline.timelineById.test.dataProviders',
+        mockDataProviders,
+        state
+      );
+      const storeWithDataProviders = createStore(
+        stateWithDataProviders,
+        SUB_PLUGINS_REDUCER,
+        apolloClientObservable
+      );
+
+      const wrapper = mount(
+        <TestProviders store={storeWithDataProviders}>
+          <Flyout flyoutHeight={testFlyoutHeight} timelineId="test" usersViewing={usersViewing} />
+        </TestProviders>
+      );
+
+      expect(
+        wrapper
+          .find('[data-test-subj="badge"]')
+          .first()
+          .props().style!.visibility
+      ).toEqual('inherit');
+    });
+
+    test('should call the onOpen when the mouse is clicked for rendering', () => {
+      const showTimeline = (jest.fn() as unknown) as ActionCreator<{ id: string; show: boolean }>;
+      const wrapper = mount(
+        <TestProviders>
+          <FlyoutComponent
+            dataProviders={mockDataProviders}
+            flyoutHeight={testFlyoutHeight}
+            show={false}
+            showTimeline={showTimeline}
+            timelineId="test"
+            width={100}
+            usersViewing={usersViewing}
+          />
+        </TestProviders>
+      );
+
+      wrapper
+        .find('[data-test-subj="flyoutOverlay"]')
+        .first()
+        .simulate('click');
+
+      expect(showTimeline).toBeCalled();
+    });
+  });
+
+  describe('showFlyoutButton', () => {
+    test('should show the flyout button when show is true', () => {
+      const openMock = jest.fn();
+      const wrapper = mount(
+        <TestProviders>
+          <FlyoutButton
+            dataProviders={mockDataProviders}
+            show={true}
+            timelineId="test"
+            onOpen={openMock}
+          />
+        </TestProviders>
+      );
+      expect(wrapper.find('[data-test-subj="flyout-button-not-ready-to-drop"]').exists()).toEqual(
+        true
+      );
+    });
+
+    test('should NOT show the flyout button when show is false', () => {
+      const openMock = jest.fn();
+      const wrapper = mount(
+        <TestProviders>
+          <FlyoutButton
+            dataProviders={mockDataProviders}
+            show={false}
+            timelineId="test"
+            onOpen={openMock}
+          />
+        </TestProviders>
+      );
+      expect(wrapper.find('[data-test-subj="flyout-button-not-ready-to-drop"]').exists()).toEqual(
+        false
+      );
+    });
+
+    test('should return the flyout button with text', () => {
+      const openMock = jest.fn();
+      const wrapper = mount(
+        <TestProviders>
+          <FlyoutButton
+            dataProviders={mockDataProviders}
+            show={true}
+            timelineId="test"
+            onOpen={openMock}
+          />
+        </TestProviders>
+      );
+      expect(
+        wrapper
+          .find('[data-test-subj="flyout-button-not-ready-to-drop"]')
+          .first()
+          .text()
+      ).toContain('Timeline');
+    });
+
+    test('should call the onOpen when it is clicked', () => {
+      const openMock = jest.fn();
+      const wrapper = mount(
+        <TestProviders>
+          <FlyoutButton
+            dataProviders={mockDataProviders}
+            show={true}
+            timelineId="test"
+            onOpen={openMock}
+          />
+        </TestProviders>
+      );
+      wrapper
+        .find('[data-test-subj="flyoutOverlay"]')
+        .first()
+        .simulate('click');
+
+      expect(openMock).toBeCalled();
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/timelines/components/flyout/index.tsx b/x-pack/plugins/siem/public/timelines/components/flyout/index.tsx
new file mode 100644
index 00000000000000..c556c2d53f7c26
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/flyout/index.tsx
@@ -0,0 +1,111 @@
+/*
+ * 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 { EuiBadge } from '@elastic/eui';
+import React, { useCallback } from 'react';
+import { connect, ConnectedProps } from 'react-redux';
+import styled from 'styled-components';
+
+import { State } from '../../../common/store';
+import { DataProvider } from '../timeline/data_providers/data_provider';
+import { FlyoutButton } from './button';
+import { Pane } from './pane';
+import { timelineActions, timelineSelectors } from '../../store/timeline';
+import { DEFAULT_TIMELINE_WIDTH } from '../timeline/body/constants';
+import { StatefulTimeline } from '../timeline';
+import { TimelineById } from '../../store/timeline/types';
+
+export const Badge = (styled(EuiBadge)`
+  position: absolute;
+  padding-left: 4px;
+  padding-right: 4px;
+  right: 0%;
+  top: 0%;
+  border-bottom-left-radius: 5px;
+` as unknown) as typeof EuiBadge;
+
+Badge.displayName = 'Badge';
+
+const Visible = styled.div<{ show?: boolean }>`
+  visibility: ${({ show }) => (show ? 'visible' : 'hidden')};
+`;
+
+Visible.displayName = 'Visible';
+
+interface OwnProps {
+  flyoutHeight: number;
+  timelineId: string;
+  usersViewing: string[];
+}
+
+type Props = OwnProps & ProsFromRedux;
+
+export const FlyoutComponent = React.memo<Props>(
+  ({ dataProviders, flyoutHeight, show, showTimeline, timelineId, usersViewing, width }) => {
+    const handleClose = useCallback(() => showTimeline({ id: timelineId, show: false }), [
+      showTimeline,
+      timelineId,
+    ]);
+    const handleOpen = useCallback(() => showTimeline({ id: timelineId, show: true }), [
+      showTimeline,
+      timelineId,
+    ]);
+
+    return (
+      <>
+        <Visible show={show}>
+          <Pane
+            flyoutHeight={flyoutHeight}
+            onClose={handleClose}
+            timelineId={timelineId}
+            width={width}
+          >
+            <StatefulTimeline onClose={handleClose} usersViewing={usersViewing} id={timelineId} />
+          </Pane>
+        </Visible>
+        <FlyoutButton
+          dataProviders={dataProviders}
+          show={!show}
+          timelineId={timelineId}
+          onOpen={handleOpen}
+        />
+      </>
+    );
+  }
+);
+
+FlyoutComponent.displayName = 'FlyoutComponent';
+
+const DEFAULT_DATA_PROVIDERS: DataProvider[] = [];
+const DEFAULT_TIMELINE_BY_ID = {};
+
+const mapStateToProps = (state: State, { timelineId }: OwnProps) => {
+  const timelineById: TimelineById =
+    timelineSelectors.timelineByIdSelector(state) ?? DEFAULT_TIMELINE_BY_ID;
+  /*
+    In case timelineById[timelineId]?.dataProviders is an empty array it will cause unnecessary rerender
+    of StatefulTimeline which can be expensive, so to avoid that return DEFAULT_DATA_PROVIDERS
+  */
+  const dataProviders = timelineById[timelineId]?.dataProviders.length
+    ? timelineById[timelineId]?.dataProviders
+    : DEFAULT_DATA_PROVIDERS;
+  const show = timelineById[timelineId]?.show ?? false;
+  const width = timelineById[timelineId]?.width ?? DEFAULT_TIMELINE_WIDTH;
+
+  return { dataProviders, show, width };
+};
+
+const mapDispatchToProps = {
+  showTimeline: timelineActions.showTimeline,
+};
+
+const connector = connect(mapStateToProps, mapDispatchToProps);
+
+type ProsFromRedux = ConnectedProps<typeof connector>;
+
+export const Flyout = connector(FlyoutComponent);
+
+Flyout.displayName = 'Flyout';
diff --git a/x-pack/plugins/siem/public/components/flyout/pane/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/flyout/pane/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/flyout/pane/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/flyout/pane/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/timelines/components/flyout/pane/index.test.tsx b/x-pack/plugins/siem/public/timelines/components/flyout/pane/index.test.tsx
new file mode 100644
index 00000000000000..29606d7685d977
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/flyout/pane/index.test.tsx
@@ -0,0 +1,87 @@
+/*
+ * 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 { mount, shallow } from 'enzyme';
+import React from 'react';
+
+import { TestProviders } from '../../../../common/mock';
+import { Pane } from '.';
+
+const testFlyoutHeight = 980;
+const testWidth = 640;
+
+describe('Pane', () => {
+  test('renders correctly against snapshot', () => {
+    const EmptyComponent = shallow(
+      <TestProviders>
+        <Pane
+          flyoutHeight={testFlyoutHeight}
+          onClose={jest.fn()}
+          timelineId={'test'}
+          width={testWidth}
+        >
+          <span>{'I am a child of flyout'}</span>
+        </Pane>
+      </TestProviders>
+    );
+    expect(EmptyComponent.find('Pane')).toMatchSnapshot();
+  });
+
+  test('it should NOT let the flyout expand to take up the full width of the element that contains it', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <Pane
+          flyoutHeight={testFlyoutHeight}
+          onClose={jest.fn()}
+          timelineId={'test'}
+          width={testWidth}
+        >
+          <span>{'I am a child of flyout'}</span>
+        </Pane>
+      </TestProviders>
+    );
+
+    expect(wrapper.find('Resizable').get(0).props.maxWidth).toEqual('95vw');
+  });
+
+  test('it should render a resize handle', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <Pane
+          flyoutHeight={testFlyoutHeight}
+          onClose={jest.fn()}
+          timelineId={'test'}
+          width={testWidth}
+        >
+          <span>{'I am a child of flyout'}</span>
+        </Pane>
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="flyout-resize-handle"]')
+        .first()
+        .exists()
+    ).toEqual(true);
+  });
+
+  test('it should render children', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <Pane
+          flyoutHeight={testFlyoutHeight}
+          onClose={jest.fn()}
+          timelineId={'test'}
+          width={testWidth}
+        >
+          <span>{'I am a mock body'}</span>
+        </Pane>
+      </TestProviders>
+    );
+    expect(wrapper.first().text()).toContain('I am a mock body');
+  });
+});
diff --git a/x-pack/plugins/siem/public/timelines/components/flyout/pane/index.tsx b/x-pack/plugins/siem/public/timelines/components/flyout/pane/index.tsx
new file mode 100644
index 00000000000000..33aca80b940fe3
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/flyout/pane/index.tsx
@@ -0,0 +1,111 @@
+/*
+ * 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 { EuiFlyout } from '@elastic/eui';
+import React, { useCallback, useMemo } from 'react';
+import { useDispatch } from 'react-redux';
+import styled from 'styled-components';
+import { Resizable, ResizeCallback } from 're-resizable';
+
+import { TimelineResizeHandle } from './timeline_resize_handle';
+import { EventDetailsWidthProvider } from '../../../../common/components/events_viewer/event_details_width_context';
+
+import * as i18n from './translations';
+import { timelineActions } from '../../../store/timeline';
+
+const minWidthPixels = 550; // do not allow the flyout to shrink below this width (pixels)
+const maxWidthPercent = 95; // do not allow the flyout to grow past this percentage of the view
+interface FlyoutPaneComponentProps {
+  children: React.ReactNode;
+  flyoutHeight: number;
+  onClose: () => void;
+  timelineId: string;
+  width: number;
+}
+
+const EuiFlyoutContainer = styled.div`
+  .timeline-flyout {
+    min-width: 150px;
+    width: auto;
+  }
+`;
+
+const StyledResizable = styled(Resizable)`
+  display: flex;
+  flex-direction: column;
+`;
+
+const RESIZABLE_ENABLE = { left: true };
+
+const FlyoutPaneComponent: React.FC<FlyoutPaneComponentProps> = ({
+  children,
+  flyoutHeight,
+  onClose,
+  timelineId,
+  width,
+}) => {
+  const dispatch = useDispatch();
+
+  const onResizeStop: ResizeCallback = useCallback(
+    (e, direction, ref, delta) => {
+      const bodyClientWidthPixels = document.body.clientWidth;
+
+      if (delta.width) {
+        dispatch(
+          timelineActions.applyDeltaToWidth({
+            bodyClientWidthPixels,
+            delta: -delta.width,
+            id: timelineId,
+            maxWidthPercent,
+            minWidthPixels,
+          })
+        );
+      }
+    },
+    [dispatch]
+  );
+  const resizableDefaultSize = useMemo(
+    () => ({
+      width,
+      height: '100%',
+    }),
+    []
+  );
+  const resizableHandleComponent = useMemo(
+    () => ({
+      left: <TimelineResizeHandle data-test-subj="flyout-resize-handle" height={flyoutHeight} />,
+    }),
+    [flyoutHeight]
+  );
+
+  return (
+    <EuiFlyoutContainer data-test-subj="flyout-pane">
+      <EuiFlyout
+        aria-label={i18n.TIMELINE_DESCRIPTION}
+        className="timeline-flyout"
+        data-test-subj="eui-flyout"
+        hideCloseButton={true}
+        onClose={onClose}
+        size="l"
+      >
+        <StyledResizable
+          enable={RESIZABLE_ENABLE}
+          defaultSize={resizableDefaultSize}
+          minWidth={minWidthPixels}
+          maxWidth={`${maxWidthPercent}vw`}
+          handleComponent={resizableHandleComponent}
+          onResizeStop={onResizeStop}
+        >
+          <EventDetailsWidthProvider>{children}</EventDetailsWidthProvider>
+        </StyledResizable>
+      </EuiFlyout>
+    </EuiFlyoutContainer>
+  );
+};
+
+export const Pane = React.memo(FlyoutPaneComponent);
+
+Pane.displayName = 'Pane';
diff --git a/x-pack/plugins/siem/public/components/flyout/pane/timeline_resize_handle.tsx b/x-pack/plugins/siem/public/timelines/components/flyout/pane/timeline_resize_handle.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/flyout/pane/timeline_resize_handle.tsx
rename to x-pack/plugins/siem/public/timelines/components/flyout/pane/timeline_resize_handle.tsx
diff --git a/x-pack/plugins/siem/public/components/flyout/pane/translations.ts b/x-pack/plugins/siem/public/timelines/components/flyout/pane/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/flyout/pane/translations.ts
rename to x-pack/plugins/siem/public/timelines/components/flyout/pane/translations.ts
diff --git a/x-pack/plugins/siem/public/timelines/components/formatted_duration/helpers.test.ts b/x-pack/plugins/siem/public/timelines/components/formatted_duration/helpers.test.ts
new file mode 100644
index 00000000000000..dcf77f06defe3e
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/formatted_duration/helpers.test.ts
@@ -0,0 +1,401 @@
+/*
+ * 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 { getEmptyValue } from '../../../common/components/empty_value';
+import {
+  getFormattedDurationString,
+  getHumanizedDuration,
+  ONE_DAY,
+  ONE_HOUR,
+  ONE_MILLISECOND_AS_NANOSECONDS,
+  ONE_MINUTE,
+  ONE_MONTH,
+  ONE_SECOND,
+  ONE_YEAR,
+} from './helpers';
+import * as i18n from './translations';
+
+describe('FormattedDurationHelpers', () => {
+  describe('#getFormattedDurationString', () => {
+    test('it returns a placeholder when the input is undefined', () => {
+      expect(getFormattedDurationString(undefined)).toEqual(getEmptyValue());
+    });
+
+    test('it returns a placeholder when the input is null', () => {
+      expect(getFormattedDurationString(null)).toEqual(getEmptyValue());
+    });
+
+    test('it echos back the input as a string when the input is not a number', () => {
+      expect(getFormattedDurationString('invalid duration')).toEqual('invalid duration');
+    });
+
+    test('it returns the original input (with no formatting) when the input is negative', () => {
+      expect(getFormattedDurationString(-1)).toEqual('-1');
+    });
+
+    test('it returns the duration formatted as 0 nanoseconds when the input is 0 nanoseconds', () => {
+      expect(getFormattedDurationString(0)).toEqual('0ns');
+    });
+
+    test('it returns 1 nanosecond when the input is 1 nanosecond', () => {
+      expect(getFormattedDurationString(1)).toEqual('1ns');
+    });
+
+    test('it returns 1000 nanoseconds when the input is 1000 nanoseconds', () => {
+      expect(getFormattedDurationString(1000)).toEqual('1000ns');
+    });
+
+    test('it returns 1000 nanoseconds when the input is a string ("1000") instead of a number', () => {
+      expect(getFormattedDurationString('1000')).toEqual('1000ns');
+    });
+
+    test('it returns the largest value that would be represented as nanoseconds when the input is 1 millisecond - 1 nanosecond', () => {
+      expect(getFormattedDurationString(ONE_MILLISECOND_AS_NANOSECONDS - 1)).toEqual('999999ns');
+    });
+
+    test('it returns exactly 1 millisecond (with no fractional component) when the input is exactly one millisecond', () => {
+      expect(getFormattedDurationString(ONE_MILLISECOND_AS_NANOSECONDS)).toEqual('1ms');
+    });
+
+    test('it returns 1 millisecond with a fractional component when the input is 1 millisecond + 1 nanosecond', () => {
+      expect(getFormattedDurationString(ONE_MILLISECOND_AS_NANOSECONDS + 1)).toEqual('1.000001ms');
+    });
+
+    test('it returns the largest value (in milliseconds) that would be represented as milliseconds with a fractional component when the input is 1 second - 1 nanosecond', () => {
+      expect(getFormattedDurationString(ONE_SECOND * ONE_MILLISECOND_AS_NANOSECONDS - 1)).toEqual(
+        '999.999999ms'
+      );
+    });
+
+    test('it returns exactly one second (with no millisecond component) when the input is exactly one second', () => {
+      expect(getFormattedDurationString(ONE_SECOND * ONE_MILLISECOND_AS_NANOSECONDS)).toEqual('1s');
+    });
+
+    test('it returns one second with fractional milliseconds when the input is one second + 1 nanosecond', () => {
+      expect(getFormattedDurationString(ONE_SECOND * ONE_MILLISECOND_AS_NANOSECONDS + 1)).toEqual(
+        '1s 0.000001ms'
+      );
+    });
+
+    test('it returns one second with fractional milliseconds when the input is 1 second + 1 millisecond - 1 nanosecond', () => {
+      expect(
+        getFormattedDurationString(
+          ONE_SECOND * ONE_MILLISECOND_AS_NANOSECONDS + ONE_MILLISECOND_AS_NANOSECONDS - 1
+        )
+      ).toEqual('1s 0.999999ms');
+    });
+
+    test('it returns 1 second, 1 non-fractional millisecond when the input is 1 second + 1 millisecond', () => {
+      expect(
+        getFormattedDurationString(
+          ONE_SECOND * ONE_MILLISECOND_AS_NANOSECONDS + ONE_MILLISECOND_AS_NANOSECONDS
+        )
+      ).toEqual('1s 1ms');
+    });
+
+    test('it returns 1 seconds with fractional milliseconds when the input is 1 second + 1 millisecond + 1 nanosecond', () => {
+      expect(
+        getFormattedDurationString(
+          ONE_SECOND * ONE_MILLISECOND_AS_NANOSECONDS + ONE_MILLISECOND_AS_NANOSECONDS + 1
+        )
+      ).toEqual('1s 1.000001ms');
+    });
+
+    test('it returns 1 seconds with fractional milliseconds when the input is 1 second + 2 milliseconds - 1 nanosecond', () => {
+      expect(
+        getFormattedDurationString(
+          ONE_SECOND * ONE_MILLISECOND_AS_NANOSECONDS + 2 * ONE_MILLISECOND_AS_NANOSECONDS - 1
+        )
+      ).toEqual('1s 1.999999ms');
+    });
+
+    test('it returns 59 seconds with fractional milliseconds when the input is 1 minute - 1 nanosecond', () => {
+      expect(getFormattedDurationString(ONE_MINUTE * ONE_MILLISECOND_AS_NANOSECONDS - 1)).toEqual(
+        '59s 999.999999ms'
+      );
+    });
+
+    test('it returns 1 minute with 0 non-fractional seconds (and no milliseconds) when the input is exactly 1 minute', () => {
+      expect(getFormattedDurationString(ONE_MINUTE * ONE_MILLISECOND_AS_NANOSECONDS)).toEqual(
+        '1m 0s'
+      );
+    });
+
+    test('it returns 1 minute, 0 seconds, and fractional milliseconds when the input is 1 minute + 1 nanosecond', () => {
+      expect(getFormattedDurationString(ONE_MINUTE * ONE_MILLISECOND_AS_NANOSECONDS + 1)).toEqual(
+        '1m 0s 0.000001ms'
+      );
+    });
+
+    test('it returns the duration formatted as 1 minute, 59 seconds and fractional milliseconds when the input is 2 minutes - 1 nanosecond', () => {
+      expect(
+        getFormattedDurationString(2 * ONE_MINUTE * ONE_MILLISECOND_AS_NANOSECONDS - 1)
+      ).toEqual('1m 59s 999.999999ms');
+    });
+
+    test('it returns the duration formatted as 59 minutes, 59 seconds and fractional milliseconds when the input is one hour - 1 nanosecond', () => {
+      expect(getFormattedDurationString(ONE_HOUR * ONE_MILLISECOND_AS_NANOSECONDS - 1)).toEqual(
+        '59m 59s 999.999999ms'
+      );
+    });
+
+    test('it returns the duration formatted as 1 hour, 0 minutes, 0 seconds, (and no milliseconds) when the duration is exactly one hour', () => {
+      expect(getFormattedDurationString(ONE_HOUR * ONE_MILLISECOND_AS_NANOSECONDS)).toEqual(
+        '1h 0m 0s'
+      );
+    });
+
+    test('it returns the duration formatted as 1 hour, 0 minutes and seconds, and fractional milliseconds when the duration is exactly 1 hour + 1 nanosecond', () => {
+      expect(getFormattedDurationString(ONE_HOUR * ONE_MILLISECOND_AS_NANOSECONDS + 1)).toEqual(
+        '1h 0m 0s 0.000001ms'
+      );
+    });
+
+    test('it returns the duration formatted as 23 hours, 59 minutes, 59 seconds, and fractional milliseconds when the duration is one day - 1 nanosecond', () => {
+      expect(getFormattedDurationString(ONE_DAY * ONE_MILLISECOND_AS_NANOSECONDS - 1)).toEqual(
+        '23h 59m 59s 999.999999ms'
+      );
+    });
+
+    test('it returns the duration formatted as 1 day, 0 hours, 0 minutes, and 0 seconds, (and no milliseconds) when the duration is exactly one day', () => {
+      expect(getFormattedDurationString(ONE_DAY * ONE_MILLISECOND_AS_NANOSECONDS)).toEqual(
+        '1d 0h 0m 0s'
+      );
+    });
+
+    test('it returns the duration formatted as one day, with zero hours, minutes, seconds, and fractional milliseconds when the duration is one day + 1 nanosecond', () => {
+      expect(getFormattedDurationString(ONE_DAY * ONE_MILLISECOND_AS_NANOSECONDS + 1)).toEqual(
+        '1d 0h 0m 0s 0.000001ms'
+      );
+    });
+
+    test('it returns the duration formatted as 29 days, 23 hours, 59 minutes, 59 seconds, and with fractional milliseconds when the duration is one month - 1 nanosecond', () => {
+      expect(getFormattedDurationString(ONE_MONTH * ONE_MILLISECOND_AS_NANOSECONDS - 1)).toEqual(
+        '29d 23h 59m 59s 999.999999ms'
+      );
+    });
+
+    test('it returns 30 days, zero hours, minutes, seconds, (and no millieconds) when the duration is exactly one month, as is the current behavior of moment', () => {
+      expect(getFormattedDurationString(ONE_MONTH * ONE_MILLISECOND_AS_NANOSECONDS)).toEqual(
+        '30d 0h 0m 0s' // see https://github.com/moment/moment/issues/3653
+      );
+    });
+
+    test('it returns the duration as 29 days, 23 hours, 59 minutes, 59 seconds, and fractional milliseconds when the duration is 1 month - 1 nanosecond', () => {
+      expect(getFormattedDurationString(ONE_MONTH * ONE_MILLISECOND_AS_NANOSECONDS - 1)).toEqual(
+        '29d 23h 59m 59s 999.999999ms' // see https://github.com/moment/moment/issues/3653
+      );
+    });
+
+    test('it returns 1 month, zero days, hours, minutes, seconds (and no milliseconds) month when the duration is exactly 1 month + 1 day, as is the current behavior of moment', () => {
+      expect(
+        getFormattedDurationString((ONE_MONTH + ONE_DAY) * ONE_MILLISECOND_AS_NANOSECONDS)
+      ).toEqual(
+        '1m 0d 0h 0m 0s' // see https://github.com/moment/moment/issues/3653
+      );
+    });
+
+    test('it returns the 1 month with 0 days, hours, minutes, seconds, and fractional milliseconds when the duration is exactly 1 month + 1 day + 1 nanosecond, ', () => {
+      expect(
+        getFormattedDurationString((ONE_MONTH + ONE_DAY) * ONE_MILLISECOND_AS_NANOSECONDS + 1)
+      ).toEqual(
+        '1m 0d 0h 0m 0s 0.000001ms' // see https://github.com/moment/moment/issues/3653
+      );
+    });
+
+    test('it returns 11 months, 30 days (with 0 hours, minutes, and non-fractional seconds) when the duration is exactly one year, as is the current behavior of moment', () => {
+      expect(getFormattedDurationString(ONE_YEAR * ONE_MILLISECOND_AS_NANOSECONDS)).toEqual(
+        '11m 30d 0h 0m 0s' // see https://github.com/moment/moment/issues/3209
+      );
+    });
+
+    test('it returns one year when the duration is exactly 1 year + 1 day, as is the current behavior of moment', () => {
+      expect(
+        getFormattedDurationString((ONE_YEAR + ONE_DAY) * ONE_MILLISECOND_AS_NANOSECONDS)
+      ).toEqual(
+        '1y 0m 0d 0h 0m 0s' // see https://github.com/moment/moment/issues/3209
+      );
+    });
+
+    test('it returns less than 6 months when input is 1 year + 6 months, as is the current behavior of moment', () => {
+      expect(
+        getFormattedDurationString((ONE_YEAR + 6 * ONE_MONTH) * ONE_MILLISECOND_AS_NANOSECONDS)
+      ).toEqual('1y 5m 27d 0h 0m 0s'); // see https://github.com/moment/moment/issues/3209
+    });
+  });
+
+  describe('#getHumanizedDuration', () => {
+    test('it returns "no duration" when the input is undefined', () => {
+      expect(getHumanizedDuration(undefined)).toEqual(i18n.NO_DURATION);
+    });
+
+    test('it returns "no duration" when the input is null', () => {
+      expect(getHumanizedDuration(null)).toEqual(i18n.NO_DURATION);
+    });
+
+    test('it returns "invalid duration" when the input is not a number', () => {
+      expect(getHumanizedDuration('an invalid duration')).toEqual(i18n.INVALID_DURATION);
+    });
+
+    test('it returns the original "invalid duration" when the input is negative', () => {
+      expect(getHumanizedDuration(-1)).toEqual(i18n.INVALID_DURATION);
+    });
+
+    test('it returns "zero nanoseconds" when the input is 0 nanoseconds', () => {
+      expect(getHumanizedDuration(0)).toEqual(i18n.ZERO_NANOSECONDS);
+    });
+
+    test('it returns "a nanosecond" nanosecond when the input is 1 nanosecond', () => {
+      expect(getHumanizedDuration(1)).toEqual(i18n.A_NANOSECOND);
+    });
+
+    test('it returns "a few nanoseconds" when the input is 1000 nanoseconds', () => {
+      expect(getHumanizedDuration(1000)).toEqual(i18n.A_FEW_NANOSECONDS);
+    });
+
+    test('it returns 1000 nanoseconds when the input is a string ("1000") instead of a number', () => {
+      expect(getHumanizedDuration('1000')).toEqual(i18n.A_FEW_NANOSECONDS);
+    });
+
+    test('it returns "a few nanoseconds" given the largest value that would be represented as nanoseconds', () => {
+      expect(getHumanizedDuration(ONE_MILLISECOND_AS_NANOSECONDS - 1)).toEqual(
+        i18n.A_FEW_NANOSECONDS
+      );
+    });
+
+    test('it returns "a millisecond" when the input is exactly one millisecond', () => {
+      expect(getHumanizedDuration(ONE_MILLISECOND_AS_NANOSECONDS)).toEqual(i18n.A_MILLISECOND);
+    });
+
+    test('it returns "a few milliseconds" when the input is 1 millisecond + 1 nanosecond', () => {
+      expect(getHumanizedDuration(ONE_MILLISECOND_AS_NANOSECONDS + 1)).toEqual(
+        i18n.A_FEW_MILLISECONDS
+      );
+    });
+
+    test('it returns "a few milliseconds" when the input is the maximum value for milliseconds', () => {
+      expect(getHumanizedDuration(ONE_SECOND * ONE_MILLISECOND_AS_NANOSECONDS - 1)).toEqual(
+        i18n.A_FEW_MILLISECONDS
+      );
+    });
+
+    test('it returns "a second" when the input is exactly one second', () => {
+      expect(getHumanizedDuration(ONE_SECOND * ONE_MILLISECOND_AS_NANOSECONDS)).toEqual(
+        i18n.A_SECOND
+      );
+    });
+
+    test('it returns "a few seconds" when the input is one second + 1 nanosecond', () => {
+      expect(getHumanizedDuration(ONE_SECOND * ONE_MILLISECOND_AS_NANOSECONDS + 1)).toEqual(
+        'a few seconds' // <-- note for this and the rest of the tests in this 'describe', this value is coming from moment, which has it's own i18n
+      );
+    });
+
+    test('it rounds to "a minute" when the input is 45 seconds', () => {
+      expect(getHumanizedDuration(45 * ONE_SECOND * ONE_MILLISECOND_AS_NANOSECONDS)).toEqual(
+        'a minute' // <-- debatable, but thats' how moment describes this
+      );
+    });
+
+    test('it rounds to "a minute" when the input is 1 minute - 1 nanosecond', () => {
+      expect(getHumanizedDuration(ONE_MINUTE * ONE_MILLISECOND_AS_NANOSECONDS - 1)).toEqual(
+        'a minute'
+      );
+    });
+
+    test('it returns "a minute" when the input is exactly 1 minute', () => {
+      expect(getHumanizedDuration(ONE_MINUTE * ONE_MILLISECOND_AS_NANOSECONDS)).toEqual('a minute');
+    });
+
+    test('it rounds to "a minute" when the input is 1 minute + 1 nanosecond', () => {
+      expect(getHumanizedDuration(ONE_MINUTE * ONE_MILLISECOND_AS_NANOSECONDS + 1)).toEqual(
+        'a minute'
+      );
+    });
+
+    test('it rounds to "two minutes" when the input is 2 minutes - 1 nanosecond', () => {
+      expect(getHumanizedDuration(2 * ONE_MINUTE * ONE_MILLISECOND_AS_NANOSECONDS - 1)).toEqual(
+        '2 minutes'
+      );
+    });
+
+    test('it rounds to "an hour" when the input is one hour - 1 nanosecond', () => {
+      expect(getHumanizedDuration(ONE_HOUR * ONE_MILLISECOND_AS_NANOSECONDS - 1)).toEqual(
+        'an hour'
+      );
+    });
+
+    test('it returns "an hour" when the input is exactly one hour', () => {
+      expect(getHumanizedDuration(ONE_HOUR * ONE_MILLISECOND_AS_NANOSECONDS)).toEqual('an hour');
+    });
+
+    test('it rounds to "an hour" when the input 1 hour + 1 nanosecond', () => {
+      expect(getHumanizedDuration(ONE_HOUR * ONE_MILLISECOND_AS_NANOSECONDS + 1)).toEqual(
+        'an hour'
+      );
+    });
+
+    test('it returns "2 hours" when the input is exactly 2 hours', () => {
+      expect(getHumanizedDuration(2 * ONE_HOUR * ONE_MILLISECOND_AS_NANOSECONDS)).toEqual(
+        '2 hours'
+      );
+    });
+
+    test('it rounds to "a day" when the input is one day - 1 nanosecond', () => {
+      expect(getHumanizedDuration(ONE_DAY * ONE_MILLISECOND_AS_NANOSECONDS - 1)).toEqual('a day');
+    });
+
+    test('it returns "a day" when the input is exactly one day', () => {
+      expect(getHumanizedDuration(ONE_DAY * ONE_MILLISECOND_AS_NANOSECONDS)).toEqual('a day');
+    });
+
+    test('it rounds to "a day" when the input is one day + 1 nanosecond', () => {
+      expect(getHumanizedDuration(ONE_DAY * ONE_MILLISECOND_AS_NANOSECONDS + 1)).toEqual('a day');
+    });
+
+    test('it returns "2 days" when the input is exactly two days', () => {
+      expect(getHumanizedDuration(2 * ONE_DAY * ONE_MILLISECOND_AS_NANOSECONDS)).toEqual('2 days');
+    });
+
+    test('it rounds to "a month" when the input is one month - 1 nanosecond', () => {
+      expect(getHumanizedDuration(ONE_MONTH * ONE_MILLISECOND_AS_NANOSECONDS - 1)).toEqual(
+        'a month'
+      );
+    });
+
+    test('it returns "a month" when the input is exactly one month', () => {
+      expect(getHumanizedDuration(ONE_MONTH * ONE_MILLISECOND_AS_NANOSECONDS)).toEqual('a month');
+    });
+
+    test('it rounds to "a month" when the input is 1 month + 1 day', () => {
+      expect(getHumanizedDuration((ONE_MONTH + ONE_DAY) * ONE_MILLISECOND_AS_NANOSECONDS)).toEqual(
+        'a month'
+      );
+    });
+
+    test('it returns "2 months" when the input is 2 months', () => {
+      expect(getHumanizedDuration(2 * ONE_MONTH * ONE_MILLISECOND_AS_NANOSECONDS)).toEqual(
+        '2 months'
+      );
+    });
+
+    test('it returns "a year" when the input is exactly one year', () => {
+      expect(getHumanizedDuration(ONE_YEAR * ONE_MILLISECOND_AS_NANOSECONDS)).toEqual('a year');
+    });
+
+    test('it rounds down to "a year" when the input is 1 year + 6 months, as is the current behavior of moment', () => {
+      expect(
+        getHumanizedDuration((ONE_YEAR + 6 * ONE_MONTH) * ONE_MILLISECOND_AS_NANOSECONDS)
+      ).toEqual('a year'); // <-- as a user, you may not expect this
+    });
+
+    test('it returns "2 years" when the duration is exactly 2 years', () => {
+      expect(getHumanizedDuration(2 * ONE_YEAR * ONE_MILLISECOND_AS_NANOSECONDS)).toEqual(
+        '2 years'
+      );
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/timelines/components/formatted_duration/helpers.tsx b/x-pack/plugins/siem/public/timelines/components/formatted_duration/helpers.tsx
new file mode 100644
index 00000000000000..113ed70776034a
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/formatted_duration/helpers.tsx
@@ -0,0 +1,110 @@
+/*
+ * 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 moment from 'moment';
+
+import { getEmptyValue } from '../../../common/components/empty_value';
+
+import * as i18n from './translations';
+
+/** one millisecond (as nanoseconds) */
+export const ONE_MILLISECOND_AS_NANOSECONDS = 1000000;
+
+export const ONE_SECOND = 1000;
+export const ONE_MINUTE = 60000;
+export const ONE_HOUR = 3600000;
+export const ONE_DAY = 86400000; // ms
+export const ONE_MONTH = 2592000000; // ms
+export const ONE_YEAR = 31536000000; // ms
+
+const milliseconds = (duration: moment.Duration): string =>
+  Number.isInteger(duration.milliseconds())
+    ? `${duration.milliseconds()}ms`
+    : `${duration.milliseconds().toFixed(6)}ms`; // nanosecond precision
+const seconds = (duration: moment.Duration): string =>
+  `${duration.seconds().toFixed()}s${
+    duration.milliseconds() > 0 ? ` ${milliseconds(duration)}` : ''
+  }`;
+const minutes = (duration: moment.Duration): string =>
+  `${duration.minutes()}m ${seconds(duration)}`;
+const hours = (duration: moment.Duration): string => `${duration.hours()}h ${minutes(duration)}`;
+const days = (duration: moment.Duration): string => `${duration.days()}d ${hours(duration)}`;
+const months = (duration: moment.Duration): string =>
+  `${duration.years() > 0 || duration.months() > 0 ? `${duration.months()}m ` : ''}${days(
+    duration
+  )}`;
+const years = (duration: moment.Duration): string =>
+  `${duration.years() > 0 ? `${duration.years()}y ` : ''}${months(duration)}`;
+
+export const getFormattedDurationString = (
+  maybeDurationNanoseconds: string | number | object | undefined | null
+): string => {
+  const totalNanoseconds = Number(maybeDurationNanoseconds);
+
+  if (maybeDurationNanoseconds == null) {
+    return getEmptyValue();
+  }
+
+  if (Number.isNaN(totalNanoseconds) || totalNanoseconds < 0) {
+    return `${maybeDurationNanoseconds}`; // echo back the duration as a string
+  }
+
+  if (totalNanoseconds < ONE_MILLISECOND_AS_NANOSECONDS) {
+    return `${totalNanoseconds}ns`; // display the raw nanoseconds
+  }
+
+  const duration = moment.duration(totalNanoseconds / ONE_MILLISECOND_AS_NANOSECONDS);
+  const totalMs = duration.asMilliseconds();
+
+  if (totalMs < ONE_SECOND) {
+    return milliseconds(duration);
+  } else if (totalMs < ONE_MINUTE) {
+    return seconds(duration);
+  } else if (totalMs < ONE_HOUR) {
+    return minutes(duration);
+  } else if (totalMs < ONE_DAY) {
+    return hours(duration);
+  } else if (totalMs < ONE_MONTH) {
+    return days(duration);
+  } else if (totalMs < ONE_YEAR) {
+    return months(duration);
+  } else {
+    return years(duration);
+  }
+};
+
+export const getHumanizedDuration = (
+  maybeDurationNanoseconds: string | number | object | undefined | null
+): string => {
+  if (maybeDurationNanoseconds == null) {
+    return i18n.NO_DURATION;
+  }
+
+  const totalNanoseconds = Number(maybeDurationNanoseconds);
+
+  if (Number.isNaN(totalNanoseconds) || totalNanoseconds < 0) {
+    return i18n.INVALID_DURATION;
+  }
+
+  if (totalNanoseconds === 0) {
+    return i18n.ZERO_NANOSECONDS;
+  } else if (totalNanoseconds === 1) {
+    return i18n.A_NANOSECOND;
+  } else if (totalNanoseconds < ONE_MILLISECOND_AS_NANOSECONDS) {
+    return i18n.A_FEW_NANOSECONDS;
+  } else if (totalNanoseconds === ONE_MILLISECOND_AS_NANOSECONDS) {
+    return i18n.A_MILLISECOND;
+  }
+
+  const totalMs = totalNanoseconds / ONE_MILLISECOND_AS_NANOSECONDS;
+  if (totalMs < ONE_SECOND) {
+    return i18n.A_FEW_MILLISECONDS;
+  } else if (totalMs === ONE_SECOND) {
+    return i18n.A_SECOND;
+  } else {
+    return moment.duration(totalMs).humanize();
+  }
+};
diff --git a/x-pack/plugins/siem/public/components/formatted_duration/index.tsx b/x-pack/plugins/siem/public/timelines/components/formatted_duration/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/formatted_duration/index.tsx
rename to x-pack/plugins/siem/public/timelines/components/formatted_duration/index.tsx
diff --git a/x-pack/plugins/siem/public/components/formatted_duration/tooltip/index.tsx b/x-pack/plugins/siem/public/timelines/components/formatted_duration/tooltip/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/formatted_duration/tooltip/index.tsx
rename to x-pack/plugins/siem/public/timelines/components/formatted_duration/tooltip/index.tsx
diff --git a/x-pack/plugins/siem/public/components/formatted_duration/translations.ts b/x-pack/plugins/siem/public/timelines/components/formatted_duration/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/formatted_duration/translations.ts
rename to x-pack/plugins/siem/public/timelines/components/formatted_duration/translations.ts
diff --git a/x-pack/plugins/siem/public/timelines/components/formatted_ip/index.tsx b/x-pack/plugins/siem/public/timelines/components/formatted_ip/index.tsx
new file mode 100644
index 00000000000000..e3a722214d4723
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/formatted_ip/index.tsx
@@ -0,0 +1,184 @@
+/*
+ * 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 { isArray, isEmpty, isString, uniq } from 'lodash/fp';
+import React from 'react';
+
+import {
+  DragEffects,
+  DraggableWrapper,
+} from '../../../common/components/drag_and_drop/draggable_wrapper';
+import { escapeDataProviderId } from '../../../common/components/drag_and_drop/helpers';
+import { getOrEmptyTagFromValue } from '../../../common/components/empty_value';
+import { IPDetailsLink } from '../../../common/components/links';
+import { parseQueryValue } from '../../../timelines/components/timeline/body/renderers/parse_query_value';
+import {
+  DataProvider,
+  IS_OPERATOR,
+} from '../../../timelines/components/timeline/data_providers/data_provider';
+import { Provider } from '../../../timelines/components/timeline/data_providers/provider';
+
+const getUniqueId = ({
+  contextId,
+  eventId,
+  fieldName,
+  address,
+}: {
+  contextId: string;
+  eventId: string;
+  fieldName: string;
+  address: string | object | null | undefined;
+}) => `formatted-ip-data-provider-${contextId}-${fieldName}-${address}-${eventId}`;
+
+const tryStringify = (value: string | object | null | undefined): string => {
+  try {
+    return JSON.stringify(value);
+  } catch (_) {
+    return `${value}`;
+  }
+};
+
+const getDataProvider = ({
+  contextId,
+  eventId,
+  fieldName,
+  address,
+}: {
+  contextId: string;
+  eventId: string;
+  fieldName: string;
+  address: string | object | null | undefined;
+}): DataProvider => ({
+  enabled: true,
+  id: escapeDataProviderId(getUniqueId({ contextId, eventId, fieldName, address })),
+  name: `${fieldName}: ${parseQueryValue(address)}`,
+  queryMatch: {
+    field: fieldName,
+    value: parseQueryValue(address),
+    operator: IS_OPERATOR,
+  },
+  excluded: false,
+  kqlQuery: '',
+  and: [],
+});
+
+const NonDecoratedIpComponent: React.FC<{
+  contextId: string;
+  eventId: string;
+  fieldName: string;
+  truncate?: boolean;
+  value: string | object | null | undefined;
+}> = ({ contextId, eventId, fieldName, truncate, value }) => (
+  <DraggableWrapper
+    dataProvider={getDataProvider({ contextId, eventId, fieldName, address: value })}
+    key={`non-decorated-ip-draggable-wrapper-${getUniqueId({
+      contextId,
+      eventId,
+      fieldName,
+      address: value,
+    })}`}
+    render={(dataProvider, _, snapshot) =>
+      snapshot.isDragging ? (
+        <DragEffects>
+          <Provider dataProvider={dataProvider} />
+        </DragEffects>
+      ) : typeof value !== 'object' ? (
+        getOrEmptyTagFromValue(value)
+      ) : (
+        getOrEmptyTagFromValue(tryStringify(value))
+      )
+    }
+    truncate={truncate}
+  />
+);
+
+const NonDecoratedIp = React.memo(NonDecoratedIpComponent);
+
+const AddressLinksComponent: React.FC<{
+  addresses: string[];
+  contextId: string;
+  eventId: string;
+  fieldName: string;
+  truncate?: boolean;
+}> = ({ addresses, contextId, eventId, fieldName, truncate }) => (
+  <>
+    {uniq(addresses).map(address => (
+      <DraggableWrapper
+        dataProvider={getDataProvider({ contextId, eventId, fieldName, address })}
+        key={`address-links-draggable-wrapper-${getUniqueId({
+          contextId,
+          eventId,
+          fieldName,
+          address,
+        })}`}
+        render={(_, __, snapshot) =>
+          snapshot.isDragging ? (
+            <DragEffects>
+              <Provider
+                dataProvider={getDataProvider({ contextId, eventId, fieldName, address })}
+              />
+            </DragEffects>
+          ) : (
+            <IPDetailsLink data-test-sub="ip-details" ip={address} />
+          )
+        }
+        truncate={truncate}
+      />
+    ))}
+  </>
+);
+
+const AddressLinks = React.memo(AddressLinksComponent);
+
+const FormattedIpComponent: React.FC<{
+  contextId: string;
+  eventId: string;
+  fieldName: string;
+  truncate?: boolean;
+  value: string | object | null | undefined;
+}> = ({ contextId, eventId, fieldName, truncate, value }) => {
+  if (isString(value) && !isEmpty(value)) {
+    try {
+      const addresses = JSON.parse(value);
+      if (isArray(addresses)) {
+        return (
+          <AddressLinks
+            addresses={addresses}
+            contextId={contextId}
+            eventId={eventId}
+            fieldName={fieldName}
+            truncate={truncate}
+          />
+        );
+      }
+    } catch (_) {
+      // fall back to formatting it as a single link
+    }
+
+    // return a single draggable link
+    return (
+      <AddressLinks
+        addresses={[value]}
+        contextId={contextId}
+        eventId={eventId}
+        fieldName={fieldName}
+        truncate={truncate}
+      />
+    );
+  } else {
+    return (
+      <NonDecoratedIp
+        contextId={contextId}
+        eventId={eventId}
+        fieldName={fieldName}
+        truncate={truncate}
+        value={value}
+      />
+    );
+  }
+};
+
+export const FormattedIp = React.memo(FormattedIpComponent);
diff --git a/x-pack/plugins/siem/public/timelines/components/ja3_fingerprint/index.test.tsx b/x-pack/plugins/siem/public/timelines/components/ja3_fingerprint/index.test.tsx
new file mode 100644
index 00000000000000..4ca1e7cc1bad4a
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/ja3_fingerprint/index.test.tsx
@@ -0,0 +1,76 @@
+/*
+ * 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 { TestProviders } from '../../../common/mock';
+import { useMountAppended } from '../../../common/utils/use_mount_appended';
+
+import { Ja3Fingerprint } from '.';
+
+describe('Ja3Fingerprint', () => {
+  const mount = useMountAppended();
+
+  test('renders the expected label', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <Ja3Fingerprint
+          eventId="KzNOvGkBqd-n62SwSPa4"
+          contextId="test"
+          fieldName="tls.fingerprints.ja3.hash"
+          value="fff799d91b7c01ae3fe6787cfc895552"
+        />
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="ja3-fingerprint-label"]')
+        .first()
+        .text()
+    ).toEqual('ja3');
+  });
+
+  test('renders the fingerprint as text', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <Ja3Fingerprint
+          eventId="KzNOvGkBqd-n62SwSPa4"
+          contextId="test"
+          fieldName="tls.fingerprints.ja3.hash"
+          value="fff799d91b7c01ae3fe6787cfc895552"
+        />
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="ja3-fingerprint-link"]')
+        .first()
+        .text()
+    ).toEqual('fff799d91b7c01ae3fe6787cfc895552');
+  });
+
+  test('it renders a hyperlink to an external site to compare the fingerprint against a known set of signatures', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <Ja3Fingerprint
+          eventId="KzNOvGkBqd-n62SwSPa4"
+          contextId="test"
+          fieldName="tls.fingerprints.ja3.hash"
+          value="fff799d91b7c01ae3fe6787cfc895552"
+        />
+      </TestProviders>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="ja3-fingerprint-link"]')
+        .first()
+        .props().href
+    ).toEqual('https://sslbl.abuse.ch/ja3-fingerprints/fff799d91b7c01ae3fe6787cfc895552');
+  });
+});
diff --git a/x-pack/plugins/siem/public/timelines/components/ja3_fingerprint/index.tsx b/x-pack/plugins/siem/public/timelines/components/ja3_fingerprint/index.tsx
new file mode 100644
index 00000000000000..2bb4e7471eba88
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/ja3_fingerprint/index.tsx
@@ -0,0 +1,51 @@
+/*
+ * 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 styled from 'styled-components';
+
+import { DraggableBadge } from '../../../common/components/draggables';
+import { ExternalLinkIcon } from '../../../common/components/external_link_icon';
+import { Ja3FingerprintLink } from '../../../common/components/links';
+
+import * as i18n from './translations';
+
+export const JA3_HASH_FIELD_NAME = 'tls.fingerprints.ja3.hash';
+
+const Ja3FingerprintLabel = styled.span`
+  margin-right: 5px;
+`;
+
+Ja3FingerprintLabel.displayName = 'Ja3FingerprintLabel';
+
+/**
+ * Renders a ja3 fingerprint, which enables (some) clients and servers communicating
+ * using TLS traffic to be identified, which is possible because SSL
+ * negotiations happen in the clear
+ */
+export const Ja3Fingerprint = React.memo<{
+  eventId: string;
+  contextId: string;
+  fieldName: string;
+  value?: string | null;
+}>(({ contextId, eventId, fieldName, value }) => (
+  <DraggableBadge
+    contextId={contextId}
+    data-test-subj="ja3-hash"
+    eventId={eventId}
+    field={fieldName}
+    iconType="snowflake"
+    value={value}
+  >
+    <Ja3FingerprintLabel data-test-subj="ja3-fingerprint-label">
+      {i18n.JA3_FINGERPRINT_LABEL}
+    </Ja3FingerprintLabel>
+    <Ja3FingerprintLink data-test-subj="ja3-hash-link" ja3Fingerprint={value || ''} />
+    <ExternalLinkIcon />
+  </DraggableBadge>
+));
+
+Ja3Fingerprint.displayName = 'Ja3Fingerprint';
diff --git a/x-pack/plugins/siem/public/components/ja3_fingerprint/translations.ts b/x-pack/plugins/siem/public/timelines/components/ja3_fingerprint/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/ja3_fingerprint/translations.ts
rename to x-pack/plugins/siem/public/timelines/components/ja3_fingerprint/translations.ts
diff --git a/x-pack/plugins/siem/public/components/lazy_accordion/index.tsx b/x-pack/plugins/siem/public/timelines/components/lazy_accordion/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/lazy_accordion/index.tsx
rename to x-pack/plugins/siem/public/timelines/components/lazy_accordion/index.tsx
diff --git a/x-pack/plugins/siem/public/components/loading/index.tsx b/x-pack/plugins/siem/public/timelines/components/loading/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/loading/index.tsx
rename to x-pack/plugins/siem/public/timelines/components/loading/index.tsx
diff --git a/x-pack/plugins/siem/public/components/netflow/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/netflow/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/netflow/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/netflow/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/netflow/fingerprints/index.tsx b/x-pack/plugins/siem/public/timelines/components/netflow/fingerprints/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/netflow/fingerprints/index.tsx
rename to x-pack/plugins/siem/public/timelines/components/netflow/fingerprints/index.tsx
diff --git a/x-pack/plugins/siem/public/timelines/components/netflow/index.test.tsx b/x-pack/plugins/siem/public/timelines/components/netflow/index.test.tsx
new file mode 100644
index 00000000000000..0a6d2f8ab3178a
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/netflow/index.test.tsx
@@ -0,0 +1,537 @@
+/*
+ * 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 { get } from 'lodash/fp';
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { asArrayIfExists } from '../../../common/lib/helpers';
+import { getMockNetflowData } from '../../../common/mock';
+import { TestProviders } from '../../../common/mock/test_providers';
+import {
+  TLS_CLIENT_CERTIFICATE_FINGERPRINT_SHA1_FIELD_NAME,
+  TLS_SERVER_CERTIFICATE_FINGERPRINT_SHA1_FIELD_NAME,
+} from '../certificate_fingerprint';
+import { EVENT_DURATION_FIELD_NAME } from '../duration';
+import { ID_FIELD_NAME } from '../../../common/components/event_details/event_id';
+import { DESTINATION_IP_FIELD_NAME, SOURCE_IP_FIELD_NAME } from '../../../network/components/ip';
+import { JA3_HASH_FIELD_NAME } from '../ja3_fingerprint';
+import {
+  DESTINATION_PORT_FIELD_NAME,
+  SOURCE_PORT_FIELD_NAME,
+} from '../../../network/components/port';
+import {
+  DESTINATION_GEO_CITY_NAME_FIELD_NAME,
+  DESTINATION_GEO_CONTINENT_NAME_FIELD_NAME,
+  DESTINATION_GEO_COUNTRY_ISO_CODE_FIELD_NAME,
+  DESTINATION_GEO_COUNTRY_NAME_FIELD_NAME,
+  DESTINATION_GEO_REGION_NAME_FIELD_NAME,
+  SOURCE_GEO_CITY_NAME_FIELD_NAME,
+  SOURCE_GEO_CONTINENT_NAME_FIELD_NAME,
+  SOURCE_GEO_COUNTRY_ISO_CODE_FIELD_NAME,
+  SOURCE_GEO_COUNTRY_NAME_FIELD_NAME,
+  SOURCE_GEO_REGION_NAME_FIELD_NAME,
+} from '../../../network/components/source_destination/geo_fields';
+import {
+  DESTINATION_BYTES_FIELD_NAME,
+  DESTINATION_PACKETS_FIELD_NAME,
+  SOURCE_BYTES_FIELD_NAME,
+  SOURCE_PACKETS_FIELD_NAME,
+} from '../../../network/components/source_destination/source_destination_arrows';
+import * as i18n from '../timeline/body/renderers/translations';
+
+import { Netflow } from '.';
+import {
+  EVENT_END_FIELD_NAME,
+  EVENT_START_FIELD_NAME,
+} from './netflow_columns/duration_event_start_end';
+import { PROCESS_NAME_FIELD_NAME, USER_NAME_FIELD_NAME } from './netflow_columns/user_process';
+import {
+  NETWORK_BYTES_FIELD_NAME,
+  NETWORK_DIRECTION_FIELD_NAME,
+  NETWORK_COMMUNITY_ID_FIELD_NAME,
+  NETWORK_PACKETS_FIELD_NAME,
+  NETWORK_PROTOCOL_FIELD_NAME,
+  NETWORK_TRANSPORT_FIELD_NAME,
+} from '../../../network/components/source_destination/field_names';
+import { useMountAppended } from '../../../common/utils/use_mount_appended';
+
+const getNetflowInstance = () => (
+  <Netflow
+    contextId="test"
+    destinationBytes={asArrayIfExists(get(DESTINATION_BYTES_FIELD_NAME, getMockNetflowData()))}
+    destinationGeoContinentName={asArrayIfExists(
+      get(DESTINATION_GEO_CONTINENT_NAME_FIELD_NAME, getMockNetflowData())
+    )}
+    destinationGeoCountryName={asArrayIfExists(
+      get(DESTINATION_GEO_COUNTRY_NAME_FIELD_NAME, getMockNetflowData())
+    )}
+    destinationGeoCountryIsoCode={asArrayIfExists(
+      get(DESTINATION_GEO_COUNTRY_ISO_CODE_FIELD_NAME, getMockNetflowData())
+    )}
+    destinationGeoRegionName={asArrayIfExists(
+      get(DESTINATION_GEO_REGION_NAME_FIELD_NAME, getMockNetflowData())
+    )}
+    destinationGeoCityName={asArrayIfExists(
+      get(DESTINATION_GEO_CITY_NAME_FIELD_NAME, getMockNetflowData())
+    )}
+    destinationIp={asArrayIfExists(get(DESTINATION_IP_FIELD_NAME, getMockNetflowData()))}
+    destinationPackets={asArrayIfExists(get(DESTINATION_PACKETS_FIELD_NAME, getMockNetflowData()))}
+    destinationPort={asArrayIfExists(get(DESTINATION_PORT_FIELD_NAME, getMockNetflowData()))}
+    eventDuration={asArrayIfExists(get(EVENT_DURATION_FIELD_NAME, getMockNetflowData()))}
+    eventId={get(ID_FIELD_NAME, getMockNetflowData())}
+    eventEnd={asArrayIfExists(get(EVENT_END_FIELD_NAME, getMockNetflowData()))}
+    eventStart={asArrayIfExists(get(EVENT_START_FIELD_NAME, getMockNetflowData()))}
+    networkBytes={asArrayIfExists(get(NETWORK_BYTES_FIELD_NAME, getMockNetflowData()))}
+    networkCommunityId={asArrayIfExists(get(NETWORK_COMMUNITY_ID_FIELD_NAME, getMockNetflowData()))}
+    networkDirection={asArrayIfExists(get(NETWORK_DIRECTION_FIELD_NAME, getMockNetflowData()))}
+    networkPackets={asArrayIfExists(get(NETWORK_PACKETS_FIELD_NAME, getMockNetflowData()))}
+    networkProtocol={asArrayIfExists(get(NETWORK_PROTOCOL_FIELD_NAME, getMockNetflowData()))}
+    processName={asArrayIfExists(get(PROCESS_NAME_FIELD_NAME, getMockNetflowData()))}
+    sourceBytes={asArrayIfExists(get(SOURCE_BYTES_FIELD_NAME, getMockNetflowData()))}
+    sourceGeoContinentName={asArrayIfExists(
+      get(SOURCE_GEO_CONTINENT_NAME_FIELD_NAME, getMockNetflowData())
+    )}
+    sourceGeoCountryName={asArrayIfExists(
+      get(SOURCE_GEO_COUNTRY_NAME_FIELD_NAME, getMockNetflowData())
+    )}
+    sourceGeoCountryIsoCode={asArrayIfExists(
+      get(SOURCE_GEO_COUNTRY_ISO_CODE_FIELD_NAME, getMockNetflowData())
+    )}
+    sourceGeoRegionName={asArrayIfExists(
+      get(SOURCE_GEO_REGION_NAME_FIELD_NAME, getMockNetflowData())
+    )}
+    sourceGeoCityName={asArrayIfExists(get(SOURCE_GEO_CITY_NAME_FIELD_NAME, getMockNetflowData()))}
+    sourceIp={asArrayIfExists(get(SOURCE_IP_FIELD_NAME, getMockNetflowData()))}
+    sourcePackets={asArrayIfExists(get(SOURCE_PACKETS_FIELD_NAME, getMockNetflowData()))}
+    sourcePort={asArrayIfExists(get(SOURCE_PORT_FIELD_NAME, getMockNetflowData()))}
+    tlsClientCertificateFingerprintSha1={asArrayIfExists(
+      get(TLS_CLIENT_CERTIFICATE_FINGERPRINT_SHA1_FIELD_NAME, getMockNetflowData())
+    )}
+    tlsFingerprintsJa3Hash={asArrayIfExists(get(JA3_HASH_FIELD_NAME, getMockNetflowData()))}
+    tlsServerCertificateFingerprintSha1={asArrayIfExists(
+      get(TLS_SERVER_CERTIFICATE_FINGERPRINT_SHA1_FIELD_NAME, getMockNetflowData())
+    )}
+    transport={asArrayIfExists(get(NETWORK_TRANSPORT_FIELD_NAME, getMockNetflowData()))}
+    userName={asArrayIfExists(get(USER_NAME_FIELD_NAME, getMockNetflowData()))}
+  />
+);
+
+describe('Netflow', () => {
+  const mount = useMountAppended();
+
+  test('renders correctly against snapshot', () => {
+    const wrapper = shallow(getNetflowInstance());
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('it renders a destination label', () => {
+    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="destination-label"]')
+        .first()
+        .text()
+    ).toEqual(i18n.DESTINATION);
+  });
+
+  test('it renders destination.bytes', () => {
+    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="destination-bytes"]')
+        .first()
+        .text()
+    ).toEqual('40B');
+  });
+
+  test('it renders destination.geo.continent_name', () => {
+    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="destination.geo.continent_name"]')
+        .first()
+        .text()
+    ).toEqual('North America');
+  });
+
+  test('it renders destination.geo.country_name', () => {
+    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="destination.geo.country_name"]')
+        .first()
+        .text()
+    ).toEqual('United States');
+  });
+
+  test('it renders destination.geo.country_iso_code', () => {
+    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="destination.geo.country_iso_code"]')
+        .first()
+        .text()
+    ).toEqual('US');
+  });
+
+  test('it renders destination.geo.region_name', () => {
+    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="destination.geo.region_name"]')
+        .first()
+        .text()
+    ).toEqual('New York');
+  });
+
+  test('it renders destination.geo.city_name', () => {
+    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="destination.geo.city_name"]')
+        .first()
+        .text()
+    ).toEqual('New York');
+  });
+
+  test('it renders the destination ip and port, separated with a colon', () => {
+    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="destination-ip-and-port"]')
+        .first()
+        .text()
+    ).toEqual('10.1.2.3:80');
+  });
+
+  test('it renders destination.packets', () => {
+    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="destination-packets"]')
+        .first()
+        .text()
+    ).toEqual('1 pkts');
+  });
+
+  test('it hyperlinks links destination.port to an external service that describes the purpose of the port', () => {
+    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="destination-ip-and-port"]')
+        .find('[data-test-subj="port-or-service-name-link"]')
+        .first()
+        .props().href
+    ).toEqual(
+      'https://www.iana.org/assignments/service-names-port-numbers/service-names-port-numbers.xhtml?search=80'
+    );
+  });
+
+  test('it renders event.duration', () => {
+    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="event-duration"]')
+        .first()
+        .text()
+    ).toEqual('1ms');
+  });
+
+  test('it renders event.end', () => {
+    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="event-end"]')
+        .first()
+        .text().length
+    ).toBeGreaterThan(0); // the format of this date will depend on the user's locale and settings
+  });
+
+  test('it renders event.start', () => {
+    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="event-start"]')
+        .first()
+        .text().length
+    ).toBeGreaterThan(0); // the format of this date will depend on the user's locale and settings
+  });
+
+  test('it renders network.bytes', () => {
+    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="network-bytes"]')
+        .first()
+        .text()
+    ).toEqual('100B');
+  });
+
+  test('it renders network.community_id', () => {
+    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="network-community-id"]')
+        .first()
+        .text()
+    ).toEqual('we.live.in.a');
+  });
+
+  test('it renders network.direction', () => {
+    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="network-direction"]')
+        .first()
+        .text()
+    ).toEqual('outgoing');
+  });
+
+  test('it renders network.packets', () => {
+    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="network-packets"]')
+        .first()
+        .text()
+    ).toEqual('3 pkts');
+  });
+
+  test('it renders network.protocol', () => {
+    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="network-protocol"]')
+        .first()
+        .text()
+    ).toEqual('http');
+  });
+
+  test('it renders process.name', () => {
+    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="process-name"]')
+        .first()
+        .text()
+    ).toEqual('rat');
+  });
+
+  test('it renders a source label', () => {
+    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="source-label"]')
+        .first()
+        .text()
+    ).toEqual(i18n.SOURCE);
+  });
+
+  test('it renders source.bytes', () => {
+    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="source-bytes"]')
+        .first()
+        .text()
+    ).toEqual('60B');
+  });
+
+  test('it renders source.geo.continent_name', () => {
+    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="source.geo.continent_name"]')
+        .first()
+        .text()
+    ).toEqual('North America');
+  });
+
+  test('it renders source.geo.country_name', () => {
+    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="source.geo.country_name"]')
+        .first()
+        .text()
+    ).toEqual('United States');
+  });
+
+  test('it renders source.geo.country_iso_code', () => {
+    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="source.geo.country_iso_code"]')
+        .first()
+        .text()
+    ).toEqual('US');
+  });
+
+  test('it renders source.geo.region_name', () => {
+    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="source.geo.region_name"]')
+        .first()
+        .text()
+    ).toEqual('Georgia');
+  });
+
+  test('it renders source.geo.city_name', () => {
+    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="source.geo.city_name"]')
+        .first()
+        .text()
+    ).toEqual('Atlanta');
+  });
+
+  test('it renders the source ip and port, separated with a colon', () => {
+    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="source-ip-and-port"]')
+        .first()
+        .text()
+    ).toEqual('192.168.1.2:9987');
+  });
+
+  test('it renders source.packets', () => {
+    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="source-packets"]')
+        .first()
+        .text()
+    ).toEqual('2 pkts');
+  });
+
+  test('it hyperlinks tls.client_certificate.fingerprint.sha1 site to compare the fingerprint against a known set of signatures', () => {
+    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="client-certificate-fingerprint"]')
+        .find('[data-test-subj="certificate-fingerprint-link"]')
+        .first()
+        .props().href
+    ).toEqual(
+      'https://sslbl.abuse.ch/ssl-certificates/sha1/tls.client_certificate.fingerprint.sha1-value'
+    );
+  });
+
+  test('renders tls.client_certificate.fingerprint.sha1 text', () => {
+    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="client-certificate-fingerprint"]')
+        .find('[data-test-subj="certificate-fingerprint-link"]')
+        .first()
+        .text()
+    ).toEqual('tls.client_certificate.fingerprint.sha1-value');
+  });
+
+  test('it hyperlinks tls.fingerprints.ja3.hash site to compare the fingerprint against a known set of signatures', () => {
+    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="ja3-fingerprint-link"]')
+        .first()
+        .props().href
+    ).toEqual('https://sslbl.abuse.ch/ja3-fingerprints/tls.fingerprints.ja3.hash-value');
+  });
+
+  test('renders tls.fingerprints.ja3.hash text', () => {
+    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="ja3-fingerprint-link"]')
+        .first()
+        .text()
+    ).toEqual('tls.fingerprints.ja3.hash-value');
+  });
+
+  test('it hyperlinks tls.server_certificate.fingerprint.sha1 site to compare the fingerprint against a known set of signatures', () => {
+    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="server-certificate-fingerprint"]')
+        .find('[data-test-subj="certificate-fingerprint-link"]')
+        .first()
+        .props().href
+    ).toEqual(
+      'https://sslbl.abuse.ch/ssl-certificates/sha1/tls.server_certificate.fingerprint.sha1-value'
+    );
+  });
+
+  test('renders tls.server_certificate.fingerprint.sha1 text', () => {
+    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="server-certificate-fingerprint"]')
+        .find('[data-test-subj="certificate-fingerprint-link"]')
+        .first()
+        .text()
+    ).toEqual('tls.server_certificate.fingerprint.sha1-value');
+  });
+
+  test('it renders network.transport', () => {
+    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="network-transport"]')
+        .first()
+        .text()
+    ).toEqual('tcp');
+  });
+
+  test('it renders user.name', () => {
+    const wrapper = mount(<TestProviders>{getNetflowInstance()}</TestProviders>);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="user-name"]')
+        .first()
+        .text()
+    ).toEqual('first.last');
+  });
+});
diff --git a/x-pack/plugins/siem/public/components/netflow/index.tsx b/x-pack/plugins/siem/public/timelines/components/netflow/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/netflow/index.tsx
rename to x-pack/plugins/siem/public/timelines/components/netflow/index.tsx
diff --git a/x-pack/plugins/siem/public/components/netflow/netflow_columns/duration_event_start_end.tsx b/x-pack/plugins/siem/public/timelines/components/netflow/netflow_columns/duration_event_start_end.tsx
similarity index 95%
rename from x-pack/plugins/siem/public/components/netflow/netflow_columns/duration_event_start_end.tsx
rename to x-pack/plugins/siem/public/timelines/components/netflow/netflow_columns/duration_event_start_end.tsx
index 09fa5d9fe1596a..2fbd71e86f8ff9 100644
--- a/x-pack/plugins/siem/public/components/netflow/netflow_columns/duration_event_start_end.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/netflow/netflow_columns/duration_event_start_end.tsx
@@ -9,9 +9,9 @@ import { uniq } from 'lodash/fp';
 import React from 'react';
 import styled from 'styled-components';
 
-import { DefaultDraggable } from '../../draggables';
+import { DefaultDraggable } from '../../../../common/components/draggables';
 import { EVENT_DURATION_FIELD_NAME } from '../../duration';
-import { FormattedDate } from '../../formatted_date';
+import { FormattedDate } from '../../../../common/components/formatted_date';
 import { FormattedDuration } from '../../formatted_duration';
 
 export const EVENT_START_FIELD_NAME = 'event.start';
diff --git a/x-pack/plugins/siem/public/timelines/components/netflow/netflow_columns/index.tsx b/x-pack/plugins/siem/public/timelines/components/netflow/netflow_columns/index.tsx
new file mode 100644
index 00000000000000..78ba7ad92081d6
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/netflow/netflow_columns/index.tsx
@@ -0,0 +1,127 @@
+/*
+ * 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 { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import React from 'react';
+import styled from 'styled-components';
+
+import { SourceDestination } from '../../../../network/components/source_destination';
+
+import { DurationEventStartEnd } from './duration_event_start_end';
+import { NetflowColumnsProps } from './types';
+import { UserProcess } from './user_process';
+
+export const EVENT_START = 'event.start';
+export const EVENT_END = 'event.end';
+
+const EuiFlexItemMarginRight = styled(EuiFlexItem)`
+  margin-right: 10px;
+`;
+
+EuiFlexItemMarginRight.displayName = 'EuiFlexItemMarginRight';
+
+/**
+ * Renders columns of draggable badges that describe both Netflow data, or more
+ * generally, hosts interacting over a network connection. This component is
+ * consumed by the `Netflow` visualization / row renderer.
+ *
+ * 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 = React.memo<NetflowColumnsProps>(
+  ({
+    contextId,
+    destinationBytes,
+    destinationGeoContinentName,
+    destinationGeoCountryName,
+    destinationGeoCountryIsoCode,
+    destinationGeoRegionName,
+    destinationGeoCityName,
+    destinationIp,
+    destinationPackets,
+    destinationPort,
+    eventDuration,
+    eventId,
+    eventEnd,
+    eventStart,
+    networkBytes,
+    networkCommunityId,
+    networkDirection,
+    networkPackets,
+    networkProtocol,
+    processName,
+    sourceBytes,
+    sourceGeoContinentName,
+    sourceGeoCountryName,
+    sourceGeoCountryIsoCode,
+    sourceGeoRegionName,
+    sourceGeoCityName,
+    sourceIp,
+    sourcePackets,
+    sourcePort,
+    transport,
+    userName,
+  }) => (
+    <EuiFlexGroup
+      data-test-subj="netflow-columns"
+      gutterSize="none"
+      justifyContent="center"
+      wrap={true}
+    >
+      <EuiFlexItemMarginRight grow={false}>
+        <UserProcess
+          contextId={contextId}
+          eventId={eventId}
+          processName={processName}
+          userName={userName}
+        />
+      </EuiFlexItemMarginRight>
+
+      <EuiFlexItemMarginRight grow={false}>
+        <DurationEventStartEnd
+          contextId={contextId}
+          eventDuration={eventDuration}
+          eventId={eventId}
+          eventEnd={eventEnd}
+          eventStart={eventStart}
+        />
+      </EuiFlexItemMarginRight>
+
+      <EuiFlexItem grow={false}>
+        <SourceDestination
+          contextId={contextId}
+          destinationBytes={destinationBytes}
+          destinationGeoContinentName={destinationGeoContinentName}
+          destinationGeoCountryName={destinationGeoCountryName}
+          destinationGeoCountryIsoCode={destinationGeoCountryIsoCode}
+          destinationGeoRegionName={destinationGeoRegionName}
+          destinationGeoCityName={destinationGeoCityName}
+          destinationIp={destinationIp}
+          destinationPackets={destinationPackets}
+          destinationPort={destinationPort}
+          eventId={eventId}
+          networkBytes={networkBytes}
+          networkCommunityId={networkCommunityId}
+          networkDirection={networkDirection}
+          networkPackets={networkPackets}
+          networkProtocol={networkProtocol}
+          sourceBytes={sourceBytes}
+          sourceGeoContinentName={sourceGeoContinentName}
+          sourceGeoCountryName={sourceGeoCountryName}
+          sourceGeoCountryIsoCode={sourceGeoCountryIsoCode}
+          sourceGeoRegionName={sourceGeoRegionName}
+          sourceGeoCityName={sourceGeoCityName}
+          sourceIp={sourceIp}
+          sourcePackets={sourcePackets}
+          sourcePort={sourcePort}
+          transport={transport}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  )
+);
+
+NetflowColumns.displayName = 'NetflowColumns';
diff --git a/x-pack/plugins/siem/public/components/netflow/netflow_columns/types.ts b/x-pack/plugins/siem/public/timelines/components/netflow/netflow_columns/types.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/netflow/netflow_columns/types.ts
rename to x-pack/plugins/siem/public/timelines/components/netflow/netflow_columns/types.ts
diff --git a/x-pack/plugins/siem/public/components/netflow/netflow_columns/user_process.tsx b/x-pack/plugins/siem/public/timelines/components/netflow/netflow_columns/user_process.tsx
similarity index 96%
rename from x-pack/plugins/siem/public/components/netflow/netflow_columns/user_process.tsx
rename to x-pack/plugins/siem/public/timelines/components/netflow/netflow_columns/user_process.tsx
index ab71dc301156f8..214eb3f4932712 100644
--- a/x-pack/plugins/siem/public/components/netflow/netflow_columns/user_process.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/netflow/netflow_columns/user_process.tsx
@@ -8,7 +8,7 @@ import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { uniq } from 'lodash/fp';
 import React from 'react';
 
-import { DraggableBadge } from '../../draggables';
+import { DraggableBadge } from '../../../../common/components/draggables';
 
 export const PROCESS_NAME_FIELD_NAME = 'process.name';
 export const USER_NAME_FIELD_NAME = 'user.name';
diff --git a/x-pack/plugins/siem/public/components/netflow/types.ts b/x-pack/plugins/siem/public/timelines/components/netflow/types.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/netflow/types.ts
rename to x-pack/plugins/siem/public/timelines/components/netflow/types.ts
diff --git a/x-pack/plugins/siem/public/components/notes/add_note/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/notes/add_note/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/notes/add_note/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/notes/add_note/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/notes/add_note/__snapshots__/new_note.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/notes/add_note/__snapshots__/new_note.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/notes/add_note/__snapshots__/new_note.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/notes/add_note/__snapshots__/new_note.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/notes/add_note/index.test.tsx b/x-pack/plugins/siem/public/timelines/components/notes/add_note/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/notes/add_note/index.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/notes/add_note/index.test.tsx
diff --git a/x-pack/plugins/siem/public/timelines/components/notes/add_note/index.tsx b/x-pack/plugins/siem/public/timelines/components/notes/add_note/index.tsx
new file mode 100644
index 00000000000000..d3db1a619600f9
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/notes/add_note/index.tsx
@@ -0,0 +1,92 @@
+/*
+ * 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 { EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import React, { useCallback } from 'react';
+import styled from 'styled-components';
+
+import { MarkdownHint } from '../../../../common/components/markdown/markdown_hint';
+import {
+  AssociateNote,
+  GetNewNoteId,
+  updateAndAssociateNode,
+  UpdateInternalNewNote,
+  UpdateNote,
+} from '../helpers';
+import * as i18n from '../translations';
+
+import { NewNote } from './new_note';
+
+const AddNotesContainer = styled(EuiFlexGroup)`
+  margin-bottom: 5px;
+  user-select: none;
+`;
+
+AddNotesContainer.displayName = 'AddNotesContainer';
+
+const ButtonsContainer = styled(EuiFlexGroup)`
+  margin-top: 5px;
+`;
+
+ButtonsContainer.displayName = 'ButtonsContainer';
+
+export const CancelButton = React.memo<{ onCancelAddNote: () => void }>(({ onCancelAddNote }) => (
+  <EuiButtonEmpty data-test-subj="cancel" onClick={onCancelAddNote}>
+    {i18n.CANCEL}
+  </EuiButtonEmpty>
+));
+
+CancelButton.displayName = 'CancelButton';
+
+/** Displays an input for entering a new note, with an adjacent "Add" button */
+export const AddNote = React.memo<{
+  associateNote: AssociateNote;
+  getNewNoteId: GetNewNoteId;
+  newNote: string;
+  onCancelAddNote?: () => void;
+  updateNewNote: UpdateInternalNewNote;
+  updateNote: UpdateNote;
+}>(({ associateNote, getNewNoteId, newNote, onCancelAddNote, updateNewNote, updateNote }) => {
+  const handleClick = useCallback(
+    () =>
+      updateAndAssociateNode({
+        associateNote,
+        getNewNoteId,
+        newNote,
+        updateNewNote,
+        updateNote,
+      }),
+    [associateNote, getNewNoteId, newNote, updateNewNote, updateNote]
+  );
+
+  return (
+    <AddNotesContainer alignItems="flexEnd" direction="column" gutterSize="none">
+      <NewNote note={newNote} noteInputHeight={200} updateNewNote={updateNewNote} />
+      <EuiFlexItem grow={true}>
+        <MarkdownHint show={newNote.trim().length > 0} />
+      </EuiFlexItem>
+      <ButtonsContainer gutterSize="none">
+        {onCancelAddNote != null ? (
+          <EuiFlexItem grow={false}>
+            <CancelButton onCancelAddNote={onCancelAddNote} />
+          </EuiFlexItem>
+        ) : null}
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            data-test-subj="add-note"
+            isDisabled={newNote.trim().length === 0}
+            fill={true}
+            onClick={handleClick}
+          >
+            {i18n.ADD_NOTE}
+          </EuiButton>
+        </EuiFlexItem>
+      </ButtonsContainer>
+    </AddNotesContainer>
+  );
+});
+
+AddNote.displayName = 'AddNote';
diff --git a/x-pack/plugins/siem/public/components/notes/add_note/new_note.test.tsx b/x-pack/plugins/siem/public/timelines/components/notes/add_note/new_note.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/notes/add_note/new_note.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/notes/add_note/new_note.test.tsx
diff --git a/x-pack/plugins/siem/public/components/notes/add_note/new_note.tsx b/x-pack/plugins/siem/public/timelines/components/notes/add_note/new_note.tsx
similarity index 96%
rename from x-pack/plugins/siem/public/components/notes/add_note/new_note.tsx
rename to x-pack/plugins/siem/public/timelines/components/notes/add_note/new_note.tsx
index 15e58f3efd21ec..99662d446e10f9 100644
--- a/x-pack/plugins/siem/public/components/notes/add_note/new_note.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/notes/add_note/new_note.tsx
@@ -8,7 +8,7 @@ import { EuiPanel, EuiTabbedContent, EuiTextArea } from '@elastic/eui';
 import React from 'react';
 import styled from 'styled-components';
 
-import { Markdown } from '../../markdown';
+import { Markdown } from '../../../../common/components/markdown';
 import { UpdateInternalNewNote } from '../helpers';
 import * as i18n from '../translations';
 
diff --git a/x-pack/plugins/siem/public/components/notes/columns.tsx b/x-pack/plugins/siem/public/timelines/components/notes/columns.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/notes/columns.tsx
rename to x-pack/plugins/siem/public/timelines/components/notes/columns.tsx
diff --git a/x-pack/plugins/siem/public/timelines/components/notes/helpers.tsx b/x-pack/plugins/siem/public/timelines/components/notes/helpers.tsx
new file mode 100644
index 00000000000000..938bc0d222002f
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/notes/helpers.tsx
@@ -0,0 +1,113 @@
+/*
+ * 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 { EuiIcon, EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
+import moment from 'moment';
+import React from 'react';
+import styled from 'styled-components';
+
+import { Note } from '../../../common/lib/note';
+
+import * as i18n from './translations';
+import { CountBadge } from '../../../common/components/page';
+
+/** Performs IO to update (or add a new) note */
+export type UpdateNote = (note: Note) => void;
+/** Performs IO to associate a note with something (e.g. a timeline, an event, etc). (The "something" is opaque to the caller) */
+export type AssociateNote = (noteId: string) => void;
+/** Performs IO to get a new note ID */
+export type GetNewNoteId = () => string;
+/** Updates the local state containing a new note being edited by the user */
+export type UpdateInternalNewNote = (newNote: string) => void;
+/** Closes the notes popover */
+export type OnClosePopover = () => void;
+/** Performs IO to associate a note with an event */
+export type AddNoteToEvent = ({ eventId, noteId }: { eventId: string; noteId: string }) => void;
+
+/**
+ * Defines the behavior of the search input that appears above the table of data
+ */
+export const search = {
+  box: {
+    incremental: true,
+    placeholder: i18n.SEARCH_PLACEHOLDER,
+    schema: {
+      fields: {
+        user: 'string',
+        note: 'string',
+      },
+    },
+  },
+};
+
+const TitleText = styled.h3`
+  margin: 0 5px;
+  cursor: default;
+  user-select: none;
+`;
+
+TitleText.displayName = 'TitleText';
+
+/** Displays a count of the existing notes */
+export const NotesCount = React.memo<{
+  noteIds: string[];
+}>(({ noteIds }) => (
+  <EuiFlexGroup alignItems="center" gutterSize="none">
+    <EuiFlexItem grow={false}>
+      <EuiIcon color="text" size="l" type="editorComment" />
+    </EuiFlexItem>
+
+    <EuiFlexItem grow={false}>
+      <EuiTitle size="s">
+        <TitleText>{i18n.NOTES}</TitleText>
+      </EuiTitle>
+    </EuiFlexItem>
+
+    <EuiFlexItem grow={false}>
+      <CountBadge color="hollow">{noteIds.length}</CountBadge>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+));
+
+NotesCount.displayName = 'NotesCount';
+
+/** Creates a new instance of a `note` */
+export const createNote = ({
+  newNote,
+  getNewNoteId,
+}: {
+  newNote: string;
+  getNewNoteId: GetNewNoteId;
+}): Note => ({
+  created: moment.utc().toDate(),
+  id: getNewNoteId(),
+  lastEdit: null,
+  note: newNote.trim(),
+  saveObjectId: null,
+  user: 'elastic', // TODO: get the logged-in Kibana user
+  version: null,
+});
+
+interface UpdateAndAssociateNodeParams {
+  associateNote: AssociateNote;
+  getNewNoteId: GetNewNoteId;
+  newNote: string;
+  updateNewNote: UpdateInternalNewNote;
+  updateNote: UpdateNote;
+}
+
+export const updateAndAssociateNode = ({
+  associateNote,
+  getNewNoteId,
+  newNote,
+  updateNewNote,
+  updateNote,
+}: UpdateAndAssociateNodeParams) => {
+  const note = createNote({ newNote, getNewNoteId });
+  updateNote(note); // perform IO to store the newly-created note
+  associateNote(note.id); // associate the note with the (opaque) thing
+  updateNewNote(''); // clear the input
+};
diff --git a/x-pack/plugins/siem/public/timelines/components/notes/index.tsx b/x-pack/plugins/siem/public/timelines/components/notes/index.tsx
new file mode 100644
index 00000000000000..42f28f03406798
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/notes/index.tsx
@@ -0,0 +1,87 @@
+/*
+ * 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 {
+  EuiInMemoryTable,
+  EuiInMemoryTableProps,
+  EuiModalBody,
+  EuiModalHeader,
+  EuiPanel,
+  EuiSpacer,
+} from '@elastic/eui';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+import { Note } from '../../../common/lib/note';
+
+import { AddNote } from './add_note';
+import { columns } from './columns';
+import { AssociateNote, GetNewNoteId, NotesCount, search, UpdateNote } from './helpers';
+import { NOTES_PANEL_WIDTH, NOTES_PANEL_HEIGHT } from '../timeline/properties/notes_size';
+
+interface Props {
+  associateNote: AssociateNote;
+  getNotesByIds: (noteIds: string[]) => Note[];
+  getNewNoteId: GetNewNoteId;
+  noteIds: string[];
+  updateNote: UpdateNote;
+}
+
+const NotesPanel = styled(EuiPanel)`
+  height: ${NOTES_PANEL_HEIGHT}px;
+  width: ${NOTES_PANEL_WIDTH}px;
+
+  & thead {
+    display: none;
+  }
+`;
+
+NotesPanel.displayName = 'NotesPanel';
+
+const InMemoryTable: typeof EuiInMemoryTable & { displayName: string } = styled(
+  EuiInMemoryTable as React.ComponentType<EuiInMemoryTableProps<Note>>
+)`
+  overflow-x: hidden;
+  overflow-y: auto;
+  height: 220px;
+` as any; // eslint-disable-line @typescript-eslint/no-explicit-any
+
+InMemoryTable.displayName = 'InMemoryTable';
+
+/** A view for entering and reviewing notes */
+export const Notes = React.memo<Props>(
+  ({ associateNote, getNotesByIds, getNewNoteId, noteIds, updateNote }) => {
+    const [newNote, setNewNote] = useState('');
+
+    return (
+      <NotesPanel>
+        <EuiModalHeader>
+          <NotesCount noteIds={noteIds} />
+        </EuiModalHeader>
+
+        <EuiModalBody>
+          <AddNote
+            associateNote={associateNote}
+            getNewNoteId={getNewNoteId}
+            newNote={newNote}
+            updateNewNote={setNewNote}
+            updateNote={updateNote}
+          />
+          <EuiSpacer size="s" />
+          <InMemoryTable
+            data-test-subj="notes-table"
+            items={getNotesByIds(noteIds)}
+            columns={columns}
+            search={search}
+            sorting={true}
+          />
+        </EuiModalBody>
+      </NotesPanel>
+    );
+  }
+);
+
+Notes.displayName = 'Notes';
diff --git a/x-pack/plugins/siem/public/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/notes/note_card/index.test.tsx b/x-pack/plugins/siem/public/timelines/components/notes/note_card/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/notes/note_card/index.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/notes/note_card/index.test.tsx
diff --git a/x-pack/plugins/siem/public/components/notes/note_card/index.tsx b/x-pack/plugins/siem/public/timelines/components/notes/note_card/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/notes/note_card/index.tsx
rename to x-pack/plugins/siem/public/timelines/components/notes/note_card/index.tsx
diff --git a/x-pack/plugins/siem/public/components/notes/note_card/note_card_body.test.tsx b/x-pack/plugins/siem/public/timelines/components/notes/note_card/note_card_body.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/notes/note_card/note_card_body.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/notes/note_card/note_card_body.test.tsx
diff --git a/x-pack/plugins/siem/public/components/notes/note_card/note_card_body.tsx b/x-pack/plugins/siem/public/timelines/components/notes/note_card/note_card_body.tsx
similarity index 82%
rename from x-pack/plugins/siem/public/components/notes/note_card/note_card_body.tsx
rename to x-pack/plugins/siem/public/timelines/components/notes/note_card/note_card_body.tsx
index 4463f8d4ff6024..f846ead810ff2c 100644
--- a/x-pack/plugins/siem/public/components/notes/note_card/note_card_body.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/notes/note_card/note_card_body.tsx
@@ -8,9 +8,9 @@ import { EuiPanel, EuiToolTip } from '@elastic/eui';
 import React, { useCallback, useMemo } from 'react';
 import styled from 'styled-components';
 
-import { WithCopyToClipboard } from '../../../lib/clipboard/with_copy_to_clipboard';
-import { Markdown } from '../../markdown';
-import { WithHoverActions } from '../../with_hover_actions';
+import { WithCopyToClipboard } from '../../../../common/lib/clipboard/with_copy_to_clipboard';
+import { Markdown } from '../../../../common/components/markdown';
+import { WithHoverActions } from '../../../../common/components/with_hover_actions';
 import * as i18n from '../translations';
 
 const BodyContainer = styled(EuiPanel)`
diff --git a/x-pack/plugins/siem/public/components/notes/note_card/note_card_header.test.tsx b/x-pack/plugins/siem/public/timelines/components/notes/note_card/note_card_header.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/notes/note_card/note_card_header.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/notes/note_card/note_card_header.test.tsx
diff --git a/x-pack/plugins/siem/public/components/notes/note_card/note_card_header.tsx b/x-pack/plugins/siem/public/timelines/components/notes/note_card/note_card_header.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/notes/note_card/note_card_header.tsx
rename to x-pack/plugins/siem/public/timelines/components/notes/note_card/note_card_header.tsx
diff --git a/x-pack/plugins/siem/public/components/notes/note_card/note_created.test.tsx b/x-pack/plugins/siem/public/timelines/components/notes/note_card/note_created.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/notes/note_card/note_created.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/notes/note_card/note_created.test.tsx
diff --git a/x-pack/plugins/siem/public/components/notes/note_card/note_created.tsx b/x-pack/plugins/siem/public/timelines/components/notes/note_card/note_created.tsx
similarity index 89%
rename from x-pack/plugins/siem/public/components/notes/note_card/note_created.tsx
rename to x-pack/plugins/siem/public/timelines/components/notes/note_card/note_created.tsx
index cdd0406c714509..dc97373660bd1c 100644
--- a/x-pack/plugins/siem/public/components/notes/note_card/note_created.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/notes/note_card/note_created.tsx
@@ -8,7 +8,7 @@ import { FormattedRelative } from '@kbn/i18n/react';
 import React from 'react';
 import styled from 'styled-components';
 
-import { LocalizedDateTooltip } from '../../localized_date_tooltip';
+import { LocalizedDateTooltip } from '../../../../common/components/localized_date_tooltip';
 
 const NoteCreatedContainer = styled.span`
   user-select: none;
diff --git a/x-pack/plugins/siem/public/timelines/components/notes/note_cards/index.test.tsx b/x-pack/plugins/siem/public/timelines/components/notes/note_cards/index.test.tsx
new file mode 100644
index 00000000000000..fa63eb625f2839
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/notes/note_cards/index.test.tsx
@@ -0,0 +1,137 @@
+/*
+ * 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 { mountWithIntl } from 'test_utils/enzyme_helpers';
+import { ThemeProvider } from 'styled-components';
+import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
+
+import { Note } from '../../../../common/lib/note';
+
+import { NoteCards } from '.';
+
+describe('NoteCards', () => {
+  const noteIds = ['abc', 'def'];
+  const theme = () => ({ eui: euiDarkVars, darkMode: true });
+
+  const getNotesByIds = (_: string[]): Note[] => [
+    {
+      created: new Date(),
+      id: 'abc',
+      lastEdit: null,
+      note: 'a fake note',
+      saveObjectId: null,
+      user: 'elastic',
+      version: null,
+    },
+    {
+      created: new Date(),
+      id: 'def',
+      lastEdit: null,
+      note: 'another fake note',
+      saveObjectId: null,
+      user: 'elastic',
+      version: null,
+    },
+  ];
+
+  test('it renders the notes column when noteIds are specified', () => {
+    const wrapper = mountWithIntl(
+      <ThemeProvider theme={theme}>
+        <NoteCards
+          associateNote={jest.fn()}
+          getNotesByIds={getNotesByIds}
+          getNewNoteId={jest.fn()}
+          noteIds={noteIds}
+          showAddNote={true}
+          toggleShowAddNote={jest.fn()}
+          updateNote={jest.fn()}
+        />
+      </ThemeProvider>
+    );
+
+    expect(wrapper.find('[data-test-subj="notes"]').exists()).toEqual(true);
+  });
+
+  test('it does NOT render the notes column when noteIds are NOT specified', () => {
+    const wrapper = mountWithIntl(
+      <ThemeProvider theme={theme}>
+        <NoteCards
+          associateNote={jest.fn()}
+          getNotesByIds={getNotesByIds}
+          getNewNoteId={jest.fn()}
+          noteIds={[]}
+          showAddNote={true}
+          toggleShowAddNote={jest.fn()}
+          updateNote={jest.fn()}
+        />
+      </ThemeProvider>
+    );
+
+    expect(wrapper.find('[data-test-subj="notes"]').exists()).toEqual(false);
+  });
+
+  test('renders note cards', () => {
+    const wrapper = mountWithIntl(
+      <ThemeProvider theme={theme}>
+        <NoteCards
+          associateNote={jest.fn()}
+          getNotesByIds={getNotesByIds}
+          getNewNoteId={jest.fn()}
+          noteIds={noteIds}
+          showAddNote={true}
+          toggleShowAddNote={jest.fn()}
+          updateNote={jest.fn()}
+        />
+      </ThemeProvider>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="note-card"]')
+        .find('[data-test-subj="note-card-body"]')
+        .find('[data-test-subj="markdown-root"]')
+        .first()
+        .text()
+    ).toEqual(getNotesByIds(noteIds)[0].note);
+  });
+
+  test('it shows controls for adding notes when showAddNote is true', () => {
+    const wrapper = mountWithIntl(
+      <ThemeProvider theme={theme}>
+        <NoteCards
+          associateNote={jest.fn()}
+          getNotesByIds={getNotesByIds}
+          getNewNoteId={jest.fn()}
+          noteIds={noteIds}
+          showAddNote={true}
+          toggleShowAddNote={jest.fn()}
+          updateNote={jest.fn()}
+        />
+      </ThemeProvider>
+    );
+
+    expect(wrapper.find('[data-test-subj="add-note"]').exists()).toEqual(true);
+  });
+
+  test('it does NOT show controls for adding notes when showAddNote is false', () => {
+    const wrapper = mountWithIntl(
+      <ThemeProvider theme={theme}>
+        <NoteCards
+          associateNote={jest.fn()}
+          getNotesByIds={getNotesByIds}
+          getNewNoteId={jest.fn()}
+          noteIds={noteIds}
+          showAddNote={false}
+          toggleShowAddNote={jest.fn()}
+          updateNote={jest.fn()}
+        />
+      </ThemeProvider>
+    );
+
+    expect(wrapper.find('[data-test-subj="add-note"]').exists()).toEqual(false);
+  });
+});
diff --git a/x-pack/plugins/siem/public/timelines/components/notes/note_cards/index.tsx b/x-pack/plugins/siem/public/timelines/components/notes/note_cards/index.tsx
new file mode 100644
index 00000000000000..346d77b14cd90e
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/notes/note_cards/index.tsx
@@ -0,0 +1,106 @@
+/*
+ * 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 { EuiFlexGroup, EuiPanel } from '@elastic/eui';
+import React, { useState, useCallback } from 'react';
+import styled from 'styled-components';
+
+import { Note } from '../../../../common/lib/note';
+import { AddNote } from '../add_note';
+import { AssociateNote, GetNewNoteId, UpdateNote } from '../helpers';
+import { NoteCard } from '../note_card';
+
+const AddNoteContainer = styled.div``;
+AddNoteContainer.displayName = 'AddNoteContainer';
+
+const NoteContainer = styled.div`
+  margin-top: 5px;
+`;
+NoteContainer.displayName = 'NoteContainer';
+
+interface NoteCardsCompProps {
+  children: React.ReactNode;
+}
+
+const NoteCardsComp = React.memo<NoteCardsCompProps>(({ children }) => (
+  <EuiPanel
+    data-test-subj="note-cards"
+    hasShadow={false}
+    paddingSize="none"
+    style={{ border: 'none' }}
+  >
+    {children}
+  </EuiPanel>
+));
+NoteCardsComp.displayName = 'NoteCardsComp';
+
+const NotesContainer = styled(EuiFlexGroup)`
+  padding: 0 5px;
+  margin-bottom: 5px;
+`;
+NotesContainer.displayName = 'NotesContainer';
+
+interface Props {
+  associateNote: AssociateNote;
+  getNotesByIds: (noteIds: string[]) => Note[];
+  getNewNoteId: GetNewNoteId;
+  noteIds: string[];
+  showAddNote: boolean;
+  toggleShowAddNote: () => void;
+  updateNote: UpdateNote;
+}
+
+/** A view for entering and reviewing notes */
+export const NoteCards = React.memo<Props>(
+  ({
+    associateNote,
+    getNotesByIds,
+    getNewNoteId,
+    noteIds,
+    showAddNote,
+    toggleShowAddNote,
+    updateNote,
+  }) => {
+    const [newNote, setNewNote] = useState('');
+
+    const associateNoteAndToggleShow = useCallback(
+      (noteId: string) => {
+        associateNote(noteId);
+        toggleShowAddNote();
+      },
+      [associateNote, toggleShowAddNote]
+    );
+
+    return (
+      <NoteCardsComp>
+        {noteIds.length ? (
+          <NotesContainer data-test-subj="notes" direction="column" gutterSize="none">
+            {getNotesByIds(noteIds).map(note => (
+              <NoteContainer data-test-subj="note-container" key={note.id}>
+                <NoteCard created={note.created} rawNote={note.note} user={note.user} />
+              </NoteContainer>
+            ))}
+          </NotesContainer>
+        ) : null}
+
+        {showAddNote ? (
+          <AddNoteContainer data-test-subj="add-note-container">
+            <AddNote
+              associateNote={associateNoteAndToggleShow}
+              getNewNoteId={getNewNoteId}
+              newNote={newNote}
+              onCancelAddNote={toggleShowAddNote}
+              updateNewNote={setNewNote}
+              updateNote={updateNote}
+            />
+          </AddNoteContainer>
+        ) : null}
+      </NoteCardsComp>
+    );
+  }
+);
+
+NoteCards.displayName = 'NoteCards';
diff --git a/x-pack/plugins/siem/public/components/notes/translations.ts b/x-pack/plugins/siem/public/timelines/components/notes/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/notes/translations.ts
rename to x-pack/plugins/siem/public/timelines/components/notes/translations.ts
diff --git a/x-pack/plugins/siem/public/components/open_timeline/constants.ts b/x-pack/plugins/siem/public/timelines/components/open_timeline/constants.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/open_timeline/constants.ts
rename to x-pack/plugins/siem/public/timelines/components/open_timeline/constants.ts
diff --git a/x-pack/plugins/siem/public/components/open_timeline/delete_timeline_modal/delete_timeline_modal.test.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/delete_timeline_modal/delete_timeline_modal.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/open_timeline/delete_timeline_modal/delete_timeline_modal.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/open_timeline/delete_timeline_modal/delete_timeline_modal.test.tsx
diff --git a/x-pack/plugins/siem/public/components/open_timeline/delete_timeline_modal/delete_timeline_modal.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/delete_timeline_modal/delete_timeline_modal.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/open_timeline/delete_timeline_modal/delete_timeline_modal.tsx
rename to x-pack/plugins/siem/public/timelines/components/open_timeline/delete_timeline_modal/delete_timeline_modal.tsx
diff --git a/x-pack/plugins/siem/public/components/open_timeline/delete_timeline_modal/index.test.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/delete_timeline_modal/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/open_timeline/delete_timeline_modal/index.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/open_timeline/delete_timeline_modal/index.test.tsx
diff --git a/x-pack/plugins/siem/public/components/open_timeline/delete_timeline_modal/index.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/delete_timeline_modal/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/open_timeline/delete_timeline_modal/index.tsx
rename to x-pack/plugins/siem/public/timelines/components/open_timeline/delete_timeline_modal/index.tsx
diff --git a/x-pack/plugins/siem/public/components/open_timeline/edit_timeline_actions.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/edit_timeline_actions.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/open_timeline/edit_timeline_actions.tsx
rename to x-pack/plugins/siem/public/timelines/components/open_timeline/edit_timeline_actions.tsx
diff --git a/x-pack/plugins/siem/public/components/open_timeline/edit_timeline_batch_actions.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/edit_timeline_batch_actions.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/open_timeline/edit_timeline_batch_actions.tsx
rename to x-pack/plugins/siem/public/timelines/components/open_timeline/edit_timeline_batch_actions.tsx
diff --git a/x-pack/plugins/siem/public/components/open_timeline/export_timeline/export_timeline.test.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/export_timeline/export_timeline.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/open_timeline/export_timeline/export_timeline.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/open_timeline/export_timeline/export_timeline.test.tsx
diff --git a/x-pack/plugins/siem/public/components/open_timeline/export_timeline/export_timeline.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/export_timeline/export_timeline.tsx
similarity index 90%
rename from x-pack/plugins/siem/public/components/open_timeline/export_timeline/export_timeline.tsx
rename to x-pack/plugins/siem/public/timelines/components/open_timeline/export_timeline/export_timeline.tsx
index ebfd5c18bd5dc2..43ef3bccbea56e 100644
--- a/x-pack/plugins/siem/public/components/open_timeline/export_timeline/export_timeline.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/open_timeline/export_timeline/export_timeline.tsx
@@ -6,9 +6,12 @@
 
 import React, { useCallback } from 'react';
 import uuid from 'uuid';
-import { GenericDownloader, ExportSelectedData } from '../../generic_downloader';
+import {
+  GenericDownloader,
+  ExportSelectedData,
+} from '../../../../common/components/generic_downloader';
 import * as i18n from '../translations';
-import { useStateToaster } from '../../toasters';
+import { useStateToaster } from '../../../../common/components/toasters';
 
 const ExportTimeline: React.FC<{
   exportedIds: string[] | undefined;
diff --git a/x-pack/plugins/siem/public/components/open_timeline/export_timeline/index.test.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/export_timeline/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/open_timeline/export_timeline/index.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/open_timeline/export_timeline/index.test.tsx
diff --git a/x-pack/plugins/siem/public/timelines/components/open_timeline/export_timeline/index.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/export_timeline/index.tsx
new file mode 100644
index 00000000000000..7bac3229c81732
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/open_timeline/export_timeline/index.tsx
@@ -0,0 +1,73 @@
+/*
+ * 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, { useState, useCallback } from 'react';
+import { DeleteTimelines } from '../types';
+
+import { TimelineDownloader } from './export_timeline';
+import { DeleteTimelineModalOverlay } from '../delete_timeline_modal';
+import { exportSelectedTimeline } from '../../../containers/api';
+
+export interface ExportTimeline {
+  disableExportTimelineDownloader: () => void;
+  enableExportTimelineDownloader: () => void;
+  isEnableDownloader: boolean;
+}
+
+export const useExportTimeline = (): ExportTimeline => {
+  const [isEnableDownloader, setIsEnableDownloader] = useState(false);
+
+  const enableExportTimelineDownloader = useCallback(() => {
+    setIsEnableDownloader(true);
+  }, []);
+
+  const disableExportTimelineDownloader = useCallback(() => {
+    setIsEnableDownloader(false);
+  }, []);
+
+  return {
+    disableExportTimelineDownloader,
+    enableExportTimelineDownloader,
+    isEnableDownloader,
+  };
+};
+
+const EditTimelineActionsComponent: React.FC<{
+  deleteTimelines: DeleteTimelines | undefined;
+  ids: string[];
+  isEnableDownloader: boolean;
+  isDeleteTimelineModalOpen: boolean;
+  onComplete: () => void;
+  title: string;
+}> = ({
+  deleteTimelines,
+  ids,
+  isEnableDownloader,
+  isDeleteTimelineModalOpen,
+  onComplete,
+  title,
+}) => (
+  <>
+    <TimelineDownloader
+      exportedIds={ids}
+      getExportedData={exportSelectedTimeline}
+      isEnableDownloader={isEnableDownloader}
+      onComplete={onComplete}
+    />
+    {deleteTimelines != null && (
+      <DeleteTimelineModalOverlay
+        deleteTimelines={deleteTimelines}
+        isModalOpen={isDeleteTimelineModalOpen}
+        onComplete={onComplete}
+        savedObjectIds={ids}
+        title={title}
+      />
+    )}
+  </>
+);
+
+export const EditTimelineActions = React.memo(EditTimelineActionsComponent);
+export const EditOneTimelineAction = React.memo(EditTimelineActionsComponent);
diff --git a/x-pack/plugins/siem/public/components/open_timeline/export_timeline/mocks.ts b/x-pack/plugins/siem/public/timelines/components/open_timeline/export_timeline/mocks.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/open_timeline/export_timeline/mocks.ts
rename to x-pack/plugins/siem/public/timelines/components/open_timeline/export_timeline/mocks.ts
diff --git a/x-pack/plugins/siem/public/timelines/components/open_timeline/helpers.test.ts b/x-pack/plugins/siem/public/timelines/components/open_timeline/helpers.test.ts
new file mode 100644
index 00000000000000..e6db9df61b9020
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/open_timeline/helpers.test.ts
@@ -0,0 +1,893 @@
+/*
+ * 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 { cloneDeep, omit } from 'lodash/fp';
+import { Dispatch } from 'redux';
+
+import {
+  mockTimelineResults,
+  mockTimelineResult,
+  mockTimelineModel,
+} from '../../../common/mock/timeline_results';
+import { timelineDefaults } from '../../../timelines/store/timeline/defaults';
+import { setTimelineRangeDatePicker as dispatchSetTimelineRangeDatePicker } from '../../../common/store/inputs/actions';
+import {
+  setKqlFilterQueryDraft as dispatchSetKqlFilterQueryDraft,
+  applyKqlFilterQuery as dispatchApplyKqlFilterQuery,
+  addTimeline as dispatchAddTimeline,
+  addNote as dispatchAddGlobalTimelineNote,
+} from '../../../timelines/store/timeline/actions';
+import {
+  addNotes as dispatchAddNotes,
+  updateNote as dispatchUpdateNote,
+} from '../../../common/store/app/actions';
+import {
+  defaultTimelineToTimelineModel,
+  getNotesCount,
+  getPinnedEventCount,
+  isUntitled,
+  omitTypenameInTimeline,
+  dispatchUpdateTimeline,
+} from './helpers';
+import { OpenTimelineResult, DispatchUpdateTimeline } from './types';
+import { KueryFilterQueryKind } from '../../../common/store/model';
+import { Note } from '../../../common/lib/note';
+import moment from 'moment';
+import sinon from 'sinon';
+import { TimelineType } from '../../../../common/types/timeline';
+
+jest.mock('../../../common/store/inputs/actions');
+jest.mock('../../../timelines/store/timeline/actions');
+jest.mock('../../../common/store/app/actions');
+jest.mock('uuid', () => {
+  return {
+    v1: jest.fn(() => 'uuid.v1()'),
+    v4: jest.fn(() => 'uuid.v4()'),
+  };
+});
+
+describe('helpers', () => {
+  let mockResults: OpenTimelineResult[];
+
+  beforeEach(() => {
+    mockResults = cloneDeep(mockTimelineResults);
+  });
+
+  describe('#getPinnedEventCount', () => {
+    test('returns 6 when the timeline has 6 pinned events', () => {
+      const with6Events = mockResults[0];
+
+      expect(getPinnedEventCount(with6Events)).toEqual(6);
+    });
+
+    test('returns zero when the timeline has an empty collection of pinned events', () => {
+      const withPinnedEvents = { ...mockResults[0], pinnedEventIds: {} };
+
+      expect(getPinnedEventCount(withPinnedEvents)).toEqual(0);
+    });
+
+    test('returns zero when pinnedEventIds is undefined', () => {
+      const withPinnedEvents = omit('pinnedEventIds', { ...mockResults[0] });
+
+      expect(getPinnedEventCount(withPinnedEvents)).toEqual(0);
+    });
+
+    test('returns zero when pinnedEventIds is null', () => {
+      const withPinnedEvents = omit('pinnedEventIds', { ...mockResults[0] });
+
+      expect(getPinnedEventCount(withPinnedEvents)).toEqual(0);
+    });
+  });
+
+  describe('#getNotesCount', () => {
+    test('returns a total of 4 notes when the timeline has 4 notes (event1 [2] + event2 [1] + global [1])', () => {
+      const with4Notes = mockResults[0];
+
+      expect(getNotesCount(with4Notes)).toEqual(4);
+    });
+
+    test('returns 1 note (global [1]) when eventIdToNoteIds is undefined', () => {
+      const with1Note = omit('eventIdToNoteIds', { ...mockResults[0] });
+
+      expect(getNotesCount(with1Note)).toEqual(1);
+    });
+
+    test('returns 1 note (global [1]) when eventIdToNoteIds is null', () => {
+      const eventIdToNoteIdsIsNull = {
+        ...mockResults[0],
+        eventIdToNoteIds: null,
+      };
+      expect(getNotesCount(eventIdToNoteIdsIsNull)).toEqual(1);
+    });
+
+    test('returns 1 note (global [1]) when eventIdToNoteIds is empty', () => {
+      const eventIdToNoteIdsIsEmpty = {
+        ...mockResults[0],
+        eventIdToNoteIds: {},
+      };
+      expect(getNotesCount(eventIdToNoteIdsIsEmpty)).toEqual(1);
+    });
+
+    test('returns 3 notes (event1 [2] + event2 [1]) when noteIds is undefined', () => {
+      const noteIdsIsUndefined = omit('noteIds', { ...mockResults[0] });
+
+      expect(getNotesCount(noteIdsIsUndefined)).toEqual(3);
+    });
+
+    test('returns 3 notes (event1 [2] + event2 [1]) when noteIds is null', () => {
+      const noteIdsIsNull = {
+        ...mockResults[0],
+        noteIds: null,
+      };
+
+      expect(getNotesCount(noteIdsIsNull)).toEqual(3);
+    });
+
+    test('returns 3 notes (event1 [2] + event2 [1]) when noteIds is empty', () => {
+      const noteIdsIsEmpty = {
+        ...mockResults[0],
+        noteIds: [],
+      };
+
+      expect(getNotesCount(noteIdsIsEmpty)).toEqual(3);
+    });
+
+    test('returns 0 when eventIdToNoteIds and noteIds are undefined', () => {
+      const eventIdToNoteIdsAndNoteIdsUndefined = omit(['eventIdToNoteIds', 'noteIds'], {
+        ...mockResults[0],
+      });
+
+      expect(getNotesCount(eventIdToNoteIdsAndNoteIdsUndefined)).toEqual(0);
+    });
+
+    test('returns 0 when eventIdToNoteIds and noteIds are null', () => {
+      const eventIdToNoteIdsAndNoteIdsNull = {
+        ...mockResults[0],
+        eventIdToNoteIds: null,
+        noteIds: null,
+      };
+
+      expect(getNotesCount(eventIdToNoteIdsAndNoteIdsNull)).toEqual(0);
+    });
+
+    test('returns 0 when eventIdToNoteIds and noteIds are empty', () => {
+      const eventIdToNoteIdsAndNoteIdsEmpty = {
+        ...mockResults[0],
+        eventIdToNoteIds: {},
+        noteIds: [],
+      };
+
+      expect(getNotesCount(eventIdToNoteIdsAndNoteIdsEmpty)).toEqual(0);
+    });
+  });
+
+  describe('#isUntitled', () => {
+    test('returns true when title is undefined', () => {
+      const titleIsUndefined = omit('title', {
+        ...mockResults[0],
+      });
+
+      expect(isUntitled(titleIsUndefined)).toEqual(true);
+    });
+
+    test('returns true when title is null', () => {
+      const titleIsNull = {
+        ...mockResults[0],
+        title: null,
+      };
+
+      expect(isUntitled(titleIsNull)).toEqual(true);
+    });
+
+    test('returns true when title is just whitespace', () => {
+      const titleIsWitespace = {
+        ...mockResults[0],
+        title: '    ',
+      };
+
+      expect(isUntitled(titleIsWitespace)).toEqual(true);
+    });
+
+    test('returns false when title is surrounded by whitespace', () => {
+      const titleIsWitespace = {
+        ...mockResults[0],
+        title: '  the king of the north  ',
+      };
+
+      expect(isUntitled(titleIsWitespace)).toEqual(false);
+    });
+
+    test('returns false when title is NOT surrounded by whitespace', () => {
+      const titleIsWitespace = {
+        ...mockResults[0],
+        title: 'in the beginning...',
+      };
+
+      expect(isUntitled(titleIsWitespace)).toEqual(false);
+    });
+  });
+
+  describe('#defaultTimelineToTimelineModel', () => {
+    test('if title is null, we should get the default title', () => {
+      const timeline = {
+        savedObjectId: 'savedObject-1',
+        title: null,
+        version: '1',
+      };
+
+      const newTimeline = defaultTimelineToTimelineModel(timeline, false);
+      expect(newTimeline).toEqual({
+        columns: [
+          {
+            columnHeaderType: 'not-filtered',
+            id: '@timestamp',
+            width: 190,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'message',
+            width: 180,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'event.category',
+            width: 180,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'event.action',
+            width: 180,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'host.name',
+            width: 180,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'source.ip',
+            width: 180,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'destination.ip',
+            width: 180,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'user.name',
+            width: 180,
+          },
+        ],
+        dataProviders: [],
+        dateRange: {
+          end: 0,
+          start: 0,
+        },
+        description: '',
+        deletedEventIds: [],
+        eventIdToNoteIds: {},
+        eventType: 'all',
+        filters: [],
+        highlightedDropAndProviderId: '',
+        historyIds: [],
+        id: 'savedObject-1',
+        isFavorite: false,
+        isLive: false,
+        isSelectAllChecked: false,
+        isLoading: false,
+        isSaving: false,
+        itemsPerPage: 25,
+        itemsPerPageOptions: [10, 25, 50, 100],
+        kqlMode: 'filter',
+        kqlQuery: {
+          filterQuery: null,
+          filterQueryDraft: null,
+        },
+        loadingEventIds: [],
+        noteIds: [],
+        pinnedEventIds: {},
+        pinnedEventsSaveObject: {},
+        savedObjectId: 'savedObject-1',
+        selectedEventIds: {},
+        show: false,
+        showCheckboxes: false,
+        showRowRenderers: true,
+        sort: {
+          columnId: '@timestamp',
+          sortDirection: 'desc',
+        },
+        title: '',
+        timelineType: TimelineType.default,
+        templateTimelineId: null,
+        templateTimelineVersion: null,
+        version: '1',
+        width: 1100,
+      });
+    });
+    test('if columns are null, we should get the default columns', () => {
+      const timeline = {
+        savedObjectId: 'savedObject-1',
+        columns: null,
+        version: '1',
+      };
+
+      const newTimeline = defaultTimelineToTimelineModel(timeline, false);
+      expect(newTimeline).toEqual({
+        columns: [
+          {
+            columnHeaderType: 'not-filtered',
+            id: '@timestamp',
+            width: 190,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'message',
+            width: 180,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'event.category',
+            width: 180,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'event.action',
+            width: 180,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'host.name',
+            width: 180,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'source.ip',
+            width: 180,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'destination.ip',
+            width: 180,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'user.name',
+            width: 180,
+          },
+        ],
+        dataProviders: [],
+        dateRange: {
+          end: 0,
+          start: 0,
+        },
+        description: '',
+        deletedEventIds: [],
+        eventIdToNoteIds: {},
+        eventType: 'all',
+        filters: [],
+        highlightedDropAndProviderId: '',
+        historyIds: [],
+        id: 'savedObject-1',
+        isFavorite: false,
+        isLive: false,
+        isSelectAllChecked: false,
+        isLoading: false,
+        isSaving: false,
+        itemsPerPage: 25,
+        itemsPerPageOptions: [10, 25, 50, 100],
+        kqlMode: 'filter',
+        kqlQuery: {
+          filterQuery: null,
+          filterQueryDraft: null,
+        },
+        loadingEventIds: [],
+        noteIds: [],
+        pinnedEventIds: {},
+        pinnedEventsSaveObject: {},
+        savedObjectId: 'savedObject-1',
+        selectedEventIds: {},
+        show: false,
+        showCheckboxes: false,
+        showRowRenderers: true,
+        sort: {
+          columnId: '@timestamp',
+          sortDirection: 'desc',
+        },
+        title: '',
+        timelineType: TimelineType.default,
+        templateTimelineId: null,
+        templateTimelineVersion: null,
+        version: '1',
+        width: 1100,
+      });
+    });
+    test('should merge columns when event.action is deleted without two extra column names of user.name', () => {
+      const timeline = {
+        savedObjectId: 'savedObject-1',
+        columns: timelineDefaults.columns.filter(column => column.id !== 'event.action'),
+        version: '1',
+      };
+
+      const newTimeline = defaultTimelineToTimelineModel(timeline, false);
+      expect(newTimeline).toEqual({
+        savedObjectId: 'savedObject-1',
+        columns: [
+          {
+            columnHeaderType: 'not-filtered',
+            id: '@timestamp',
+            width: 190,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'message',
+            width: 180,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'event.category',
+            width: 180,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'host.name',
+            width: 180,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'source.ip',
+            width: 180,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'destination.ip',
+            width: 180,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'user.name',
+            width: 180,
+          },
+        ],
+        version: '1',
+        dataProviders: [],
+        description: '',
+        deletedEventIds: [],
+        eventIdToNoteIds: {},
+        eventType: 'all',
+        filters: [],
+        highlightedDropAndProviderId: '',
+        historyIds: [],
+        isFavorite: false,
+        isLive: false,
+        isSelectAllChecked: false,
+        isLoading: false,
+        isSaving: false,
+        itemsPerPage: 25,
+        itemsPerPageOptions: [10, 25, 50, 100],
+        kqlMode: 'filter',
+        kqlQuery: {
+          filterQuery: null,
+          filterQueryDraft: null,
+        },
+        loadingEventIds: [],
+        title: '',
+        timelineType: TimelineType.default,
+        templateTimelineId: null,
+        templateTimelineVersion: null,
+        noteIds: [],
+        pinnedEventIds: {},
+        pinnedEventsSaveObject: {},
+        dateRange: {
+          start: 0,
+          end: 0,
+        },
+        selectedEventIds: {},
+        show: false,
+        showCheckboxes: false,
+        showRowRenderers: true,
+        sort: {
+          columnId: '@timestamp',
+          sortDirection: 'desc',
+        },
+        width: 1100,
+        id: 'savedObject-1',
+      });
+    });
+
+    test('should merge filters object back with json object', () => {
+      const timeline = {
+        savedObjectId: 'savedObject-1',
+        columns: timelineDefaults.columns.filter(column => column.id !== 'event.action'),
+        filters: [
+          {
+            meta: {
+              alias: null,
+              controlledBy: null,
+              disabled: false,
+              index: null,
+              key: 'event.category',
+              negate: false,
+              params: '{"query":"file"}',
+              type: 'phrase',
+              value: null,
+            },
+            query: '{"match_phrase":{"event.category":"file"}}',
+            exists: null,
+          },
+          {
+            meta: {
+              alias: null,
+              controlledBy: null,
+              disabled: false,
+              index: null,
+              key: '@timestamp',
+              negate: false,
+              params: null,
+              type: 'exists',
+              value: 'exists',
+            },
+            query: null,
+            exists: '{"field":"@timestamp"}',
+          },
+        ],
+        version: '1',
+      };
+
+      const newTimeline = defaultTimelineToTimelineModel(timeline, false);
+      expect(newTimeline).toEqual({
+        savedObjectId: 'savedObject-1',
+        columns: [
+          {
+            columnHeaderType: 'not-filtered',
+            id: '@timestamp',
+            width: 190,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'message',
+            width: 180,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'event.category',
+            width: 180,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'host.name',
+            width: 180,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'source.ip',
+            width: 180,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'destination.ip',
+            width: 180,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'user.name',
+            width: 180,
+          },
+        ],
+        version: '1',
+        dataProviders: [],
+        description: '',
+        deletedEventIds: [],
+        eventIdToNoteIds: {},
+        eventType: 'all',
+        filters: [
+          {
+            $state: {
+              store: 'appState',
+            },
+            meta: {
+              alias: null,
+              controlledBy: null,
+              disabled: false,
+              index: null,
+              key: 'event.category',
+              negate: false,
+              params: {
+                query: 'file',
+              },
+              type: 'phrase',
+              value: null,
+            },
+            query: {
+              match_phrase: {
+                'event.category': 'file',
+              },
+            },
+          },
+          {
+            $state: {
+              store: 'appState',
+            },
+            exists: {
+              field: '@timestamp',
+            },
+            meta: {
+              alias: null,
+              controlledBy: null,
+              disabled: false,
+              index: null,
+              key: '@timestamp',
+              negate: false,
+              params: null,
+              type: 'exists',
+              value: 'exists',
+            },
+          },
+        ],
+        highlightedDropAndProviderId: '',
+        historyIds: [],
+        isFavorite: false,
+        isLive: false,
+        isSelectAllChecked: false,
+        isLoading: false,
+        isSaving: false,
+        itemsPerPage: 25,
+        itemsPerPageOptions: [10, 25, 50, 100],
+        kqlMode: 'filter',
+        kqlQuery: {
+          filterQuery: null,
+          filterQueryDraft: null,
+        },
+        loadingEventIds: [],
+        title: '',
+        timelineType: TimelineType.default,
+        templateTimelineId: null,
+        templateTimelineVersion: null,
+        noteIds: [],
+        pinnedEventIds: {},
+        pinnedEventsSaveObject: {},
+        dateRange: {
+          start: 0,
+          end: 0,
+        },
+        selectedEventIds: {},
+        show: false,
+        showCheckboxes: false,
+        showRowRenderers: true,
+        sort: {
+          columnId: '@timestamp',
+          sortDirection: 'desc',
+        },
+        width: 1100,
+        id: 'savedObject-1',
+      });
+    });
+  });
+
+  describe('omitTypenameInTimeline', () => {
+    test('it does not modify the passed in timeline if no __typename exists', () => {
+      const result = omitTypenameInTimeline(mockTimelineResult);
+
+      expect(result).toEqual(mockTimelineResult);
+    });
+
+    test('it returns timeline with __typename removed when it exists', () => {
+      const mockTimeline = {
+        ...mockTimelineResult,
+        __typename: 'something, something',
+      };
+      const result = omitTypenameInTimeline(mockTimeline);
+      const expectedTimeline = {
+        ...mockTimeline,
+        __typename: undefined,
+      };
+
+      expect(result).toEqual(expectedTimeline);
+    });
+  });
+
+  describe('dispatchUpdateTimeline', () => {
+    const dispatch = jest.fn() as Dispatch;
+    const anchor = '2020-03-27T20:34:51.337Z';
+    const unix = moment(anchor).valueOf();
+    let clock: sinon.SinonFakeTimers;
+    let timelineDispatch: DispatchUpdateTimeline;
+
+    beforeEach(() => {
+      jest.clearAllMocks();
+
+      clock = sinon.useFakeTimers(unix);
+      timelineDispatch = dispatchUpdateTimeline(dispatch);
+    });
+
+    afterEach(function() {
+      clock.restore();
+    });
+
+    test('it invokes date range picker dispatch', () => {
+      timelineDispatch({
+        duplicate: true,
+        id: 'timeline-1',
+        from: 1585233356356,
+        to: 1585233716356,
+        notes: [],
+        timeline: mockTimelineModel,
+      })();
+
+      expect(dispatchSetTimelineRangeDatePicker).toHaveBeenCalledWith({
+        from: 1585233356356,
+        to: 1585233716356,
+      });
+    });
+
+    test('it invokes add timeline dispatch', () => {
+      timelineDispatch({
+        duplicate: true,
+        id: 'timeline-1',
+        from: 1585233356356,
+        to: 1585233716356,
+        notes: [],
+        timeline: mockTimelineModel,
+      })();
+
+      expect(dispatchAddTimeline).toHaveBeenCalledWith({
+        id: 'timeline-1',
+        timeline: mockTimelineModel,
+      });
+    });
+
+    test('it does not invoke kql filter query dispatches if timeline.kqlQuery.filterQuery is null', () => {
+      timelineDispatch({
+        duplicate: true,
+        id: 'timeline-1',
+        from: 1585233356356,
+        to: 1585233716356,
+        notes: [],
+        timeline: mockTimelineModel,
+      })();
+
+      expect(dispatchSetKqlFilterQueryDraft).not.toHaveBeenCalled();
+      expect(dispatchApplyKqlFilterQuery).not.toHaveBeenCalled();
+    });
+
+    test('it does not invoke notes dispatch if duplicate is true', () => {
+      timelineDispatch({
+        duplicate: true,
+        id: 'timeline-1',
+        from: 1585233356356,
+        to: 1585233716356,
+        notes: [],
+        timeline: mockTimelineModel,
+      })();
+
+      expect(dispatchAddNotes).not.toHaveBeenCalled();
+    });
+
+    test('it does not invoke kql filter query dispatches if timeline.kqlQuery.kuery is null', () => {
+      const mockTimeline = {
+        ...mockTimelineModel,
+        kqlQuery: {
+          filterQuery: {
+            kuery: null,
+            serializedQuery: 'some-serialized-query',
+          },
+          filterQueryDraft: null,
+        },
+      };
+      timelineDispatch({
+        duplicate: true,
+        id: 'timeline-1',
+        from: 1585233356356,
+        to: 1585233716356,
+        notes: [],
+        timeline: mockTimeline,
+      })();
+
+      expect(dispatchSetKqlFilterQueryDraft).not.toHaveBeenCalled();
+      expect(dispatchApplyKqlFilterQuery).not.toHaveBeenCalled();
+    });
+
+    test('it invokes kql filter query dispatches if timeline.kqlQuery.filterQuery.kuery is not null', () => {
+      const mockTimeline = {
+        ...mockTimelineModel,
+        kqlQuery: {
+          filterQuery: {
+            kuery: { expression: 'expression', kind: 'kuery' as KueryFilterQueryKind },
+            serializedQuery: 'some-serialized-query',
+          },
+          filterQueryDraft: null,
+        },
+      };
+      timelineDispatch({
+        duplicate: true,
+        id: 'timeline-1',
+        from: 1585233356356,
+        to: 1585233716356,
+        notes: [],
+        timeline: mockTimeline,
+      })();
+
+      expect(dispatchSetKqlFilterQueryDraft).toHaveBeenCalledWith({
+        id: 'timeline-1',
+        filterQueryDraft: {
+          kind: 'kuery',
+          expression: 'expression',
+        },
+      });
+      expect(dispatchApplyKqlFilterQuery).toHaveBeenCalledWith({
+        id: 'timeline-1',
+        filterQuery: {
+          kuery: {
+            kind: 'kuery',
+            expression: 'expression',
+          },
+          serializedQuery: 'some-serialized-query',
+        },
+      });
+    });
+
+    test('it invokes dispatchAddNotes if duplicate is false', () => {
+      timelineDispatch({
+        duplicate: false,
+        id: 'timeline-1',
+        from: 1585233356356,
+        to: 1585233716356,
+        notes: [
+          {
+            created: 1585233356356,
+            updated: 1585233356356,
+            noteId: 'note-id',
+            note: 'I am a note',
+          },
+        ],
+        timeline: mockTimelineModel,
+      })();
+
+      expect(dispatchAddGlobalTimelineNote).not.toHaveBeenCalled();
+      expect(dispatchUpdateNote).not.toHaveBeenCalled();
+      expect(dispatchAddNotes).toHaveBeenCalledWith({
+        notes: [
+          {
+            created: new Date('2020-03-26T14:35:56.356Z'),
+            id: 'note-id',
+            lastEdit: new Date('2020-03-26T14:35:56.356Z'),
+            note: 'I am a note',
+            user: 'unknown',
+            saveObjectId: 'note-id',
+            version: undefined,
+          },
+        ],
+      });
+    });
+
+    test('it invokes dispatch to create a timeline note if duplicate is true and ruleNote exists', () => {
+      timelineDispatch({
+        duplicate: true,
+        id: 'timeline-1',
+        from: 1585233356356,
+        to: 1585233716356,
+        notes: [],
+        timeline: mockTimelineModel,
+        ruleNote: '# this would be some markdown',
+      })();
+      const expectedNote: Note = {
+        created: new Date(anchor),
+        id: 'uuid.v4()',
+        lastEdit: null,
+        note: '# this would be some markdown',
+        saveObjectId: null,
+        user: 'elastic',
+        version: null,
+      };
+
+      expect(dispatchAddNotes).not.toHaveBeenCalled();
+      expect(dispatchUpdateNote).toHaveBeenCalledWith({ note: expectedNote });
+      expect(dispatchAddGlobalTimelineNote).toHaveBeenLastCalledWith({
+        id: 'timeline-1',
+        noteId: 'uuid.v4()',
+      });
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/timelines/components/open_timeline/helpers.ts b/x-pack/plugins/siem/public/timelines/components/open_timeline/helpers.ts
new file mode 100644
index 00000000000000..df433f147490e4
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/open_timeline/helpers.ts
@@ -0,0 +1,318 @@
+/*
+ * 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 ApolloClient from 'apollo-client';
+import { getOr, set, isEmpty } from 'lodash/fp';
+import { Action } from 'typescript-fsa';
+import uuid from 'uuid';
+import { Dispatch } from 'redux';
+import { oneTimelineQuery } from '../../containers/one/index.gql_query';
+import { TimelineResult, GetOneTimeline, NoteResult } from '../../../graphql/types';
+import {
+  addNotes as dispatchAddNotes,
+  updateNote as dispatchUpdateNote,
+} from '../../../common/store/app/actions';
+import { setTimelineRangeDatePicker as dispatchSetTimelineRangeDatePicker } from '../../../common/store/inputs/actions';
+import {
+  setKqlFilterQueryDraft as dispatchSetKqlFilterQueryDraft,
+  applyKqlFilterQuery as dispatchApplyKqlFilterQuery,
+  addTimeline as dispatchAddTimeline,
+  addNote as dispatchAddGlobalTimelineNote,
+} from '../../../timelines/store/timeline/actions';
+
+import { ColumnHeaderOptions, TimelineModel } from '../../../timelines/store/timeline/model';
+import { timelineDefaults } from '../../../timelines/store/timeline/defaults';
+import {
+  defaultColumnHeaderType,
+  defaultHeaders,
+} from '../timeline/body/column_headers/default_headers';
+import {
+  DEFAULT_DATE_COLUMN_MIN_WIDTH,
+  DEFAULT_COLUMN_MIN_WIDTH,
+} from '../timeline/body/constants';
+
+import { OpenTimelineResult, UpdateTimeline, DispatchUpdateTimeline } from './types';
+import { getTimeRangeSettings } from '../../../common/utils/default_date_settings';
+import { createNote } from '../notes/helpers';
+
+export const OPEN_TIMELINE_CLASS_NAME = 'open-timeline';
+
+/** Returns a count of the pinned events in a timeline */
+export const getPinnedEventCount = ({ pinnedEventIds }: OpenTimelineResult): number =>
+  pinnedEventIds != null ? Object.keys(pinnedEventIds).length : 0;
+
+/** Returns the sum of all notes added to pinned events and notes applicable to the timeline */
+export const getNotesCount = ({ eventIdToNoteIds, noteIds }: OpenTimelineResult): number => {
+  const eventNoteCount =
+    eventIdToNoteIds != null
+      ? Object.keys(eventIdToNoteIds).reduce<number>(
+          (count, eventId) => count + eventIdToNoteIds[eventId].length,
+          0
+        )
+      : 0;
+
+  const globalNoteCount = noteIds != null ? noteIds.length : 0;
+
+  return eventNoteCount + globalNoteCount;
+};
+
+/** Returns true if the timeline is untitlied */
+export const isUntitled = ({ title }: OpenTimelineResult): boolean =>
+  title == null || title.trim().length === 0;
+
+const omitTypename = (key: string, value: keyof TimelineModel) =>
+  key === '__typename' ? undefined : value;
+
+export const omitTypenameInTimeline = (timeline: TimelineResult): TimelineResult =>
+  JSON.parse(JSON.stringify(timeline), omitTypename);
+
+const parseString = (params: string) => {
+  try {
+    return JSON.parse(params);
+  } catch {
+    return params;
+  }
+};
+
+export const defaultTimelineToTimelineModel = (
+  timeline: TimelineResult,
+  duplicate: boolean
+): TimelineModel => {
+  return Object.entries({
+    ...timeline,
+    columns:
+      timeline.columns != null
+        ? timeline.columns.map(col => {
+            const timelineCols: ColumnHeaderOptions = {
+              ...col,
+              columnHeaderType: defaultColumnHeaderType,
+              id: col.id != null ? col.id : 'unknown',
+              placeholder: col.placeholder != null ? col.placeholder : undefined,
+              category: col.category != null ? col.category : undefined,
+              description: col.description != null ? col.description : undefined,
+              example: col.example != null ? col.example : undefined,
+              type: col.type != null ? col.type : undefined,
+              aggregatable: col.aggregatable != null ? col.aggregatable : undefined,
+              width:
+                col.id === '@timestamp' ? DEFAULT_DATE_COLUMN_MIN_WIDTH : DEFAULT_COLUMN_MIN_WIDTH,
+            };
+            return timelineCols;
+          })
+        : defaultHeaders,
+    eventIdToNoteIds: duplicate
+      ? {}
+      : timeline.eventIdToNoteIds != null
+      ? timeline.eventIdToNoteIds.reduce((acc, note) => {
+          if (note.eventId != null) {
+            const eventNotes = getOr([], note.eventId, acc);
+            return { ...acc, [note.eventId]: [...eventNotes, note.noteId] };
+          }
+          return acc;
+        }, {})
+      : {},
+    filters:
+      timeline.filters != null
+        ? timeline.filters.map(filter => ({
+            $state: {
+              store: 'appState',
+            },
+            meta: {
+              ...filter.meta,
+              ...(filter.meta && filter.meta.field != null
+                ? { params: parseString(filter.meta.field) }
+                : {}),
+              ...(filter.meta && filter.meta.params != null
+                ? { params: parseString(filter.meta.params) }
+                : {}),
+              ...(filter.meta && filter.meta.value != null
+                ? { value: parseString(filter.meta.value) }
+                : {}),
+            },
+            ...(filter.exists != null ? { exists: parseString(filter.exists) } : {}),
+            ...(filter.match_all != null ? { exists: parseString(filter.match_all) } : {}),
+            ...(filter.missing != null ? { exists: parseString(filter.missing) } : {}),
+            ...(filter.query != null ? { query: parseString(filter.query) } : {}),
+            ...(filter.range != null ? { range: parseString(filter.range) } : {}),
+            ...(filter.script != null ? { exists: parseString(filter.script) } : {}),
+          }))
+        : [],
+    isFavorite: duplicate
+      ? false
+      : timeline.favorite != null
+      ? timeline.favorite.length > 0
+      : false,
+    noteIds: duplicate ? [] : timeline.noteIds != null ? timeline.noteIds : [],
+    pinnedEventIds: duplicate
+      ? {}
+      : timeline.pinnedEventIds != null
+      ? timeline.pinnedEventIds.reduce(
+          (acc, pinnedEventId) => ({ ...acc, [pinnedEventId]: true }),
+          {}
+        )
+      : {},
+    pinnedEventsSaveObject: duplicate
+      ? {}
+      : timeline.pinnedEventsSaveObject != null
+      ? timeline.pinnedEventsSaveObject.reduce(
+          (acc, pinnedEvent) => ({
+            ...acc,
+            ...(pinnedEvent.eventId != null ? { [pinnedEvent.eventId]: pinnedEvent } : {}),
+          }),
+          {}
+        )
+      : {},
+    id: duplicate ? '' : timeline.savedObjectId,
+    savedObjectId: duplicate ? null : timeline.savedObjectId,
+    version: duplicate ? null : timeline.version,
+    title: duplicate ? '' : timeline.title || '',
+    templateTimelineId: duplicate ? null : timeline.templateTimelineId,
+    templateTimelineVersion: duplicate ? null : timeline.templateTimelineVersion,
+  }).reduce((acc: TimelineModel, [key, value]) => (value != null ? set(key, value, acc) : acc), {
+    ...timelineDefaults,
+    id: '',
+  });
+};
+
+export const formatTimelineResultToModel = (
+  timelineToOpen: TimelineResult,
+  duplicate: boolean = false
+): { notes: NoteResult[] | null | undefined; timeline: TimelineModel } => {
+  const { notes, ...timelineModel } = timelineToOpen;
+  return {
+    notes,
+    timeline: defaultTimelineToTimelineModel(timelineModel, duplicate),
+  };
+};
+
+export interface QueryTimelineById<TCache> {
+  apolloClient: ApolloClient<TCache> | ApolloClient<{}> | undefined;
+  duplicate: boolean;
+  timelineId: string;
+  onOpenTimeline?: (timeline: TimelineModel) => void;
+  openTimeline?: boolean;
+  updateIsLoading: ({
+    id,
+    isLoading,
+  }: {
+    id: string;
+    isLoading: boolean;
+  }) => Action<{ id: string; isLoading: boolean }>;
+  updateTimeline: DispatchUpdateTimeline;
+}
+
+export const queryTimelineById = <TCache>({
+  apolloClient,
+  duplicate = false,
+  timelineId,
+  onOpenTimeline,
+  openTimeline = true,
+  updateIsLoading,
+  updateTimeline,
+}: QueryTimelineById<TCache>) => {
+  updateIsLoading({ id: 'timeline-1', isLoading: true });
+  if (apolloClient) {
+    apolloClient
+      .query<GetOneTimeline.Query, GetOneTimeline.Variables>({
+        query: oneTimelineQuery,
+        fetchPolicy: 'no-cache',
+        variables: { id: timelineId },
+      })
+      // eslint-disable-next-line
+      .then(result => {
+        const timelineToOpen: TimelineResult = omitTypenameInTimeline(
+          getOr({}, 'data.getOneTimeline', result)
+        );
+
+        const { timeline, notes } = formatTimelineResultToModel(timelineToOpen, duplicate);
+        if (onOpenTimeline != null) {
+          onOpenTimeline(timeline);
+        } else if (updateTimeline) {
+          const { from, to } = getTimeRangeSettings();
+          updateTimeline({
+            duplicate,
+            from: getOr(from, 'dateRange.start', timeline),
+            id: 'timeline-1',
+            notes,
+            timeline: {
+              ...timeline,
+              show: openTimeline,
+            },
+            to: getOr(to, 'dateRange.end', timeline),
+          })();
+        }
+      })
+      .finally(() => {
+        updateIsLoading({ id: 'timeline-1', isLoading: false });
+      });
+  }
+};
+
+export const dispatchUpdateTimeline = (dispatch: Dispatch): DispatchUpdateTimeline => ({
+  duplicate,
+  id,
+  from,
+  notes,
+  timeline,
+  to,
+  ruleNote,
+}: UpdateTimeline): (() => void) => () => {
+  dispatch(dispatchSetTimelineRangeDatePicker({ from, to }));
+  dispatch(dispatchAddTimeline({ id, timeline }));
+  if (
+    timeline.kqlQuery != null &&
+    timeline.kqlQuery.filterQuery != null &&
+    timeline.kqlQuery.filterQuery.kuery != null &&
+    timeline.kqlQuery.filterQuery.kuery.expression !== ''
+  ) {
+    dispatch(
+      dispatchSetKqlFilterQueryDraft({
+        id,
+        filterQueryDraft: {
+          kind: 'kuery',
+          expression: timeline.kqlQuery.filterQuery.kuery.expression || '',
+        },
+      })
+    );
+    dispatch(
+      dispatchApplyKqlFilterQuery({
+        id,
+        filterQuery: {
+          kuery: {
+            kind: 'kuery',
+            expression: timeline.kqlQuery.filterQuery.kuery.expression || '',
+          },
+          serializedQuery: timeline.kqlQuery.filterQuery.serializedQuery || '',
+        },
+      })
+    );
+  }
+
+  if (duplicate && ruleNote != null && !isEmpty(ruleNote)) {
+    const getNewNoteId = (): string => uuid.v4();
+    const newNote = createNote({ newNote: ruleNote, getNewNoteId });
+    dispatch(dispatchUpdateNote({ note: newNote }));
+    dispatch(dispatchAddGlobalTimelineNote({ noteId: newNote.id, id }));
+  }
+
+  if (!duplicate) {
+    dispatch(
+      dispatchAddNotes({
+        notes:
+          notes != null
+            ? notes.map((note: NoteResult) => ({
+                created: note.created != null ? new Date(note.created) : new Date(),
+                id: note.noteId,
+                lastEdit: note.updated != null ? new Date(note.updated) : new Date(),
+                note: note.note || '',
+                user: note.updatedBy || 'unknown',
+                saveObjectId: note.noteId,
+                version: note.version,
+              }))
+            : [],
+      })
+    );
+  }
+};
diff --git a/x-pack/plugins/siem/public/timelines/components/open_timeline/index.test.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/index.test.tsx
new file mode 100644
index 00000000000000..52197b92bdfb12
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/open_timeline/index.test.tsx
@@ -0,0 +1,658 @@
+/*
+ * 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 euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
+import { mount } from 'enzyme';
+import { MockedProvider } from 'react-apollo/test-utils';
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+
+import { wait } from '../../../common/lib/helpers';
+import { TestProviderWithoutDragAndDrop, apolloClient } from '../../../common/mock/test_providers';
+import { mockOpenTimelineQueryResults } from '../../../common/mock/timeline_results';
+import { DEFAULT_SEARCH_RESULTS_PER_PAGE } from '../../pages/timelines_page';
+
+import { NotePreviews } from './note_previews';
+import { OPEN_TIMELINE_CLASS_NAME } from './helpers';
+import { TimelineTabsStyle } from './types';
+
+import { StatefulOpenTimeline } from '.';
+import { useGetAllTimeline, getAllTimeline } from '../../containers/all';
+jest.mock('../../../common/lib/kibana');
+jest.mock('../../containers/all', () => {
+  const originalModule = jest.requireActual('../../containers/all');
+  return {
+    ...originalModule,
+    useGetAllTimeline: jest.fn(),
+    getAllTimeline: originalModule.getAllTimeline,
+  };
+});
+jest.mock('./use_timeline_types', () => {
+  return {
+    useTimelineTypes: jest.fn().mockReturnValue({
+      timelineType: 'default',
+      timelineTabs: <div data-test-subj="timeline-tab" />,
+      timelineFilters: <div data-test-subj="timeline-filter" />,
+    }),
+  };
+});
+
+describe('StatefulOpenTimeline', () => {
+  const theme = () => ({ eui: euiDarkVars, darkMode: true });
+  const title = 'All Timelines / Open Timelines';
+  beforeEach(() => {
+    ((useGetAllTimeline as unknown) as jest.Mock).mockReturnValue({
+      fetchAllTimeline: jest.fn(),
+      timelines: getAllTimeline(
+        '',
+        mockOpenTimelineQueryResults[0].result.data?.getAllTimeline?.timeline ?? []
+      ),
+      loading: false,
+      totalCount: mockOpenTimelineQueryResults[0].result.data.getAllTimeline.totalCount,
+      refetch: jest.fn(),
+    });
+  });
+
+  test('it has the expected initial state', () => {
+    const wrapper = mount(
+      <ThemeProvider theme={theme}>
+        <TestProviderWithoutDragAndDrop>
+          <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
+            <StatefulOpenTimeline
+              data-test-subj="stateful-timeline"
+              apolloClient={apolloClient}
+              isModal={false}
+              defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
+              title={title}
+            />
+          </MockedProvider>
+        </TestProviderWithoutDragAndDrop>
+      </ThemeProvider>
+    );
+
+    const componentProps = wrapper
+      .find('[data-test-subj="open-timeline"]')
+      .last()
+      .props();
+
+    expect(componentProps).toEqual({
+      ...componentProps,
+      itemIdToExpandedNotesRowMap: {},
+      onlyFavorites: false,
+      pageIndex: 0,
+      pageSize: 10,
+      query: '',
+      selectedItems: [],
+      sortDirection: 'desc',
+      sortField: 'updated',
+    });
+  });
+
+  describe('#onQueryChange', () => {
+    test('it updates the query state with the expected trimmed value when the user enters a query', () => {
+      const wrapper = mount(
+        <ThemeProvider theme={theme}>
+          <TestProviderWithoutDragAndDrop>
+            <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
+              <StatefulOpenTimeline
+                data-test-subj="stateful-timeline"
+                apolloClient={apolloClient}
+                isModal={false}
+                defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
+                title={title}
+              />
+            </MockedProvider>
+          </TestProviderWithoutDragAndDrop>
+        </ThemeProvider>
+      );
+      wrapper
+        .find('[data-test-subj="search-bar"] input')
+        .simulate('keyup', { keyCode: 13, target: { value: '   abcd   ' } });
+      expect(
+        wrapper
+          .find('[data-test-subj="search-row"]')
+          .first()
+          .prop('query')
+      ).toEqual('abcd');
+    });
+
+    test('it appends the word "with" to the Showing in Timelines message when the user enters a query', async () => {
+      const wrapper = mount(
+        <ThemeProvider theme={theme}>
+          <TestProviderWithoutDragAndDrop>
+            <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
+              <StatefulOpenTimeline
+                apolloClient={apolloClient}
+                isModal={false}
+                defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
+                title={title}
+              />
+            </MockedProvider>
+          </TestProviderWithoutDragAndDrop>
+        </ThemeProvider>
+      );
+
+      await wait();
+
+      wrapper
+        .find('[data-test-subj="search-bar"] input')
+        .simulate('keyup', { keyCode: 13, target: { value: '   abcd   ' } });
+
+      expect(
+        wrapper
+          .find('[data-test-subj="query-message"]')
+          .first()
+          .text()
+      ).toContain('Showing: 11 timelines with');
+    });
+
+    test('echos (renders) the query when the user enters a query', async () => {
+      const wrapper = mount(
+        <ThemeProvider theme={theme}>
+          <TestProviderWithoutDragAndDrop>
+            <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
+              <StatefulOpenTimeline
+                apolloClient={apolloClient}
+                isModal={false}
+                defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
+                title={title}
+              />
+            </MockedProvider>
+          </TestProviderWithoutDragAndDrop>
+        </ThemeProvider>
+      );
+
+      await wait();
+
+      wrapper
+        .find('[data-test-subj="search-bar"] input')
+        .simulate('keyup', { keyCode: 13, target: { value: '   abcd   ' } });
+
+      expect(
+        wrapper
+          .find('[data-test-subj="selectable-query-text"]')
+          .first()
+          .text()
+      ).toEqual('with "abcd"');
+    });
+  });
+
+  describe('#focusInput', () => {
+    test('focuses the input when the component mounts', async () => {
+      const wrapper = mount(
+        <ThemeProvider theme={theme}>
+          <TestProviderWithoutDragAndDrop>
+            <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
+              <StatefulOpenTimeline
+                apolloClient={apolloClient}
+                isModal={false}
+                defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
+                title={title}
+              />
+            </MockedProvider>
+          </TestProviderWithoutDragAndDrop>
+        </ThemeProvider>
+      );
+
+      await wait();
+
+      expect(
+        wrapper
+          .find(`.${OPEN_TIMELINE_CLASS_NAME} input`)
+          .first()
+          .getDOMNode().id === document.activeElement!.id
+      ).toBe(true);
+    });
+  });
+
+  describe('#onAddTimelinesToFavorites', () => {
+    // This functionality is hiding for now and waiting to see the light in the near future
+    test.skip('it invokes addTimelinesToFavorites with the selected timelines when the button is clicked', async () => {
+      const addTimelinesToFavorites = jest.fn();
+
+      const wrapper = mount(
+        <ThemeProvider theme={theme}>
+          <TestProviderWithoutDragAndDrop>
+            <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
+              <StatefulOpenTimeline
+                apolloClient={apolloClient}
+                isModal={false}
+                defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
+                title={title}
+              />
+            </MockedProvider>
+          </TestProviderWithoutDragAndDrop>
+        </ThemeProvider>
+      );
+
+      await wait();
+
+      wrapper
+        .find('.euiCheckbox__input')
+        .first()
+        .simulate('change', { target: { checked: true } });
+
+      wrapper
+        .find('[data-test-subj="favorite-selected"]')
+        .first()
+        .simulate('click');
+
+      expect(addTimelinesToFavorites).toHaveBeenCalledWith([
+        'saved-timeline-11',
+        'saved-timeline-10',
+        'saved-timeline-9',
+        'saved-timeline-8',
+        'saved-timeline-6',
+        'saved-timeline-5',
+        'saved-timeline-4',
+        'saved-timeline-3',
+        'saved-timeline-2',
+      ]);
+    });
+  });
+
+  describe('#onDeleteSelected', () => {
+    // TODO - Have been skip because we need to re-implement the test as the component changed
+    test.skip('it invokes deleteTimelines with the selected timelines when the button is clicked', async () => {
+      const deleteTimelines = jest.fn();
+
+      const wrapper = mount(
+        <ThemeProvider theme={theme}>
+          <TestProviderWithoutDragAndDrop>
+            <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
+              <StatefulOpenTimeline
+                apolloClient={apolloClient}
+                isModal={false}
+                defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
+                title={title}
+              />
+            </MockedProvider>
+          </TestProviderWithoutDragAndDrop>
+        </ThemeProvider>
+      );
+
+      await wait();
+
+      wrapper
+        .find('.euiCheckbox__input')
+        .first()
+        .simulate('change', { target: { checked: true } });
+
+      wrapper
+        .find('[data-test-subj="delete-selected"]')
+        .first()
+        .simulate('click');
+
+      expect(deleteTimelines).toHaveBeenCalledWith([
+        'saved-timeline-11',
+        'saved-timeline-10',
+        'saved-timeline-9',
+        'saved-timeline-8',
+        'saved-timeline-6',
+        'saved-timeline-5',
+        'saved-timeline-4',
+        'saved-timeline-3',
+        'saved-timeline-2',
+      ]);
+    });
+  });
+
+  describe('#onSelectionChange', () => {
+    test('it updates the selection state when timelines are selected', async () => {
+      const wrapper = mount(
+        <ThemeProvider theme={theme}>
+          <TestProviderWithoutDragAndDrop>
+            <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
+              <StatefulOpenTimeline
+                data-test-subj="stateful-timeline"
+                apolloClient={apolloClient}
+                isModal={false}
+                defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
+                title={title}
+              />
+            </MockedProvider>
+          </TestProviderWithoutDragAndDrop>
+        </ThemeProvider>
+      );
+
+      await wait();
+
+      wrapper
+        .find('.euiCheckbox__input')
+        .first()
+        .simulate('change', { target: { checked: true } });
+
+      const selectedItems: [] = wrapper
+        .find('[data-test-subj="open-timeline"]')
+        .last()
+        .prop('selectedItems');
+
+      expect(selectedItems.length).toEqual(13); // 13 because we did mock 13 timelines in the query
+    });
+  });
+
+  describe('#onTableChange', () => {
+    test('it updates the sort state when the user clicks on a column to sort it', () => {
+      const wrapper = mount(
+        <ThemeProvider theme={theme}>
+          <TestProviderWithoutDragAndDrop>
+            <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
+              <StatefulOpenTimeline
+                data-test-subj="stateful-timeline"
+                apolloClient={apolloClient}
+                isModal={false}
+                defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
+                title={title}
+              />
+            </MockedProvider>
+          </TestProviderWithoutDragAndDrop>
+        </ThemeProvider>
+      );
+
+      expect(
+        wrapper
+          .find('[data-test-subj="open-timeline"]')
+          .last()
+          .prop('sortDirection')
+      ).toEqual('desc');
+
+      wrapper
+        .find('thead tr th button')
+        .at(0)
+        .simulate('click');
+
+      expect(
+        wrapper
+          .find('[data-test-subj="open-timeline"]')
+          .last()
+          .prop('sortDirection')
+      ).toEqual('asc');
+    });
+  });
+
+  describe('#onToggleOnlyFavorites', () => {
+    test('it updates the onlyFavorites state when the user clicks the Only Favorites button', () => {
+      const wrapper = mount(
+        <ThemeProvider theme={theme}>
+          <TestProviderWithoutDragAndDrop>
+            <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
+              <StatefulOpenTimeline
+                data-test-subj="stateful-timeline"
+                apolloClient={apolloClient}
+                isModal={false}
+                defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
+                title={title}
+              />
+            </MockedProvider>
+          </TestProviderWithoutDragAndDrop>
+        </ThemeProvider>
+      );
+
+      expect(
+        wrapper
+          .find('[data-test-subj="open-timeline"]')
+          .last()
+          .prop('onlyFavorites')
+      ).toEqual(false);
+
+      wrapper
+        .find('[data-test-subj="only-favorites-toggle"]')
+        .first()
+        .simulate('click');
+
+      expect(
+        wrapper
+          .find('[data-test-subj="open-timeline"]')
+          .last()
+          .prop('onlyFavorites')
+      ).toEqual(true);
+    });
+  });
+
+  describe('#onToggleShowNotes', () => {
+    test('it updates the itemIdToExpandedNotesRowMap state when the user clicks the expand notes button', async () => {
+      const wrapper = mount(
+        <ThemeProvider theme={theme}>
+          <TestProviderWithoutDragAndDrop>
+            <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
+              <StatefulOpenTimeline
+                data-test-subj="stateful-timeline"
+                apolloClient={apolloClient}
+                isModal={false}
+                defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
+                title={title}
+              />
+            </MockedProvider>
+          </TestProviderWithoutDragAndDrop>
+        </ThemeProvider>
+      );
+
+      await wait();
+      wrapper.update();
+
+      expect(
+        wrapper
+          .find('[data-test-subj="open-timeline"]')
+          .last()
+          .prop('itemIdToExpandedNotesRowMap')
+      ).toEqual({});
+
+      wrapper
+        .find('[data-test-subj="expand-notes"]')
+        .first()
+        .simulate('click');
+
+      expect(
+        wrapper
+          .find('[data-test-subj="open-timeline"]')
+          .last()
+          .prop('itemIdToExpandedNotesRowMap')
+      ).toEqual({
+        '10849df0-7b44-11e9-a608-ab3d811609': (
+          <NotePreviews
+            notes={
+              mockOpenTimelineQueryResults[0].result.data!.getAllTimeline.timeline[0].notes != null
+                ? mockOpenTimelineQueryResults[0].result.data!.getAllTimeline.timeline[0].notes.map(
+                    note => ({ ...note, savedObjectId: note.noteId })
+                  )
+                : []
+            }
+          />
+        ),
+      });
+    });
+
+    test('it renders the expanded notes when the expand button is clicked', async () => {
+      const wrapper = mount(
+        <ThemeProvider theme={theme}>
+          <TestProviderWithoutDragAndDrop>
+            <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
+              <StatefulOpenTimeline
+                data-test-subj="stateful-timeline"
+                apolloClient={apolloClient}
+                isModal={false}
+                defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
+                title={title}
+              />
+            </MockedProvider>
+          </TestProviderWithoutDragAndDrop>
+        </ThemeProvider>
+      );
+
+      await wait();
+
+      wrapper.update();
+
+      wrapper
+        .find('[data-test-subj="expand-notes"]')
+        .first()
+        .simulate('click');
+      expect(wrapper.find('[data-test-subj="note-previews-container"]').exists()).toEqual(true);
+      expect(wrapper.find('[data-test-subj="updated-by"]').exists()).toEqual(true);
+
+      expect(
+        wrapper
+          .find('[data-test-subj="note-previews-container"]')
+          .find('[data-test-subj="updated-by"]')
+          .first()
+          .text()
+      ).toEqual('elastic');
+    });
+
+    test('it renders the title', async () => {
+      const wrapper = mount(
+        <ThemeProvider theme={theme}>
+          <TestProviderWithoutDragAndDrop>
+            <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
+              <StatefulOpenTimeline
+                data-test-subj="stateful-timeline"
+                apolloClient={apolloClient}
+                isModal={false}
+                defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
+                title={title}
+              />
+            </MockedProvider>
+          </TestProviderWithoutDragAndDrop>
+        </ThemeProvider>
+      );
+
+      await wait();
+
+      expect(wrapper.find(`[data-test-subj="timeline-${TimelineTabsStyle.tab}"]`).exists()).toEqual(
+        true
+      );
+    });
+  });
+
+  describe('#resetSelectionState', () => {
+    test('when the user deletes selected timelines, resetSelectionState is invoked to clear the selection state', async () => {
+      const wrapper = mount(
+        <ThemeProvider theme={theme}>
+          <TestProviderWithoutDragAndDrop>
+            <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
+              <StatefulOpenTimeline
+                data-test-subj="stateful-timeline"
+                apolloClient={apolloClient}
+                isModal={false}
+                defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
+                title={title}
+              />
+            </MockedProvider>
+          </TestProviderWithoutDragAndDrop>
+        </ThemeProvider>
+      );
+      const getSelectedItem = (): [] =>
+        wrapper
+          .find('[data-test-subj="open-timeline"]')
+          .last()
+          .prop('selectedItems');
+      await wait();
+      expect(getSelectedItem().length).toEqual(0);
+      wrapper
+        .find('.euiCheckbox__input')
+        .first()
+        .simulate('change', { target: { checked: true } });
+      expect(getSelectedItem().length).toEqual(13);
+    });
+  });
+
+  test('it renders the expected count of matching timelines when no query has been entered', async () => {
+    const wrapper = mount(
+      <ThemeProvider theme={theme}>
+        <MockedProvider addTypename={false}>
+          <TestProviderWithoutDragAndDrop>
+            <StatefulOpenTimeline
+              data-test-subj="stateful-timeline"
+              apolloClient={apolloClient}
+              isModal={false}
+              defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
+              title={title}
+            />
+          </TestProviderWithoutDragAndDrop>
+        </MockedProvider>
+      </ThemeProvider>
+    );
+
+    await wait();
+
+    wrapper.update();
+
+    expect(
+      wrapper
+        .find('[data-test-subj="query-message"]')
+        .first()
+        .text()
+    ).toContain('Showing: 11 timelines ');
+  });
+
+  // TODO - Have been skip because we need to re-implement the test as the component changed
+  test.skip('it invokes onOpenTimeline with the expected parameters when the hyperlink is clicked', async () => {
+    const onOpenTimeline = jest.fn();
+
+    const wrapper = mount(
+      <ThemeProvider theme={theme}>
+        <TestProviderWithoutDragAndDrop>
+          <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
+            <StatefulOpenTimeline
+              data-test-subj="stateful-timeline"
+              apolloClient={apolloClient}
+              isModal={false}
+              defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
+              title={title}
+            />
+          </MockedProvider>
+        </TestProviderWithoutDragAndDrop>
+      </ThemeProvider>
+    );
+
+    await wait();
+
+    wrapper
+      .find(
+        `[data-test-subj="title-${
+          mockOpenTimelineQueryResults[0].result.data!.getAllTimeline.timeline[0].savedObjectId
+        }"]`
+      )
+      .first()
+      .simulate('click');
+
+    expect(onOpenTimeline).toHaveBeenCalledWith({
+      duplicate: false,
+      timelineId: mockOpenTimelineQueryResults[0].result.data!.getAllTimeline.timeline[0]
+        .savedObjectId,
+    });
+  });
+
+  // TODO - Have been skip because we need to re-implement the test as the component changed
+  test.skip('it invokes onOpenTimeline with the expected params when the button is clicked', async () => {
+    const onOpenTimeline = jest.fn();
+
+    const wrapper = mount(
+      <ThemeProvider theme={theme}>
+        <TestProviderWithoutDragAndDrop>
+          <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
+            <StatefulOpenTimeline
+              data-test-subj="stateful-timeline"
+              apolloClient={apolloClient}
+              isModal={false}
+              defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
+              title={title}
+            />
+          </MockedProvider>
+        </TestProviderWithoutDragAndDrop>
+      </ThemeProvider>
+    );
+
+    await wait();
+
+    wrapper
+      .find('[data-test-subj="open-duplicate"]')
+      .first()
+      .simulate('click');
+
+    expect(onOpenTimeline).toBeCalledWith({ duplicate: true, timelineId: 'saved-timeline-11' });
+  });
+});
diff --git a/x-pack/plugins/siem/public/timelines/components/open_timeline/index.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/index.tsx
new file mode 100644
index 00000000000000..735ccdd19a5614
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/open_timeline/index.tsx
@@ -0,0 +1,343 @@
+/*
+ * 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 ApolloClient from 'apollo-client';
+import React, { useEffect, useState, useCallback } from 'react';
+import { connect, ConnectedProps } from 'react-redux';
+
+import { Dispatch } from 'redux';
+import { defaultHeaders } from '../timeline/body/column_headers/default_headers';
+import { deleteTimelineMutation } from '../../containers/delete/persist.gql_query';
+import { useGetAllTimeline } from '../../containers/all';
+import { DeleteTimelineMutation, SortFieldTimeline, Direction } from '../../../graphql/types';
+import { State } from '../../../common/store';
+import { ColumnHeaderOptions, TimelineModel } from '../../../timelines/store/timeline/model';
+import { timelineSelectors } from '../../../timelines/store/timeline';
+import { timelineDefaults } from '../../../timelines/store/timeline/defaults';
+import {
+  createTimeline as dispatchCreateNewTimeline,
+  updateIsLoading as dispatchUpdateIsLoading,
+} from '../../../timelines/store/timeline/actions';
+import { OpenTimeline } from './open_timeline';
+import { OPEN_TIMELINE_CLASS_NAME, queryTimelineById, dispatchUpdateTimeline } from './helpers';
+import { OpenTimelineModalBody } from './open_timeline_modal/open_timeline_modal_body';
+import {
+  ActionTimelineToShow,
+  DeleteTimelines,
+  EuiSearchBarQuery,
+  OnDeleteSelected,
+  OnOpenTimeline,
+  OnQueryChange,
+  OnSelectionChange,
+  OnTableChange,
+  OnTableChangeParams,
+  OpenTimelineProps,
+  OnToggleOnlyFavorites,
+  OpenTimelineResult,
+  OnToggleShowNotes,
+  OnDeleteOneTimeline,
+} from './types';
+import { DEFAULT_SORT_FIELD, DEFAULT_SORT_DIRECTION } from './constants';
+import { useTimelineTypes } from './use_timeline_types';
+
+interface OwnProps<TCache = object> {
+  apolloClient: ApolloClient<TCache>;
+  /** Displays open timeline in modal */
+  isModal: boolean;
+  closeModalTimeline?: () => void;
+  hideActions?: ActionTimelineToShow[];
+  onOpenTimeline?: (timeline: TimelineModel) => void;
+}
+
+export type OpenTimelineOwnProps = OwnProps &
+  Pick<
+    OpenTimelineProps,
+    'defaultPageSize' | 'title' | 'importDataModalToggle' | 'setImportDataModalToggle'
+  > &
+  PropsFromRedux;
+
+/** Returns a collection of selected timeline ids */
+export const getSelectedTimelineIds = (selectedItems: OpenTimelineResult[]): string[] =>
+  selectedItems.reduce<string[]>(
+    (validSelections, timelineResult) =>
+      timelineResult.savedObjectId != null
+        ? [...validSelections, timelineResult.savedObjectId]
+        : validSelections,
+    []
+  );
+
+/** Manages the state (e.g table selection) of the (pure) `OpenTimeline` component */
+export const StatefulOpenTimelineComponent = React.memo<OpenTimelineOwnProps>(
+  ({
+    apolloClient,
+    closeModalTimeline,
+    createNewTimeline,
+    defaultPageSize,
+    hideActions = [],
+    isModal = false,
+    importDataModalToggle,
+    onOpenTimeline,
+    setImportDataModalToggle,
+    timeline,
+    title,
+    updateTimeline,
+    updateIsLoading,
+  }) => {
+    /** Required by EuiTable for expandable rows: a map of `TimelineResult.savedObjectId` to rendered notes */
+    const [itemIdToExpandedNotesRowMap, setItemIdToExpandedNotesRowMap] = useState<
+      Record<string, JSX.Element>
+    >({});
+    /** Only query for favorite timelines when true */
+    const [onlyFavorites, setOnlyFavorites] = useState(false);
+    /** The requested page of results */
+    const [pageIndex, setPageIndex] = useState(0);
+    /** The requested size of each page of search results */
+    const [pageSize, setPageSize] = useState(defaultPageSize);
+    /** The current search criteria */
+    const [search, setSearch] = useState('');
+    /** The currently-selected timelines in the table */
+    const [selectedItems, setSelectedItems] = useState<OpenTimelineResult[]>([]);
+    /** The requested sort direction of the query results */
+    const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>(DEFAULT_SORT_DIRECTION);
+    /** The requested field to sort on */
+    const [sortField, setSortField] = useState(DEFAULT_SORT_FIELD);
+
+    const { timelineType, timelineTabs, timelineFilters } = useTimelineTypes();
+    const { fetchAllTimeline, timelines, loading, totalCount } = useGetAllTimeline();
+
+    const refetch = useCallback(() => {
+      fetchAllTimeline({
+        pageInfo: {
+          pageIndex: pageIndex + 1,
+          pageSize,
+        },
+        search,
+        sort: { sortField: sortField as SortFieldTimeline, sortOrder: sortDirection as Direction },
+        onlyUserFavorite: onlyFavorites,
+        timelineType,
+      });
+    }, [pageIndex, pageSize, search, sortField, sortDirection, timelineType, onlyFavorites]);
+
+    /** Invoked when the user presses enters to submit the text in the search input */
+    const onQueryChange: OnQueryChange = useCallback((query: EuiSearchBarQuery) => {
+      setSearch(query.queryText.trim());
+    }, []);
+
+    /** Focuses the input that filters the field browser */
+    const focusInput = () => {
+      const elements = document.querySelector<HTMLElement>(`.${OPEN_TIMELINE_CLASS_NAME} input`);
+
+      if (elements != null) {
+        elements.focus();
+      }
+    };
+
+    /* This feature will be implemented in the near future, so we are keeping it to know what to do */
+
+    /** Invoked when the user clicks the action to add the selected timelines to favorites */
+    // const onAddTimelinesToFavorites: OnAddTimelinesToFavorites = () => {
+    // const { addTimelinesToFavorites } = this.props;
+    // const { selectedItems } = this.state;
+    // if (addTimelinesToFavorites != null) {
+    //   addTimelinesToFavorites(getSelectedTimelineIds(selectedItems));
+    // TODO: it's not possible to clear the selection state of the newly-favorited
+    // items, because we can't pass the selection state as props to the table.
+    // See: https://github.com/elastic/eui/issues/1077
+    // TODO: the query must re-execute to show the results of the mutation
+    // }
+    // };
+
+    const deleteTimelines: DeleteTimelines = useCallback(
+      async (timelineIds: string[]) => {
+        if (timelineIds.includes(timeline.savedObjectId || '')) {
+          createNewTimeline({ id: 'timeline-1', columns: defaultHeaders, show: false });
+        }
+
+        await apolloClient.mutate<
+          DeleteTimelineMutation.Mutation,
+          DeleteTimelineMutation.Variables
+        >({
+          mutation: deleteTimelineMutation,
+          fetchPolicy: 'no-cache',
+          variables: { id: timelineIds },
+        });
+        refetch();
+      },
+      [apolloClient, createNewTimeline, refetch, timeline]
+    );
+
+    const onDeleteOneTimeline: OnDeleteOneTimeline = useCallback(
+      async (timelineIds: string[]) => {
+        await deleteTimelines(timelineIds);
+      },
+      [deleteTimelines]
+    );
+
+    /** Invoked when the user clicks the action to delete the selected timelines */
+    const onDeleteSelected: OnDeleteSelected = useCallback(async () => {
+      await deleteTimelines(getSelectedTimelineIds(selectedItems));
+
+      // NOTE: we clear the selection state below, but if the server fails to
+      // delete a timeline, it will remain selected in the table:
+      resetSelectionState();
+
+      // TODO: the query must re-execute to show the results of the deletion
+    }, [selectedItems, deleteTimelines]);
+
+    /** Invoked when the user selects (or de-selects) timelines */
+    const onSelectionChange: OnSelectionChange = useCallback(
+      (newSelectedItems: OpenTimelineResult[]) => {
+        setSelectedItems(newSelectedItems); // <-- this is NOT passed down as props to the table: https://github.com/elastic/eui/issues/1077
+      },
+      []
+    );
+
+    /** Invoked by the EUI table implementation when the user interacts with the table (i.e. to update sorting) */
+    const onTableChange: OnTableChange = useCallback(({ page, sort }: OnTableChangeParams) => {
+      const { index, size } = page;
+      const { field, direction } = sort;
+      setPageIndex(index);
+      setPageSize(size);
+      setSortDirection(direction);
+      setSortField(field);
+    }, []);
+
+    /** Invoked when the user toggles the option to only view favorite timelines */
+    const onToggleOnlyFavorites: OnToggleOnlyFavorites = useCallback(() => {
+      setOnlyFavorites(!onlyFavorites);
+    }, [onlyFavorites]);
+
+    /** Invoked when the user toggles the expansion or collapse of inline notes in a table row */
+    const onToggleShowNotes: OnToggleShowNotes = useCallback(
+      (newItemIdToExpandedNotesRowMap: Record<string, JSX.Element>) => {
+        setItemIdToExpandedNotesRowMap(newItemIdToExpandedNotesRowMap);
+      },
+      []
+    );
+
+    /** Resets the selection state such that all timelines are unselected */
+    const resetSelectionState = useCallback(() => {
+      setSelectedItems([]);
+    }, []);
+
+    const openTimeline: OnOpenTimeline = useCallback(
+      ({ duplicate, timelineId }: { duplicate: boolean; timelineId: string }) => {
+        if (isModal && closeModalTimeline != null) {
+          closeModalTimeline();
+        }
+
+        queryTimelineById({
+          apolloClient,
+          duplicate,
+          onOpenTimeline,
+          timelineId,
+          updateIsLoading,
+          updateTimeline,
+        });
+      },
+      [apolloClient, updateIsLoading, updateTimeline]
+    );
+
+    useEffect(() => {
+      focusInput();
+    }, []);
+
+    useEffect(() => {
+      refetch();
+    }, [refetch]);
+
+    return !isModal ? (
+      <OpenTimeline
+        data-test-subj={'open-timeline'}
+        deleteTimelines={onDeleteOneTimeline}
+        defaultPageSize={defaultPageSize}
+        isLoading={loading}
+        itemIdToExpandedNotesRowMap={itemIdToExpandedNotesRowMap}
+        importDataModalToggle={importDataModalToggle}
+        onAddTimelinesToFavorites={undefined}
+        onDeleteSelected={onDeleteSelected}
+        onlyFavorites={onlyFavorites}
+        onOpenTimeline={openTimeline}
+        onQueryChange={onQueryChange}
+        onSelectionChange={onSelectionChange}
+        onTableChange={onTableChange}
+        onToggleOnlyFavorites={onToggleOnlyFavorites}
+        onToggleShowNotes={onToggleShowNotes}
+        pageIndex={pageIndex}
+        pageSize={pageSize}
+        query={search}
+        refetch={refetch}
+        searchResults={timelines}
+        setImportDataModalToggle={setImportDataModalToggle}
+        selectedItems={selectedItems}
+        sortDirection={sortDirection}
+        sortField={sortField}
+        tabs={timelineTabs}
+        title={title}
+        totalSearchResultsCount={totalCount}
+      />
+    ) : (
+      <OpenTimelineModalBody
+        data-test-subj={'open-timeline-modal'}
+        deleteTimelines={onDeleteOneTimeline}
+        defaultPageSize={defaultPageSize}
+        hideActions={hideActions}
+        isLoading={loading}
+        itemIdToExpandedNotesRowMap={itemIdToExpandedNotesRowMap}
+        onAddTimelinesToFavorites={undefined}
+        onlyFavorites={onlyFavorites}
+        onOpenTimeline={openTimeline}
+        onQueryChange={onQueryChange}
+        onSelectionChange={onSelectionChange}
+        onTableChange={onTableChange}
+        onToggleOnlyFavorites={onToggleOnlyFavorites}
+        onToggleShowNotes={onToggleShowNotes}
+        pageIndex={pageIndex}
+        pageSize={pageSize}
+        query={search}
+        searchResults={timelines}
+        selectedItems={selectedItems}
+        sortDirection={sortDirection}
+        sortField={sortField}
+        tabs={timelineFilters}
+        title={title}
+        totalSearchResultsCount={totalCount}
+      />
+    );
+  }
+);
+
+const makeMapStateToProps = () => {
+  const getTimeline = timelineSelectors.getTimelineByIdSelector();
+  const mapStateToProps = (state: State) => {
+    const timeline = getTimeline(state, 'timeline-1') ?? timelineDefaults;
+    return {
+      timeline,
+    };
+  };
+  return mapStateToProps;
+};
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  createNewTimeline: ({
+    id,
+    columns,
+    show,
+  }: {
+    id: string;
+    columns: ColumnHeaderOptions[];
+    show?: boolean;
+  }) => dispatch(dispatchCreateNewTimeline({ id, columns, show })),
+  updateIsLoading: ({ id, isLoading }: { id: string; isLoading: boolean }) =>
+    dispatch(dispatchUpdateIsLoading({ id, isLoading })),
+  updateTimeline: dispatchUpdateTimeline(dispatch),
+});
+
+const connector = connect(makeMapStateToProps, mapDispatchToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export const StatefulOpenTimeline = connector(StatefulOpenTimelineComponent);
diff --git a/x-pack/plugins/siem/public/timelines/components/open_timeline/note_previews/index.test.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/note_previews/index.test.tsx
new file mode 100644
index 00000000000000..318e50bb67d2d2
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/open_timeline/note_previews/index.test.tsx
@@ -0,0 +1,188 @@
+/*
+ * 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 euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
+import { cloneDeep } from 'lodash/fp';
+import moment from 'moment';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+
+import { mockTimelineResults } from '../../../../common/mock/timeline_results';
+import { OpenTimelineResult, TimelineResultNote } from '../types';
+import { NotePreviews } from '.';
+
+describe('NotePreviews', () => {
+  const theme = () => ({ eui: euiDarkVars, darkMode: true });
+  let mockResults: OpenTimelineResult[];
+  let note1updated: number;
+  let note2updated: number;
+  let note3updated: number;
+
+  beforeEach(() => {
+    mockResults = cloneDeep(mockTimelineResults);
+    note1updated = moment('2019-03-24T04:12:33.000Z').valueOf();
+    note2updated = moment(note1updated)
+      .add(1, 'minute')
+      .valueOf();
+    note3updated = moment(note2updated)
+      .add(1, 'minute')
+      .valueOf();
+  });
+
+  test('it renders a note preview for each note when isModal is false', () => {
+    const hasNotes: OpenTimelineResult[] = [{ ...mockResults[0] }];
+
+    const wrapper = mountWithIntl(
+      <ThemeProvider theme={theme}>
+        <NotePreviews notes={hasNotes[0].notes} />
+      </ThemeProvider>
+    );
+
+    hasNotes[0].notes!.forEach(({ savedObjectId }) => {
+      expect(wrapper.find(`[data-test-subj="note-preview-${savedObjectId}"]`).exists()).toBe(true);
+    });
+  });
+
+  test('it renders a note preview for each note when isModal is true', () => {
+    const hasNotes: OpenTimelineResult[] = [{ ...mockResults[0] }];
+
+    const wrapper = mountWithIntl(
+      <ThemeProvider theme={theme}>
+        <NotePreviews notes={hasNotes[0].notes} />
+      </ThemeProvider>
+    );
+
+    hasNotes[0].notes!.forEach(({ savedObjectId }) => {
+      expect(wrapper.find(`[data-test-subj="note-preview-${savedObjectId}"]`).exists()).toBe(true);
+    });
+  });
+
+  test('it does NOT render the preview container if notes is undefined', () => {
+    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 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 notes={[]} />);
+
+    expect(wrapper.find('[data-test-subj="note-previews-container"]').exists()).toBe(false);
+  });
+
+  test('it filters-out non-unique savedObjectIds', () => {
+    const nonUniqueNotes: TimelineResultNote[] = [
+      {
+        note: '1',
+        savedObjectId: 'noteId1',
+        updated: note1updated,
+        updatedBy: 'alice',
+      },
+      {
+        note: '2 (savedObjectId is the same as the previous entry)',
+        savedObjectId: 'noteId1',
+        updated: note2updated,
+        updatedBy: 'alice',
+      },
+      {
+        note: '3',
+        savedObjectId: 'noteId2',
+        updated: note3updated,
+        updatedBy: 'bob',
+      },
+    ];
+
+    const wrapper = mountWithIntl(
+      <ThemeProvider theme={theme}>
+        <NotePreviews notes={nonUniqueNotes} />
+      </ThemeProvider>
+    );
+
+    expect(
+      wrapper
+        .find(`[data-test-subj="updated-by"]`)
+        .at(2)
+        .text()
+    ).toEqual('bob');
+  });
+
+  test('it filters-out null savedObjectIds', () => {
+    const nonUniqueNotes: TimelineResultNote[] = [
+      {
+        note: '1',
+        savedObjectId: 'noteId1',
+        updated: note1updated,
+        updatedBy: 'alice',
+      },
+      {
+        note: '2 (savedObjectId is null)',
+        savedObjectId: null,
+        updated: note2updated,
+        updatedBy: 'alice',
+      },
+      {
+        note: '3',
+        savedObjectId: 'noteId2',
+        updated: note3updated,
+        updatedBy: 'bob',
+      },
+    ];
+
+    const wrapper = mountWithIntl(
+      <ThemeProvider theme={theme}>
+        <NotePreviews notes={nonUniqueNotes} />
+      </ThemeProvider>
+    );
+
+    expect(
+      wrapper
+        .find(`[data-test-subj="updated-by"]`)
+        .at(2)
+        .text()
+    ).toEqual('bob');
+  });
+
+  test('it filters-out undefined savedObjectIds', () => {
+    const nonUniqueNotes: TimelineResultNote[] = [
+      {
+        note: '1',
+        savedObjectId: 'noteId1',
+        updated: note1updated,
+        updatedBy: 'alice',
+      },
+      {
+        note: 'b (savedObjectId is undefined)',
+        updated: note2updated,
+        updatedBy: 'alice',
+      },
+      {
+        note: 'c',
+        savedObjectId: 'noteId2',
+        updated: note3updated,
+        updatedBy: 'bob',
+      },
+    ];
+
+    const wrapper = mountWithIntl(
+      <ThemeProvider theme={theme}>
+        <NotePreviews notes={nonUniqueNotes} />
+      </ThemeProvider>
+    );
+
+    expect(
+      wrapper
+        .find(`[data-test-subj="updated-by"]`)
+        .at(2)
+        .text()
+    ).toEqual('bob');
+  });
+});
diff --git a/x-pack/plugins/siem/public/components/open_timeline/note_previews/index.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/note_previews/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/open_timeline/note_previews/index.tsx
rename to x-pack/plugins/siem/public/timelines/components/open_timeline/note_previews/index.tsx
diff --git a/x-pack/plugins/siem/public/components/open_timeline/note_previews/note_preview.test.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/note_previews/note_preview.test.tsx
similarity index 98%
rename from x-pack/plugins/siem/public/components/open_timeline/note_previews/note_preview.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/open_timeline/note_previews/note_preview.test.tsx
index 7cefaf08d76cb2..c0046e43eef306 100644
--- a/x-pack/plugins/siem/public/components/open_timeline/note_previews/note_preview.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/open_timeline/note_previews/note_preview.test.tsx
@@ -9,7 +9,7 @@ import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import React from 'react';
 import { ThemeProvider } from 'styled-components';
 
-import { getEmptyValue } from '../../empty_value';
+import { getEmptyValue } from '../../../../common/components/empty_value';
 import { NotePreview } from './note_preview';
 
 import * as i18n from '../translations';
diff --git a/x-pack/plugins/siem/public/components/open_timeline/note_previews/note_preview.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/note_previews/note_preview.tsx
similarity index 90%
rename from x-pack/plugins/siem/public/components/open_timeline/note_previews/note_preview.tsx
rename to x-pack/plugins/siem/public/timelines/components/open_timeline/note_previews/note_preview.tsx
index bb4a032734b5b9..d079a4bedcbaf3 100644
--- a/x-pack/plugins/siem/public/components/open_timeline/note_previews/note_preview.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/open_timeline/note_previews/note_preview.tsx
@@ -9,9 +9,9 @@ import { FormattedRelative } from '@kbn/i18n/react';
 import React from 'react';
 import styled from 'styled-components';
 
-import { getEmptyValue, defaultToEmptyTag } from '../../empty_value';
-import { FormattedDate } from '../../formatted_date';
-import { Markdown } from '../../markdown';
+import { getEmptyValue, defaultToEmptyTag } from '../../../../common/components/empty_value';
+import { FormattedDate } from '../../../../common/components/formatted_date';
+import { Markdown } from '../../../../common/components/markdown';
 import * as i18n from '../translations';
 import { TimelineResultNote } from '../types';
 
diff --git a/x-pack/plugins/siem/public/components/open_timeline/open_timeline.test.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/open_timeline.test.tsx
similarity index 98%
rename from x-pack/plugins/siem/public/components/open_timeline/open_timeline.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/open_timeline/open_timeline.test.tsx
index 449e1b169cea64..787da4ed6cf416 100644
--- a/x-pack/plugins/siem/public/components/open_timeline/open_timeline.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/open_timeline/open_timeline.test.tsx
@@ -10,14 +10,14 @@ import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import React from 'react';
 import { ThemeProvider } from 'styled-components';
 
-import { DEFAULT_SEARCH_RESULTS_PER_PAGE } from '../../pages/timelines/timelines_page';
+import { DEFAULT_SEARCH_RESULTS_PER_PAGE } from '../../pages/timelines_page';
 import { OpenTimelineResult, OpenTimelineProps } from './types';
 import { TimelinesTableProps } from './timelines_table';
-import { mockTimelineResults } from '../../mock/timeline_results';
+import { mockTimelineResults } from '../../../common/mock/timeline_results';
 import { OpenTimeline } from './open_timeline';
 import { DEFAULT_SORT_DIRECTION, DEFAULT_SORT_FIELD } from './constants';
 
-jest.mock('../../lib/kibana');
+jest.mock('../../../common/lib/kibana');
 
 describe('OpenTimeline', () => {
   const theme = () => ({ eui: euiDarkVars, darkMode: true });
diff --git a/x-pack/plugins/siem/public/components/open_timeline/open_timeline.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/open_timeline.tsx
similarity index 97%
rename from x-pack/plugins/siem/public/components/open_timeline/open_timeline.tsx
rename to x-pack/plugins/siem/public/timelines/components/open_timeline/open_timeline.tsx
index e172a006abe4b0..cdbba307a11544 100644
--- a/x-pack/plugins/siem/public/components/open_timeline/open_timeline.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/open_timeline/open_timeline.tsx
@@ -11,9 +11,9 @@ import { OPEN_TIMELINE_CLASS_NAME } from './helpers';
 import { OpenTimelineProps, OpenTimelineResult } from './types';
 import { SearchRow } from './search_row';
 import { TimelinesTable } from './timelines_table';
-import { ImportDataModal } from '../import_data_modal';
+import { ImportDataModal } from '../../../common/components/import_data_modal';
 import * as i18n from './translations';
-import { importTimelines } from '../../containers/timeline/api';
+import { importTimelines } from '../../containers/api';
 
 import {
   UtilityBarGroup,
@@ -21,7 +21,7 @@ import {
   UtilityBar,
   UtilityBarSection,
   UtilityBarAction,
-} from '../utility_bar';
+} from '../../../common/components/utility_bar';
 import { useEditTimelinBatchActions } from './edit_timeline_batch_actions';
 import { useEditTimelineActions } from './edit_timeline_actions';
 import { EditOneTimelineAction } from './export_timeline';
diff --git a/x-pack/plugins/siem/public/timelines/components/open_timeline/open_timeline_modal/index.test.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/open_timeline_modal/index.test.tsx
new file mode 100644
index 00000000000000..8382af6056ca78
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/open_timeline/open_timeline_modal/index.test.tsx
@@ -0,0 +1,73 @@
+/*
+ * 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 euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
+import { mount } from 'enzyme';
+import React from 'react';
+import { MockedProvider } from 'react-apollo/test-utils';
+import { ThemeProvider } from 'styled-components';
+
+import { wait } from '../../../../common/lib/helpers';
+import { TestProviderWithoutDragAndDrop } from '../../../../common/mock/test_providers';
+import { mockOpenTimelineQueryResults } from '../../../../common/mock/timeline_results';
+import { useGetAllTimeline, getAllTimeline } from '../../../containers/all';
+
+import { OpenTimelineModal } from '.';
+
+jest.mock('../../../../common/lib/kibana');
+jest.mock('../../../../common/utils/apollo_context', () => ({
+  useApolloClient: () => ({}),
+}));
+jest.mock('../../../containers/all', () => {
+  const originalModule = jest.requireActual('../../../containers/all');
+  return {
+    useGetAllTimeline: jest.fn(),
+    getAllTimeline: originalModule.getAllTimeline,
+  };
+});
+jest.mock('../use_timeline_types', () => {
+  return {
+    useTimelineTypes: jest.fn().mockReturnValue({
+      timelineType: 'default',
+      timelineTabs: <div />,
+      timelineFilters: <div />,
+    }),
+  };
+});
+
+describe('OpenTimelineModal', () => {
+  const theme = () => ({ eui: euiDarkVars, darkMode: true });
+  beforeEach(() => {
+    ((useGetAllTimeline as unknown) as jest.Mock).mockReturnValue({
+      fetchAllTimeline: jest.fn(),
+      timelines: getAllTimeline(
+        '',
+        mockOpenTimelineQueryResults[0].result.data?.getAllTimeline?.timeline ?? []
+      ),
+      loading: false,
+      totalCount: mockOpenTimelineQueryResults[0].result.data.getAllTimeline.totalCount,
+      refetch: jest.fn(),
+    });
+  });
+
+  test('it renders the expected modal', async () => {
+    const wrapper = mount(
+      <ThemeProvider theme={theme}>
+        <TestProviderWithoutDragAndDrop>
+          <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
+            <OpenTimelineModal onClose={jest.fn()} />
+          </MockedProvider>
+        </TestProviderWithoutDragAndDrop>
+      </ThemeProvider>
+    );
+
+    await wait();
+
+    wrapper.update();
+
+    expect(wrapper.find('div[data-test-subj="open-timeline-modal"].euiModal').length).toEqual(1);
+  });
+});
diff --git a/x-pack/plugins/siem/public/timelines/components/open_timeline/open_timeline_modal/index.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/open_timeline_modal/index.tsx
new file mode 100644
index 00000000000000..901ae955cbfe9b
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/open_timeline/open_timeline_modal/index.tsx
@@ -0,0 +1,55 @@
+/*
+ * 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 { EuiModal, EuiOverlayMask } from '@elastic/eui';
+import React from 'react';
+
+import { TimelineModel } from '../../../../timelines/store/timeline/model';
+import { useApolloClient } from '../../../../common/utils/apollo_context';
+
+import * as i18n from '../translations';
+import { ActionTimelineToShow } from '../types';
+import { StatefulOpenTimeline } from '..';
+
+export interface OpenTimelineModalProps {
+  onClose: () => void;
+  hideActions?: ActionTimelineToShow[];
+  modalTitle?: string;
+  onOpen?: (timeline: TimelineModel) => void;
+}
+
+const DEFAULT_SEARCH_RESULTS_PER_PAGE = 10;
+const OPEN_TIMELINE_MODAL_WIDTH = 1000; // px
+
+export const OpenTimelineModal = React.memo<OpenTimelineModalProps>(
+  ({ hideActions = [], modalTitle, onClose, onOpen }) => {
+    const apolloClient = useApolloClient();
+
+    if (!apolloClient) return null;
+
+    return (
+      <EuiOverlayMask>
+        <EuiModal
+          data-test-subj="open-timeline-modal"
+          maxWidth={OPEN_TIMELINE_MODAL_WIDTH}
+          onClose={onClose}
+        >
+          <StatefulOpenTimeline
+            apolloClient={apolloClient}
+            closeModalTimeline={onClose}
+            hideActions={hideActions}
+            isModal={true}
+            defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
+            onOpenTimeline={onOpen}
+            title={modalTitle ?? i18n.OPEN_TIMELINE_TITLE}
+          />
+        </EuiModal>
+      </EuiOverlayMask>
+    );
+  }
+);
+
+OpenTimelineModal.displayName = 'OpenTimelineModal';
diff --git a/x-pack/plugins/siem/public/components/open_timeline/open_timeline_modal/open_timeline_modal_body.test.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_body.test.tsx
similarity index 97%
rename from x-pack/plugins/siem/public/components/open_timeline/open_timeline_modal/open_timeline_modal_body.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_body.test.tsx
index a610884d287a62..1b320c9ebd7551 100644
--- a/x-pack/plugins/siem/public/components/open_timeline/open_timeline_modal/open_timeline_modal_body.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_body.test.tsx
@@ -10,14 +10,14 @@ import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import React from 'react';
 import { ThemeProvider } from 'styled-components';
 
-import { DEFAULT_SEARCH_RESULTS_PER_PAGE } from '../../../pages/timelines/timelines_page';
+import { DEFAULT_SEARCH_RESULTS_PER_PAGE } from '../../../pages/timelines_page';
 import { OpenTimelineResult, OpenTimelineProps } from '../types';
 import { TimelinesTableProps } from '../timelines_table';
-import { mockTimelineResults } from '../../../mock/timeline_results';
+import { mockTimelineResults } from '../../../../common/mock/timeline_results';
 import { OpenTimelineModalBody } from './open_timeline_modal_body';
 import { DEFAULT_SORT_DIRECTION, DEFAULT_SORT_FIELD } from '../constants';
 
-jest.mock('../../../lib/kibana');
+jest.mock('../../../../common/lib/kibana');
 
 describe('OpenTimelineModal', () => {
   const theme = () => ({ eui: euiDarkVars, darkMode: true });
diff --git a/x-pack/plugins/siem/public/components/open_timeline/open_timeline_modal/open_timeline_modal_body.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_body.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/open_timeline/open_timeline_modal/open_timeline_modal_body.tsx
rename to x-pack/plugins/siem/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_body.tsx
diff --git a/x-pack/plugins/siem/public/components/open_timeline/open_timeline_modal/open_timeline_modal_button.test.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_button.test.tsx
similarity index 89%
rename from x-pack/plugins/siem/public/components/open_timeline/open_timeline_modal/open_timeline_modal_button.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_button.test.tsx
index 66947a313f5e55..0244bdda0d826e 100644
--- a/x-pack/plugins/siem/public/components/open_timeline/open_timeline_modal/open_timeline_modal_button.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_button.test.tsx
@@ -10,9 +10,9 @@ import React from 'react';
 import { MockedProvider } from 'react-apollo/test-utils';
 import { ThemeProvider } from 'styled-components';
 
-import { wait } from '../../../lib/helpers';
-import { TestProviderWithoutDragAndDrop } from '../../../mock/test_providers';
-import { mockOpenTimelineQueryResults } from '../../../mock/timeline_results';
+import { wait } from '../../../../common/lib/helpers';
+import { TestProviderWithoutDragAndDrop } from '../../../../common/mock/test_providers';
+import { mockOpenTimelineQueryResults } from '../../../../common/mock/timeline_results';
 import * as i18n from '../translations';
 
 import { OpenTimelineModalButton } from './open_timeline_modal_button';
diff --git a/x-pack/plugins/siem/public/components/open_timeline/open_timeline_modal/open_timeline_modal_button.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_button.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/open_timeline/open_timeline_modal/open_timeline_modal_button.tsx
rename to x-pack/plugins/siem/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_button.tsx
diff --git a/x-pack/plugins/siem/public/components/open_timeline/search_row/index.test.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/search_row/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/open_timeline/search_row/index.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/open_timeline/search_row/index.test.tsx
diff --git a/x-pack/plugins/siem/public/components/open_timeline/search_row/index.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/search_row/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/open_timeline/search_row/index.tsx
rename to x-pack/plugins/siem/public/timelines/components/open_timeline/search_row/index.tsx
diff --git a/x-pack/plugins/siem/public/components/open_timeline/timelines_table/actions_columns.test.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/timelines_table/actions_columns.test.tsx
similarity index 98%
rename from x-pack/plugins/siem/public/components/open_timeline/timelines_table/actions_columns.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/open_timeline/timelines_table/actions_columns.test.tsx
index b0f8963dd501ea..0560bcf2b08ca3 100644
--- a/x-pack/plugins/siem/public/components/open_timeline/timelines_table/actions_columns.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/open_timeline/timelines_table/actions_columns.test.tsx
@@ -11,12 +11,12 @@ import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import React from 'react';
 import { ThemeProvider } from 'styled-components';
 
-import { mockTimelineResults } from '../../../mock/timeline_results';
+import { mockTimelineResults } from '../../../../common/mock/timeline_results';
 import { OpenTimelineResult } from '../types';
 import { TimelinesTableProps } from '.';
 import { getMockTimelinesTableProps } from './mocks';
 
-jest.mock('../../../lib/kibana');
+jest.mock('../../../../common/lib/kibana');
 
 const { TimelinesTable } = jest.requireActual('.');
 
diff --git a/x-pack/plugins/siem/public/components/open_timeline/timelines_table/actions_columns.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/timelines_table/actions_columns.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/open_timeline/timelines_table/actions_columns.tsx
rename to x-pack/plugins/siem/public/timelines/components/open_timeline/timelines_table/actions_columns.tsx
diff --git a/x-pack/plugins/siem/public/components/open_timeline/timelines_table/common_columns.test.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/timelines_table/common_columns.test.tsx
similarity index 98%
rename from x-pack/plugins/siem/public/components/open_timeline/timelines_table/common_columns.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/open_timeline/timelines_table/common_columns.test.tsx
index a312c72ecc25be..4fb6a4d84f7db1 100644
--- a/x-pack/plugins/siem/public/components/open_timeline/timelines_table/common_columns.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/open_timeline/timelines_table/common_columns.test.tsx
@@ -11,16 +11,16 @@ import React from 'react';
 import { ThemeProvider } from 'styled-components';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 
-import { getEmptyValue } from '../../empty_value';
+import { getEmptyValue } from '../../../../common/components/empty_value';
 import { OpenTimelineResult } from '../types';
-import { mockTimelineResults } from '../../../mock/timeline_results';
+import { mockTimelineResults } from '../../../../common/mock/timeline_results';
 import { NotePreviews } from '../note_previews';
 import { TimelinesTable, TimelinesTableProps } from '.';
 
 import * as i18n from '../translations';
 import { getMockTimelinesTableProps } from './mocks';
 
-jest.mock('../../../lib/kibana');
+jest.mock('../../../../common/lib/kibana');
 
 describe('#getCommonColumns', () => {
   const theme = () => ({ eui: euiDarkVars, darkMode: true });
diff --git a/x-pack/plugins/siem/public/components/open_timeline/timelines_table/common_columns.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/timelines_table/common_columns.tsx
similarity index 95%
rename from x-pack/plugins/siem/public/components/open_timeline/timelines_table/common_columns.tsx
rename to x-pack/plugins/siem/public/timelines/components/open_timeline/timelines_table/common_columns.tsx
index 0d3a73a389050d..e0c7ab68f6bf51 100644
--- a/x-pack/plugins/siem/public/components/open_timeline/timelines_table/common_columns.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/open_timeline/timelines_table/common_columns.tsx
@@ -15,8 +15,8 @@ import { isUntitled } from '../helpers';
 import { NotePreviews } from '../note_previews';
 import * as i18n from '../translations';
 import { OnOpenTimeline, OnToggleShowNotes, OpenTimelineResult } from '../types';
-import { getEmptyTagValue } from '../../empty_value';
-import { FormattedRelativePreferenceDate } from '../../formatted_date';
+import { getEmptyTagValue } from '../../../../common/components/empty_value';
+import { FormattedRelativePreferenceDate } from '../../../../common/components/formatted_date';
 
 /**
  * Returns the column definitions (passed as the `columns` prop to
diff --git a/x-pack/plugins/siem/public/components/open_timeline/timelines_table/common_styles.ts b/x-pack/plugins/siem/public/timelines/components/open_timeline/timelines_table/common_styles.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/open_timeline/timelines_table/common_styles.ts
rename to x-pack/plugins/siem/public/timelines/components/open_timeline/timelines_table/common_styles.ts
diff --git a/x-pack/plugins/siem/public/components/open_timeline/timelines_table/extended_columns.test.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/timelines_table/extended_columns.test.tsx
similarity index 92%
rename from x-pack/plugins/siem/public/components/open_timeline/timelines_table/extended_columns.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/open_timeline/timelines_table/extended_columns.test.tsx
index 14409a6bbb5ae9..be7127668f7f1b 100644
--- a/x-pack/plugins/siem/public/components/open_timeline/timelines_table/extended_columns.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/open_timeline/timelines_table/extended_columns.test.tsx
@@ -10,8 +10,8 @@ import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import React from 'react';
 import { ThemeProvider } from 'styled-components';
 
-import { getEmptyValue } from '../../empty_value';
-import { mockTimelineResults } from '../../../mock/timeline_results';
+import { getEmptyValue } from '../../../../common/components/empty_value';
+import { mockTimelineResults } from '../../../../common/mock/timeline_results';
 import { OpenTimelineResult } from '../types';
 
 import { TimelinesTable, TimelinesTableProps } from '.';
@@ -19,7 +19,7 @@ import { TimelinesTable, TimelinesTableProps } from '.';
 import * as i18n from '../translations';
 import { getMockTimelinesTableProps } from './mocks';
 
-jest.mock('../../../lib/kibana');
+jest.mock('../../../../common/lib/kibana');
 
 describe('#getExtendedColumns', () => {
   const theme = () => ({ eui: euiDarkVars, darkMode: true });
diff --git a/x-pack/plugins/siem/public/components/open_timeline/timelines_table/extended_columns.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/timelines_table/extended_columns.tsx
similarity index 91%
rename from x-pack/plugins/siem/public/components/open_timeline/timelines_table/extended_columns.tsx
rename to x-pack/plugins/siem/public/timelines/components/open_timeline/timelines_table/extended_columns.tsx
index b6d874fa0c4d1a..e50336f5169e88 100644
--- a/x-pack/plugins/siem/public/components/open_timeline/timelines_table/extended_columns.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/open_timeline/timelines_table/extended_columns.tsx
@@ -8,7 +8,7 @@
 
 import React from 'react';
 
-import { defaultToEmptyTag } from '../../empty_value';
+import { defaultToEmptyTag } from '../../../../common/components/empty_value';
 
 import * as i18n from '../translations';
 import { OpenTimelineResult } from '../types';
diff --git a/x-pack/plugins/siem/public/components/open_timeline/timelines_table/icon_header_columns.test.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/timelines_table/icon_header_columns.test.tsx
similarity index 97%
rename from x-pack/plugins/siem/public/components/open_timeline/timelines_table/icon_header_columns.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/open_timeline/timelines_table/icon_header_columns.test.tsx
index 658dd96faa9864..f1df605c072dde 100644
--- a/x-pack/plugins/siem/public/components/open_timeline/timelines_table/icon_header_columns.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/open_timeline/timelines_table/icon_header_columns.test.tsx
@@ -10,11 +10,11 @@ import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import React from 'react';
 import { ThemeProvider } from 'styled-components';
 
-import { mockTimelineResults } from '../../../mock/timeline_results';
+import { mockTimelineResults } from '../../../../common/mock/timeline_results';
 import { TimelinesTable, TimelinesTableProps } from '.';
 import { OpenTimelineResult } from '../types';
 import { getMockTimelinesTableProps } from './mocks';
-jest.mock('../../../lib/kibana');
+jest.mock('../../../../common/lib/kibana');
 
 describe('#getActionsColumns', () => {
   const theme = () => ({ eui: euiDarkVars, darkMode: true });
diff --git a/x-pack/plugins/siem/public/components/open_timeline/timelines_table/icon_header_columns.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/timelines_table/icon_header_columns.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/open_timeline/timelines_table/icon_header_columns.tsx
rename to x-pack/plugins/siem/public/timelines/components/open_timeline/timelines_table/icon_header_columns.tsx
diff --git a/x-pack/plugins/siem/public/timelines/components/open_timeline/timelines_table/index.test.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/timelines_table/index.test.tsx
new file mode 100644
index 00000000000000..1ebde8488e46cf
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/open_timeline/timelines_table/index.test.tsx
@@ -0,0 +1,326 @@
+/*
+ * 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 euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
+import { cloneDeep } from 'lodash/fp';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+
+import { mockTimelineResults } from '../../../../common/mock/timeline_results';
+import { OpenTimelineResult } from '../types';
+import { TimelinesTable, TimelinesTableProps } from '.';
+import { getMockTimelinesTableProps } from './mocks';
+
+import * as i18n from '../translations';
+
+jest.mock('../../../../common/lib/kibana');
+
+describe('TimelinesTable', () => {
+  const theme = () => ({ eui: euiDarkVars, darkMode: true });
+  let mockResults: OpenTimelineResult[];
+
+  beforeEach(() => {
+    mockResults = cloneDeep(mockTimelineResults);
+  });
+
+  test('it renders the select all timelines header checkbox when actionTimelineToShow has the action selectable', () => {
+    const wrapper = mountWithIntl(
+      <ThemeProvider theme={theme}>
+        <TimelinesTable {...getMockTimelinesTableProps(mockResults)} />
+      </ThemeProvider>
+    );
+
+    expect(
+      wrapper
+        .find('thead tr th input')
+        .first()
+        .exists()
+    ).toBe(true);
+  });
+
+  test('it does NOT render the select all timelines header checkbox when actionTimelineToShow has not the action selectable', () => {
+    const testProps: TimelinesTableProps = {
+      ...getMockTimelinesTableProps(mockResults),
+      actionTimelineToShow: ['delete', 'duplicate'],
+    };
+    const wrapper = mountWithIntl(
+      <ThemeProvider theme={theme}>
+        <TimelinesTable {...testProps} />
+      </ThemeProvider>
+    );
+
+    expect(
+      wrapper
+        .find('thead tr th input')
+        .first()
+        .exists()
+    ).toBe(false);
+  });
+
+  test('it renders the Modified By column when showExtendedColumns is true ', () => {
+    const testProps: TimelinesTableProps = {
+      ...getMockTimelinesTableProps(mockResults),
+      showExtendedColumns: true,
+    };
+    const wrapper = mountWithIntl(
+      <ThemeProvider theme={theme}>
+        <TimelinesTable {...testProps} />
+      </ThemeProvider>
+    );
+
+    expect(
+      wrapper
+        .find('thead tr th')
+        .at(4)
+        .text()
+    ).toContain(i18n.MODIFIED_BY);
+  });
+
+  test('it renders the notes column in the position of the Modified By column when showExtendedColumns is false', () => {
+    const testProps: TimelinesTableProps = {
+      ...getMockTimelinesTableProps(mockResults),
+      showExtendedColumns: false,
+    };
+    const wrapper = mountWithIntl(
+      <ThemeProvider theme={theme}>
+        <TimelinesTable {...testProps} />
+      </ThemeProvider>
+    );
+
+    expect(
+      wrapper
+        .find('thead tr th')
+        .at(5)
+        .find('[data-test-subj="notes-count-header-icon"]')
+        .first()
+        .exists()
+    ).toBe(true);
+  });
+
+  test('it renders the delete timeline (trash icon) when actionTimelineToShow has the delete action', () => {
+    const wrapper = mountWithIntl(
+      <ThemeProvider theme={theme}>
+        <TimelinesTable {...getMockTimelinesTableProps(mockResults)} />
+      </ThemeProvider>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="delete-timeline"]')
+        .first()
+        .exists()
+    ).toBe(true);
+  });
+
+  test('it does NOT render the delete timeline (trash icon) when actionTimelineToShow has NOT the delete action', () => {
+    const testProps: TimelinesTableProps = {
+      ...getMockTimelinesTableProps(mockResults),
+      actionTimelineToShow: ['duplicate', 'selectable'],
+    };
+    const wrapper = mountWithIntl(
+      <ThemeProvider theme={theme}>
+        <TimelinesTable {...testProps} />
+      </ThemeProvider>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="delete-timeline"]')
+        .first()
+        .exists()
+    ).toBe(false);
+  });
+
+  test('it renders the rows per page selector when showExtendedColumns is true', () => {
+    const wrapper = mountWithIntl(
+      <ThemeProvider theme={theme}>
+        <TimelinesTable {...getMockTimelinesTableProps(mockResults)} />
+      </ThemeProvider>
+    );
+
+    expect(
+      wrapper
+        .find('EuiTablePagination EuiPopover')
+        .first()
+        .exists()
+    ).toBe(true);
+  });
+
+  test('it does NOT render the rows per page selector when showExtendedColumns is false', () => {
+    const testProps: TimelinesTableProps = {
+      ...getMockTimelinesTableProps(mockResults),
+      showExtendedColumns: false,
+    };
+    const wrapper = mountWithIntl(
+      <ThemeProvider theme={theme}>
+        <TimelinesTable {...testProps} />
+      </ThemeProvider>
+    );
+
+    expect(
+      wrapper
+        .find('EuiTablePagination EuiPopover')
+        .first()
+        .exists()
+    ).toBe(false);
+  });
+
+  test('it renders the default page size specified by the defaultPageSize prop', () => {
+    const defaultPageSize = 123;
+    const testProps = {
+      ...getMockTimelinesTableProps(mockResults),
+      defaultPageSize,
+      pageSize: defaultPageSize,
+    };
+    const wrapper = mountWithIntl(
+      <ThemeProvider theme={theme}>
+        <TimelinesTable {...testProps} />
+      </ThemeProvider>
+    );
+
+    expect(
+      wrapper
+        .find('EuiTablePagination EuiPopover')
+        .first()
+        .text()
+    ).toEqual('Rows per page: 123');
+  });
+
+  test('it sorts the Last Modified column in descending order when showExtendedColumns is true ', () => {
+    const wrapper = mountWithIntl(
+      <ThemeProvider theme={theme}>
+        <TimelinesTable {...getMockTimelinesTableProps(mockResults)} />
+      </ThemeProvider>
+    );
+
+    expect(
+      wrapper
+        .find('[aria-sort="descending"]')
+        .first()
+        .text()
+    ).toContain(i18n.LAST_MODIFIED);
+  });
+
+  test('it sorts the Last Modified column in descending order when showExtendedColumns is false ', () => {
+    const testProps: TimelinesTableProps = {
+      ...getMockTimelinesTableProps(mockResults),
+      showExtendedColumns: false,
+    };
+    const wrapper = mountWithIntl(
+      <ThemeProvider theme={theme}>
+        <TimelinesTable {...testProps} />
+      </ThemeProvider>
+    );
+
+    expect(
+      wrapper
+        .find('[aria-sort="descending"]')
+        .first()
+        .text()
+    ).toContain(i18n.LAST_MODIFIED);
+  });
+
+  test('it displays the expected message when no search results are found', () => {
+    const testProps: TimelinesTableProps = {
+      ...getMockTimelinesTableProps(mockResults),
+      searchResults: [],
+    };
+    const wrapper = mountWithIntl(
+      <ThemeProvider theme={theme}>
+        <TimelinesTable {...testProps} />
+      </ThemeProvider>
+    );
+
+    expect(
+      wrapper
+        .find('tbody tr td div')
+        .first()
+        .text()
+    ).toEqual(i18n.ZERO_TIMELINES_MATCH);
+  });
+
+  test('it invokes onTableChange with the expected parameters when a table header is clicked to sort it', () => {
+    const onTableChange = jest.fn();
+    const testProps: TimelinesTableProps = {
+      ...getMockTimelinesTableProps(mockResults),
+      onTableChange,
+    };
+    const wrapper = mountWithIntl(
+      <ThemeProvider theme={theme}>
+        <TimelinesTable {...testProps} />
+      </ThemeProvider>
+    );
+
+    wrapper
+      .find('thead tr th button')
+      .at(0)
+      .simulate('click');
+
+    wrapper.update();
+
+    expect(onTableChange).toHaveBeenCalledWith({
+      page: { index: 0, size: 10 },
+      sort: { direction: 'asc', field: 'updated' },
+    });
+  });
+
+  test('it invokes onSelectionChange when a row is selected', () => {
+    const onSelectionChange = jest.fn();
+    const testProps: TimelinesTableProps = {
+      ...getMockTimelinesTableProps(mockResults),
+      onSelectionChange,
+    };
+    const wrapper = mountWithIntl(
+      <ThemeProvider theme={theme}>
+        <TimelinesTable {...testProps} />
+      </ThemeProvider>
+    );
+
+    wrapper
+      .find('thead tr th input')
+      .at(0)
+      .simulate('change', { target: { checked: true } });
+
+    wrapper.update();
+
+    expect(onSelectionChange).toHaveBeenCalled();
+  });
+
+  test('it enables the table loading animation when isLoading is true', () => {
+    const testProps: TimelinesTableProps = {
+      ...getMockTimelinesTableProps(mockResults),
+      loading: true,
+    };
+    const wrapper = mountWithIntl(
+      <ThemeProvider theme={theme}>
+        <TimelinesTable {...testProps} />
+      </ThemeProvider>
+    );
+
+    const props = wrapper
+      .find('[data-test-subj="timelines-table"]')
+      .first()
+      .props() as TimelinesTableProps;
+
+    expect(props.loading).toBe(true);
+  });
+
+  test('it disables the table loading animation when isLoading is false', () => {
+    const wrapper = mountWithIntl(
+      <ThemeProvider theme={theme}>
+        <TimelinesTable {...getMockTimelinesTableProps(mockResults)} />
+      </ThemeProvider>
+    );
+
+    const props = wrapper
+      .find('[data-test-subj="timelines-table"]')
+      .first()
+      .props() as TimelinesTableProps;
+
+    expect(props.loading).toBe(false);
+  });
+});
diff --git a/x-pack/plugins/siem/public/components/open_timeline/timelines_table/index.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/timelines_table/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/open_timeline/timelines_table/index.tsx
rename to x-pack/plugins/siem/public/timelines/components/open_timeline/timelines_table/index.tsx
diff --git a/x-pack/plugins/siem/public/components/open_timeline/timelines_table/mocks.ts b/x-pack/plugins/siem/public/timelines/components/open_timeline/timelines_table/mocks.ts
similarity index 97%
rename from x-pack/plugins/siem/public/components/open_timeline/timelines_table/mocks.ts
rename to x-pack/plugins/siem/public/timelines/components/open_timeline/timelines_table/mocks.ts
index 519dfc1b66efee..78ca898cc407e8 100644
--- a/x-pack/plugins/siem/public/components/open_timeline/timelines_table/mocks.ts
+++ b/x-pack/plugins/siem/public/timelines/components/open_timeline/timelines_table/mocks.ts
@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { DEFAULT_SEARCH_RESULTS_PER_PAGE } from '../../../pages/timelines/timelines_page';
+import { DEFAULT_SEARCH_RESULTS_PER_PAGE } from '../../../pages/timelines_page';
 import { DEFAULT_SORT_DIRECTION, DEFAULT_SORT_FIELD } from '../constants';
 import { OpenTimelineResult } from '../types';
 import { TimelinesTableProps } from '.';
diff --git a/x-pack/plugins/siem/public/components/open_timeline/title_row/index.test.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/title_row/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/open_timeline/title_row/index.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/open_timeline/title_row/index.test.tsx
diff --git a/x-pack/plugins/siem/public/timelines/components/open_timeline/title_row/index.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/title_row/index.tsx
new file mode 100644
index 00000000000000..e5f921e397b03a
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/open_timeline/title_row/index.tsx
@@ -0,0 +1,48 @@
+/*
+ * 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 { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import React from 'react';
+
+import * as i18n from '../translations';
+import { OpenTimelineProps } from '../types';
+import { HeaderSection } from '../../../../common/components/header_section';
+
+type Props = Pick<OpenTimelineProps, 'onAddTimelinesToFavorites' | 'title'> & {
+  /** The number of timelines currently selected */
+  selectedTimelinesCount: number;
+  children?: JSX.Element;
+};
+
+/**
+ * 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 = React.memo<Props>(
+  ({ children, onAddTimelinesToFavorites, selectedTimelinesCount, title }) => (
+    <HeaderSection title={title} split={true}>
+      <EuiFlexGroup gutterSize="s" responsive={false}>
+        {onAddTimelinesToFavorites && (
+          <EuiFlexItem grow={false}>
+            <EuiButton
+              data-test-subj="favorite-selected"
+              iconSide="left"
+              iconType="starEmptySpace"
+              isDisabled={selectedTimelinesCount === 0}
+              onClick={onAddTimelinesToFavorites}
+            >
+              {i18n.FAVORITE_SELECTED}
+            </EuiButton>
+          </EuiFlexItem>
+        )}
+
+        {children && <EuiFlexItem>{children}</EuiFlexItem>}
+      </EuiFlexGroup>
+    </HeaderSection>
+  )
+);
+
+TitleRow.displayName = 'TitleRow';
diff --git a/x-pack/plugins/siem/public/components/open_timeline/translations.ts b/x-pack/plugins/siem/public/timelines/components/open_timeline/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/open_timeline/translations.ts
rename to x-pack/plugins/siem/public/timelines/components/open_timeline/translations.ts
diff --git a/x-pack/plugins/siem/public/timelines/components/open_timeline/types.ts b/x-pack/plugins/siem/public/timelines/components/open_timeline/types.ts
new file mode 100644
index 00000000000000..f874b5f58d9856
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/open_timeline/types.ts
@@ -0,0 +1,203 @@
+/*
+ * 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 { SetStateAction, Dispatch } from 'react';
+import { AllTimelinesVariables } from '../../containers/all';
+import { TimelineModel } from '../../../timelines/store/timeline/model';
+import { NoteResult } from '../../../graphql/types';
+import { TimelineType, TimelineTypeLiteral } from '../../../../common/types/timeline';
+
+/** The users who added a timeline to favorites */
+export interface FavoriteTimelineResult {
+  userId?: number | null;
+  userName?: string | null;
+  favoriteDate?: number | null;
+}
+
+export interface TimelineResultNote {
+  savedObjectId?: string | null;
+  note?: string | null;
+  noteId?: string | null;
+  updated?: number | null;
+  updatedBy?: string | null;
+}
+
+export interface TimelineActionsOverflowColumns {
+  width: string;
+  actions: Array<{
+    name: string;
+    icon?: string;
+    onClick?: (timeline: OpenTimelineResult) => void;
+    description: string;
+    render?: (timeline: OpenTimelineResult) => JSX.Element;
+  } | null>;
+}
+
+/** The results of the query run by the OpenTimeline component */
+export interface OpenTimelineResult {
+  created?: number | null;
+  description?: string | null;
+  eventIdToNoteIds?: Readonly<Record<string, string[]>> | null;
+  favorite?: FavoriteTimelineResult[] | null;
+  noteIds?: string[] | null;
+  notes?: TimelineResultNote[] | null;
+  pinnedEventIds?: Readonly<Record<string, boolean>> | null;
+  savedObjectId?: string | null;
+  title?: string | null;
+  templateTimelineId?: string | null;
+  type?: TimelineType.template | TimelineType.default;
+  updated?: number | null;
+  updatedBy?: string | null;
+}
+
+/**
+ * EuiSearchBar returns this object when the user changes the query. At the
+ * time of this writing, there is no typescript definition for this type, so
+ * only the properties used by the Open Timeline component are exposed.
+ */
+export interface EuiSearchBarQuery {
+  queryText: string;
+}
+
+/** Performs IO to delete the specified timelines */
+export type DeleteTimelines = (timelineIds: string[], variables?: AllTimelinesVariables) => void;
+
+/** Invoked when the user clicks the action make the selected timelines favorites */
+export type OnAddTimelinesToFavorites = () => void;
+
+/** Invoked when the user clicks the action to delete the selected timelines */
+export type OnDeleteSelected = () => void;
+export type OnDeleteOneTimeline = (timelineIds: string[]) => void;
+
+/** Invoked when the user clicks on the name of a timeline to open it */
+export type OnOpenTimeline = ({
+  duplicate,
+  timelineId,
+}: {
+  duplicate: boolean;
+  timelineId: string;
+}) => void;
+
+export type OnOpenDeleteTimelineModal = (selectedItem: OpenTimelineResult) => void;
+export type SetActionTimeline = Dispatch<SetStateAction<OpenTimelineResult | undefined>>;
+export type EnableExportTimelineDownloader = (selectedItem: OpenTimelineResult) => void;
+/** Invoked when the user presses enters to submit the text in the search input */
+export type OnQueryChange = (query: EuiSearchBarQuery) => void;
+
+/** Invoked when the user selects (or de-selects) timelines in the table */
+export type OnSelectionChange = (selectedItems: OpenTimelineResult[]) => void;
+
+/** Invoked when the user toggles the option to only view favorite timelines */
+export type OnToggleOnlyFavorites = () => void;
+
+/** Invoked when the user toggles the expansion or collapse of inline notes in a table row */
+export type OnToggleShowNotes = (itemIdToExpandedNotesRowMap: Record<string, JSX.Element>) => void;
+
+/** Parameters to the OnTableChange callback  */
+export interface OnTableChangeParams {
+  page: {
+    index: number;
+    size: number;
+  };
+  sort: {
+    field: string;
+    direction: 'asc' | 'desc';
+  };
+}
+
+/** Invoked by the EUI table implementation when the user interacts with the table */
+export type OnTableChange = (tableChange: OnTableChangeParams) => void;
+
+export type ActionTimelineToShow = 'duplicate' | 'delete' | 'export' | 'selectable';
+
+export interface OpenTimelineProps {
+  /** Invoked when the user clicks the delete (trash) icon on an individual timeline */
+  deleteTimelines?: DeleteTimelines;
+  /** The default requested size of each page of search results */
+  defaultPageSize: number;
+  /** Displays an indicator that data is loading when true */
+  isLoading: boolean;
+  /** Required by EuiTable for expandable rows: a map of `TimelineResult.savedObjectId` to rendered notes */
+  itemIdToExpandedNotesRowMap: Record<string, JSX.Element>;
+  /** Display import timelines modal*/
+  importDataModalToggle?: boolean;
+  /** If this callback is specified, a "Favorite Selected" button will be displayed, and this callback will be invoked when the button is clicked */
+  onAddTimelinesToFavorites?: OnAddTimelinesToFavorites;
+  /** If this callback is specified, a "Delete Selected" button will be displayed, and this callback will be invoked when the button is clicked */
+  onDeleteSelected?: OnDeleteSelected;
+  /** Only show favorite timelines when true */
+  onlyFavorites: boolean;
+  /** Invoked when the user presses enter after typing in the search bar */
+  onQueryChange: OnQueryChange;
+  /** Invoked when the user selects (or de-selects) timelines in the table */
+  onSelectionChange: OnSelectionChange;
+  /** Invoked when the user clicks on the name of a timeline to open it */
+  onOpenTimeline: OnOpenTimeline;
+  /** Invoked by the EUI table implementation when the user interacts with the table */
+  onTableChange: OnTableChange;
+  /** Invoked when the user toggles the option to only show favorite timelines */
+  onToggleOnlyFavorites: OnToggleOnlyFavorites;
+  /** Invoked when the user toggles the expansion or collapse of inline notes in a table row */
+  onToggleShowNotes: OnToggleShowNotes;
+  /** the requested page of results */
+  pageIndex: number;
+  /** the requested size of each page of search results */
+  pageSize: number;
+  /** The currently applied search criteria */
+  query: string;
+  /** Refetch table */
+  refetch?: (existingTimeline?: OpenTimelineResult[], existingCount?: number) => void;
+  /** The results of executing a search */
+  searchResults: OpenTimelineResult[];
+  /** the currently-selected timelines in the table */
+  selectedItems: OpenTimelineResult[];
+  /** Toggle export timelines modal*/
+  setImportDataModalToggle?: React.Dispatch<React.SetStateAction<boolean>>;
+  /** the requested sort direction of the query results */
+  sortDirection: 'asc' | 'desc';
+  /** the requested field to sort on */
+  sortField: string;
+  /** timeline / template timeline */
+  tabs: JSX.Element;
+  /** The title of the Open Timeline component  */
+  title: string;
+  /** The total (server-side) count of the search results */
+  totalSearchResultsCount: number;
+  /** Hide action on timeline if needed it */
+  hideActions?: ActionTimelineToShow[];
+}
+
+export interface UpdateTimeline {
+  duplicate: boolean;
+  id: string;
+  from: number;
+  notes: NoteResult[] | null | undefined;
+  timeline: TimelineModel;
+  to: number;
+  ruleNote?: string;
+}
+
+export type DispatchUpdateTimeline = ({
+  duplicate,
+  id,
+  from,
+  notes,
+  timeline,
+  to,
+  ruleNote,
+}: UpdateTimeline) => () => void;
+
+export enum TimelineTabsStyle {
+  tab = 'tab',
+  filter = 'filter',
+}
+
+export interface TimelineTab {
+  id: TimelineTypeLiteral;
+  name: string;
+  disabled: boolean;
+  href: string;
+}
diff --git a/x-pack/plugins/siem/public/components/open_timeline/use_timeline_types.tsx b/x-pack/plugins/siem/public/timelines/components/open_timeline/use_timeline_types.tsx
similarity index 92%
rename from x-pack/plugins/siem/public/components/open_timeline/use_timeline_types.tsx
rename to x-pack/plugins/siem/public/timelines/components/open_timeline/use_timeline_types.tsx
index 1e23bc5bdda3cb..f99d8c566c4a54 100644
--- a/x-pack/plugins/siem/public/components/open_timeline/use_timeline_types.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/open_timeline/use_timeline_types.tsx
@@ -7,12 +7,11 @@ import React, { useState, useCallback, useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 import { EuiTabs, EuiTab, EuiSpacer, EuiFilterButton } from '@elastic/eui';
 
-import { TimelineTypeLiteralWithNull, TimelineType } from '../../../common/types/timeline';
-
-import { getTimelineTabsUrl } from '../link_to';
-import { useGetUrlSearch } from '../navigation/use_get_url_search';
-import { navTabs } from '../../pages/home/home_navigations';
+import { TimelineTypeLiteralWithNull, TimelineType } from '../../../../common/types/timeline';
 
+import { getTimelineTabsUrl } from '../../../common/components/link_to';
+import { navTabs } from '../../../app/home/home_navigations';
+import { useGetUrlSearch } from '../../../common/components/navigation/use_get_url_search';
 import * as i18n from './translations';
 import { TimelineTabsStyle, TimelineTab } from './types';
 
diff --git a/x-pack/plugins/siem/public/components/timeline/__snapshots__/timeline.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/__snapshots__/timeline.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/__snapshots__/timeline.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/__snapshots__/timeline.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/and_or_badge/__examples__/index.stories.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/and_or_badge/__examples__/index.stories.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/and_or_badge/__examples__/index.stories.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/and_or_badge/__examples__/index.stories.tsx
diff --git a/x-pack/plugins/siem/public/components/and_or_badge/index.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/and_or_badge/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/and_or_badge/index.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/and_or_badge/index.tsx
diff --git a/x-pack/plugins/siem/public/components/and_or_badge/translations.ts b/x-pack/plugins/siem/public/timelines/components/timeline/and_or_badge/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/and_or_badge/translations.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/and_or_badge/translations.ts
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/auto_save_warning/index.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/auto_save_warning/index.tsx
new file mode 100644
index 00000000000000..210af7a571569a
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/auto_save_warning/index.tsx
@@ -0,0 +1,94 @@
+/*
+ * 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 {
+  EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiGlobalToastListToast as Toast,
+} from '@elastic/eui';
+import { getOr } from 'lodash/fp';
+import React from 'react';
+import { connect, ConnectedProps } from 'react-redux';
+
+import { State } from '../../../../common/store';
+import { setTimelineRangeDatePicker as dispatchSetTimelineRangeDatePicker } from '../../../../common/store/inputs/actions';
+import { timelineActions, timelineSelectors } from '../../../store/timeline';
+import { AutoSavedWarningMsg } from '../../../store/timeline/types';
+import { useStateToaster } from '../../../../common/components/toasters';
+import * as i18n from './translations';
+
+const AutoSaveWarningMsgComponent = React.memo<PropsFromRedux>(
+  ({
+    newTimelineModel,
+    setTimelineRangeDatePicker,
+    timelineId,
+    updateAutoSaveMsg,
+    updateTimeline,
+  }) => {
+    const dispatchToaster = useStateToaster()[1];
+    if (timelineId != null && newTimelineModel != null) {
+      const toast: Toast = {
+        id: 'AutoSaveWarningMsg',
+        title: i18n.TITLE,
+        color: 'warning',
+        iconType: 'alert',
+        toastLifeTimeMs: 10000,
+        text: (
+          <>
+            <p>{i18n.DESCRIPTION}</p>
+            <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
+              <EuiFlexItem grow={false}>
+                <EuiButton
+                  size="s"
+                  onClick={() => {
+                    updateTimeline({ id: timelineId, timeline: newTimelineModel });
+                    updateAutoSaveMsg({ timelineId: null, newTimelineModel: null });
+                    setTimelineRangeDatePicker({
+                      from: getOr(0, 'dateRange.start', newTimelineModel),
+                      to: getOr(0, 'dateRange.end', newTimelineModel),
+                    });
+                  }}
+                >
+                  {i18n.REFRESH_TIMELINE}
+                </EuiButton>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </>
+        ),
+      };
+      dispatchToaster({
+        type: 'addToaster',
+        toast,
+      });
+    }
+
+    return null;
+  }
+);
+
+AutoSaveWarningMsgComponent.displayName = 'AutoSaveWarningMsgComponent';
+
+const mapStateToProps = (state: State) => {
+  const autoSaveMessage: AutoSavedWarningMsg = timelineSelectors.autoSaveMsgSelector(state);
+
+  return {
+    timelineId: autoSaveMessage.timelineId,
+    newTimelineModel: autoSaveMessage.newTimelineModel,
+  };
+};
+
+const mapDispatchToProps = {
+  setTimelineRangeDatePicker: dispatchSetTimelineRangeDatePicker,
+  updateAutoSaveMsg: timelineActions.updateAutoSaveMsg,
+  updateTimeline: timelineActions.updateTimeline,
+};
+
+const connector = connect(mapStateToProps, mapDispatchToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export const AutoSaveWarningMsg = connector(AutoSaveWarningMsgComponent);
diff --git a/x-pack/plugins/siem/public/components/timeline/auto_save_warning/translations.ts b/x-pack/plugins/siem/public/timelines/components/timeline/auto_save_warning/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/auto_save_warning/translations.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/auto_save_warning/translations.ts
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/body/actions/index.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/actions/index.test.tsx
new file mode 100644
index 00000000000000..ee177f4aba05ed
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/actions/index.test.tsx
@@ -0,0 +1,265 @@
+/*
+ * 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 { mount } from 'enzyme';
+import React from 'react';
+
+import { TestProviders } from '../../../../../common/mock';
+import { DEFAULT_ACTIONS_COLUMN_WIDTH } from '../constants';
+
+import { Actions } from '.';
+
+describe('Actions', () => {
+  test('it renders a checkbox for selecting the event when `showCheckboxes` is `true`', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <Actions
+          actionsColumnWidth={DEFAULT_ACTIONS_COLUMN_WIDTH}
+          associateNote={jest.fn()}
+          checked={false}
+          expanded={false}
+          eventId="abc"
+          eventIsPinned={false}
+          getNotesByIds={jest.fn()}
+          loading={false}
+          loadingEventIds={[]}
+          noteIds={[]}
+          onEventToggled={jest.fn()}
+          onPinClicked={jest.fn()}
+          onRowSelected={jest.fn()}
+          showCheckboxes={true}
+          showNotes={false}
+          toggleShowNotes={jest.fn()}
+          updateNote={jest.fn()}
+        />
+      </TestProviders>
+    );
+
+    expect(wrapper.find('[data-test-subj="select-event"]').exists()).toEqual(true);
+  });
+
+  test('it does NOT render a checkbox for selecting the event when `showCheckboxes` is `false`', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <Actions
+          actionsColumnWidth={DEFAULT_ACTIONS_COLUMN_WIDTH}
+          associateNote={jest.fn()}
+          checked={false}
+          expanded={false}
+          eventId="abc"
+          eventIsPinned={false}
+          getNotesByIds={jest.fn()}
+          loading={false}
+          loadingEventIds={[]}
+          noteIds={[]}
+          onEventToggled={jest.fn()}
+          onPinClicked={jest.fn()}
+          onRowSelected={jest.fn()}
+          showCheckboxes={false}
+          showNotes={false}
+          toggleShowNotes={jest.fn()}
+          updateNote={jest.fn()}
+        />
+      </TestProviders>
+    );
+
+    expect(wrapper.find('[data-test-subj="select-event"]').exists()).toBe(false);
+  });
+
+  test('it renders a button for expanding the event', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <Actions
+          actionsColumnWidth={DEFAULT_ACTIONS_COLUMN_WIDTH}
+          associateNote={jest.fn()}
+          checked={false}
+          expanded={false}
+          eventId="abc"
+          eventIsPinned={false}
+          getNotesByIds={jest.fn()}
+          loading={false}
+          loadingEventIds={[]}
+          noteIds={[]}
+          onEventToggled={jest.fn()}
+          onPinClicked={jest.fn()}
+          onRowSelected={jest.fn()}
+          showCheckboxes={false}
+          showNotes={false}
+          toggleShowNotes={jest.fn()}
+          updateNote={jest.fn()}
+        />
+      </TestProviders>
+    );
+
+    expect(wrapper.find('[data-test-subj="expand-event"]').exists()).toEqual(true);
+  });
+
+  test('it invokes onEventToggled when the button to expand an event is clicked', () => {
+    const onEventToggled = jest.fn();
+
+    const wrapper = mount(
+      <TestProviders>
+        <Actions
+          actionsColumnWidth={DEFAULT_ACTIONS_COLUMN_WIDTH}
+          associateNote={jest.fn()}
+          checked={false}
+          expanded={false}
+          eventId="abc"
+          eventIsPinned={false}
+          getNotesByIds={jest.fn()}
+          loading={false}
+          loadingEventIds={[]}
+          noteIds={[]}
+          onEventToggled={onEventToggled}
+          onPinClicked={jest.fn()}
+          onRowSelected={jest.fn()}
+          showCheckboxes={false}
+          showNotes={false}
+          toggleShowNotes={jest.fn()}
+          updateNote={jest.fn()}
+        />
+      </TestProviders>
+    );
+
+    wrapper
+      .find('[data-test-subj="expand-event"]')
+      .first()
+      .simulate('click');
+
+    expect(onEventToggled).toBeCalled();
+  });
+
+  test('it does NOT render a notes button when isEventsViewer is true', () => {
+    const toggleShowNotes = jest.fn();
+
+    const wrapper = mount(
+      <TestProviders>
+        <Actions
+          actionsColumnWidth={DEFAULT_ACTIONS_COLUMN_WIDTH}
+          associateNote={jest.fn()}
+          checked={false}
+          expanded={false}
+          eventId="abc"
+          eventIsPinned={false}
+          getNotesByIds={jest.fn()}
+          isEventViewer={true}
+          loading={false}
+          loadingEventIds={[]}
+          noteIds={[]}
+          onEventToggled={jest.fn()}
+          onPinClicked={jest.fn()}
+          onRowSelected={jest.fn()}
+          showCheckboxes={false}
+          showNotes={false}
+          toggleShowNotes={toggleShowNotes}
+          updateNote={jest.fn()}
+        />
+      </TestProviders>
+    );
+
+    expect(wrapper.find('[data-test-subj="timeline-notes-button-small"]').exists()).toBe(false);
+  });
+
+  test('it invokes toggleShowNotes when the button for adding notes is clicked', () => {
+    const toggleShowNotes = jest.fn();
+
+    const wrapper = mount(
+      <TestProviders>
+        <Actions
+          actionsColumnWidth={DEFAULT_ACTIONS_COLUMN_WIDTH}
+          associateNote={jest.fn()}
+          checked={false}
+          expanded={false}
+          eventId="abc"
+          eventIsPinned={false}
+          getNotesByIds={jest.fn()}
+          loading={false}
+          loadingEventIds={[]}
+          noteIds={[]}
+          onEventToggled={jest.fn()}
+          onPinClicked={jest.fn()}
+          onRowSelected={jest.fn()}
+          showCheckboxes={false}
+          showNotes={false}
+          toggleShowNotes={toggleShowNotes}
+          updateNote={jest.fn()}
+        />
+      </TestProviders>
+    );
+
+    wrapper
+      .find('[data-test-subj="timeline-notes-button-small"]')
+      .first()
+      .simulate('click');
+
+    expect(toggleShowNotes).toBeCalled();
+  });
+
+  test('it does NOT render a pin button when isEventViewer is true', () => {
+    const onPinClicked = jest.fn();
+
+    const wrapper = mount(
+      <TestProviders>
+        <Actions
+          actionsColumnWidth={DEFAULT_ACTIONS_COLUMN_WIDTH}
+          associateNote={jest.fn()}
+          checked={false}
+          expanded={false}
+          eventId="abc"
+          eventIsPinned={false}
+          getNotesByIds={jest.fn()}
+          isEventViewer={true}
+          loading={false}
+          loadingEventIds={[]}
+          noteIds={[]}
+          onEventToggled={jest.fn()}
+          onPinClicked={onPinClicked}
+          onRowSelected={jest.fn()}
+          showCheckboxes={false}
+          showNotes={false}
+          toggleShowNotes={jest.fn()}
+          updateNote={jest.fn()}
+        />
+      </TestProviders>
+    );
+
+    expect(wrapper.find('[data-test-subj="pin"]').exists()).toBe(false);
+  });
+
+  test('it invokes onPinClicked when the button for pinning events is clicked', () => {
+    const onPinClicked = jest.fn();
+
+    const wrapper = mount(
+      <TestProviders>
+        <Actions
+          actionsColumnWidth={DEFAULT_ACTIONS_COLUMN_WIDTH}
+          associateNote={jest.fn()}
+          checked={false}
+          expanded={false}
+          eventId="abc"
+          eventIsPinned={false}
+          getNotesByIds={jest.fn()}
+          loading={false}
+          loadingEventIds={[]}
+          noteIds={[]}
+          onEventToggled={jest.fn()}
+          onPinClicked={onPinClicked}
+          onRowSelected={jest.fn()}
+          showCheckboxes={false}
+          showNotes={false}
+          toggleShowNotes={jest.fn()}
+          updateNote={jest.fn()}
+        />
+      </TestProviders>
+    );
+
+    wrapper
+      .find('[data-test-subj="pin"]')
+      .first()
+      .simulate('click');
+
+    expect(onPinClicked).toHaveBeenCalled();
+  });
+});
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/body/actions/index.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/actions/index.tsx
new file mode 100644
index 00000000000000..d36a064b6cc7d6
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/actions/index.tsx
@@ -0,0 +1,177 @@
+/*
+ * 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 { EuiButtonIcon, EuiCheckbox, EuiLoadingSpinner, EuiToolTip } from '@elastic/eui';
+import React from 'react';
+
+import { Note } from '../../../../../common/lib/note';
+import { AssociateNote, UpdateNote } from '../../../notes/helpers';
+import { Pin } from '../../pin';
+import { NotesButton } from '../../properties/helpers';
+import { EventsLoading, EventsTd, EventsTdContent, EventsTdGroupActions } from '../../styles';
+import { eventHasNotes, getPinTooltip } from '../helpers';
+import * as i18n from '../translations';
+import { OnRowSelected } from '../../events';
+import { Ecs } from '../../../../../graphql/types';
+
+export interface TimelineActionProps {
+  eventId: string;
+  ecsData: Ecs;
+}
+
+export interface TimelineAction {
+  getAction: ({ eventId, ecsData }: TimelineActionProps) => JSX.Element;
+  width: number;
+  id: string;
+}
+
+interface Props {
+  actionsColumnWidth: number;
+  additionalActions?: JSX.Element[];
+  associateNote: AssociateNote;
+  checked: boolean;
+  onRowSelected: OnRowSelected;
+  expanded: boolean;
+  eventId: string;
+  eventIsPinned: boolean;
+  getNotesByIds: (noteIds: string[]) => Note[];
+  isEventViewer?: boolean;
+  loading: boolean;
+  loadingEventIds: Readonly<string[]>;
+  noteIds: string[];
+  onEventToggled: () => void;
+  onPinClicked: () => void;
+  showNotes: boolean;
+  showCheckboxes: boolean;
+  toggleShowNotes: () => void;
+  updateNote: UpdateNote;
+}
+
+const emptyNotes: string[] = [];
+
+export const Actions = React.memo<Props>(
+  ({
+    actionsColumnWidth,
+    additionalActions,
+    associateNote,
+    checked,
+    expanded,
+    eventId,
+    eventIsPinned,
+    getNotesByIds,
+    isEventViewer = false,
+    loading = false,
+    loadingEventIds,
+    noteIds,
+    onEventToggled,
+    onPinClicked,
+    onRowSelected,
+    showCheckboxes,
+    showNotes,
+    toggleShowNotes,
+    updateNote,
+  }) => (
+    <EventsTdGroupActions
+      actionsColumnWidth={actionsColumnWidth}
+      data-test-subj="event-actions-container"
+    >
+      {showCheckboxes && (
+        <EventsTd data-test-subj="select-event-container">
+          <EventsTdContent textAlign="center">
+            {loadingEventIds.includes(eventId) ? (
+              <EuiLoadingSpinner size="m" data-test-subj="event-loader" />
+            ) : (
+              <EuiCheckbox
+                data-test-subj="select-event"
+                id={eventId}
+                checked={checked}
+                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                  onRowSelected({
+                    eventIds: [eventId],
+                    isSelected: event.currentTarget.checked,
+                  });
+                }}
+              />
+            )}
+          </EventsTdContent>
+        </EventsTd>
+      )}
+
+      <>{additionalActions}</>
+
+      <EventsTd>
+        <EventsTdContent textAlign="center">
+          {loading && <EventsLoading />}
+
+          {!loading && (
+            <EuiButtonIcon
+              aria-label={expanded ? i18n.COLLAPSE : i18n.EXPAND}
+              data-test-subj="expand-event"
+              iconType={expanded ? 'arrowDown' : 'arrowRight'}
+              id={eventId}
+              onClick={onEventToggled}
+            />
+          )}
+        </EventsTdContent>
+      </EventsTd>
+
+      {!isEventViewer && (
+        <>
+          <EventsTd>
+            <EventsTdContent textAlign="center">
+              <EuiToolTip
+                data-test-subj="timeline-action-pin-tool-tip"
+                content={getPinTooltip({
+                  isPinned: eventIsPinned,
+                  eventHasNotes: eventHasNotes(noteIds),
+                })}
+              >
+                <Pin
+                  allowUnpinning={!eventHasNotes(noteIds)}
+                  data-test-subj="pin-event"
+                  onClick={onPinClicked}
+                  pinned={eventIsPinned}
+                />
+              </EuiToolTip>
+            </EventsTdContent>
+          </EventsTd>
+
+          <EventsTd>
+            <EventsTdContent textAlign="center">
+              <NotesButton
+                animate={false}
+                associateNote={associateNote}
+                data-test-subj="add-note"
+                getNotesByIds={getNotesByIds}
+                noteIds={noteIds || emptyNotes}
+                showNotes={showNotes}
+                size="s"
+                toggleShowNotes={toggleShowNotes}
+                toolTip={i18n.NOTES_TOOLTIP}
+                updateNote={updateNote}
+              />
+            </EventsTdContent>
+          </EventsTd>
+        </>
+      )}
+    </EventsTdGroupActions>
+  ),
+  (nextProps, prevProps) => {
+    return (
+      prevProps.actionsColumnWidth === nextProps.actionsColumnWidth &&
+      prevProps.checked === nextProps.checked &&
+      prevProps.expanded === nextProps.expanded &&
+      prevProps.eventId === nextProps.eventId &&
+      prevProps.eventIsPinned === nextProps.eventIsPinned &&
+      prevProps.loading === nextProps.loading &&
+      prevProps.loadingEventIds === nextProps.loadingEventIds &&
+      prevProps.noteIds === nextProps.noteIds &&
+      prevProps.onRowSelected === nextProps.onRowSelected &&
+      prevProps.showCheckboxes === nextProps.showCheckboxes &&
+      prevProps.showNotes === nextProps.showNotes
+    );
+  }
+);
+Actions.displayName = 'Actions';
diff --git a/x-pack/plugins/siem/public/components/timeline/body/column_headers/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/column_headers/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/actions/index.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/actions/index.tsx
new file mode 100644
index 00000000000000..8ec7c52179b99a
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/actions/index.tsx
@@ -0,0 +1,63 @@
+/*
+ * 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 { EuiButtonIcon } from '@elastic/eui';
+import React from 'react';
+
+import { ColumnHeaderOptions } from '../../../../../../timelines/store/timeline/model';
+import { OnColumnRemoved } from '../../../events';
+import { EventsHeadingExtra, EventsLoading } from '../../../styles';
+import { useTimelineContext } from '../../../timeline_context';
+import { Sort } from '../../sort';
+
+import * as i18n from '../translations';
+
+interface Props {
+  header: ColumnHeaderOptions;
+  onColumnRemoved: OnColumnRemoved;
+  sort: Sort;
+}
+
+/** Given a `header`, returns the `SortDirection` applicable to it */
+
+export const CloseButton = React.memo<{
+  columnId: string;
+  onColumnRemoved: OnColumnRemoved;
+}>(({ columnId, onColumnRemoved }) => (
+  <EuiButtonIcon
+    aria-label={i18n.REMOVE_COLUMN}
+    color="text"
+    data-test-subj="remove-column"
+    iconType="cross"
+    onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
+      // To avoid a re-sorting when you delete a column
+      event.preventDefault();
+      event.stopPropagation();
+      onColumnRemoved(columnId);
+    }}
+  />
+));
+
+CloseButton.displayName = 'CloseButton';
+
+export const Actions = React.memo<Props>(({ header, onColumnRemoved, sort }) => {
+  const { isLoading } = useTimelineContext();
+  return (
+    <>
+      {sort.columnId === header.id && isLoading ? (
+        <EventsHeadingExtra className="siemEventsHeading__extra--loading">
+          <EventsLoading />
+        </EventsHeadingExtra>
+      ) : (
+        <EventsHeadingExtra className="siemEventsHeading__extra--close">
+          <CloseButton columnId={header.id} onColumnRemoved={onColumnRemoved} />
+        </EventsHeadingExtra>
+      )}
+    </>
+  );
+});
+
+Actions.displayName = 'Actions';
diff --git a/x-pack/plugins/siem/public/components/timeline/body/column_headers/column_header.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/column_header.tsx
similarity index 95%
rename from x-pack/plugins/siem/public/components/timeline/body/column_headers/column_header.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/column_header.tsx
index e070ed8fa1d2ab..10f2d264d65d2d 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/column_headers/column_header.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/column_header.tsx
@@ -9,8 +9,8 @@ import { Draggable } from 'react-beautiful-dnd';
 import { Resizable, ResizeCallback } from 're-resizable';
 import deepEqual from 'fast-deep-equal';
 
-import { ColumnHeaderOptions } from '../../../../store/timeline/model';
-import { getDraggableFieldId } from '../../../drag_and_drop/helpers';
+import { ColumnHeaderOptions } from '../../../../../timelines/store/timeline/model';
+import { getDraggableFieldId } from '../../../../../common/components/drag_and_drop/helpers';
 import { OnColumnRemoved, OnColumnSorted, OnFilterChange, OnColumnResized } from '../../events';
 import { EventsTh, EventsThContent, EventsHeadingHandle } from '../../styles';
 import { Sort } from '../sort';
diff --git a/x-pack/plugins/siem/public/components/timeline/body/column_headers/common/dragging_container.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/common/dragging_container.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/column_headers/common/dragging_container.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/common/dragging_container.tsx
diff --git a/x-pack/plugins/siem/public/components/timeline/body/column_headers/common/styles.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/common/styles.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/column_headers/common/styles.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/common/styles.tsx
diff --git a/x-pack/plugins/siem/public/components/timeline/body/column_headers/default_headers.ts b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/default_headers.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/column_headers/default_headers.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/default_headers.ts
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/events_select/helpers.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/events_select/helpers.tsx
new file mode 100644
index 00000000000000..9b2cb2e97b98a5
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/events_select/helpers.tsx
@@ -0,0 +1,108 @@
+/*
+ * 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 { EuiText } from '@elastic/eui';
+import React from 'react';
+import styled from 'styled-components';
+
+import { Pin } from '../../../pin';
+
+import * as i18n from './translations';
+
+const InputDisplay = styled.div`
+  width: 5px;
+`;
+
+InputDisplay.displayName = 'InputDisplay';
+
+const PinIconContainer = styled.div`
+  margin-right: 5px;
+`;
+
+PinIconContainer.displayName = 'PinIconContainer';
+
+const PinActionItem = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
+PinActionItem.displayName = 'PinActionItem';
+
+export type EventsSelectAction =
+  | 'select-all'
+  | 'select-none'
+  | 'select-pinned'
+  | 'select-unpinned'
+  | 'pin-selected'
+  | 'unpin-selected';
+
+export interface EventsSelectOption {
+  value: EventsSelectAction;
+  inputDisplay: JSX.Element | string;
+  disabled?: boolean;
+  dropdownDisplay: JSX.Element | string;
+}
+
+export const DropdownDisplay = React.memo<{ text: string }>(({ text }) => (
+  <EuiText size="s" color="subdued">
+    {text}
+  </EuiText>
+));
+
+DropdownDisplay.displayName = 'DropdownDisplay';
+
+export const getEventsSelectOptions = (): EventsSelectOption[] => [
+  {
+    inputDisplay: <InputDisplay />,
+    disabled: true,
+    dropdownDisplay: <DropdownDisplay text={i18n.SELECT_ALL} />,
+    value: 'select-all',
+  },
+  {
+    inputDisplay: <InputDisplay />,
+    disabled: true,
+    dropdownDisplay: <DropdownDisplay text={i18n.SELECT_NONE} />,
+    value: 'select-none',
+  },
+  {
+    inputDisplay: <InputDisplay />,
+    disabled: true,
+    dropdownDisplay: <DropdownDisplay text={i18n.SELECT_PINNED} />,
+    value: 'select-pinned',
+  },
+  {
+    inputDisplay: <InputDisplay />,
+    disabled: true,
+    dropdownDisplay: <DropdownDisplay text={i18n.SELECT_UNPINNED} />,
+    value: 'select-unpinned',
+  },
+  {
+    inputDisplay: <InputDisplay />,
+    disabled: true,
+    dropdownDisplay: (
+      <PinActionItem>
+        <PinIconContainer>
+          <Pin allowUnpinning={true} pinned={true} />
+        </PinIconContainer>
+        <DropdownDisplay text={i18n.PIN_SELECTED} />
+      </PinActionItem>
+    ),
+    value: 'pin-selected',
+  },
+  {
+    inputDisplay: <InputDisplay />,
+    disabled: true,
+    dropdownDisplay: (
+      <PinActionItem>
+        <PinIconContainer>
+          <Pin allowUnpinning={true} pinned={false} />
+        </PinIconContainer>
+        <DropdownDisplay text={i18n.UNPIN_SELECTED} />
+      </PinActionItem>
+    ),
+    value: 'unpin-selected',
+  },
+];
diff --git a/x-pack/plugins/siem/public/components/timeline/body/column_headers/events_select/index.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/events_select/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/column_headers/events_select/index.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/events_select/index.tsx
diff --git a/x-pack/plugins/siem/public/components/timeline/body/column_headers/events_select/translations.ts b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/events_select/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/column_headers/events_select/translations.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/events_select/translations.ts
diff --git a/x-pack/plugins/siem/public/components/timeline/body/column_headers/filter/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/filter/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/column_headers/filter/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/filter/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/filter/index.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/filter/index.test.tsx
new file mode 100644
index 00000000000000..9d1920b03c9bec
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/filter/index.test.tsx
@@ -0,0 +1,57 @@
+/*
+ * 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 { mount, shallow } from 'enzyme';
+import React from 'react';
+
+import { ColumnHeaderType } from '../../../../../../timelines/store/timeline/model';
+import { defaultHeaders } from '../default_headers';
+
+import { Filter } from '.';
+
+const textFilter: ColumnHeaderType = 'text-filter';
+const notFiltered: ColumnHeaderType = 'not-filtered';
+
+describe('Filter', () => {
+  test('renders correctly against snapshot', () => {
+    const textFilterColumnHeader = {
+      ...defaultHeaders[0],
+      columnHeaderType: textFilter,
+    };
+
+    const wrapper = shallow(<Filter header={textFilterColumnHeader} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  describe('rendering', () => {
+    test('it renders a text filter when the columnHeaderType is "text-filter"', () => {
+      const textFilterColumnHeader = {
+        ...defaultHeaders[0],
+        columnHeaderType: textFilter,
+      };
+
+      const wrapper = mount(<Filter header={textFilterColumnHeader} />);
+
+      expect(
+        wrapper
+          .find('[data-test-subj="textFilter"]')
+          .first()
+          .props()
+      ).toHaveProperty('placeholder');
+    });
+
+    test('it does NOT render a filter when the columnHeaderType is "not-filtered"', () => {
+      const notFilteredHeader = {
+        ...defaultHeaders[0],
+        columnHeaderType: notFiltered,
+      };
+
+      const wrapper = mount(<Filter header={notFilteredHeader} />);
+
+      expect(wrapper.find('[data-test-subj="textFilter"]').exists()).toEqual(false);
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/filter/index.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/filter/index.tsx
new file mode 100644
index 00000000000000..9daccf27399fb6
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/filter/index.tsx
@@ -0,0 +1,37 @@
+/*
+ * 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 { noop } from 'lodash/fp';
+import React from 'react';
+
+import { OnFilterChange } from '../../../events';
+import { ColumnHeaderOptions } from '../../../../../../timelines/store/timeline/model';
+import { TextFilter } from '../text_filter';
+
+interface Props {
+  header: ColumnHeaderOptions;
+  onFilterChange?: OnFilterChange;
+}
+
+/** Renders a header's filter, based on the `columnHeaderType` */
+export const Filter = React.memo<Props>(({ header, onFilterChange = noop }) => {
+  switch (header.columnHeaderType) {
+    case 'text-filter':
+      return (
+        <TextFilter
+          columnId={header.id}
+          minWidth={header.width}
+          onFilterChange={onFilterChange}
+          placeholder={header.placeholder}
+        />
+      );
+    case 'not-filtered': // fall through
+    default:
+      return null;
+  }
+});
+
+Filter.displayName = 'Filter';
diff --git a/x-pack/plugins/siem/public/components/timeline/body/column_headers/header/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/header/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/column_headers/header/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/header/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/timeline/body/column_headers/header/header_content.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/header/header_content.tsx
similarity index 93%
rename from x-pack/plugins/siem/public/components/timeline/body/column_headers/header/header_content.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/header/header_content.tsx
index 0a69cef6185706..83e3728c149016 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/column_headers/header/header_content.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/header/header_content.tsx
@@ -8,8 +8,8 @@ import { EuiToolTip } from '@elastic/eui';
 import { noop } from 'lodash/fp';
 import React from 'react';
 
-import { ColumnHeaderOptions } from '../../../../../store/timeline/model';
-import { TruncatableText } from '../../../../truncatable_text';
+import { ColumnHeaderOptions } from '../../../../../../timelines/store/timeline/model';
+import { TruncatableText } from '../../../../../../common/components/truncatable_text';
 import { EventsHeading, EventsHeadingTitleButton, EventsHeadingTitleSpan } from '../../../styles';
 import { useTimelineContext } from '../../../timeline_context';
 import { Sort } from '../../sort';
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/header/helpers.ts b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/header/helpers.ts
new file mode 100644
index 00000000000000..6d70795c422d93
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/header/helpers.ts
@@ -0,0 +1,44 @@
+/*
+ * 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 { Direction } from '../../../../../../graphql/types';
+import { assertUnreachable } from '../../../../../../common/lib/helpers';
+import { ColumnHeaderOptions } from '../../../../../../timelines/store/timeline/model';
+import { Sort, SortDirection } from '../../sort';
+
+interface GetNewSortDirectionOnClickParams {
+  clickedHeader: ColumnHeaderOptions;
+  currentSort: Sort;
+}
+
+/** Given a `header`, returns the `SortDirection` applicable to it */
+export const getNewSortDirectionOnClick = ({
+  clickedHeader,
+  currentSort,
+}: GetNewSortDirectionOnClickParams): Direction =>
+  clickedHeader.id === currentSort.columnId ? getNextSortDirection(currentSort) : Direction.desc;
+
+/** Given a current sort direction, it returns the next sort direction */
+export const getNextSortDirection = (currentSort: Sort): Direction => {
+  switch (currentSort.sortDirection) {
+    case Direction.desc:
+      return Direction.asc;
+    case Direction.asc:
+      return Direction.desc;
+    case 'none':
+      return Direction.desc;
+    default:
+      return assertUnreachable(currentSort.sortDirection, 'Unhandled sort direction');
+  }
+};
+
+interface GetSortDirectionParams {
+  header: ColumnHeaderOptions;
+  sort: Sort;
+}
+
+export const getSortDirection = ({ header, sort }: GetSortDirectionParams): SortDirection =>
+  header.id === sort.columnId ? sort.sortDirection : 'none';
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/header/index.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/header/index.test.tsx
new file mode 100644
index 00000000000000..dfbb5508f27c74
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/header/index.test.tsx
@@ -0,0 +1,350 @@
+/*
+ * 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 { mount, shallow } from 'enzyme';
+import React from 'react';
+
+import { Direction } from '../../../../../../graphql/types';
+import { TestProviders } from '../../../../../../common/mock';
+import { ColumnHeaderType } from '../../../../../../timelines/store/timeline/model';
+import { Sort } from '../../sort';
+import { CloseButton } from '../actions';
+import { defaultHeaders } from '../default_headers';
+
+import { HeaderComponent } from '.';
+import { getNewSortDirectionOnClick, getNextSortDirection, getSortDirection } from './helpers';
+
+const filteredColumnHeader: ColumnHeaderType = 'text-filter';
+
+describe('Header', () => {
+  const columnHeader = defaultHeaders[0];
+  const sort: Sort = {
+    columnId: columnHeader.id,
+    sortDirection: Direction.desc,
+  };
+  const timelineId = 'fakeId';
+
+  test('renders correctly against snapshot', () => {
+    const wrapper = shallow(
+      <HeaderComponent
+        header={columnHeader}
+        onColumnRemoved={jest.fn()}
+        onColumnSorted={jest.fn()}
+        sort={sort}
+        timelineId={timelineId}
+      />
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  describe('rendering', () => {
+    test('it renders the header text', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <HeaderComponent
+            header={columnHeader}
+            onColumnRemoved={jest.fn()}
+            onColumnSorted={jest.fn()}
+            sort={sort}
+            timelineId={timelineId}
+          />
+        </TestProviders>
+      );
+
+      expect(
+        wrapper
+          .find(`[data-test-subj="header-text-${columnHeader.id}"]`)
+          .first()
+          .text()
+      ).toEqual(columnHeader.id);
+    });
+
+    test('it renders the header text alias when label is provided', () => {
+      const label = 'Timestamp';
+      const headerWithLabel = { ...columnHeader, label };
+      const wrapper = mount(
+        <TestProviders>
+          <HeaderComponent
+            header={headerWithLabel}
+            onColumnRemoved={jest.fn()}
+            onColumnSorted={jest.fn()}
+            sort={sort}
+            timelineId={timelineId}
+          />
+        </TestProviders>
+      );
+
+      expect(
+        wrapper
+          .find(`[data-test-subj="header-text-${columnHeader.id}"]`)
+          .first()
+          .text()
+      ).toEqual(label);
+    });
+
+    test('it renders a sort indicator', () => {
+      const headerSortable = { ...columnHeader, aggregatable: true };
+      const wrapper = mount(
+        <TestProviders>
+          <HeaderComponent
+            header={headerSortable}
+            onColumnRemoved={jest.fn()}
+            onColumnSorted={jest.fn()}
+            sort={sort}
+            timelineId={timelineId}
+          />
+        </TestProviders>
+      );
+
+      expect(
+        wrapper
+          .find('[data-test-subj="header-sort-indicator"]')
+          .first()
+          .exists()
+      ).toEqual(true);
+    });
+
+    test('it renders a filter', () => {
+      const columnWithFilter = {
+        ...columnHeader,
+        columnHeaderType: filteredColumnHeader,
+      };
+
+      const wrapper = mount(
+        <TestProviders>
+          <HeaderComponent
+            header={columnWithFilter}
+            onColumnRemoved={jest.fn()}
+            onColumnSorted={jest.fn()}
+            sort={sort}
+            timelineId={timelineId}
+          />
+        </TestProviders>
+      );
+
+      expect(
+        wrapper
+          .find('[data-test-subj="textFilter"]')
+          .first()
+          .props()
+      ).toHaveProperty('placeholder');
+    });
+  });
+
+  describe('onColumnSorted', () => {
+    test('it invokes the onColumnSorted callback when the header sort button is clicked', () => {
+      const mockOnColumnSorted = jest.fn();
+      const headerSortable = { ...columnHeader, aggregatable: true };
+      const wrapper = mount(
+        <TestProviders>
+          <HeaderComponent
+            header={headerSortable}
+            onColumnRemoved={jest.fn()}
+            onColumnSorted={mockOnColumnSorted}
+            sort={sort}
+            timelineId={timelineId}
+          />
+        </TestProviders>
+      );
+
+      wrapper
+        .find('[data-test-subj="header-sort-button"]')
+        .first()
+        .simulate('click');
+
+      expect(mockOnColumnSorted).toBeCalledWith({
+        columnId: columnHeader.id,
+        sortDirection: 'asc', // (because the previous state was Direction.desc)
+      });
+    });
+
+    test('it does NOT render the header sort button when aggregatable is false', () => {
+      const mockOnColumnSorted = jest.fn();
+      const headerSortable = { ...columnHeader, aggregatable: false };
+      const wrapper = mount(
+        <TestProviders>
+          <HeaderComponent
+            header={headerSortable}
+            onColumnRemoved={jest.fn()}
+            onColumnSorted={mockOnColumnSorted}
+            sort={sort}
+            timelineId={timelineId}
+          />
+        </TestProviders>
+      );
+
+      expect(wrapper.find('[data-test-subj="header-sort-button"]').length).toEqual(0);
+    });
+
+    test('it does NOT render the header sort button when aggregatable is missing', () => {
+      const mockOnColumnSorted = jest.fn();
+      const headerSortable = { ...columnHeader };
+      const wrapper = mount(
+        <TestProviders>
+          <HeaderComponent
+            header={headerSortable}
+            onColumnRemoved={jest.fn()}
+            onColumnSorted={mockOnColumnSorted}
+            sort={sort}
+            timelineId={timelineId}
+          />
+        </TestProviders>
+      );
+
+      expect(wrapper.find('[data-test-subj="header-sort-button"]').length).toEqual(0);
+    });
+
+    test('it does NOT invoke the onColumnSorted callback when the header is clicked and aggregatable is undefined', () => {
+      const mockOnColumnSorted = jest.fn();
+      const headerSortable = { ...columnHeader, aggregatable: undefined };
+      const wrapper = mount(
+        <TestProviders>
+          <HeaderComponent
+            header={headerSortable}
+            onColumnRemoved={jest.fn()}
+            onColumnSorted={mockOnColumnSorted}
+            sort={sort}
+            timelineId={timelineId}
+          />
+        </TestProviders>
+      );
+
+      wrapper
+        .find('[data-test-subj="header"]')
+        .first()
+        .simulate('click');
+
+      expect(mockOnColumnSorted).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('CloseButton', () => {
+    test('it invokes the onColumnRemoved callback with the column ID when the close button is clicked', () => {
+      const mockOnColumnRemoved = jest.fn();
+
+      const wrapper = mount(
+        <CloseButton columnId={columnHeader.id} onColumnRemoved={mockOnColumnRemoved} />
+      );
+
+      wrapper
+        .find('[data-test-subj="remove-column"]')
+        .first()
+        .simulate('click');
+
+      expect(mockOnColumnRemoved).toBeCalledWith(columnHeader.id);
+    });
+  });
+
+  describe('getSortDirection', () => {
+    test('it returns the sort direction when the header id matches the sort column id', () => {
+      expect(getSortDirection({ header: columnHeader, sort })).toEqual(sort.sortDirection);
+    });
+
+    test('it returns "none" when sort direction when the header id does NOT match the sort column id', () => {
+      const nonMatching: Sort = {
+        columnId: 'differentSocks',
+        sortDirection: Direction.desc,
+      };
+
+      expect(getSortDirection({ header: columnHeader, sort: nonMatching })).toEqual('none');
+    });
+  });
+
+  describe('getNextSortDirection', () => {
+    test('it returns "asc" when the current direction is "desc"', () => {
+      const sortDescending: Sort = { columnId: columnHeader.id, sortDirection: Direction.desc };
+
+      expect(getNextSortDirection(sortDescending)).toEqual('asc');
+    });
+
+    test('it returns "desc" when the current direction is "asc"', () => {
+      const sortAscending: Sort = {
+        columnId: columnHeader.id,
+        sortDirection: Direction.asc,
+      };
+
+      expect(getNextSortDirection(sortAscending)).toEqual(Direction.desc);
+    });
+
+    test('it returns "desc" by default', () => {
+      const sortNone: Sort = {
+        columnId: columnHeader.id,
+        sortDirection: 'none',
+      };
+
+      expect(getNextSortDirection(sortNone)).toEqual(Direction.desc);
+    });
+  });
+
+  describe('getNewSortDirectionOnClick', () => {
+    test('it returns the expected new sort direction when the header id matches the sort column id', () => {
+      const sortMatches: Sort = {
+        columnId: columnHeader.id,
+        sortDirection: Direction.desc,
+      };
+
+      expect(
+        getNewSortDirectionOnClick({
+          clickedHeader: columnHeader,
+          currentSort: sortMatches,
+        })
+      ).toEqual(Direction.asc);
+    });
+
+    test('it returns the expected new sort direction when the header id does NOT match the sort column id', () => {
+      const sortDoesNotMatch: Sort = {
+        columnId: 'someOtherColumn',
+        sortDirection: 'none',
+      };
+
+      expect(
+        getNewSortDirectionOnClick({
+          clickedHeader: columnHeader,
+          currentSort: sortDoesNotMatch,
+        })
+      ).toEqual(Direction.desc);
+    });
+  });
+
+  describe('text truncation styling', () => {
+    test('truncates the header text with an ellipsis', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <HeaderComponent
+            header={columnHeader}
+            onColumnRemoved={jest.fn()}
+            onColumnSorted={jest.fn()}
+            sort={sort}
+            timelineId={timelineId}
+          />
+        </TestProviders>
+      );
+
+      expect(wrapper.find(`[data-test-subj="header-text-${columnHeader.id}"]`)).toHaveStyleRule(
+        'text-overflow',
+        'ellipsis'
+      );
+    });
+  });
+
+  describe('header tooltip', () => {
+    test('it has a tooltip to display the properties of the field', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <HeaderComponent
+            header={columnHeader}
+            onColumnRemoved={jest.fn()}
+            onColumnSorted={jest.fn()}
+            sort={sort}
+            timelineId={timelineId}
+          />
+        </TestProviders>
+      );
+
+      expect(wrapper.find('[data-test-subj="header-tooltip"]').exists()).toEqual(true);
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/header/index.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/header/index.tsx
new file mode 100644
index 00000000000000..854d45449c92cd
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/header/index.tsx
@@ -0,0 +1,55 @@
+/*
+ * 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 { noop } from 'lodash/fp';
+import React, { useCallback } from 'react';
+
+import { ColumnHeaderOptions } from '../../../../../../timelines/store/timeline/model';
+import { OnColumnRemoved, OnColumnSorted, OnFilterChange } from '../../../events';
+import { Sort } from '../../sort';
+import { Actions } from '../actions';
+import { Filter } from '../filter';
+import { getNewSortDirectionOnClick } from './helpers';
+import { HeaderContent } from './header_content';
+
+interface Props {
+  header: ColumnHeaderOptions;
+  onColumnRemoved: OnColumnRemoved;
+  onColumnSorted: OnColumnSorted;
+  onFilterChange?: OnFilterChange;
+  sort: Sort;
+  timelineId: string;
+}
+
+export const HeaderComponent: React.FC<Props> = ({
+  header,
+  onColumnRemoved,
+  onColumnSorted,
+  onFilterChange = noop,
+  sort,
+}) => {
+  const onClick = useCallback(() => {
+    onColumnSorted!({
+      columnId: header.id,
+      sortDirection: getNewSortDirectionOnClick({
+        clickedHeader: header,
+        currentSort: sort,
+      }),
+    });
+  }, [onColumnSorted, header, sort]);
+
+  return (
+    <>
+      <HeaderContent header={header} isResizing={false} onClick={onClick} sort={sort}>
+        <Actions header={header} onColumnRemoved={onColumnRemoved} sort={sort} />
+      </HeaderContent>
+
+      <Filter header={header} onFilterChange={onFilterChange} />
+    </>
+  );
+};
+
+export const Header = React.memo(HeaderComponent);
diff --git a/x-pack/plugins/siem/public/components/timeline/body/column_headers/header_tooltip_content/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/header_tooltip_content/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/column_headers/header_tooltip_content/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/header_tooltip_content/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/header_tooltip_content/index.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/header_tooltip_content/index.test.tsx
new file mode 100644
index 00000000000000..534dd7bc9b73c2
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/header_tooltip_content/index.test.tsx
@@ -0,0 +1,93 @@
+/*
+ * 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 { mount, shallow } from 'enzyme';
+import { cloneDeep } from 'lodash/fp';
+import React from 'react';
+
+import { ColumnHeaderOptions } from '../../../../../../timelines/store/timeline/model';
+import { defaultHeaders } from '../../../../../../common/mock';
+
+import { HeaderToolTipContent } from '.';
+
+describe('HeaderToolTipContent', () => {
+  let header: ColumnHeaderOptions;
+  beforeEach(() => {
+    header = cloneDeep(defaultHeaders[0]);
+  });
+
+  test('it renders the category', () => {
+    const wrapper = mount(<HeaderToolTipContent header={header} />);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="category-value"]')
+        .first()
+        .text()
+    ).toEqual(header.category);
+  });
+
+  test('it renders the name of the field', () => {
+    const wrapper = mount(<HeaderToolTipContent header={header} />);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="field-value"]')
+        .first()
+        .text()
+    ).toEqual(header.id);
+  });
+
+  test('it renders the expected icon for the header type', () => {
+    const wrapper = mount(<HeaderToolTipContent header={header} />);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="type-icon"]')
+        .first()
+        .props().type
+    ).toEqual('clock');
+  });
+
+  test('it renders the type of the field', () => {
+    const wrapper = mount(<HeaderToolTipContent header={header} />);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="type-value"]')
+        .first()
+        .text()
+    ).toEqual(header.type);
+  });
+
+  test('it renders the description of the field', () => {
+    const wrapper = mount(<HeaderToolTipContent header={header} />);
+
+    expect(
+      wrapper
+        .find('[data-test-subj="description-value"]')
+        .first()
+        .text()
+    ).toEqual(header.description);
+  });
+
+  test('it does NOT render the description column when the field does NOT contain a description', () => {
+    const noDescription = {
+      ...header,
+      description: '',
+    };
+
+    const wrapper = mount(<HeaderToolTipContent header={noDescription} />);
+
+    expect(wrapper.find('[data-test-subj="description"]').exists()).toEqual(false);
+  });
+
+  test('it renders the expected table content', () => {
+    const wrapper = shallow(<HeaderToolTipContent header={header} />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/header_tooltip_content/index.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/header_tooltip_content/index.tsx
new file mode 100644
index 00000000000000..efad85775a9e46
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/header_tooltip_content/index.tsx
@@ -0,0 +1,79 @@
+/*
+ * 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 { EuiIcon } from '@elastic/eui';
+import { isEmpty } from 'lodash/fp';
+import React from 'react';
+import styled from 'styled-components';
+
+import { ColumnHeaderOptions } from '../../../../../../timelines/store/timeline/model';
+import { getIconFromType } from '../../../../../../common/components/event_details/helpers';
+import * as i18n from '../translations';
+
+const IconType = styled(EuiIcon)`
+  margin-right: 3px;
+  position: relative;
+  top: -2px;
+`;
+IconType.displayName = 'IconType';
+
+const P = styled.p`
+  margin-bottom: 5px;
+`;
+P.displayName = 'P';
+
+const ToolTipTableMetadata = styled.span`
+  margin-right: 5px;
+`;
+ToolTipTableMetadata.displayName = 'ToolTipTableMetadata';
+
+const ToolTipTableValue = styled.span`
+  word-wrap: break-word;
+`;
+ToolTipTableValue.displayName = 'ToolTipTableValue';
+
+export const HeaderToolTipContent = React.memo<{ header: ColumnHeaderOptions }>(({ header }) => (
+  <>
+    {!isEmpty(header.category) && (
+      <P>
+        <ToolTipTableMetadata data-test-subj="category">
+          {i18n.CATEGORY}
+          {':'}
+        </ToolTipTableMetadata>
+        <ToolTipTableValue data-test-subj="category-value">{header.category}</ToolTipTableValue>
+      </P>
+    )}
+    <P>
+      <ToolTipTableMetadata data-test-subj="field">
+        {i18n.FIELD}
+        {':'}
+      </ToolTipTableMetadata>
+      <ToolTipTableValue data-test-subj="field-value">{header.id}</ToolTipTableValue>
+    </P>
+    <P>
+      <ToolTipTableMetadata data-test-subj="type">
+        {i18n.TYPE}
+        {':'}
+      </ToolTipTableMetadata>
+      <ToolTipTableValue>
+        <IconType data-test-subj="type-icon" type={getIconFromType(header.type!)} />
+        <span data-test-subj="type-value">{header.type}</span>
+      </ToolTipTableValue>
+    </P>
+    {!isEmpty(header.description) && (
+      <P>
+        <ToolTipTableMetadata data-test-subj="description">
+          {i18n.DESCRIPTION}
+          {':'}
+        </ToolTipTableMetadata>
+        <ToolTipTableValue data-test-subj="description-value">
+          {header.description}
+        </ToolTipTableValue>
+      </P>
+    )}
+  </>
+));
+HeaderToolTipContent.displayName = 'HeaderToolTipContent';
diff --git a/x-pack/plugins/siem/public/components/timeline/body/column_headers/helpers.test.ts b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/helpers.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/column_headers/helpers.test.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/helpers.test.ts
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/helpers.ts b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/helpers.ts
new file mode 100644
index 00000000000000..7c29f1498d0df7
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/helpers.ts
@@ -0,0 +1,48 @@
+/*
+ * 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 { get } from 'lodash/fp';
+
+import { BrowserFields } from '../../../../../common/containers/source';
+import { ColumnHeaderOptions } from '../../../../../timelines/store/timeline/model';
+import {
+  DEFAULT_COLUMN_MIN_WIDTH,
+  DEFAULT_DATE_COLUMN_MIN_WIDTH,
+  SHOW_CHECK_BOXES_COLUMN_WIDTH,
+  EVENTS_VIEWER_ACTIONS_COLUMN_WIDTH,
+  DEFAULT_ACTIONS_COLUMN_WIDTH,
+} from '../constants';
+
+/** Enriches the column headers with field details from the specified browserFields */
+export const getColumnHeaders = (
+  headers: ColumnHeaderOptions[],
+  browserFields: BrowserFields
+): ColumnHeaderOptions[] => {
+  return headers.map(header => {
+    const splitHeader = header.id.split('.'); // source.geo.city_name -> [source, geo, city_name]
+
+    return {
+      ...header,
+      ...get(
+        [splitHeader.length > 1 ? splitHeader[0] : 'base', 'fields', header.id],
+        browserFields
+      ),
+    };
+  });
+};
+
+export const getColumnWidthFromType = (type: string): number =>
+  type !== 'date' ? DEFAULT_COLUMN_MIN_WIDTH : DEFAULT_DATE_COLUMN_MIN_WIDTH;
+
+/** Returns the (fixed) width of the Actions column */
+export const getActionsColumnWidth = (
+  isEventViewer: boolean,
+  showCheckboxes = false,
+  additionalActionWidth = 0
+): number =>
+  (showCheckboxes ? SHOW_CHECK_BOXES_COLUMN_WIDTH : 0) +
+  (isEventViewer ? EVENTS_VIEWER_ACTIONS_COLUMN_WIDTH : DEFAULT_ACTIONS_COLUMN_WIDTH) +
+  additionalActionWidth;
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/index.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/index.test.tsx
new file mode 100644
index 00000000000000..446e6f2758e4c5
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/index.test.tsx
@@ -0,0 +1,113 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import React from 'react';
+
+import { DEFAULT_ACTIONS_COLUMN_WIDTH } from '../constants';
+import { defaultHeaders } from './default_headers';
+import { Direction } from '../../../../../graphql/types';
+import { mockBrowserFields } from '../../../../../common/containers/source/mock';
+import { Sort } from '../sort';
+import { TestProviders } from '../../../../../common/mock/test_providers';
+import { useMountAppended } from '../../../../../common/utils/use_mount_appended';
+
+import { ColumnHeadersComponent } from '.';
+
+describe('ColumnHeaders', () => {
+  const mount = useMountAppended();
+
+  describe('rendering', () => {
+    const sort: Sort = {
+      columnId: 'fooColumn',
+      sortDirection: Direction.desc,
+    };
+
+    test('renders correctly against snapshot', () => {
+      const wrapper = shallow(
+        <ColumnHeadersComponent
+          actionsColumnWidth={DEFAULT_ACTIONS_COLUMN_WIDTH}
+          browserFields={mockBrowserFields}
+          columnHeaders={defaultHeaders}
+          isSelectAllChecked={false}
+          onColumnSorted={jest.fn()}
+          onColumnRemoved={jest.fn()}
+          onColumnResized={jest.fn()}
+          onSelectAll={jest.fn}
+          onUpdateColumns={jest.fn()}
+          showEventsSelect={false}
+          showSelectAllCheckbox={false}
+          sort={sort}
+          timelineId={'test'}
+          toggleColumn={jest.fn()}
+        />
+      );
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    test('it renders the field browser', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <ColumnHeadersComponent
+            actionsColumnWidth={DEFAULT_ACTIONS_COLUMN_WIDTH}
+            browserFields={mockBrowserFields}
+            columnHeaders={defaultHeaders}
+            isSelectAllChecked={false}
+            onColumnSorted={jest.fn()}
+            onColumnRemoved={jest.fn()}
+            onColumnResized={jest.fn()}
+            onSelectAll={jest.fn}
+            onUpdateColumns={jest.fn()}
+            showEventsSelect={false}
+            showSelectAllCheckbox={false}
+            sort={sort}
+            timelineId={'test'}
+            toggleColumn={jest.fn()}
+          />
+        </TestProviders>
+      );
+
+      expect(
+        wrapper
+          .find('[data-test-subj="field-browser"]')
+          .first()
+          .exists()
+      ).toEqual(true);
+    });
+
+    test('it renders every column header', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <ColumnHeadersComponent
+            actionsColumnWidth={DEFAULT_ACTIONS_COLUMN_WIDTH}
+            browserFields={mockBrowserFields}
+            columnHeaders={defaultHeaders}
+            isSelectAllChecked={false}
+            onColumnSorted={jest.fn()}
+            onColumnRemoved={jest.fn()}
+            onColumnResized={jest.fn()}
+            onSelectAll={jest.fn}
+            onUpdateColumns={jest.fn()}
+            showEventsSelect={false}
+            showSelectAllCheckbox={false}
+            sort={sort}
+            timelineId={'test'}
+            toggleColumn={jest.fn()}
+          />
+        </TestProviders>
+      );
+
+      defaultHeaders.forEach(h => {
+        expect(
+          wrapper
+            .find('[data-test-subj="headers-group"]')
+            .first()
+            .text()
+        ).toContain(h.id);
+      });
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/index.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/index.tsx
new file mode 100644
index 00000000000000..7a5ce5ac3c7c9f
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/index.tsx
@@ -0,0 +1,253 @@
+/*
+ * 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 { EuiCheckbox } from '@elastic/eui';
+import { noop } from 'lodash/fp';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { Droppable, DraggableChildrenFn } from 'react-beautiful-dnd';
+import deepEqual from 'fast-deep-equal';
+
+import { DragEffects } from '../../../../../common/components/drag_and_drop/draggable_wrapper';
+import { DraggableFieldBadge } from '../../../../../common/components/draggables/field_badge';
+import { BrowserFields } from '../../../../../common/containers/source';
+import { ColumnHeaderOptions } from '../../../../../timelines/store/timeline/model';
+import {
+  DRAG_TYPE_FIELD,
+  droppableTimelineColumnsPrefix,
+} from '../../../../../common/components/drag_and_drop/helpers';
+import { StatefulFieldsBrowser } from '../../../fields_browser';
+import { FIELD_BROWSER_HEIGHT, FIELD_BROWSER_WIDTH } from '../../../fields_browser/helpers';
+import {
+  OnColumnRemoved,
+  OnColumnResized,
+  OnColumnSorted,
+  OnFilterChange,
+  OnSelectAll,
+  OnUpdateColumns,
+} from '../../events';
+import {
+  EventsTh,
+  EventsThContent,
+  EventsThead,
+  EventsThGroupActions,
+  EventsThGroupData,
+  EventsTrHeader,
+} from '../../styles';
+import { Sort } from '../sort';
+import { EventsSelect } from './events_select';
+import { ColumnHeader } from './column_header';
+
+interface Props {
+  actionsColumnWidth: number;
+  browserFields: BrowserFields;
+  columnHeaders: ColumnHeaderOptions[];
+  isEventViewer?: boolean;
+  isSelectAllChecked: boolean;
+  onColumnRemoved: OnColumnRemoved;
+  onColumnResized: OnColumnResized;
+  onColumnSorted: OnColumnSorted;
+  onFilterChange?: OnFilterChange;
+  onSelectAll: OnSelectAll;
+  onUpdateColumns: OnUpdateColumns;
+  showEventsSelect: boolean;
+  showSelectAllCheckbox: boolean;
+  sort: Sort;
+  timelineId: string;
+  toggleColumn: (column: ColumnHeaderOptions) => void;
+}
+
+interface DraggableContainerProps {
+  children: React.ReactNode;
+  onMount: () => void;
+  onUnmount: () => void;
+}
+
+export const DraggableContainer = React.memo<DraggableContainerProps>(
+  ({ children, onMount, onUnmount }) => {
+    useEffect(() => {
+      onMount();
+
+      return () => onUnmount();
+    }, [onMount, onUnmount]);
+
+    return <>{children}</>;
+  }
+);
+
+DraggableContainer.displayName = 'DraggableContainer';
+
+/** Renders the timeline header columns */
+export const ColumnHeadersComponent = ({
+  actionsColumnWidth,
+  browserFields,
+  columnHeaders,
+  isEventViewer = false,
+  isSelectAllChecked,
+  onColumnRemoved,
+  onColumnResized,
+  onColumnSorted,
+  onSelectAll,
+  onUpdateColumns,
+  onFilterChange = noop,
+  showEventsSelect,
+  showSelectAllCheckbox,
+  sort,
+  timelineId,
+  toggleColumn,
+}: Props) => {
+  const [draggingIndex, setDraggingIndex] = useState(null);
+
+  const handleSelectAllChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      onSelectAll({ isSelected: event.currentTarget.checked });
+    },
+    [onSelectAll]
+  );
+
+  const renderClone: DraggableChildrenFn = useCallback(
+    (dragProvided, dragSnapshot, rubric) => {
+      // TODO: Remove after github.com/DefinitelyTyped/DefinitelyTyped/pull/43057 is merged
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const index = (rubric as any).source.index;
+      const header = columnHeaders[index];
+
+      const onMount = () => setDraggingIndex(index);
+      const onUnmount = () => setDraggingIndex(null);
+
+      return (
+        <EventsTh
+          data-test-subj="draggable-header"
+          {...dragProvided.draggableProps}
+          {...dragProvided.dragHandleProps}
+          ref={dragProvided.innerRef}
+        >
+          <DraggableContainer onMount={onMount} onUnmount={onUnmount}>
+            <DragEffects>
+              <DraggableFieldBadge fieldId={header.id} fieldWidth={header.width} />
+            </DragEffects>
+          </DraggableContainer>
+        </EventsTh>
+      );
+    },
+    [columnHeaders, setDraggingIndex]
+  );
+
+  const ColumnHeaderList = useMemo(
+    () =>
+      columnHeaders.map((header, draggableIndex) => (
+        <ColumnHeader
+          key={header.id}
+          draggableIndex={draggableIndex}
+          timelineId={timelineId}
+          header={header}
+          isDragging={draggingIndex === draggableIndex}
+          onColumnRemoved={onColumnRemoved}
+          onColumnSorted={onColumnSorted}
+          onFilterChange={onFilterChange}
+          onColumnResized={onColumnResized}
+          sort={sort}
+        />
+      )),
+    [
+      columnHeaders,
+      timelineId,
+      draggingIndex,
+      onColumnRemoved,
+      onFilterChange,
+      onColumnResized,
+      sort,
+    ]
+  );
+
+  return (
+    <EventsThead data-test-subj="column-headers">
+      <EventsTrHeader>
+        <EventsThGroupActions
+          actionsColumnWidth={actionsColumnWidth}
+          justifyContent={showSelectAllCheckbox ? 'flexStart' : 'space-between'}
+          data-test-subj="actions-container"
+        >
+          {showEventsSelect && (
+            <EventsTh>
+              <EventsThContent textAlign="center">
+                <EventsSelect checkState="unchecked" timelineId={timelineId} />
+              </EventsThContent>
+            </EventsTh>
+          )}
+          {showSelectAllCheckbox && (
+            <EventsTh>
+              <EventsThContent textAlign="center">
+                <EuiCheckbox
+                  data-test-subj="select-all-events"
+                  id={'select-all-events'}
+                  checked={isSelectAllChecked}
+                  onChange={handleSelectAllChange}
+                />
+              </EventsThContent>
+            </EventsTh>
+          )}
+          <EventsTh>
+            <EventsThContent textAlign={showSelectAllCheckbox ? 'left' : 'center'}>
+              <StatefulFieldsBrowser
+                browserFields={browserFields}
+                columnHeaders={columnHeaders}
+                data-test-subj="field-browser"
+                height={FIELD_BROWSER_HEIGHT}
+                isEventViewer={isEventViewer}
+                onUpdateColumns={onUpdateColumns}
+                timelineId={timelineId}
+                toggleColumn={toggleColumn}
+                width={FIELD_BROWSER_WIDTH}
+              />
+            </EventsThContent>
+          </EventsTh>
+        </EventsThGroupActions>
+
+        <Droppable
+          direction={'horizontal'}
+          droppableId={`${droppableTimelineColumnsPrefix}${timelineId}`}
+          isDropDisabled={false}
+          type={DRAG_TYPE_FIELD}
+          renderClone={renderClone}
+        >
+          {(dropProvided, snapshot) => (
+            <>
+              <EventsThGroupData
+                data-test-subj="headers-group"
+                ref={dropProvided.innerRef}
+                isDragging={snapshot.isDraggingOver}
+                {...dropProvided.droppableProps}
+              >
+                {ColumnHeaderList}
+              </EventsThGroupData>
+            </>
+          )}
+        </Droppable>
+      </EventsTrHeader>
+    </EventsThead>
+  );
+};
+
+export const ColumnHeaders = React.memo(
+  ColumnHeadersComponent,
+  (prevProps, nextProps) =>
+    prevProps.actionsColumnWidth === nextProps.actionsColumnWidth &&
+    prevProps.isEventViewer === nextProps.isEventViewer &&
+    prevProps.isSelectAllChecked === nextProps.isSelectAllChecked &&
+    prevProps.onColumnRemoved === nextProps.onColumnRemoved &&
+    prevProps.onColumnResized === nextProps.onColumnResized &&
+    prevProps.onColumnSorted === nextProps.onColumnSorted &&
+    prevProps.onSelectAll === nextProps.onSelectAll &&
+    prevProps.onUpdateColumns === nextProps.onUpdateColumns &&
+    prevProps.onFilterChange === nextProps.onFilterChange &&
+    prevProps.showEventsSelect === nextProps.showEventsSelect &&
+    prevProps.showSelectAllCheckbox === nextProps.showSelectAllCheckbox &&
+    prevProps.sort === nextProps.sort &&
+    prevProps.timelineId === nextProps.timelineId &&
+    prevProps.toggleColumn === nextProps.toggleColumn &&
+    deepEqual(prevProps.columnHeaders, nextProps.columnHeaders) &&
+    deepEqual(prevProps.browserFields, nextProps.browserFields)
+);
diff --git a/x-pack/plugins/siem/public/components/timeline/body/column_headers/range_picker/index.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/range_picker/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/column_headers/range_picker/index.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/range_picker/index.test.tsx
diff --git a/x-pack/plugins/siem/public/components/timeline/body/column_headers/range_picker/index.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/range_picker/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/column_headers/range_picker/index.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/range_picker/index.tsx
diff --git a/x-pack/plugins/siem/public/components/timeline/body/column_headers/range_picker/ranges.ts b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/range_picker/ranges.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/column_headers/range_picker/ranges.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/range_picker/ranges.ts
diff --git a/x-pack/plugins/siem/public/components/timeline/body/column_headers/range_picker/translations.ts b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/range_picker/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/column_headers/range_picker/translations.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/range_picker/translations.ts
diff --git a/x-pack/plugins/siem/public/components/timeline/body/column_headers/text_filter/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/text_filter/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/column_headers/text_filter/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/text_filter/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/timeline/body/column_headers/text_filter/index.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/text_filter/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/column_headers/text_filter/index.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/text_filter/index.test.tsx
diff --git a/x-pack/plugins/siem/public/components/timeline/body/column_headers/text_filter/index.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/text_filter/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/column_headers/text_filter/index.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/text_filter/index.tsx
diff --git a/x-pack/plugins/siem/public/components/timeline/body/column_headers/translations.ts b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/column_headers/translations.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/column_headers/translations.ts
diff --git a/x-pack/plugins/siem/public/components/timeline/body/column_id.ts b/x-pack/plugins/siem/public/timelines/components/timeline/body/column_id.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/column_id.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/column_id.ts
diff --git a/x-pack/plugins/siem/public/components/timeline/body/constants.ts b/x-pack/plugins/siem/public/timelines/components/timeline/body/constants.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/constants.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/constants.ts
diff --git a/x-pack/plugins/siem/public/components/timeline/body/data_driven_columns/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/body/data_driven_columns/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/data_driven_columns/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/data_driven_columns/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/body/data_driven_columns/index.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/data_driven_columns/index.test.tsx
new file mode 100644
index 00000000000000..8a2cc88eea9106
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/data_driven_columns/index.test.tsx
@@ -0,0 +1,34 @@
+/*
+ * 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 { shallow } from 'enzyme';
+
+import React from 'react';
+
+import { mockTimelineData } from '../../../../../common/mock';
+import { defaultHeaders } from '../column_headers/default_headers';
+import { columnRenderers } from '../renderers';
+
+import { DataDrivenColumns } from '.';
+
+describe('Columns', () => {
+  const headersSansTimestamp = defaultHeaders.filter(h => h.id !== '@timestamp');
+
+  test('it renders the expected columns', () => {
+    const wrapper = shallow(
+      <DataDrivenColumns
+        _id={mockTimelineData[0]._id}
+        columnHeaders={headersSansTimestamp}
+        columnRenderers={columnRenderers}
+        data={mockTimelineData[0].data}
+        ecsData={mockTimelineData[0].ecs}
+        onColumnResized={jest.fn()}
+        timelineId="test"
+      />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/body/data_driven_columns/index.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/data_driven_columns/index.tsx
new file mode 100644
index 00000000000000..da00e4054a763d
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/data_driven_columns/index.tsx
@@ -0,0 +1,66 @@
+/*
+ * 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 { getOr } from 'lodash/fp';
+
+import { Ecs, TimelineNonEcsData } from '../../../../../graphql/types';
+import { ColumnHeaderOptions } from '../../../../../timelines/store/timeline/model';
+import { OnColumnResized } from '../../events';
+import { EventsTd, EventsTdContent, EventsTdGroupData } from '../../styles';
+import { ColumnRenderer } from '../renderers/column_renderer';
+import { getColumnRenderer } from '../renderers/get_column_renderer';
+
+interface Props {
+  _id: string;
+  columnHeaders: ColumnHeaderOptions[];
+  columnRenderers: ColumnRenderer[];
+  data: TimelineNonEcsData[];
+  ecsData: Ecs;
+  onColumnResized: OnColumnResized;
+  timelineId: string;
+}
+
+export const DataDrivenColumns = React.memo<Props>(
+  ({ _id, columnHeaders, columnRenderers, data, ecsData, timelineId }) => (
+    <EventsTdGroupData data-test-subj="data-driven-columns">
+      {columnHeaders.map(header => (
+        <EventsTd key={header.id} width={header.width}>
+          <EventsTdContent data-test-subj="cell-container">
+            {getColumnRenderer(header.id, columnRenderers, data).renderColumn({
+              columnName: header.id,
+              eventId: _id,
+              field: header,
+              linkValues: getOr([], header.linkField ?? '', ecsData),
+              timelineId,
+              truncate: true,
+              values: getMappedNonEcsValue({
+                data,
+                fieldName: header.id,
+              }),
+            })}
+          </EventsTdContent>
+        </EventsTd>
+      ))}
+    </EventsTdGroupData>
+  )
+);
+
+DataDrivenColumns.displayName = 'DataDrivenColumns';
+
+const getMappedNonEcsValue = ({
+  data,
+  fieldName,
+}: {
+  data: TimelineNonEcsData[];
+  fieldName: string;
+}): string[] | undefined => {
+  const item = data.find(d => d.field === fieldName);
+  if (item != null && item.value != null) {
+    return item.value;
+  }
+  return undefined;
+};
diff --git a/x-pack/plugins/siem/public/components/timeline/body/events/event_column_view.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/events/event_column_view.tsx
similarity index 95%
rename from x-pack/plugins/siem/public/components/timeline/body/events/event_column_view.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/events/event_column_view.tsx
index daf9c3d8b1f963..2b143d34d3814e 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/events/event_column_view.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/events/event_column_view.tsx
@@ -7,9 +7,9 @@
 import React, { useMemo } from 'react';
 import uuid from 'uuid';
 
-import { TimelineNonEcsData, Ecs } from '../../../../graphql/types';
-import { Note } from '../../../../lib/note';
-import { ColumnHeaderOptions } from '../../../../store/timeline/model';
+import { TimelineNonEcsData, Ecs } from '../../../../../graphql/types';
+import { Note } from '../../../../../common/lib/note';
+import { ColumnHeaderOptions } from '../../../../../timelines/store/timeline/model';
 import { AssociateNote, UpdateNote } from '../../../notes/helpers';
 import { OnColumnResized, OnPinEvent, OnRowSelected, OnUnPinEvent } from '../../events';
 import { EventsTdContent, EventsTrData } from '../../styles';
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/body/events/index.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/events/index.tsx
new file mode 100644
index 00000000000000..fc892f5b8e6b13
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/events/index.tsx
@@ -0,0 +1,112 @@
+/*
+ * 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 { BrowserFields } from '../../../../../common/containers/source';
+import { TimelineItem, TimelineNonEcsData } from '../../../../../graphql/types';
+import { ColumnHeaderOptions } from '../../../../../timelines/store/timeline/model';
+import { maxDelay } from '../../../../../common/lib/helpers/scheduler';
+import { Note } from '../../../../../common/lib/note';
+import { AddNoteToEvent, UpdateNote } from '../../../notes/helpers';
+import {
+  OnColumnResized,
+  OnPinEvent,
+  OnRowSelected,
+  OnUnPinEvent,
+  OnUpdateColumns,
+} from '../../events';
+import { EventsTbody } from '../../styles';
+import { ColumnRenderer } from '../renderers/column_renderer';
+import { RowRenderer } from '../renderers/row_renderer';
+import { StatefulEvent } from './stateful_event';
+import { eventIsPinned } from '../helpers';
+
+interface Props {
+  actionsColumnWidth: number;
+  addNoteToEvent: AddNoteToEvent;
+  browserFields: BrowserFields;
+  columnHeaders: ColumnHeaderOptions[];
+  columnRenderers: ColumnRenderer[];
+  containerElementRef: HTMLDivElement;
+  data: TimelineItem[];
+  eventIdToNoteIds: Readonly<Record<string, string[]>>;
+  getNotesByIds: (noteIds: string[]) => Note[];
+  id: string;
+  isEventViewer?: boolean;
+  loadingEventIds: Readonly<string[]>;
+  onColumnResized: OnColumnResized;
+  onPinEvent: OnPinEvent;
+  onRowSelected: OnRowSelected;
+  onUpdateColumns: OnUpdateColumns;
+  onUnPinEvent: OnUnPinEvent;
+  pinnedEventIds: Readonly<Record<string, boolean>>;
+  rowRenderers: RowRenderer[];
+  selectedEventIds: Readonly<Record<string, TimelineNonEcsData[]>>;
+  showCheckboxes: boolean;
+  toggleColumn: (column: ColumnHeaderOptions) => void;
+  updateNote: UpdateNote;
+}
+
+const EventsComponent: React.FC<Props> = ({
+  actionsColumnWidth,
+  addNoteToEvent,
+  browserFields,
+  columnHeaders,
+  columnRenderers,
+  containerElementRef,
+  data,
+  eventIdToNoteIds,
+  getNotesByIds,
+  id,
+  isEventViewer = false,
+  loadingEventIds,
+  onColumnResized,
+  onPinEvent,
+  onRowSelected,
+  onUpdateColumns,
+  onUnPinEvent,
+  pinnedEventIds,
+  rowRenderers,
+  selectedEventIds,
+  showCheckboxes,
+  toggleColumn,
+  updateNote,
+}) => (
+  <EventsTbody data-test-subj="events">
+    {data.map((event, i) => (
+      <StatefulEvent
+        containerElementRef={containerElementRef}
+        actionsColumnWidth={actionsColumnWidth}
+        addNoteToEvent={addNoteToEvent}
+        browserFields={browserFields}
+        columnHeaders={columnHeaders}
+        columnRenderers={columnRenderers}
+        event={event}
+        eventIdToNoteIds={eventIdToNoteIds}
+        getNotesByIds={getNotesByIds}
+        isEventPinned={eventIsPinned({ eventId: event._id, pinnedEventIds })}
+        isEventViewer={isEventViewer}
+        key={`${event._id}_${event._index}`}
+        loadingEventIds={loadingEventIds}
+        maxDelay={maxDelay(i)}
+        onColumnResized={onColumnResized}
+        onPinEvent={onPinEvent}
+        onRowSelected={onRowSelected}
+        onUnPinEvent={onUnPinEvent}
+        onUpdateColumns={onUpdateColumns}
+        rowRenderers={rowRenderers}
+        selectedEventIds={selectedEventIds}
+        showCheckboxes={showCheckboxes}
+        timelineId={id}
+        toggleColumn={toggleColumn}
+        updateNote={updateNote}
+      />
+    ))}
+  </EventsTbody>
+);
+
+export const Events = React.memo(EventsComponent);
diff --git a/x-pack/plugins/siem/public/components/timeline/body/events/stateful_event.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/events/stateful_event.tsx
similarity index 94%
rename from x-pack/plugins/siem/public/components/timeline/body/events/stateful_event.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/events/stateful_event.tsx
index 6e5c292064dc63..61c58095189285 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/events/stateful_event.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/events/stateful_event.tsx
@@ -8,14 +8,14 @@ import React, { useEffect, useRef, useState, useCallback } from 'react';
 import uuid from 'uuid';
 import VisibilitySensor from 'react-visibility-sensor';
 
-import { BrowserFields } from '../../../../containers/source';
-import { TimelineDetailsQuery } from '../../../../containers/timeline/details';
-import { TimelineItem, DetailItem, TimelineNonEcsData } from '../../../../graphql/types';
-import { requestIdleCallbackViaScheduler } from '../../../../lib/helpers/scheduler';
-import { Note } from '../../../../lib/note';
-import { ColumnHeaderOptions } from '../../../../store/timeline/model';
+import { BrowserFields } from '../../../../../common/containers/source';
+import { TimelineDetailsQuery } from '../../../../containers/details';
+import { TimelineItem, DetailItem, TimelineNonEcsData } from '../../../../../graphql/types';
+import { requestIdleCallbackViaScheduler } from '../../../../../common/lib/helpers/scheduler';
+import { Note } from '../../../../../common/lib/note';
+import { ColumnHeaderOptions } from '../../../../../timelines/store/timeline/model';
 import { AddNoteToEvent, UpdateNote } from '../../../notes/helpers';
-import { SkeletonRow } from '../../../skeleton_row';
+import { SkeletonRow } from '../../skeleton_row';
 import {
   OnColumnResized,
   OnPinEvent,
@@ -31,7 +31,7 @@ import { getRowRenderer } from '../renderers/get_row_renderer';
 import { RowRenderer } from '../renderers/row_renderer';
 import { getEventType } from '../helpers';
 import { NoteCards } from '../../../notes/note_cards';
-import { useEventDetailsWidthContext } from '../../../events_viewer/event_details_width_context';
+import { useEventDetailsWidthContext } from '../../../../../common/components/events_viewer/event_details_width_context';
 import { EventColumnView } from './event_column_view';
 
 interface Props {
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/body/helpers.test.ts b/x-pack/plugins/siem/public/timelines/components/timeline/body/helpers.test.ts
new file mode 100644
index 00000000000000..e237e99df9ada4
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/helpers.test.ts
@@ -0,0 +1,228 @@
+/*
+ * 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 { Ecs } from '../../../../graphql/types';
+
+import { eventHasNotes, eventIsPinned, getPinTooltip, stringifyEvent } from './helpers';
+
+describe('helpers', () => {
+  describe('stringifyEvent', () => {
+    test('it omits __typename when it appears at arbitrary levels', () => {
+      const toStringify: Ecs = {
+        __typename: 'level 0',
+        _id: '4',
+        timestamp: '2018-11-08T19:03:25.937Z',
+        host: {
+          __typename: 'level 1',
+          name: ['suricata'],
+          ip: ['192.168.0.1'],
+        },
+        event: {
+          id: ['4'],
+          category: ['Attempted Administrator Privilege Gain'],
+          type: ['Alert'],
+          module: ['suricata'],
+          severity: [1],
+        },
+        source: {
+          ip: ['192.168.0.3'],
+          port: [53],
+        },
+        destination: {
+          ip: ['192.168.0.3'],
+          port: [6343],
+        },
+        suricata: {
+          eve: {
+            flow_id: [4],
+            proto: [''],
+            alert: {
+              signature: ['ET PHONE HOME Stack Overflow (CVE-2019-90210)'],
+              signature_id: [4],
+              __typename: 'level 2',
+            },
+          },
+        },
+        user: {
+          id: ['4'],
+          name: ['jack.black'],
+        },
+        geo: {
+          region_name: ['neither'],
+          country_iso_code: ['sasquatch'],
+        },
+      } as Ecs; // as cast so that `__typename` can be added for the tests even though it is not part of ECS
+      const expected: Ecs = {
+        _id: '4',
+        timestamp: '2018-11-08T19:03:25.937Z',
+        host: {
+          name: ['suricata'],
+          ip: ['192.168.0.1'],
+        },
+        event: {
+          id: ['4'],
+          category: ['Attempted Administrator Privilege Gain'],
+          type: ['Alert'],
+          module: ['suricata'],
+          severity: [1],
+        },
+        source: {
+          ip: ['192.168.0.3'],
+          port: [53],
+        },
+        destination: {
+          ip: ['192.168.0.3'],
+          port: [6343],
+        },
+        suricata: {
+          eve: {
+            flow_id: [4],
+            proto: [''],
+            alert: {
+              signature: ['ET PHONE HOME Stack Overflow (CVE-2019-90210)'],
+              signature_id: [4],
+            },
+          },
+        },
+        user: {
+          id: ['4'],
+          name: ['jack.black'],
+        },
+        geo: {
+          region_name: ['neither'],
+          country_iso_code: ['sasquatch'],
+        },
+      };
+      expect(JSON.parse(stringifyEvent(toStringify))).toEqual(expected);
+    });
+
+    test('it omits null and undefined values at arbitrary levels, for arbitrary data types', () => {
+      const expected: Ecs = {
+        _id: '4',
+        host: {},
+        event: {
+          id: ['4'],
+          category: ['theory'],
+          type: ['Alert'],
+          module: ['me'],
+          severity: [1],
+        },
+        source: {
+          port: [53],
+        },
+        destination: {
+          ip: ['192.168.0.3'],
+          port: [6343],
+        },
+        suricata: {
+          eve: {
+            flow_id: [4],
+            proto: [''],
+            alert: {
+              signature: ['dance moves'],
+            },
+          },
+        },
+        user: {
+          id: ['4'],
+          name: ['no use for a'],
+        },
+        geo: {
+          region_name: ['bizzaro'],
+          country_iso_code: ['world'],
+        },
+      };
+      const toStringify: Ecs = {
+        _id: '4',
+        timestamp: null,
+        host: {
+          name: null,
+          ip: null,
+        },
+        event: {
+          id: ['4'],
+          category: ['theory'],
+          type: ['Alert'],
+          module: ['me'],
+          severity: [1],
+        },
+        source: {
+          ip: undefined,
+          port: [53],
+        },
+        destination: {
+          ip: ['192.168.0.3'],
+          port: [6343],
+        },
+        suricata: {
+          eve: {
+            flow_id: [4],
+            proto: [''],
+            alert: {
+              signature: ['dance moves'],
+              signature_id: undefined,
+            },
+          },
+        },
+        user: {
+          id: ['4'],
+          name: ['no use for a'],
+        },
+        geo: {
+          region_name: ['bizzaro'],
+          country_iso_code: ['world'],
+        },
+      };
+      expect(JSON.parse(stringifyEvent(toStringify))).toEqual(expected);
+    });
+  });
+
+  describe('eventHasNotes', () => {
+    test('it returns false for when notes is empty', () => {
+      expect(eventHasNotes([])).toEqual(false);
+    });
+
+    test('it returns true when notes is non-empty', () => {
+      expect(eventHasNotes(['8af859e2-e4f8-4754-b702-4f227f15aae5'])).toEqual(true);
+    });
+  });
+
+  describe('getPinTooltip', () => {
+    test('it indicates the event may NOT be unpinned when `isPinned` is `true` and the event has notes', () => {
+      expect(getPinTooltip({ isPinned: true, eventHasNotes: true })).toEqual(
+        'This event cannot be unpinned because it has notes'
+      );
+    });
+
+    test('it indicates the event is pinned when `isPinned` is `true` and the event does NOT have notes', () => {
+      expect(getPinTooltip({ isPinned: true, eventHasNotes: false })).toEqual('Pinned event');
+    });
+
+    test('it indicates the event is NOT pinned when `isPinned` is `false` and the event has notes', () => {
+      expect(getPinTooltip({ isPinned: false, eventHasNotes: true })).toEqual('Unpinned event');
+    });
+
+    test('it indicates the event is NOT pinned when `isPinned` is `false` and the event does NOT have notes', () => {
+      expect(getPinTooltip({ isPinned: false, eventHasNotes: false })).toEqual('Unpinned event');
+    });
+  });
+
+  describe('eventIsPinned', () => {
+    test('returns true when the specified event id is contained in the pinnedEventIds', () => {
+      const eventId = 'race-for-the-prize';
+      const pinnedEventIds = { [eventId]: true, 'waiting-for-superman': true };
+
+      expect(eventIsPinned({ eventId, pinnedEventIds })).toEqual(true);
+    });
+
+    test('returns false when the specified event id is NOT contained in the pinnedEventIds', () => {
+      const eventId = 'safety-pin';
+      const pinnedEventIds = { 'thumb-tack': true };
+
+      expect(eventIsPinned({ eventId, pinnedEventIds })).toEqual(false);
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/body/helpers.ts b/x-pack/plugins/siem/public/timelines/components/timeline/body/helpers.ts
new file mode 100644
index 00000000000000..a3eb3cc651f7ac
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/helpers.ts
@@ -0,0 +1,89 @@
+/*
+ * 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 { isEmpty, noop } from 'lodash/fp';
+
+import { Ecs, TimelineItem, TimelineNonEcsData } from '../../../../graphql/types';
+import { EventType } from '../../../../timelines/store/timeline/model';
+import { OnPinEvent, OnUnPinEvent } from '../events';
+
+import * as i18n from './translations';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const omitTypenameAndEmpty = (k: string, v: any): any | undefined =>
+  k !== '__typename' && v != null ? v : undefined;
+
+export const stringifyEvent = (ecs: Ecs): string => JSON.stringify(ecs, omitTypenameAndEmpty, 2);
+
+export const eventHasNotes = (noteIds: string[]): boolean => !isEmpty(noteIds);
+
+export const getPinTooltip = ({
+  isPinned,
+  // eslint-disable-next-line no-shadow
+  eventHasNotes,
+}: {
+  isPinned: boolean;
+  eventHasNotes: boolean;
+}) => (isPinned && eventHasNotes ? i18n.PINNED_WITH_NOTES : isPinned ? i18n.PINNED : i18n.UNPINNED);
+
+export interface IsPinnedParams {
+  eventId: string;
+  pinnedEventIds: Readonly<Record<string, boolean>>;
+}
+
+export const eventIsPinned = ({ eventId, pinnedEventIds }: IsPinnedParams): boolean =>
+  pinnedEventIds[eventId] === true;
+
+export interface GetPinOnClickParams {
+  allowUnpinning: boolean;
+  eventId: string;
+  onPinEvent: OnPinEvent;
+  onUnPinEvent: OnUnPinEvent;
+  isEventPinned: boolean;
+}
+
+export const getPinOnClick = ({
+  allowUnpinning,
+  eventId,
+  onPinEvent,
+  onUnPinEvent,
+  isEventPinned,
+}: GetPinOnClickParams): (() => void) => {
+  if (!allowUnpinning) {
+    return noop;
+  }
+  return isEventPinned ? () => onUnPinEvent(eventId) : () => onPinEvent(eventId);
+};
+
+/**
+ * Creates mapping of eventID -> fieldData for given fieldsToKeep. Used to store additional field
+ * data necessary for custom timeline actions in conjunction with selection state
+ * @param timelineData
+ * @param eventIds
+ * @param fieldsToKeep
+ */
+export const getEventIdToDataMapping = (
+  timelineData: TimelineItem[],
+  eventIds: string[],
+  fieldsToKeep: string[]
+): Record<string, TimelineNonEcsData[]> => {
+  return timelineData.reduce((acc, v) => {
+    const fvm = eventIds.includes(v._id)
+      ? { [v._id]: v.data.filter(ti => fieldsToKeep.includes(ti.field)) }
+      : {};
+    return {
+      ...acc,
+      ...fvm,
+    };
+  }, {});
+};
+
+/** Return eventType raw or signal */
+export const getEventType = (event: Ecs): Omit<EventType, 'all'> => {
+  if (!isEmpty(event.signal?.rule?.id)) {
+    return 'signal';
+  }
+  return 'raw';
+};
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/body/index.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/index.test.tsx
new file mode 100644
index 00000000000000..c2c3f4dd7f12ef
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/index.test.tsx
@@ -0,0 +1,355 @@
+/*
+ * 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 { mockBrowserFields } from '../../../../common/containers/source/mock';
+import { Direction } from '../../../../graphql/types';
+import { defaultHeaders, mockTimelineData } from '../../../../common/mock';
+import { TestProviders } from '../../../../common/mock/test_providers';
+
+import { Body, BodyProps } from '.';
+import { columnRenderers, rowRenderers } from './renderers';
+import { Sort } from './sort';
+import { wait } from '../../../../common/lib/helpers';
+import { useMountAppended } from '../../../../common/utils/use_mount_appended';
+
+const testBodyHeight = 700;
+const mockGetNotesByIds = (eventId: string[]) => [];
+const mockSort: Sort = {
+  columnId: '@timestamp',
+  sortDirection: Direction.desc,
+};
+
+jest.mock(
+  'react-visibility-sensor',
+  () => ({ children }: { children: (args: { isVisible: boolean }) => React.ReactNode }) =>
+    children({ isVisible: true })
+);
+
+jest.mock('../../../../common/lib/helpers/scheduler', () => ({
+  requestIdleCallbackViaScheduler: (callback: () => void, opts?: unknown) => {
+    callback();
+  },
+  maxDelay: () => 3000,
+}));
+
+describe('Body', () => {
+  const mount = useMountAppended();
+
+  describe('rendering', () => {
+    test('it renders the column headers', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <Body
+            addNoteToEvent={jest.fn()}
+            browserFields={mockBrowserFields}
+            columnHeaders={defaultHeaders}
+            columnRenderers={columnRenderers}
+            data={mockTimelineData}
+            eventIdToNoteIds={{}}
+            height={testBodyHeight}
+            id={'timeline-test'}
+            isSelectAllChecked={false}
+            getNotesByIds={mockGetNotesByIds}
+            loadingEventIds={[]}
+            onColumnRemoved={jest.fn()}
+            onColumnResized={jest.fn()}
+            onColumnSorted={jest.fn()}
+            onFilterChange={jest.fn()}
+            onPinEvent={jest.fn()}
+            onRowSelected={jest.fn()}
+            onSelectAll={jest.fn()}
+            onUnPinEvent={jest.fn()}
+            onUpdateColumns={jest.fn()}
+            pinnedEventIds={{}}
+            rowRenderers={rowRenderers}
+            selectedEventIds={{}}
+            sort={mockSort}
+            showCheckboxes={false}
+            toggleColumn={jest.fn()}
+            updateNote={jest.fn()}
+          />
+        </TestProviders>
+      );
+
+      expect(
+        wrapper
+          .find('[data-test-subj="column-headers"]')
+          .first()
+          .exists()
+      ).toEqual(true);
+    });
+
+    test('it renders the scroll container', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <Body
+            addNoteToEvent={jest.fn()}
+            browserFields={mockBrowserFields}
+            columnHeaders={defaultHeaders}
+            columnRenderers={columnRenderers}
+            data={mockTimelineData}
+            eventIdToNoteIds={{}}
+            height={testBodyHeight}
+            id={'timeline-test'}
+            isSelectAllChecked={false}
+            getNotesByIds={mockGetNotesByIds}
+            loadingEventIds={[]}
+            onColumnRemoved={jest.fn()}
+            onColumnResized={jest.fn()}
+            onColumnSorted={jest.fn()}
+            onFilterChange={jest.fn()}
+            onPinEvent={jest.fn()}
+            onRowSelected={jest.fn()}
+            onSelectAll={jest.fn()}
+            onUnPinEvent={jest.fn()}
+            onUpdateColumns={jest.fn()}
+            pinnedEventIds={{}}
+            rowRenderers={rowRenderers}
+            selectedEventIds={{}}
+            sort={mockSort}
+            showCheckboxes={false}
+            toggleColumn={jest.fn()}
+            updateNote={jest.fn()}
+          />
+        </TestProviders>
+      );
+
+      expect(
+        wrapper
+          .find('[data-test-subj="timeline-body"]')
+          .first()
+          .exists()
+      ).toEqual(true);
+    });
+
+    test('it renders events', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <Body
+            addNoteToEvent={jest.fn()}
+            browserFields={mockBrowserFields}
+            columnHeaders={defaultHeaders}
+            columnRenderers={columnRenderers}
+            data={mockTimelineData}
+            eventIdToNoteIds={{}}
+            height={testBodyHeight}
+            id={'timeline-test'}
+            isSelectAllChecked={false}
+            getNotesByIds={mockGetNotesByIds}
+            loadingEventIds={[]}
+            onColumnRemoved={jest.fn()}
+            onColumnResized={jest.fn()}
+            onColumnSorted={jest.fn()}
+            onFilterChange={jest.fn()}
+            onPinEvent={jest.fn()}
+            onRowSelected={jest.fn()}
+            onSelectAll={jest.fn()}
+            onUnPinEvent={jest.fn()}
+            onUpdateColumns={jest.fn()}
+            pinnedEventIds={{}}
+            rowRenderers={rowRenderers}
+            selectedEventIds={{}}
+            sort={mockSort}
+            showCheckboxes={false}
+            toggleColumn={jest.fn()}
+            updateNote={jest.fn()}
+          />
+        </TestProviders>
+      );
+
+      expect(
+        wrapper
+          .find('[data-test-subj="events"]')
+          .first()
+          .exists()
+      ).toEqual(true);
+    });
+
+    test('it renders a tooltip for timestamp', async () => {
+      const headersJustTimestamp = defaultHeaders.filter(h => h.id === '@timestamp');
+
+      const wrapper = mount(
+        <TestProviders>
+          <Body
+            addNoteToEvent={jest.fn()}
+            browserFields={mockBrowserFields}
+            columnHeaders={headersJustTimestamp}
+            columnRenderers={columnRenderers}
+            data={mockTimelineData}
+            eventIdToNoteIds={{}}
+            height={testBodyHeight}
+            id={'timeline-test'}
+            isSelectAllChecked={false}
+            getNotesByIds={mockGetNotesByIds}
+            loadingEventIds={[]}
+            onColumnRemoved={jest.fn()}
+            onColumnResized={jest.fn()}
+            onColumnSorted={jest.fn()}
+            onFilterChange={jest.fn()}
+            onPinEvent={jest.fn()}
+            onRowSelected={jest.fn()}
+            onSelectAll={jest.fn()}
+            onUnPinEvent={jest.fn()}
+            onUpdateColumns={jest.fn()}
+            pinnedEventIds={{}}
+            rowRenderers={rowRenderers}
+            selectedEventIds={{}}
+            sort={mockSort}
+            showCheckboxes={false}
+            toggleColumn={jest.fn()}
+            updateNote={jest.fn()}
+          />
+        </TestProviders>
+      );
+      wrapper.update();
+      await wait();
+      wrapper.update();
+      headersJustTimestamp.forEach(() => {
+        expect(
+          wrapper
+            .find('[data-test-subj="data-driven-columns"]')
+            .first()
+            .find('[data-test-subj="localized-date-tool-tip"]')
+            .exists()
+        ).toEqual(true);
+      });
+    });
+  });
+
+  describe('action on event', () => {
+    const dispatchAddNoteToEvent = jest.fn();
+    const dispatchOnPinEvent = jest.fn();
+
+    const addaNoteToEvent = (wrapper: ReturnType<typeof mount>, note: string) => {
+      wrapper
+        .find('[data-test-subj="add-note"]')
+        .first()
+        .find('button')
+        .simulate('click');
+      wrapper.update();
+      wrapper
+        .find('[data-test-subj="new-note-tabs"] textarea')
+        .simulate('change', { target: { value: note } });
+      wrapper.update();
+      wrapper
+        .find('button[data-test-subj="add-note"]')
+        .first()
+        .simulate('click');
+      wrapper.update();
+    };
+
+    // We are doing that because we need to wrapped this component with redux
+    // and redux does not like to be updated and since we need to update our
+    // child component (BODY) and we do not want to scare anyone with this error
+    // we are hiding it!!!
+    // eslint-disable-next-line no-console
+    const originalError = console.error;
+    beforeAll(() => {
+      // eslint-disable-next-line no-console
+      console.error = (...args: string[]) => {
+        if (/<Provider> does not support changing `store` on the fly/.test(args[0])) {
+          return;
+        }
+        originalError.call(console, ...args);
+      };
+    });
+
+    beforeEach(() => {
+      dispatchAddNoteToEvent.mockClear();
+      dispatchOnPinEvent.mockClear();
+    });
+
+    test('Add a Note to an event', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <Body
+            addNoteToEvent={dispatchAddNoteToEvent}
+            browserFields={mockBrowserFields}
+            columnHeaders={defaultHeaders}
+            columnRenderers={columnRenderers}
+            data={mockTimelineData}
+            eventIdToNoteIds={{}}
+            height={testBodyHeight}
+            id={'timeline-test'}
+            isSelectAllChecked={false}
+            getNotesByIds={mockGetNotesByIds}
+            loadingEventIds={[]}
+            onColumnRemoved={jest.fn()}
+            onColumnResized={jest.fn()}
+            onColumnSorted={jest.fn()}
+            onFilterChange={jest.fn()}
+            onPinEvent={dispatchOnPinEvent}
+            onRowSelected={jest.fn()}
+            onSelectAll={jest.fn()}
+            onUnPinEvent={jest.fn()}
+            onUpdateColumns={jest.fn()}
+            pinnedEventIds={{}}
+            rowRenderers={rowRenderers}
+            selectedEventIds={{}}
+            sort={mockSort}
+            showCheckboxes={false}
+            toggleColumn={jest.fn()}
+            updateNote={jest.fn()}
+          />
+        </TestProviders>
+      );
+      addaNoteToEvent(wrapper, 'hello world');
+
+      expect(dispatchAddNoteToEvent).toHaveBeenCalled();
+      expect(dispatchOnPinEvent).toHaveBeenCalled();
+    });
+
+    test('Add two Note to an event', () => {
+      const Proxy = (props: BodyProps) => (
+        <TestProviders>
+          <Body {...props} />
+        </TestProviders>
+      );
+
+      const wrapper = mount(
+        <Proxy
+          addNoteToEvent={dispatchAddNoteToEvent}
+          browserFields={mockBrowserFields}
+          columnHeaders={defaultHeaders}
+          columnRenderers={columnRenderers}
+          data={mockTimelineData}
+          eventIdToNoteIds={{}}
+          height={testBodyHeight}
+          id={'timeline-test'}
+          isSelectAllChecked={false}
+          getNotesByIds={mockGetNotesByIds}
+          loadingEventIds={[]}
+          onColumnRemoved={jest.fn()}
+          onColumnResized={jest.fn()}
+          onColumnSorted={jest.fn()}
+          onFilterChange={jest.fn()}
+          onPinEvent={dispatchOnPinEvent}
+          onRowSelected={jest.fn()}
+          onSelectAll={jest.fn()}
+          onUnPinEvent={jest.fn()}
+          onUpdateColumns={jest.fn()}
+          pinnedEventIds={{}}
+          rowRenderers={rowRenderers}
+          selectedEventIds={{}}
+          sort={mockSort}
+          showCheckboxes={false}
+          toggleColumn={jest.fn()}
+          updateNote={jest.fn()}
+        />
+      );
+      addaNoteToEvent(wrapper, 'hello world');
+      dispatchAddNoteToEvent.mockClear();
+      dispatchOnPinEvent.mockClear();
+      wrapper.setProps({ pinnedEventIds: { 1: true } });
+      wrapper.update();
+      addaNoteToEvent(wrapper, 'new hello world');
+      expect(dispatchAddNoteToEvent).toHaveBeenCalled();
+      expect(dispatchOnPinEvent).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/body/index.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/index.tsx
new file mode 100644
index 00000000000000..391d19cb7855c9
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/index.tsx
@@ -0,0 +1,169 @@
+/*
+ * 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, { useMemo, useRef } from 'react';
+
+import { BrowserFields } from '../../../../common/containers/source';
+import { TimelineItem, TimelineNonEcsData } from '../../../../graphql/types';
+import { Note } from '../../../../common/lib/note';
+import { ColumnHeaderOptions } from '../../../../timelines/store/timeline/model';
+import { AddNoteToEvent, UpdateNote } from '../../notes/helpers';
+import {
+  OnColumnRemoved,
+  OnColumnResized,
+  OnColumnSorted,
+  OnFilterChange,
+  OnPinEvent,
+  OnRowSelected,
+  OnSelectAll,
+  OnUnPinEvent,
+  OnUpdateColumns,
+} from '../events';
+import { EventsTable, TimelineBody, TimelineBodyGlobalStyle } from '../styles';
+import { ColumnHeaders } from './column_headers';
+import { getActionsColumnWidth } from './column_headers/helpers';
+import { Events } from './events';
+import { ColumnRenderer } from './renderers/column_renderer';
+import { RowRenderer } from './renderers/row_renderer';
+import { Sort } from './sort';
+import { useTimelineTypeContext } from '../timeline_context';
+
+export interface BodyProps {
+  addNoteToEvent: AddNoteToEvent;
+  browserFields: BrowserFields;
+  columnHeaders: ColumnHeaderOptions[];
+  columnRenderers: ColumnRenderer[];
+  data: TimelineItem[];
+  getNotesByIds: (noteIds: string[]) => Note[];
+  height?: number;
+  id: string;
+  isEventViewer?: boolean;
+  isSelectAllChecked: boolean;
+  eventIdToNoteIds: Readonly<Record<string, string[]>>;
+  loadingEventIds: Readonly<string[]>;
+  onColumnRemoved: OnColumnRemoved;
+  onColumnResized: OnColumnResized;
+  onColumnSorted: OnColumnSorted;
+  onRowSelected: OnRowSelected;
+  onSelectAll: OnSelectAll;
+  onFilterChange: OnFilterChange;
+  onPinEvent: OnPinEvent;
+  onUpdateColumns: OnUpdateColumns;
+  onUnPinEvent: OnUnPinEvent;
+  pinnedEventIds: Readonly<Record<string, boolean>>;
+  rowRenderers: RowRenderer[];
+  selectedEventIds: Readonly<Record<string, TimelineNonEcsData[]>>;
+  showCheckboxes: boolean;
+  sort: Sort;
+  toggleColumn: (column: ColumnHeaderOptions) => void;
+  updateNote: UpdateNote;
+}
+
+/** Renders the timeline body */
+export const Body = React.memo<BodyProps>(
+  ({
+    addNoteToEvent,
+    browserFields,
+    columnHeaders,
+    columnRenderers,
+    data,
+    eventIdToNoteIds,
+    getNotesByIds,
+    height,
+    id,
+    isEventViewer = false,
+    isSelectAllChecked,
+    loadingEventIds,
+    onColumnRemoved,
+    onColumnResized,
+    onColumnSorted,
+    onRowSelected,
+    onSelectAll,
+    onFilterChange,
+    onPinEvent,
+    onUpdateColumns,
+    onUnPinEvent,
+    pinnedEventIds,
+    rowRenderers,
+    selectedEventIds,
+    showCheckboxes,
+    sort,
+    toggleColumn,
+    updateNote,
+  }) => {
+    const containerElementRef = useRef<HTMLDivElement>(null);
+    const timelineTypeContext = useTimelineTypeContext();
+    const additionalActionWidth = useMemo(
+      () => timelineTypeContext.timelineActions?.reduce((acc, v) => acc + v.width, 0) ?? 0,
+      [timelineTypeContext.timelineActions]
+    );
+    const actionsColumnWidth = useMemo(
+      () => getActionsColumnWidth(isEventViewer, showCheckboxes, additionalActionWidth),
+      [isEventViewer, showCheckboxes, additionalActionWidth]
+    );
+
+    const columnWidths = useMemo(
+      () =>
+        columnHeaders.reduce((totalWidth, header) => totalWidth + header.width, actionsColumnWidth),
+      [actionsColumnWidth, columnHeaders]
+    );
+
+    return (
+      <>
+        <TimelineBody data-test-subj="timeline-body" bodyHeight={height} ref={containerElementRef}>
+          <EventsTable data-test-subj="events-table" columnWidths={columnWidths}>
+            <ColumnHeaders
+              actionsColumnWidth={actionsColumnWidth}
+              browserFields={browserFields}
+              columnHeaders={columnHeaders}
+              isEventViewer={isEventViewer}
+              isSelectAllChecked={isSelectAllChecked}
+              onColumnRemoved={onColumnRemoved}
+              onColumnResized={onColumnResized}
+              onColumnSorted={onColumnSorted}
+              onFilterChange={onFilterChange}
+              onSelectAll={onSelectAll}
+              onUpdateColumns={onUpdateColumns}
+              showEventsSelect={false}
+              showSelectAllCheckbox={showCheckboxes}
+              sort={sort}
+              timelineId={id}
+              toggleColumn={toggleColumn}
+            />
+
+            <Events
+              containerElementRef={containerElementRef.current!}
+              actionsColumnWidth={actionsColumnWidth}
+              addNoteToEvent={addNoteToEvent}
+              browserFields={browserFields}
+              columnHeaders={columnHeaders}
+              columnRenderers={columnRenderers}
+              data={data}
+              eventIdToNoteIds={eventIdToNoteIds}
+              getNotesByIds={getNotesByIds}
+              id={id}
+              isEventViewer={isEventViewer}
+              loadingEventIds={loadingEventIds}
+              onColumnResized={onColumnResized}
+              onPinEvent={onPinEvent}
+              onRowSelected={onRowSelected}
+              onUpdateColumns={onUpdateColumns}
+              onUnPinEvent={onUnPinEvent}
+              pinnedEventIds={pinnedEventIds}
+              rowRenderers={rowRenderers}
+              selectedEventIds={selectedEventIds}
+              showCheckboxes={showCheckboxes}
+              toggleColumn={toggleColumn}
+              updateNote={updateNote}
+            />
+          </EventsTable>
+        </TimelineBody>
+        <TimelineBodyGlobalStyle />
+      </>
+    );
+  }
+);
+Body.displayName = 'Body';
diff --git a/x-pack/plugins/siem/public/components/timeline/body/mini_map/date_ranges.test.ts b/x-pack/plugins/siem/public/timelines/components/timeline/body/mini_map/date_ranges.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/mini_map/date_ranges.test.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/mini_map/date_ranges.test.ts
diff --git a/x-pack/plugins/siem/public/components/timeline/body/mini_map/date_ranges.ts b/x-pack/plugins/siem/public/timelines/components/timeline/body/mini_map/date_ranges.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/mini_map/date_ranges.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/mini_map/date_ranges.ts
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/__snapshots__/args.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/__snapshots__/args.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/__snapshots__/args.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/__snapshots__/args.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/__snapshots__/empty_column_renderer.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/__snapshots__/empty_column_renderer.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/__snapshots__/empty_column_renderer.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/__snapshots__/empty_column_renderer.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/__snapshots__/formatted_field.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/__snapshots__/formatted_field.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/__snapshots__/formatted_field.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/__snapshots__/formatted_field.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/__snapshots__/get_column_renderer.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/__snapshots__/get_column_renderer.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/__snapshots__/get_column_renderer.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/__snapshots__/get_column_renderer.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/__snapshots__/get_row_renderer.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/__snapshots__/get_row_renderer.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/__snapshots__/get_row_renderer.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/__snapshots__/get_row_renderer.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/__snapshots__/host_working_dir.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/__snapshots__/host_working_dir.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/__snapshots__/host_working_dir.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/__snapshots__/host_working_dir.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/__snapshots__/plain_column_renderer.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/__snapshots__/plain_column_renderer.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/__snapshots__/plain_column_renderer.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/__snapshots__/plain_column_renderer.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/__snapshots__/plain_row_renderer.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/__snapshots__/plain_row_renderer.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/__snapshots__/plain_row_renderer.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/__snapshots__/plain_row_renderer.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/__snapshots__/process_draggable.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/__snapshots__/process_draggable.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/__snapshots__/process_draggable.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/__snapshots__/process_draggable.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/__snapshots__/unknown_column_renderer.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/__snapshots__/unknown_column_renderer.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/__snapshots__/unknown_column_renderer.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/__snapshots__/unknown_column_renderer.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/__snapshots__/user_host_working_dir.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/__snapshots__/user_host_working_dir.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/__snapshots__/user_host_working_dir.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/__snapshots__/user_host_working_dir.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/args.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/args.test.tsx
similarity index 95%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/args.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/args.test.tsx
index 53a20544124400..e7e7d1d47f4783 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/args.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/args.test.tsx
@@ -7,8 +7,8 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 
-import { useMountAppended } from '../../../../utils/use_mount_appended';
-import { TestProviders } from '../../../../mock';
+import { useMountAppended } from '../../../../../common/utils/use_mount_appended';
+import { TestProviders } from '../../../../../common/mock';
 import { ArgsComponent } from './args';
 
 describe('Args', () => {
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/args.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/args.tsx
similarity index 95%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/args.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/args.tsx
index 22367ec879851a..f421b471282be9 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/args.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/args.tsx
@@ -6,7 +6,7 @@
 
 import React from 'react';
 
-import { DraggableBadge } from '../../../draggables';
+import { DraggableBadge } from '../../../../../common/components/draggables';
 import { isNillEmptyOrNotFinite, TokensFlexItem } from './helpers';
 
 interface Props {
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/__snapshots__/generic_details.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/__snapshots__/generic_details.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/__snapshots__/generic_details.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/__snapshots__/generic_details.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/__snapshots__/generic_file_details.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/__snapshots__/generic_file_details.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/__snapshots__/generic_file_details.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/__snapshots__/generic_file_details.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/__snapshots__/generic_row_renderer.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/__snapshots__/generic_row_renderer.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/__snapshots__/generic_row_renderer.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/__snapshots__/generic_row_renderer.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/__snapshots__/primary_secondary_user_info.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/__snapshots__/primary_secondary_user_info.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/__snapshots__/primary_secondary_user_info.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/__snapshots__/primary_secondary_user_info.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/__snapshots__/session_user_host_working_dir.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/__snapshots__/session_user_host_working_dir.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/__snapshots__/session_user_host_working_dir.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/__snapshots__/session_user_host_working_dir.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/generic_details.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/generic_details.test.tsx
new file mode 100644
index 00000000000000..b4c95d383593af
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/generic_details.test.tsx
@@ -0,0 +1,485 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import React from 'react';
+
+import { BrowserFields } from '../../../../../../common/containers/source';
+import { mockBrowserFields } from '../../../../../../common/containers/source/mock';
+import { mockTimelineData, TestProviders } from '../../../../../../common/mock';
+import { AuditdGenericDetails, AuditdGenericLine } from './generic_details';
+import { useMountAppended } from '../../../../../../common/utils/use_mount_appended';
+
+describe('GenericDetails', () => {
+  const mount = useMountAppended();
+
+  describe('rendering', () => {
+    test('it renders the default AuditAcquiredCredsDetails', () => {
+      // 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(
+        <AuditdGenericDetails
+          contextId="contextid-123"
+          text="generic-text-123"
+          browserFields={browserFields}
+          data={mockTimelineData[21].ecs}
+          timelineId="test"
+        />
+      );
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    test('it returns auditd if the data does contain auditd data', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <AuditdGenericDetails
+            contextId="contextid-123"
+            text="generic-text-123"
+            browserFields={mockBrowserFields}
+            data={mockTimelineData[19].ecs}
+            timelineId="test"
+          />
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        'Sessionalice@zeek-sanfranin/generic-text-123gpgconf(5402)gpgconf--list-dirsagent-socketgpgconf --list-dirs agent-socket'
+      );
+    });
+
+    test('it returns null for text if the data contains no auditd data', () => {
+      const wrapper = shallow(
+        <AuditdGenericDetails
+          contextId="contextid-123"
+          text="generic-text-123"
+          browserFields={mockBrowserFields}
+          data={mockTimelineData[0].ecs}
+          timelineId="test"
+        />
+      );
+      expect(wrapper.isEmptyRender()).toBeTruthy();
+    });
+  });
+
+  describe('#AuditdConnectedToLine', () => {
+    test('it returns pretty output if you send in all your happy path data', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <AuditdGenericLine
+            id="hello-i-am-an-id"
+            contextId="contextid-123"
+            text="generic-text-123"
+            hostName="host-1"
+            userName="username-1"
+            session="session-1"
+            primary="username-1"
+            secondary="username-1"
+            processPid={123}
+            processName="process-name-1"
+            processExecutable="process-1"
+            processTitle="process-title-1"
+            workingDirectory="working-directory-1"
+            args={['arg1', 'arg2', 'arg3']}
+            result="success"
+          />
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        'Sessionsession-1username-1@host-1inworking-directory-1generic-text-123process-name-1(123)arg1arg2arg3process-title-1with resultsuccess'
+      );
+    });
+
+    test('it returns a session with username if username, primary, and secondary all equal each other ', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <AuditdGenericLine
+            id="hello-i-am-an-id"
+            contextId="contextid-123"
+            text="generic-text-123"
+            hostName="host-1"
+            session="session-1"
+            userName="username-1"
+            primary="username-1"
+            secondary="username-1"
+            processPid={123}
+            processName="process-name-1"
+            processExecutable="process-1"
+            processTitle="process-title-1"
+            workingDirectory="working-directory-1"
+            args={['arg1', 'arg2', 'arg3']}
+            result="success"
+          />
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        'Sessionsession-1username-1@host-1inworking-directory-1generic-text-123process-name-1(123)arg1arg2arg3process-title-1with resultsuccess'
+      );
+    });
+
+    test('it returns a session with username if primary and secondary equal unset', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <AuditdGenericLine
+            id="hello-i-am-an-id"
+            contextId="contextid-123"
+            text="generic-text-123"
+            hostName="host-1"
+            session="session-1"
+            userName="username-1"
+            primary="unset"
+            secondary="unset"
+            processPid={123}
+            processName="process-name-1"
+            processExecutable="process-1"
+            processTitle="process-title-1"
+            workingDirectory="working-directory-1"
+            args={['arg1', 'arg2', 'arg3']}
+            result="success"
+          />
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        'Sessionsession-1username-1@host-1inworking-directory-1generic-text-123process-name-1(123)arg1arg2arg3process-title-1with resultsuccess'
+      );
+    });
+
+    test('it returns a session with username if primary and secondary equal unset with different casing', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <AuditdGenericLine
+            id="hello-i-am-an-id"
+            contextId="contextid-123"
+            text="generic-text-123"
+            hostName="host-1"
+            userName="username-1"
+            session="session-1"
+            primary="Unset"
+            secondary="uNseT"
+            processPid={123}
+            processName="process-name-1"
+            processExecutable="process-1"
+            processTitle="process-title-1"
+            workingDirectory="working-directory-1"
+            args={['arg1', 'arg2', 'arg3']}
+            result="success"
+          />
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        'Sessionsession-1username-1@host-1inworking-directory-1generic-text-123process-name-1(123)arg1arg2arg3process-title-1with resultsuccess'
+      );
+    });
+
+    test('it returns a session with username if primary and secondary are undefined', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <AuditdGenericLine
+            id="hello-i-am-an-id"
+            contextId="contextid-123"
+            text="generic-text-123"
+            hostName="host-1"
+            session="session-1"
+            primary={undefined}
+            secondary={undefined}
+            userName="username-1"
+            processPid={123}
+            processName="process-name-1"
+            processExecutable="process-1"
+            processTitle="process-title-1"
+            workingDirectory="working-directory-1"
+            args={['arg1', 'arg2', 'arg3']}
+            result="success"
+          />
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        'Sessionsession-1username-1@host-1inworking-directory-1generic-text-123process-name-1(123)arg1arg2arg3process-title-1with resultsuccess'
+      );
+    });
+
+    test('it returns a session with "as" wording if username, primary, and secondary are all different', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <AuditdGenericLine
+            id="hello-i-am-an-id"
+            contextId="contextid-123"
+            text="generic-text-123"
+            hostName="host-1"
+            session="session-1"
+            userName="[username-1]"
+            primary="[username-2]"
+            secondary="[username-3]"
+            processPid={123}
+            processName="process-name-1"
+            processExecutable="process-1"
+            processTitle="process-title-1"
+            workingDirectory="working-directory-1"
+            args={['arg1', 'arg2', 'arg3']}
+            result="success"
+          />
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        'Sessionsession-1[username-2]as[username-3]@host-1inworking-directory-1generic-text-123process-name-1(123)arg1arg2arg3process-title-1with resultsuccess'
+      );
+    });
+
+    test('it returns a session with "as" wording if username and primary are the same but secondary is different', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <AuditdGenericLine
+            id="hello-i-am-an-id"
+            contextId="contextid-123"
+            text="generic-text-123"
+            hostName="host-1"
+            session="session-1"
+            userName="[username-1]"
+            primary="[username-1]"
+            secondary="[username-2]"
+            processPid={123}
+            processName="process-name-1"
+            processExecutable="process-1"
+            processTitle="process-title-1"
+            workingDirectory="working-directory-1"
+            args={['arg1', 'arg2', 'arg3']}
+            result="success"
+          />
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        'Sessionsession-1[username-1]as[username-2]@host-1inworking-directory-1generic-text-123process-name-1(123)arg1arg2arg3process-title-1with resultsuccess'
+      );
+    });
+
+    test('it returns a session with primary if username and secondary are unset with different casing', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <AuditdGenericLine
+            id="hello-i-am-an-id"
+            contextId="contextid-123"
+            text="generic-text-123"
+            hostName="host-1"
+            userName="unseT"
+            session="session-1"
+            primary="[username-primary]"
+            secondary="unset"
+            processPid={123}
+            processName="process-name-1"
+            processExecutable="process-1"
+            processTitle="process-title-1"
+            workingDirectory="working-directory-1"
+            args={['arg1', 'arg2', 'arg3']}
+            result="success"
+          />
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        'Sessionsession-1[username-primary]@host-1inworking-directory-1generic-text-123process-name-1(123)arg1arg2arg3process-title-1with resultsuccess'
+      );
+    });
+
+    test('it returns a session with primary if username and secondary are undefined', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <AuditdGenericLine
+            id="hello-i-am-an-id"
+            contextId="contextid-123"
+            text="generic-text-123"
+            hostName="host-1"
+            session="session-1"
+            primary="[username-primary]"
+            userName={undefined}
+            secondary={undefined}
+            processPid={123}
+            processName="process-name-1"
+            processExecutable="process-1"
+            processTitle="process-title-1"
+            workingDirectory="working-directory-1"
+            args={['arg1', 'arg2', 'arg3']}
+            result="success"
+          />
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        'Sessionsession-1[username-primary]@host-1inworking-directory-1generic-text-123process-name-1(123)arg1arg2arg3process-title-1with resultsuccess'
+      );
+    });
+
+    test('it returns just a session if only given an id', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <AuditdGenericLine
+            id="hello-i-am-an-id"
+            contextId="contextid-123"
+            text="generic-text-123"
+            userName={undefined}
+            secondary={undefined}
+            session={undefined}
+            hostName={undefined}
+            primary={undefined}
+            processPid={undefined}
+            processName={undefined}
+            processExecutable={undefined}
+            processTitle={undefined}
+            workingDirectory={undefined}
+            args={undefined}
+            result={undefined}
+          />
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual('Session');
+    });
+
+    test('it returns only session and hostName if only hostname and an id is given', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <AuditdGenericLine
+            id="hello-i-am-an-id"
+            contextId="contextid-123"
+            text="generic-text-123"
+            hostName="some-host-name"
+            userName={undefined}
+            secondary={undefined}
+            session={undefined}
+            primary={undefined}
+            processPid={undefined}
+            processName={undefined}
+            processExecutable={undefined}
+            processTitle={undefined}
+            workingDirectory={undefined}
+            args={undefined}
+            result={undefined}
+          />
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual('Session@some-host-name');
+    });
+
+    test('it returns only a session and user name if only a user name and id is given', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <AuditdGenericLine
+            id="hello-i-am-an-id"
+            contextId="contextid-123"
+            text="generic-text-123"
+            userName="some-user-name"
+            secondary={undefined}
+            session={undefined}
+            hostName={undefined}
+            primary={undefined}
+            processPid={undefined}
+            processName={undefined}
+            processExecutable={undefined}
+            processTitle={undefined}
+            workingDirectory={undefined}
+            args={undefined}
+            result={undefined}
+          />
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual('Sessionsome-user-name');
+    });
+
+    test('it returns only a process name if only given a process name and id', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <AuditdGenericLine
+            id="hello-i-am-an-id"
+            contextId="contextid-123"
+            text="generic-text-123"
+            userName={undefined}
+            processExecutable="some-process-name"
+            secondary={undefined}
+            session={undefined}
+            hostName={undefined}
+            primary={undefined}
+            processPid={undefined}
+            processName={undefined}
+            processTitle={undefined}
+            workingDirectory={undefined}
+            args={undefined}
+            result={undefined}
+          />
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual('Sessiongeneric-text-123some-process-name');
+    });
+
+    test('it returns session, user name, and process title if process title with id is given', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <AuditdGenericLine
+            id="hello-i-am-an-id"
+            contextId="contextid-123"
+            text="generic-text-123"
+            processTitle="some-process-title"
+            userName="some-user-name"
+            secondary={undefined}
+            session={undefined}
+            hostName={undefined}
+            primary={undefined}
+            processPid={undefined}
+            processName={undefined}
+            processExecutable={undefined}
+            workingDirectory={undefined}
+            args={undefined}
+            result={undefined}
+          />
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual('Sessionsome-user-namesome-process-title');
+    });
+
+    test('it returns only a working directory if that is all that is given with a id', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <AuditdGenericLine
+            id="hello-i-am-an-id"
+            contextId="contextid-123"
+            text="generic-text-123"
+            workingDirectory="some-working-directory"
+            userName={undefined}
+            secondary={undefined}
+            session={undefined}
+            hostName={undefined}
+            primary={undefined}
+            processPid={undefined}
+            processName={undefined}
+            processExecutable={undefined}
+            processTitle={undefined}
+            args={undefined}
+            result={undefined}
+          />
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual('Sessioninsome-working-directory');
+    });
+
+    test('it returns only the session and args with id if that is all that is given (very unlikely situation)', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <AuditdGenericLine
+            id="hello-i-am-an-id"
+            contextId="contextid-123"
+            text="generic-text-123"
+            args={['arg1', 'arg2', 'arg 3']}
+            userName={undefined}
+            secondary={undefined}
+            session={undefined}
+            hostName={undefined}
+            primary={undefined}
+            processPid={undefined}
+            processName={undefined}
+            processExecutable={undefined}
+            processTitle={undefined}
+            workingDirectory={undefined}
+            result={undefined}
+          />
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual('Sessionarg1arg2arg 3');
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/generic_details.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/generic_details.tsx
new file mode 100644
index 00000000000000..1e82519285da38
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/generic_details.tsx
@@ -0,0 +1,159 @@
+/*
+ * 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 { EuiFlexGroup, EuiSpacer } from '@elastic/eui';
+import { get } from 'lodash/fp';
+import React from 'react';
+
+import { BrowserFields } from '../../../../../../common/containers/source';
+import { Ecs } from '../../../../../../graphql/types';
+import { DraggableBadge } from '../../../../../../common/components/draggables';
+
+import * as i18n from './translations';
+import { NetflowRenderer } from '../netflow';
+import { TokensFlexItem, Details } from '../helpers';
+import { ProcessDraggable } from '../process_draggable';
+import { Args } from '../args';
+import { SessionUserHostWorkingDir } from './session_user_host_working_dir';
+
+interface Props {
+  id: string;
+  hostName: string | null | undefined;
+  result: string | null | undefined;
+  userName: string | null | undefined;
+  primary: string | null | undefined;
+  contextId: string;
+  text: string;
+  secondary: string | null | undefined;
+  processName: string | null | undefined;
+  processPid: number | null | undefined;
+  processExecutable: string | null | undefined;
+  processTitle: string | null | undefined;
+  workingDirectory: string | null | undefined;
+  args: string[] | null | undefined;
+  session: string | null | undefined;
+}
+
+export const AuditdGenericLine = React.memo<Props>(
+  ({
+    id,
+    contextId,
+    hostName,
+    userName,
+    primary,
+    processName,
+    processPid,
+    processExecutable,
+    processTitle,
+    secondary,
+    workingDirectory,
+    args,
+    result,
+    session,
+    text,
+  }) => (
+    <EuiFlexGroup alignItems="center" justifyContent="center" gutterSize="none" wrap={true}>
+      <SessionUserHostWorkingDir
+        eventId={id}
+        contextId={contextId}
+        hostName={hostName}
+        userName={userName}
+        primary={primary}
+        secondary={secondary}
+        workingDirectory={workingDirectory}
+        session={session}
+      />
+      {processExecutable != null && (
+        <TokensFlexItem grow={false} component="span">
+          {text}
+        </TokensFlexItem>
+      )}
+      <TokensFlexItem grow={false} component="span">
+        <ProcessDraggable
+          contextId={contextId}
+          endgamePid={undefined}
+          endgameProcessName={undefined}
+          eventId={id}
+          processPid={processPid}
+          processName={processName}
+          processExecutable={processExecutable}
+        />
+      </TokensFlexItem>
+      <Args eventId={id} args={args} contextId={contextId} processTitle={processTitle} />
+      {result != null && (
+        <TokensFlexItem grow={false} component="span">
+          {i18n.WITH_RESULT}
+        </TokensFlexItem>
+      )}
+      <TokensFlexItem grow={false} component="span">
+        <DraggableBadge
+          contextId={contextId}
+          eventId={id}
+          field="auditd.result"
+          queryValue={result}
+          value={result}
+        />
+      </TokensFlexItem>
+    </EuiFlexGroup>
+  )
+);
+
+AuditdGenericLine.displayName = 'AuditdGenericLine';
+
+interface GenericDetailsProps {
+  browserFields: BrowserFields;
+  data: Ecs;
+  contextId: string;
+  text: string;
+  timelineId: string;
+}
+
+export const AuditdGenericDetails = React.memo<GenericDetailsProps>(
+  ({ data, contextId, text, timelineId }) => {
+    const id = data._id;
+    const session: string | null | undefined = get('auditd.session[0]', data);
+    const hostName: string | null | undefined = get('host.name[0]', data);
+    const userName: string | null | undefined = get('user.name[0]', data);
+    const result: string | null | undefined = get('auditd.result[0]', data);
+    const processPid: number | null | undefined = get('process.pid[0]', data);
+    const processName: string | null | undefined = get('process.name[0]', data);
+    const processExecutable: string | null | undefined = get('process.executable[0]', data);
+    const processTitle: string | null | undefined = get('process.title[0]', data);
+    const workingDirectory: string | null | undefined = get('process.working_directory[0]', data);
+    const primary: string | null | undefined = get('auditd.summary.actor.primary[0]', data);
+    const secondary: string | null | undefined = get('auditd.summary.actor.secondary[0]', data);
+    const args: string[] | null | undefined = get('process.args', data);
+    if (data.process != null) {
+      return (
+        <Details>
+          <AuditdGenericLine
+            id={id}
+            contextId={contextId}
+            text={text}
+            hostName={hostName}
+            userName={userName}
+            processName={processName}
+            processPid={processPid}
+            processExecutable={processExecutable}
+            processTitle={processTitle}
+            workingDirectory={workingDirectory}
+            args={args}
+            session={session}
+            primary={primary}
+            result={result}
+            secondary={secondary}
+          />
+          <EuiSpacer size="s" />
+          <NetflowRenderer data={data} timelineId={timelineId} />
+        </Details>
+      );
+    } else {
+      return null;
+    }
+  }
+);
+
+AuditdGenericDetails.displayName = 'AuditdGenericDetails';
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/generic_file_details.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/generic_file_details.test.tsx
new file mode 100644
index 00000000000000..0990280879a140
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/generic_file_details.test.tsx
@@ -0,0 +1,520 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import React from 'react';
+
+import { BrowserFields } from '../../../../../../common/containers/source';
+import { mockBrowserFields } from '../../../../../../common/containers/source/mock';
+import { mockTimelineData, TestProviders } from '../../../../../../common/mock';
+import { AuditdGenericFileDetails, AuditdGenericFileLine } from './generic_file_details';
+import { useMountAppended } from '../../../../../../common/utils/use_mount_appended';
+
+describe('GenericFileDetails', () => {
+  const mount = useMountAppended();
+
+  describe('rendering', () => {
+    test('it renders the default 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(
+        <AuditdGenericFileDetails
+          contextId="contextid-123"
+          text="generic-text-123"
+          browserFields={browserFields}
+          data={mockTimelineData[27].ecs}
+          fileIcon="document"
+          timelineId="test"
+        />
+      );
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    test('it returns auditd if the data does contain auditd data', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <AuditdGenericFileDetails
+            contextId="contextid-123"
+            text="generic-text-123"
+            browserFields={mockBrowserFields}
+            data={mockTimelineData[19].ecs}
+            fileIcon="document"
+            timelineId="test"
+          />
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        'Sessionalice@zeek-sanfranin/generic-text-123usinggpgconf(5402)gpgconf--list-dirsagent-socketgpgconf --list-dirs agent-socket'
+      );
+    });
+
+    test('it returns null for text if the data contains no auditd data', () => {
+      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();
+    });
+  });
+
+  describe('#AuditdGenericFileLine', () => {
+    test('it returns pretty output if you send in all your happy path data', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <AuditdGenericFileLine
+            id="hello-i-am-an-id"
+            contextId="contextid-123"
+            text="generic-text-123"
+            hostName="host-1"
+            userName="username-1"
+            session="session-1"
+            primary="username-1"
+            secondary="username-1"
+            processPid={123}
+            processName="process-name-1"
+            processExecutable="process-1"
+            processTitle="process-title-1"
+            workingDirectory="working-directory-1"
+            args={['arg1', 'arg2', 'arg3']}
+            filePath="/somepath"
+            fileIcon="document"
+            result="success"
+          />
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        'Sessionsession-1username-1@host-1inworking-directory-1generic-text-123/somepathusingprocess-name-1(123)arg1arg2arg3process-title-1with resultsuccess'
+      );
+    });
+
+    test('it returns a session with username if username, primary, and secondary all equal each other ', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <AuditdGenericFileLine
+            id="hello-i-am-an-id"
+            contextId="contextid-123"
+            text="generic-text-123"
+            hostName="host-1"
+            session="session-1"
+            userName="username-1"
+            primary="username-1"
+            secondary="username-1"
+            processPid={123}
+            processName="process-name-1"
+            processExecutable="process-1"
+            processTitle="process-title-1"
+            workingDirectory="working-directory-1"
+            args={['arg1', 'arg2', 'arg3']}
+            filePath="/somepath"
+            fileIcon="document"
+            result="success"
+          />
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        'Sessionsession-1username-1@host-1inworking-directory-1generic-text-123/somepathusingprocess-name-1(123)arg1arg2arg3process-title-1with resultsuccess'
+      );
+    });
+
+    test('it returns a session with username if primary and secondary equal unset', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <AuditdGenericFileLine
+            id="hello-i-am-an-id"
+            contextId="contextid-123"
+            text="generic-text-123"
+            hostName="host-1"
+            session="session-1"
+            userName="username-1"
+            primary="unset"
+            secondary="unset"
+            processPid={123}
+            processName="process-name-1"
+            processExecutable="process-1"
+            processTitle="process-title-1"
+            workingDirectory="working-directory-1"
+            args={['arg1', 'arg2', 'arg3']}
+            filePath="/somepath"
+            fileIcon="document"
+            result="success"
+          />
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        'Sessionsession-1username-1@host-1inworking-directory-1generic-text-123/somepathusingprocess-name-1(123)arg1arg2arg3process-title-1with resultsuccess'
+      );
+    });
+
+    test('it returns a session with username if primary and secondary equal unset with different casing', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <AuditdGenericFileLine
+            id="hello-i-am-an-id"
+            contextId="contextid-123"
+            text="generic-text-123"
+            hostName="host-1"
+            userName="username-1"
+            session="session-1"
+            primary="Unset"
+            secondary="uNseT"
+            processPid={123}
+            processName="process-name-1"
+            processExecutable="process-1"
+            processTitle="process-title-1"
+            workingDirectory="working-directory-1"
+            args={['arg1', 'arg2', 'arg3']}
+            filePath="/somepath"
+            fileIcon="document"
+            result="success"
+          />
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        'Sessionsession-1username-1@host-1inworking-directory-1generic-text-123/somepathusingprocess-name-1(123)arg1arg2arg3process-title-1with resultsuccess'
+      );
+    });
+
+    test('it returns a session with username if primary and secondary are undefined', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <AuditdGenericFileLine
+            id="hello-i-am-an-id"
+            contextId="contextid-123"
+            text="generic-text-123"
+            hostName="host-1"
+            session="session-1"
+            primary={undefined}
+            secondary={undefined}
+            userName="username-1"
+            processPid={123}
+            processName="process-name-1"
+            processExecutable="process-1"
+            processTitle="process-title-1"
+            workingDirectory="working-directory-1"
+            args={['arg1', 'arg2', 'arg3']}
+            filePath="/somepath"
+            fileIcon="document"
+            result="success"
+          />
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        'Sessionsession-1username-1@host-1inworking-directory-1generic-text-123/somepathusingprocess-name-1(123)arg1arg2arg3process-title-1with resultsuccess'
+      );
+    });
+
+    test('it returns a session with "as" wording if username, primary, and secondary are all different', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <AuditdGenericFileLine
+            id="hello-i-am-an-id"
+            contextId="contextid-123"
+            text="generic-text-123"
+            hostName="host-1"
+            session="session-1"
+            userName="[username-1]"
+            primary="[username-2]"
+            secondary="[username-3]"
+            processPid={123}
+            processName="process-name-1"
+            processExecutable="process-1"
+            processTitle="process-title-1"
+            workingDirectory="working-directory-1"
+            args={['arg1', 'arg2', 'arg3']}
+            filePath="/somepath"
+            fileIcon="document"
+            result="success"
+          />
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        'Sessionsession-1[username-2]as[username-3]@host-1inworking-directory-1generic-text-123/somepathusingprocess-name-1(123)arg1arg2arg3process-title-1with resultsuccess'
+      );
+    });
+
+    test('it returns a session with "as" wording if username and primary are the same but secondary is different', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <AuditdGenericFileLine
+            id="hello-i-am-an-id"
+            contextId="contextid-123"
+            text="generic-text-123"
+            hostName="host-1"
+            session="session-1"
+            userName="[username-1]"
+            primary="[username-1]"
+            secondary="[username-2]"
+            processPid={123}
+            processName="process-name-1"
+            processExecutable="process-1"
+            processTitle="process-title-1"
+            workingDirectory="working-directory-1"
+            args={['arg1', 'arg2', 'arg3']}
+            filePath="/somepath"
+            fileIcon="document"
+            result="success"
+          />
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        'Sessionsession-1[username-1]as[username-2]@host-1inworking-directory-1generic-text-123/somepathusingprocess-name-1(123)arg1arg2arg3process-title-1with resultsuccess'
+      );
+    });
+
+    test('it returns a session with primary if username and secondary are unset with different casing', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <AuditdGenericFileLine
+            id="hello-i-am-an-id"
+            contextId="contextid-123"
+            text="generic-text-123"
+            hostName="host-1"
+            userName="unseT"
+            session="session-1"
+            primary="[username-primary]"
+            secondary="unset"
+            processPid={123}
+            processName="process-name-1"
+            processExecutable="process-1"
+            processTitle="process-title-1"
+            workingDirectory="working-directory-1"
+            args={['arg1', 'arg2', 'arg3']}
+            filePath="/somepath"
+            fileIcon="document"
+            result="success"
+          />
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        'Sessionsession-1[username-primary]@host-1inworking-directory-1generic-text-123/somepathusingprocess-name-1(123)arg1arg2arg3process-title-1with resultsuccess'
+      );
+    });
+
+    test('it returns a session with primary if username and secondary are undefined', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <AuditdGenericFileLine
+            id="hello-i-am-an-id"
+            contextId="contextid-123"
+            text="generic-text-123"
+            hostName="host-1"
+            session="session-1"
+            primary="[username-primary]"
+            userName={undefined}
+            secondary={undefined}
+            processPid={123}
+            processName="process-name-1"
+            processExecutable="process-1"
+            processTitle="process-title-1"
+            workingDirectory="working-directory-1"
+            args={['arg1', 'arg2', 'arg3']}
+            filePath="/somepath"
+            fileIcon="document"
+            result="success"
+          />
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        'Sessionsession-1[username-primary]@host-1inworking-directory-1generic-text-123/somepathusingprocess-name-1(123)arg1arg2arg3process-title-1with resultsuccess'
+      );
+    });
+
+    test('it returns just session if only session id is given', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <AuditdGenericFileLine
+            id="hello-i-am-an-id"
+            contextId="contextid-123"
+            text="generic-text-123"
+            fileIcon="document"
+            userName={undefined}
+            secondary={undefined}
+            session={undefined}
+            hostName={undefined}
+            primary={undefined}
+            processPid={undefined}
+            processName={undefined}
+            processExecutable={undefined}
+            processTitle={undefined}
+            workingDirectory={undefined}
+            args={undefined}
+            result={undefined}
+            filePath={undefined}
+          />
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual('Session');
+    });
+
+    test('it returns only session and hostName if only hostname and an id is given', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <AuditdGenericFileLine
+            id="hello-i-am-an-id"
+            contextId="contextid-123"
+            text="generic-text-123"
+            fileIcon="document"
+            hostName="some-host-name"
+            userName={undefined}
+            secondary={undefined}
+            session={undefined}
+            primary={undefined}
+            processPid={undefined}
+            processName={undefined}
+            processExecutable={undefined}
+            processTitle={undefined}
+            workingDirectory={undefined}
+            args={undefined}
+            result={undefined}
+            filePath={undefined}
+          />
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual('Session@some-host-name');
+    });
+
+    test('it returns only a session and user name if only a user name and id is given', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <AuditdGenericFileLine
+            id="hello-i-am-an-id"
+            contextId="contextid-123"
+            text="generic-text-123"
+            userName="some-user-name"
+            fileIcon="document"
+            secondary={undefined}
+            session={undefined}
+            hostName={undefined}
+            primary={undefined}
+            processPid={undefined}
+            processName={undefined}
+            processExecutable={undefined}
+            processTitle={undefined}
+            workingDirectory={undefined}
+            args={undefined}
+            result={undefined}
+            filePath={undefined}
+          />
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual('Sessionsome-user-name');
+    });
+
+    test('it returns only a process name if only given a process name and id', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <AuditdGenericFileLine
+            id="hello-i-am-an-id"
+            contextId="contextid-123"
+            text="generic-text-123"
+            fileIcon="document"
+            userName={undefined}
+            processExecutable="some-process-name"
+            secondary={undefined}
+            session={undefined}
+            hostName={undefined}
+            primary={undefined}
+            processPid={undefined}
+            processName={undefined}
+            processTitle={undefined}
+            workingDirectory={undefined}
+            args={undefined}
+            result={undefined}
+            filePath={undefined}
+          />
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual('Sessiongeneric-text-123usingsome-process-name');
+    });
+
+    test('it returns session user name and title if process title with id is given', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <AuditdGenericFileLine
+            id="hello-i-am-an-id"
+            contextId="contextid-123"
+            text="generic-text-123"
+            processTitle="some-process-title"
+            userName="some-user-name"
+            fileIcon="document"
+            secondary={undefined}
+            session={undefined}
+            hostName={undefined}
+            primary={undefined}
+            processPid={undefined}
+            processName={undefined}
+            processExecutable={undefined}
+            workingDirectory={undefined}
+            args={undefined}
+            result={undefined}
+            filePath={undefined}
+          />
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual('Sessionsome-user-namesome-process-title');
+    });
+
+    test('it returns only a working directory if that is all that is given with a id', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <AuditdGenericFileLine
+            id="hello-i-am-an-id"
+            contextId="contextid-123"
+            text="generic-text-123"
+            workingDirectory="some-working-directory"
+            fileIcon="document"
+            userName={undefined}
+            secondary={undefined}
+            session={undefined}
+            hostName={undefined}
+            primary={undefined}
+            processPid={undefined}
+            processName={undefined}
+            processExecutable={undefined}
+            processTitle={undefined}
+            args={undefined}
+            result={undefined}
+            filePath={undefined}
+          />
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual('Sessioninsome-working-directory');
+    });
+
+    test('it returns only the session and args with id if that is all that is given (very unlikely situation)', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <AuditdGenericFileLine
+            id="hello-i-am-an-id"
+            contextId="contextid-123"
+            text="generic-text-123"
+            args={['arg1', 'arg2', 'arg 3']}
+            fileIcon="document"
+            userName={undefined}
+            secondary={undefined}
+            session={undefined}
+            hostName={undefined}
+            primary={undefined}
+            processPid={undefined}
+            processName={undefined}
+            processExecutable={undefined}
+            processTitle={undefined}
+            workingDirectory={undefined}
+            result={undefined}
+            filePath={undefined}
+          />
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual('Sessionarg1arg2arg 3');
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/generic_file_details.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/generic_file_details.tsx
new file mode 100644
index 00000000000000..d9149bae891903
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/generic_file_details.tsx
@@ -0,0 +1,182 @@
+/*
+ * 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 { EuiFlexGroup, EuiSpacer, IconType } from '@elastic/eui';
+import { get } from 'lodash/fp';
+import React from 'react';
+
+import { BrowserFields } from '../../../../../../common/containers/source';
+import { Ecs } from '../../../../../../graphql/types';
+import { DraggableBadge } from '../../../../../../common/components/draggables';
+
+import * as i18n from './translations';
+import { NetflowRenderer } from '../netflow';
+import { TokensFlexItem, Details } from '../helpers';
+import { ProcessDraggable } from '../process_draggable';
+import { Args } from '../args';
+import { SessionUserHostWorkingDir } from './session_user_host_working_dir';
+
+interface Props {
+  id: string;
+  hostName: string | null | undefined;
+  userName: string | null | undefined;
+  result: string | null | undefined;
+  primary: string | null | undefined;
+  fileIcon: IconType;
+  contextId: string;
+  text: string;
+  secondary: string | null | undefined;
+  filePath: string | null | undefined;
+  processName: string | null | undefined;
+  processPid: number | null | undefined;
+  processExecutable: string | null | undefined;
+  processTitle: string | null | undefined;
+  workingDirectory: string | null | undefined;
+  args: string[] | null | undefined;
+  session: string | null | undefined;
+}
+
+export const AuditdGenericFileLine = React.memo<Props>(
+  ({
+    id,
+    contextId,
+    hostName,
+    userName,
+    result,
+    primary,
+    secondary,
+    filePath,
+    processName,
+    processPid,
+    processExecutable,
+    processTitle,
+    workingDirectory,
+    args,
+    session,
+    text,
+    fileIcon,
+  }) => (
+    <EuiFlexGroup alignItems="center" justifyContent="center" gutterSize="none" wrap={true}>
+      <SessionUserHostWorkingDir
+        eventId={id}
+        contextId={contextId}
+        hostName={hostName}
+        userName={userName}
+        primary={primary}
+        secondary={secondary}
+        workingDirectory={workingDirectory}
+        session={session}
+      />
+      {(filePath != null || processExecutable != null) && (
+        <TokensFlexItem grow={false} component="span">
+          {text}
+        </TokensFlexItem>
+      )}
+      <TokensFlexItem grow={false} component="span">
+        <DraggableBadge
+          contextId={contextId}
+          eventId={id}
+          field="file.path"
+          value={filePath}
+          iconType={fileIcon}
+        />
+      </TokensFlexItem>
+      {processExecutable != null && (
+        <TokensFlexItem grow={false} component="span">
+          {i18n.USING}
+        </TokensFlexItem>
+      )}
+      <TokensFlexItem grow={false} component="span">
+        <ProcessDraggable
+          contextId={contextId}
+          endgamePid={undefined}
+          endgameProcessName={undefined}
+          eventId={id}
+          processPid={processPid}
+          processName={processName}
+          processExecutable={processExecutable}
+        />
+      </TokensFlexItem>
+      <Args eventId={id} args={args} contextId={contextId} processTitle={processTitle} />
+      {result != null && (
+        <TokensFlexItem grow={false} component="span">
+          {i18n.WITH_RESULT}
+        </TokensFlexItem>
+      )}
+      <TokensFlexItem grow={false} component="span">
+        <DraggableBadge
+          contextId={contextId}
+          eventId={id}
+          field="auditd.result"
+          queryValue={result}
+          value={result}
+        />
+      </TokensFlexItem>
+    </EuiFlexGroup>
+  )
+);
+
+AuditdGenericFileLine.displayName = 'AuditdGenericFileLine';
+
+interface GenericDetailsProps {
+  browserFields: BrowserFields;
+  data: Ecs;
+  contextId: string;
+  text: string;
+  fileIcon: IconType;
+  timelineId: string;
+}
+
+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);
+    const hostName: string | null | undefined = get('host.name[0]', data);
+    const userName: string | null | undefined = get('user.name[0]', data);
+    const result: string | null | undefined = get('auditd.result[0]', data);
+    const processPid: number | null | undefined = get('process.pid[0]', data);
+    const processName: string | null | undefined = get('process.name[0]', data);
+    const processExecutable: string | null | undefined = get('process.executable[0]', data);
+    const processTitle: string | null | undefined = get('process.title[0]', data);
+    const workingDirectory: string | null | undefined = get('process.working_directory[0]', data);
+    const filePath: string | null | undefined = get('file.path[0]', data);
+    const primary: string | null | undefined = get('auditd.summary.actor.primary[0]', data);
+    const secondary: string | null | undefined = get('auditd.summary.actor.secondary[0]', data);
+    const args: string[] | null | undefined = get('process.args', data);
+
+    if (data.process != null) {
+      return (
+        <Details>
+          <AuditdGenericFileLine
+            id={id}
+            contextId={contextId}
+            text={text}
+            hostName={hostName}
+            userName={userName}
+            filePath={filePath}
+            processName={processName}
+            processPid={processPid}
+            processExecutable={processExecutable}
+            processTitle={processTitle}
+            workingDirectory={workingDirectory}
+            args={args}
+            session={session}
+            primary={primary}
+            secondary={secondary}
+            fileIcon={fileIcon}
+            result={result}
+          />
+          <EuiSpacer size="s" />
+          <NetflowRenderer data={data} timelineId={timelineId} />
+        </Details>
+      );
+    } else {
+      return null;
+    }
+  }
+);
+
+AuditdGenericFileDetails.displayName = 'AuditdGenericFileDetails';
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/generic_row_renderer.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/generic_row_renderer.test.tsx
new file mode 100644
index 00000000000000..ae5e7e2ef789b7
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/generic_row_renderer.test.tsx
@@ -0,0 +1,148 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import { cloneDeep } from 'lodash/fp';
+import React from 'react';
+
+import { BrowserFields } from '../../../../../../common/containers/source';
+import { mockBrowserFields } from '../../../../../../common/containers/source/mock';
+import { Ecs } from '../../../../../../graphql/types';
+import { mockTimelineData, TestProviders } from '../../../../../../common/mock';
+import { useMountAppended } from '../../../../../../common/utils/use_mount_appended';
+import { RowRenderer } from '../row_renderer';
+import {
+  createGenericAuditRowRenderer,
+  createGenericFileRowRenderer,
+} from './generic_row_renderer';
+
+jest.mock('../../../../../../overview/components/events_by_dataset');
+
+describe('GenericRowRenderer', () => {
+  const mount = useMountAppended();
+
+  describe('#createGenericAuditRowRenderer', () => {
+    let nonAuditd: Ecs;
+    let auditd: Ecs;
+    let connectedToRenderer: RowRenderer;
+    beforeEach(() => {
+      nonAuditd = cloneDeep(mockTimelineData[0].ecs);
+      auditd = cloneDeep(mockTimelineData[26].ecs);
+      connectedToRenderer = createGenericAuditRowRenderer({
+        actionName: 'connected-to',
+        text: 'some text',
+      });
+    });
+    test('renders correctly against snapshot', () => {
+      // I cannot and do not want to use BrowserFields mocks for the snapshot tests as they are too heavy
+      const browserFields: BrowserFields = {};
+      const children = connectedToRenderer.renderRow({
+        browserFields,
+        data: auditd,
+        timelineId: 'test',
+      });
+
+      const wrapper = shallow(<span>{children}</span>);
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    test('should return false if not a auditd datum', () => {
+      expect(connectedToRenderer.isInstance(nonAuditd)).toBe(false);
+    });
+
+    test('should return true if it is a auditd datum', () => {
+      expect(connectedToRenderer.isInstance(auditd)).toBe(true);
+    });
+
+    test('should return false when action is set to some other value', () => {
+      if (auditd.event != null && auditd.event.action != null) {
+        auditd.event.action[0] = 'some other value';
+        expect(connectedToRenderer.isInstance(auditd)).toBe(false);
+      } else {
+        // will fail and give you an error if either is not defined as a mock
+        expect(auditd.event).toBeDefined();
+      }
+    });
+
+    test('should render a auditd row', () => {
+      const children = connectedToRenderer.renderRow({
+        browserFields: mockBrowserFields,
+        data: auditd,
+        timelineId: 'test',
+      });
+      const wrapper = mount(
+        <TestProviders>
+          <span>{children}</span>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toContain(
+        'Session246alice@zeek-londonsome textwget(1490)wget www.example.comwith resultsuccessDestination93.184.216.34:80'
+      );
+    });
+  });
+
+  describe('#createGenericFileRowRenderer', () => {
+    let nonAuditd: Ecs;
+    let auditdFile: Ecs;
+    let fileToRenderer: RowRenderer;
+
+    beforeEach(() => {
+      nonAuditd = cloneDeep(mockTimelineData[0].ecs);
+      auditdFile = cloneDeep(mockTimelineData[27].ecs);
+      fileToRenderer = createGenericFileRowRenderer({
+        actionName: 'opened-file',
+        text: 'some text',
+      });
+    });
+
+    test('renders correctly against snapshot', () => {
+      // I cannot and do not want to use BrowserFields mocks for the snapshot tests as they are too heavy
+      const browserFields: BrowserFields = {};
+      const children = fileToRenderer.renderRow({
+        browserFields,
+        data: auditdFile,
+        timelineId: 'test',
+      });
+
+      const wrapper = shallow(<span>{children}</span>);
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    test('should return false if not a auditd datum', () => {
+      expect(fileToRenderer.isInstance(nonAuditd)).toBe(false);
+    });
+
+    test('should return true if it is a auditd datum', () => {
+      expect(fileToRenderer.isInstance(auditdFile)).toBe(true);
+    });
+
+    test('should return false when action is set to some other value', () => {
+      if (auditdFile.event != null && auditdFile.event.action != null) {
+        auditdFile.event.action[0] = 'some other value';
+        expect(fileToRenderer.isInstance(auditdFile)).toBe(false);
+      } else {
+        // will fail and give you an error if either is not defined as a mock
+        expect(auditdFile.event).toBeDefined();
+      }
+    });
+
+    test('should render a auditd row', () => {
+      const children = fileToRenderer.renderRow({
+        browserFields: mockBrowserFields,
+        data: auditdFile,
+        timelineId: 'test',
+      });
+      const wrapper = mount(
+        <TestProviders>
+          <span>{children}</span>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toContain(
+        'Sessionunsetroot@zeek-londonin/some text/proc/15990/attr/currentusingsystemd-journal(27244)/lib/systemd/systemd-journaldwith resultsuccess'
+      );
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/generic_row_renderer.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/generic_row_renderer.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/generic_row_renderer.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/generic_row_renderer.tsx
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/primary_secondary_user_info.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/primary_secondary_user_info.test.tsx
similarity index 97%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/primary_secondary_user_info.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/primary_secondary_user_info.test.tsx
index 598769e854b422..41e35427ae2542 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/primary_secondary_user_info.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/primary_secondary_user_info.test.tsx
@@ -7,9 +7,9 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 
-import { TestProviders } from '../../../../../mock';
+import { TestProviders } from '../../../../../../common/mock';
 import { PrimarySecondaryUserInfo, nilOrUnSet } from './primary_secondary_user_info';
-import { useMountAppended } from '../../../../../utils/use_mount_appended';
+import { useMountAppended } from '../../../../../../common/utils/use_mount_appended';
 
 describe('UserPrimarySecondary', () => {
   const mount = useMountAppended();
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/primary_secondary_user_info.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/primary_secondary_user_info.tsx
similarity index 97%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/primary_secondary_user_info.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/primary_secondary_user_info.tsx
index a54042d3de9d87..8c9191181d93b5 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/primary_secondary_user_info.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/primary_secondary_user_info.tsx
@@ -7,7 +7,7 @@
 import { EuiFlexGroup } from '@elastic/eui';
 import React from 'react';
 
-import { DraggableBadge } from '../../../../draggables';
+import { DraggableBadge } from '../../../../../../common/components/draggables';
 
 import * as i18n from './translations';
 import { TokensFlexItem } from '../helpers';
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/session_user_host_working_dir.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/session_user_host_working_dir.test.tsx
similarity index 97%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/session_user_host_working_dir.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/session_user_host_working_dir.test.tsx
index a0a9977f5765e3..d1e67c25bd79c5 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/session_user_host_working_dir.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/session_user_host_working_dir.test.tsx
@@ -8,9 +8,9 @@ import { EuiFlexItem } from '@elastic/eui';
 import { shallow } from 'enzyme';
 import React from 'react';
 
-import { TestProviders } from '../../../../../mock';
+import { TestProviders } from '../../../../../../common/mock';
 import { SessionUserHostWorkingDir } from './session_user_host_working_dir';
-import { useMountAppended } from '../../../../../utils/use_mount_appended';
+import { useMountAppended } from '../../../../../../common/utils/use_mount_appended';
 
 describe('SessionUserHostWorkingDir', () => {
   const mount = useMountAppended();
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/session_user_host_working_dir.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/session_user_host_working_dir.tsx
similarity index 96%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/session_user_host_working_dir.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/session_user_host_working_dir.tsx
index 6a6b55bb817c84..fb2fd7a4b04b05 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/session_user_host_working_dir.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/session_user_host_working_dir.tsx
@@ -6,7 +6,7 @@
 
 import React from 'react';
 
-import { DraggableBadge } from '../../../../draggables';
+import { DraggableBadge } from '../../../../../../common/components/draggables';
 
 import * as i18n from './translations';
 import { TokensFlexItem } from '../helpers';
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/translations.ts b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/auditd/translations.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/auditd/translations.ts
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/bytes/index.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/bytes/index.test.tsx
new file mode 100644
index 00000000000000..06f392683cbf17
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/bytes/index.test.tsx
@@ -0,0 +1,31 @@
+/*
+ * 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 { TestProviders } from '../../../../../../common/mock';
+import { PreferenceFormattedBytes } from '../../../../../../common/components/formatted_bytes';
+import { useMountAppended } from '../../../../../../common/utils/use_mount_appended';
+
+import { Bytes } from '.';
+
+describe('Bytes', () => {
+  const mount = useMountAppended();
+
+  test('it renders the expected formatted bytes', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <Bytes contextId="test" eventId="abc" fieldName="network.bytes" value={`1234567`} />
+      </TestProviders>
+    );
+    expect(
+      wrapper
+        .find(PreferenceFormattedBytes)
+        .first()
+        .text()
+    ).toEqual('1.2MB');
+  });
+});
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/bytes/index.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/bytes/index.tsx
new file mode 100644
index 00000000000000..a8dfe939d28dd8
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/bytes/index.tsx
@@ -0,0 +1,35 @@
+/*
+ * 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 { DefaultDraggable } from '../../../../../../common/components/draggables';
+import { PreferenceFormattedBytes } from '../../../../../../common/components/formatted_bytes';
+
+export const BYTES_FORMAT = 'bytes';
+
+/**
+ * Renders draggable text containing the value of a field representing a
+ * duration of time, (e.g. `event.duration`)
+ */
+export const Bytes = React.memo<{
+  contextId: string;
+  eventId: string;
+  fieldName: string;
+  value?: string | null;
+}>(({ contextId, eventId, fieldName, value }) => (
+  <DefaultDraggable
+    id={`bytes-default-draggable-${contextId}-${eventId}-${fieldName}-${value}`}
+    name={name}
+    field={fieldName}
+    tooltipContent={null}
+    value={value}
+  >
+    <PreferenceFormattedBytes value={`${value}`} />
+  </DefaultDraggable>
+));
+
+Bytes.displayName = 'Bytes';
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/column_renderer.ts b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/column_renderer.ts
similarity index 82%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/column_renderer.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/column_renderer.ts
index a13de90e7aed3d..4a89fea8c51067 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/column_renderer.ts
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/column_renderer.ts
@@ -4,8 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { TimelineNonEcsData } from '../../../../graphql/types';
-import { ColumnHeaderOptions } from '../../../../store/timeline/model';
+import { TimelineNonEcsData } from '../../../../../graphql/types';
+import { ColumnHeaderOptions } from '../../../../../timelines/store/timeline/model';
 
 export interface ColumnRenderer {
   isInstance: (columnName: string, data: TimelineNonEcsData[]) => boolean;
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/constants.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/constants.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/constants.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/constants.tsx
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/dns/dns_request_event_details.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/dns/dns_request_event_details.test.tsx
similarity index 82%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/dns/dns_request_event_details.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/dns/dns_request_event_details.test.tsx
index a7c9d10e82a2fd..ba77709459c28e 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/dns/dns_request_event_details.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/dns/dns_request_event_details.test.tsx
@@ -11,10 +11,10 @@
 
 import React from 'react';
 
-import { TestProviders } from '../../../../../mock';
-import { mockBrowserFields } from '../../../../../../public/containers/source/mock';
-import { mockEndgameDnsRequest } from '../../../../../../public/mock/mock_endgame_ecs_data';
-import { useMountAppended } from '../../../../../utils/use_mount_appended';
+import { TestProviders } from '../../../../../../common/mock';
+import { mockBrowserFields } from '../../../../../../common/containers/source/mock';
+import { mockEndgameDnsRequest } from '../../../../../../common/mock/mock_endgame_ecs_data';
+import { useMountAppended } from '../../../../../../common/utils/use_mount_appended';
 
 import { DnsRequestEventDetails } from './dns_request_event_details';
 
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/dns/dns_request_event_details.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/dns/dns_request_event_details.tsx
similarity index 94%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/dns/dns_request_event_details.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/dns/dns_request_event_details.tsx
index 824e8c00de307a..74ed5b2a6587fa 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/dns/dns_request_event_details.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/dns/dns_request_event_details.tsx
@@ -8,9 +8,9 @@ import { EuiSpacer } from '@elastic/eui';
 import { get } from 'lodash/fp';
 import React from 'react';
 
-import { BrowserFields } from '../../../../../containers/source';
+import { BrowserFields } from '../../../../../../common/containers/source';
 import { Details } from '../helpers';
-import { Ecs } from '../../../../../graphql/types';
+import { Ecs } from '../../../../../../graphql/types';
 import { NetflowRenderer } from '../netflow';
 
 import { DnsRequestEventDetailsLine } from './dns_request_event_details_line';
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/dns/dns_request_event_details_line.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/dns/dns_request_event_details_line.test.tsx
similarity index 98%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/dns/dns_request_event_details_line.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/dns/dns_request_event_details_line.test.tsx
index e12eacd73559de..1d46e4c3eb02d7 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/dns/dns_request_event_details_line.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/dns/dns_request_event_details_line.test.tsx
@@ -11,10 +11,10 @@
 
 import React from 'react';
 
-import { TestProviders } from '../../../../../mock';
+import { TestProviders } from '../../../../../../common/mock';
 
 import { DnsRequestEventDetailsLine } from './dns_request_event_details_line';
-import { useMountAppended } from '../../../../../utils/use_mount_appended';
+import { useMountAppended } from '../../../../../../common/utils/use_mount_appended';
 
 describe('DnsRequestEventDetailsLine', () => {
   const mount = useMountAppended();
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/dns/dns_request_event_details_line.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/dns/dns_request_event_details_line.tsx
similarity index 98%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/dns/dns_request_event_details_line.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/dns/dns_request_event_details_line.tsx
index c7a08620bebbbe..eafe64f13c25cf 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/dns/dns_request_event_details_line.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/dns/dns_request_event_details_line.tsx
@@ -7,7 +7,7 @@
 import { EuiFlexGroup } from '@elastic/eui';
 import React from 'react';
 
-import { DraggableBadge } from '../../../../draggables';
+import { DraggableBadge } from '../../../../../../common/components/draggables';
 import { isNillEmptyOrNotFinite, TokensFlexItem } from '../helpers';
 import { ProcessDraggableWithNonExistentProcess } from '../process_draggable';
 import { UserHostWorkingDir } from '../user_host_working_dir';
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/dns/translations.ts b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/dns/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/dns/translations.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/dns/translations.ts
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/empty_column_renderer.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/empty_column_renderer.test.tsx
similarity index 91%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/empty_column_renderer.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/empty_column_renderer.test.tsx
index b31d01b8e94a0f..4514ce5e9bb069 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/empty_column_renderer.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/empty_column_renderer.test.tsx
@@ -8,10 +8,10 @@ import { shallow } from 'enzyme';
 import { cloneDeep } from 'lodash/fp';
 import React from 'react';
 
-import { TimelineNonEcsData } from '../../../../graphql/types';
-import { defaultHeaders, mockTimelineData, TestProviders } from '../../../../mock';
-import { useMountAppended } from '../../../../utils/use_mount_appended';
-import { getEmptyValue } from '../../../empty_value';
+import { TimelineNonEcsData } from '../../../../../graphql/types';
+import { defaultHeaders, mockTimelineData, TestProviders } from '../../../../../common/mock';
+import { useMountAppended } from '../../../../../common/utils/use_mount_appended';
+import { getEmptyValue } from '../../../../../common/components/empty_value';
 import { deleteItemIdx, findItem } from './helpers';
 import { emptyColumnRenderer } from './empty_column_renderer';
 
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/empty_column_renderer.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/empty_column_renderer.tsx
similarity index 81%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/empty_column_renderer.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/empty_column_renderer.tsx
index 45ef46616718d1..9769e23b57aff4 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/empty_column_renderer.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/empty_column_renderer.tsx
@@ -8,11 +8,14 @@
 
 import React from 'react';
 
-import { TimelineNonEcsData } from '../../../../graphql/types';
-import { ColumnHeaderOptions } from '../../../../store/timeline/model';
-import { DraggableWrapper, DragEffects } from '../../../drag_and_drop/draggable_wrapper';
-import { escapeDataProviderId } from '../../../drag_and_drop/helpers';
-import { getEmptyValue } from '../../../empty_value';
+import { TimelineNonEcsData } from '../../../../../graphql/types';
+import { ColumnHeaderOptions } from '../../../../../timelines/store/timeline/model';
+import {
+  DraggableWrapper,
+  DragEffects,
+} from '../../../../../common/components/drag_and_drop/draggable_wrapper';
+import { escapeDataProviderId } from '../../../../../common/components/drag_and_drop/helpers';
+import { getEmptyValue } from '../../../../../common/components/empty_value';
 import { EXISTS_OPERATOR } from '../../data_providers/data_provider';
 import { Provider } from '../../data_providers/provider';
 import { ColumnRenderer } from './column_renderer';
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/endgame/endgame_security_event_details.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/endgame/endgame_security_event_details.test.tsx
similarity index 92%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/endgame/endgame_security_event_details.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/endgame/endgame_security_event_details.test.tsx
index 72b879d4ade78b..e84cb93b871781 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/endgame/endgame_security_event_details.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/endgame/endgame_security_event_details.test.tsx
@@ -11,15 +11,15 @@
 
 import React from 'react';
 
-import { TestProviders } from '../../../../../mock';
-import { mockBrowserFields } from '../../../../../../public/containers/source/mock';
+import { TestProviders } from '../../../../../../common/mock';
+import { mockBrowserFields } from '../../../../../../common/containers/source/mock';
 import {
   mockEndgameAdminLogon,
   mockEndgameExplicitUserLogon,
   mockEndgameUserLogon,
   mockEndgameUserLogoff,
-} from '../../../../../../public/mock/mock_endgame_ecs_data';
-import { useMountAppended } from '../../../../../utils/use_mount_appended';
+} from '../../../../../../common/mock/mock_endgame_ecs_data';
+import { useMountAppended } from '../../../../../../common/utils/use_mount_appended';
 
 import { EndgameSecurityEventDetails } from './endgame_security_event_details';
 
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/endgame/endgame_security_event_details.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/endgame/endgame_security_event_details.tsx
similarity index 96%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/endgame/endgame_security_event_details.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/endgame/endgame_security_event_details.tsx
index 35a88f52f05a3a..11580e2536ff7e 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/endgame/endgame_security_event_details.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/endgame/endgame_security_event_details.tsx
@@ -8,8 +8,8 @@ import { EuiSpacer } from '@elastic/eui';
 import { get } from 'lodash/fp';
 import React from 'react';
 
-import { BrowserFields } from '../../../../../containers/source';
-import { Ecs } from '../../../../../graphql/types';
+import { BrowserFields } from '../../../../../../common/containers/source';
+import { Ecs } from '../../../../../../graphql/types';
 import { NetflowRenderer } from '../netflow';
 
 import { EndgameSecurityEventDetailsLine } from './endgame_security_event_details_line';
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/endgame/endgame_security_event_details_line.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/endgame/endgame_security_event_details_line.test.tsx
similarity index 99%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/endgame/endgame_security_event_details_line.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/endgame/endgame_security_event_details_line.test.tsx
index 4e522f6ed5c94f..b2b4b021e5db53 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/endgame/endgame_security_event_details_line.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/endgame/endgame_security_event_details_line.test.tsx
@@ -11,10 +11,10 @@
 
 import React from 'react';
 
-import { TestProviders } from '../../../../../mock';
+import { TestProviders } from '../../../../../../common/mock';
 
 import { EndgameSecurityEventDetailsLine } from './endgame_security_event_details_line';
-import { useMountAppended } from '../../../../../utils/use_mount_appended';
+import { useMountAppended } from '../../../../../../common/utils/use_mount_appended';
 
 describe('EndgameSecurityEventDetailsLine', () => {
   const mount = useMountAppended();
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/endgame/endgame_security_event_details_line.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/endgame/endgame_security_event_details_line.tsx
similarity index 99%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/endgame/endgame_security_event_details_line.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/endgame/endgame_security_event_details_line.tsx
index c2c42ba0e4ddcf..c2bccc24fd9945 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/endgame/endgame_security_event_details_line.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/endgame/endgame_security_event_details_line.tsx
@@ -7,7 +7,7 @@
 import { EuiFlexGroup } from '@elastic/eui';
 import React from 'react';
 
-import { DraggableBadge } from '../../../../draggables';
+import { DraggableBadge } from '../../../../../../common/components/draggables';
 import { isNillEmptyOrNotFinite, TokensFlexItem } from '../helpers';
 import { ProcessDraggableWithNonExistentProcess } from '../process_draggable';
 import { UserHostWorkingDir } from '../user_host_working_dir';
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/endgame/helpers.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/endgame/helpers.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/endgame/helpers.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/endgame/helpers.test.tsx
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/endgame/helpers.ts b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/endgame/helpers.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/endgame/helpers.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/endgame/helpers.ts
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/endgame/translations.ts b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/endgame/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/endgame/translations.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/endgame/translations.ts
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/exit_code_draggable.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/exit_code_draggable.test.tsx
similarity index 95%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/exit_code_draggable.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/exit_code_draggable.test.tsx
index 4da236bfa34c30..4471c26ef8fd7b 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/exit_code_draggable.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/exit_code_draggable.test.tsx
@@ -6,8 +6,8 @@
 
 import React from 'react';
 
-import { TestProviders } from '../../../../mock';
-import { useMountAppended } from '../../../../utils/use_mount_appended';
+import { TestProviders } from '../../../../../common/mock';
+import { useMountAppended } from '../../../../../common/utils/use_mount_appended';
 
 import { ExitCodeDraggable } from './exit_code_draggable';
 
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/exit_code_draggable.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/exit_code_draggable.tsx
similarity index 94%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/exit_code_draggable.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/exit_code_draggable.tsx
index 7671e3f0509a53..8aba73f5373e91 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/exit_code_draggable.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/exit_code_draggable.tsx
@@ -6,7 +6,7 @@
 
 import React from 'react';
 
-import { DraggableBadge } from '../../../draggables';
+import { DraggableBadge } from '../../../../../common/components/draggables';
 
 import { isNillEmptyOrNotFinite, TokensFlexItem } from './helpers';
 
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/file_draggable.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/file_draggable.test.tsx
similarity index 95%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/file_draggable.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/file_draggable.test.tsx
index d800821f8d8a5f..70e0e74675cd2f 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/file_draggable.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/file_draggable.test.tsx
@@ -6,10 +6,10 @@
 
 import React from 'react';
 
-import { TestProviders } from '../../../../mock';
+import { TestProviders } from '../../../../../common/mock';
 
 import { FileDraggable } from './file_draggable';
-import { useMountAppended } from '../../../../utils/use_mount_appended';
+import { useMountAppended } from '../../../../../common/utils/use_mount_appended';
 
 describe('FileDraggable', () => {
   const mount = useMountAppended();
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/file_draggable.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/file_draggable.tsx
similarity index 97%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/file_draggable.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/file_draggable.tsx
index e4871c6479c6be..bdf223d215a1cc 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/file_draggable.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/file_draggable.tsx
@@ -6,7 +6,7 @@
 
 import React from 'react';
 
-import { DraggableBadge } from '../../../draggables';
+import { DraggableBadge } from '../../../../../common/components/draggables';
 
 import { isNillEmptyOrNotFinite, TokensFlexItem } from './helpers';
 import * as i18n from './translations';
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/formatted_field.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/formatted_field.test.tsx
similarity index 96%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/formatted_field.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/formatted_field.test.tsx
index 73f7b004ca3f71..64f4656e7e790a 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/formatted_field.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/formatted_field.test.tsx
@@ -8,14 +8,14 @@ import { shallow } from 'enzyme';
 import { get } from 'lodash/fp';
 import React from 'react';
 
-import { mockTimelineData, TestProviders } from '../../../../mock';
-import { getEmptyValue } from '../../../empty_value';
-import { useMountAppended } from '../../../../utils/use_mount_appended';
+import { mockTimelineData, TestProviders } from '../../../../../common/mock';
+import { getEmptyValue } from '../../../../../common/components/empty_value';
+import { useMountAppended } from '../../../../../common/utils/use_mount_appended';
 
 import { FormattedFieldValue } from './formatted_field';
 import { HOST_NAME_FIELD_NAME } from './constants';
 
-jest.mock('../../../../lib/kibana');
+jest.mock('../../../../../common/lib/kibana');
 
 describe('Events', () => {
   const mount = useMountAppended();
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/formatted_field.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/formatted_field.tsx
similarity index 88%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/formatted_field.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/formatted_field.tsx
index 0f650d6386194b..d03f0573dc2b0a 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/formatted_field.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/formatted_field.tsx
@@ -8,16 +8,19 @@ import { EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
 import { isNumber, isString, isEmpty } from 'lodash/fp';
 import React from 'react';
 
-import { DefaultDraggable } from '../../../draggables';
-import { Bytes, BYTES_FORMAT } from '../../../bytes';
+import { DefaultDraggable } from '../../../../../common/components/draggables';
+import { Bytes, BYTES_FORMAT } from './bytes';
 import { Duration, EVENT_DURATION_FIELD_NAME } from '../../../duration';
-import { getOrEmptyTagFromValue, getEmptyTagValue } from '../../../empty_value';
-import { FormattedDate } from '../../../formatted_date';
-import { FormattedIp } from '../../../formatted_ip';
-import { HostDetailsLink } from '../../../links';
+import {
+  getOrEmptyTagFromValue,
+  getEmptyTagValue,
+} from '../../../../../common/components/empty_value';
+import { FormattedDate } from '../../../../../common/components/formatted_date';
+import { FormattedIp } from '../../../../components/formatted_ip';
+import { HostDetailsLink } from '../../../../../common/components/links';
 
-import { Port, PORT_NAMES } from '../../../port';
-import { TruncatableText } from '../../../truncatable_text';
+import { Port, PORT_NAMES } from '../../../../../network/components/port';
+import { TruncatableText } from '../../../../../common/components/truncatable_text';
 import {
   DATE_FIELD_TYPE,
   HOST_NAME_FIELD_NAME,
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/formatted_field_helpers.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/formatted_field_helpers.tsx
similarity index 89%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/formatted_field_helpers.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/formatted_field_helpers.tsx
index 7c9accd4cef49e..bbf8c5af3be970 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/formatted_field_helpers.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/formatted_field_helpers.tsx
@@ -9,13 +9,13 @@ import { isString, isEmpty } from 'lodash/fp';
 import React from 'react';
 import styled from 'styled-components';
 
-import { DefaultDraggable } from '../../../draggables';
-import { getEmptyTagValue } from '../../../empty_value';
-import { getRuleDetailsUrl } from '../../../link_to/redirect_to_detection_engine';
-import { TruncatableText } from '../../../truncatable_text';
+import { DefaultDraggable } from '../../../../../common/components/draggables';
+import { getEmptyTagValue } from '../../../../../common/components/empty_value';
+import { getRuleDetailsUrl } from '../../../../../common/components/link_to/redirect_to_detection_engine';
+import { TruncatableText } from '../../../../../common/components/truncatable_text';
 
-import { isUrlInvalid } from '../../../../pages/detection_engine/rules/components/step_about_rule/helpers';
-import endPointSvg from '../../../../utils/logo_endpoint/64_color.svg';
+import { isUrlInvalid } from '../../../../../alerts/components/rules/step_about_rule/helpers';
+import endPointSvg from '../../../../../common/utils/logo_endpoint/64_color.svg';
 
 import * as i18n from './translations';
 
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/get_column_renderer.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/get_column_renderer.test.tsx
similarity index 89%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/get_column_renderer.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/get_column_renderer.test.tsx
index 25d5c71caf48ab..12b093bd517c8c 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/get_column_renderer.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/get_column_renderer.test.tsx
@@ -8,16 +8,16 @@ import { shallow } from 'enzyme';
 import { cloneDeep } from 'lodash/fp';
 import React from 'react';
 
-import { TimelineNonEcsData } from '../../../../graphql/types';
-import { mockTimelineData } from '../../../../mock';
-import { TestProviders } from '../../../../mock/test_providers';
-import { getEmptyValue } from '../../../empty_value';
+import { TimelineNonEcsData } from '../../../../../graphql/types';
+import { mockTimelineData } from '../../../../../common/mock';
+import { TestProviders } from '../../../../../common/mock/test_providers';
+import { getEmptyValue } from '../../../../../common/components/empty_value';
 import { defaultHeaders } from '../column_headers/default_headers';
 
 import { columnRenderers } from '.';
 import { getColumnRenderer } from './get_column_renderer';
 import { getValues, findItem, deleteItemIdx } from './helpers';
-import { useMountAppended } from '../../../../utils/use_mount_appended';
+import { useMountAppended } from '../../../../../common/utils/use_mount_appended';
 
 describe('get_column_renderer', () => {
   let nonSuricata: TimelineNonEcsData[];
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/get_column_renderer.ts b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/get_column_renderer.ts
similarity index 91%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/get_column_renderer.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/get_column_renderer.ts
index 22aa14d598c135..03d041aef1e702 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/get_column_renderer.ts
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/get_column_renderer.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { TimelineNonEcsData } from '../../../../graphql/types';
+import { TimelineNonEcsData } from '../../../../../graphql/types';
 import { ColumnRenderer } from './column_renderer';
 
 const unhandledColumnRenderer = (): never => {
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/get_row_renderer.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/get_row_renderer.test.tsx
similarity index 93%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/get_row_renderer.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/get_row_renderer.test.tsx
index 7ad8cfed5256ba..3222f8a2362db8 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/get_row_renderer.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/get_row_renderer.test.tsx
@@ -8,11 +8,11 @@ import { shallow } from 'enzyme';
 import { cloneDeep } from 'lodash';
 import React from 'react';
 
-import { mockBrowserFields } from '../../../../containers/source/mock';
-import { Ecs } from '../../../../graphql/types';
-import { mockTimelineData } from '../../../../mock';
-import { TestProviders } from '../../../../mock/test_providers';
-import { useMountAppended } from '../../../../utils/use_mount_appended';
+import { mockBrowserFields } from '../../../../../common/containers/source/mock';
+import { Ecs } from '../../../../../graphql/types';
+import { mockTimelineData } from '../../../../../common/mock';
+import { TestProviders } from '../../../../../common/mock/test_providers';
+import { useMountAppended } from '../../../../../common/utils/use_mount_appended';
 
 import { rowRenderers } from '.';
 import { getRowRenderer } from './get_row_renderer';
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/get_row_renderer.ts b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/get_row_renderer.ts
similarity index 92%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/get_row_renderer.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/get_row_renderer.ts
index b5a585d4638198..2e90c589e65329 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/get_row_renderer.ts
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/get_row_renderer.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { Ecs } from '../../../../graphql/types';
+import { Ecs } from '../../../../../graphql/types';
 import { RowRenderer } from './row_renderer';
 
 const unhandledRowRenderer = (): never => {
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/helpers.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/helpers.test.tsx
new file mode 100644
index 00000000000000..82704d544b8b9f
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/helpers.test.tsx
@@ -0,0 +1,284 @@
+/*
+ * 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 { cloneDeep } from 'lodash/fp';
+
+import { TimelineNonEcsData } from '../../../../../graphql/types';
+import { mockTimelineData } from '../../../../../common/mock';
+import {
+  deleteItemIdx,
+  findItem,
+  getValues,
+  isFileEvent,
+  isNillEmptyOrNotFinite,
+  isProcessStoppedOrTerminationEvent,
+  showVia,
+} from './helpers';
+
+describe('helpers', () => {
+  describe('#deleteItemIdx', () => {
+    let mockDatum: TimelineNonEcsData[];
+    beforeEach(() => {
+      mockDatum = cloneDeep(mockTimelineData[0].data);
+    });
+
+    test('should delete part of a value value', () => {
+      const deleted = deleteItemIdx(mockDatum, 1);
+      const expected: TimelineNonEcsData[] = [
+        { field: '@timestamp', value: ['2018-11-05T19:03:25.937Z'] },
+        // { field: 'event.category', value: ['Access'] <-- deleted entry
+        { field: 'event.category', value: ['Access'] },
+        { field: 'event.action', value: ['Action'] },
+        { field: 'host.name', value: ['apache'] },
+        { field: 'source.ip', value: ['192.168.0.1'] },
+        { field: 'destination.ip', value: ['192.168.0.3'] },
+        { field: 'destination.bytes', value: ['123456'] },
+        { field: 'user.name', value: ['john.dee'] },
+      ];
+      expect(deleted).toEqual(expected);
+    });
+
+    test('should not delete any part of the value, when the value when out of bounds', () => {
+      const deleted = deleteItemIdx(mockDatum, 1000);
+      const expected: TimelineNonEcsData[] = [
+        { field: '@timestamp', value: ['2018-11-05T19:03:25.937Z'] },
+        { field: 'event.severity', value: ['3'] },
+        { field: 'event.category', value: ['Access'] },
+        { field: 'event.action', value: ['Action'] },
+        { field: 'host.name', value: ['apache'] },
+        { field: 'source.ip', value: ['192.168.0.1'] },
+        { field: 'destination.ip', value: ['192.168.0.3'] },
+        { field: 'destination.bytes', value: ['123456'] },
+        { field: 'user.name', value: ['john.dee'] },
+      ];
+      expect(deleted).toEqual(expected);
+    });
+  });
+
+  describe('#findItem', () => {
+    let mockDatum: TimelineNonEcsData[];
+    beforeEach(() => {
+      mockDatum = cloneDeep(mockTimelineData[0].data);
+    });
+    test('should find an index with non-zero', () => {
+      expect(findItem(mockDatum, 'event.severity')).toEqual(1);
+    });
+
+    test('should return -1 with a field not found', () => {
+      expect(findItem(mockDatum, 'event.made-up')).toEqual(-1);
+    });
+  });
+
+  describe('#getValues', () => {
+    let mockDatum: TimelineNonEcsData[];
+    beforeEach(() => {
+      mockDatum = cloneDeep(mockTimelineData[0].data);
+    });
+
+    test('should return a valid value', () => {
+      expect(getValues('event.severity', mockDatum)).toEqual(['3']);
+    });
+
+    test('should return undefined when the value is not found', () => {
+      expect(getValues('event.made-up-value', mockDatum)).toBeUndefined();
+    });
+
+    test('should return an undefined when the value found is null', () => {
+      const nullValue: TimelineNonEcsData[] = [
+        { field: '@timestamp', value: ['2018-11-05T19:03:25.937Z'] },
+        { field: 'event.severity', value: ['3'] },
+        { field: 'event.category', value: ['Access'] },
+        { field: 'event.action', value: ['Action'] },
+        { field: 'host.name', value: ['apache'] },
+        { field: 'source.ip', value: ['192.168.0.1'] },
+        { field: 'destination.ip', value: ['192.168.0.3'] },
+        { field: 'destination.bytes', value: ['123456'] },
+        { field: 'user.name', value: null },
+      ];
+      expect(getValues('user.name', nullValue)).toBeUndefined();
+    });
+
+    test('should return an undefined when the value found is undefined', () => {
+      const nullValue: TimelineNonEcsData[] = [
+        { field: '@timestamp', value: ['2018-11-05T19:03:25.937Z'] },
+        { field: 'event.severity', value: ['3'] },
+        { field: 'event.category', value: ['Access'] },
+        { field: 'event.action', value: ['Action'] },
+        { field: 'host.name', value: ['apache'] },
+        { field: 'source.ip', value: ['192.168.0.1'] },
+        { field: 'destination.ip', value: ['192.168.0.3'] },
+        { field: 'destination.bytes', value: ['123456'] },
+        { field: 'user.name', value: undefined },
+      ];
+      expect(getValues('user.name', nullValue)).toBeUndefined();
+    });
+
+    test('should return an undefined when the value is not present', () => {
+      const nullValue: TimelineNonEcsData[] = [
+        { field: '@timestamp', value: ['2018-11-05T19:03:25.937Z'] },
+        { field: 'event.severity', value: ['3'] },
+        { field: 'event.category', value: ['Access'] },
+        { field: 'event.action', value: ['Action'] },
+        { field: 'host.name', value: ['apache'] },
+        { field: 'source.ip', value: ['192.168.0.1'] },
+        { field: 'destination.ip', value: ['192.168.0.3'] },
+        { field: 'destination.bytes', value: ['123456'] },
+        { field: 'user.name' },
+      ];
+      expect(getValues('user.name', nullValue)).toBeUndefined();
+    });
+  });
+
+  describe('#isNillEmptyOrNotFinite', () => {
+    test('undefined returns true', () => {
+      expect(isNillEmptyOrNotFinite(undefined)).toBe(true);
+    });
+
+    test('null returns true', () => {
+      expect(isNillEmptyOrNotFinite(null)).toBe(true);
+    });
+
+    test('empty string returns true', () => {
+      expect(isNillEmptyOrNotFinite('')).toBe(true);
+    });
+
+    test('empty array returns true', () => {
+      expect(isNillEmptyOrNotFinite([])).toBe(true);
+    });
+
+    test('NaN returns true', () => {
+      expect(isNillEmptyOrNotFinite(NaN)).toBe(true);
+    });
+
+    test('Infinity returns true', () => {
+      expect(isNillEmptyOrNotFinite(Infinity)).toBe(true);
+    });
+
+    test('a single space string returns false', () => {
+      expect(isNillEmptyOrNotFinite(' ')).toBe(false);
+    });
+
+    test('a simple string returns false', () => {
+      expect(isNillEmptyOrNotFinite('a simple string')).toBe(false);
+    });
+
+    test('the number 0 returns false', () => {
+      expect(isNillEmptyOrNotFinite(0)).toBe(false);
+    });
+
+    test('a non-empty array return false', () => {
+      expect(isNillEmptyOrNotFinite(['non empty array'])).toBe(false);
+    });
+  });
+
+  describe('#showVia', () => {
+    test('undefined returns false', () => {
+      expect(showVia(undefined)).toBe(false);
+    });
+
+    test('null returns false', () => {
+      expect(showVia(null)).toBe(false);
+    });
+
+    test('empty string returns false', () => {
+      expect(showVia('')).toBe(false);
+    });
+
+    test('a random string returns false', () => {
+      expect(showVia('a random string')).toBe(false);
+    });
+
+    describe('valid values', () => {
+      const validValues = ['file_create_event', 'created', 'file_delete_event', 'deleted'];
+
+      validValues.forEach(eventAction => {
+        test(`${eventAction} returns true`, () => {
+          expect(showVia(eventAction)).toBe(true);
+        });
+      });
+
+      validValues.forEach(value => {
+        const upperCaseValue = value.toUpperCase();
+
+        test(`${upperCaseValue} (upper case) returns true`, () => {
+          expect(showVia(upperCaseValue)).toBe(true);
+        });
+      });
+    });
+  });
+
+  describe('#isFileEvent', () => {
+    test('returns true when both eventCategory and eventDataset are file', () => {
+      expect(isFileEvent({ eventCategory: 'file', eventDataset: 'file' })).toBe(true);
+    });
+
+    test('returns false when eventCategory and eventDataset are undefined', () => {
+      expect(isFileEvent({ eventCategory: undefined, eventDataset: undefined })).toBe(false);
+    });
+
+    test('returns false when eventCategory and eventDataset are null', () => {
+      expect(isFileEvent({ eventCategory: null, eventDataset: null })).toBe(false);
+    });
+
+    test('returns false when eventCategory and eventDataset are random values', () => {
+      expect(
+        isFileEvent({ eventCategory: 'random category', eventDataset: 'random dataset' })
+      ).toBe(false);
+    });
+
+    test('returns true when just eventCategory is file', () => {
+      expect(isFileEvent({ eventCategory: 'file', eventDataset: undefined })).toBe(true);
+    });
+
+    test('returns true when just eventDataset is file', () => {
+      expect(isFileEvent({ eventCategory: null, eventDataset: 'file' })).toBe(true);
+    });
+
+    test('returns true when just eventCategory is File with a capitol F', () => {
+      expect(isFileEvent({ eventCategory: 'File', eventDataset: '' })).toBe(true);
+    });
+
+    test('returns true when just eventDataset is File with a capitol F', () => {
+      expect(isFileEvent({ eventCategory: 'random', eventDataset: 'File' })).toBe(true);
+    });
+  });
+
+  describe('#isProcessStoppedOrTerminationEvent', () => {
+    test('returns false when eventAction is undefined', () => {
+      expect(isProcessStoppedOrTerminationEvent(undefined)).toBe(false);
+    });
+
+    test('returns false when eventAction is null', () => {
+      expect(isProcessStoppedOrTerminationEvent(null)).toBe(false);
+    });
+
+    test('returns false when eventAction is an empty string', () => {
+      expect(isProcessStoppedOrTerminationEvent('')).toBe(false);
+    });
+
+    test('returns false when eventAction is a random value', () => {
+      expect(isProcessStoppedOrTerminationEvent('a random value')).toBe(false);
+    });
+
+    describe('valid values', () => {
+      const validValues = ['process_stopped', 'termination_event'];
+
+      validValues.forEach(value => {
+        test(`returns true when eventAction is ${value}`, () => {
+          expect(isProcessStoppedOrTerminationEvent(value)).toBe(true);
+        });
+      });
+
+      validValues.forEach(value => {
+        const upperCaseValue = value.toUpperCase();
+
+        test(`returns true when eventAction is (upper case) ${upperCaseValue}`, () => {
+          expect(isProcessStoppedOrTerminationEvent(upperCaseValue)).toBe(true);
+        });
+      });
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/helpers.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/helpers.tsx
new file mode 100644
index 00000000000000..7cda5aa3c59f78
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/helpers.tsx
@@ -0,0 +1,63 @@
+/*
+ * 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 { EuiFlexItem } from '@elastic/eui';
+import { isNumber, isEmpty } from 'lodash/fp';
+import styled from 'styled-components';
+
+import { TimelineNonEcsData } from '../../../../../graphql/types';
+
+export const deleteItemIdx = (data: TimelineNonEcsData[], idx: number) => [
+  ...data.slice(0, idx),
+  ...data.slice(idx + 1),
+];
+
+export const findItem = (data: TimelineNonEcsData[], field: string): number =>
+  data.findIndex(d => d.field === field);
+
+export const getValues = (field: string, data: TimelineNonEcsData[]): string[] | undefined => {
+  const obj = data.find(d => d.field === field);
+  if (obj != null && obj.value != null) {
+    return obj.value;
+  }
+  return undefined;
+};
+
+export const Details = styled.div`
+  margin: 5px 0 5px 10px;
+  & .euiBadge {
+    margin: 2px 0 2px 0;
+  }
+`;
+Details.displayName = 'Details';
+
+export const TokensFlexItem = styled(EuiFlexItem)`
+  margin-left: 3px;
+`;
+TokensFlexItem.displayName = 'TokensFlexItem';
+
+export function isNillEmptyOrNotFinite<T>(value: string | number | T[] | null | undefined) {
+  return isNumber(value) ? !isFinite(value) : isEmpty(value);
+}
+
+export const isFileEvent = ({
+  eventCategory,
+  eventDataset,
+}: {
+  eventCategory: string | null | undefined;
+  eventDataset: string | null | undefined;
+}) =>
+  (eventCategory != null && eventCategory.toLowerCase() === 'file') ||
+  (eventDataset != null && eventDataset.toLowerCase() === 'file');
+
+export const isProcessStoppedOrTerminationEvent = (
+  eventAction: string | null | undefined
+): boolean => ['process_stopped', 'termination_event'].includes(`${eventAction}`.toLowerCase());
+
+export const showVia = (eventAction: string | null | undefined): boolean =>
+  ['file_create_event', 'created', 'file_delete_event', 'deleted'].includes(
+    `${eventAction}`.toLowerCase()
+  );
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/host_working_dir.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/host_working_dir.test.tsx
similarity index 94%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/host_working_dir.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/host_working_dir.test.tsx
index d84dfcc5618826..85a000bbcaf638 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/host_working_dir.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/host_working_dir.test.tsx
@@ -7,8 +7,8 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 
-import { mockTimelineData, TestProviders } from '../../../../mock';
-import { useMountAppended } from '../../../../utils/use_mount_appended';
+import { mockTimelineData, TestProviders } from '../../../../../common/mock';
+import { useMountAppended } from '../../../../../common/utils/use_mount_appended';
 import { HostWorkingDir } from './host_working_dir';
 
 describe('HostWorkingDir', () => {
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/host_working_dir.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/host_working_dir.tsx
similarity index 94%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/host_working_dir.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/host_working_dir.tsx
index db49df30be473f..89d46dd287ffd8 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/host_working_dir.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/host_working_dir.tsx
@@ -6,7 +6,7 @@
 
 import React from 'react';
 
-import { DraggableBadge } from '../../../draggables';
+import { DraggableBadge } from '../../../../../common/components/draggables';
 
 import * as i18n from './translations';
 import { TokensFlexItem } from './helpers';
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/index.ts b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/index.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/index.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/index.ts
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/netflow.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/netflow.tsx
similarity index 86%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/netflow.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/netflow.tsx
index 0990301b6e2b92..0492450df51347 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/netflow.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/netflow.tsx
@@ -7,22 +7,28 @@
 import { get } from 'lodash/fp';
 import React from 'react';
 
-import { Ecs } from '../../../../graphql/types';
-import { asArrayIfExists } from '../../../../lib/helpers';
+import { Ecs } from '../../../../../graphql/types';
+import { asArrayIfExists } from '../../../../../common/lib/helpers';
 import {
   TLS_CLIENT_CERTIFICATE_FINGERPRINT_SHA1_FIELD_NAME,
   TLS_SERVER_CERTIFICATE_FINGERPRINT_SHA1_FIELD_NAME,
 } from '../../../certificate_fingerprint';
 import { EVENT_DURATION_FIELD_NAME } from '../../../duration';
-import { ID_FIELD_NAME } from '../../../event_details/event_id';
-import { DESTINATION_IP_FIELD_NAME, SOURCE_IP_FIELD_NAME } from '../../../ip';
+import { ID_FIELD_NAME } from '../../../../../common/components/event_details/event_id';
+import {
+  DESTINATION_IP_FIELD_NAME,
+  SOURCE_IP_FIELD_NAME,
+} from '../../../../../network/components/ip';
 import { JA3_HASH_FIELD_NAME } from '../../../ja3_fingerprint';
 import { Netflow } from '../../../netflow';
 import {
   EVENT_END_FIELD_NAME,
   EVENT_START_FIELD_NAME,
 } from '../../../netflow/netflow_columns/duration_event_start_end';
-import { DESTINATION_PORT_FIELD_NAME, SOURCE_PORT_FIELD_NAME } from '../../../port';
+import {
+  DESTINATION_PORT_FIELD_NAME,
+  SOURCE_PORT_FIELD_NAME,
+} from '../../../../../network/components/port';
 import {
   DESTINATION_GEO_CITY_NAME_FIELD_NAME,
   DESTINATION_GEO_CONTINENT_NAME_FIELD_NAME,
@@ -34,13 +40,13 @@ import {
   SOURCE_GEO_COUNTRY_ISO_CODE_FIELD_NAME,
   SOURCE_GEO_COUNTRY_NAME_FIELD_NAME,
   SOURCE_GEO_REGION_NAME_FIELD_NAME,
-} from '../../../source_destination/geo_fields';
+} from '../../../../../network/components/source_destination/geo_fields';
 import {
   DESTINATION_BYTES_FIELD_NAME,
   DESTINATION_PACKETS_FIELD_NAME,
   SOURCE_BYTES_FIELD_NAME,
   SOURCE_PACKETS_FIELD_NAME,
-} from '../../../source_destination/source_destination_arrows';
+} from '../../../../../network/components/source_destination/source_destination_arrows';
 import {
   NETWORK_BYTES_FIELD_NAME,
   NETWORK_COMMUNITY_ID_FIELD_NAME,
@@ -48,7 +54,7 @@ import {
   NETWORK_PACKETS_FIELD_NAME,
   NETWORK_PROTOCOL_FIELD_NAME,
   NETWORK_TRANSPORT_FIELD_NAME,
-} from '../../../source_destination/field_names';
+} from '../../../../../network/components/source_destination/field_names';
 
 interface NetflowRendererProps {
   data: Ecs;
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/netflow/__snapshots__/netflow_row_renderer.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/netflow/__snapshots__/netflow_row_renderer.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/netflow/__snapshots__/netflow_row_renderer.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/netflow/__snapshots__/netflow_row_renderer.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/netflow/netflow_row_renderer.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/netflow/netflow_row_renderer.test.tsx
similarity index 91%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/netflow/netflow_row_renderer.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/netflow/netflow_row_renderer.test.tsx
index e5375302f5bab2..9c620f5cf6701f 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/netflow/netflow_row_renderer.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/netflow/netflow_row_renderer.test.tsx
@@ -7,11 +7,11 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 
-import { BrowserFields } from '../../../../../containers/source';
-import { mockBrowserFields } from '../../../../../containers/source/mock';
-import { Ecs } from '../../../../../graphql/types';
-import { getMockNetflowData, TestProviders } from '../../../../../mock';
-import { useMountAppended } from '../../../../../utils/use_mount_appended';
+import { BrowserFields } from '../../../../../../common/containers/source';
+import { mockBrowserFields } from '../../../../../../common/containers/source/mock';
+import { Ecs } from '../../../../../../graphql/types';
+import { getMockNetflowData, TestProviders } from '../../../../../../common/mock';
+import { useMountAppended } from '../../../../../../common/utils/use_mount_appended';
 
 import {
   eventActionMatches,
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/netflow/netflow_row_renderer.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/netflow/netflow_row_renderer.tsx
similarity index 90%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/netflow/netflow_row_renderer.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/netflow/netflow_row_renderer.tsx
index 10d80e1952f40c..7926b447196fb9 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/netflow/netflow_row_renderer.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/netflow/netflow_row_renderer.tsx
@@ -10,14 +10,17 @@ import { get } from 'lodash/fp';
 import React from 'react';
 import styled from 'styled-components';
 
-import { asArrayIfExists } from '../../../../../lib/helpers';
+import { asArrayIfExists } from '../../../../../../common/lib/helpers';
 import {
   TLS_CLIENT_CERTIFICATE_FINGERPRINT_SHA1_FIELD_NAME,
   TLS_SERVER_CERTIFICATE_FINGERPRINT_SHA1_FIELD_NAME,
 } from '../../../../certificate_fingerprint';
 import { EVENT_DURATION_FIELD_NAME } from '../../../../duration';
-import { ID_FIELD_NAME } from '../../../../event_details/event_id';
-import { DESTINATION_IP_FIELD_NAME, SOURCE_IP_FIELD_NAME } from '../../../../ip';
+import { ID_FIELD_NAME } from '../../../../../../common/components/event_details/event_id';
+import {
+  DESTINATION_IP_FIELD_NAME,
+  SOURCE_IP_FIELD_NAME,
+} from '../../../../../../network/components/ip';
 import { JA3_HASH_FIELD_NAME } from '../../../../ja3_fingerprint';
 import { Netflow } from '../../../../netflow';
 import {
@@ -28,7 +31,10 @@ import {
   PROCESS_NAME_FIELD_NAME,
   USER_NAME_FIELD_NAME,
 } from '../../../../netflow/netflow_columns/user_process';
-import { DESTINATION_PORT_FIELD_NAME, SOURCE_PORT_FIELD_NAME } from '../../../../port';
+import {
+  DESTINATION_PORT_FIELD_NAME,
+  SOURCE_PORT_FIELD_NAME,
+} from '../../../../../../network/components/port';
 import {
   NETWORK_BYTES_FIELD_NAME,
   NETWORK_COMMUNITY_ID_FIELD_NAME,
@@ -36,7 +42,7 @@ import {
   NETWORK_PACKETS_FIELD_NAME,
   NETWORK_PROTOCOL_FIELD_NAME,
   NETWORK_TRANSPORT_FIELD_NAME,
-} from '../../../../source_destination/field_names';
+} from '../../../../../../network/components/source_destination/field_names';
 import {
   DESTINATION_GEO_CITY_NAME_FIELD_NAME,
   DESTINATION_GEO_CONTINENT_NAME_FIELD_NAME,
@@ -48,13 +54,13 @@ import {
   SOURCE_GEO_COUNTRY_ISO_CODE_FIELD_NAME,
   SOURCE_GEO_COUNTRY_NAME_FIELD_NAME,
   SOURCE_GEO_REGION_NAME_FIELD_NAME,
-} from '../../../../source_destination/geo_fields';
+} from '../../../../../../network/components/source_destination/geo_fields';
 import {
   DESTINATION_BYTES_FIELD_NAME,
   DESTINATION_PACKETS_FIELD_NAME,
   SOURCE_BYTES_FIELD_NAME,
   SOURCE_PACKETS_FIELD_NAME,
-} from '../../../../source_destination/source_destination_arrows';
+} from '../../../../../../network/components/source_destination/source_destination_arrows';
 import { RowRenderer, RowRendererContainer } from '../row_renderer';
 
 const Details = styled.div`
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/parent_process_draggable.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/parent_process_draggable.test.tsx
similarity index 95%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/parent_process_draggable.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/parent_process_draggable.test.tsx
index 684def7386da04..0a173f766ae19b 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/parent_process_draggable.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/parent_process_draggable.test.tsx
@@ -6,10 +6,10 @@
 
 import React from 'react';
 
-import { TestProviders } from '../../../../mock';
+import { TestProviders } from '../../../../../common/mock';
 
 import { ParentProcessDraggable } from './parent_process_draggable';
-import { useMountAppended } from '../../../../utils/use_mount_appended';
+import { useMountAppended } from '../../../../../common/utils/use_mount_appended';
 
 describe('ParentProcessDraggable', () => {
   const mount = useMountAppended();
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/parent_process_draggable.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/parent_process_draggable.tsx
similarity index 96%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/parent_process_draggable.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/parent_process_draggable.tsx
index 1402743ef8a519..12d23e2f0b604f 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/parent_process_draggable.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/parent_process_draggable.tsx
@@ -6,7 +6,7 @@
 
 import React from 'react';
 
-import { DraggableBadge } from '../../../draggables';
+import { DraggableBadge } from '../../../../../common/components/draggables';
 
 import { isNillEmptyOrNotFinite, TokensFlexItem } from './helpers';
 
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/parse_query_value.test.ts b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/parse_query_value.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/parse_query_value.test.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/parse_query_value.test.ts
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/parse_query_value.ts b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/parse_query_value.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/parse_query_value.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/parse_query_value.ts
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/parse_value.test.ts b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/parse_value.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/parse_value.test.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/parse_value.test.ts
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/parse_value.ts b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/parse_value.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/parse_value.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/parse_value.ts
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/plain_column_renderer.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/plain_column_renderer.test.tsx
similarity index 96%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/plain_column_renderer.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/plain_column_renderer.test.tsx
index 8a22307767a40b..b80b3cf9a375a8 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/plain_column_renderer.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/plain_column_renderer.test.tsx
@@ -8,10 +8,10 @@ import { shallow } from 'enzyme';
 import { cloneDeep } from 'lodash/fp';
 import React from 'react';
 
-import { TimelineNonEcsData } from '../../../../graphql/types';
-import { defaultHeaders, mockTimelineData, TestProviders } from '../../../../mock';
-import { getEmptyValue } from '../../../empty_value';
-import { useMountAppended } from '../../../../utils/use_mount_appended';
+import { TimelineNonEcsData } from '../../../../../graphql/types';
+import { defaultHeaders, mockTimelineData, TestProviders } from '../../../../../common/mock';
+import { getEmptyValue } from '../../../../../common/components/empty_value';
+import { useMountAppended } from '../../../../../common/utils/use_mount_appended';
 
 import { plainColumnRenderer } from './plain_column_renderer';
 import { getValues, deleteItemIdx, findItem } from './helpers';
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/plain_column_renderer.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/plain_column_renderer.tsx
similarity index 88%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/plain_column_renderer.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/plain_column_renderer.tsx
index f6a61889c501b7..d2881382b17014 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/plain_column_renderer.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/plain_column_renderer.tsx
@@ -7,9 +7,9 @@
 import { head } from 'lodash/fp';
 import React from 'react';
 
-import { TimelineNonEcsData } from '../../../../graphql/types';
-import { ColumnHeaderOptions } from '../../../../store/timeline/model';
-import { getEmptyTagValue } from '../../../empty_value';
+import { TimelineNonEcsData } from '../../../../../graphql/types';
+import { ColumnHeaderOptions } from '../../../../../timelines/store/timeline/model';
+import { getEmptyTagValue } from '../../../../../common/components/empty_value';
 import { ColumnRenderer } from './column_renderer';
 import { FormattedFieldValue } from './formatted_field';
 import { parseValue } from './parse_value';
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/plain_row_renderer.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/plain_row_renderer.test.tsx
similarity index 88%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/plain_row_renderer.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/plain_row_renderer.test.tsx
index 467f507e8be7d6..82d42988ef34f7 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/plain_row_renderer.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/plain_row_renderer.test.tsx
@@ -10,9 +10,9 @@ import { cloneDeep } from 'lodash';
 import React from 'react';
 import { ThemeProvider } from 'styled-components';
 
-import { mockBrowserFields } from '../../../../containers/source/mock';
-import { Ecs } from '../../../../graphql/types';
-import { mockTimelineData } from '../../../../mock';
+import { mockBrowserFields } from '../../../../../common/containers/source/mock';
+import { Ecs } from '../../../../../graphql/types';
+import { mockTimelineData } from '../../../../../common/mock';
 import { plainRowRenderer } from './plain_row_renderer';
 
 describe('plain_row_renderer', () => {
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/plain_row_renderer.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/plain_row_renderer.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/plain_row_renderer.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/plain_row_renderer.tsx
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/process_draggable.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/process_draggable.test.tsx
similarity index 99%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/process_draggable.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/process_draggable.test.tsx
index 8cc7323ed358f8..91ae94940f7f4f 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/process_draggable.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/process_draggable.test.tsx
@@ -7,9 +7,9 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 
-import { TestProviders } from '../../../../mock';
+import { TestProviders } from '../../../../../common/mock';
 import { ProcessDraggable, ProcessDraggableWithNonExistentProcess } from './process_draggable';
-import { useMountAppended } from '../../../../utils/use_mount_appended';
+import { useMountAppended } from '../../../../../common/utils/use_mount_appended';
 
 describe('ProcessDraggable', () => {
   const mount = useMountAppended();
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/process_draggable.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/process_draggable.tsx
similarity index 97%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/process_draggable.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/process_draggable.tsx
index 35512c60629dd0..6e900fb3cab4d7 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/process_draggable.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/process_draggable.tsx
@@ -6,7 +6,7 @@
 
 import React from 'react';
 
-import { DraggableBadge } from '../../../draggables';
+import { DraggableBadge } from '../../../../../common/components/draggables';
 
 import { isNillEmptyOrNotFinite } from './helpers';
 import * as i18n from './translations';
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/process_hash.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/process_hash.test.tsx
similarity index 94%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/process_hash.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/process_hash.test.tsx
index 08a9d29967db27..55cc61edb064e1 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/process_hash.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/process_hash.test.tsx
@@ -6,8 +6,8 @@
 
 import React from 'react';
 
-import { TestProviders } from '../../../../mock';
-import { useMountAppended } from '../../../../utils/use_mount_appended';
+import { TestProviders } from '../../../../../common/mock';
+import { useMountAppended } from '../../../../../common/utils/use_mount_appended';
 
 import { ProcessHash } from './process_hash';
 
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/process_hash.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/process_hash.tsx
similarity index 96%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/process_hash.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/process_hash.tsx
index b6696d38dc1c53..9658ed89a60877 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/process_hash.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/process_hash.tsx
@@ -8,7 +8,7 @@ import { EuiFlexGroup } from '@elastic/eui';
 import React from 'react';
 import styled from 'styled-components';
 
-import { DraggableBadge } from '../../../draggables';
+import { DraggableBadge } from '../../../../../common/components/draggables';
 
 import { isNillEmptyOrNotFinite, TokensFlexItem } from './helpers';
 
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/row_renderer.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/row_renderer.tsx
similarity index 87%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/row_renderer.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/row_renderer.tsx
index 2d9f877fe4af0d..5cee0a0118dd2e 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/row_renderer.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/row_renderer.tsx
@@ -6,8 +6,8 @@
 
 import React from 'react';
 
-import { BrowserFields } from '../../../../containers/source';
-import { Ecs } from '../../../../graphql/types';
+import { BrowserFields } from '../../../../../common/containers/source';
+import { Ecs } from '../../../../../graphql/types';
 import { EventsTrSupplement } from '../../styles';
 
 interface RowRendererContainerProps {
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/suricata/__snapshots__/suricata_details.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/suricata/__snapshots__/suricata_details.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/suricata/__snapshots__/suricata_details.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/suricata/__snapshots__/suricata_details.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/suricata/__snapshots__/suricata_row_renderer.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/suricata/__snapshots__/suricata_row_renderer.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/suricata/__snapshots__/suricata_row_renderer.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/suricata/__snapshots__/suricata_row_renderer.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/suricata/__snapshots__/suricata_signature.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/suricata/__snapshots__/suricata_signature.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/suricata/__snapshots__/suricata_signature.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/suricata/__snapshots__/suricata_signature.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_details.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/suricata/suricata_details.test.tsx
similarity index 83%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_details.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/suricata/suricata_details.test.tsx
index 027aa0df8bcdd3..d5040cb2523704 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_details.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/suricata/suricata_details.test.tsx
@@ -7,10 +7,10 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 
-import { mockBrowserFields } from '../../../../../containers/source/mock';
-import { mockTimelineData } from '../../../../../mock';
-import { TestProviders } from '../../../../../mock/test_providers';
-import { useMountAppended } from '../../../../../utils/use_mount_appended';
+import { mockBrowserFields } from '../../../../../../common/containers/source/mock';
+import { mockTimelineData } from '../../../../../../common/mock';
+import { TestProviders } from '../../../../../../common/mock/test_providers';
+import { useMountAppended } from '../../../../../../common/utils/use_mount_appended';
 import { SuricataDetails } from './suricata_details';
 
 describe('SuricataDetails', () => {
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_details.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/suricata/suricata_details.tsx
similarity index 91%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_details.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/suricata/suricata_details.tsx
index 17f5f236265edf..c21b609a0f91e9 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_details.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/suricata/suricata_details.tsx
@@ -9,8 +9,8 @@ import { get } from 'lodash/fp';
 import React from 'react';
 import styled from 'styled-components';
 
-import { BrowserFields } from '../../../../../containers/source';
-import { Ecs } from '../../../../../graphql/types';
+import { BrowserFields } from '../../../../../../common/containers/source';
+import { Ecs } from '../../../../../../graphql/types';
 
 import { NetflowRenderer } from '../netflow';
 import { SuricataSignature } from './suricata_signature';
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_links.test.ts b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/suricata/suricata_links.test.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_links.test.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/suricata/suricata_links.test.ts
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_links.ts b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/suricata/suricata_links.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_links.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/suricata/suricata_links.ts
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_refs.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/suricata/suricata_refs.tsx
similarity index 92%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_refs.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/suricata/suricata_refs.tsx
index dd773bb88ef686..08992216bf74d4 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_refs.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/suricata/suricata_refs.tsx
@@ -8,7 +8,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiLink } from '@elastic/eui';
 import React from 'react';
 import styled from 'styled-components';
 
-import { ExternalLinkIcon } from '../../../../external_link_icon';
+import { ExternalLinkIcon } from '../../../../../../common/components/external_link_icon';
 import { getLinksFromSignature } from './suricata_links';
 
 const LinkEuiFlexItem = styled(EuiFlexItem)`
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_row_renderer.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/suricata/suricata_row_renderer.test.tsx
similarity index 85%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_row_renderer.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/suricata/suricata_row_renderer.test.tsx
index b26d8ce3693b4c..a10cd9dc97f6d4 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_row_renderer.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/suricata/suricata_row_renderer.test.tsx
@@ -8,12 +8,12 @@ import { shallow } from 'enzyme';
 import { cloneDeep } from 'lodash/fp';
 import React from 'react';
 
-import { mockBrowserFields } from '../../../../../containers/source/mock';
-import { Ecs } from '../../../../../graphql/types';
-import { mockTimelineData } from '../../../../../mock';
-import { TestProviders } from '../../../../../mock/test_providers';
+import { mockBrowserFields } from '../../../../../../common/containers/source/mock';
+import { Ecs } from '../../../../../../graphql/types';
+import { mockTimelineData } from '../../../../../../common/mock';
+import { TestProviders } from '../../../../../../common/mock/test_providers';
 import { suricataRowRenderer } from './suricata_row_renderer';
-import { useMountAppended } from '../../../../../utils/use_mount_appended';
+import { useMountAppended } from '../../../../../../common/utils/use_mount_appended';
 
 describe('suricata_row_renderer', () => {
   const mount = useMountAppended();
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_row_renderer.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/suricata/suricata_row_renderer.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_row_renderer.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/suricata/suricata_row_renderer.tsx
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_signature.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/suricata/suricata_signature.test.tsx
similarity index 93%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_signature.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/suricata/suricata_signature.test.tsx
index beae16af558ed5..245e538f691933 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_signature.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/suricata/suricata_signature.test.tsx
@@ -7,8 +7,8 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 
-import { TestProviders } from '../../../../../mock';
-import { useMountAppended } from '../../../../../utils/use_mount_appended';
+import { TestProviders } from '../../../../../../common/mock';
+import { useMountAppended } from '../../../../../../common/utils/use_mount_appended';
 import {
   SuricataSignature,
   Tokens,
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_signature.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/suricata/suricata_signature.tsx
similarity index 87%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_signature.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/suricata/suricata_signature.tsx
index 66c559729cccdf..3ae88a1e7c57df 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_signature.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/suricata/suricata_signature.tsx
@@ -8,15 +8,18 @@ import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
 import React from 'react';
 import styled from 'styled-components';
 
-import { DragEffects, DraggableWrapper } from '../../../../drag_and_drop/draggable_wrapper';
-import { escapeDataProviderId } from '../../../../drag_and_drop/helpers';
-import { ExternalLinkIcon } from '../../../../external_link_icon';
-import { GoogleLink } from '../../../../links';
-import { Provider } from '../../../../timeline/data_providers/provider';
+import {
+  DragEffects,
+  DraggableWrapper,
+} from '../../../../../../common/components/drag_and_drop/draggable_wrapper';
+import { escapeDataProviderId } from '../../../../../../common/components/drag_and_drop/helpers';
+import { ExternalLinkIcon } from '../../../../../../common/components/external_link_icon';
+import { GoogleLink } from '../../../../../../common/components/links';
+import { Provider } from '../../../data_providers/provider';
 
 import { TokensFlexItem } from '../helpers';
 import { getBeginningTokens } from './suricata_links';
-import { DefaultDraggable } from '../../../../draggables';
+import { DefaultDraggable } from '../../../../../../common/components/draggables';
 import { IS_OPERATOR } from '../../../data_providers/data_provider';
 
 export const SURICATA_SIGNATURE_FIELD_NAME = 'suricata.eve.alert.signature';
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/system/__snapshots__/auth_ssh.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/__snapshots__/auth_ssh.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/system/__snapshots__/auth_ssh.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/__snapshots__/auth_ssh.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/system/__snapshots__/generic_details.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/__snapshots__/generic_details.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/system/__snapshots__/generic_details.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/__snapshots__/generic_details.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/system/__snapshots__/generic_file_details.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/__snapshots__/generic_file_details.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/system/__snapshots__/generic_file_details.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/__snapshots__/generic_file_details.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/system/__snapshots__/generic_row_renderer.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/__snapshots__/generic_row_renderer.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/system/__snapshots__/generic_row_renderer.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/__snapshots__/generic_row_renderer.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/system/__snapshots__/package.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/__snapshots__/package.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/system/__snapshots__/package.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/__snapshots__/package.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/system/auth_ssh.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/auth_ssh.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/system/auth_ssh.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/auth_ssh.test.tsx
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/system/auth_ssh.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/auth_ssh.tsx
similarity index 93%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/system/auth_ssh.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/auth_ssh.tsx
index 0ff2eec35314d8..431f1b5e974d59 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/system/auth_ssh.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/auth_ssh.tsx
@@ -6,7 +6,7 @@
 
 import React from 'react';
 
-import { DraggableBadge } from '../../../../draggables';
+import { DraggableBadge } from '../../../../../../common/components/draggables';
 import { TokensFlexItem } from '../helpers';
 
 interface Props {
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/generic_details.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/generic_details.test.tsx
new file mode 100644
index 00000000000000..e622c91e8b8700
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/generic_details.test.tsx
@@ -0,0 +1,542 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import React from 'react';
+
+import { BrowserFields } from '../../../../../../common/containers/source';
+import { mockBrowserFields } from '../../../../../../common/containers/source/mock';
+import { mockTimelineData, TestProviders } from '../../../../../../common/mock';
+import { SystemGenericDetails, SystemGenericLine } from './generic_details';
+import { useMountAppended } from '../../../../../../common/utils/use_mount_appended';
+
+describe('SystemGenericDetails', () => {
+  const mount = useMountAppended();
+
+  describe('rendering', () => {
+    test('it renders the default SystemGenericDetails', () => {
+      // 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(
+        <SystemGenericDetails
+          contextId="[contextid-123]"
+          text="[generic-text-123]"
+          browserFields={browserFields}
+          data={mockTimelineData[28].ecs}
+          timelineId="test"
+        />
+      );
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    test('it returns system rendering if the data does contain system data', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <SystemGenericDetails
+            contextId="[contextid-123]"
+            text="[generic-text-123]"
+            browserFields={mockBrowserFields}
+            data={mockTimelineData[28].ecs}
+            timelineId="test"
+          />
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        'Braden@zeek-london[generic-text-123](6278)with resultfailureSource128.199.212.120'
+      );
+    });
+  });
+
+  describe('#SystemGenericLine', () => {
+    test('it returns pretty output if you send in all your happy path data', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericLine
+              contextId="[context-123]"
+              hostName="[hostname-123]"
+              id="[id-123]"
+              message="[message-123]"
+              outcome="[outcome-123]"
+              packageName="[packageName-123]"
+              packageSummary="[packageSummary-123]"
+              packageVersion="[packageVersion-123]"
+              processExecutable="[packageExecutable=123]"
+              processPid={123}
+              processName="[processName-123]"
+              sshMethod="[sshMethod-123]"
+              sshSignature="[sshSignature-123]"
+              text="[generic-text-123]"
+              userDomain="[userDomain-123]"
+              userName="[username-123]"
+              workingDirectory="[working-directory-123]"
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        '[username-123]\\[userDomain-123]@[hostname-123]in[working-directory-123][generic-text-123][processName-123](123)with result[outcome-123][sshSignature-123][sshMethod-123][packageName-123][packageVersion-123][packageSummary-123][message-123]'
+      );
+    });
+
+    test('it returns nothing if data is all null', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericLine
+              contextId="[context-123]"
+              hostName={null}
+              id="[id-123]"
+              message={null}
+              outcome={null}
+              packageName={null}
+              packageSummary={null}
+              packageVersion={null}
+              processExecutable={null}
+              processPid={null}
+              processName={null}
+              sshMethod={null}
+              sshSignature={null}
+              text={null}
+              userDomain={null}
+              userName={null}
+              workingDirectory={null}
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual('');
+    });
+
+    test('it can return only the host name', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericLine
+              contextId="[context-123]"
+              hostName="[hostname-123]"
+              id="[id-123]"
+              message={null}
+              outcome={null}
+              packageName={null}
+              packageSummary={null}
+              packageVersion={null}
+              processExecutable={null}
+              processPid={null}
+              processName={null}
+              sshMethod={null}
+              sshSignature={null}
+              text={null}
+              userDomain={null}
+              userName={null}
+              workingDirectory={null}
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual('[hostname-123]');
+    });
+
+    test('it can return the host, message', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericLine
+              contextId="[context-123]"
+              hostName="[hostname-123]"
+              id="[id-123]"
+              message="[message-123]"
+              outcome={null}
+              packageName={null}
+              packageSummary={null}
+              packageVersion={null}
+              processExecutable={null}
+              processPid={null}
+              processName={null}
+              sshMethod={null}
+              sshSignature={null}
+              text={null}
+              userDomain={null}
+              userName={null}
+              workingDirectory={null}
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual('[hostname-123][message-123]');
+    });
+
+    test('it can return the host, message, outcome', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericLine
+              contextId="[context-123]"
+              hostName="[hostname-123]"
+              id="[id-123]"
+              message="[message-123]"
+              outcome="[outcome-123]"
+              packageName={null}
+              packageSummary={null}
+              packageVersion={null}
+              processExecutable={null}
+              processPid={null}
+              processName={null}
+              sshMethod={null}
+              sshSignature={null}
+              text={null}
+              userDomain={null}
+              userName={null}
+              workingDirectory={null}
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual('[hostname-123]with result[outcome-123][message-123]');
+    });
+
+    test('it can return the host, message, outcome, packageName', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericLine
+              contextId="[context-123]"
+              hostName="[hostname-123]"
+              id="[id-123]"
+              message="[message-123]"
+              outcome="[outcome-123]"
+              packageName="[packageName-123]"
+              packageSummary={null}
+              packageVersion={null}
+              processExecutable={null}
+              processPid={null}
+              processName={null}
+              sshMethod={null}
+              sshSignature={null}
+              text={null}
+              userDomain={null}
+              userName={null}
+              workingDirectory={null}
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        '[hostname-123]with result[outcome-123][packageName-123][message-123]'
+      );
+    });
+
+    test('it can return the host, message, outcome, packageName, pacakgeSummary', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericLine
+              contextId="[context-123]"
+              hostName="[hostname-123]"
+              id="[id-123]"
+              message="[message-123]"
+              outcome="[outcome-123]"
+              packageName="[packageName-123]"
+              packageSummary="[packageSummary-123]"
+              packageVersion={null}
+              processExecutable={null}
+              processPid={null}
+              processName={null}
+              sshMethod={null}
+              sshSignature={null}
+              text={null}
+              userDomain={null}
+              userName={null}
+              workingDirectory={null}
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        '[hostname-123]with result[outcome-123][packageName-123][packageSummary-123][message-123]'
+      );
+    });
+
+    test('it can return the host, message, outcome, packageName, pacakgeSummary, packageVersion', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericLine
+              contextId="[context-123]"
+              hostName="[hostname-123]"
+              id="[id-123]"
+              message="[message-123]"
+              outcome="[outcome-123]"
+              packageName="[packageName-123]"
+              packageSummary="[packageSummary-123]"
+              packageVersion="[packageVersion-123]"
+              processExecutable={null}
+              processPid={null}
+              processName={null}
+              sshMethod={null}
+              sshSignature={null}
+              text={null}
+              userDomain={null}
+              userName={null}
+              workingDirectory={null}
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        '[hostname-123]with result[outcome-123][packageName-123][packageVersion-123][packageSummary-123][message-123]'
+      );
+    });
+
+    test('it can return the host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericLine
+              contextId="[context-123]"
+              hostName="[hostname-123]"
+              id="[id-123]"
+              message="[message-123]"
+              outcome="[outcome-123]"
+              packageName="[packageName-123]"
+              packageSummary="[packageSummary-123]"
+              packageVersion="[packageVersion-123]"
+              processExecutable="[processExecutable-123]"
+              processPid={null}
+              processName={null}
+              sshMethod={null}
+              sshSignature={null}
+              text={null}
+              userDomain={null}
+              userName={null}
+              workingDirectory={null}
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        '[hostname-123][processExecutable-123]with result[outcome-123][packageName-123][packageVersion-123][packageSummary-123][message-123]'
+      );
+    });
+
+    test('it can return the host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processPid', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericLine
+              contextId="[context-123]"
+              hostName="[hostname-123]"
+              id="[id-123]"
+              message="[message-123]"
+              outcome="[outcome-123]"
+              packageName="[packageName-123]"
+              packageSummary="[packageSummary-123]"
+              packageVersion="[packageVersion-123]"
+              processExecutable="[processExecutable-123]"
+              processPid={123}
+              processName={null}
+              sshMethod={null}
+              sshSignature={null}
+              text={null}
+              userDomain={null}
+              userName={null}
+              workingDirectory={null}
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        '[hostname-123][processExecutable-123](123)with result[outcome-123][packageName-123][packageVersion-123][packageSummary-123][message-123]'
+      );
+    });
+
+    test('it can return the host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processPid, processName', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericLine
+              contextId="[context-123]"
+              hostName="[hostname-123]"
+              id="[id-123]"
+              message="[message-123]"
+              outcome="[outcome-123]"
+              packageName="[packageName-123]"
+              packageSummary="[packageSummary-123]"
+              packageVersion="[packageVersion-123]"
+              processExecutable="[processExecutable-123]"
+              processPid={123}
+              processName="[processName-123]"
+              sshMethod={null}
+              sshSignature={null}
+              text={null}
+              userDomain={null}
+              userName={null}
+              workingDirectory={null}
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        '[hostname-123][processName-123](123)with result[outcome-123][packageName-123][packageVersion-123][packageSummary-123][message-123]'
+      );
+    });
+
+    test('it can return the host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processPid, processName, sshMethod', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericLine
+              contextId="[context-123]"
+              hostName="[hostname-123]"
+              id="[id-123]"
+              message="[message-123]"
+              outcome="[outcome-123]"
+              packageName="[packageName-123]"
+              packageSummary="[packageSummary-123]"
+              packageVersion="[packageVersion-123]"
+              processExecutable="[processExecutable-123]"
+              processPid={123}
+              processName="[processName-123]"
+              sshMethod="[sshMethod-123]"
+              sshSignature={null}
+              text={null}
+              userDomain={null}
+              userName={null}
+              workingDirectory={null}
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        '[hostname-123][processName-123](123)with result[outcome-123][sshMethod-123][packageName-123][packageVersion-123][packageSummary-123][message-123]'
+      );
+    });
+
+    test('it can return the host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processPid, processName, sshMethod, sshSignature', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericLine
+              contextId="[context-123]"
+              hostName="[hostname-123]"
+              id="[id-123]"
+              message="[message-123]"
+              outcome="[outcome-123]"
+              packageName="[packageName-123]"
+              packageSummary="[packageSummary-123]"
+              packageVersion="[packageVersion-123]"
+              processExecutable="[processExecutable-123]"
+              processPid={123}
+              processName="[processName-123]"
+              sshMethod="[sshMethod-123]"
+              sshSignature="[sshSignature-123]"
+              text={null}
+              userDomain={null}
+              userName={null}
+              workingDirectory={null}
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        '[hostname-123][processName-123](123)with result[outcome-123][sshSignature-123][sshMethod-123][packageName-123][packageVersion-123][packageSummary-123][message-123]'
+      );
+    });
+
+    test('it can return the host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processPid, processName, sshMethod, sshSignature, text', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericLine
+              contextId="[context-123]"
+              hostName="[hostname-123]"
+              id="[id-123]"
+              message="[message-123]"
+              outcome="[outcome-123]"
+              packageName="[packageName-123]"
+              packageSummary="[packageSummary-123]"
+              packageVersion="[packageVersion-123]"
+              processExecutable="[processExecutable-123]"
+              processPid={123}
+              processName="[processName-123]"
+              sshMethod="[sshMethod-123]"
+              sshSignature="[sshSignature-123]"
+              text="[text-123]"
+              userDomain={null}
+              userName={null}
+              workingDirectory={null}
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        '[hostname-123][text-123][processName-123](123)with result[outcome-123][sshSignature-123][sshMethod-123][packageName-123][packageVersion-123][packageSummary-123][message-123]'
+      );
+    });
+
+    test('it can return the host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processPid, processName, sshMethod, sshSignature, text, userDomain, username', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericLine
+              contextId="[context-123]"
+              hostName="[hostname-123]"
+              id="[id-123]"
+              message="[message-123]"
+              outcome="[outcome-123]"
+              packageName="[packageName-123]"
+              packageSummary="[packageSummary-123]"
+              packageVersion="[packageVersion-123]"
+              processExecutable="[processExecutable-123]"
+              processPid={123}
+              processName="[processName-123]"
+              sshMethod="[sshMethod-123]"
+              sshSignature="[sshSignature-123]"
+              text="[text-123]"
+              userDomain="[userDomain-123]"
+              userName="[username-123]"
+              workingDirectory={null}
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        '[username-123]\\[userDomain-123]@[hostname-123][text-123][processName-123](123)with result[outcome-123][sshSignature-123][sshMethod-123][packageName-123][packageVersion-123][packageSummary-123][message-123]'
+      );
+    });
+
+    test('it can return the host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processPid, processName, sshMethod, sshSignature, text, userDomain, username, working-directory', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericLine
+              contextId="[context-123]"
+              hostName="[hostname-123]"
+              id="[id-123]"
+              message="[message-123]"
+              outcome="[outcome-123]"
+              packageName="[packageName-123]"
+              packageSummary="[packageSummary-123]"
+              packageVersion="[packageVersion-123]"
+              processExecutable="[processExecutable-123]"
+              processPid={123}
+              processName="[processName-123]"
+              sshMethod="[sshMethod-123]"
+              sshSignature="[sshSignature-123]"
+              text="[text-123]"
+              userDomain="[userDomain-123]"
+              userName="[username-123]"
+              workingDirectory="[working-directory-123]"
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        '[username-123]\\[userDomain-123]@[hostname-123]in[working-directory-123][text-123][processName-123](123)with result[outcome-123][sshSignature-123][sshMethod-123][packageName-123][packageVersion-123][packageSummary-123][message-123]'
+      );
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/generic_details.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/generic_details.tsx
new file mode 100644
index 00000000000000..e849732d07f6ff
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/generic_details.tsx
@@ -0,0 +1,189 @@
+/*
+ * 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 { EuiFlexGroup, EuiSpacer } from '@elastic/eui';
+import { get } from 'lodash/fp';
+import React from 'react';
+
+import { BrowserFields } from '../../../../../../common/containers/source';
+import { Ecs } from '../../../../../../graphql/types';
+import { DraggableBadge } from '../../../../../../common/components/draggables';
+import { OverflowField } from '../../../../../../common/components/tables/helpers';
+
+import * as i18n from './translations';
+import { NetflowRenderer } from '../netflow';
+import { UserHostWorkingDir } from '../user_host_working_dir';
+import { Details, TokensFlexItem } from '../helpers';
+import { ProcessDraggable } from '../process_draggable';
+import { Package } from './package';
+import { AuthSsh } from './auth_ssh';
+import { Badge } from '../../../../../../common/components/page';
+
+interface Props {
+  contextId: string;
+  hostName: string | null | undefined;
+  id: string;
+  message: string | null | undefined;
+  outcome: string | null | undefined;
+  packageName: string | null | undefined;
+  packageSummary: string | null | undefined;
+  packageVersion: string | null | undefined;
+  processExecutable: string | null | undefined;
+  processPid: number | null | undefined;
+  processName: string | null | undefined;
+  sshMethod: string | null | undefined;
+  sshSignature: string | null | undefined;
+  text: string | null | undefined;
+  userDomain: string | null | undefined;
+  userName: string | null | undefined;
+  workingDirectory: string | null | undefined;
+}
+
+export const SystemGenericLine = React.memo<Props>(
+  ({
+    contextId,
+    hostName,
+    id,
+    message,
+    outcome,
+    packageName,
+    packageSummary,
+    packageVersion,
+    processPid,
+    processName,
+    processExecutable,
+    sshSignature,
+    sshMethod,
+    text,
+    userDomain,
+    userName,
+    workingDirectory,
+  }) => (
+    <>
+      <EuiFlexGroup alignItems="center" justifyContent="center" gutterSize="none" wrap={true}>
+        <UserHostWorkingDir
+          contextId={contextId}
+          eventId={id}
+          userDomain={userDomain}
+          userName={userName}
+          hostName={hostName}
+          workingDirectory={workingDirectory}
+        />
+        <TokensFlexItem grow={false} component="span">
+          {text}
+        </TokensFlexItem>
+        <TokensFlexItem grow={false} component="span">
+          <ProcessDraggable
+            contextId={contextId}
+            endgamePid={undefined}
+            endgameProcessName={undefined}
+            eventId={id}
+            processPid={processPid}
+            processName={processName}
+            processExecutable={processExecutable}
+          />
+        </TokensFlexItem>
+        {outcome != null && (
+          <TokensFlexItem grow={false} component="span">
+            {i18n.WITH_RESULT}
+          </TokensFlexItem>
+        )}
+        <TokensFlexItem grow={false} component="span">
+          <DraggableBadge
+            contextId={contextId}
+            eventId={id}
+            field="event.outcome"
+            queryValue={outcome}
+            value={outcome}
+          />
+        </TokensFlexItem>
+        <AuthSsh
+          contextId={contextId}
+          eventId={id}
+          sshSignature={sshSignature}
+          sshMethod={sshMethod}
+        />
+        <Package
+          contextId={contextId}
+          eventId={id}
+          packageName={packageName}
+          packageSummary={packageSummary}
+          packageVersion={packageVersion}
+        />
+      </EuiFlexGroup>
+      {message != null && (
+        <>
+          <EuiSpacer size="xs" />
+          <EuiFlexGroup justifyContent="center" gutterSize="none" wrap={true}>
+            <TokensFlexItem grow={false} component="span">
+              <Badge iconType="editorComment" color="hollow" title="">
+                <OverflowField value={message} />
+              </Badge>
+            </TokensFlexItem>
+          </EuiFlexGroup>
+        </>
+      )}
+    </>
+  )
+);
+
+SystemGenericLine.displayName = 'SystemGenericLine';
+
+interface GenericDetailsProps {
+  browserFields: BrowserFields;
+  data: Ecs;
+  contextId: string;
+  text: string;
+  timelineId: string;
+}
+
+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;
+    const hostName: string | null | undefined = get('host.name[0]', data);
+    const userDomain: string | null | undefined = get('user.domain[0]', data);
+    const userName: string | null | undefined = get('user.name[0]', data);
+    const outcome: string | null | undefined = get('event.outcome[0]', data);
+    const packageName: string | null | undefined = get('system.audit.package.name[0]', data);
+    const packageSummary: string | null | undefined = get('system.audit.package.summary[0]', data);
+    const packageVersion: string | null | undefined = get('system.audit.package.version[0]', data);
+    const processPid: number | null | undefined = get('process.pid[0]', data);
+    const processName: string | null | undefined = get('process.name[0]', data);
+    const processExecutable: string | null | undefined = get('process.executable[0]', data);
+    const sshSignature: string | null | undefined = get('system.auth.ssh.signature[0]', data);
+    const sshMethod: string | null | undefined = get('system.auth.ssh.method[0]', data);
+    const workingDirectory: string | null | undefined = get('process.working_directory[0]', data);
+
+    return (
+      <Details>
+        <SystemGenericLine
+          contextId={contextId}
+          hostName={hostName}
+          id={id}
+          message={message}
+          outcome={outcome}
+          packageName={packageName}
+          packageSummary={packageSummary}
+          packageVersion={packageVersion}
+          processExecutable={processExecutable}
+          processPid={processPid}
+          processName={processName}
+          sshMethod={sshMethod}
+          sshSignature={sshSignature}
+          text={text}
+          userDomain={userDomain}
+          userName={userName}
+          workingDirectory={workingDirectory}
+        />
+        <EuiSpacer size="s" />
+        <NetflowRenderer data={data} timelineId={timelineId} />
+      </Details>
+    );
+  }
+);
+
+SystemGenericDetails.displayName = 'SystemGenericDetails';
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/generic_file_details.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/generic_file_details.test.tsx
new file mode 100644
index 00000000000000..d8784233b664dc
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/generic_file_details.test.tsx
@@ -0,0 +1,1599 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import React from 'react';
+
+import { BrowserFields } from '../../../../../../common/containers/source';
+import { mockBrowserFields } from '../../../../../../common/containers/source/mock';
+import { mockTimelineData, TestProviders } from '../../../../../../common/mock';
+import { SystemGenericFileDetails, SystemGenericFileLine } from './generic_file_details';
+import { useMountAppended } from '../../../../../../common/utils/use_mount_appended';
+
+describe('SystemGenericFileDetails', () => {
+  const mount = useMountAppended();
+
+  describe('rendering', () => {
+    test('it renders the default SystemGenericDetails', () => {
+      // 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(
+        <SystemGenericFileDetails
+          contextId="[contextid-123]"
+          text="[generic-text-123]"
+          browserFields={browserFields}
+          data={mockTimelineData[29].ecs}
+          timelineId="test"
+        />
+      );
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    test('it returns system rendering if the data does contain system data', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <SystemGenericFileDetails
+            contextId="[contextid-123]"
+            text="[generic-text-123]"
+            browserFields={mockBrowserFields}
+            data={mockTimelineData[29].ecs}
+            timelineId="test"
+          />
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        'Evan@zeek-london[generic-text-123](6278)with resultfailureSource128.199.212.120'
+      );
+    });
+  });
+
+  describe('#SystemGenericFileLine', () => {
+    test('it returns pretty output if you send in all your happy path data', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericFileLine
+              id="[id-123]"
+              contextId="[context-123]"
+              endgameExitCode="[endgameExitCode-123]"
+              endgameFileName="[endgameFileName-123]"
+              endgameFilePath="[endgameFilePath-123]"
+              endgameParentProcessName="[endgameParentProcessName-123]"
+              endgamePid={789}
+              endgameProcessName="[endgameProcessName-123]"
+              eventAction="[eventAction-123]"
+              fileName="[fileName-123]"
+              filePath="[filePath-123]"
+              hostName="[hostname-123]"
+              message="[message-123]"
+              outcome="[outcome-123]"
+              processTitle="[some-title-123]"
+              args={['[arg-1]', '[arg-2]', '[arg-3]']}
+              packageName="[packageName-123]"
+              packageSummary="[packageSummary-123]"
+              packageVersion="[packageVersion-123]"
+              processExecutable="[packageExecutable=123]"
+              processHashMd5="[processHashMd5-123]"
+              processHashSha1="[processHashSha1-123]"
+              processHashSha256="[processHashSha256-123]"
+              processPid={123}
+              processPpid={456}
+              processName="[processName-123]"
+              showMessage={true}
+              sshMethod="[sshMethod-123]"
+              sshSignature="[sshSignature-123]"
+              text="[generic-text-123]"
+              userDomain="[userDomain-123]"
+              userName="[username-123]"
+              workingDirectory="[working-directory-123]"
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        '[username-123]\\[userDomain-123]@[hostname-123]in[working-directory-123][generic-text-123][fileName-123]in[filePath-123][processName-123](123)[arg-1][arg-2][arg-3][some-title-123]with exit code[endgameExitCode-123]via parent process[endgameParentProcessName-123](456)with result[outcome-123][sshSignature-123][sshMethod-123][packageName-123][packageVersion-123][packageSummary-123][processHashSha256-123][processHashSha1-123][processHashMd5-123][message-123]'
+      );
+    });
+
+    test('it returns nothing if data is all null', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericFileLine
+              contextId="[context-123]"
+              endgameExitCode={null}
+              endgameFileName={null}
+              endgameFilePath={null}
+              endgameParentProcessName={null}
+              endgamePid={null}
+              endgameProcessName={null}
+              eventAction={null}
+              fileName={null}
+              filePath={null}
+              hostName={null}
+              id="[id-123]"
+              message={null}
+              outcome={null}
+              packageName={null}
+              packageSummary={null}
+              packageVersion={null}
+              processExecutable={null}
+              processHashMd5={null}
+              processHashSha1={null}
+              processHashSha256={null}
+              processPid={null}
+              processPpid={null}
+              processName={null}
+              showMessage={true}
+              sshMethod={null}
+              processTitle={null}
+              args={null}
+              sshSignature={null}
+              text={null}
+              userDomain={null}
+              userName={null}
+              workingDirectory={null}
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual('an unknown process');
+    });
+
+    test('it can return only the host name', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericFileLine
+              contextId="[context-123]"
+              endgameExitCode={null}
+              endgameFileName={null}
+              endgameFilePath={null}
+              endgameParentProcessName={null}
+              endgamePid={null}
+              endgameProcessName={null}
+              eventAction={null}
+              fileName={null}
+              filePath={null}
+              hostName="[hostname-123]"
+              id="[id-123]"
+              message={null}
+              outcome={null}
+              packageName={null}
+              packageSummary={null}
+              packageVersion={null}
+              processExecutable={null}
+              processHashMd5={null}
+              processHashSha1={null}
+              processHashSha256={null}
+              processPid={null}
+              processPpid={null}
+              processName={null}
+              showMessage={true}
+              sshMethod={null}
+              sshSignature={null}
+              text={null}
+              userDomain={null}
+              userName={null}
+              workingDirectory={null}
+              processTitle={null}
+              args={null}
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual('[hostname-123]an unknown process');
+    });
+
+    test('it can return the host, message', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericFileLine
+              contextId="[context-123]"
+              endgameExitCode={null}
+              endgameFileName={null}
+              endgameFilePath={null}
+              endgameParentProcessName={null}
+              endgamePid={null}
+              endgameProcessName={null}
+              eventAction={null}
+              fileName={null}
+              filePath={null}
+              hostName="[hostname-123]"
+              id="[id-123]"
+              message="[message-123]"
+              outcome={null}
+              packageName={null}
+              packageSummary={null}
+              packageVersion={null}
+              processExecutable={null}
+              processHashMd5={null}
+              processHashSha1={null}
+              processHashSha256={null}
+              processPid={null}
+              processPpid={null}
+              processName={null}
+              showMessage={true}
+              sshMethod={null}
+              sshSignature={null}
+              text={null}
+              userDomain={null}
+              userName={null}
+              workingDirectory={null}
+              processTitle={null}
+              args={null}
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual('[hostname-123]an unknown process[message-123]');
+    });
+
+    test('it can return the host, message, outcome', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericFileLine
+              contextId="[context-123]"
+              endgameExitCode={null}
+              endgameFileName={null}
+              endgameFilePath={null}
+              endgameParentProcessName={null}
+              endgamePid={null}
+              endgameProcessName={null}
+              eventAction={null}
+              fileName={null}
+              filePath={null}
+              hostName="[hostname-123]"
+              id="[id-123]"
+              message="[message-123]"
+              outcome="[outcome-123]"
+              packageName={null}
+              packageSummary={null}
+              packageVersion={null}
+              processExecutable={null}
+              processHashMd5={null}
+              processHashSha1={null}
+              processHashSha256={null}
+              processPid={null}
+              processPpid={null}
+              processName={null}
+              showMessage={true}
+              sshMethod={null}
+              sshSignature={null}
+              text={null}
+              userDomain={null}
+              userName={null}
+              workingDirectory={null}
+              processTitle={null}
+              args={null}
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        '[hostname-123]an unknown processwith result[outcome-123][message-123]'
+      );
+    });
+
+    test('it can return the host, message, outcome, packageName', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericFileLine
+              contextId="[context-123]"
+              endgameExitCode={null}
+              endgameFileName={null}
+              endgameFilePath={null}
+              endgameParentProcessName={null}
+              endgamePid={null}
+              endgameProcessName={null}
+              eventAction={null}
+              fileName={null}
+              filePath={null}
+              hostName="[hostname-123]"
+              id="[id-123]"
+              message="[message-123]"
+              outcome="[outcome-123]"
+              packageName="[packageName-123]"
+              packageSummary={null}
+              packageVersion={null}
+              processExecutable={null}
+              processHashMd5={null}
+              processHashSha1={null}
+              processHashSha256={null}
+              processPid={null}
+              processPpid={null}
+              processName={null}
+              showMessage={true}
+              sshMethod={null}
+              sshSignature={null}
+              text={null}
+              userDomain={null}
+              userName={null}
+              workingDirectory={null}
+              processTitle={null}
+              args={null}
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        '[hostname-123]an unknown processwith result[outcome-123][packageName-123][message-123]'
+      );
+    });
+
+    test('it can return the host, message, outcome, packageName, pacakgeSummary', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericFileLine
+              contextId="[context-123]"
+              endgameExitCode={null}
+              endgameFileName={null}
+              endgameFilePath={null}
+              endgameParentProcessName={null}
+              endgamePid={null}
+              endgameProcessName={null}
+              eventAction={null}
+              fileName={null}
+              filePath={null}
+              hostName="[hostname-123]"
+              id="[id-123]"
+              message="[message-123]"
+              outcome="[outcome-123]"
+              packageName="[packageName-123]"
+              packageSummary="[packageSummary-123]"
+              packageVersion={null}
+              processExecutable={null}
+              processHashMd5={null}
+              processHashSha1={null}
+              processHashSha256={null}
+              processPid={null}
+              processPpid={null}
+              processName={null}
+              showMessage={true}
+              sshMethod={null}
+              sshSignature={null}
+              text={null}
+              userDomain={null}
+              userName={null}
+              workingDirectory={null}
+              processTitle={null}
+              args={null}
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        '[hostname-123]an unknown processwith result[outcome-123][packageName-123][packageSummary-123][message-123]'
+      );
+    });
+
+    test('it can return the host, message, outcome, packageName, pacakgeSummary, packageVersion', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericFileLine
+              contextId="[context-123]"
+              endgameExitCode={null}
+              endgameFileName={null}
+              endgameFilePath={null}
+              endgameParentProcessName={null}
+              endgamePid={null}
+              endgameProcessName={null}
+              eventAction={null}
+              fileName={null}
+              filePath={null}
+              hostName="[hostname-123]"
+              id="[id-123]"
+              message="[message-123]"
+              outcome="[outcome-123]"
+              packageName="[packageName-123]"
+              packageSummary="[packageSummary-123]"
+              packageVersion="[packageVersion-123]"
+              processExecutable={null}
+              processHashMd5={null}
+              processHashSha1={null}
+              processHashSha256={null}
+              processPid={null}
+              processPpid={null}
+              processName={null}
+              showMessage={true}
+              sshMethod={null}
+              sshSignature={null}
+              text={null}
+              userDomain={null}
+              userName={null}
+              workingDirectory={null}
+              processTitle={null}
+              args={null}
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        '[hostname-123]an unknown processwith result[outcome-123][packageName-123][packageVersion-123][packageSummary-123][message-123]'
+      );
+    });
+
+    test('it can return the host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericFileLine
+              contextId="[context-123]"
+              endgameExitCode={null}
+              endgameFileName={null}
+              endgameFilePath={null}
+              endgameParentProcessName={null}
+              endgamePid={null}
+              endgameProcessName={null}
+              eventAction={null}
+              fileName={null}
+              filePath={null}
+              hostName="[hostname-123]"
+              id="[id-123]"
+              message="[message-123]"
+              outcome="[outcome-123]"
+              packageName="[packageName-123]"
+              packageSummary="[packageSummary-123]"
+              packageVersion="[packageVersion-123]"
+              processExecutable="[packageVersion-123]"
+              processHashMd5={null}
+              processHashSha1={null}
+              processHashSha256={null}
+              processPid={null}
+              processPpid={null}
+              processName={null}
+              showMessage={true}
+              sshMethod={null}
+              sshSignature={null}
+              text={null}
+              userDomain={null}
+              userName={null}
+              workingDirectory={null}
+              processTitle={null}
+              args={null}
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        '[hostname-123][packageVersion-123]with result[outcome-123][packageName-123][packageVersion-123][packageSummary-123][message-123]'
+      );
+    });
+
+    test('it can return the host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processHashMd5', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericFileLine
+              contextId="[context-123]"
+              endgameExitCode={null}
+              endgameFileName={null}
+              endgameFilePath={null}
+              endgameParentProcessName={null}
+              endgamePid={null}
+              endgameProcessName={null}
+              eventAction={null}
+              fileName={null}
+              filePath={null}
+              hostName="[hostname-123]"
+              id="[id-123]"
+              message="[message-123]"
+              outcome="[outcome-123]"
+              packageName="[packageName-123]"
+              packageSummary="[packageSummary-123]"
+              packageVersion="[packageVersion-123]"
+              processExecutable="[packageVersion-123]"
+              processHashMd5="[processHashMd5-123]"
+              processHashSha1={null}
+              processHashSha256={null}
+              processPid={null}
+              processPpid={null}
+              processName={null}
+              showMessage={true}
+              sshMethod={null}
+              sshSignature={null}
+              text={null}
+              userDomain={null}
+              userName={null}
+              workingDirectory={null}
+              processTitle={null}
+              args={null}
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        '[hostname-123][packageVersion-123]with result[outcome-123][packageName-123][packageVersion-123][packageSummary-123][processHashMd5-123][message-123]'
+      );
+    });
+
+    test('it can return the host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processHashMd5, processHashSha1', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericFileLine
+              contextId="[context-123]"
+              endgameExitCode={null}
+              endgameFileName={null}
+              endgameFilePath={null}
+              endgameParentProcessName={null}
+              endgamePid={null}
+              endgameProcessName={null}
+              eventAction={null}
+              fileName={null}
+              filePath={null}
+              hostName="[hostname-123]"
+              id="[id-123]"
+              message="[message-123]"
+              outcome="[outcome-123]"
+              packageName="[packageName-123]"
+              packageSummary="[packageSummary-123]"
+              packageVersion="[packageVersion-123]"
+              processExecutable="[packageVersion-123]"
+              processHashMd5="[processHashMd5-123]"
+              processHashSha1="[processHashSha1-123]"
+              processHashSha256={null}
+              processPid={null}
+              processPpid={null}
+              processName={null}
+              showMessage={true}
+              sshMethod={null}
+              sshSignature={null}
+              text={null}
+              userDomain={null}
+              userName={null}
+              workingDirectory={null}
+              processTitle={null}
+              args={null}
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        '[hostname-123][packageVersion-123]with result[outcome-123][packageName-123][packageVersion-123][packageSummary-123][processHashSha1-123][processHashMd5-123][message-123]'
+      );
+    });
+
+    test('it can return the host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processHashMd5, processHashSha1, processHashSha256', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericFileLine
+              contextId="[context-123]"
+              endgameExitCode={null}
+              endgameFileName={null}
+              endgameFilePath={null}
+              endgameParentProcessName={null}
+              endgamePid={null}
+              endgameProcessName={null}
+              eventAction={null}
+              fileName={null}
+              filePath={null}
+              hostName="[hostname-123]"
+              id="[id-123]"
+              message="[message-123]"
+              outcome="[outcome-123]"
+              packageName="[packageName-123]"
+              packageSummary="[packageSummary-123]"
+              packageVersion="[packageVersion-123]"
+              processExecutable="[packageVersion-123]"
+              processHashMd5="[processHashMd5-123]"
+              processHashSha1="[processHashSha1-123]"
+              processHashSha256="[processHashSha256-123]"
+              processPid={null}
+              processPpid={null}
+              processName={null}
+              showMessage={true}
+              sshMethod={null}
+              sshSignature={null}
+              text={null}
+              userDomain={null}
+              userName={null}
+              workingDirectory={null}
+              processTitle={null}
+              args={null}
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        '[hostname-123][packageVersion-123]with result[outcome-123][packageName-123][packageVersion-123][packageSummary-123][processHashSha256-123][processHashSha1-123][processHashMd5-123][message-123]'
+      );
+    });
+
+    test('it can return the host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processHashMd5, processHashSha1, processHashSha256, processPid', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericFileLine
+              contextId="[context-123]"
+              endgameExitCode={null}
+              endgameFileName={null}
+              endgameFilePath={null}
+              endgameParentProcessName={null}
+              endgamePid={null}
+              endgameProcessName={null}
+              eventAction={null}
+              fileName={null}
+              filePath={null}
+              hostName="[hostname-123]"
+              id="[id-123]"
+              message="[message-123]"
+              outcome="[outcome-123]"
+              packageName="[packageName-123]"
+              packageSummary="[packageSummary-123]"
+              packageVersion="[packageVersion-123]"
+              processExecutable="[processExecutable-123]"
+              processHashMd5="[processHashMd5-123]"
+              processHashSha1="[processHashSha1-123]"
+              processHashSha256="[processHashSha256-123]"
+              processPid={123}
+              processPpid={null}
+              processName={null}
+              showMessage={true}
+              sshMethod={null}
+              sshSignature={null}
+              text={null}
+              userDomain={null}
+              userName={null}
+              workingDirectory={null}
+              processTitle={null}
+              args={null}
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        '[hostname-123][processExecutable-123](123)with result[outcome-123][packageName-123][packageVersion-123][packageSummary-123][processHashSha256-123][processHashSha1-123][processHashMd5-123][message-123]'
+      );
+    });
+
+    test('it can return the host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processHashMd5, processHashSha1, processHashSha256, processPid, processPpid, processName', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericFileLine
+              contextId="[context-123]"
+              endgameExitCode={null}
+              endgameFileName={null}
+              endgameFilePath={null}
+              endgameParentProcessName={null}
+              endgamePid={null}
+              endgameProcessName={null}
+              eventAction={null}
+              fileName={null}
+              filePath={null}
+              hostName="[hostname-123]"
+              id="[id-123]"
+              message="[message-123]"
+              outcome="[outcome-123]"
+              packageName="[packageName-123]"
+              packageSummary="[packageSummary-123]"
+              packageVersion="[packageVersion-123]"
+              processExecutable="[packageVersion-123]"
+              processHashMd5="[processHashMd5-123]"
+              processHashSha1="[processHashSha1-123]"
+              processHashSha256="[processHashSha256-123]"
+              processPid={123}
+              processPpid={456}
+              processName="[processName-123]"
+              showMessage={true}
+              sshMethod={null}
+              sshSignature={null}
+              text={null}
+              userDomain={null}
+              userName={null}
+              workingDirectory={null}
+              processTitle={null}
+              args={null}
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        '[hostname-123][processName-123](123)via parent process(456)with result[outcome-123][packageName-123][packageVersion-123][packageSummary-123][processHashSha256-123][processHashSha1-123][processHashMd5-123][message-123]'
+      );
+    });
+
+    test('it can return the endgameExitCode, endgameParentProcessName, eventAction, host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processHashMd5, processHashSha1, processHashSha256, processPid, processPpid, processName, sshMethod', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericFileLine
+              contextId="[context-123]"
+              endgameExitCode="[endgameExitCode-123]"
+              endgameFileName={null}
+              endgameFilePath={null}
+              endgameParentProcessName="[endgameParentProcessName-123]"
+              endgamePid={null}
+              endgameProcessName={null}
+              eventAction="[eventAction-123]"
+              fileName={null}
+              filePath={null}
+              hostName="[hostname-123]"
+              id="[id-123]"
+              message="[message-123]"
+              outcome="[outcome-123]"
+              packageName="[packageName-123]"
+              packageSummary="[packageSummary-123]"
+              packageVersion="[packageVersion-123]"
+              processExecutable="[packageVersion-123]"
+              processHashMd5="[processHashMd5-123]"
+              processHashSha1="[processHashSha1-123]"
+              processHashSha256="[processHashSha256-123]"
+              processPid={123}
+              processPpid={456}
+              processName="[processName-123]"
+              showMessage={true}
+              sshMethod="[sshMethod-123]"
+              sshSignature={null}
+              text={null}
+              userDomain={null}
+              userName={null}
+              workingDirectory={null}
+              processTitle={null}
+              args={null}
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        '[hostname-123][processName-123](123)with exit code[endgameExitCode-123]via parent process[endgameParentProcessName-123](456)with result[outcome-123][sshMethod-123][packageName-123][packageVersion-123][packageSummary-123][processHashSha256-123][processHashSha1-123][processHashMd5-123][message-123]'
+      );
+    });
+
+    test('it can return the endgameExitCode, endgameParentProcessName, eventAction, host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processHashMd5, processHashSha1, processHashSha256, processPid, processPpid, processName, sshMethod, sshSignature', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericFileLine
+              contextId="[context-123]"
+              endgameExitCode="[endgameExitCode-123]"
+              endgameFileName={null}
+              endgameFilePath={null}
+              endgameParentProcessName="[endgameParentProcessName-123]"
+              endgamePid={null}
+              endgameProcessName={null}
+              eventAction="[eventAction-123]"
+              fileName={null}
+              filePath={null}
+              hostName="[hostname-123]"
+              id="[id-123]"
+              message="[message-123]"
+              outcome="[outcome-123]"
+              packageName="[packageName-123]"
+              packageSummary="[packageSummary-123]"
+              packageVersion="[packageVersion-123]"
+              processExecutable="[packageVersion-123]"
+              processHashMd5="[processHashMd5-123]"
+              processHashSha1="[processHashSha1-123]"
+              processHashSha256="[processHashSha256-123]"
+              processPid={123}
+              processPpid={456}
+              processName="[processName-123]"
+              showMessage={true}
+              sshMethod="[sshMethod-123]"
+              sshSignature="[sshSignature-123]"
+              text={null}
+              userDomain={null}
+              userName={null}
+              workingDirectory={null}
+              processTitle={null}
+              args={null}
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        '[hostname-123][processName-123](123)with exit code[endgameExitCode-123]via parent process[endgameParentProcessName-123](456)with result[outcome-123][sshSignature-123][sshMethod-123][packageName-123][packageVersion-123][packageSummary-123][processHashSha256-123][processHashSha1-123][processHashMd5-123][message-123]'
+      );
+    });
+
+    test('it can return the endgameExitCode, endgameParentProcessName, eventAction, host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processHashMd5, processHashSha1, processHashSha256, processPid, processPpid, processName, sshMethod, sshSignature, text', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericFileLine
+              contextId="[context-123]"
+              endgameExitCode="[endgameExitCode-123]"
+              endgameFileName={null}
+              endgameFilePath={null}
+              endgameParentProcessName="[endgameParentProcessName-123]"
+              endgamePid={null}
+              endgameProcessName={null}
+              eventAction="[eventAction-123]"
+              fileName={null}
+              filePath={null}
+              hostName="[hostname-123]"
+              id="[id-123]"
+              message="[message-123]"
+              outcome="[outcome-123]"
+              packageName="[packageName-123]"
+              packageSummary="[packageSummary-123]"
+              packageVersion="[packageVersion-123]"
+              processExecutable="[packageVersion-123]"
+              processHashMd5="[processHashMd5-123]"
+              processHashSha1="[processHashSha1-123]"
+              processHashSha256="[processHashSha256-123]"
+              processPid={123}
+              processPpid={456}
+              processName="[processName-123]"
+              showMessage={true}
+              sshMethod="[sshMethod-123]"
+              sshSignature="[sshSignature-123]"
+              text="[text-123]"
+              userDomain={null}
+              userName={null}
+              workingDirectory={null}
+              processTitle={null}
+              args={null}
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        '[hostname-123][text-123][processName-123](123)with exit code[endgameExitCode-123]via parent process[endgameParentProcessName-123](456)with result[outcome-123][sshSignature-123][sshMethod-123][packageName-123][packageVersion-123][packageSummary-123][processHashSha256-123][processHashSha1-123][processHashMd5-123][message-123]'
+      );
+    });
+
+    test('it can return the endgameExitCode, endgameParentProcessName, eventAction, host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processHashMd5, processHashSha1, processHashSha256, processPid, processPpid, processName, sshMethod, sshSignature, text, userDomain', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericFileLine
+              contextId="[context-123]"
+              endgameExitCode="[endgameExitCode-123]"
+              endgameFileName={null}
+              endgameFilePath={null}
+              endgameParentProcessName="[endgameParentProcessName-123]"
+              endgamePid={null}
+              endgameProcessName={null}
+              eventAction="[eventAction-123]"
+              fileName={null}
+              filePath={null}
+              hostName="[hostname-123]"
+              id="[id-123]"
+              message="[message-123]"
+              outcome="[outcome-123]"
+              packageName="[packageName-123]"
+              packageSummary="[packageSummary-123]"
+              packageVersion="[packageVersion-123]"
+              processExecutable="[packageVersion-123]"
+              processHashMd5="[processHashMd5-123]"
+              processHashSha1="[processHashSha1-123]"
+              processHashSha256="[processHashSha256-123]"
+              processPid={123}
+              processPpid={456}
+              processName="[processName-123]"
+              showMessage={true}
+              sshMethod="[sshMethod-123]"
+              sshSignature="[sshSignature-123]"
+              text="[text-123]"
+              userDomain="[userDomain-123]"
+              userName={null}
+              workingDirectory={null}
+              processTitle={null}
+              args={null}
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        '\\[userDomain-123][hostname-123][text-123][processName-123](123)with exit code[endgameExitCode-123]via parent process[endgameParentProcessName-123](456)with result[outcome-123][sshSignature-123][sshMethod-123][packageName-123][packageVersion-123][packageSummary-123][processHashSha256-123][processHashSha1-123][processHashMd5-123][message-123]'
+      );
+    });
+
+    test('it can return the endgameExitCode, endgameParentProcessName, eventAction, host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processHashMd5, processHashSha1, processHashSha256, processPid, processPpid, processName, sshMethod, sshSignature, text, userDomain, username', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericFileLine
+              contextId="[context-123]"
+              endgameExitCode="[endgameExitCode-123]"
+              endgameFileName={null}
+              endgameFilePath={null}
+              endgameParentProcessName="[endgameParentProcessName-123]"
+              endgamePid={null}
+              endgameProcessName={null}
+              eventAction="[eventAction-123]"
+              fileName={null}
+              filePath={null}
+              hostName="[hostname-123]"
+              id="[id-123]"
+              message="[message-123]"
+              outcome="[outcome-123]"
+              packageName="[packageName-123]"
+              packageSummary="[packageSummary-123]"
+              packageVersion="[packageVersion-123]"
+              processExecutable="[packageVersion-123]"
+              processHashMd5="[processHashMd5-123]"
+              processHashSha1="[processHashSha1-123]"
+              processHashSha256="[processHashSha256-123]"
+              processPid={123}
+              processPpid={456}
+              processName="[processName-123]"
+              showMessage={true}
+              sshMethod="[sshMethod-123]"
+              sshSignature="[sshSignature-123]"
+              text="[text-123]"
+              userDomain="[userDomain-123]"
+              userName="[username-123]"
+              workingDirectory={null}
+              processTitle={null}
+              args={null}
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        '[username-123]\\[userDomain-123]@[hostname-123][text-123][processName-123](123)with exit code[endgameExitCode-123]via parent process[endgameParentProcessName-123](456)with result[outcome-123][sshSignature-123][sshMethod-123][packageName-123][packageVersion-123][packageSummary-123][processHashSha256-123][processHashSha1-123][processHashMd5-123][message-123]'
+      );
+    });
+
+    test('it can return the endgameExitCode, endgameParentProcessName, eventAction, host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processHashMd5, processHashSha1, processHashSha256, processPid, processPpid, processName, sshMethod, sshSignature, text, userDomain, username, working-directory', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericFileLine
+              contextId="[context-123]"
+              endgameExitCode="[endgameExitCode-123]"
+              endgameFileName={null}
+              endgameFilePath={null}
+              endgameParentProcessName="[endgameParentProcessName-123]"
+              endgamePid={null}
+              endgameProcessName={null}
+              eventAction="[eventAction-123]"
+              fileName={null}
+              filePath={null}
+              hostName="[hostname-123]"
+              id="[id-123]"
+              message="[message-123]"
+              outcome="[outcome-123]"
+              packageName="[packageName-123]"
+              packageSummary="[packageSummary-123]"
+              packageVersion="[packageVersion-123]"
+              processExecutable="[packageVersion-123]"
+              processHashMd5="[processHashMd5-123]"
+              processHashSha1="[processHashSha1-123]"
+              processHashSha256="[processHashSha256-123]"
+              processPid={123}
+              processPpid={456}
+              processName="[processName-123]"
+              showMessage={true}
+              sshMethod="[sshMethod-123]"
+              sshSignature="[sshSignature-123]"
+              text="[text-123]"
+              userDomain="[userDomain-123]"
+              userName="[username-123]"
+              workingDirectory="[working-directory-123]"
+              processTitle={null}
+              args={null}
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        '[username-123]\\[userDomain-123]@[hostname-123]in[working-directory-123][text-123][processName-123](123)with exit code[endgameExitCode-123]via parent process[endgameParentProcessName-123](456)with result[outcome-123][sshSignature-123][sshMethod-123][packageName-123][packageVersion-123][packageSummary-123][processHashSha256-123][processHashSha1-123][processHashMd5-123][message-123]'
+      );
+    });
+
+    test('it can return the endgameExitCode, endgameParentProcessName, eventAction, host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processHashMd5, processHashSha1, processHashSha256, processPid, processPpid, processName, sshMethod, sshSignature, text, userDomain, username, working-directory, process-title', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericFileLine
+              contextId="[context-123]"
+              endgameExitCode="[endgameExitCode-123]"
+              endgameFileName={null}
+              endgameFilePath={null}
+              endgameParentProcessName="[endgameParentProcessName-123]"
+              endgamePid={null}
+              endgameProcessName={null}
+              eventAction="[eventAction-123]"
+              fileName={null}
+              filePath={null}
+              hostName="[hostname-123]"
+              id="[id-123]"
+              message="[message-123]"
+              outcome="[outcome-123]"
+              packageName="[packageName-123]"
+              packageSummary="[packageSummary-123]"
+              packageVersion="[packageVersion-123]"
+              processExecutable="[packageVersion-123]"
+              processHashMd5="[processHashMd5-123]"
+              processHashSha1="[processHashSha1-123]"
+              processHashSha256="[processHashSha256-123]"
+              processPid={123}
+              processPpid={456}
+              processName="[processName-123]"
+              showMessage={true}
+              sshMethod="[sshMethod-123]"
+              sshSignature="[sshSignature-123]"
+              text="[text-123]"
+              userDomain="[userDomain-123]"
+              userName="[username-123]"
+              workingDirectory="[working-directory-123]"
+              processTitle="[process-title-123]"
+              args={null}
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        '[username-123]\\[userDomain-123]@[hostname-123]in[working-directory-123][text-123][processName-123](123)[process-title-123]with exit code[endgameExitCode-123]via parent process[endgameParentProcessName-123](456)with result[outcome-123][sshSignature-123][sshMethod-123][packageName-123][packageVersion-123][packageSummary-123][processHashSha256-123][processHashSha1-123][processHashMd5-123][message-123]'
+      );
+    });
+
+    test('it can return the endgameExitCode, endgameParentProcessName, eventAction, host, message, outcome, packageName, pacakgeSummary, packageVersion, packageExecutable, processHashMd5, processHashSha1, processHashSha256, processPid, processPpid, processName, sshMethod, sshSignature, text, userDomain, username, working-directory, process-title, args', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericFileLine
+              contextId="[context-123]"
+              endgameExitCode="[endgameExitCode-123]"
+              endgameFileName={null}
+              endgameFilePath={null}
+              endgameParentProcessName="[endgameParentProcessName-123]"
+              endgamePid={null}
+              endgameProcessName={null}
+              eventAction="[eventAction-123]"
+              fileName={null}
+              filePath={null}
+              hostName="[hostname-123]"
+              id="[id-123]"
+              message="[message-123]"
+              outcome="[outcome-123]"
+              packageName="[packageName-123]"
+              packageSummary="[packageSummary-123]"
+              packageVersion="[packageVersion-123]"
+              processExecutable="[packageVersion-123]"
+              processHashMd5="[processHashMd5-123]"
+              processHashSha1="[processHashSha1-123]"
+              processHashSha256="[processHashSha256-123]"
+              processPid={123}
+              processPpid={456}
+              processName="[processName-123]"
+              showMessage={true}
+              sshMethod="[sshMethod-123]"
+              sshSignature="[sshSignature-123]"
+              text="[text-123]"
+              userDomain="[userDomain-123]"
+              userName="[username-123]"
+              workingDirectory="[working-directory-123]"
+              processTitle="[process-title-123]"
+              args={['[arg-1]', '[arg-2]', '[arg-3]']}
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual(
+        '[username-123]\\[userDomain-123]@[hostname-123]in[working-directory-123][text-123][processName-123](123)[arg-1][arg-2][arg-3][process-title-123]with exit code[endgameExitCode-123]via parent process[endgameParentProcessName-123](456)with result[outcome-123][sshSignature-123][sshMethod-123][packageName-123][packageVersion-123][packageSummary-123][processHashSha256-123][processHashSha1-123][processHashMd5-123][message-123]'
+      );
+    });
+
+    test('it renders a FileDraggable when endgameFileName and endgameFilePath are provided, but fileName and filePath are NOT provided', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericFileLine
+              contextId="[context-123]"
+              endgameExitCode={undefined}
+              endgameFileName="[endgameFileName]"
+              endgameFilePath="[endgameFilePath]"
+              endgameParentProcessName={undefined}
+              endgamePid={undefined}
+              endgameProcessName={undefined}
+              eventAction={undefined}
+              fileName={undefined}
+              filePath={undefined}
+              hostName={undefined}
+              id="[id-123]"
+              message={undefined}
+              outcome={undefined}
+              packageName={undefined}
+              packageSummary={undefined}
+              packageVersion={undefined}
+              processExecutable={undefined}
+              processHashMd5={undefined}
+              processHashSha1={undefined}
+              processHashSha256={undefined}
+              processPid={undefined}
+              processPpid={undefined}
+              processName={undefined}
+              showMessage={true}
+              sshMethod={undefined}
+              processTitle={undefined}
+              args={undefined}
+              sshSignature={undefined}
+              text={undefined}
+              userDomain={undefined}
+              userName={undefined}
+              workingDirectory={undefined}
+            />
+          </div>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toEqual('[endgameFileName]in[endgameFilePath]an unknown process');
+    });
+
+    test('it prefers to render fileName and filePath over endgameFileName and endgameFilePath respectfully when all of those fields are provided', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericFileLine
+              contextId="[context-123]"
+              endgameExitCode={undefined}
+              endgameFileName="[endgameFileName]"
+              endgameFilePath="[endgameFilePath]"
+              endgameParentProcessName={undefined}
+              endgamePid={undefined}
+              endgameProcessName={undefined}
+              eventAction={undefined}
+              fileName="[fileName]"
+              filePath="[filePath]"
+              hostName={undefined}
+              id="[id-123]"
+              message={undefined}
+              outcome={undefined}
+              packageName={undefined}
+              packageSummary={undefined}
+              packageVersion={undefined}
+              processExecutable={undefined}
+              processHashMd5={undefined}
+              processHashSha1={undefined}
+              processHashSha256={undefined}
+              processPid={undefined}
+              processPpid={undefined}
+              processName={undefined}
+              showMessage={true}
+              sshMethod={undefined}
+              processTitle={undefined}
+              args={undefined}
+              sshSignature={undefined}
+              text={undefined}
+              userDomain={undefined}
+              userName={undefined}
+              workingDirectory={undefined}
+            />
+          </div>
+        </TestProviders>
+      );
+
+      expect(wrapper.text()).toEqual('[fileName]in[filePath]an unknown process');
+    });
+
+    ['file_create_event', 'created', 'file_delete_event', 'deleted'].forEach(eventAction => {
+      test(`it renders the text "via" when eventAction is ${eventAction}`, () => {
+        const wrapper = mount(
+          <TestProviders>
+            <div>
+              <SystemGenericFileLine
+                contextId="[context-123]"
+                endgameExitCode={undefined}
+                endgameFileName={undefined}
+                endgameFilePath={undefined}
+                endgameParentProcessName={undefined}
+                endgamePid={undefined}
+                endgameProcessName={undefined}
+                eventAction={eventAction}
+                fileName={undefined}
+                filePath={undefined}
+                hostName={undefined}
+                id="[id-123]"
+                message={undefined}
+                outcome={undefined}
+                packageName={undefined}
+                packageSummary={undefined}
+                packageVersion={undefined}
+                processExecutable={undefined}
+                processHashMd5={undefined}
+                processHashSha1={undefined}
+                processHashSha256={undefined}
+                processPid={undefined}
+                processPpid={undefined}
+                processName={undefined}
+                showMessage={true}
+                sshMethod={undefined}
+                processTitle={undefined}
+                args={undefined}
+                sshSignature={undefined}
+                text={undefined}
+                userDomain={undefined}
+                userName={undefined}
+                workingDirectory={undefined}
+              />
+            </div>
+          </TestProviders>
+        );
+
+        expect(wrapper.text().includes('via')).toBe(true);
+      });
+    });
+
+    test('it does NOT render the text "via" when eventAction is not a whitelisted action', () => {
+      const eventAction = 'a_non_whitelisted_event_action';
+
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericFileLine
+              contextId="[context-123]"
+              endgameExitCode={undefined}
+              endgameFileName={undefined}
+              endgameFilePath={undefined}
+              endgameParentProcessName={undefined}
+              endgamePid={undefined}
+              endgameProcessName={undefined}
+              eventAction={eventAction}
+              fileName={undefined}
+              filePath={undefined}
+              hostName={undefined}
+              id="[id-123]"
+              message={undefined}
+              outcome={undefined}
+              packageName={undefined}
+              packageSummary={undefined}
+              packageVersion={undefined}
+              processExecutable={undefined}
+              processHashMd5={undefined}
+              processHashSha1={undefined}
+              processHashSha256={undefined}
+              processPid={undefined}
+              processPpid={undefined}
+              processName={undefined}
+              showMessage={true}
+              sshMethod={undefined}
+              processTitle={undefined}
+              args={undefined}
+              sshSignature={undefined}
+              text={undefined}
+              userDomain={undefined}
+              userName={undefined}
+              workingDirectory={undefined}
+            />
+          </div>
+        </TestProviders>
+      );
+
+      expect(wrapper.text().includes('via')).toBe(false);
+    });
+
+    test('it renders a ParentProcessDraggable when eventAction is NOT "process_stopped" and NOT "termination_event"', () => {
+      const eventAction = 'something_else';
+
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericFileLine
+              contextId="[context-123]"
+              endgameExitCode={undefined}
+              endgameFileName={undefined}
+              endgameFilePath={undefined}
+              endgameParentProcessName="[endgameParentProcessName]"
+              endgamePid={undefined}
+              endgameProcessName={undefined}
+              eventAction={eventAction}
+              fileName={undefined}
+              filePath={undefined}
+              hostName={undefined}
+              id="[id-123]"
+              message={undefined}
+              outcome={undefined}
+              packageName={undefined}
+              packageSummary={undefined}
+              packageVersion={undefined}
+              processExecutable={undefined}
+              processHashMd5={undefined}
+              processHashSha1={undefined}
+              processHashSha256={undefined}
+              processPid={undefined}
+              processPpid={456}
+              processName={undefined}
+              showMessage={true}
+              sshMethod={undefined}
+              processTitle={undefined}
+              args={undefined}
+              sshSignature={undefined}
+              text={undefined}
+              userDomain={undefined}
+              userName={undefined}
+              workingDirectory={undefined}
+            />
+          </div>
+        </TestProviders>
+      );
+
+      expect(wrapper.text()).toEqual(
+        'an unknown processvia parent process[endgameParentProcessName](456)'
+      );
+    });
+
+    test('it does NOT render a ParentProcessDraggable when eventAction is "process_stopped"', () => {
+      const eventAction = 'process_stopped';
+
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericFileLine
+              contextId="[context-123]"
+              endgameExitCode={undefined}
+              endgameFileName={undefined}
+              endgameFilePath={undefined}
+              endgameParentProcessName="[endgameParentProcessName]"
+              endgamePid={undefined}
+              endgameProcessName={undefined}
+              eventAction={eventAction}
+              fileName={undefined}
+              filePath={undefined}
+              hostName={undefined}
+              id="[id-123]"
+              message={undefined}
+              outcome={undefined}
+              packageName={undefined}
+              packageSummary={undefined}
+              packageVersion={undefined}
+              processExecutable={undefined}
+              processHashMd5={undefined}
+              processHashSha1={undefined}
+              processHashSha256={undefined}
+              processPid={undefined}
+              processPpid={456}
+              processName={undefined}
+              showMessage={true}
+              sshMethod={undefined}
+              processTitle={undefined}
+              args={undefined}
+              sshSignature={undefined}
+              text={undefined}
+              userDomain={undefined}
+              userName={undefined}
+              workingDirectory={undefined}
+            />
+          </div>
+        </TestProviders>
+      );
+
+      expect(wrapper.text()).toEqual('an unknown process');
+    });
+
+    test('it does NOT render a ParentProcessDraggable when eventAction is "termination_event"', () => {
+      const eventAction = 'termination_event';
+
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericFileLine
+              contextId="[context-123]"
+              endgameExitCode={undefined}
+              endgameFileName={undefined}
+              endgameFilePath={undefined}
+              endgameParentProcessName="[endgameParentProcessName]"
+              endgamePid={undefined}
+              endgameProcessName={undefined}
+              eventAction={eventAction}
+              fileName={undefined}
+              filePath={undefined}
+              hostName={undefined}
+              id="[id-123]"
+              message={undefined}
+              outcome={undefined}
+              packageName={undefined}
+              packageSummary={undefined}
+              packageVersion={undefined}
+              processExecutable={undefined}
+              processHashMd5={undefined}
+              processHashSha1={undefined}
+              processHashSha256={undefined}
+              processPid={undefined}
+              processPpid={456}
+              processName={undefined}
+              showMessage={true}
+              sshMethod={undefined}
+              processTitle={undefined}
+              args={undefined}
+              sshSignature={undefined}
+              text={undefined}
+              userDomain={undefined}
+              userName={undefined}
+              workingDirectory={undefined}
+            />
+          </div>
+        </TestProviders>
+      );
+
+      expect(wrapper.text()).toEqual('an unknown process');
+    });
+
+    test('it returns renders the message when showMessage is true', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericFileLine
+              contextId="[context-123]"
+              endgameExitCode={undefined}
+              endgameFileName={undefined}
+              endgameFilePath={undefined}
+              endgameParentProcessName={undefined}
+              endgamePid={undefined}
+              endgameProcessName={undefined}
+              eventAction={undefined}
+              fileName={undefined}
+              filePath={undefined}
+              hostName={undefined}
+              id="[id-123]"
+              message="[message]"
+              outcome={undefined}
+              packageName={undefined}
+              packageSummary={undefined}
+              packageVersion={undefined}
+              processExecutable={undefined}
+              processHashMd5={undefined}
+              processHashSha1={undefined}
+              processHashSha256={undefined}
+              processPid={undefined}
+              processPpid={undefined}
+              processName={undefined}
+              showMessage={true}
+              sshMethod={undefined}
+              processTitle={undefined}
+              args={undefined}
+              sshSignature={undefined}
+              text={undefined}
+              userDomain={undefined}
+              userName={undefined}
+              workingDirectory={undefined}
+            />
+          </div>
+        </TestProviders>
+      );
+
+      expect(wrapper.text()).toEqual('an unknown process[message]');
+    });
+
+    test('it does NOT render the message when showMessage is false', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericFileLine
+              contextId="[context-123]"
+              endgameExitCode={undefined}
+              endgameFileName={undefined}
+              endgameFilePath={undefined}
+              endgameParentProcessName={undefined}
+              endgamePid={undefined}
+              endgameProcessName={undefined}
+              eventAction={undefined}
+              fileName={undefined}
+              filePath={undefined}
+              hostName={undefined}
+              id="[id-123]"
+              message="[message]"
+              outcome={undefined}
+              packageName={undefined}
+              packageSummary={undefined}
+              packageVersion={undefined}
+              processExecutable={undefined}
+              processHashMd5={undefined}
+              processHashSha1={undefined}
+              processHashSha256={undefined}
+              processPid={undefined}
+              processPpid={undefined}
+              processName={undefined}
+              showMessage={false}
+              sshMethod={undefined}
+              processTitle={undefined}
+              args={undefined}
+              sshSignature={undefined}
+              text={undefined}
+              userDomain={undefined}
+              userName={undefined}
+              workingDirectory={undefined}
+            />
+          </div>
+        </TestProviders>
+      );
+
+      expect(wrapper.text()).toEqual('an unknown process');
+    });
+
+    test('it renders a ProcessDraggableWithNonExistentProcess when endgamePid and endgameProcessName are provided, but processPid and processName are NOT provided', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericFileLine
+              contextId="[context-123]"
+              endgameExitCode={undefined}
+              endgameFileName={undefined}
+              endgameFilePath={undefined}
+              endgameParentProcessName={undefined}
+              endgamePid={789}
+              endgameProcessName="[endgameProcessName]"
+              eventAction={undefined}
+              fileName={undefined}
+              filePath={undefined}
+              hostName={undefined}
+              id="[id-123]"
+              message={undefined}
+              outcome={undefined}
+              packageName={undefined}
+              packageSummary={undefined}
+              packageVersion={undefined}
+              processExecutable={undefined}
+              processHashMd5={undefined}
+              processHashSha1={undefined}
+              processHashSha256={undefined}
+              processPid={undefined}
+              processPpid={undefined}
+              processName={undefined}
+              showMessage={true}
+              sshMethod={undefined}
+              processTitle={undefined}
+              args={undefined}
+              sshSignature={undefined}
+              text={undefined}
+              userDomain={undefined}
+              userName={undefined}
+              workingDirectory={undefined}
+            />
+          </div>
+        </TestProviders>
+      );
+
+      expect(wrapper.text()).toEqual('[endgameProcessName](789)');
+    });
+
+    test('it prefers to render processName and processPid over endgameProcessName and endgamePid respectfully when all of those fields are provided', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <div>
+            <SystemGenericFileLine
+              contextId="[context-123]"
+              endgameExitCode={undefined}
+              endgameFileName={undefined}
+              endgameFilePath={undefined}
+              endgameParentProcessName={undefined}
+              endgamePid={789}
+              endgameProcessName="[endgameProcessName]"
+              eventAction={undefined}
+              fileName={undefined}
+              filePath={undefined}
+              hostName={undefined}
+              id="[id-123]"
+              message={undefined}
+              outcome={undefined}
+              packageName={undefined}
+              packageSummary={undefined}
+              packageVersion={undefined}
+              processExecutable={undefined}
+              processHashMd5={undefined}
+              processHashSha1={undefined}
+              processHashSha256={undefined}
+              processPid={123}
+              processPpid={undefined}
+              processName="[processName]"
+              showMessage={true}
+              sshMethod={undefined}
+              processTitle={undefined}
+              args={undefined}
+              sshSignature={undefined}
+              text={undefined}
+              userDomain={undefined}
+              userName={undefined}
+              workingDirectory={undefined}
+            />
+          </div>
+        </TestProviders>
+      );
+
+      expect(wrapper.text()).toEqual('[processName](123)');
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/generic_file_details.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/generic_file_details.tsx
new file mode 100644
index 00000000000000..8dd513539a96a1
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/generic_file_details.tsx
@@ -0,0 +1,298 @@
+/*
+ * 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 { EuiFlexGroup, EuiSpacer } from '@elastic/eui';
+import { get } from 'lodash/fp';
+import React from 'react';
+
+import { BrowserFields } from '../../../../../../common/containers/source';
+import { Ecs } from '../../../../../../graphql/types';
+import { DraggableBadge } from '../../../../../../common/components/draggables';
+import { OverflowField } from '../../../../../../common/components/tables/helpers';
+
+import * as i18n from './translations';
+import { NetflowRenderer } from '../netflow';
+import { UserHostWorkingDir } from '../user_host_working_dir';
+import { Details, isProcessStoppedOrTerminationEvent, showVia, TokensFlexItem } from '../helpers';
+import { ProcessDraggableWithNonExistentProcess } from '../process_draggable';
+import { Args } from '../args';
+import { AuthSsh } from './auth_ssh';
+import { ExitCodeDraggable } from '../exit_code_draggable';
+import { FileDraggable } from '../file_draggable';
+import { Package } from './package';
+import { Badge } from '../../../../../../common/components/page';
+import { ParentProcessDraggable } from '../parent_process_draggable';
+import { ProcessHash } from '../process_hash';
+
+interface Props {
+  args: string[] | null | undefined;
+  contextId: string;
+  endgameExitCode: string | null | undefined;
+  endgameFileName: string | null | undefined;
+  endgameFilePath: string | null | undefined;
+  endgameParentProcessName: string | null | undefined;
+  endgamePid: number | null | undefined;
+  endgameProcessName: string | null | undefined;
+  eventAction: string | null | undefined;
+  fileName: string | null | undefined;
+  filePath: string | null | undefined;
+  hostName: string | null | undefined;
+  id: string;
+  message: string | null | undefined;
+  outcome: string | null | undefined;
+  packageName: string | null | undefined;
+  packageSummary: string | null | undefined;
+  packageVersion: string | null | undefined;
+  processName: string | null | undefined;
+  processPid: number | null | undefined;
+  processPpid: number | null | undefined;
+  processExecutable: string | null | undefined;
+  processHashMd5: string | null | undefined;
+  processHashSha1: string | null | undefined;
+  processHashSha256: string | null | undefined;
+  processTitle: string | null | undefined;
+  showMessage: boolean;
+  sshSignature: string | null | undefined;
+  sshMethod: string | null | undefined;
+  text: string | null | undefined;
+  userDomain: string | null | undefined;
+  userName: string | null | undefined;
+  workingDirectory: string | null | undefined;
+}
+
+export const SystemGenericFileLine = React.memo<Props>(
+  ({
+    args,
+    contextId,
+    endgameExitCode,
+    endgameFileName,
+    endgameFilePath,
+    endgameParentProcessName,
+    endgamePid,
+    endgameProcessName,
+    eventAction,
+    fileName,
+    filePath,
+    hostName,
+    id,
+    message,
+    outcome,
+    packageName,
+    packageSummary,
+    packageVersion,
+    processExecutable,
+    processHashMd5,
+    processHashSha1,
+    processHashSha256,
+    processName,
+    processPid,
+    processPpid,
+    processTitle,
+    showMessage,
+    sshSignature,
+    sshMethod,
+    text,
+    userDomain,
+    userName,
+    workingDirectory,
+  }) => (
+    <>
+      <EuiFlexGroup alignItems="center" justifyContent="center" gutterSize="none" wrap={true}>
+        <UserHostWorkingDir
+          eventId={id}
+          contextId={contextId}
+          userDomain={userDomain}
+          userName={userName}
+          workingDirectory={workingDirectory}
+          hostName={hostName}
+        />
+        <TokensFlexItem grow={false} component="span">
+          {text}
+        </TokensFlexItem>
+        <FileDraggable
+          contextId={contextId}
+          endgameFileName={endgameFileName}
+          endgameFilePath={endgameFilePath}
+          eventId={id}
+          fileName={fileName}
+          filePath={filePath}
+        />
+        {showVia(eventAction) && (
+          <TokensFlexItem data-test-subj="via" grow={false} component="span">
+            {i18n.VIA}
+          </TokensFlexItem>
+        )}
+        <TokensFlexItem grow={false} component="span">
+          <ProcessDraggableWithNonExistentProcess
+            contextId={contextId}
+            endgamePid={endgamePid}
+            endgameProcessName={endgameProcessName}
+            eventId={id}
+            processPid={processPid}
+            processName={processName}
+            processExecutable={processExecutable}
+          />
+        </TokensFlexItem>
+        <Args args={args} contextId={contextId} eventId={id} processTitle={processTitle} />
+        <ExitCodeDraggable
+          contextId={contextId}
+          endgameExitCode={endgameExitCode}
+          eventId={id}
+          text={i18n.WITH_EXIT_CODE}
+        />
+        {!isProcessStoppedOrTerminationEvent(eventAction) && (
+          <ParentProcessDraggable
+            contextId={contextId}
+            endgameParentProcessName={endgameParentProcessName}
+            eventId={id}
+            processPpid={processPpid}
+            text={i18n.VIA_PARENT_PROCESS}
+          />
+        )}
+        {outcome != null && (
+          <TokensFlexItem grow={false} component="span">
+            {i18n.WITH_RESULT}
+          </TokensFlexItem>
+        )}
+        <TokensFlexItem grow={false} component="span">
+          <DraggableBadge
+            contextId={contextId}
+            eventId={id}
+            field="event.outcome"
+            queryValue={outcome}
+            value={outcome}
+          />
+        </TokensFlexItem>
+        <AuthSsh
+          contextId={contextId}
+          eventId={id}
+          sshSignature={sshSignature}
+          sshMethod={sshMethod}
+        />
+        <Package
+          contextId={contextId}
+          eventId={id}
+          packageName={packageName}
+          packageSummary={packageSummary}
+          packageVersion={packageVersion}
+        />
+      </EuiFlexGroup>
+      <ProcessHash
+        contextId={contextId}
+        eventId={id}
+        processHashMd5={processHashMd5}
+        processHashSha1={processHashSha1}
+        processHashSha256={processHashSha256}
+      />
+
+      {message != null && showMessage && (
+        <>
+          <EuiSpacer size="xs" />
+          <EuiFlexGroup justifyContent="center" gutterSize="none" wrap={true}>
+            <TokensFlexItem grow={false} component="span">
+              <Badge iconType="editorComment" color="hollow" title="">
+                <OverflowField value={message} />
+              </Badge>
+            </TokensFlexItem>
+          </EuiFlexGroup>
+        </>
+      )}
+    </>
+  )
+);
+
+SystemGenericFileLine.displayName = 'SystemGenericFileLine';
+
+interface GenericDetailsProps {
+  browserFields: BrowserFields;
+  data: Ecs;
+  contextId: string;
+  showMessage?: boolean;
+  text: string;
+  timelineId: string;
+}
+
+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;
+    const hostName: string | null | undefined = get('host.name[0]', data);
+    const endgameExitCode: string | null | undefined = get('endgame.exit_code[0]', data);
+    const endgameFileName: string | null | undefined = get('endgame.file_name[0]', data);
+    const endgameFilePath: string | null | undefined = get('endgame.file_path[0]', data);
+    const endgameParentProcessName: string | null | undefined = get(
+      'endgame.parent_process_name[0]',
+      data
+    );
+    const endgamePid: number | null | undefined = get('endgame.pid[0]', data);
+    const endgameProcessName: string | null | undefined = get('endgame.process_name[0]', data);
+    const eventAction: string | null | undefined = get('event.action[0]', data);
+    const fileName: string | null | undefined = get('file.name[0]', data);
+    const filePath: string | null | undefined = get('file.path[0]', data);
+    const userDomain: string | null | undefined = get('user.domain[0]', data);
+    const userName: string | null | undefined = get('user.name[0]', data);
+    const outcome: string | null | undefined = get('event.outcome[0]', data);
+    const packageName: string | null | undefined = get('system.audit.package.name[0]', data);
+    const packageSummary: string | null | undefined = get('system.audit.package.summary[0]', data);
+    const packageVersion: string | null | undefined = get('system.audit.package.version[0]', data);
+    const processHashMd5: string | null | undefined = get('process.hash.md5[0]', data);
+    const processHashSha1: string | null | undefined = get('process.hash.sha1[0]', data);
+    const processHashSha256: string | null | undefined = get('process.hash.sha256', data);
+    const processPid: number | null | undefined = get('process.pid[0]', data);
+    const processPpid: number | null | undefined = get('process.ppid[0]', data);
+    const processName: string | null | undefined = get('process.name[0]', data);
+    const sshSignature: string | null | undefined = get('system.auth.ssh.signature[0]', data);
+    const sshMethod: string | null | undefined = get('system.auth.ssh.method[0]', data);
+    const processExecutable: string | null | undefined = get('process.executable[0]', data);
+    const processTitle: string | null | undefined = get('process.title[0]', data);
+    const workingDirectory: string | null | undefined = get('process.working_directory[0]', data);
+    const args: string[] | null | undefined = get('process.args', data);
+
+    return (
+      <Details>
+        <SystemGenericFileLine
+          id={id}
+          contextId={contextId}
+          text={text}
+          hostName={hostName}
+          endgameExitCode={endgameExitCode}
+          endgameFileName={endgameFileName}
+          endgameFilePath={endgameFilePath}
+          endgameParentProcessName={endgameParentProcessName}
+          endgamePid={endgamePid}
+          endgameProcessName={endgameProcessName}
+          eventAction={eventAction}
+          fileName={fileName}
+          filePath={filePath}
+          userDomain={userDomain}
+          userName={userName}
+          message={message}
+          processTitle={processTitle}
+          workingDirectory={workingDirectory}
+          args={args}
+          packageName={packageName}
+          packageSummary={packageSummary}
+          packageVersion={packageVersion}
+          processHashMd5={processHashMd5}
+          processHashSha1={processHashSha1}
+          processHashSha256={processHashSha256}
+          processName={processName}
+          processPid={processPid}
+          processPpid={processPpid}
+          processExecutable={processExecutable}
+          showMessage={showMessage}
+          sshSignature={sshSignature}
+          sshMethod={sshMethod}
+          outcome={outcome}
+        />
+        <EuiSpacer size="s" />
+        <NetflowRenderer data={data} timelineId={timelineId} />
+      </Details>
+    );
+  }
+);
+
+SystemGenericFileDetails.displayName = 'SystemGenericFileDetails';
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/generic_row_renderer.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/generic_row_renderer.test.tsx
new file mode 100644
index 00000000000000..26cccc82896eae
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/generic_row_renderer.test.tsx
@@ -0,0 +1,936 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import { cloneDeep } from 'lodash/fp';
+import React from 'react';
+
+import { BrowserFields } from '../../../../../../common/containers/source';
+import { mockBrowserFields } from '../../../../../../common/containers/source/mock';
+import { Ecs } from '../../../../../../graphql/types';
+import {
+  mockDnsEvent,
+  mockFimFileCreatedEvent,
+  mockFimFileDeletedEvent,
+  mockSocketClosedEvent,
+  mockSocketOpenedEvent,
+  mockTimelineData,
+  TestProviders,
+} from '../../../../../../common/mock';
+import {
+  mockEndgameAdminLogon,
+  mockEndgameCreationEvent,
+  mockEndgameDnsRequest,
+  mockEndgameExplicitUserLogon,
+  mockEndgameFileCreateEvent,
+  mockEndgameFileDeleteEvent,
+  mockEndgameIpv4ConnectionAcceptEvent,
+  mockEndgameIpv6ConnectionAcceptEvent,
+  mockEndgameIpv4DisconnectReceivedEvent,
+  mockEndgameIpv6DisconnectReceivedEvent,
+  mockEndgameTerminationEvent,
+  mockEndgameUserLogoff,
+  mockEndgameUserLogon,
+} from '../../../../../../common/mock/mock_endgame_ecs_data';
+import { useMountAppended } from '../../../../../../common/utils/use_mount_appended';
+import { RowRenderer } from '../row_renderer';
+import {
+  createDnsRowRenderer,
+  createEndgameProcessRowRenderer,
+  createFimRowRenderer,
+  createGenericSystemRowRenderer,
+  createGenericFileRowRenderer,
+  createSecurityEventRowRenderer,
+  createSocketRowRenderer,
+} from './generic_row_renderer';
+import * as i18n from './translations';
+
+jest.mock('../../../../../../overview/components/events_by_dataset');
+
+describe('GenericRowRenderer', () => {
+  const mount = useMountAppended();
+
+  describe('#createGenericSystemRowRenderer', () => {
+    let nonSystem: Ecs;
+    let system: Ecs;
+    let connectedToRenderer: RowRenderer;
+    beforeEach(() => {
+      nonSystem = cloneDeep(mockTimelineData[0].ecs);
+      system = cloneDeep(mockTimelineData[29].ecs);
+      connectedToRenderer = createGenericSystemRowRenderer({
+        actionName: 'process_started',
+        text: 'some text',
+      });
+    });
+    test('renders correctly against snapshot', () => {
+      // I cannot and do not want to use BrowserFields mocks for the snapshot tests as they are too heavy
+      const browserFields: BrowserFields = {};
+      const children = connectedToRenderer.renderRow({
+        browserFields,
+        data: system,
+        timelineId: 'test',
+      });
+
+      const wrapper = shallow(<span>{children}</span>);
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    test('should return false if not a system datum', () => {
+      expect(connectedToRenderer.isInstance(nonSystem)).toBe(false);
+    });
+
+    test('should return true if it is a system datum', () => {
+      expect(connectedToRenderer.isInstance(system)).toBe(true);
+    });
+
+    test('should return false when action is set to some other value', () => {
+      if (system.event != null && system.event.action != null) {
+        system.event.action[0] = 'some other value';
+        expect(connectedToRenderer.isInstance(system)).toBe(false);
+      } else {
+        // if system.event or system.event.action is not defined in the mock
+        // then we will get an error here
+        expect(system.event).toBeDefined();
+      }
+    });
+    test('should render a system row', () => {
+      const children = connectedToRenderer.renderRow({
+        browserFields: mockBrowserFields,
+        data: system,
+        timelineId: 'test',
+      });
+      const wrapper = mount(
+        <TestProviders>
+          <span>{children}</span>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toContain(
+        'Evan@zeek-londonsome text(6278)with resultfailureSource128.199.212.120'
+      );
+    });
+  });
+
+  describe('#createGenericFileRowRenderer', () => {
+    let nonSystem: Ecs;
+    let systemFile: Ecs;
+    let fileToRenderer: RowRenderer;
+
+    beforeEach(() => {
+      nonSystem = cloneDeep(mockTimelineData[0].ecs);
+      systemFile = cloneDeep(mockTimelineData[28].ecs);
+      fileToRenderer = createGenericFileRowRenderer({
+        actionName: 'user_login',
+        text: 'some text',
+      });
+    });
+
+    test('renders correctly against snapshot', () => {
+      // I cannot and do not want to use BrowserFields mocks for the snapshot tests as they are too heavy
+      const browserFields: BrowserFields = {};
+      const children = fileToRenderer.renderRow({
+        browserFields,
+        data: systemFile,
+        timelineId: 'test',
+      });
+
+      const wrapper = shallow(<span>{children}</span>);
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    test('should return false if not a auditd datum', () => {
+      expect(fileToRenderer.isInstance(nonSystem)).toBe(false);
+    });
+
+    test('should return true if it is a auditd datum', () => {
+      expect(fileToRenderer.isInstance(systemFile)).toBe(true);
+    });
+
+    test('should return false when action is set to some other value', () => {
+      if (systemFile.event != null && systemFile.event.action != null) {
+        systemFile.event.action[0] = 'some other value';
+        expect(fileToRenderer.isInstance(systemFile)).toBe(false);
+      } else {
+        expect(systemFile.event).toBeDefined();
+      }
+    });
+
+    test('should render a system row', () => {
+      const children = fileToRenderer.renderRow({
+        browserFields: mockBrowserFields,
+        data: systemFile,
+        timelineId: 'test',
+      });
+      const wrapper = mount(
+        <TestProviders>
+          <span>{children}</span>
+        </TestProviders>
+      );
+      expect(wrapper.text()).toContain(
+        'Braden@zeek-londonsome text(6278)with resultfailureSource128.199.212.120'
+      );
+    });
+  });
+
+  describe('#createEndgameProcessRowRenderer', () => {
+    test('it renders an endgame process creation_event', () => {
+      const actionName = 'creation_event';
+      const text = i18n.PROCESS_STARTED;
+      const endgameCreationEvent = {
+        ...mockEndgameCreationEvent,
+      };
+
+      const endgameProcessCreationEventRowRenderer = createEndgameProcessRowRenderer({
+        actionName,
+        text,
+      });
+
+      const wrapper = mount(
+        <TestProviders>
+          {endgameProcessCreationEventRowRenderer.isInstance(endgameCreationEvent) &&
+            endgameProcessCreationEventRowRenderer.renderRow({
+              browserFields: mockBrowserFields,
+              data: endgameCreationEvent,
+              timelineId: 'test',
+            })}
+        </TestProviders>
+      );
+
+      expect(wrapper.text()).toEqual(
+        'Arun\\Anvi-Acer@HD-obe-8bf77f54started processMicrosoft.Photos.exe(441684)C:\\Program Files\\WindowsApps\\Microsoft.Windows.Photos_2018.18091.17210.0_x64__8wekyb3d8bbwe\\Microsoft.Photos.exe-ServerName:App.AppXzst44mncqdg84v7sv6p7yznqwssy6f7f.mcavia parent processsvchost.exe(8)d4c97ed46046893141652e2ec0056a698f6445109949d7fcabbce331146889ee12563599116157778a22600d2a163d8112aed84562d06d7235b37895b68de56687895743'
+      );
+    });
+
+    test('it renders an endgame process termination_event', () => {
+      const actionName = 'termination_event';
+      const text = i18n.TERMINATED_PROCESS;
+      const endgameTerminationEvent = {
+        ...mockEndgameTerminationEvent,
+      };
+
+      const endgameProcessTerminationEventRowRenderer = createEndgameProcessRowRenderer({
+        actionName,
+        text,
+      });
+
+      const wrapper = mount(
+        <TestProviders>
+          {endgameProcessTerminationEventRowRenderer.isInstance(endgameTerminationEvent) &&
+            endgameProcessTerminationEventRowRenderer.renderRow({
+              browserFields: mockBrowserFields,
+              data: endgameTerminationEvent,
+              timelineId: 'test',
+            })}
+        </TestProviders>
+      );
+
+      expect(wrapper.text()).toEqual(
+        'Arun\\Anvi-Acer@HD-obe-8bf77f54terminated processRuntimeBroker.exe(442384)with exit code087976f3430cc99bc939e0694247c0759961a49832b87218f4313d6fc0bc3a776797255e72d5ed5c058d4785950eba7abaa057653bd4401441a21bf1abce6404f4231db4d'
+      );
+    });
+
+    test('it does NOT render the event if the action name does not match', () => {
+      const actionName = 'does_not_match';
+      const text = i18n.PROCESS_STARTED;
+      const endgameCreationEvent = {
+        ...mockEndgameCreationEvent,
+      };
+
+      const endgameProcessCreationEventRowRenderer = createEndgameProcessRowRenderer({
+        actionName,
+        text,
+      });
+
+      const wrapper = mount(
+        <TestProviders>
+          {endgameProcessCreationEventRowRenderer.isInstance(endgameCreationEvent) &&
+            endgameProcessCreationEventRowRenderer.renderRow({
+              browserFields: mockBrowserFields,
+              data: endgameCreationEvent,
+              timelineId: 'test',
+            })}
+        </TestProviders>
+      );
+
+      expect(wrapper.text()).toEqual('');
+    });
+
+    test('it does NOT render the event when the event category is NOT process', () => {
+      const actionName = 'creation_event';
+      const text = i18n.PROCESS_STARTED;
+      const endgameCreationEvent = {
+        ...mockEndgameCreationEvent,
+        event: {
+          ...mockEndgameCreationEvent.event,
+          category: ['something_else'],
+        },
+      };
+
+      const endgameProcessCreationEventRowRenderer = createEndgameProcessRowRenderer({
+        actionName,
+        text,
+      });
+
+      const wrapper = mount(
+        <TestProviders>
+          {endgameProcessCreationEventRowRenderer.isInstance(endgameCreationEvent) &&
+            endgameProcessCreationEventRowRenderer.renderRow({
+              browserFields: mockBrowserFields,
+              data: endgameCreationEvent,
+              timelineId: 'test',
+            })}
+        </TestProviders>
+      );
+
+      expect(wrapper.text()).toEqual('');
+    });
+
+    test('it does NOT render the event when both the action name and event category do NOT match', () => {
+      const actionName = 'does_not_match';
+      const text = i18n.PROCESS_STARTED;
+      const endgameCreationEvent = {
+        ...mockEndgameCreationEvent,
+        event: {
+          ...mockEndgameCreationEvent.event,
+          category: ['something_else'],
+        },
+      };
+
+      const endgameProcessCreationEventRowRenderer = createEndgameProcessRowRenderer({
+        actionName,
+        text,
+      });
+
+      const wrapper = mount(
+        <TestProviders>
+          {endgameProcessCreationEventRowRenderer.isInstance(endgameCreationEvent) &&
+            endgameProcessCreationEventRowRenderer.renderRow({
+              browserFields: mockBrowserFields,
+              data: endgameCreationEvent,
+              timelineId: 'test',
+            })}
+        </TestProviders>
+      );
+
+      expect(wrapper.text()).toEqual('');
+    });
+  });
+
+  describe('#createFimRowRenderer', () => {
+    test('it renders an endgame file_create_event', () => {
+      const actionName = 'file_create_event';
+      const text = i18n.CREATED_FILE;
+      const endgameFileCreateEvent = {
+        ...mockEndgameFileCreateEvent,
+      };
+
+      const endgameFileCreateEventRowRenderer = createFimRowRenderer({
+        actionName,
+        text,
+      });
+
+      const wrapper = mount(
+        <TestProviders>
+          {endgameFileCreateEventRowRenderer.isInstance(endgameFileCreateEvent) &&
+            endgameFileCreateEventRowRenderer.renderRow({
+              browserFields: mockBrowserFields,
+              data: endgameFileCreateEvent,
+              timelineId: 'test',
+            })}
+        </TestProviders>
+      );
+
+      expect(wrapper.text()).toEqual(
+        'Arun\\Anvi-Acer@HD-obe-8bf77f54created a fileinC:\\Users\\Arun\\AppData\\Local\\Google\\Chrome\\User Data\\Default\\63d78c21-e593-4484-b7a9-db33cd522ddc.tmpviachrome.exe(11620)'
+      );
+    });
+
+    test('it renders an endgame file_delete_event', () => {
+      const actionName = 'file_delete_event';
+      const text = i18n.DELETED_FILE;
+      const endgameFileDeleteEvent = {
+        ...mockEndgameFileDeleteEvent,
+      };
+
+      const endgameFileDeleteEventRowRenderer = createFimRowRenderer({
+        actionName,
+        text,
+      });
+
+      const wrapper = mount(
+        <TestProviders>
+          {endgameFileDeleteEventRowRenderer.isInstance(endgameFileDeleteEvent) &&
+            endgameFileDeleteEventRowRenderer.renderRow({
+              browserFields: mockBrowserFields,
+              data: endgameFileDeleteEvent,
+              timelineId: 'test',
+            })}
+        </TestProviders>
+      );
+
+      expect(wrapper.text()).toEqual(
+        'SYSTEM\\NT AUTHORITY@HD-v1s-d2118419deleted a filetmp000002f6inC:\\Windows\\TEMP\\tmp00000404\\tmp000002f6viaAmSvc.exe(1084)'
+      );
+    });
+
+    test('it renders a FIM (non-endgame) file created event', () => {
+      const actionName = 'created';
+      const text = i18n.CREATED_FILE;
+      const fimFileCreatedEvent = {
+        ...mockFimFileCreatedEvent,
+      };
+
+      const fileCreatedEventRowRenderer = createFimRowRenderer({
+        actionName,
+        text,
+      });
+
+      const wrapper = mount(
+        <TestProviders>
+          {fileCreatedEventRowRenderer.isInstance(fimFileCreatedEvent) &&
+            fileCreatedEventRowRenderer.renderRow({
+              browserFields: mockBrowserFields,
+              data: fimFileCreatedEvent,
+              timelineId: 'test',
+            })}
+        </TestProviders>
+      );
+
+      expect(wrapper.text()).toEqual('foohostcreated a filein/etc/subgidviaan unknown process');
+    });
+
+    test('it renders a FIM (non-endgame) file deleted event', () => {
+      const actionName = 'deleted';
+      const text = i18n.DELETED_FILE;
+      const fimFileDeletedEvent = {
+        ...mockFimFileDeletedEvent,
+      };
+
+      const fileDeletedEventRowRenderer = createFimRowRenderer({
+        actionName,
+        text,
+      });
+
+      const wrapper = mount(
+        <TestProviders>
+          {fileDeletedEventRowRenderer.isInstance(fimFileDeletedEvent) &&
+            fileDeletedEventRowRenderer.renderRow({
+              browserFields: mockBrowserFields,
+              data: fimFileDeletedEvent,
+              timelineId: 'test',
+            })}
+        </TestProviders>
+      );
+
+      expect(wrapper.text()).toEqual(
+        'foohostdeleted a filein/etc/gshadow.lockviaan unknown process'
+      );
+    });
+
+    test('it does NOT render an event if the action name does not match', () => {
+      const actionName = 'does_not_match';
+      const text = i18n.CREATED_FILE;
+      const endgameFileCreateEvent = {
+        ...mockEndgameFileCreateEvent,
+      };
+
+      const endgameFileCreateEventRowRenderer = createFimRowRenderer({
+        actionName,
+        text,
+      });
+
+      const wrapper = mount(
+        <TestProviders>
+          {endgameFileCreateEventRowRenderer.isInstance(endgameFileCreateEvent) &&
+            endgameFileCreateEventRowRenderer.renderRow({
+              browserFields: mockBrowserFields,
+              data: endgameFileCreateEvent,
+              timelineId: 'test',
+            })}
+        </TestProviders>
+      );
+
+      expect(wrapper.text()).toEqual('');
+    });
+
+    test('it does NOT render an Endgame file_create_event when category is NOT file', () => {
+      const actionName = 'file_create_event';
+      const text = i18n.CREATED_FILE;
+      const endgameFileCreateEvent = {
+        ...mockEndgameFileCreateEvent,
+        event: {
+          ...mockEndgameFileCreateEvent.event,
+          category: ['something_else'],
+        },
+      };
+
+      const endgameFileCreateEventRowRenderer = createFimRowRenderer({
+        actionName,
+        text,
+      });
+
+      const wrapper = mount(
+        <TestProviders>
+          {endgameFileCreateEventRowRenderer.isInstance(endgameFileCreateEvent) &&
+            endgameFileCreateEventRowRenderer.renderRow({
+              browserFields: mockBrowserFields,
+              data: endgameFileCreateEvent,
+              timelineId: 'test',
+            })}
+        </TestProviders>
+      );
+
+      expect(wrapper.text()).toEqual('');
+    });
+
+    test('it does NOT render a FIM (non-Endgame) file created event when the event dataset is NOT file', () => {
+      const actionName = 'created';
+      const text = i18n.CREATED_FILE;
+      const fimFileCreatedEvent = {
+        ...mockFimFileCreatedEvent,
+        event: {
+          ...mockEndgameFileCreateEvent.event,
+          dataset: ['something_else'],
+        },
+      };
+
+      const fileCreatedEventRowRenderer = createFimRowRenderer({
+        actionName,
+        text,
+      });
+
+      const wrapper = mount(
+        <TestProviders>
+          {fileCreatedEventRowRenderer.isInstance(fimFileCreatedEvent) &&
+            fileCreatedEventRowRenderer.renderRow({
+              browserFields: mockBrowserFields,
+              data: fimFileCreatedEvent,
+              timelineId: 'test',
+            })}
+        </TestProviders>
+      );
+
+      expect(wrapper.text()).toEqual('');
+    });
+  });
+
+  describe('#createSocketRowRenderer', () => {
+    test('it renders an Endgame ipv4_connection_accept_event', () => {
+      const actionName = 'ipv4_connection_accept_event';
+      const text = i18n.ACCEPTED_A_CONNECTION_VIA;
+      const ipv4ConnectionAcceptEvent = {
+        ...mockEndgameIpv4ConnectionAcceptEvent,
+      };
+
+      const endgameIpv4ConnectionAcceptEventRowRenderer = createSocketRowRenderer({
+        actionName,
+        text,
+      });
+
+      const wrapper = mount(
+        <TestProviders>
+          {endgameIpv4ConnectionAcceptEventRowRenderer.isInstance(ipv4ConnectionAcceptEvent) &&
+            endgameIpv4ConnectionAcceptEventRowRenderer.renderRow({
+              browserFields: mockBrowserFields,
+              data: ipv4ConnectionAcceptEvent,
+              timelineId: 'test',
+            })}
+        </TestProviders>
+      );
+
+      expect(wrapper.text()).toEqual(
+        'SYSTEM\\NT AUTHORITY@HD-gqf-0af7b4feaccepted a connection viaAmSvc.exe(1084)tcp1:network-community_idSource127.0.0.1:49306Destination127.0.0.1:49305'
+      );
+    });
+
+    test('it renders an Endgame ipv6_connection_accept_event', () => {
+      const actionName = 'ipv6_connection_accept_event';
+      const text = i18n.ACCEPTED_A_CONNECTION_VIA;
+      const ipv6ConnectionAcceptEvent = {
+        ...mockEndgameIpv6ConnectionAcceptEvent,
+      };
+
+      const endgameIpv6ConnectionAcceptEventRowRenderer = createSocketRowRenderer({
+        actionName,
+        text,
+      });
+
+      const wrapper = mount(
+        <TestProviders>
+          {endgameIpv6ConnectionAcceptEventRowRenderer.isInstance(ipv6ConnectionAcceptEvent) &&
+            endgameIpv6ConnectionAcceptEventRowRenderer.renderRow({
+              browserFields: mockBrowserFields,
+              data: ipv6ConnectionAcceptEvent,
+              timelineId: 'test',
+            })}
+        </TestProviders>
+      );
+
+      expect(wrapper.text()).toEqual(
+        'SYSTEM\\NT AUTHORITY@HD-55b-3ec87f66accepted a connection via(4)tcp1:network-community_idSource::1:51324Destination::1:5357'
+      );
+    });
+
+    test('it renders an Endgame ipv4_disconnect_received_event', () => {
+      const actionName = 'ipv4_disconnect_received_event';
+      const text = i18n.DISCONNECTED_VIA;
+      const ipv4DisconnectReceivedEvent = {
+        ...mockEndgameIpv4DisconnectReceivedEvent,
+      };
+
+      const endgameIpv4DisconnectReceivedEventRowRenderer = createSocketRowRenderer({
+        actionName,
+        text,
+      });
+
+      const wrapper = mount(
+        <TestProviders>
+          {endgameIpv4DisconnectReceivedEventRowRenderer.isInstance(ipv4DisconnectReceivedEvent) &&
+            endgameIpv4DisconnectReceivedEventRowRenderer.renderRow({
+              browserFields: mockBrowserFields,
+              data: ipv4DisconnectReceivedEvent,
+              timelineId: 'test',
+            })}
+        </TestProviders>
+      );
+
+      expect(wrapper.text()).toEqual(
+        'Arun\\Anvi-Acer@HD-obe-8bf77f54disconnected viachrome.exe(11620)8.1KBtcp1:LxYHJJv98b2O0fNccXu6HheXmwk=Source192.168.0.6:59356(25.78%)2.1KB(74.22%)6KBDestination10.156.162.53:443'
+      );
+    });
+
+    test('it renders an Endgame ipv6_disconnect_received_event', () => {
+      const actionName = 'ipv6_disconnect_received_event';
+      const text = i18n.DISCONNECTED_VIA;
+      const ipv6DisconnectReceivedEvent = {
+        ...mockEndgameIpv6DisconnectReceivedEvent,
+      };
+
+      const endgameIpv6DisconnectReceivedEventRowRenderer = createSocketRowRenderer({
+        actionName,
+        text,
+      });
+
+      const wrapper = mount(
+        <TestProviders>
+          {endgameIpv6DisconnectReceivedEventRowRenderer.isInstance(ipv6DisconnectReceivedEvent) &&
+            endgameIpv6DisconnectReceivedEventRowRenderer.renderRow({
+              browserFields: mockBrowserFields,
+              data: ipv6DisconnectReceivedEvent,
+              timelineId: 'test',
+            })}
+        </TestProviders>
+      );
+
+      expect(wrapper.text()).toEqual(
+        'SYSTEM\\NT AUTHORITY@HD-55b-3ec87f66disconnected via(4)7.9KBtcp1:ZylzQhsB1dcptA2t4DY8S6l9o8E=Source::1:51338(96.92%)7.7KB(3.08%)249BDestination::1:2869'
+      );
+    });
+
+    test('it renders a (non-Endgame) socket_opened event', () => {
+      const actionName = 'socket_opened';
+      const text = i18n.SOCKET_OPENED;
+      const socketOpenedEvent = {
+        ...mockSocketOpenedEvent,
+      };
+
+      const socketOpenedEventRowRenderer = createSocketRowRenderer({
+        actionName,
+        text,
+      });
+
+      const wrapper = mount(
+        <TestProviders>
+          {socketOpenedEventRowRenderer.isInstance(socketOpenedEvent) &&
+            socketOpenedEventRowRenderer.renderRow({
+              browserFields: mockBrowserFields,
+              data: socketOpenedEvent,
+              timelineId: 'test',
+            })}
+        </TestProviders>
+      );
+
+      expect(wrapper.text()).toEqual(
+        'root@foohostopened a socket withgoogle_accounts(2166)Outbound socket (10.4.20.1:59554 -> 10.1.2.3:80) Ooutboundtcp1:network-community_idSource10.4.20.1:59554Destination10.1.2.3:80'
+      );
+    });
+
+    test('it renders a (non-Endgame) socket_closed event', () => {
+      const actionName = 'socket_closed';
+      const text = i18n.SOCKET_CLOSED;
+      const socketClosedEvent = {
+        ...mockSocketClosedEvent,
+      };
+
+      const socketClosedEventRowRenderer = createSocketRowRenderer({
+        actionName,
+        text,
+      });
+
+      const wrapper = mount(
+        <TestProviders>
+          {socketClosedEventRowRenderer.isInstance(socketClosedEvent) &&
+            socketClosedEventRowRenderer.renderRow({
+              browserFields: mockBrowserFields,
+              data: socketClosedEvent,
+              timelineId: 'test',
+            })}
+        </TestProviders>
+      );
+
+      expect(wrapper.text()).toEqual(
+        'root@foohostclosed a socket withgoogle_accounts(2166)Outbound socket (10.4.20.1:59508 -> 10.1.2.3:80) Coutboundtcp1:network-community_idSource10.4.20.1:59508Destination10.1.2.3:80'
+      );
+    });
+
+    test('it does NOT render an event if the action name does not match', () => {
+      const actionName = 'does_not_match';
+      const text = i18n.ACCEPTED_A_CONNECTION_VIA;
+      const ipv4ConnectionAcceptEvent = {
+        ...mockEndgameIpv4ConnectionAcceptEvent,
+      };
+
+      const endgameIpv4ConnectionAcceptEventRowRenderer = createSocketRowRenderer({
+        actionName,
+        text,
+      });
+
+      const wrapper = mount(
+        <TestProviders>
+          {endgameIpv4ConnectionAcceptEventRowRenderer.isInstance(ipv4ConnectionAcceptEvent) &&
+            endgameIpv4ConnectionAcceptEventRowRenderer.renderRow({
+              browserFields: mockBrowserFields,
+              data: ipv4ConnectionAcceptEvent,
+              timelineId: 'test',
+            })}
+        </TestProviders>
+      );
+
+      expect(wrapper.text()).toEqual('');
+    });
+  });
+
+  describe('#createSecurityEventRowRenderer', () => {
+    test('it renders an Endgame user_logon event', () => {
+      const actionName = 'user_logon';
+      const userLogonEvent = {
+        ...mockEndgameUserLogon,
+      };
+
+      const userLogonEventRowRenderer = createSecurityEventRowRenderer({ actionName });
+
+      const wrapper = mount(
+        <TestProviders>
+          {userLogonEventRowRenderer.isInstance(userLogonEvent) &&
+            userLogonEventRowRenderer.renderRow({
+              browserFields: mockBrowserFields,
+              data: userLogonEvent,
+              timelineId: 'test',
+            })}
+        </TestProviders>
+      );
+
+      expect(wrapper.text()).toEqual(
+        'SYSTEM\\NT AUTHORITY@HD-v1s-d2118419successfully logged inusing logon type5 - Service(target logon ID0x3e7)viaC:\\Windows\\System32\\services.exe(432)as requested by subjectWIN-Q3DOP1UKA81$(subject logon ID0x3e7)4624'
+      );
+    });
+
+    test('it renders an Endgame admin_logon event', () => {
+      const actionName = 'admin_logon';
+      const adminLogonEvent = {
+        ...mockEndgameAdminLogon,
+      };
+
+      const adminLogonEventRowRenderer = createSecurityEventRowRenderer({ actionName });
+
+      const wrapper = mount(
+        <TestProviders>
+          {adminLogonEventRowRenderer.isInstance(adminLogonEvent) &&
+            adminLogonEventRowRenderer.renderRow({
+              browserFields: mockBrowserFields,
+              data: adminLogonEvent,
+              timelineId: 'test',
+            })}
+        </TestProviders>
+      );
+
+      expect(wrapper.text()).toEqual(
+        'With special privileges,SYSTEM\\NT AUTHORITY@HD-obe-8bf77f54successfully logged inviaC:\\Windows\\System32\\lsass.exe(964)as requested by subjectSYSTEM\\NT AUTHORITY4672'
+      );
+    });
+
+    test('it renders an Endgame explicit_user_logon event', () => {
+      const actionName = 'explicit_user_logon';
+      const explicitUserLogonEvent = {
+        ...mockEndgameExplicitUserLogon,
+      };
+
+      const explicitUserLogonEventRowRenderer = createSecurityEventRowRenderer({ actionName });
+
+      const wrapper = mount(
+        <TestProviders>
+          {explicitUserLogonEventRowRenderer.isInstance(explicitUserLogonEvent) &&
+            explicitUserLogonEventRowRenderer.renderRow({
+              browserFields: mockBrowserFields,
+              data: explicitUserLogonEvent,
+              timelineId: 'test',
+            })}
+        </TestProviders>
+      );
+
+      expect(wrapper.text()).toEqual(
+        'A login was attempted using explicit credentialsArun\\Anvi-AcertoHD-55b-3ec87f66viaC:\\Windows\\System32\\svchost.exe(1736)as requested by subjectANVI-ACER$\\WORKGROUP(subject logon ID0x3e7)4648'
+      );
+    });
+
+    test('it renders an Endgame user_logoff event', () => {
+      const actionName = 'user_logoff';
+      const userLogoffEvent = {
+        ...mockEndgameUserLogoff,
+      };
+
+      const userLogoffEventRowRenderer = createSecurityEventRowRenderer({ actionName });
+
+      const wrapper = mount(
+        <TestProviders>
+          {userLogoffEventRowRenderer.isInstance(userLogoffEvent) &&
+            userLogoffEventRowRenderer.renderRow({
+              browserFields: mockBrowserFields,
+              data: userLogoffEvent,
+              timelineId: 'test',
+            })}
+        </TestProviders>
+      );
+
+      expect(wrapper.text()).toEqual(
+        'Arun\\Anvi-Acer@HD-55b-3ec87f66logged offusing logon type2 - Interactive(target logon ID0x16db41e)viaC:\\Windows\\System32\\lsass.exe(964)4634'
+      );
+    });
+
+    test('it does NOT render an event if the action name does not match', () => {
+      const actionName = 'does_not_match';
+      const userLogonEvent = {
+        ...mockEndgameUserLogon,
+      };
+
+      const userLogonEventRowRenderer = createSecurityEventRowRenderer({ actionName });
+
+      const wrapper = mount(
+        <TestProviders>
+          {userLogonEventRowRenderer.isInstance(userLogonEvent) &&
+            userLogonEventRowRenderer.renderRow({
+              browserFields: mockBrowserFields,
+              data: userLogonEvent,
+              timelineId: 'test',
+            })}
+        </TestProviders>
+      );
+
+      expect(wrapper.text()).toEqual('');
+    });
+  });
+
+  describe('#createDnsRowRenderer', () => {
+    test('it renders an Endgame DNS request_event', () => {
+      const requestEvent = {
+        ...mockEndgameDnsRequest,
+      };
+
+      const dnsRowRenderer = createDnsRowRenderer();
+
+      const wrapper = mount(
+        <TestProviders>
+          {dnsRowRenderer.isInstance(requestEvent) &&
+            dnsRowRenderer.renderRow({
+              browserFields: mockBrowserFields,
+              data: requestEvent,
+              timelineId: 'test',
+            })}
+        </TestProviders>
+      );
+
+      expect(wrapper.text()).toEqual(
+        'SYSTEM\\NT AUTHORITY@HD-obe-8bf77f54asked forupdate.googleapis.comwith question typeA, which resolved to10.100.197.67viaGoogleUpdate.exe(443192)3008dns'
+      );
+    });
+
+    test('it renders a non-Endgame DNS event', () => {
+      const dnsEvent = {
+        ...mockDnsEvent,
+      };
+
+      const dnsRowRenderer = createDnsRowRenderer();
+
+      const wrapper = mount(
+        <TestProviders>
+          {dnsRowRenderer.isInstance(dnsEvent) &&
+            dnsRowRenderer.renderRow({
+              browserFields: mockBrowserFields,
+              data: dnsEvent,
+              timelineId: 'test',
+            })}
+        </TestProviders>
+      );
+
+      expect(wrapper.text()).toEqual(
+        'iot.example.comasked forlookup.example.comwith question typeA, which resolved to10.1.2.3(response code:NOERROR)viaan unknown process6.937500msOct 8, 2019 @ 10:05:23.241Oct 8, 2019 @ 10:05:23.248outbounddns177Budp1:network-community_idSource10.9.9.9:58732(22.60%)40B(77.40%)137BDestination10.1.1.1:53OceaniaAustralia🇦🇺AU'
+      );
+    });
+
+    test('it does NOT render an event if dns.question.type is not provided', () => {
+      const requestEvent = {
+        ...mockEndgameDnsRequest,
+        dns: {
+          ...mockDnsEvent.dns,
+          question: {
+            name: ['lookup.example.com'],
+          },
+        },
+      };
+
+      const dnsRowRenderer = createDnsRowRenderer();
+
+      const wrapper = mount(
+        <TestProviders>
+          {dnsRowRenderer.isInstance(requestEvent) &&
+            dnsRowRenderer.renderRow({
+              browserFields: mockBrowserFields,
+              data: requestEvent,
+              timelineId: 'test',
+            })}
+        </TestProviders>
+      );
+
+      expect(wrapper.text()).toEqual('');
+    });
+
+    test('it does NOT render an event if dns.question.name is not provided', () => {
+      const requestEvent = {
+        ...mockEndgameDnsRequest,
+        dns: {
+          ...mockDnsEvent.dns,
+          question: {
+            type: ['A'],
+          },
+        },
+      };
+
+      const dnsRowRenderer = createDnsRowRenderer();
+
+      const wrapper = mount(
+        <TestProviders>
+          {dnsRowRenderer.isInstance(requestEvent) &&
+            dnsRowRenderer.renderRow({
+              browserFields: mockBrowserFields,
+              data: requestEvent,
+              timelineId: 'test',
+            })}
+        </TestProviders>
+      );
+
+      expect(wrapper.text()).toEqual('');
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/system/generic_row_renderer.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/generic_row_renderer.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/system/generic_row_renderer.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/generic_row_renderer.tsx
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/system/package.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/package.test.tsx
similarity index 95%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/system/package.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/package.test.tsx
index 100c8fbe5a9888..56f9452ba40b8d 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/system/package.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/package.test.tsx
@@ -7,8 +7,8 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 
-import { TestProviders } from '../../../../../mock';
-import { useMountAppended } from '../../../../../utils/use_mount_appended';
+import { TestProviders } from '../../../../../../common/mock';
+import { useMountAppended } from '../../../../../../common/utils/use_mount_appended';
 import { Package } from './package';
 
 describe('Package', () => {
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/system/package.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/package.tsx
similarity index 95%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/system/package.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/package.tsx
index a28e850e2af968..7aa66f8db88305 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/system/package.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/package.tsx
@@ -6,7 +6,7 @@
 
 import React from 'react';
 
-import { DraggableBadge } from '../../../../draggables';
+import { DraggableBadge } from '../../../../../../common/components/draggables';
 import { TokensFlexItem } from '../helpers';
 
 interface Props {
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/system/translations.ts b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/system/translations.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/system/translations.ts
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/translations.ts b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/translations.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/translations.ts
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/unknown_column_renderer.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/unknown_column_renderer.test.tsx
similarity index 91%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/unknown_column_renderer.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/unknown_column_renderer.test.tsx
index 73d1d5cb441ef3..f49318171e8b67 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/unknown_column_renderer.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/unknown_column_renderer.test.tsx
@@ -10,9 +10,9 @@ import { cloneDeep } from 'lodash';
 import React from 'react';
 import { ThemeProvider } from 'styled-components';
 
-import { TimelineNonEcsData } from '../../../../graphql/types';
-import { defaultHeaders, mockTimelineData } from '../../../../mock';
-import { getEmptyValue } from '../../../empty_value';
+import { TimelineNonEcsData } from '../../../../../graphql/types';
+import { defaultHeaders, mockTimelineData } from '../../../../../common/mock';
+import { getEmptyValue } from '../../../../../common/components/empty_value';
 import { unknownColumnRenderer } from './unknown_column_renderer';
 import { getValues } from './helpers';
 
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/unknown_column_renderer.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/unknown_column_renderer.tsx
similarity index 83%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/unknown_column_renderer.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/unknown_column_renderer.tsx
index 4b4a4a3d43780d..49bc61f00a63e2 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/unknown_column_renderer.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/unknown_column_renderer.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { getEmptyTagValue } from '../../../empty_value';
+import { getEmptyTagValue } from '../../../../../common/components/empty_value';
 import { ColumnRenderer } from './column_renderer';
 
 export const unknownColumnRenderer: ColumnRenderer = {
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/user_host_working_dir.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/user_host_working_dir.test.tsx
similarity index 98%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/user_host_working_dir.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/user_host_working_dir.test.tsx
index 45b670acb569ab..7f460d30d709c0 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/user_host_working_dir.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/user_host_working_dir.test.tsx
@@ -7,9 +7,9 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 
-import { TestProviders } from '../../../../mock';
+import { TestProviders } from '../../../../../common/mock';
 import { UserHostWorkingDir } from './user_host_working_dir';
-import { useMountAppended } from '../../../../utils/use_mount_appended';
+import { useMountAppended } from '../../../../../common/utils/use_mount_appended';
 
 describe('UserHostWorkingDir', () => {
   const mount = useMountAppended();
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/user_host_working_dir.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/user_host_working_dir.tsx
similarity index 96%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/user_host_working_dir.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/user_host_working_dir.tsx
index d370afee2585f5..80585b37cfd9e6 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/user_host_working_dir.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/user_host_working_dir.tsx
@@ -6,7 +6,7 @@
 
 import React from 'react';
 
-import { DraggableBadge } from '../../../draggables';
+import { DraggableBadge } from '../../../../../common/components/draggables';
 import { TokensFlexItem } from './helpers';
 import { HostWorkingDir } from './host_working_dir';
 
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/zeek/__snapshots__/zeek_details.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/zeek/__snapshots__/zeek_details.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/zeek/__snapshots__/zeek_details.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/zeek/__snapshots__/zeek_details.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/zeek/__snapshots__/zeek_row_renderer.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/zeek/__snapshots__/zeek_row_renderer.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/zeek/__snapshots__/zeek_row_renderer.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/zeek/__snapshots__/zeek_row_renderer.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/zeek/__snapshots__/zeek_signature.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/zeek/__snapshots__/zeek_signature.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/zeek/__snapshots__/zeek_signature.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/zeek/__snapshots__/zeek_signature.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/zeek/translations.ts b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/zeek/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/zeek/translations.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/zeek/translations.ts
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_details.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/zeek/zeek_details.test.tsx
similarity index 95%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_details.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/zeek/zeek_details.test.tsx
index b45e4c41762bc7..d3ec7922342c36 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_details.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/zeek/zeek_details.test.tsx
@@ -6,9 +6,9 @@
 
 import React from 'react';
 
-import { mockBrowserFields } from '../../../../../containers/source/mock';
-import { mockTimelineData, TestProviders } from '../../../../../mock';
-import { useMountAppended } from '../../../../../utils/use_mount_appended';
+import { mockBrowserFields } from '../../../../../../common/containers/source/mock';
+import { mockTimelineData, TestProviders } from '../../../../../../common/mock';
+import { useMountAppended } from '../../../../../../common/utils/use_mount_appended';
 import { ZeekDetails } from './zeek_details';
 
 describe('ZeekDetails', () => {
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_details.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/zeek/zeek_details.tsx
similarity index 88%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_details.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/zeek/zeek_details.tsx
index d8561186b45462..4f991429d6a4d3 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_details.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/zeek/zeek_details.tsx
@@ -8,8 +8,8 @@ import { EuiSpacer } from '@elastic/eui';
 import React from 'react';
 import styled from 'styled-components';
 
-import { BrowserFields } from '../../../../../containers/source';
-import { Ecs } from '../../../../../graphql/types';
+import { BrowserFields } from '../../../../../../common/containers/source';
+import { Ecs } from '../../../../../../graphql/types';
 
 import { NetflowRenderer } from '../netflow';
 import { ZeekSignature } from './zeek_signature';
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_row_renderer.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/zeek/zeek_row_renderer.test.tsx
similarity index 87%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_row_renderer.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/zeek/zeek_row_renderer.test.tsx
index 456b93eb829ee5..2197ccb0ce2e00 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_row_renderer.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/zeek/zeek_row_renderer.test.tsx
@@ -8,10 +8,10 @@ import { shallow } from 'enzyme';
 import { cloneDeep } from 'lodash/fp';
 import React from 'react';
 
-import { mockBrowserFields } from '../../../../../containers/source/mock';
-import { Ecs } from '../../../../../graphql/types';
-import { mockTimelineData, TestProviders } from '../../../../../mock';
-import { useMountAppended } from '../../../../../utils/use_mount_appended';
+import { mockBrowserFields } from '../../../../../../common/containers/source/mock';
+import { Ecs } from '../../../../../../graphql/types';
+import { mockTimelineData, TestProviders } from '../../../../../../common/mock';
+import { useMountAppended } from '../../../../../../common/utils/use_mount_appended';
 import { zeekRowRenderer } from './zeek_row_renderer';
 
 describe('zeek_row_renderer', () => {
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_row_renderer.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/zeek/zeek_row_renderer.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_row_renderer.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/zeek/zeek_row_renderer.tsx
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_signature.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/zeek/zeek_signature.test.tsx
similarity index 97%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_signature.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/zeek/zeek_signature.test.tsx
index f199b537f1be04..f416da5625042c 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_signature.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/zeek/zeek_signature.test.tsx
@@ -8,9 +8,9 @@ import { shallow } from 'enzyme';
 import { cloneDeep } from 'lodash/fp';
 import React from 'react';
 
-import { Ecs } from '../../../../../graphql/types';
-import { mockTimelineData, TestProviders } from '../../../../../mock';
-import { useMountAppended } from '../../../../../utils/use_mount_appended';
+import { Ecs } from '../../../../../../graphql/types';
+import { mockTimelineData, TestProviders } from '../../../../../../common/mock';
+import { useMountAppended } from '../../../../../../common/utils/use_mount_appended';
 import {
   ZeekSignature,
   extractStateValue,
diff --git a/x-pack/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_signature.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/zeek/zeek_signature.tsx
similarity index 94%
rename from x-pack/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_signature.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/zeek/zeek_signature.tsx
index 4cb8140e22ceff..cdf4a8cba68abb 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_signature.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/renderers/zeek/zeek_signature.tsx
@@ -9,12 +9,15 @@ import { get } from 'lodash/fp';
 import React from 'react';
 import styled from 'styled-components';
 
-import { Ecs } from '../../../../../graphql/types';
-import { DragEffects, DraggableWrapper } from '../../../../drag_and_drop/draggable_wrapper';
-import { escapeDataProviderId } from '../../../../drag_and_drop/helpers';
-import { ExternalLinkIcon } from '../../../../external_link_icon';
-import { GoogleLink, ReputationLink } from '../../../../links';
-import { Provider } from '../../../../timeline/data_providers/provider';
+import { Ecs } from '../../../../../../graphql/types';
+import {
+  DragEffects,
+  DraggableWrapper,
+} from '../../../../../../common/components/drag_and_drop/draggable_wrapper';
+import { escapeDataProviderId } from '../../../../../../common/components/drag_and_drop/helpers';
+import { ExternalLinkIcon } from '../../../../../../common/components/external_link_icon';
+import { GoogleLink, ReputationLink } from '../../../../../../common/components/links';
+import { Provider } from '../../../data_providers/provider';
 import { IS_OPERATOR } from '../../../data_providers/data_provider';
 
 import * as i18n from './translations';
diff --git a/x-pack/plugins/siem/public/components/timeline/body/sort/__snapshots__/sort_indicator.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/body/sort/__snapshots__/sort_indicator.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/sort/__snapshots__/sort_indicator.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/sort/__snapshots__/sort_indicator.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/body/sort/index.ts b/x-pack/plugins/siem/public/timelines/components/timeline/body/sort/index.ts
new file mode 100644
index 00000000000000..93fbe314e1dad1
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/sort/index.ts
@@ -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 { Direction } from '../../../../../graphql/types';
+import { ColumnId } from '../column_id';
+
+/** Specifies a column's sort direction */
+export type SortDirection = 'none' | Direction;
+
+/** Specifies which column the timeline is sorted on */
+export interface Sort {
+  columnId: ColumnId;
+  sortDirection: SortDirection;
+}
diff --git a/x-pack/plugins/siem/public/components/timeline/body/sort/sort_indicator.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/sort/sort_indicator.test.tsx
similarity index 96%
rename from x-pack/plugins/siem/public/components/timeline/body/sort/sort_indicator.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/sort/sort_indicator.test.tsx
index db3e96a4e26502..43738da44b17f2 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/sort/sort_indicator.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/sort/sort_indicator.test.tsx
@@ -7,7 +7,7 @@
 import { mount, shallow } from 'enzyme';
 import React from 'react';
 
-import { Direction } from '../../../../graphql/types';
+import { Direction } from '../../../../../graphql/types';
 
 import { getDirection, SortIndicator } from './sort_indicator';
 
diff --git a/x-pack/plugins/siem/public/components/timeline/body/sort/sort_indicator.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/sort/sort_indicator.tsx
similarity index 95%
rename from x-pack/plugins/siem/public/components/timeline/body/sort/sort_indicator.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/sort/sort_indicator.tsx
index 74fb1e5e4034c8..c148e2f6c6295d 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/sort/sort_indicator.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/sort/sort_indicator.tsx
@@ -7,7 +7,7 @@
 import { EuiIcon } from '@elastic/eui';
 import React from 'react';
 
-import { Direction } from '../../../../graphql/types';
+import { Direction } from '../../../../../graphql/types';
 
 import { SortDirection } from '.';
 
diff --git a/x-pack/plugins/siem/public/components/timeline/body/stateful_body.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/stateful_body.test.tsx
similarity index 96%
rename from x-pack/plugins/siem/public/components/timeline/body/stateful_body.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/stateful_body.test.tsx
index 4945939ac2bdc4..126f3439f46364 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/stateful_body.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/stateful_body.test.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mockBrowserFields } from '../../../containers/source/mock';
+import { mockBrowserFields } from '../../../../common/containers/source/mock';
 
 import { defaultHeaders } from './column_headers/default_headers';
 import { getColumnHeaders } from './column_headers/helpers';
diff --git a/x-pack/plugins/siem/public/components/timeline/body/stateful_body.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/body/stateful_body.tsx
similarity index 95%
rename from x-pack/plugins/siem/public/components/timeline/body/stateful_body.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/stateful_body.tsx
index 76f26d3dda5afc..1aed63ff71d6d4 100644
--- a/x-pack/plugins/siem/public/components/timeline/body/stateful_body.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/body/stateful_body.tsx
@@ -10,13 +10,14 @@ import React, { useCallback, useEffect } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 import deepEqual from 'fast-deep-equal';
 
-import { BrowserFields } from '../../../containers/source';
-import { TimelineItem } from '../../../graphql/types';
-import { Note } from '../../../lib/note';
-import { appSelectors, State, timelineSelectors } from '../../../store';
-import { timelineActions, appActions } from '../../../store/actions';
+import { BrowserFields } from '../../../../common/containers/source';
+import { TimelineItem } from '../../../../graphql/types';
+import { Note } from '../../../../common/lib/note';
+import { appSelectors, State } from '../../../../common/store';
+import { appActions } from '../../../../common/store/actions';
 import { ColumnHeaderOptions, TimelineModel } from '../../../store/timeline/model';
 import { timelineDefaults } from '../../../store/timeline/defaults';
+import { timelineActions, timelineSelectors } from '../../../store/timeline';
 import { AddNoteToEvent, UpdateNote } from '../../notes/helpers';
 import {
   OnColumnRemoved,
diff --git a/x-pack/plugins/siem/public/components/timeline/body/translations.ts b/x-pack/plugins/siem/public/timelines/components/timeline/body/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/body/translations.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/body/translations.ts
diff --git a/x-pack/plugins/siem/public/components/timeline/data_providers/__snapshots__/data_providers.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/__snapshots__/data_providers.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/data_providers/__snapshots__/data_providers.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/data_providers/__snapshots__/data_providers.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/timeline/data_providers/__snapshots__/empty.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/__snapshots__/empty.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/data_providers/__snapshots__/empty.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/data_providers/__snapshots__/empty.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/timeline/data_providers/__snapshots__/provider.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/__snapshots__/provider.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/data_providers/__snapshots__/provider.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/data_providers/__snapshots__/provider.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/timeline/data_providers/__snapshots__/providers.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/__snapshots__/providers.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/data_providers/__snapshots__/providers.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/data_providers/__snapshots__/providers.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/components/timeline/data_providers/data_provider.ts b/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/data_provider.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/data_providers/data_provider.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/data_providers/data_provider.ts
diff --git a/x-pack/plugins/siem/public/components/timeline/data_providers/data_providers.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/data_providers.test.tsx
similarity index 94%
rename from x-pack/plugins/siem/public/components/timeline/data_providers/data_providers.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/data_providers/data_providers.test.tsx
index b77d37e8e31ab3..54e7cb20aeed30 100644
--- a/x-pack/plugins/siem/public/components/timeline/data_providers/data_providers.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/data_providers.test.tsx
@@ -7,8 +7,8 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 
-import { TestProviders } from '../../../mock/test_providers';
-import { useMountAppended } from '../../../utils/use_mount_appended';
+import { TestProviders } from '../../../../common/mock/test_providers';
+import { useMountAppended } from '../../../../common/utils/use_mount_appended';
 
 import { DataProviders } from '.';
 import { DataProvider } from './data_provider';
diff --git a/x-pack/plugins/siem/public/components/timeline/data_providers/empty.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/empty.test.tsx
similarity index 92%
rename from x-pack/plugins/siem/public/components/timeline/data_providers/empty.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/data_providers/empty.test.tsx
index 10586657b52a3d..9cc5704808c66c 100644
--- a/x-pack/plugins/siem/public/components/timeline/data_providers/empty.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/empty.test.tsx
@@ -8,7 +8,7 @@ import { mount, shallow } from 'enzyme';
 import React from 'react';
 
 import { Empty } from './empty';
-import { TestProviders } from '../../../mock/test_providers';
+import { TestProviders } from '../../../../common/mock/test_providers';
 
 describe('Empty', () => {
   describe('rendering', () => {
diff --git a/x-pack/plugins/siem/public/components/timeline/data_providers/empty.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/empty.tsx
similarity index 98%
rename from x-pack/plugins/siem/public/components/timeline/data_providers/empty.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/data_providers/empty.tsx
index 1c225eba20b4f9..84f533977a9a30 100644
--- a/x-pack/plugins/siem/public/components/timeline/data_providers/empty.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/empty.tsx
@@ -8,7 +8,7 @@ import { EuiBadge, EuiText } from '@elastic/eui';
 import React from 'react';
 import styled from 'styled-components';
 
-import { AndOrBadge } from '../../and_or_badge';
+import { AndOrBadge } from '../and_or_badge';
 
 import * as i18n from './translations';
 
diff --git a/x-pack/plugins/siem/public/components/timeline/data_providers/helpers.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/helpers.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/data_providers/helpers.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/data_providers/helpers.tsx
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/index.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/index.tsx
new file mode 100644
index 00000000000000..13c91f25c88004
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/index.tsx
@@ -0,0 +1,135 @@
+/*
+ * 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 { rgba } from 'polished';
+import React from 'react';
+import styled from 'styled-components';
+
+import { BrowserFields } from '../../../../common/containers/source';
+import { DroppableWrapper } from '../../../../common/components/drag_and_drop/droppable_wrapper';
+import {
+  droppableTimelineProvidersPrefix,
+  IS_DRAGGING_CLASS_NAME,
+} from '../../../../common/components/drag_and_drop/helpers';
+import {
+  OnDataProviderEdited,
+  OnDataProviderRemoved,
+  OnToggleDataProviderEnabled,
+  OnToggleDataProviderExcluded,
+} from '../events';
+import { TimelineContext } from '../timeline_context';
+
+import { DataProvider } from './data_provider';
+import { Empty } from './empty';
+import { Providers } from './providers';
+
+interface Props {
+  browserFields: BrowserFields;
+  id: string;
+  dataProviders: DataProvider[];
+  onDataProviderEdited: OnDataProviderEdited;
+  onDataProviderRemoved: OnDataProviderRemoved;
+  onToggleDataProviderEnabled: OnToggleDataProviderEnabled;
+  onToggleDataProviderExcluded: OnToggleDataProviderExcluded;
+  show: boolean;
+}
+
+const DropTargetDataProvidersContainer = styled.div`
+  padding: 2px 0 4px 0;
+
+  .${IS_DRAGGING_CLASS_NAME} & .drop-target-data-providers {
+    background: ${({ theme }) => rgba(theme.eui.euiColorSuccess, 0.1)};
+    border: 0.2rem dashed ${({ theme }) => theme.eui.euiColorSuccess};
+
+    & .euiTextColor--subdued {
+      color: ${({ theme }) => theme.eui.euiColorSuccess};
+    }
+
+    & .euiFormHelpText {
+      color: ${({ theme }) => theme.eui.euiColorSuccess};
+    }
+  }
+`;
+
+const DropTargetDataProviders = styled.div`
+  position: relative;
+  border: 0.2rem dashed ${props => props.theme.eui.euiColorMediumShade};
+  border-radius: 5px;
+  margin: 5px 0 5px 0;
+  min-height: 100px;
+  overflow-y: auto;
+  background-color: ${props => props.theme.eui.euiFormBackgroundColor};
+`;
+
+DropTargetDataProviders.displayName = 'DropTargetDataProviders';
+
+const getDroppableId = (id: string): string => `${droppableTimelineProvidersPrefix}${id}`;
+
+/**
+ * Renders the data providers section of the timeline.
+ *
+ * The data providers section is a drop target where users
+ * can drag-and drop new data providers into the timeline.
+ *
+ * It renders an interactive card representation of the
+ * data providers. It also provides uniform
+ * UI controls for the following actions:
+ * 1) removing a data provider
+ * 2) temporarily disabling a data provider
+ * 3) applying boolean negation to the data provider
+ *
+ * Given an empty collection of DataProvider[], it prompts
+ * the user to drop anything with a facet count into
+ * the data pro section.
+ */
+export const DataProviders = React.memo<Props>(
+  ({
+    browserFields,
+    id,
+    dataProviders,
+    onDataProviderEdited,
+    onDataProviderRemoved,
+    onToggleDataProviderEnabled,
+    onToggleDataProviderExcluded,
+    show,
+  }) => {
+    return (
+      <DropTargetDataProvidersContainer className="drop-target-data-providers-container">
+        <DropTargetDataProviders
+          className="drop-target-data-providers"
+          data-test-subj="dataProviders"
+        >
+          <TimelineContext.Consumer>
+            {({ isLoading }) => (
+              <>
+                {dataProviders != null && dataProviders.length ? (
+                  <Providers
+                    browserFields={browserFields}
+                    id={id}
+                    dataProviders={dataProviders}
+                    onDataProviderEdited={onDataProviderEdited}
+                    onDataProviderRemoved={onDataProviderRemoved}
+                    onToggleDataProviderEnabled={onToggleDataProviderEnabled}
+                    onToggleDataProviderExcluded={onToggleDataProviderExcluded}
+                  />
+                ) : (
+                  <DroppableWrapper
+                    isDropDisabled={!show || isLoading}
+                    droppableId={getDroppableId(id)}
+                  >
+                    <Empty />
+                  </DroppableWrapper>
+                )}
+              </>
+            )}
+          </TimelineContext.Consumer>
+        </DropTargetDataProviders>
+      </DropTargetDataProvidersContainer>
+    );
+  }
+);
+
+DataProviders.displayName = 'DataProviders';
diff --git a/x-pack/plugins/siem/public/components/timeline/data_providers/mock/mock_data_providers.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/mock/mock_data_providers.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/data_providers/mock/mock_data_providers.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/data_providers/mock/mock_data_providers.tsx
diff --git a/x-pack/plugins/siem/public/components/timeline/data_providers/provider.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/provider.test.tsx
similarity index 92%
rename from x-pack/plugins/siem/public/components/timeline/data_providers/provider.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/data_providers/provider.test.tsx
index f0d7ca83fb391e..d6d337bb3e1d7b 100644
--- a/x-pack/plugins/siem/public/components/timeline/data_providers/provider.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/provider.test.tsx
@@ -7,7 +7,7 @@
 import { mount, shallow } from 'enzyme';
 import React from 'react';
 
-import { TestProviders } from '../../../mock/test_providers';
+import { TestProviders } from '../../../../common/mock/test_providers';
 
 import { mockDataProviders } from './mock/mock_data_providers';
 import { Provider } from './provider';
diff --git a/x-pack/plugins/siem/public/components/timeline/data_providers/provider.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/provider.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/data_providers/provider.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/data_providers/provider.tsx
diff --git a/x-pack/plugins/siem/public/components/timeline/data_providers/provider_badge.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/provider_badge.tsx
similarity index 95%
rename from x-pack/plugins/siem/public/components/timeline/data_providers/provider_badge.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/data_providers/provider_badge.tsx
index 859ced39ebc4f4..b3682c0d551475 100644
--- a/x-pack/plugins/siem/public/components/timeline/data_providers/provider_badge.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/provider_badge.tsx
@@ -10,8 +10,8 @@ import { isString } from 'lodash/fp';
 import React, { useCallback, useMemo } from 'react';
 import styled from 'styled-components';
 
-import { ProviderContainer } from '../../drag_and_drop/provider_container';
-import { getEmptyString } from '../../empty_value';
+import { getEmptyString } from '../../../../common/components/empty_value';
+import { ProviderContainer } from '../../../../common/components/drag_and_drop/provider_container';
 
 import { EXISTS_OPERATOR, QueryOperator } from './data_provider';
 
diff --git a/x-pack/plugins/siem/public/components/timeline/data_providers/provider_item_actions.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/provider_item_actions.tsx
similarity index 98%
rename from x-pack/plugins/siem/public/components/timeline/data_providers/provider_item_actions.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/data_providers/provider_item_actions.tsx
index 121f832221d3e6..540b1b80259a01 100644
--- a/x-pack/plugins/siem/public/components/timeline/data_providers/provider_item_actions.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/provider_item_actions.tsx
@@ -12,7 +12,7 @@ import {
 import React, { FunctionComponent } from 'react';
 import styled from 'styled-components';
 
-import { BrowserFields } from '../../../containers/source';
+import { BrowserFields } from '../../../../common/containers/source';
 import { OnDataProviderEdited } from '../events';
 import { QueryOperator, EXISTS_OPERATOR } from './data_provider';
 import { StatefulEditDataProvider } from '../../edit_data_provider';
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/provider_item_and.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/provider_item_and.tsx
new file mode 100644
index 00000000000000..171112b28d789c
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/provider_item_and.tsx
@@ -0,0 +1,95 @@
+/*
+ * 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 { EuiFlexItem } from '@elastic/eui';
+import React from 'react';
+
+import { AndOrBadge } from '../and_or_badge';
+import { BrowserFields } from '../../../../common/containers/source';
+import {
+  OnChangeDataProviderKqlQuery,
+  OnDataProviderEdited,
+  OnDataProviderRemoved,
+  OnToggleDataProviderEnabled,
+  OnToggleDataProviderExcluded,
+} from '../events';
+
+import { DataProvidersAnd, IS_OPERATOR } from './data_provider';
+import { ProviderItemBadge } from './provider_item_badge';
+
+interface ProviderItemAndPopoverProps {
+  browserFields: BrowserFields;
+  dataProvidersAnd: DataProvidersAnd[];
+  onChangeDataProviderKqlQuery: OnChangeDataProviderKqlQuery;
+  onDataProviderEdited: OnDataProviderEdited;
+  onDataProviderRemoved: OnDataProviderRemoved;
+  onToggleDataProviderEnabled: OnToggleDataProviderEnabled;
+  onToggleDataProviderExcluded: OnToggleDataProviderExcluded;
+  providerId: string;
+  timelineId: string;
+}
+
+export class ProviderItemAnd extends React.PureComponent<ProviderItemAndPopoverProps> {
+  public render() {
+    const {
+      browserFields,
+      dataProvidersAnd,
+      onDataProviderEdited,
+      providerId,
+      timelineId,
+    } = this.props;
+
+    return dataProvidersAnd.map((providerAnd: DataProvidersAnd, index: number) => (
+      <React.Fragment key={`provider-item-and-${timelineId}-${providerId}-${providerAnd.id}`}>
+        <EuiFlexItem>
+          <AndOrBadge type="and" />
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <ProviderItemBadge
+            andProviderId={providerAnd.id}
+            browserFields={browserFields}
+            deleteProvider={() => this.deleteAndProvider(providerId, providerAnd.id)}
+            field={providerAnd.queryMatch.displayField || providerAnd.queryMatch.field}
+            kqlQuery={providerAnd.kqlQuery}
+            isEnabled={providerAnd.enabled}
+            isExcluded={providerAnd.excluded}
+            onDataProviderEdited={onDataProviderEdited}
+            operator={providerAnd.queryMatch.operator || IS_OPERATOR}
+            providerId={providerId}
+            timelineId={timelineId}
+            toggleEnabledProvider={() =>
+              this.toggleEnabledAndProvider(providerId, !providerAnd.enabled, providerAnd.id)
+            }
+            toggleExcludedProvider={() =>
+              this.toggleExcludedAndProvider(providerId, !providerAnd.excluded, providerAnd.id)
+            }
+            val={providerAnd.queryMatch.displayValue || providerAnd.queryMatch.value}
+          />
+        </EuiFlexItem>
+      </React.Fragment>
+    ));
+  }
+
+  private deleteAndProvider = (providerId: string, andProviderId: string) => {
+    this.props.onDataProviderRemoved(providerId, andProviderId);
+  };
+
+  private toggleEnabledAndProvider = (
+    providerId: string,
+    enabled: boolean,
+    andProviderId: string
+  ) => {
+    this.props.onToggleDataProviderEnabled({ providerId, enabled, andProviderId });
+  };
+
+  private toggleExcludedAndProvider = (
+    providerId: string,
+    excluded: boolean,
+    andProviderId: string
+  ) => {
+    this.props.onToggleDataProviderExcluded({ providerId, excluded, andProviderId });
+  };
+}
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/provider_item_and_drag_drop.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/provider_item_and_drag_drop.tsx
new file mode 100644
index 00000000000000..4a9358befc51f4
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/provider_item_and_drag_drop.tsx
@@ -0,0 +1,136 @@
+/*
+ * 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 { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import { rgba } from 'polished';
+import React, { useCallback } from 'react';
+import styled from 'styled-components';
+
+import { AndOrBadge } from '../and_or_badge';
+import {
+  OnChangeDataProviderKqlQuery,
+  OnChangeDroppableAndProvider,
+  OnDataProviderEdited,
+  OnDataProviderRemoved,
+  OnToggleDataProviderEnabled,
+  OnToggleDataProviderExcluded,
+} from '../events';
+
+import { BrowserFields } from '../../../../common/containers/source';
+
+import { DataProvider } from './data_provider';
+import { ProviderItemAnd } from './provider_item_and';
+
+import * as i18n from './translations';
+
+const DropAndTargetDataProvidersContainer = styled(EuiFlexItem)`
+  margin: 0px 8px;
+`;
+
+DropAndTargetDataProvidersContainer.displayName = 'DropAndTargetDataProvidersContainer';
+
+const DropAndTargetDataProviders = styled.div<{ hasAndItem: boolean }>`
+  min-width: 230px;
+  width: auto;
+  border: 0.1rem dashed ${props => props.theme.eui.euiColorSuccess};
+  border-radius: 5px;
+  text-align: center;
+  padding: 3px 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  ${props =>
+    props.hasAndItem
+      ? `&:hover {
+    transition: background-color 0.7s ease;
+    background-color: ${() => rgba(props.theme.eui.euiColorSuccess, 0.2)};
+  }`
+      : ''};
+  cursor: ${({ hasAndItem }) => (!hasAndItem ? `default` : 'inherit')};
+`;
+
+DropAndTargetDataProviders.displayName = 'DropAndTargetDataProviders';
+
+const NumberProviderAndBadge = (styled(EuiBadge)`
+  margin: 0px 5px;
+` as unknown) as typeof EuiBadge;
+
+NumberProviderAndBadge.displayName = 'NumberProviderAndBadge';
+
+interface ProviderItemDropProps {
+  browserFields: BrowserFields;
+  dataProvider: DataProvider;
+  mousePosition?: { x: number; y: number; boundLeft: number; boundTop: number };
+  onChangeDataProviderKqlQuery: OnChangeDataProviderKqlQuery;
+  onChangeDroppableAndProvider: OnChangeDroppableAndProvider;
+  onDataProviderEdited: OnDataProviderEdited;
+  onDataProviderRemoved: OnDataProviderRemoved;
+  onToggleDataProviderEnabled: OnToggleDataProviderEnabled;
+  onToggleDataProviderExcluded: OnToggleDataProviderExcluded;
+  timelineId: string;
+}
+
+export const ProviderItemAndDragDrop = React.memo<ProviderItemDropProps>(
+  ({
+    browserFields,
+    dataProvider,
+    onChangeDataProviderKqlQuery,
+    onChangeDroppableAndProvider,
+    onDataProviderEdited,
+    onDataProviderRemoved,
+    onToggleDataProviderEnabled,
+    onToggleDataProviderExcluded,
+    timelineId,
+  }) => {
+    const onMouseEnter = useCallback(() => onChangeDroppableAndProvider(dataProvider.id), [
+      onChangeDroppableAndProvider,
+      dataProvider.id,
+    ]);
+    const onMouseLeave = useCallback(() => onChangeDroppableAndProvider(''), [
+      onChangeDroppableAndProvider,
+    ]);
+    const hasAndItem = dataProvider.and.length > 0;
+    return (
+      <EuiFlexGroup
+        direction="row"
+        gutterSize="none"
+        justifyContent="flexStart"
+        alignItems="center"
+      >
+        <DropAndTargetDataProvidersContainer className="drop-and-provider-timeline">
+          <DropAndTargetDataProviders
+            hasAndItem={hasAndItem}
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
+          >
+            {hasAndItem && (
+              <NumberProviderAndBadge color="primary">
+                {dataProvider.and.length}
+              </NumberProviderAndBadge>
+            )}
+            <EuiText color="subdued" size="xs">
+              {i18n.DROP_HERE_TO_ADD_AN}
+            </EuiText>
+            <AndOrBadge type="and" />
+          </DropAndTargetDataProviders>
+        </DropAndTargetDataProvidersContainer>
+        <ProviderItemAnd
+          browserFields={browserFields}
+          dataProvidersAnd={dataProvider.and}
+          providerId={dataProvider.id}
+          onChangeDataProviderKqlQuery={onChangeDataProviderKqlQuery}
+          onDataProviderEdited={onDataProviderEdited}
+          onDataProviderRemoved={onDataProviderRemoved}
+          onToggleDataProviderEnabled={onToggleDataProviderEnabled}
+          onToggleDataProviderExcluded={onToggleDataProviderExcluded}
+          timelineId={timelineId}
+        />
+      </EuiFlexGroup>
+    );
+  }
+);
+
+ProviderItemAndDragDrop.displayName = 'ProviderItemAndDragDrop';
diff --git a/x-pack/plugins/siem/public/components/timeline/data_providers/provider_item_badge.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/provider_item_badge.tsx
similarity index 96%
rename from x-pack/plugins/siem/public/components/timeline/data_providers/provider_item_badge.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/data_providers/provider_item_badge.tsx
index b268315efb919d..b53c08a8bb10db 100644
--- a/x-pack/plugins/siem/public/components/timeline/data_providers/provider_item_badge.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/provider_item_badge.tsx
@@ -8,13 +8,13 @@ import { noop } from 'lodash/fp';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { BrowserFields } from '../../../containers/source';
+import { BrowserFields } from '../../../../common/containers/source';
 
 import { OnDataProviderEdited } from '../events';
 import { ProviderBadge } from './provider_badge';
 import { ProviderItemActions } from './provider_item_actions';
 import { DataProvidersAnd, QueryOperator } from './data_provider';
-import { dragAndDropActions } from '../../../store/drag_and_drop';
+import { dragAndDropActions } from '../../../../common/store/drag_and_drop';
 import { TimelineContext } from '../timeline_context';
 
 interface ProviderItemBadgeProps {
diff --git a/x-pack/plugins/siem/public/components/timeline/data_providers/providers.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/providers.test.tsx
similarity index 98%
rename from x-pack/plugins/siem/public/components/timeline/data_providers/providers.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/data_providers/providers.test.tsx
index 43e84bac508ea0..34202d090e06f7 100644
--- a/x-pack/plugins/siem/public/components/timeline/data_providers/providers.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/providers.test.tsx
@@ -7,16 +7,16 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 
-import { createKibanaCoreStartMock } from '../../../mock/kibana_core';
-import { TestProviders } from '../../../mock/test_providers';
-import { DroppableWrapper } from '../../drag_and_drop/droppable_wrapper';
-import { FilterManager } from '../../../../../../../src/plugins/data/public';
+import { createKibanaCoreStartMock } from '../../../../common/mock/kibana_core';
+import { TestProviders } from '../../../../common/mock/test_providers';
+import { DroppableWrapper } from '../../../../common/components/drag_and_drop/droppable_wrapper';
+import { FilterManager } from '../../../../../../../../src/plugins/data/public';
 import { TimelineContext } from '../timeline_context';
 
 import { mockDataProviders } from './mock/mock_data_providers';
 import { Providers } from './providers';
 import { DELETE_CLASS_NAME, ENABLE_CLASS_NAME, EXCLUDE_CLASS_NAME } from './provider_item_actions';
-import { useMountAppended } from '../../../utils/use_mount_appended';
+import { useMountAppended } from '../../../../common/utils/use_mount_appended';
 
 const mockUiSettingsForFilterManager = createKibanaCoreStartMock().uiSettings;
 
diff --git a/x-pack/plugins/siem/public/components/timeline/data_providers/providers.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/providers.tsx
similarity index 98%
rename from x-pack/plugins/siem/public/components/timeline/data_providers/providers.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/data_providers/providers.tsx
index 8d9d0c69d53cd2..7f10a7b16c7b27 100644
--- a/x-pack/plugins/siem/public/components/timeline/data_providers/providers.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/providers.tsx
@@ -10,13 +10,13 @@ import React, { useMemo } from 'react';
 import { Draggable, DraggingStyle, Droppable, NotDraggingStyle } from 'react-beautiful-dnd';
 import styled, { css } from 'styled-components';
 
-import { AndOrBadge } from '../../and_or_badge';
-import { BrowserFields } from '../../../containers/source';
+import { AndOrBadge } from '../and_or_badge';
+import { BrowserFields } from '../../../../common/containers/source';
 import {
   getTimelineProviderDroppableId,
   IS_DRAGGING_CLASS_NAME,
   getTimelineProviderDraggableId,
-} from '../../drag_and_drop/helpers';
+} from '../../../../common/components/drag_and_drop/helpers';
 import {
   OnDataProviderEdited,
   OnDataProviderRemoved,
diff --git a/x-pack/plugins/siem/public/components/timeline/data_providers/translations.ts b/x-pack/plugins/siem/public/timelines/components/timeline/data_providers/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/data_providers/translations.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/data_providers/translations.ts
diff --git a/x-pack/plugins/siem/public/components/timeline/events.ts b/x-pack/plugins/siem/public/timelines/components/timeline/events.ts
similarity index 97%
rename from x-pack/plugins/siem/public/components/timeline/events.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/events.ts
index f977c03ed3053a..6c9a9b8b896797 100644
--- a/x-pack/plugins/siem/public/components/timeline/events.ts
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/events.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { ColumnHeaderOptions } from '../../store/timeline/model';
+import { ColumnHeaderOptions } from '../../../timelines/store/timeline/model';
 import { ColumnId } from './body/column_id';
 import { SortDirection } from './body/sort';
 import { QueryOperator } from './data_providers/data_provider';
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/expandable_event/index.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/expandable_event/index.tsx
new file mode 100644
index 00000000000000..b08c6afcaf4a69
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/expandable_event/index.tsx
@@ -0,0 +1,74 @@
+/*
+ * 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 styled from 'styled-components';
+
+import { BrowserFields } from '../../../../common/containers/source';
+import { ColumnHeaderOptions } from '../../../../timelines/store/timeline/model';
+import { DetailItem } from '../../../../graphql/types';
+import { StatefulEventDetails } from '../../../../common/components/event_details/stateful_event_details';
+import { LazyAccordion } from '../../lazy_accordion';
+import { OnUpdateColumns } from '../events';
+
+const ExpandableDetails = styled.div<{ hideExpandButton: boolean }>`
+  ${({ hideExpandButton }) =>
+    hideExpandButton
+      ? `
+  .euiAccordion__button {
+    display: none;
+  }
+  `
+      : ''};
+`;
+
+ExpandableDetails.displayName = 'ExpandableDetails';
+
+interface Props {
+  browserFields: BrowserFields;
+  columnHeaders: ColumnHeaderOptions[];
+  id: string;
+  event: DetailItem[];
+  forceExpand?: boolean;
+  hideExpandButton?: boolean;
+  onUpdateColumns: OnUpdateColumns;
+  timelineId: string;
+  toggleColumn: (column: ColumnHeaderOptions) => void;
+}
+
+export const ExpandableEvent = React.memo<Props>(
+  ({
+    browserFields,
+    columnHeaders,
+    event,
+    forceExpand = false,
+    id,
+    timelineId,
+    toggleColumn,
+    onUpdateColumns,
+  }) => (
+    <ExpandableDetails hideExpandButton={true}>
+      <LazyAccordion
+        id={`timeline-${timelineId}-row-${id}`}
+        renderExpandedContent={() => (
+          <StatefulEventDetails
+            browserFields={browserFields}
+            columnHeaders={columnHeaders}
+            data={event}
+            id={id}
+            onUpdateColumns={onUpdateColumns}
+            timelineId={timelineId}
+            toggleColumn={toggleColumn}
+          />
+        )}
+        forceExpand={forceExpand}
+        paddingSize="none"
+      />
+    </ExpandableDetails>
+  )
+);
+
+ExpandableEvent.displayName = 'ExpandableEvent';
diff --git a/x-pack/plugins/siem/public/components/timeline/expandable_event/translations.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/expandable_event/translations.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/expandable_event/translations.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/expandable_event/translations.tsx
diff --git a/x-pack/plugins/siem/public/components/timeline/fetch_kql_timeline.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/fetch_kql_timeline.tsx
similarity index 88%
rename from x-pack/plugins/siem/public/components/timeline/fetch_kql_timeline.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/fetch_kql_timeline.tsx
index 16eaa803082050..e75f87e0d6011a 100644
--- a/x-pack/plugins/siem/public/components/timeline/fetch_kql_timeline.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/fetch_kql_timeline.tsx
@@ -9,11 +9,11 @@ import { connect, ConnectedProps } from 'react-redux';
 import deepEqual from 'fast-deep-equal';
 import { IIndexPattern } from 'src/plugins/data/public';
 
-import { timelineSelectors, State } from '../../store';
-import { inputsActions } from '../../store/actions';
-import { InputsModelId } from '../../store/inputs/constants';
-import { useUpdateKql } from '../../utils/kql/use_update_kql';
-
+import { State } from '../../../common/store';
+import { inputsActions } from '../../../common/store/actions';
+import { InputsModelId } from '../../../common/store/inputs/constants';
+import { useUpdateKql } from '../../../common/utils/kql/use_update_kql';
+import { timelineSelectors } from '../../store/timeline';
 export interface TimelineKqlFetchProps {
   id: string;
   indexPattern: IIndexPattern;
diff --git a/x-pack/plugins/siem/public/components/timeline/footer/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/footer/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/footer/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/footer/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/footer/index.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/footer/index.test.tsx
new file mode 100644
index 00000000000000..86b362aefca1a8
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/footer/index.test.tsx
@@ -0,0 +1,287 @@
+/*
+ * 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 { mount, shallow } from 'enzyme';
+import { getOr } from 'lodash/fp';
+import React from 'react';
+
+import { TestProviders } from '../../../../common/mock/test_providers';
+
+import { FooterComponent, PagingControlComponent } from './index';
+import { mockData } from './mock';
+
+describe('Footer Timeline Component', () => {
+  const loadMore = jest.fn();
+  const onChangeItemsPerPage = jest.fn();
+  const getUpdatedAt = () => 1546878704036;
+
+  describe('rendering', () => {
+    test('it renders the default timeline footer', () => {
+      const wrapper = shallow(
+        <FooterComponent
+          serverSideEventCount={mockData.Events.totalCount}
+          hasNextPage={getOr(false, 'hasNextPage', mockData.Events.pageInfo)!}
+          height={100}
+          isLive={false}
+          isLoading={false}
+          itemsCount={mockData.Events.edges.length}
+          itemsPerPage={2}
+          itemsPerPageOptions={[1, 5, 10, 20]}
+          onChangeItemsPerPage={onChangeItemsPerPage}
+          onLoadMore={loadMore}
+          nextCursor={getOr(null, 'endCursor.value', mockData.Events.pageInfo)!}
+          tieBreaker={getOr(null, 'endCursor.tiebreaker', mockData.Events.pageInfo)}
+          getUpdatedAt={getUpdatedAt}
+        />
+      );
+
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    test('it renders the loading panel at the beginning ', () => {
+      const wrapper = mount(
+        <FooterComponent
+          serverSideEventCount={mockData.Events.totalCount}
+          hasNextPage={false}
+          height={100}
+          isLive={false}
+          isLoading={true}
+          itemsCount={mockData.Events.edges.length}
+          itemsPerPage={2}
+          itemsPerPageOptions={[1, 5, 10, 20]}
+          onChangeItemsPerPage={onChangeItemsPerPage}
+          onLoadMore={loadMore}
+          nextCursor={getOr(null, 'endCursor.value', mockData.Events.pageInfo)!}
+          tieBreaker={getOr(null, 'endCursor.tiebreaker', mockData.Events.pageInfo)}
+          getUpdatedAt={getUpdatedAt}
+        />
+      );
+
+      expect(wrapper.find('[data-test-subj="LoadingPanelTimeline"]').exists()).toBeTruthy();
+    });
+
+    test('it renders the loadMore button if need to fetch more', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <FooterComponent
+            serverSideEventCount={mockData.Events.totalCount}
+            hasNextPage={getOr(false, 'hasNextPage', mockData.Events.pageInfo)!}
+            height={100}
+            isLive={false}
+            isLoading={false}
+            itemsCount={mockData.Events.edges.length}
+            itemsPerPage={2}
+            itemsPerPageOptions={[1, 5, 10, 20]}
+            onChangeItemsPerPage={onChangeItemsPerPage}
+            onLoadMore={loadMore}
+            nextCursor={getOr(null, 'endCursor.value', mockData.Events.pageInfo)!}
+            tieBreaker={getOr(null, 'endCursor.tiebreaker', mockData.Events.pageInfo)}
+            getUpdatedAt={getUpdatedAt}
+          />
+        </TestProviders>
+      );
+
+      expect(wrapper.find('[data-test-subj="TimelineMoreButton"]').exists()).toBeTruthy();
+    });
+
+    test('it renders the Loading... in the more load button when fetching new data', () => {
+      const wrapper = shallow(
+        <PagingControlComponent
+          hasNextPage={getOr(false, 'hasNextPage', mockData.Events.pageInfo)!}
+          loadMore={loadMore}
+          isLoading={true}
+        />
+      );
+
+      const loadButton = wrapper
+        .find('[data-test-subj="TimelineMoreButton"]')
+        .dive()
+        .text();
+      expect(wrapper.find('[data-test-subj="LoadingPanelTimeline"]').exists()).toBeFalsy();
+      expect(loadButton).toContain('Loading...');
+    });
+
+    test('it renders the Load More in the more load button when fetching new data', () => {
+      const wrapper = shallow(
+        <PagingControlComponent
+          hasNextPage={getOr(false, 'hasNextPage', mockData.Events.pageInfo)!}
+          loadMore={loadMore}
+          isLoading={false}
+        />
+      );
+
+      const loadButton = wrapper
+        .find('[data-test-subj="TimelineMoreButton"]')
+        .dive()
+        .text();
+      expect(loadButton).toContain('Load more');
+    });
+
+    test('it does NOT render the loadMore button because there is nothing else to fetch', () => {
+      const wrapper = mount(
+        <FooterComponent
+          serverSideEventCount={mockData.Events.totalCount}
+          hasNextPage={false}
+          height={100}
+          isLive={false}
+          isLoading={true}
+          itemsCount={mockData.Events.edges.length}
+          itemsPerPage={2}
+          itemsPerPageOptions={[1, 5, 10, 20]}
+          onChangeItemsPerPage={onChangeItemsPerPage}
+          onLoadMore={loadMore}
+          nextCursor={getOr(null, 'endCursor.value', mockData.Events.pageInfo)!}
+          tieBreaker={getOr(null, 'endCursor.tiebreaker', mockData.Events.pageInfo)}
+          getUpdatedAt={getUpdatedAt}
+        />
+      );
+
+      expect(wrapper.find('[data-test-subj="TimelineMoreButton"]').exists()).toBeFalsy();
+    });
+
+    test('it render popover to select new itemsPerPage in timeline', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <FooterComponent
+            serverSideEventCount={mockData.Events.totalCount}
+            hasNextPage={getOr(false, 'hasNextPage', mockData.Events.pageInfo)!}
+            height={100}
+            isLive={false}
+            isLoading={false}
+            itemsCount={mockData.Events.edges.length}
+            itemsPerPage={1}
+            itemsPerPageOptions={[1, 5, 10, 20]}
+            onChangeItemsPerPage={onChangeItemsPerPage}
+            onLoadMore={loadMore}
+            nextCursor={getOr(null, 'endCursor.value', mockData.Events.pageInfo)!}
+            tieBreaker={getOr(null, 'endCursor.tiebreaker', mockData.Events.pageInfo)}
+            getUpdatedAt={getUpdatedAt}
+          />
+        </TestProviders>
+      );
+
+      wrapper
+        .find('[data-test-subj="timelineSizeRowPopover"] button')
+        .first()
+        .simulate('click');
+      expect(wrapper.find('[data-test-subj="timelinePickSizeRow"]').exists()).toBeTruthy();
+    });
+  });
+
+  describe('Events', () => {
+    test('should call loadmore when clicking on the button load more', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <FooterComponent
+            serverSideEventCount={mockData.Events.totalCount}
+            hasNextPage={getOr(false, 'hasNextPage', mockData.Events.pageInfo)!}
+            height={100}
+            isLive={false}
+            isLoading={false}
+            itemsCount={mockData.Events.edges.length}
+            itemsPerPage={2}
+            itemsPerPageOptions={[1, 5, 10, 20]}
+            onChangeItemsPerPage={onChangeItemsPerPage}
+            onLoadMore={loadMore}
+            nextCursor={getOr(null, 'endCursor.value', mockData.Events.pageInfo)!}
+            tieBreaker={getOr(null, 'endCursor.tiebreaker', mockData.Events.pageInfo)}
+            getUpdatedAt={getUpdatedAt}
+          />
+        </TestProviders>
+      );
+
+      wrapper
+        .find('[data-test-subj="TimelineMoreButton"]')
+        .first()
+        .simulate('click');
+
+      expect(loadMore).toBeCalled();
+    });
+
+    test('Should call onChangeItemsPerPage when you pick a new limit', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <FooterComponent
+            serverSideEventCount={mockData.Events.totalCount}
+            hasNextPage={getOr(false, 'hasNextPage', mockData.Events.pageInfo)!}
+            height={100}
+            isLive={false}
+            isLoading={false}
+            itemsCount={mockData.Events.edges.length}
+            itemsPerPage={1}
+            itemsPerPageOptions={[1, 5, 10, 20]}
+            onChangeItemsPerPage={onChangeItemsPerPage}
+            onLoadMore={loadMore}
+            nextCursor={getOr(null, 'endCursor.value', mockData.Events.pageInfo)!}
+            tieBreaker={getOr(null, 'endCursor.tiebreaker', mockData.Events.pageInfo)}
+            getUpdatedAt={getUpdatedAt}
+          />
+        </TestProviders>
+      );
+
+      wrapper
+        .find('[data-test-subj="timelineSizeRowPopover"] button')
+        .first()
+        .simulate('click');
+      wrapper.update();
+      wrapper
+        .find('[data-test-subj="timelinePickSizeRow"] button')
+        .first()
+        .simulate('click');
+      expect(onChangeItemsPerPage).toBeCalled();
+    });
+
+    test('it does render the auto-refresh message instead of load more button when stream live is on', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <FooterComponent
+            serverSideEventCount={mockData.Events.totalCount}
+            hasNextPage={getOr(false, 'hasNextPage', mockData.Events.pageInfo)!}
+            height={100}
+            isLive={true}
+            isLoading={false}
+            itemsCount={mockData.Events.edges.length}
+            itemsPerPage={2}
+            itemsPerPageOptions={[1, 5, 10, 20]}
+            onChangeItemsPerPage={onChangeItemsPerPage}
+            onLoadMore={loadMore}
+            nextCursor={getOr(null, 'endCursor.value', mockData.Events.pageInfo)!}
+            tieBreaker={getOr(null, 'endCursor.tiebreaker', mockData.Events.pageInfo)}
+            getUpdatedAt={getUpdatedAt}
+          />
+        </TestProviders>
+      );
+
+      expect(wrapper.find('[data-test-subj="paging-control"]').exists()).toBeFalsy();
+      expect(wrapper.find('[data-test-subj="is-live-on-message"]').exists()).toBeTruthy();
+    });
+
+    test('it does render the load more button when stream live is off', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <FooterComponent
+            serverSideEventCount={mockData.Events.totalCount}
+            hasNextPage={getOr(false, 'hasNextPage', mockData.Events.pageInfo)!}
+            height={100}
+            isLive={false}
+            isLoading={false}
+            itemsCount={mockData.Events.edges.length}
+            itemsPerPage={2}
+            itemsPerPageOptions={[1, 5, 10, 20]}
+            onChangeItemsPerPage={onChangeItemsPerPage}
+            onLoadMore={loadMore}
+            nextCursor={getOr(null, 'endCursor.value', mockData.Events.pageInfo)!}
+            tieBreaker={getOr(null, 'endCursor.tiebreaker', mockData.Events.pageInfo)}
+            getUpdatedAt={getUpdatedAt}
+          />
+        </TestProviders>
+      );
+
+      expect(wrapper.find('[data-test-subj="paging-control"]').exists()).toBeTruthy();
+      expect(wrapper.find('[data-test-subj="is-live-on-message"]').exists()).toBeFalsy();
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/footer/index.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/footer/index.tsx
new file mode 100644
index 00000000000000..556f7b043e3ab5
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/footer/index.tsx
@@ -0,0 +1,368 @@
+/*
+ * 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 {
+  EuiBadge,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiContextMenuItem,
+  EuiContextMenuPanel,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIconTip,
+  EuiPopover,
+  EuiText,
+  EuiToolTip,
+  EuiPopoverProps,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import React, { FC, useCallback, useEffect, useState, useMemo } from 'react';
+import styled from 'styled-components';
+
+import { LoadingPanel } from '../../loading';
+import { OnChangeItemsPerPage, OnLoadMore } from '../events';
+
+import { LastUpdatedAt } from './last_updated';
+import * as i18n from './translations';
+import { useTimelineTypeContext } from '../timeline_context';
+import { useEventDetailsWidthContext } from '../../../../common/components/events_viewer/event_details_width_context';
+
+export const isCompactFooter = (width: number): boolean => width < 600;
+
+interface FixedWidthLastUpdatedContainerProps {
+  updatedAt: number;
+}
+
+const FixedWidthLastUpdatedContainer = React.memo<FixedWidthLastUpdatedContainerProps>(
+  ({ updatedAt }) => {
+    const width = useEventDetailsWidthContext();
+    const compact = useMemo(() => isCompactFooter(width), [width]);
+
+    return (
+      <FixedWidthLastUpdated data-test-subj="fixed-width-last-updated" compact={compact}>
+        <LastUpdatedAt updatedAt={updatedAt} compact={compact} />
+      </FixedWidthLastUpdated>
+    );
+  }
+);
+
+FixedWidthLastUpdatedContainer.displayName = 'FixedWidthLastUpdatedContainer';
+
+const FixedWidthLastUpdated = styled.div<{ compact?: boolean }>`
+  width: ${({ compact }) => (!compact ? 200 : 25)}px;
+  overflow: hidden;
+  text-align: end;
+`;
+
+FixedWidthLastUpdated.displayName = 'FixedWidthLastUpdated';
+
+interface HeightProp {
+  height: number;
+}
+
+const FooterContainer = styled(EuiFlexGroup).attrs<HeightProp>(({ height }) => ({
+  style: {
+    height: `${height}px`,
+  },
+}))<HeightProp>`
+  flex: 0;
+`;
+
+FooterContainer.displayName = 'FooterContainer';
+
+const FooterFlexGroup = styled(EuiFlexGroup)`
+  height: 35px;
+  width: 100%;
+`;
+
+FooterFlexGroup.displayName = 'FooterFlexGroup';
+
+const LoadingPanelContainer = styled.div`
+  padding-top: 3px;
+`;
+
+LoadingPanelContainer.displayName = 'LoadingPanelContainer';
+
+const PopoverRowItems = styled((EuiPopover as unknown) as FC)<
+  EuiPopoverProps & {
+    className?: string;
+    id?: string;
+  }
+>`
+  .euiButtonEmpty__content {
+    padding: 0px 0px;
+  }
+`;
+
+PopoverRowItems.displayName = 'PopoverRowItems';
+
+export const ServerSideEventCount = styled.div`
+  margin: 0 5px 0 5px;
+`;
+
+ServerSideEventCount.displayName = 'ServerSideEventCount';
+
+/** The height of the footer, exported for use in height calculations */
+export const footerHeight = 40; // px
+
+/** Displays the server-side count of events */
+export const EventsCountComponent = ({
+  closePopover,
+  isOpen,
+  items,
+  itemsCount,
+  onClick,
+  serverSideEventCount,
+}: {
+  closePopover: () => void;
+  isOpen: boolean;
+  items: React.ReactElement[];
+  itemsCount: number;
+  onClick: () => void;
+  serverSideEventCount: number;
+}) => {
+  const timelineTypeContext = useTimelineTypeContext();
+  return (
+    <h5>
+      <PopoverRowItems
+        className="footer-popover"
+        id="customizablePagination"
+        data-test-subj="timelineSizeRowPopover"
+        button={
+          <>
+            <EuiBadge data-test-subj="local-events-count" color="hollow">
+              {itemsCount}
+              <EuiButtonEmpty
+                size="s"
+                color="text"
+                iconType="arrowDown"
+                iconSide="right"
+                onClick={onClick}
+              />
+            </EuiBadge>
+            {` ${i18n.OF} `}
+          </>
+        }
+        isOpen={isOpen}
+        closePopover={closePopover}
+        panelPaddingSize="none"
+      >
+        <EuiContextMenuPanel items={items} data-test-subj="timelinePickSizeRow" />
+      </PopoverRowItems>
+      <EuiToolTip
+        content={`${serverSideEventCount} ${timelineTypeContext.footerText ??
+          i18n.TOTAL_COUNT_OF_EVENTS}`}
+      >
+        <ServerSideEventCount>
+          <EuiBadge color="hollow" data-test-subj="server-side-event-count">
+            {serverSideEventCount}
+          </EuiBadge>{' '}
+          {timelineTypeContext.documentType ?? i18n.EVENTS}
+        </ServerSideEventCount>
+      </EuiToolTip>
+    </h5>
+  );
+};
+
+EventsCountComponent.displayName = 'EventsCountComponent';
+
+export const EventsCount = React.memo(EventsCountComponent);
+
+EventsCount.displayName = 'EventsCount';
+
+export const PagingControlComponent = ({
+  hasNextPage,
+  isLoading,
+  loadMore,
+}: {
+  hasNextPage: boolean;
+  isLoading: boolean;
+  loadMore: () => void;
+}) => (
+  <>
+    {hasNextPage && (
+      <EuiButton
+        data-test-subj="TimelineMoreButton"
+        isLoading={isLoading}
+        onClick={loadMore}
+        size="s"
+      >
+        {isLoading ? `${i18n.LOADING}...` : i18n.LOAD_MORE}
+      </EuiButton>
+    )}
+  </>
+);
+
+PagingControlComponent.displayName = 'PagingControlComponent';
+
+export const PagingControl = React.memo(PagingControlComponent);
+
+PagingControl.displayName = 'PagingControl';
+
+interface FooterProps {
+  getUpdatedAt: () => number;
+  hasNextPage: boolean;
+  height: number;
+  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 = ({
+  getUpdatedAt,
+  hasNextPage,
+  height,
+  isLive,
+  isLoading,
+  itemsCount,
+  itemsPerPage,
+  itemsPerPageOptions,
+  nextCursor,
+  onChangeItemsPerPage,
+  onLoadMore,
+  serverSideEventCount,
+  tieBreaker,
+}: FooterProps) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [paginationLoading, setPaginationLoading] = useState(false);
+  const [updatedAt, setUpdatedAt] = useState<number | null>(null);
+  const timelineTypeContext = useTimelineTypeContext();
+
+  const loadMore = useCallback(() => {
+    setPaginationLoading(true);
+    onLoadMore(nextCursor, tieBreaker);
+  }, [nextCursor, tieBreaker, onLoadMore, setPaginationLoading]);
+
+  const onButtonClick = useCallback(() => setIsPopoverOpen(!isPopoverOpen), [
+    isPopoverOpen,
+    setIsPopoverOpen,
+  ]);
+  const closePopover = useCallback(() => setIsPopoverOpen(false), [setIsPopoverOpen]);
+
+  useEffect(() => {
+    if (paginationLoading && !isLoading) {
+      setPaginationLoading(false);
+      setUpdatedAt(getUpdatedAt());
+    }
+
+    if (updatedAt === null || !isLoading) {
+      setUpdatedAt(getUpdatedAt());
+    }
+  }, [isLoading]);
+
+  if (isLoading && !paginationLoading) {
+    return (
+      <LoadingPanelContainer>
+        <LoadingPanel
+          data-test-subj="LoadingPanelTimeline"
+          height="35px"
+          showBorder={false}
+          text={`${timelineTypeContext.loadingText ?? i18n.LOADING_TIMELINE_DATA}...`}
+          width="100%"
+        />
+      </LoadingPanelContainer>
+    );
+  }
+
+  const rowItems =
+    itemsPerPageOptions &&
+    itemsPerPageOptions.map(item => (
+      <EuiContextMenuItem
+        key={item}
+        icon={itemsPerPage === item ? 'check' : 'empty'}
+        onClick={() => {
+          closePopover();
+          onChangeItemsPerPage(item);
+        }}
+      >
+        {`${item} ${i18n.ROWS}`}
+      </EuiContextMenuItem>
+    ));
+
+  return (
+    <FooterContainer
+      data-test-subj="timeline-footer"
+      direction="column"
+      gutterSize="none"
+      height={height}
+      justifyContent="spaceAround"
+    >
+      <FooterFlexGroup
+        alignItems="center"
+        data-test-subj="footer-flex-group"
+        direction="row"
+        gutterSize="none"
+        justifyContent="spaceBetween"
+      >
+        <EuiFlexItem data-test-subj="event-count-container" grow={false}>
+          <EuiFlexGroup
+            alignItems="center"
+            data-test-subj="events-count"
+            direction="row"
+            gutterSize="none"
+          >
+            <EventsCount
+              closePopover={closePopover}
+              isOpen={isPopoverOpen}
+              items={rowItems}
+              itemsCount={itemsCount}
+              onClick={onButtonClick}
+              serverSideEventCount={serverSideEventCount}
+            />
+          </EuiFlexGroup>
+        </EuiFlexItem>
+
+        <EuiFlexItem data-test-subj="paging-control-container" grow={false}>
+          {isLive ? (
+            <EuiText size="s" data-test-subj="is-live-on-message">
+              <b>
+                {i18n.AUTO_REFRESH_ACTIVE}{' '}
+                <EuiIconTip
+                  color="subdued"
+                  content={
+                    <FormattedMessage
+                      id="xpack.siem.footer.autoRefreshActiveTooltip"
+                      defaultMessage="While auto-refresh is enabled, timeline will show you the latest {numberOfItems} events that match your query."
+                      values={{
+                        numberOfItems: itemsCount,
+                      }}
+                    />
+                  }
+                  type="iInCircle"
+                />
+              </b>
+            </EuiText>
+          ) : (
+            <PagingControl
+              data-test-subj="paging-control"
+              hasNextPage={hasNextPage}
+              isLoading={isLoading}
+              loadMore={loadMore}
+            />
+          )}
+        </EuiFlexItem>
+
+        <EuiFlexItem data-test-subj="last-updated-container" grow={false}>
+          <FixedWidthLastUpdatedContainer updatedAt={updatedAt || getUpdatedAt()} />
+        </EuiFlexItem>
+      </FooterFlexGroup>
+    </FooterContainer>
+  );
+};
+
+FooterComponent.displayName = 'FooterComponent';
+
+export const Footer = React.memo(FooterComponent);
+
+Footer.displayName = 'Footer';
diff --git a/x-pack/plugins/siem/public/components/timeline/footer/last_updated.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/footer/last_updated.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/footer/last_updated.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/footer/last_updated.tsx
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/footer/mock.ts b/x-pack/plugins/siem/public/timelines/components/timeline/footer/mock.ts
new file mode 100644
index 00000000000000..fcd30ee2b8500b
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/footer/mock.ts
@@ -0,0 +1,86 @@
+/*
+ * 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 { EventsTimelineData } from '../../../../graphql/types';
+
+export const mockData: { Events: EventsTimelineData } = {
+  Events: {
+    totalCount: 15546,
+    pageInfo: {
+      hasNextPage: true,
+      endCursor: {
+        value: '1546878704036',
+        tiebreaker: '10624',
+      },
+    },
+    edges: [
+      {
+        cursor: {
+          value: '1546878704036',
+          tiebreaker: '10656',
+        },
+        node: {
+          _id: 'Fo8nKWgBiyhPd5Zo3cib',
+          timestamp: '2019-01-07T16:31:44.036Z',
+          _index: 'auditbeat-7.0.0-2019.01.07',
+          destination: {
+            ip: ['24.168.54.169'],
+            port: [62123],
+          },
+          event: {
+            category: null,
+            id: null,
+            module: ['system'],
+            severity: null,
+            type: null,
+          },
+          geo: null,
+          host: {
+            name: ['siem-general'],
+            ip: null,
+          },
+          source: {
+            ip: ['10.142.0.6'],
+            port: [9200],
+          },
+          suricata: null,
+        },
+      },
+      {
+        cursor: {
+          value: '1546878704036',
+          tiebreaker: '10624',
+        },
+        node: {
+          _id: 'F48nKWgBiyhPd5Zo3cib',
+          timestamp: '2019-01-07T16:31:44.036Z',
+          _index: 'auditbeat-7.0.0-2019.01.07',
+          destination: {
+            ip: ['24.168.54.169'],
+            port: [62145],
+          },
+          event: {
+            category: null,
+            id: null,
+            module: ['system'],
+            severity: null,
+            type: null,
+          },
+          geo: null,
+          host: {
+            name: ['siem-general'],
+            ip: null,
+          },
+          source: {
+            ip: ['10.142.0.6'],
+            port: [9200],
+          },
+          suricata: null,
+        },
+      },
+    ],
+  },
+};
diff --git a/x-pack/plugins/siem/public/components/timeline/footer/translations.ts b/x-pack/plugins/siem/public/timelines/components/timeline/footer/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/footer/translations.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/footer/translations.ts
diff --git a/x-pack/plugins/siem/public/components/timeline/header/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/header/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/header/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/header/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/header/index.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/header/index.test.tsx
new file mode 100644
index 00000000000000..a3855c848cf24e
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/header/index.test.tsx
@@ -0,0 +1,91 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import React from 'react';
+
+import { mockIndexPattern } from '../../../../common/mock';
+import { createKibanaCoreStartMock } from '../../../../common/mock/kibana_core';
+import { TestProviders } from '../../../../common/mock/test_providers';
+import { FilterManager } from '../../../../../../../../src/plugins/data/public';
+import { mockDataProviders } from '../data_providers/mock/mock_data_providers';
+import { useMountAppended } from '../../../../common/utils/use_mount_appended';
+
+import { TimelineHeader } from '.';
+
+const mockUiSettingsForFilterManager = createKibanaCoreStartMock().uiSettings;
+
+jest.mock('../../../../common/lib/kibana');
+
+describe('Header', () => {
+  const indexPattern = mockIndexPattern;
+  const mount = useMountAppended();
+
+  describe('rendering', () => {
+    test('renders correctly against snapshot', () => {
+      const wrapper = shallow(
+        <TimelineHeader
+          browserFields={{}}
+          dataProviders={mockDataProviders}
+          filterManager={new FilterManager(mockUiSettingsForFilterManager)}
+          id="foo"
+          indexPattern={indexPattern}
+          onDataProviderEdited={jest.fn()}
+          onDataProviderRemoved={jest.fn()}
+          onToggleDataProviderEnabled={jest.fn()}
+          onToggleDataProviderExcluded={jest.fn()}
+          show={true}
+          showCallOutUnauthorizedMsg={false}
+        />
+      );
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    test('it renders the data providers', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <TimelineHeader
+            browserFields={{}}
+            dataProviders={mockDataProviders}
+            filterManager={new FilterManager(mockUiSettingsForFilterManager)}
+            id="foo"
+            indexPattern={indexPattern}
+            onDataProviderEdited={jest.fn()}
+            onDataProviderRemoved={jest.fn()}
+            onToggleDataProviderEnabled={jest.fn()}
+            onToggleDataProviderExcluded={jest.fn()}
+            show={true}
+            showCallOutUnauthorizedMsg={false}
+          />
+        </TestProviders>
+      );
+
+      expect(wrapper.find('[data-test-subj="dataProviders"]').exists()).toEqual(true);
+    });
+
+    test('it renders the unauthorized call out providers', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <TimelineHeader
+            browserFields={{}}
+            dataProviders={mockDataProviders}
+            filterManager={new FilterManager(mockUiSettingsForFilterManager)}
+            id="foo"
+            indexPattern={indexPattern}
+            onDataProviderEdited={jest.fn()}
+            onDataProviderRemoved={jest.fn()}
+            onToggleDataProviderEnabled={jest.fn()}
+            onToggleDataProviderExcluded={jest.fn()}
+            show={true}
+            showCallOutUnauthorizedMsg={true}
+          />
+        </TestProviders>
+      );
+
+      expect(wrapper.find('[data-test-subj="timelineCallOutUnauthorized"]').exists()).toEqual(true);
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/header/index.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/header/index.tsx
new file mode 100644
index 00000000000000..974b23bedac013
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/header/index.tsx
@@ -0,0 +1,98 @@
+/*
+ * 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 { EuiCallOut } from '@elastic/eui';
+import React from 'react';
+import { FilterManager, IIndexPattern } from 'src/plugins/data/public';
+import deepEqual from 'fast-deep-equal';
+
+import { DataProviders } from '../data_providers';
+import { DataProvider } from '../data_providers/data_provider';
+import {
+  OnDataProviderEdited,
+  OnDataProviderRemoved,
+  OnToggleDataProviderEnabled,
+  OnToggleDataProviderExcluded,
+} from '../events';
+import { StatefulSearchOrFilter } from '../search_or_filter';
+import { BrowserFields } from '../../../../common/containers/source';
+
+import * as i18n from './translations';
+
+interface Props {
+  browserFields: BrowserFields;
+  dataProviders: DataProvider[];
+  filterManager: FilterManager;
+  id: string;
+  indexPattern: IIndexPattern;
+  onDataProviderEdited: OnDataProviderEdited;
+  onDataProviderRemoved: OnDataProviderRemoved;
+  onToggleDataProviderEnabled: OnToggleDataProviderEnabled;
+  onToggleDataProviderExcluded: OnToggleDataProviderExcluded;
+  show: boolean;
+  showCallOutUnauthorizedMsg: boolean;
+}
+
+const TimelineHeaderComponent: React.FC<Props> = ({
+  browserFields,
+  id,
+  indexPattern,
+  dataProviders,
+  filterManager,
+  onDataProviderEdited,
+  onDataProviderRemoved,
+  onToggleDataProviderEnabled,
+  onToggleDataProviderExcluded,
+  show,
+  showCallOutUnauthorizedMsg,
+}) => (
+  <>
+    {showCallOutUnauthorizedMsg && (
+      <EuiCallOut
+        data-test-subj="timelineCallOutUnauthorized"
+        title={i18n.CALL_OUT_UNAUTHORIZED_MSG}
+        color="warning"
+        iconType="alert"
+        size="s"
+      />
+    )}
+    {show && (
+      <DataProviders
+        browserFields={browserFields}
+        id={id}
+        dataProviders={dataProviders}
+        onDataProviderEdited={onDataProviderEdited}
+        onDataProviderRemoved={onDataProviderRemoved}
+        onToggleDataProviderEnabled={onToggleDataProviderEnabled}
+        onToggleDataProviderExcluded={onToggleDataProviderExcluded}
+        show={show}
+      />
+    )}
+
+    <StatefulSearchOrFilter
+      browserFields={browserFields}
+      filterManager={filterManager}
+      indexPattern={indexPattern}
+      timelineId={id}
+    />
+  </>
+);
+
+export const TimelineHeader = React.memo(
+  TimelineHeaderComponent,
+  (prevProps, nextProps) =>
+    deepEqual(prevProps.browserFields, nextProps.browserFields) &&
+    prevProps.id === nextProps.id &&
+    deepEqual(prevProps.indexPattern, nextProps.indexPattern) &&
+    deepEqual(prevProps.dataProviders, nextProps.dataProviders) &&
+    prevProps.filterManager === nextProps.filterManager &&
+    prevProps.onDataProviderEdited === nextProps.onDataProviderEdited &&
+    prevProps.onDataProviderRemoved === nextProps.onDataProviderRemoved &&
+    prevProps.onToggleDataProviderEnabled === nextProps.onToggleDataProviderEnabled &&
+    prevProps.onToggleDataProviderExcluded === nextProps.onToggleDataProviderExcluded &&
+    prevProps.show === nextProps.show &&
+    prevProps.showCallOutUnauthorizedMsg === nextProps.showCallOutUnauthorizedMsg
+);
diff --git a/x-pack/plugins/siem/public/components/timeline/header/translations.ts b/x-pack/plugins/siem/public/timelines/components/timeline/header/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/header/translations.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/header/translations.ts
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/helpers.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/helpers.test.tsx
new file mode 100644
index 00000000000000..87eb9cc45b98b2
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/helpers.test.tsx
@@ -0,0 +1,398 @@
+/*
+ * 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 { cloneDeep } from 'lodash/fp';
+import { mockIndexPattern } from '../../../common/mock';
+
+import { mockDataProviders } from './data_providers/mock/mock_data_providers';
+import { buildGlobalQuery, combineQueries } from './helpers';
+import { mockBrowserFields } from '../../../common/containers/source/mock';
+import { EsQueryConfig, Filter, esFilters } from '../../../../../../../src/plugins/data/public';
+
+const cleanUpKqlQuery = (str: string) => str.replace(/\n/g, '').replace(/\s\s+/g, ' ');
+const startDate = new Date('2018-03-23T18:49:23.132Z').valueOf();
+const endDate = new Date('2018-03-24T03:33:52.253Z').valueOf();
+
+describe('Build KQL Query', () => {
+  test('Build KQL query with one data provider', () => {
+    const dataProviders = mockDataProviders.slice(0, 1);
+    const kqlQuery = buildGlobalQuery(dataProviders, mockBrowserFields);
+    expect(cleanUpKqlQuery(kqlQuery)).toEqual('name : "Provider 1"');
+  });
+
+  test('Build KQL query with one data provider as timestamp (string input)', () => {
+    const dataProviders = cloneDeep(mockDataProviders.slice(0, 1));
+    dataProviders[0].queryMatch.field = '@timestamp';
+    dataProviders[0].queryMatch.value = '2018-03-23T23:36:23.232Z';
+    const kqlQuery = buildGlobalQuery(dataProviders, mockBrowserFields);
+    expect(cleanUpKqlQuery(kqlQuery)).toEqual('@timestamp: 1521848183232');
+  });
+
+  test('Buld KQL query with one data provider as timestamp (numeric input)', () => {
+    const dataProviders = cloneDeep(mockDataProviders.slice(0, 1));
+    dataProviders[0].queryMatch.field = '@timestamp';
+    dataProviders[0].queryMatch.value = 1521848183232;
+    const kqlQuery = buildGlobalQuery(dataProviders, mockBrowserFields);
+    expect(cleanUpKqlQuery(kqlQuery)).toEqual('@timestamp: 1521848183232');
+  });
+
+  test('Build KQL query with one data provider as date type (string input)', () => {
+    const dataProviders = cloneDeep(mockDataProviders.slice(0, 1));
+    dataProviders[0].queryMatch.field = 'event.end';
+    dataProviders[0].queryMatch.value = '2018-03-23T23:36:23.232Z';
+    const kqlQuery = buildGlobalQuery(dataProviders, mockBrowserFields);
+    expect(cleanUpKqlQuery(kqlQuery)).toEqual('event.end: 1521848183232');
+  });
+
+  test('Buld KQL query with one data provider as date type (numeric input)', () => {
+    const dataProviders = cloneDeep(mockDataProviders.slice(0, 1));
+    dataProviders[0].queryMatch.field = 'event.end';
+    dataProviders[0].queryMatch.value = 1521848183232;
+    const kqlQuery = buildGlobalQuery(dataProviders, mockBrowserFields);
+    expect(cleanUpKqlQuery(kqlQuery)).toEqual('event.end: 1521848183232');
+  });
+
+  test('Build KQL query with two data provider', () => {
+    const dataProviders = mockDataProviders.slice(0, 2);
+    const kqlQuery = buildGlobalQuery(dataProviders, mockBrowserFields);
+    expect(cleanUpKqlQuery(kqlQuery)).toEqual('(name : "Provider 1") or (name : "Provider 2" )');
+  });
+
+  test('Build KQL query with one data provider and one and', () => {
+    const dataProviders = cloneDeep(mockDataProviders.slice(0, 1));
+    dataProviders[0].and = mockDataProviders.slice(1, 2);
+    const kqlQuery = buildGlobalQuery(dataProviders, mockBrowserFields);
+    expect(cleanUpKqlQuery(kqlQuery)).toEqual('name : "Provider 1" and name : "Provider 2"');
+  });
+
+  test('Build KQL query with one data provider and one and as timestamp (string input)', () => {
+    const dataProviders = cloneDeep(mockDataProviders.slice(0, 1));
+    dataProviders[0].and = cloneDeep(mockDataProviders.slice(1, 2));
+    dataProviders[0].and[0].queryMatch.field = '@timestamp';
+    dataProviders[0].and[0].queryMatch.value = '2018-03-23T23:36:23.232Z';
+    const kqlQuery = buildGlobalQuery(dataProviders, mockBrowserFields);
+    expect(cleanUpKqlQuery(kqlQuery)).toEqual('name : "Provider 1" and @timestamp: 1521848183232');
+  });
+
+  test('Build KQL query with one data provider and one and as timestamp (numeric input)', () => {
+    const dataProviders = cloneDeep(mockDataProviders.slice(0, 1));
+    dataProviders[0].and = cloneDeep(mockDataProviders.slice(1, 2));
+    dataProviders[0].and[0].queryMatch.field = '@timestamp';
+    dataProviders[0].and[0].queryMatch.value = 1521848183232;
+    const kqlQuery = buildGlobalQuery(dataProviders, mockBrowserFields);
+    expect(cleanUpKqlQuery(kqlQuery)).toEqual('name : "Provider 1" and @timestamp: 1521848183232');
+  });
+
+  test('Build KQL query with one data provider and one and as date type (string input)', () => {
+    const dataProviders = cloneDeep(mockDataProviders.slice(0, 1));
+    dataProviders[0].and = cloneDeep(mockDataProviders.slice(1, 2));
+    dataProviders[0].and[0].queryMatch.field = 'event.end';
+    dataProviders[0].and[0].queryMatch.value = '2018-03-23T23:36:23.232Z';
+    const kqlQuery = buildGlobalQuery(dataProviders, mockBrowserFields);
+    expect(cleanUpKqlQuery(kqlQuery)).toEqual('name : "Provider 1" and event.end: 1521848183232');
+  });
+
+  test('Build KQL query with one data provider and one and as date type (numeric input)', () => {
+    const dataProviders = cloneDeep(mockDataProviders.slice(0, 1));
+    dataProviders[0].and = cloneDeep(mockDataProviders.slice(1, 2));
+    dataProviders[0].and[0].queryMatch.field = 'event.end';
+    dataProviders[0].and[0].queryMatch.value = 1521848183232;
+    const kqlQuery = buildGlobalQuery(dataProviders, mockBrowserFields);
+    expect(cleanUpKqlQuery(kqlQuery)).toEqual('name : "Provider 1" and event.end: 1521848183232');
+  });
+
+  test('Build KQL query with two data provider and multiple and', () => {
+    const dataProviders = cloneDeep(mockDataProviders.slice(0, 2));
+    dataProviders[0].and = mockDataProviders.slice(2, 4);
+    dataProviders[1].and = mockDataProviders.slice(4, 5);
+    const kqlQuery = buildGlobalQuery(dataProviders, mockBrowserFields);
+    expect(cleanUpKqlQuery(kqlQuery)).toEqual(
+      '(name : "Provider 1" and name : "Provider 3" and name : "Provider 4") or (name : "Provider 2" and name : "Provider 5")'
+    );
+  });
+});
+
+describe('Combined Queries', () => {
+  const config: EsQueryConfig = {
+    allowLeadingWildcards: true,
+    queryStringOptions: {},
+    ignoreFilterIfFieldNotInIndex: true,
+    dateFormatTZ: 'America/New_York',
+  };
+  test('No Data Provider & No kqlQuery & and isEventViewer is false', () => {
+    expect(
+      combineQueries({
+        config,
+        dataProviders: [],
+        indexPattern: mockIndexPattern,
+        browserFields: mockBrowserFields,
+        filters: [],
+        kqlQuery: { query: '', language: 'kuery' },
+        kqlMode: 'search',
+        start: startDate,
+        end: endDate,
+      })
+    ).toBeNull();
+  });
+
+  test('No Data Provider & No kqlQuery & isEventViewer is true', () => {
+    const isEventViewer = true;
+    expect(
+      combineQueries({
+        config,
+        dataProviders: [],
+        indexPattern: mockIndexPattern,
+        browserFields: mockBrowserFields,
+        filters: [],
+        kqlQuery: { query: '', language: 'kuery' },
+        kqlMode: 'search',
+        start: startDate,
+        end: endDate,
+        isEventViewer,
+      })
+    ).toEqual({
+      filterQuery:
+        '{"bool":{"must":[],"filter":[{"bool":{"filter":[{"bool":{"should":[{"range":{"@timestamp":{"gte":1521830963132}}}],"minimum_should_match":1}},{"bool":{"should":[{"range":{"@timestamp":{"lte":1521862432253}}}],"minimum_should_match":1}}]}}],"should":[],"must_not":[]}}',
+    });
+  });
+
+  test('No Data Provider & No kqlQuery & with Filters', () => {
+    const isEventViewer = true;
+    expect(
+      combineQueries({
+        config,
+        dataProviders: [],
+        indexPattern: mockIndexPattern,
+        browserFields: mockBrowserFields,
+        filters: [
+          {
+            $state: { store: esFilters.FilterStateStore.APP_STATE },
+            meta: {
+              alias: null,
+              disabled: false,
+              key: 'event.category',
+              negate: false,
+              params: { query: 'file' },
+              type: 'phrase',
+            },
+            query: { match_phrase: { 'event.category': 'file' } },
+          },
+          {
+            $state: { store: esFilters.FilterStateStore.APP_STATE },
+            meta: {
+              alias: null,
+              disabled: false,
+              key: 'host.name',
+              negate: false,
+              type: 'exists',
+              value: 'exists',
+            },
+            exists: { field: 'host.name' },
+          } as Filter,
+        ],
+        kqlQuery: { query: '', language: 'kuery' },
+        kqlMode: 'search',
+        start: startDate,
+        end: endDate,
+        isEventViewer,
+      })
+    ).toEqual({
+      filterQuery:
+        '{"bool":{"must":[],"filter":[{"bool":{"filter":[{"bool":{"should":[{"range":{"@timestamp":{"gte":1521830963132}}}],"minimum_should_match":1}},{"bool":{"should":[{"range":{"@timestamp":{"lte":1521862432253}}}],"minimum_should_match":1}}]}},{"exists":{"field":"host.name"}}],"should":[],"must_not":[]}}',
+    });
+  });
+
+  test('Only Data Provider', () => {
+    const dataProviders = mockDataProviders.slice(0, 1);
+    const { filterQuery } = combineQueries({
+      config,
+      dataProviders,
+      indexPattern: mockIndexPattern,
+      browserFields: mockBrowserFields,
+      filters: [],
+      kqlQuery: { query: '', language: 'kuery' },
+      kqlMode: 'search',
+      start: startDate,
+      end: endDate,
+    })!;
+    expect(filterQuery).toEqual(
+      '{"bool":{"must":[],"filter":[{"bool":{"filter":[{"bool":{"should":[{"match_phrase":{"name":"Provider 1"}}],"minimum_should_match":1}},{"bool":{"filter":[{"bool":{"should":[{"range":{"@timestamp":{"gte":1521830963132}}}],"minimum_should_match":1}},{"bool":{"should":[{"range":{"@timestamp":{"lte":1521862432253}}}],"minimum_should_match":1}}]}}]}}],"should":[],"must_not":[]}}'
+    );
+  });
+
+  test('Only Data Provider with timestamp (string input)', () => {
+    const dataProviders = cloneDeep(mockDataProviders.slice(0, 1));
+    dataProviders[0].queryMatch.field = '@timestamp';
+    dataProviders[0].queryMatch.value = '2018-03-23T23:36:23.232Z';
+    const { filterQuery } = combineQueries({
+      config,
+      dataProviders,
+      indexPattern: mockIndexPattern,
+      browserFields: mockBrowserFields,
+      filters: [],
+      kqlQuery: { query: '', language: 'kuery' },
+      kqlMode: 'search',
+      start: startDate,
+      end: endDate,
+    })!;
+    expect(filterQuery).toEqual(
+      '{"bool":{"must":[],"filter":[{"bool":{"filter":[{"bool":{"should":[{"range":{"@timestamp":{"gte":1521848183232,"lte":1521848183232}}}],"minimum_should_match":1}},{"bool":{"filter":[{"bool":{"should":[{"range":{"@timestamp":{"gte":1521830963132}}}],"minimum_should_match":1}},{"bool":{"should":[{"range":{"@timestamp":{"lte":1521862432253}}}],"minimum_should_match":1}}]}}]}}],"should":[],"must_not":[]}}'
+    );
+  });
+
+  test('Only Data Provider with timestamp (numeric input)', () => {
+    const dataProviders = cloneDeep(mockDataProviders.slice(0, 1));
+    dataProviders[0].queryMatch.field = '@timestamp';
+    dataProviders[0].queryMatch.value = 1521848183232;
+    const { filterQuery } = combineQueries({
+      config,
+      dataProviders,
+      indexPattern: mockIndexPattern,
+      browserFields: mockBrowserFields,
+      filters: [],
+      kqlQuery: { query: '', language: 'kuery' },
+      kqlMode: 'search',
+      start: startDate,
+      end: endDate,
+    })!;
+    expect(filterQuery).toEqual(
+      '{"bool":{"must":[],"filter":[{"bool":{"filter":[{"bool":{"should":[{"range":{"@timestamp":{"gte":1521848183232,"lte":1521848183232}}}],"minimum_should_match":1}},{"bool":{"filter":[{"bool":{"should":[{"range":{"@timestamp":{"gte":1521830963132}}}],"minimum_should_match":1}},{"bool":{"should":[{"range":{"@timestamp":{"lte":1521862432253}}}],"minimum_should_match":1}}]}}]}}],"should":[],"must_not":[]}}'
+    );
+  });
+
+  test('Only Data Provider with a date type (string input)', () => {
+    const dataProviders = cloneDeep(mockDataProviders.slice(0, 1));
+    dataProviders[0].queryMatch.field = 'event.end';
+    dataProviders[0].queryMatch.value = '2018-03-23T23:36:23.232Z';
+    const { filterQuery } = combineQueries({
+      config,
+      dataProviders,
+      indexPattern: mockIndexPattern,
+      browserFields: mockBrowserFields,
+      filters: [],
+      kqlQuery: { query: '', language: 'kuery' },
+      kqlMode: 'search',
+      start: startDate,
+      end: endDate,
+    })!;
+    expect(filterQuery).toEqual(
+      '{"bool":{"must":[],"filter":[{"bool":{"filter":[{"bool":{"should":[{"match":{"event.end":1521848183232}}],"minimum_should_match":1}},{"bool":{"filter":[{"bool":{"should":[{"range":{"@timestamp":{"gte":1521830963132}}}],"minimum_should_match":1}},{"bool":{"should":[{"range":{"@timestamp":{"lte":1521862432253}}}],"minimum_should_match":1}}]}}]}}],"should":[],"must_not":[]}}'
+    );
+  });
+
+  test('Only Data Provider with date type (numeric input)', () => {
+    const dataProviders = cloneDeep(mockDataProviders.slice(0, 1));
+    dataProviders[0].queryMatch.field = 'event.end';
+    dataProviders[0].queryMatch.value = 1521848183232;
+    const { filterQuery } = combineQueries({
+      config,
+      dataProviders,
+      indexPattern: mockIndexPattern,
+      browserFields: mockBrowserFields,
+      filters: [],
+      kqlQuery: { query: '', language: 'kuery' },
+      kqlMode: 'search',
+      start: startDate,
+      end: endDate,
+    })!;
+    expect(filterQuery).toEqual(
+      '{"bool":{"must":[],"filter":[{"bool":{"filter":[{"bool":{"should":[{"match":{"event.end":1521848183232}}],"minimum_should_match":1}},{"bool":{"filter":[{"bool":{"should":[{"range":{"@timestamp":{"gte":1521830963132}}}],"minimum_should_match":1}},{"bool":{"should":[{"range":{"@timestamp":{"lte":1521862432253}}}],"minimum_should_match":1}}]}}]}}],"should":[],"must_not":[]}}'
+    );
+  });
+
+  test('Only KQL search/filter query', () => {
+    const { filterQuery } = combineQueries({
+      config,
+      dataProviders: [],
+      indexPattern: mockIndexPattern,
+      browserFields: mockBrowserFields,
+      filters: [],
+      kqlQuery: { query: 'host.name: "host-1"', language: 'kuery' },
+      kqlMode: 'search',
+      start: startDate,
+      end: endDate,
+    })!;
+    expect(filterQuery).toEqual(
+      '{"bool":{"must":[],"filter":[{"bool":{"filter":[{"bool":{"should":[{"match_phrase":{"host.name":"host-1"}}],"minimum_should_match":1}},{"bool":{"filter":[{"bool":{"should":[{"range":{"@timestamp":{"gte":1521830963132}}}],"minimum_should_match":1}},{"bool":{"should":[{"range":{"@timestamp":{"lte":1521862432253}}}],"minimum_should_match":1}}]}}]}}],"should":[],"must_not":[]}}'
+    );
+  });
+
+  test('Data Provider & KQL search query', () => {
+    const dataProviders = mockDataProviders.slice(0, 1);
+    const { filterQuery } = combineQueries({
+      config,
+      dataProviders,
+      indexPattern: mockIndexPattern,
+      browserFields: mockBrowserFields,
+      filters: [],
+      kqlQuery: { query: 'host.name: "host-1"', language: 'kuery' },
+      kqlMode: 'search',
+      start: startDate,
+      end: endDate,
+    })!;
+    expect(filterQuery).toEqual(
+      '{"bool":{"must":[],"filter":[{"bool":{"filter":[{"bool":{"should":[{"bool":{"should":[{"match_phrase":{"name":"Provider 1"}}],"minimum_should_match":1}},{"bool":{"should":[{"match_phrase":{"host.name":"host-1"}}],"minimum_should_match":1}}],"minimum_should_match":1}},{"bool":{"filter":[{"bool":{"should":[{"range":{"@timestamp":{"gte":1521830963132}}}],"minimum_should_match":1}},{"bool":{"should":[{"range":{"@timestamp":{"lte":1521862432253}}}],"minimum_should_match":1}}]}}]}}],"should":[],"must_not":[]}}'
+    );
+  });
+
+  test('Data Provider & KQL filter query', () => {
+    const dataProviders = mockDataProviders.slice(0, 1);
+    const { filterQuery } = combineQueries({
+      config,
+      dataProviders,
+      indexPattern: mockIndexPattern,
+      browserFields: mockBrowserFields,
+      filters: [],
+      kqlQuery: { query: 'host.name: "host-1"', language: 'kuery' },
+      kqlMode: 'filter',
+      start: startDate,
+      end: endDate,
+    })!;
+    expect(filterQuery).toEqual(
+      '{"bool":{"must":[],"filter":[{"bool":{"filter":[{"bool":{"filter":[{"bool":{"should":[{"match_phrase":{"name":"Provider 1"}}],"minimum_should_match":1}},{"bool":{"should":[{"match_phrase":{"host.name":"host-1"}}],"minimum_should_match":1}}]}},{"bool":{"filter":[{"bool":{"should":[{"range":{"@timestamp":{"gte":1521830963132}}}],"minimum_should_match":1}},{"bool":{"should":[{"range":{"@timestamp":{"lte":1521862432253}}}],"minimum_should_match":1}}]}}]}}],"should":[],"must_not":[]}}'
+    );
+  });
+
+  test('Data Provider & KQL search query multiple', () => {
+    const dataProviders = cloneDeep(mockDataProviders.slice(0, 2));
+    dataProviders[0].and = mockDataProviders.slice(2, 4);
+    dataProviders[1].and = mockDataProviders.slice(4, 5);
+    const { filterQuery } = combineQueries({
+      config,
+      dataProviders,
+      indexPattern: mockIndexPattern,
+      browserFields: mockBrowserFields,
+      filters: [],
+      kqlQuery: { query: 'host.name: "host-1"', language: 'kuery' },
+      kqlMode: 'search',
+      start: startDate,
+      end: endDate,
+    })!;
+    expect(filterQuery).toEqual(
+      '{"bool":{"must":[],"filter":[{"bool":{"filter":[{"bool":{"should":[{"bool":{"should":[{"bool":{"filter":[{"bool":{"should":[{"match_phrase":{"name":"Provider 1"}}],"minimum_should_match":1}},{"bool":{"filter":[{"bool":{"should":[{"match_phrase":{"name":"Provider 3"}}],"minimum_should_match":1}},{"bool":{"should":[{"match_phrase":{"name":"Provider 4"}}],"minimum_should_match":1}}]}}]}},{"bool":{"filter":[{"bool":{"should":[{"match_phrase":{"name":"Provider 2"}}],"minimum_should_match":1}},{"bool":{"should":[{"match_phrase":{"name":"Provider 5"}}],"minimum_should_match":1}}]}}],"minimum_should_match":1}},{"bool":{"should":[{"match_phrase":{"host.name":"host-1"}}],"minimum_should_match":1}}],"minimum_should_match":1}},{"bool":{"filter":[{"bool":{"should":[{"range":{"@timestamp":{"gte":1521830963132}}}],"minimum_should_match":1}},{"bool":{"should":[{"range":{"@timestamp":{"lte":1521862432253}}}],"minimum_should_match":1}}]}}]}}],"should":[],"must_not":[]}}'
+    );
+  });
+
+  test('Data Provider & KQL filter query multiple', () => {
+    const dataProviders = cloneDeep(mockDataProviders.slice(0, 2));
+    dataProviders[0].and = mockDataProviders.slice(2, 4);
+    dataProviders[1].and = mockDataProviders.slice(4, 5);
+    const { filterQuery } = combineQueries({
+      config,
+      dataProviders,
+      indexPattern: mockIndexPattern,
+      browserFields: mockBrowserFields,
+      filters: [],
+      kqlQuery: { query: 'host.name: "host-1"', language: 'kuery' },
+      kqlMode: 'filter',
+      start: startDate,
+      end: endDate,
+    })!;
+    expect(filterQuery).toEqual(
+      '{"bool":{"must":[],"filter":[{"bool":{"filter":[{"bool":{"filter":[{"bool":{"should":[{"bool":{"filter":[{"bool":{"should":[{"match_phrase":{"name":"Provider 1"}}],"minimum_should_match":1}},{"bool":{"filter":[{"bool":{"should":[{"match_phrase":{"name":"Provider 3"}}],"minimum_should_match":1}},{"bool":{"should":[{"match_phrase":{"name":"Provider 4"}}],"minimum_should_match":1}}]}}]}},{"bool":{"filter":[{"bool":{"should":[{"match_phrase":{"name":"Provider 2"}}],"minimum_should_match":1}},{"bool":{"should":[{"match_phrase":{"name":"Provider 5"}}],"minimum_should_match":1}}]}}],"minimum_should_match":1}},{"bool":{"should":[{"match_phrase":{"host.name":"host-1"}}],"minimum_should_match":1}}]}},{"bool":{"filter":[{"bool":{"should":[{"range":{"@timestamp":{"gte":1521830963132}}}],"minimum_should_match":1}},{"bool":{"should":[{"range":{"@timestamp":{"lte":1521862432253}}}],"minimum_should_match":1}}]}}]}}],"should":[],"must_not":[]}}'
+    );
+  });
+});
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/helpers.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/helpers.tsx
new file mode 100644
index 00000000000000..776ff114734d90
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/helpers.tsx
@@ -0,0 +1,160 @@
+/*
+ * 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 { isEmpty, isNumber, get } from 'lodash/fp';
+import memoizeOne from 'memoize-one';
+
+import { escapeQueryValue, convertToBuildEsQuery } from '../../../common/lib/keury';
+
+import { DataProvider, DataProvidersAnd, EXISTS_OPERATOR } from './data_providers/data_provider';
+import { BrowserFields } from '../../../common/containers/source';
+import {
+  IIndexPattern,
+  Query,
+  EsQueryConfig,
+  Filter,
+} from '../../../../../../../src/plugins/data/public';
+
+const convertDateFieldToQuery = (field: string, value: string | number) =>
+  `${field}: ${isNumber(value) ? value : new Date(value).valueOf()}`;
+
+const getBaseFields = memoizeOne((browserFields: BrowserFields): string[] => {
+  const baseFields = get('base', browserFields);
+  if (baseFields != null && baseFields.fields != null) {
+    return Object.keys(baseFields.fields);
+  }
+  return [];
+});
+
+const getBrowserFieldPath = (field: string, browserFields: BrowserFields) => {
+  const splitFields = field.split('.');
+  const baseFields = getBaseFields(browserFields);
+  if (baseFields.includes(field)) {
+    return ['base', 'fields', field];
+  }
+  return [splitFields[0], 'fields', field];
+};
+
+const checkIfFieldTypeIsDate = (field: string, browserFields: BrowserFields) => {
+  const pathBrowserField = getBrowserFieldPath(field, browserFields);
+  const browserField = get(pathBrowserField, browserFields);
+  if (browserField != null && browserField.type === 'date') {
+    return true;
+  }
+  return false;
+};
+
+const buildQueryMatch = (
+  dataProvider: DataProvider | DataProvidersAnd,
+  browserFields: BrowserFields
+) =>
+  `${dataProvider.excluded ? 'NOT ' : ''}${
+    dataProvider.queryMatch.operator !== EXISTS_OPERATOR
+      ? checkIfFieldTypeIsDate(dataProvider.queryMatch.field, browserFields)
+        ? convertDateFieldToQuery(dataProvider.queryMatch.field, dataProvider.queryMatch.value)
+        : `${dataProvider.queryMatch.field} : ${
+            isNumber(dataProvider.queryMatch.value)
+              ? dataProvider.queryMatch.value
+              : escapeQueryValue(dataProvider.queryMatch.value)
+          }`
+      : `${dataProvider.queryMatch.field} ${EXISTS_OPERATOR}`
+  }`.trim();
+
+const buildQueryForAndProvider = (
+  dataAndProviders: DataProvidersAnd[],
+  browserFields: BrowserFields
+) =>
+  dataAndProviders
+    .reduce((andQuery, andDataProvider) => {
+      const prepend = (q: string) => `${q !== '' ? `${q} and ` : ''}`;
+      return andDataProvider.enabled
+        ? `${prepend(andQuery)} ${buildQueryMatch(andDataProvider, browserFields)}`
+        : andQuery;
+    }, '')
+    .trim();
+
+export const buildGlobalQuery = (dataProviders: DataProvider[], browserFields: BrowserFields) =>
+  dataProviders
+    .reduce((query, dataProvider: DataProvider, i) => {
+      const prepend = (q: string) => `${q !== '' ? `(${q}) or ` : ''}`;
+      const openParen = i > 0 ? '(' : '';
+      const closeParen = i > 0 ? ')' : '';
+      return dataProvider.enabled
+        ? `${prepend(query)}${openParen}${buildQueryMatch(dataProvider, browserFields)}
+        ${
+          dataProvider.and.length > 0
+            ? ` and ${buildQueryForAndProvider(dataProvider.and, browserFields)}`
+            : ''
+        }${closeParen}`.trim()
+        : query;
+    }, '')
+    .trim();
+
+export const combineQueries = ({
+  config,
+  dataProviders,
+  indexPattern,
+  browserFields,
+  filters = [],
+  kqlQuery,
+  kqlMode,
+  start,
+  end,
+  isEventViewer,
+}: {
+  config: EsQueryConfig;
+  dataProviders: DataProvider[];
+  indexPattern: IIndexPattern;
+  browserFields: BrowserFields;
+  filters: Filter[];
+  kqlQuery: Query;
+  kqlMode: string;
+  start: number;
+  end: number;
+  isEventViewer?: boolean;
+}): { filterQuery: string } | null => {
+  const kuery: Query = { query: '', language: kqlQuery.language };
+  if (isEmpty(dataProviders) && isEmpty(kqlQuery.query) && isEmpty(filters) && !isEventViewer) {
+    return null;
+  } else if (isEmpty(dataProviders) && isEmpty(kqlQuery.query) && isEventViewer) {
+    kuery.query = `@timestamp >= ${start} and @timestamp <= ${end}`;
+    return {
+      filterQuery: convertToBuildEsQuery({ config, queries: [kuery], indexPattern, filters }),
+    };
+  } else if (isEmpty(dataProviders) && isEmpty(kqlQuery.query) && !isEmpty(filters)) {
+    kuery.query = `@timestamp >= ${start} and @timestamp <= ${end}`;
+    return {
+      filterQuery: convertToBuildEsQuery({ config, queries: [kuery], indexPattern, filters }),
+    };
+  } else if (isEmpty(dataProviders) && !isEmpty(kqlQuery.query)) {
+    kuery.query = `(${kqlQuery.query}) and @timestamp >= ${start} and @timestamp <= ${end}`;
+    return {
+      filterQuery: convertToBuildEsQuery({ config, queries: [kuery], indexPattern, filters }),
+    };
+  } else if (!isEmpty(dataProviders) && isEmpty(kqlQuery)) {
+    kuery.query = `(${buildGlobalQuery(
+      dataProviders,
+      browserFields
+    )}) and @timestamp >= ${start} and @timestamp <= ${end}`;
+    return {
+      filterQuery: convertToBuildEsQuery({ config, queries: [kuery], indexPattern, filters }),
+    };
+  }
+  const operatorKqlQuery = kqlMode === 'filter' ? 'and' : 'or';
+  const postpend = (q: string) => `${!isEmpty(q) ? ` ${operatorKqlQuery} (${q})` : ''}`;
+  kuery.query = `((${buildGlobalQuery(dataProviders, browserFields)})${postpend(
+    kqlQuery.query as string
+  )}) and @timestamp >= ${start} and @timestamp <= ${end}`;
+  return {
+    filterQuery: convertToBuildEsQuery({ config, queries: [kuery], indexPattern, filters }),
+  };
+};
+
+/**
+ * The CSS class name of a "stateful event", which appears in both
+ * the `Timeline` and the `Events Viewer` widget
+ */
+export const STATEFUL_EVENT_CSS_CLASS_NAME = 'event-column-view';
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/index.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/index.tsx
new file mode 100644
index 00000000000000..fca16ffadce843
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/index.tsx
@@ -0,0 +1,277 @@
+/*
+ * 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, { useEffect, useCallback, useMemo } from 'react';
+import { connect, ConnectedProps } from 'react-redux';
+import deepEqual from 'fast-deep-equal';
+
+import { WithSource } from '../../../common/containers/source';
+import { useSignalIndex } from '../../../alerts/containers/detection_engine/signals/use_signal_index';
+import { inputsModel, inputsSelectors, State } from '../../../common/store';
+import { timelineActions, timelineSelectors } from '../../store/timeline';
+import { ColumnHeaderOptions, TimelineModel } from '../../../timelines/store/timeline/model';
+import { timelineDefaults } from '../../../timelines/store/timeline/defaults';
+import { defaultHeaders } from './body/column_headers/default_headers';
+import {
+  OnChangeItemsPerPage,
+  OnDataProviderRemoved,
+  OnDataProviderEdited,
+  OnToggleDataProviderEnabled,
+  OnToggleDataProviderExcluded,
+} from './events';
+import { Timeline } from './timeline';
+
+export interface OwnProps {
+  id: string;
+  onClose: () => void;
+  usersViewing: string[];
+}
+
+type Props = OwnProps & PropsFromRedux;
+
+const StatefulTimelineComponent = React.memo<Props>(
+  ({
+    columns,
+    createTimeline,
+    dataProviders,
+    eventType,
+    end,
+    filters,
+    id,
+    isLive,
+    itemsPerPage,
+    itemsPerPageOptions,
+    kqlMode,
+    kqlQueryExpression,
+    onClose,
+    onDataProviderEdited,
+    removeColumn,
+    removeProvider,
+    show,
+    showCallOutUnauthorizedMsg,
+    sort,
+    start,
+    updateDataProviderEnabled,
+    updateDataProviderExcluded,
+    updateItemsPerPage,
+    upsertColumn,
+    usersViewing,
+  }) => {
+    const { loading, signalIndexExists, signalIndexName } = useSignalIndex();
+
+    const indexToAdd = useMemo<string[]>(() => {
+      if (
+        eventType &&
+        signalIndexExists &&
+        signalIndexName != null &&
+        ['signal', 'all'].includes(eventType)
+      ) {
+        return [signalIndexName];
+      }
+      return [];
+    }, [eventType, signalIndexExists, signalIndexName]);
+
+    const onDataProviderRemoved: OnDataProviderRemoved = useCallback(
+      (providerId: string, andProviderId?: string) =>
+        removeProvider!({ id, providerId, andProviderId }),
+      [id]
+    );
+
+    const onToggleDataProviderEnabled: OnToggleDataProviderEnabled = useCallback(
+      ({ providerId, enabled, andProviderId }) =>
+        updateDataProviderEnabled!({
+          id,
+          enabled,
+          providerId,
+          andProviderId,
+        }),
+      [id]
+    );
+
+    const onToggleDataProviderExcluded: OnToggleDataProviderExcluded = useCallback(
+      ({ providerId, excluded, andProviderId }) =>
+        updateDataProviderExcluded!({
+          id,
+          excluded,
+          providerId,
+          andProviderId,
+        }),
+      [id]
+    );
+
+    const onDataProviderEditedLocal: OnDataProviderEdited = useCallback(
+      ({ andProviderId, excluded, field, operator, providerId, value }) =>
+        onDataProviderEdited!({
+          andProviderId,
+          excluded,
+          field,
+          id,
+          operator,
+          providerId,
+          value,
+        }),
+      [id]
+    );
+
+    const onChangeItemsPerPage: OnChangeItemsPerPage = useCallback(
+      itemsChangedPerPage => updateItemsPerPage!({ id, itemsPerPage: itemsChangedPerPage }),
+      [id]
+    );
+
+    const toggleColumn = useCallback(
+      (column: ColumnHeaderOptions) => {
+        const exists = columns.findIndex(c => c.id === column.id) !== -1;
+
+        if (!exists && upsertColumn != null) {
+          upsertColumn({
+            column,
+            id,
+            index: 1,
+          });
+        }
+
+        if (exists && removeColumn != null) {
+          removeColumn({
+            columnId: column.id,
+            id,
+          });
+        }
+      },
+      [columns, id]
+    );
+
+    useEffect(() => {
+      if (createTimeline != null) {
+        createTimeline({ id, columns: defaultHeaders, show: false });
+      }
+    }, []);
+
+    return (
+      <WithSource sourceId="default" indexToAdd={indexToAdd}>
+        {({ indexPattern, browserFields }) => (
+          <Timeline
+            browserFields={browserFields}
+            columns={columns}
+            dataProviders={dataProviders!}
+            end={end}
+            eventType={eventType}
+            filters={filters}
+            id={id}
+            indexPattern={indexPattern}
+            indexToAdd={indexToAdd}
+            isLive={isLive}
+            itemsPerPage={itemsPerPage!}
+            itemsPerPageOptions={itemsPerPageOptions!}
+            kqlMode={kqlMode}
+            kqlQueryExpression={kqlQueryExpression}
+            loadingIndexName={loading}
+            onChangeItemsPerPage={onChangeItemsPerPage}
+            onClose={onClose}
+            onDataProviderEdited={onDataProviderEditedLocal}
+            onDataProviderRemoved={onDataProviderRemoved}
+            onToggleDataProviderEnabled={onToggleDataProviderEnabled}
+            onToggleDataProviderExcluded={onToggleDataProviderExcluded}
+            show={show!}
+            showCallOutUnauthorizedMsg={showCallOutUnauthorizedMsg}
+            sort={sort!}
+            start={start}
+            toggleColumn={toggleColumn}
+            usersViewing={usersViewing}
+          />
+        )}
+      </WithSource>
+    );
+  },
+  (prevProps, nextProps) => {
+    return (
+      prevProps.eventType === nextProps.eventType &&
+      prevProps.end === nextProps.end &&
+      prevProps.id === nextProps.id &&
+      prevProps.isLive === nextProps.isLive &&
+      prevProps.itemsPerPage === nextProps.itemsPerPage &&
+      prevProps.kqlMode === nextProps.kqlMode &&
+      prevProps.kqlQueryExpression === nextProps.kqlQueryExpression &&
+      prevProps.show === nextProps.show &&
+      prevProps.showCallOutUnauthorizedMsg === nextProps.showCallOutUnauthorizedMsg &&
+      prevProps.start === nextProps.start &&
+      deepEqual(prevProps.columns, nextProps.columns) &&
+      deepEqual(prevProps.dataProviders, nextProps.dataProviders) &&
+      deepEqual(prevProps.filters, nextProps.filters) &&
+      deepEqual(prevProps.itemsPerPageOptions, nextProps.itemsPerPageOptions) &&
+      deepEqual(prevProps.sort, nextProps.sort) &&
+      deepEqual(prevProps.usersViewing, nextProps.usersViewing)
+    );
+  }
+);
+
+StatefulTimelineComponent.displayName = 'StatefulTimelineComponent';
+
+const makeMapStateToProps = () => {
+  const getShowCallOutUnauthorizedMsg = timelineSelectors.getShowCallOutUnauthorizedMsg();
+  const getTimeline = timelineSelectors.getTimelineByIdSelector();
+  const getKqlQueryTimeline = timelineSelectors.getKqlFilterQuerySelector();
+  const getInputsTimeline = inputsSelectors.getTimelineSelector();
+  const mapStateToProps = (state: State, { id }: OwnProps) => {
+    const timeline: TimelineModel = getTimeline(state, id) ?? timelineDefaults;
+    const input: inputsModel.InputsRange = getInputsTimeline(state);
+    const {
+      columns,
+      dataProviders,
+      eventType,
+      filters,
+      itemsPerPage,
+      itemsPerPageOptions,
+      kqlMode,
+      show,
+      sort,
+    } = timeline;
+    const kqlQueryExpression = getKqlQueryTimeline(state, id)!;
+
+    const timelineFilter = kqlMode === 'filter' ? filters || [] : [];
+
+    return {
+      columns,
+      dataProviders,
+      eventType,
+      end: input.timerange.to,
+      filters: timelineFilter,
+      id,
+      isLive: input.policy.kind === 'interval',
+      itemsPerPage,
+      itemsPerPageOptions,
+      kqlMode,
+      kqlQueryExpression,
+      show,
+      showCallOutUnauthorizedMsg: getShowCallOutUnauthorizedMsg(state),
+      sort,
+      start: input.timerange.from,
+    };
+  };
+  return mapStateToProps;
+};
+
+const mapDispatchToProps = {
+  addProvider: timelineActions.addProvider,
+  createTimeline: timelineActions.createTimeline,
+  onDataProviderEdited: timelineActions.dataProviderEdited,
+  removeColumn: timelineActions.removeColumn,
+  removeProvider: timelineActions.removeProvider,
+  updateColumns: timelineActions.updateColumns,
+  updateDataProviderEnabled: timelineActions.updateDataProviderEnabled,
+  updateDataProviderExcluded: timelineActions.updateDataProviderExcluded,
+  updateDataProviderKqlQuery: timelineActions.updateDataProviderKqlQuery,
+  updateHighlightedDropAndProviderId: timelineActions.updateHighlightedDropAndProviderId,
+  updateItemsPerPage: timelineActions.updateItemsPerPage,
+  updateItemsPerPageOptions: timelineActions.updateItemsPerPageOptions,
+  updateSort: timelineActions.updateSort,
+  upsertColumn: timelineActions.upsertColumn,
+};
+
+const connector = connect(makeMapStateToProps, mapDispatchToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export const StatefulTimeline = connector(StatefulTimelineComponent);
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/insert_timeline_popover/index.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/insert_timeline_popover/index.test.tsx
new file mode 100644
index 00000000000000..d5cfc397e1990a
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/insert_timeline_popover/index.test.tsx
@@ -0,0 +1,65 @@
+/*
+ * 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 { mount } from 'enzyme';
+/* eslint-disable @kbn/eslint/module_migration */
+import routeData from 'react-router';
+/* eslint-enable @kbn/eslint/module_migration */
+import { InsertTimelinePopoverComponent } from '.';
+
+const mockDispatch = jest.fn();
+jest.mock('react-redux', () => {
+  const reactRedux = jest.requireActual('react-redux');
+  return {
+    ...reactRedux,
+    useDispatch: () => mockDispatch,
+  };
+});
+const mockLocation = {
+  pathname: '/apath',
+  hash: '',
+  search: '',
+  state: '',
+};
+const mockLocationWithState = {
+  ...mockLocation,
+  state: {
+    insertTimeline: {
+      timelineId: 'timeline-id',
+      timelineSavedObjectId: '34578-3497-5893-47589-34759',
+      timelineTitle: 'Timeline title',
+    },
+  },
+};
+
+const onTimelineChange = jest.fn();
+const defaultProps = {
+  isDisabled: false,
+  onTimelineChange,
+};
+
+describe('Insert timeline popover ', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('should insert a timeline when passed in the router state', () => {
+    jest.spyOn(routeData, 'useLocation').mockReturnValue(mockLocationWithState);
+    mount(<InsertTimelinePopoverComponent {...defaultProps} />);
+    expect(mockDispatch).toBeCalledWith({
+      payload: { id: 'timeline-id', show: false },
+      type: 'x-pack/siem/local/timeline/SHOW_TIMELINE',
+    });
+    expect(onTimelineChange).toBeCalledWith('Timeline title', '34578-3497-5893-47589-34759');
+  });
+  it('should do nothing when router state', () => {
+    jest.spyOn(routeData, 'useLocation').mockReturnValue(mockLocation);
+    mount(<InsertTimelinePopoverComponent {...defaultProps} />);
+    expect(mockDispatch).toHaveBeenCalledTimes(0);
+    expect(onTimelineChange).toHaveBeenCalledTimes(0);
+  });
+});
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/insert_timeline_popover/index.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/insert_timeline_popover/index.tsx
new file mode 100644
index 00000000000000..37b1125cd673af
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/insert_timeline_popover/index.tsx
@@ -0,0 +1,115 @@
+/*
+ * 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 { EuiButtonIcon, EuiPopover, EuiSelectableOption, EuiToolTip } from '@elastic/eui';
+import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+
+import { OpenTimelineResult } from '../../open_timeline/types';
+import { SelectableTimeline } from '../selectable_timeline';
+import * as i18n from '../translations';
+import { timelineActions } from '../../../../timelines/store/timeline';
+
+interface InsertTimelinePopoverProps {
+  isDisabled: boolean;
+  hideUntitled?: boolean;
+  onTimelineChange: (timelineTitle: string, timelineId: string | null) => void;
+}
+
+interface RouterState {
+  insertTimeline: {
+    timelineId: string;
+    timelineSavedObjectId: string;
+    timelineTitle: string;
+  };
+}
+
+type Props = InsertTimelinePopoverProps;
+
+export const InsertTimelinePopoverComponent: React.FC<Props> = ({
+  isDisabled,
+  hideUntitled = false,
+  onTimelineChange,
+}) => {
+  const dispatch = useDispatch();
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const { state } = useLocation();
+  const [routerState, setRouterState] = useState<RouterState | null>(state ?? null);
+
+  useEffect(() => {
+    if (routerState && routerState.insertTimeline) {
+      dispatch(
+        timelineActions.showTimeline({ id: routerState.insertTimeline.timelineId, show: false })
+      );
+      onTimelineChange(
+        routerState.insertTimeline.timelineTitle,
+        routerState.insertTimeline.timelineSavedObjectId
+      );
+      setRouterState(null);
+    }
+  }, [routerState]);
+
+  const handleClosePopover = useCallback(() => {
+    setIsPopoverOpen(false);
+  }, []);
+
+  const handleOpenPopover = useCallback(() => {
+    setIsPopoverOpen(true);
+  }, []);
+
+  const insertTimelineButton = useMemo(
+    () => (
+      <EuiToolTip position="top" content={<p>{i18n.INSERT_TIMELINE}</p>}>
+        <EuiButtonIcon
+          aria-label={i18n.INSERT_TIMELINE}
+          data-test-subj="insert-timeline-button"
+          iconType="timeline"
+          isDisabled={isDisabled}
+          onClick={handleOpenPopover}
+        />
+      </EuiToolTip>
+    ),
+    [handleOpenPopover, isDisabled]
+  );
+
+  const handleGetSelectableOptions = useCallback(
+    ({ timelines }) => [
+      ...timelines.map(
+        (t: OpenTimelineResult, index: number) =>
+          ({
+            description: t.description,
+            favorite: t.favorite,
+            label: t.title,
+            id: t.savedObjectId,
+            key: `${t.title}-${index}`,
+            title: t.title,
+            checked: undefined,
+          } as EuiSelectableOption)
+      ),
+    ],
+    []
+  );
+
+  return (
+    <EuiPopover
+      data-test-subj="insert-timeline-popover"
+      id="searchTimelinePopover"
+      button={insertTimelineButton}
+      isOpen={isPopoverOpen}
+      closePopover={handleClosePopover}
+    >
+      <SelectableTimeline
+        hideUntitled={hideUntitled}
+        getSelectableOptions={handleGetSelectableOptions}
+        onClosePopover={handleClosePopover}
+        onTimelineChange={onTimelineChange}
+      />
+    </EuiPopover>
+  );
+};
+
+export const InsertTimelinePopover = memo(InsertTimelinePopoverComponent);
diff --git a/x-pack/plugins/siem/public/components/timeline/insert_timeline_popover/use_insert_timeline.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/insert_timeline_popover/use_insert_timeline.tsx
similarity index 87%
rename from x-pack/plugins/siem/public/components/timeline/insert_timeline_popover/use_insert_timeline.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/insert_timeline_popover/use_insert_timeline.tsx
index e4d828b68f3dc9..1a81c131de0150 100644
--- a/x-pack/plugins/siem/public/components/timeline/insert_timeline_popover/use_insert_timeline.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/insert_timeline_popover/use_insert_timeline.tsx
@@ -5,9 +5,9 @@
  */
 
 import { useCallback, useState } from 'react';
-import { useBasePath } from '../../../lib/kibana';
-import { CursorPosition } from '../../markdown_editor';
-import { FormData, FormHook } from '../../../shared_imports';
+import { useBasePath } from '../../../../common/lib/kibana';
+import { CursorPosition } from '../../../../common/components/markdown_editor';
+import { FormData, FormHook } from '../../../../shared_imports';
 
 export const useInsertTimeline = <T extends FormData>(form: FormHook<T>, fieldName: string) => {
   const basePath = window.location.origin + useBasePath();
diff --git a/x-pack/plugins/siem/public/components/pin/index.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/pin/index.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/pin/index.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/pin/index.test.tsx
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/pin/index.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/pin/index.tsx
new file mode 100644
index 00000000000000..800ea814fdd509
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/pin/index.tsx
@@ -0,0 +1,37 @@
+/*
+ * 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 { EuiButtonIcon, IconSize } from '@elastic/eui';
+import { noop } from 'lodash/fp';
+import React from 'react';
+
+import * as i18n from '../body/translations';
+
+export type PinIcon = 'pin' | 'pinFilled';
+
+export const getPinIcon = (pinned: boolean): PinIcon => (pinned ? 'pinFilled' : 'pin');
+
+interface Props {
+  allowUnpinning: boolean;
+  iconSize?: IconSize;
+  onClick?: () => void;
+  pinned: boolean;
+}
+
+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/plugins/siem/public/timelines/components/timeline/properties/helpers.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/properties/helpers.tsx
new file mode 100644
index 00000000000000..1453d58c2ffd59
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/properties/helpers.tsx
@@ -0,0 +1,327 @@
+/*
+ * 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 {
+  EuiBadge,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiButtonIcon,
+  EuiFieldText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiModal,
+  EuiOverlayMask,
+  EuiToolTip,
+} from '@elastic/eui';
+import React, { useCallback } from 'react';
+import uuid from 'uuid';
+import styled from 'styled-components';
+import { useHistory } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+
+import { Note } from '../../../../common/lib/note';
+import { Notes } from '../../notes';
+import { AssociateNote, UpdateNote } from '../../notes/helpers';
+import { NOTES_PANEL_WIDTH } from './notes_size';
+import { ButtonContainer, DescriptionContainer, LabelText, NameField, StyledStar } from './styles';
+import * as i18n from './translations';
+import { SiemPageName } from '../../../../app/types';
+import { timelineSelectors } from '../../../../timelines/store/timeline';
+import { State } from '../../../../common/store';
+
+export const historyToolTip = 'The chronological history of actions related to this timeline';
+export const streamLiveToolTip = 'Update the Timeline as new data arrives';
+export const newTimelineToolTip = 'Create a new timeline';
+
+const NotesCountBadge = (styled(EuiBadge)`
+  margin-left: 5px;
+` as unknown) as typeof EuiBadge;
+
+NotesCountBadge.displayName = 'NotesCountBadge';
+
+type CreateTimeline = ({ id, show }: { id: string; show?: boolean }) => void;
+type UpdateIsFavorite = ({ id, isFavorite }: { id: string; isFavorite: boolean }) => void;
+type UpdateTitle = ({ id, title }: { id: string; title: string }) => void;
+type UpdateDescription = ({ id, description }: { id: string; description: string }) => void;
+
+export const StarIcon = React.memo<{
+  isFavorite: boolean;
+  timelineId: string;
+  updateIsFavorite: UpdateIsFavorite;
+}>(({ isFavorite, timelineId: id, updateIsFavorite }) => (
+  // TODO: 1 error is: Visible, non-interactive elements with click handlers must have at least one keyboard listener
+  // TODO: 2 error is: Elements with the 'button' interactive role must be focusable
+  // TODO: Investigate this error
+  // eslint-disable-next-line
+  <div role="button" onClick={() => updateIsFavorite({ id, isFavorite: !isFavorite })}>
+    {isFavorite ? (
+      <EuiToolTip data-test-subj="timeline-favorite-filled-star-tool-tip" content={i18n.FAVORITE}>
+        <StyledStar data-test-subj="timeline-favorite-filled-star" type="starFilled" size="l" />
+      </EuiToolTip>
+    ) : (
+      <EuiToolTip content={i18n.NOT_A_FAVORITE}>
+        <StyledStar data-test-subj="timeline-favorite-empty-star" type="starEmpty" size="l" />
+      </EuiToolTip>
+    )}
+  </div>
+));
+StarIcon.displayName = 'StarIcon';
+
+interface DescriptionProps {
+  description: string;
+  timelineId: string;
+  updateDescription: UpdateDescription;
+}
+
+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';
+
+interface NewCaseProps {
+  onClosePopover: () => void;
+  timelineId: string;
+  timelineTitle: string;
+}
+
+export const NewCase = React.memo<NewCaseProps>(({ onClosePopover, timelineId, timelineTitle }) => {
+  const history = useHistory();
+  const { savedObjectId } = useSelector((state: State) =>
+    timelineSelectors.selectTimeline(state, timelineId)
+  );
+  const handleClick = useCallback(() => {
+    onClosePopover();
+    history.push({
+      pathname: `/${SiemPageName.case}/create`,
+      state: {
+        insertTimeline: {
+          timelineId,
+          timelineSavedObjectId: savedObjectId,
+          timelineTitle: timelineTitle.length > 0 ? timelineTitle : i18n.UNTITLED_TIMELINE,
+        },
+      },
+    });
+  }, [onClosePopover, history, timelineId, timelineTitle]);
+
+  return (
+    <EuiButtonEmpty
+      data-test-subj="attach-timeline-case"
+      color="text"
+      iconSide="left"
+      iconType="paperClip"
+      onClick={handleClick}
+    >
+      {i18n.ATTACH_TIMELINE_TO_NEW_CASE}
+    </EuiButtonEmpty>
+  );
+});
+NewCase.displayName = 'NewCase';
+
+interface NewTimelineProps {
+  createTimeline: CreateTimeline;
+  onClosePopover: () => void;
+  timelineId: string;
+}
+
+export const NewTimeline = React.memo<NewTimelineProps>(
+  ({ createTimeline, onClosePopover, timelineId }) => {
+    const handleClick = useCallback(() => {
+      createTimeline({ id: timelineId, show: true });
+      onClosePopover();
+    }, [createTimeline, timelineId, onClosePopover]);
+
+    return (
+      <EuiButtonEmpty
+        data-test-subj="timeline-new"
+        color="text"
+        iconSide="left"
+        iconType="plusInCircle"
+        onClick={handleClick}
+      >
+        {i18n.NEW_TIMELINE}
+      </EuiButtonEmpty>
+    );
+  }
+);
+NewTimeline.displayName = 'NewTimeline';
+
+interface NotesButtonProps {
+  animate?: boolean;
+  associateNote: AssociateNote;
+  getNotesByIds: (noteIds: string[]) => Note[];
+  noteIds: string[];
+  size: 's' | 'l';
+  showNotes: boolean;
+  toggleShowNotes: () => void;
+  text?: string;
+  toolTip?: string;
+  updateNote: UpdateNote;
+}
+
+const getNewNoteId = (): string => uuid.v4();
+
+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';
+
+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 = React.memo<NotesButtonProps>(
+  ({
+    animate = true,
+    associateNote,
+    getNotesByIds,
+    noteIds,
+    showNotes,
+    size,
+    toggleShowNotes,
+    text,
+    updateNote,
+  }) => (
+    <ButtonContainer animate={animate} data-test-subj="timeline-notes-button-container">
+      <>
+        {size === 'l' ? (
+          <LargeNotesButton noteIds={noteIds} text={text} toggleShowNotes={toggleShowNotes} />
+        ) : (
+          <SmallNotesButton noteIds={noteIds} toggleShowNotes={toggleShowNotes} />
+        )}
+        {size === 'l' && showNotes ? (
+          <EuiOverlayMask>
+            <EuiModal maxWidth={NOTES_PANEL_WIDTH} onClose={toggleShowNotes}>
+              <Notes
+                associateNote={associateNote}
+                getNotesByIds={getNotesByIds}
+                noteIds={noteIds}
+                getNewNoteId={getNewNoteId}
+                updateNote={updateNote}
+              />
+            </EuiModal>
+          </EuiOverlayMask>
+        ) : null}
+      </>
+    </ButtonContainer>
+  )
+);
+NotesButtonComponent.displayName = 'NotesButtonComponent';
+
+export const NotesButton = React.memo<NotesButtonProps>(
+  ({
+    animate = true,
+    associateNote,
+    getNotesByIds,
+    noteIds,
+    showNotes,
+    size,
+    toggleShowNotes,
+    toolTip,
+    text,
+    updateNote,
+  }) =>
+    showNotes ? (
+      <NotesButtonComponent
+        animate={animate}
+        associateNote={associateNote}
+        getNotesByIds={getNotesByIds}
+        noteIds={noteIds}
+        showNotes={showNotes}
+        size={size}
+        toggleShowNotes={toggleShowNotes}
+        text={text}
+        updateNote={updateNote}
+      />
+    ) : (
+      <EuiToolTip content={toolTip || ''} data-test-subj="timeline-notes-tool-tip">
+        <NotesButtonComponent
+          animate={animate}
+          associateNote={associateNote}
+          getNotesByIds={getNotesByIds}
+          noteIds={noteIds}
+          showNotes={showNotes}
+          size={size}
+          toggleShowNotes={toggleShowNotes}
+          text={text}
+          updateNote={updateNote}
+        />
+      </EuiToolTip>
+    )
+);
+NotesButton.displayName = 'NotesButton';
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/properties/index.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/properties/index.test.tsx
new file mode 100644
index 00000000000000..17968a5977069a
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/properties/index.test.tsx
@@ -0,0 +1,469 @@
+/*
+ * 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 { mount } from 'enzyme';
+import React from 'react';
+import { Provider as ReduxStoreProvider } from 'react-redux';
+
+import {
+  mockGlobalState,
+  apolloClientObservable,
+  SUB_PLUGINS_REDUCER,
+} from '../../../../common/mock';
+import { createStore, State } from '../../../../common/store';
+import { useThrottledResizeObserver } from '../../../../common/components/utils';
+import { Properties, showDescriptionThreshold, showNotesThreshold } from '.';
+
+jest.mock('../../../../common/lib/kibana');
+
+let mockedWidth = 1000;
+jest.mock('../../../../common/components/utils');
+(useThrottledResizeObserver as jest.Mock).mockImplementation(() => ({
+  width: mockedWidth,
+}));
+
+describe('Properties', () => {
+  const usersViewing = ['elastic'];
+
+  const state: State = mockGlobalState;
+  let store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable);
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    store = createStore(state, SUB_PLUGINS_REDUCER, apolloClientObservable);
+    mockedWidth = 1000;
+  });
+
+  test('renders correctly', () => {
+    const wrapper = mount(
+      <ReduxStoreProvider store={store}>
+        <Properties
+          associateNote={jest.fn()}
+          createTimeline={jest.fn()}
+          isDataInTimeline={false}
+          isDatepickerLocked={false}
+          isFavorite={false}
+          title=""
+          description=""
+          getNotesByIds={jest.fn()}
+          noteIds={[]}
+          timelineId="abc"
+          toggleLock={jest.fn()}
+          updateDescription={jest.fn()}
+          updateIsFavorite={jest.fn()}
+          updateTitle={jest.fn()}
+          updateNote={jest.fn()}
+          usersViewing={usersViewing}
+        />
+      </ReduxStoreProvider>
+    );
+    expect(wrapper.find('[data-test-subj="timeline-properties"]').exists()).toEqual(true);
+  });
+
+  test('it renders an empty star icon when it is NOT a favorite', () => {
+    const wrapper = mount(
+      <ReduxStoreProvider store={store}>
+        <Properties
+          associateNote={jest.fn()}
+          createTimeline={jest.fn()}
+          isDataInTimeline={false}
+          isDatepickerLocked={false}
+          isFavorite={false}
+          title=""
+          description=""
+          getNotesByIds={jest.fn()}
+          noteIds={[]}
+          timelineId="abc"
+          toggleLock={jest.fn()}
+          updateDescription={jest.fn()}
+          updateIsFavorite={jest.fn()}
+          updateTitle={jest.fn()}
+          updateNote={jest.fn()}
+          usersViewing={usersViewing}
+        />
+      </ReduxStoreProvider>
+    );
+
+    expect(wrapper.find('[data-test-subj="timeline-favorite-empty-star"]').exists()).toEqual(true);
+  });
+
+  test('it renders a filled star icon when it is a favorite', () => {
+    const wrapper = mount(
+      <ReduxStoreProvider store={store}>
+        <Properties
+          associateNote={jest.fn()}
+          createTimeline={jest.fn()}
+          isDataInTimeline={false}
+          isDatepickerLocked={false}
+          isFavorite={true}
+          title=""
+          description=""
+          getNotesByIds={jest.fn()}
+          noteIds={[]}
+          timelineId="abc"
+          toggleLock={jest.fn()}
+          updateDescription={jest.fn()}
+          updateIsFavorite={jest.fn()}
+          updateTitle={jest.fn()}
+          updateNote={jest.fn()}
+          usersViewing={usersViewing}
+        />
+      </ReduxStoreProvider>
+    );
+
+    expect(wrapper.find('[data-test-subj="timeline-favorite-filled-star"]').exists()).toEqual(true);
+  });
+
+  test('it renders the title of the timeline', () => {
+    const title = 'foozle';
+
+    const wrapper = mount(
+      <ReduxStoreProvider store={store}>
+        <Properties
+          associateNote={jest.fn()}
+          createTimeline={jest.fn()}
+          isDataInTimeline={false}
+          isDatepickerLocked={false}
+          isFavorite={false}
+          title={title}
+          description=""
+          getNotesByIds={jest.fn()}
+          noteIds={[]}
+          timelineId="abc"
+          toggleLock={jest.fn()}
+          updateDescription={jest.fn()}
+          updateIsFavorite={jest.fn()}
+          updateTitle={jest.fn()}
+          updateNote={jest.fn()}
+          usersViewing={usersViewing}
+        />
+      </ReduxStoreProvider>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="timeline-title"]')
+        .first()
+        .props().value
+    ).toEqual(title);
+  });
+
+  test('it renders the date picker with the lock icon', () => {
+    const wrapper = mount(
+      <ReduxStoreProvider store={store}>
+        <Properties
+          associateNote={jest.fn()}
+          createTimeline={jest.fn()}
+          isDataInTimeline={false}
+          isDatepickerLocked={false}
+          isFavorite={false}
+          title=""
+          description=""
+          getNotesByIds={jest.fn()}
+          noteIds={[]}
+          timelineId="abc"
+          toggleLock={jest.fn()}
+          updateDescription={jest.fn()}
+          updateIsFavorite={jest.fn()}
+          updateTitle={jest.fn()}
+          updateNote={jest.fn()}
+          usersViewing={usersViewing}
+        />
+      </ReduxStoreProvider>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="properties-left"]')
+        .find('[data-test-subj="timeline-date-picker-container"]')
+        .exists()
+    ).toEqual(true);
+  });
+
+  test('it renders the lock icon when isDatepickerLocked is true', () => {
+    const wrapper = mount(
+      <ReduxStoreProvider store={store}>
+        <Properties
+          associateNote={jest.fn()}
+          createTimeline={jest.fn()}
+          isDataInTimeline={false}
+          isDatepickerLocked={true}
+          isFavorite={false}
+          title=""
+          description=""
+          getNotesByIds={jest.fn()}
+          noteIds={[]}
+          timelineId="abc"
+          toggleLock={jest.fn()}
+          updateDescription={jest.fn()}
+          updateIsFavorite={jest.fn()}
+          updateTitle={jest.fn()}
+          updateNote={jest.fn()}
+          usersViewing={usersViewing}
+        />
+      </ReduxStoreProvider>
+    );
+    expect(
+      wrapper
+        .find('[data-test-subj="properties-left"]')
+        .find('[data-test-subj="timeline-date-picker-lock-button"]')
+        .exists()
+    ).toEqual(true);
+  });
+
+  test('it renders the unlock icon when isDatepickerLocked is false', () => {
+    const wrapper = mount(
+      <ReduxStoreProvider store={store}>
+        <Properties
+          associateNote={jest.fn()}
+          createTimeline={jest.fn()}
+          isDataInTimeline={false}
+          isDatepickerLocked={false}
+          isFavorite={false}
+          title=""
+          description=""
+          getNotesByIds={jest.fn()}
+          noteIds={[]}
+          timelineId="abc"
+          toggleLock={jest.fn()}
+          updateDescription={jest.fn()}
+          updateIsFavorite={jest.fn()}
+          updateTitle={jest.fn()}
+          updateNote={jest.fn()}
+          usersViewing={usersViewing}
+        />
+      </ReduxStoreProvider>
+    );
+    expect(
+      wrapper
+        .find('[data-test-subj="properties-left"]')
+        .find('[data-test-subj="timeline-date-picker-unlock-button"]')
+        .exists()
+    ).toEqual(true);
+  });
+
+  test('it renders a description on the left when the width is at least as wide as the threshold', () => {
+    const description = 'strange';
+    mockedWidth = showDescriptionThreshold;
+
+    const wrapper = mount(
+      <ReduxStoreProvider store={store}>
+        <Properties
+          associateNote={jest.fn()}
+          createTimeline={jest.fn()}
+          isDataInTimeline={false}
+          isDatepickerLocked={false}
+          isFavorite={false}
+          title=""
+          description={description}
+          getNotesByIds={jest.fn()}
+          noteIds={[]}
+          timelineId="abc"
+          toggleLock={jest.fn()}
+          updateDescription={jest.fn()}
+          updateIsFavorite={jest.fn()}
+          updateTitle={jest.fn()}
+          updateNote={jest.fn()}
+          usersViewing={usersViewing}
+        />
+      </ReduxStoreProvider>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="properties-left"]')
+        .find('[data-test-subj="timeline-description"]')
+        .first()
+        .props().value
+    ).toEqual(description);
+  });
+
+  test('it does NOT render a description on the left when the width is less than the threshold', () => {
+    const description = 'strange';
+    mockedWidth = showDescriptionThreshold - 1;
+
+    const wrapper = mount(
+      <ReduxStoreProvider store={store}>
+        <Properties
+          associateNote={jest.fn()}
+          createTimeline={jest.fn()}
+          isDataInTimeline={false}
+          isDatepickerLocked={false}
+          isFavorite={false}
+          title=""
+          description={description}
+          getNotesByIds={jest.fn()}
+          noteIds={[]}
+          timelineId="abc"
+          toggleLock={jest.fn()}
+          updateDescription={jest.fn()}
+          updateIsFavorite={jest.fn()}
+          updateTitle={jest.fn()}
+          updateNote={jest.fn()}
+          usersViewing={usersViewing}
+        />
+      </ReduxStoreProvider>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="properties-left"]')
+        .find('[data-test-subj="timeline-description"]')
+        .exists()
+    ).toEqual(false);
+  });
+
+  test('it renders a notes button on the left when the width is at least as wide as the threshold', () => {
+    mockedWidth = showNotesThreshold;
+
+    const wrapper = mount(
+      <ReduxStoreProvider store={store}>
+        <Properties
+          associateNote={jest.fn()}
+          createTimeline={jest.fn()}
+          isDataInTimeline={false}
+          isDatepickerLocked={false}
+          isFavorite={false}
+          title=""
+          description=""
+          getNotesByIds={jest.fn()}
+          noteIds={[]}
+          timelineId="abc"
+          toggleLock={jest.fn()}
+          updateDescription={jest.fn()}
+          updateIsFavorite={jest.fn()}
+          updateTitle={jest.fn()}
+          updateNote={jest.fn()}
+          usersViewing={usersViewing}
+        />
+      </ReduxStoreProvider>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="properties-left"]')
+        .find('[data-test-subj="timeline-notes-button-large"]')
+        .exists()
+    ).toEqual(true);
+  });
+
+  test('it does NOT render a a notes button on the left when the width is less than the threshold', () => {
+    mockedWidth = showNotesThreshold - 1;
+
+    const wrapper = mount(
+      <ReduxStoreProvider store={store}>
+        <Properties
+          associateNote={jest.fn()}
+          createTimeline={jest.fn()}
+          isDataInTimeline={false}
+          isDatepickerLocked={false}
+          isFavorite={false}
+          title=""
+          description=""
+          getNotesByIds={jest.fn()}
+          noteIds={[]}
+          timelineId="abc"
+          toggleLock={jest.fn()}
+          updateDescription={jest.fn()}
+          updateIsFavorite={jest.fn()}
+          updateTitle={jest.fn()}
+          updateNote={jest.fn()}
+          usersViewing={usersViewing}
+        />
+      </ReduxStoreProvider>
+    );
+
+    expect(
+      wrapper
+        .find('[data-test-subj="properties-left"]')
+        .find('[data-test-subj="timeline-notes-button-large"]')
+        .exists()
+    ).toEqual(false);
+  });
+
+  test('it renders a settings icon', () => {
+    const wrapper = mount(
+      <ReduxStoreProvider store={store}>
+        <Properties
+          associateNote={jest.fn()}
+          createTimeline={jest.fn()}
+          isDataInTimeline={false}
+          isDatepickerLocked={false}
+          isFavorite={false}
+          title=""
+          description=""
+          getNotesByIds={jest.fn()}
+          noteIds={[]}
+          timelineId="abc"
+          toggleLock={jest.fn()}
+          updateDescription={jest.fn()}
+          updateIsFavorite={jest.fn()}
+          updateTitle={jest.fn()}
+          updateNote={jest.fn()}
+          usersViewing={usersViewing}
+        />
+      </ReduxStoreProvider>
+    );
+
+    expect(wrapper.find('[data-test-subj="settings-gear"]').exists()).toEqual(true);
+  });
+
+  test('it renders an avatar for the current user viewing the timeline when it has a title', () => {
+    const title = 'port scan';
+
+    const wrapper = mount(
+      <ReduxStoreProvider store={store}>
+        <Properties
+          associateNote={jest.fn()}
+          createTimeline={jest.fn()}
+          isDataInTimeline={false}
+          isDatepickerLocked={false}
+          isFavorite={false}
+          title={title}
+          description=""
+          getNotesByIds={jest.fn()}
+          noteIds={[]}
+          timelineId="abc"
+          toggleLock={jest.fn()}
+          updateDescription={jest.fn()}
+          updateIsFavorite={jest.fn()}
+          updateTitle={jest.fn()}
+          updateNote={jest.fn()}
+          usersViewing={usersViewing}
+        />
+      </ReduxStoreProvider>
+    );
+
+    expect(wrapper.find('[data-test-subj="avatar"]').exists()).toEqual(true);
+  });
+
+  test('it does NOT render an avatar for the current user viewing the timeline when it does NOT have a title', () => {
+    const wrapper = mount(
+      <ReduxStoreProvider store={store}>
+        <Properties
+          associateNote={jest.fn()}
+          createTimeline={jest.fn()}
+          isDataInTimeline={false}
+          isDatepickerLocked={false}
+          isFavorite={false}
+          title=""
+          description=""
+          getNotesByIds={jest.fn()}
+          noteIds={[]}
+          timelineId="abc"
+          toggleLock={jest.fn()}
+          updateDescription={jest.fn()}
+          updateIsFavorite={jest.fn()}
+          updateTitle={jest.fn()}
+          updateNote={jest.fn()}
+          usersViewing={usersViewing}
+        />
+      </ReduxStoreProvider>
+    );
+
+    expect(wrapper.find('[data-test-subj="avatar"]').exists()).toEqual(false);
+  });
+});
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/properties/index.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/properties/index.tsx
new file mode 100644
index 00000000000000..502cc85ce907aa
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/properties/index.tsx
@@ -0,0 +1,154 @@
+/*
+ * 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, { useState, useCallback, useMemo } from 'react';
+
+import { useThrottledResizeObserver } from '../../../../common/components/utils';
+import { Note } from '../../../../common/lib/note';
+import { InputsModelId } from '../../../../common/store/inputs/constants';
+import { AssociateNote, UpdateNote } from '../../notes/helpers';
+
+import { TimelineProperties } from './styles';
+import { PropertiesRight } from './properties_right';
+import { PropertiesLeft } from './properties_left';
+
+type CreateTimeline = ({ id, show }: { id: string; show?: boolean }) => void;
+type UpdateIsFavorite = ({ id, isFavorite }: { id: string; isFavorite: boolean }) => void;
+type UpdateTitle = ({ id, title }: { id: string; title: string }) => void;
+type UpdateDescription = ({ id, description }: { id: string; description: string }) => void;
+type ToggleLock = ({ linkToId }: { linkToId: InputsModelId }) => void;
+
+interface Props {
+  associateNote: AssociateNote;
+  createTimeline: CreateTimeline;
+  description: string;
+  getNotesByIds: (noteIds: string[]) => Note[];
+  isDataInTimeline: boolean;
+  isDatepickerLocked: boolean;
+  isFavorite: boolean;
+  noteIds: string[];
+  timelineId: string;
+  title: string;
+  toggleLock: ToggleLock;
+  updateDescription: UpdateDescription;
+  updateIsFavorite: UpdateIsFavorite;
+  updateNote: UpdateNote;
+  updateTitle: UpdateTitle;
+  usersViewing: string[];
+}
+
+const rightGutter = 60; // px
+export const datePickerThreshold = 600;
+export const showNotesThreshold = 810;
+export const showDescriptionThreshold = 970;
+
+const starIconWidth = 30;
+const nameWidth = 155;
+const descriptionWidth = 165;
+const noteWidth = 130;
+const settingsWidth = 55;
+
+/** Displays the properties of a timeline, i.e. name, description, notes, etc */
+export const Properties = React.memo<Props>(
+  ({
+    associateNote,
+    createTimeline,
+    description,
+    getNotesByIds,
+    isDataInTimeline,
+    isDatepickerLocked,
+    isFavorite,
+    noteIds,
+    timelineId,
+    title,
+    toggleLock,
+    updateDescription,
+    updateIsFavorite,
+    updateNote,
+    updateTitle,
+    usersViewing,
+  }) => {
+    const { ref, width = 0 } = useThrottledResizeObserver(300);
+    const [showActions, setShowActions] = useState(false);
+    const [showNotes, setShowNotes] = useState(false);
+    const [showTimelineModal, setShowTimelineModal] = useState(false);
+
+    const onButtonClick = useCallback(() => setShowActions(!showActions), [showActions]);
+    const onToggleShowNotes = useCallback(() => setShowNotes(!showNotes), [showNotes]);
+    const onClosePopover = useCallback(() => setShowActions(false), []);
+    const onCloseTimelineModal = useCallback(() => setShowTimelineModal(false), []);
+    const onToggleLock = useCallback(() => toggleLock({ linkToId: 'timeline' }), [toggleLock]);
+    const onOpenTimelineModal = useCallback(() => {
+      onClosePopover();
+      setShowTimelineModal(true);
+    }, []);
+
+    const datePickerWidth = useMemo(
+      () =>
+        width -
+        rightGutter -
+        starIconWidth -
+        nameWidth -
+        (width >= showDescriptionThreshold ? descriptionWidth : 0) -
+        noteWidth -
+        settingsWidth,
+      [width]
+    );
+
+    return (
+      <TimelineProperties ref={ref} data-test-subj="timeline-properties">
+        <PropertiesLeft
+          associateNote={associateNote}
+          datePickerWidth={
+            datePickerWidth > datePickerThreshold ? datePickerThreshold : datePickerWidth
+          }
+          description={description}
+          getNotesByIds={getNotesByIds}
+          isDatepickerLocked={isDatepickerLocked}
+          isFavorite={isFavorite}
+          noteIds={noteIds}
+          onToggleShowNotes={onToggleShowNotes}
+          showDescription={width >= showDescriptionThreshold}
+          showNotes={showNotes}
+          showNotesFromWidth={width >= showNotesThreshold}
+          timelineId={timelineId}
+          title={title}
+          toggleLock={onToggleLock}
+          updateDescription={updateDescription}
+          updateIsFavorite={updateIsFavorite}
+          updateNote={updateNote}
+          updateTitle={updateTitle}
+        />
+        <PropertiesRight
+          associateNote={associateNote}
+          createTimeline={createTimeline}
+          description={description}
+          getNotesByIds={getNotesByIds}
+          isDataInTimeline={isDataInTimeline}
+          noteIds={noteIds}
+          onButtonClick={onButtonClick}
+          onClosePopover={onClosePopover}
+          onCloseTimelineModal={onCloseTimelineModal}
+          onOpenTimelineModal={onOpenTimelineModal}
+          onToggleShowNotes={onToggleShowNotes}
+          showActions={showActions}
+          showDescription={width < showDescriptionThreshold}
+          showNotes={showNotes}
+          showNotesFromWidth={width < showNotesThreshold}
+          showTimelineModal={showTimelineModal}
+          showUsersView={title.length > 0}
+          timelineId={timelineId}
+          title={title}
+          updateDescription={updateDescription}
+          updateNote={updateNote}
+          usersViewing={usersViewing}
+        />
+      </TimelineProperties>
+    );
+  }
+);
+
+Properties.displayName = 'Properties';
diff --git a/x-pack/plugins/siem/public/components/timeline/properties/notes_size.ts b/x-pack/plugins/siem/public/timelines/components/timeline/properties/notes_size.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/properties/notes_size.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/properties/notes_size.ts
diff --git a/x-pack/plugins/siem/public/components/timeline/properties/properties_left.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/properties/properties_left.tsx
similarity index 97%
rename from x-pack/plugins/siem/public/components/timeline/properties/properties_left.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/properties/properties_left.tsx
index 3016def8a80b10..52766422e49c38 100644
--- a/x-pack/plugins/siem/public/components/timeline/properties/properties_left.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/properties/properties_left.tsx
@@ -10,8 +10,8 @@ import React from 'react';
 import styled from 'styled-components';
 import { Description, Name, NotesButton, StarIcon } from './helpers';
 import { AssociateNote, UpdateNote } from '../../notes/helpers';
-import { Note } from '../../../lib/note';
-import { SuperDatePicker } from '../../super_date_picker';
+import { Note } from '../../../../common/lib/note';
+import { SuperDatePicker } from '../../../../common/components/super_date_picker';
 
 import * as i18n from './translations';
 
diff --git a/x-pack/plugins/siem/public/components/timeline/properties/properties_right.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/properties/properties_right.tsx
similarity index 97%
rename from x-pack/plugins/siem/public/components/timeline/properties/properties_right.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/properties/properties_right.tsx
index 59d268487cca72..3db64390b51b71 100644
--- a/x-pack/plugins/siem/public/components/timeline/properties/properties_right.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/properties/properties_right.tsx
@@ -17,11 +17,11 @@ import {
 import { NewTimeline, Description, NotesButton, NewCase } from './helpers';
 import { OpenTimelineModalButton } from '../../open_timeline/open_timeline_modal/open_timeline_modal_button';
 import { OpenTimelineModal } from '../../open_timeline/open_timeline_modal';
-import { InspectButton, InspectButtonContainer } from '../../inspect';
+import { InspectButton, InspectButtonContainer } from '../../../../common/components/inspect';
 
 import * as i18n from './translations';
 import { AssociateNote } from '../../notes/helpers';
-import { Note } from '../../../lib/note';
+import { Note } from '../../../../common/lib/note';
 
 export const PropertiesRightStyle = styled(EuiFlexGroup)`
   margin-right: 5px;
diff --git a/x-pack/plugins/siem/public/components/timeline/properties/styles.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/properties/styles.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/properties/styles.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/properties/styles.tsx
diff --git a/x-pack/plugins/siem/public/components/timeline/properties/translations.ts b/x-pack/plugins/siem/public/timelines/components/timeline/properties/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/properties/translations.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/properties/translations.ts
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/query_bar/index.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/query_bar/index.test.tsx
new file mode 100644
index 00000000000000..546f06b60cb56a
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/query_bar/index.test.tsx
@@ -0,0 +1,409 @@
+/*
+ * 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 { mount } from 'enzyme';
+import React from 'react';
+
+import { DEFAULT_FROM, DEFAULT_TO } from '../../../../../common/constants';
+import { mockBrowserFields } from '../../../../common/containers/source/mock';
+import { convertKueryToElasticSearchQuery } from '../../../../common/lib/keury';
+import { mockIndexPattern, TestProviders } from '../../../../common/mock';
+import { createKibanaCoreStartMock } from '../../../../common/mock/kibana_core';
+import { QueryBar } from '../../../../common/components/query_bar';
+import { FilterManager } from '../../../../../../../../src/plugins/data/public';
+import { mockDataProviders } from '../data_providers/mock/mock_data_providers';
+import { buildGlobalQuery } from '../helpers';
+
+import { QueryBarTimeline, QueryBarTimelineComponentProps, getDataProviderFilter } from './index';
+
+const mockUiSettingsForFilterManager = createKibanaCoreStartMock().uiSettings;
+
+jest.mock('../../../../common/lib/kibana');
+
+describe('Timeline QueryBar ', () => {
+  // We are doing that because we need to wrapped this component with redux
+  // and redux does not like to be updated and since we need to update our
+  // child component (BODY) and we do not want to scare anyone with this error
+  // we are hiding it!!!
+  // eslint-disable-next-line no-console
+  const originalError = console.error;
+  beforeAll(() => {
+    // eslint-disable-next-line no-console
+    console.error = (...args: string[]) => {
+      if (/<Provider> does not support changing `store` on the fly/.test(args[0])) {
+        return;
+      }
+      originalError.call(console, ...args);
+    };
+  });
+
+  const mockApplyKqlFilterQuery = jest.fn();
+  const mockSetFilters = jest.fn();
+  const mockSetKqlFilterQueryDraft = jest.fn();
+  const mockSetSavedQueryId = jest.fn();
+  const mockUpdateReduxTime = jest.fn();
+
+  beforeEach(() => {
+    mockApplyKqlFilterQuery.mockClear();
+    mockSetFilters.mockClear();
+    mockSetKqlFilterQueryDraft.mockClear();
+    mockSetSavedQueryId.mockClear();
+    mockUpdateReduxTime.mockClear();
+  });
+
+  test('check if we format the appropriate props to QueryBar', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <QueryBarTimeline
+          applyKqlFilterQuery={mockApplyKqlFilterQuery}
+          browserFields={mockBrowserFields}
+          dataProviders={mockDataProviders}
+          filters={[]}
+          filterManager={new FilterManager(mockUiSettingsForFilterManager)}
+          filterQuery={{ expression: 'here: query', kind: 'kuery' }}
+          filterQueryDraft={{ expression: 'here: query', kind: 'kuery' }}
+          from={0}
+          fromStr={DEFAULT_FROM}
+          to={1}
+          toStr={DEFAULT_TO}
+          kqlMode="search"
+          indexPattern={mockIndexPattern}
+          isRefreshPaused={true}
+          refreshInterval={3000}
+          savedQueryId={null}
+          setFilters={mockSetFilters}
+          setKqlFilterQueryDraft={mockSetKqlFilterQueryDraft}
+          setSavedQueryId={mockSetSavedQueryId}
+          timelineId="timline-real-id"
+          updateReduxTime={mockUpdateReduxTime}
+        />
+      </TestProviders>
+    );
+    const queryBarProps = wrapper.find(QueryBar).props();
+
+    expect(queryBarProps.dateRangeFrom).toEqual('now-24h');
+    expect(queryBarProps.dateRangeTo).toEqual('now');
+    expect(queryBarProps.filterQuery).toEqual({ query: 'here: query', language: 'kuery' });
+    expect(queryBarProps.savedQuery).toEqual(null);
+  });
+
+  describe('#onChangeQuery', () => {
+    test(' is the only reference that changed when filterQueryDraft props get updated', () => {
+      const Proxy = (props: QueryBarTimelineComponentProps) => (
+        <TestProviders>
+          <QueryBarTimeline {...props} />
+        </TestProviders>
+      );
+
+      const wrapper = mount(
+        <Proxy
+          applyKqlFilterQuery={mockApplyKqlFilterQuery}
+          browserFields={mockBrowserFields}
+          dataProviders={mockDataProviders}
+          filters={[]}
+          filterManager={new FilterManager(mockUiSettingsForFilterManager)}
+          filterQuery={{ expression: 'here: query', kind: 'kuery' }}
+          filterQueryDraft={{ expression: 'here: query', kind: 'kuery' }}
+          from={0}
+          fromStr={DEFAULT_FROM}
+          to={1}
+          toStr={DEFAULT_TO}
+          kqlMode="search"
+          indexPattern={mockIndexPattern}
+          isRefreshPaused={true}
+          refreshInterval={3000}
+          savedQueryId={null}
+          setFilters={mockSetFilters}
+          setKqlFilterQueryDraft={mockSetKqlFilterQueryDraft}
+          setSavedQueryId={mockSetSavedQueryId}
+          timelineId="timeline-real-id"
+          updateReduxTime={mockUpdateReduxTime}
+        />
+      );
+      const queryBarProps = wrapper.find(QueryBar).props();
+      const onChangedQueryRef = queryBarProps.onChangedQuery;
+      const onSubmitQueryRef = queryBarProps.onSubmitQuery;
+      const onSavedQueryRef = queryBarProps.onSavedQuery;
+
+      wrapper.setProps({ filterQueryDraft: { expression: 'new: one', kind: 'kuery' } });
+      wrapper.update();
+
+      expect(onChangedQueryRef).not.toEqual(wrapper.find(QueryBar).props().onChangedQuery);
+      expect(onSubmitQueryRef).toEqual(wrapper.find(QueryBar).props().onSubmitQuery);
+      expect(onSavedQueryRef).toEqual(wrapper.find(QueryBar).props().onSavedQuery);
+    });
+  });
+
+  describe('#onSubmitQuery', () => {
+    test(' is the only reference that changed when filterQuery props get updated', () => {
+      const Proxy = (props: QueryBarTimelineComponentProps) => (
+        <TestProviders>
+          <QueryBarTimeline {...props} />
+        </TestProviders>
+      );
+
+      const wrapper = mount(
+        <Proxy
+          applyKqlFilterQuery={mockApplyKqlFilterQuery}
+          browserFields={mockBrowserFields}
+          dataProviders={mockDataProviders}
+          filters={[]}
+          filterManager={new FilterManager(mockUiSettingsForFilterManager)}
+          filterQuery={{ expression: 'here: query', kind: 'kuery' }}
+          filterQueryDraft={{ expression: 'here: query', kind: 'kuery' }}
+          from={0}
+          fromStr={DEFAULT_FROM}
+          to={1}
+          toStr={DEFAULT_TO}
+          kqlMode="search"
+          indexPattern={mockIndexPattern}
+          isRefreshPaused={true}
+          refreshInterval={3000}
+          savedQueryId={null}
+          setFilters={mockSetFilters}
+          setKqlFilterQueryDraft={mockSetKqlFilterQueryDraft}
+          setSavedQueryId={mockSetSavedQueryId}
+          timelineId="timeline-real-id"
+          updateReduxTime={mockUpdateReduxTime}
+        />
+      );
+      const queryBarProps = wrapper.find(QueryBar).props();
+      const onChangedQueryRef = queryBarProps.onChangedQuery;
+      const onSubmitQueryRef = queryBarProps.onSubmitQuery;
+      const onSavedQueryRef = queryBarProps.onSavedQuery;
+
+      wrapper.setProps({ filterQuery: { expression: 'new: one', kind: 'kuery' } });
+      wrapper.update();
+
+      expect(onSubmitQueryRef).not.toEqual(wrapper.find(QueryBar).props().onSubmitQuery);
+      expect(onChangedQueryRef).toEqual(wrapper.find(QueryBar).props().onChangedQuery);
+      expect(onSavedQueryRef).toEqual(wrapper.find(QueryBar).props().onSavedQuery);
+    });
+
+    test(' is only reference that changed when timelineId props get updated', () => {
+      const Proxy = (props: QueryBarTimelineComponentProps) => (
+        <TestProviders>
+          <QueryBarTimeline {...props} />
+        </TestProviders>
+      );
+
+      const wrapper = mount(
+        <Proxy
+          applyKqlFilterQuery={mockApplyKqlFilterQuery}
+          browserFields={mockBrowserFields}
+          dataProviders={mockDataProviders}
+          filters={[]}
+          filterManager={new FilterManager(mockUiSettingsForFilterManager)}
+          filterQuery={{ expression: 'here: query', kind: 'kuery' }}
+          filterQueryDraft={{ expression: 'here: query', kind: 'kuery' }}
+          from={0}
+          fromStr={DEFAULT_FROM}
+          to={1}
+          toStr={DEFAULT_TO}
+          kqlMode="search"
+          indexPattern={mockIndexPattern}
+          isRefreshPaused={true}
+          refreshInterval={3000}
+          savedQueryId={null}
+          setFilters={mockSetFilters}
+          setKqlFilterQueryDraft={mockSetKqlFilterQueryDraft}
+          setSavedQueryId={mockSetSavedQueryId}
+          timelineId="timeline-real-id"
+          updateReduxTime={mockUpdateReduxTime}
+        />
+      );
+      const queryBarProps = wrapper.find(QueryBar).props();
+      const onChangedQueryRef = queryBarProps.onChangedQuery;
+      const onSubmitQueryRef = queryBarProps.onSubmitQuery;
+      const onSavedQueryRef = queryBarProps.onSavedQuery;
+
+      wrapper.setProps({ timelineId: 'new-timeline' });
+      wrapper.update();
+
+      expect(onSubmitQueryRef).not.toEqual(wrapper.find(QueryBar).props().onSubmitQuery);
+      expect(onChangedQueryRef).toEqual(wrapper.find(QueryBar).props().onChangedQuery);
+      expect(onSavedQueryRef).toEqual(wrapper.find(QueryBar).props().onSavedQuery);
+    });
+  });
+
+  describe('#onSavedQuery', () => {
+    test('is only reference that changed when dataProviders props get updated', () => {
+      const Proxy = (props: QueryBarTimelineComponentProps) => (
+        <TestProviders>
+          <QueryBarTimeline {...props} />
+        </TestProviders>
+      );
+
+      const wrapper = mount(
+        <Proxy
+          applyKqlFilterQuery={mockApplyKqlFilterQuery}
+          browserFields={mockBrowserFields}
+          dataProviders={mockDataProviders}
+          filters={[]}
+          filterManager={new FilterManager(mockUiSettingsForFilterManager)}
+          filterQuery={{ expression: 'here: query', kind: 'kuery' }}
+          filterQueryDraft={{ expression: 'here: query', kind: 'kuery' }}
+          from={0}
+          fromStr={DEFAULT_FROM}
+          to={1}
+          toStr={DEFAULT_TO}
+          kqlMode="search"
+          indexPattern={mockIndexPattern}
+          isRefreshPaused={true}
+          refreshInterval={3000}
+          savedQueryId={null}
+          setFilters={mockSetFilters}
+          setKqlFilterQueryDraft={mockSetKqlFilterQueryDraft}
+          setSavedQueryId={mockSetSavedQueryId}
+          timelineId="timeline-real-id"
+          updateReduxTime={mockUpdateReduxTime}
+        />
+      );
+      const queryBarProps = wrapper.find(QueryBar).props();
+      const onChangedQueryRef = queryBarProps.onChangedQuery;
+      const onSubmitQueryRef = queryBarProps.onSubmitQuery;
+      const onSavedQueryRef = queryBarProps.onSavedQuery;
+
+      wrapper.setProps({ dataProviders: mockDataProviders.slice(1, 0) });
+      wrapper.update();
+
+      expect(onSavedQueryRef).not.toEqual(wrapper.find(QueryBar).props().onSavedQuery);
+      expect(onChangedQueryRef).toEqual(wrapper.find(QueryBar).props().onChangedQuery);
+      expect(onSubmitQueryRef).toEqual(wrapper.find(QueryBar).props().onSubmitQuery);
+    });
+
+    test('is only reference that changed when savedQueryId props get updated', () => {
+      const Proxy = (props: QueryBarTimelineComponentProps) => (
+        <TestProviders>
+          <QueryBarTimeline {...props} />
+        </TestProviders>
+      );
+
+      const wrapper = mount(
+        <Proxy
+          applyKqlFilterQuery={mockApplyKqlFilterQuery}
+          browserFields={mockBrowserFields}
+          dataProviders={mockDataProviders}
+          filters={[]}
+          filterManager={new FilterManager(mockUiSettingsForFilterManager)}
+          filterQuery={{ expression: 'here: query', kind: 'kuery' }}
+          filterQueryDraft={{ expression: 'here: query', kind: 'kuery' }}
+          from={0}
+          fromStr={DEFAULT_FROM}
+          to={1}
+          toStr={DEFAULT_TO}
+          kqlMode="search"
+          indexPattern={mockIndexPattern}
+          isRefreshPaused={true}
+          refreshInterval={3000}
+          savedQueryId={null}
+          setFilters={mockSetFilters}
+          setKqlFilterQueryDraft={mockSetKqlFilterQueryDraft}
+          setSavedQueryId={mockSetSavedQueryId}
+          timelineId="timeline-real-id"
+          updateReduxTime={mockUpdateReduxTime}
+        />
+      );
+      const queryBarProps = wrapper.find(QueryBar).props();
+      const onChangedQueryRef = queryBarProps.onChangedQuery;
+      const onSubmitQueryRef = queryBarProps.onSubmitQuery;
+      const onSavedQueryRef = queryBarProps.onSavedQuery;
+
+      wrapper.setProps({
+        savedQueryId: 'new',
+      });
+      wrapper.update();
+
+      expect(onSavedQueryRef).not.toEqual(wrapper.find(QueryBar).props().onSavedQuery);
+      expect(onChangedQueryRef).toEqual(wrapper.find(QueryBar).props().onChangedQuery);
+      expect(onSubmitQueryRef).toEqual(wrapper.find(QueryBar).props().onSubmitQuery);
+    });
+  });
+
+  describe('#getDataProviderFilter', () => {
+    test('returns valid data provider filter with a simple bool data provider', () => {
+      const dataProvidersDsl = convertKueryToElasticSearchQuery(
+        buildGlobalQuery(mockDataProviders.slice(0, 1), mockBrowserFields),
+        mockIndexPattern
+      );
+      const filter = getDataProviderFilter(dataProvidersDsl);
+      expect(filter).toEqual({
+        $state: {
+          store: 'appState',
+        },
+        bool: {
+          minimum_should_match: 1,
+          should: [
+            {
+              match_phrase: {
+                name: 'Provider 1',
+              },
+            },
+          ],
+        },
+        meta: {
+          alias: 'timeline-filter-drop-area',
+          controlledBy: 'timeline-filter-drop-area',
+          disabled: false,
+          key: 'bool',
+          negate: false,
+          type: 'custom',
+          value:
+            '{"bool":{"should":[{"match_phrase":{"name":"Provider 1"}}],"minimum_should_match":1}}',
+        },
+      });
+    });
+
+    test('returns valid data provider filter with an exists operator', () => {
+      const dataProvidersDsl = convertKueryToElasticSearchQuery(
+        buildGlobalQuery(
+          [
+            {
+              id: `id-exists`,
+              name,
+              enabled: true,
+              excluded: false,
+              kqlQuery: '',
+              queryMatch: {
+                field: 'host.name',
+                value: '',
+                operator: ':*',
+              },
+              and: [],
+            },
+          ],
+          mockBrowserFields
+        ),
+        mockIndexPattern
+      );
+      const filter = getDataProviderFilter(dataProvidersDsl);
+      expect(filter).toEqual({
+        $state: {
+          store: 'appState',
+        },
+        bool: {
+          minimum_should_match: 1,
+          should: [
+            {
+              exists: {
+                field: 'host.name',
+              },
+            },
+          ],
+        },
+        meta: {
+          alias: 'timeline-filter-drop-area',
+          controlledBy: 'timeline-filter-drop-area',
+          disabled: false,
+          key: 'bool',
+          negate: false,
+          type: 'custom',
+          value: '{"bool":{"should":[{"exists":{"field":"host.name"}}],"minimum_should_match":1}}',
+        },
+      });
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/query_bar/index.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/query_bar/index.tsx
new file mode 100644
index 00000000000000..07a769751cb0fc
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/query_bar/index.tsx
@@ -0,0 +1,319 @@
+/*
+ * 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 { isEmpty } from 'lodash/fp';
+import React, { memo, useCallback, useState, useEffect } from 'react';
+import { Subscription } from 'rxjs';
+import deepEqual from 'fast-deep-equal';
+
+import {
+  IIndexPattern,
+  Query,
+  Filter,
+  esFilters,
+  FilterManager,
+  SavedQuery,
+  SavedQueryTimeFilter,
+} from '../../../../../../../../src/plugins/data/public';
+
+import { BrowserFields } from '../../../../common/containers/source';
+import { convertKueryToElasticSearchQuery } from '../../../../common/lib/keury';
+import { KueryFilterQuery, KueryFilterQueryKind } from '../../../../common/store';
+import { KqlMode } from '../../../../timelines/store/timeline/model';
+import { useSavedQueryServices } from '../../../../common/utils/saved_query_services';
+import { DispatchUpdateReduxTime } from '../../../../common/components/super_date_picker';
+import { QueryBar } from '../../../../common/components/query_bar';
+import { DataProvider } from '../data_providers/data_provider';
+import { buildGlobalQuery } from '../helpers';
+
+export interface QueryBarTimelineComponentProps {
+  applyKqlFilterQuery: (expression: string, kind: KueryFilterQueryKind) => void;
+  browserFields: BrowserFields;
+  dataProviders: DataProvider[];
+  filters: Filter[];
+  filterManager: FilterManager;
+  filterQuery: KueryFilterQuery;
+  filterQueryDraft: KueryFilterQuery;
+  from: number;
+  fromStr: string;
+  kqlMode: KqlMode;
+  indexPattern: IIndexPattern;
+  isRefreshPaused: boolean;
+  refreshInterval: number;
+  savedQueryId: string | null;
+  setFilters: (filters: Filter[]) => void;
+  setKqlFilterQueryDraft: (expression: string, kind: KueryFilterQueryKind) => void;
+  setSavedQueryId: (savedQueryId: string | null) => void;
+  timelineId: string;
+  to: number;
+  toStr: string;
+  updateReduxTime: DispatchUpdateReduxTime;
+}
+
+const timelineFilterDropArea = 'timeline-filter-drop-area';
+
+export const QueryBarTimeline = memo<QueryBarTimelineComponentProps>(
+  ({
+    applyKqlFilterQuery,
+    browserFields,
+    dataProviders,
+    filters,
+    filterManager,
+    filterQuery,
+    filterQueryDraft,
+    from,
+    fromStr,
+    kqlMode,
+    indexPattern,
+    isRefreshPaused,
+    savedQueryId,
+    setFilters,
+    setKqlFilterQueryDraft,
+    setSavedQueryId,
+    refreshInterval,
+    timelineId,
+    to,
+    toStr,
+    updateReduxTime,
+  }) => {
+    const [dateRangeFrom, setDateRangeFrom] = useState<string>(
+      fromStr != null ? fromStr : new Date(from).toISOString()
+    );
+    const [dateRangeTo, setDateRangTo] = useState<string>(
+      toStr != null ? toStr : new Date(to).toISOString()
+    );
+
+    const [savedQuery, setSavedQuery] = useState<SavedQuery | null>(null);
+    const [filterQueryConverted, setFilterQueryConverted] = useState<Query>({
+      query: filterQuery != null ? filterQuery.expression : '',
+      language: filterQuery != null ? filterQuery.kind : 'kuery',
+    });
+    const [queryBarFilters, setQueryBarFilters] = useState<Filter[]>([]);
+    const [dataProvidersDsl, setDataProvidersDsl] = useState<string>(
+      convertKueryToElasticSearchQuery(buildGlobalQuery(dataProviders, browserFields), indexPattern)
+    );
+    const savedQueryServices = useSavedQueryServices();
+
+    useEffect(() => {
+      let isSubscribed = true;
+      const subscriptions = new Subscription();
+      filterManager.setFilters(filters);
+
+      subscriptions.add(
+        filterManager.getUpdates$().subscribe({
+          next: () => {
+            if (isSubscribed) {
+              const filterWithoutDropArea = filterManager
+                .getFilters()
+                .filter((f: Filter) => f.meta.controlledBy !== timelineFilterDropArea);
+              setFilters(filterWithoutDropArea);
+              setQueryBarFilters(filterWithoutDropArea);
+            }
+          },
+        })
+      );
+
+      return () => {
+        isSubscribed = false;
+        subscriptions.unsubscribe();
+      };
+    }, []);
+
+    useEffect(() => {
+      const filterWithoutDropArea = filterManager
+        .getFilters()
+        .filter((f: Filter) => f.meta.controlledBy !== timelineFilterDropArea);
+      if (!deepEqual(filters, filterWithoutDropArea)) {
+        filterManager.setFilters(filters);
+      }
+    }, [filters]);
+
+    useEffect(() => {
+      setFilterQueryConverted({
+        query: filterQuery != null ? filterQuery.expression : '',
+        language: filterQuery != null ? filterQuery.kind : 'kuery',
+      });
+    }, [filterQuery]);
+
+    useEffect(() => {
+      setDataProvidersDsl(
+        convertKueryToElasticSearchQuery(
+          buildGlobalQuery(dataProviders, browserFields),
+          indexPattern
+        )
+      );
+    }, [dataProviders, browserFields, indexPattern]);
+
+    useEffect(() => {
+      if (fromStr != null && toStr != null) {
+        setDateRangeFrom(fromStr);
+        setDateRangTo(toStr);
+      } else if (from != null && to != null) {
+        setDateRangeFrom(new Date(from).toISOString());
+        setDateRangTo(new Date(to).toISOString());
+      }
+    }, [from, fromStr, to, toStr]);
+
+    useEffect(() => {
+      let isSubscribed = true;
+      async function setSavedQueryByServices() {
+        if (savedQueryId != null && savedQueryServices != null) {
+          try {
+            // The getSavedQuery function will throw a promise rejection in
+            // src/legacy/core_plugins/data/public/search/search_bar/lib/saved_query_service.ts
+            // if the savedObjectsClient is undefined. This is happening in a test
+            // so I wrapped this in a try catch to keep the unhandled promise rejection
+            // warning from appearing in tests.
+            const mySavedQuery = await savedQueryServices.getSavedQuery(savedQueryId);
+            if (isSubscribed && mySavedQuery != null) {
+              setSavedQuery({
+                ...mySavedQuery,
+                attributes: {
+                  ...mySavedQuery.attributes,
+                  filters: filters.filter(f => f.meta.controlledBy !== timelineFilterDropArea),
+                },
+              });
+            }
+          } catch (exc) {
+            setSavedQuery(null);
+          }
+        } else if (isSubscribed) {
+          setSavedQuery(null);
+        }
+      }
+      setSavedQueryByServices();
+      return () => {
+        isSubscribed = false;
+      };
+    }, [savedQueryId]);
+
+    const onChangedQuery = useCallback(
+      (newQuery: Query) => {
+        if (
+          filterQueryDraft == null ||
+          (filterQueryDraft != null && filterQueryDraft.expression !== newQuery.query) ||
+          filterQueryDraft.kind !== newQuery.language
+        ) {
+          setKqlFilterQueryDraft(
+            newQuery.query as string,
+            newQuery.language as KueryFilterQueryKind
+          );
+        }
+      },
+      [filterQueryDraft]
+    );
+
+    const onSubmitQuery = useCallback(
+      (newQuery: Query, timefilter?: SavedQueryTimeFilter) => {
+        if (
+          filterQuery == null ||
+          (filterQuery != null && filterQuery.expression !== newQuery.query) ||
+          filterQuery.kind !== newQuery.language
+        ) {
+          setKqlFilterQueryDraft(
+            newQuery.query as string,
+            newQuery.language as KueryFilterQueryKind
+          );
+          applyKqlFilterQuery(newQuery.query as string, newQuery.language as KueryFilterQueryKind);
+        }
+        if (timefilter != null) {
+          const isQuickSelection = timefilter.from.includes('now') || timefilter.to.includes('now');
+
+          updateReduxTime({
+            id: 'timeline',
+            end: timefilter.to,
+            start: timefilter.from,
+            isInvalid: false,
+            isQuickSelection,
+            timelineId,
+          });
+        }
+      },
+      [filterQuery, timelineId]
+    );
+
+    const onSavedQuery = useCallback(
+      (newSavedQuery: SavedQuery | null) => {
+        if (newSavedQuery != null) {
+          if (newSavedQuery.id !== savedQueryId) {
+            setSavedQueryId(newSavedQuery.id);
+          }
+          if (savedQueryServices != null && dataProvidersDsl !== '') {
+            const dataProviderFilterExists =
+              newSavedQuery.attributes.filters != null
+                ? newSavedQuery.attributes.filters.findIndex(
+                    f => f.meta.controlledBy === timelineFilterDropArea
+                  )
+                : -1;
+            savedQueryServices.saveQuery(
+              {
+                ...newSavedQuery.attributes,
+                filters:
+                  newSavedQuery.attributes.filters != null
+                    ? dataProviderFilterExists > -1
+                      ? [
+                          ...newSavedQuery.attributes.filters.slice(0, dataProviderFilterExists),
+                          getDataProviderFilter(dataProvidersDsl),
+                          ...newSavedQuery.attributes.filters.slice(dataProviderFilterExists + 1),
+                        ]
+                      : [
+                          ...newSavedQuery.attributes.filters,
+                          getDataProviderFilter(dataProvidersDsl),
+                        ]
+                    : [],
+              },
+              {
+                overwrite: true,
+              }
+            );
+          }
+        } else {
+          setSavedQueryId(null);
+        }
+      },
+      [dataProvidersDsl, savedQueryId, savedQueryServices]
+    );
+
+    return (
+      <QueryBar
+        dateRangeFrom={dateRangeFrom}
+        dateRangeTo={dateRangeTo}
+        hideSavedQuery={kqlMode === 'search'}
+        indexPattern={indexPattern}
+        isRefreshPaused={isRefreshPaused}
+        filterQuery={filterQueryConverted}
+        filterManager={filterManager}
+        filters={queryBarFilters}
+        onChangedQuery={onChangedQuery}
+        onSubmitQuery={onSubmitQuery}
+        refreshInterval={refreshInterval}
+        savedQuery={savedQuery}
+        onSavedQuery={onSavedQuery}
+        dataTestSubj={'timelineQueryInput'}
+      />
+    );
+  }
+);
+
+export const getDataProviderFilter = (dataProviderDsl: string): Filter => {
+  const dslObject = JSON.parse(dataProviderDsl);
+  const key = Object.keys(dslObject);
+  return {
+    ...dslObject,
+    meta: {
+      alias: timelineFilterDropArea,
+      controlledBy: timelineFilterDropArea,
+      negate: false,
+      disabled: false,
+      type: 'custom',
+      key: isEmpty(key) ? 'bool' : key[0],
+      value: dataProviderDsl,
+    },
+    $state: {
+      store: esFilters.FilterStateStore.APP_STATE,
+    },
+  };
+};
diff --git a/x-pack/plugins/siem/public/components/timeline/refetch_timeline.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/refetch_timeline.tsx
similarity index 83%
rename from x-pack/plugins/siem/public/components/timeline/refetch_timeline.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/refetch_timeline.tsx
index 73c20d9b9b6b47..aef6e0df604cb8 100644
--- a/x-pack/plugins/siem/public/components/timeline/refetch_timeline.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/refetch_timeline.tsx
@@ -7,9 +7,9 @@
 import React, { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { inputsModel } from '../../store';
-import { inputsActions } from '../../store/actions';
-import { InputsModelId } from '../../store/inputs/constants';
+import { inputsModel } from '../../../common/store';
+import { inputsActions } from '../../../common/store/actions';
+import { InputsModelId } from '../../../common/store/inputs/constants';
 
 export interface TimelineRefetchProps {
   id: string;
diff --git a/x-pack/plugins/siem/public/components/timeline/search_or_filter/helpers.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/search_or_filter/helpers.test.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/search_or_filter/helpers.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/search_or_filter/helpers.test.tsx
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/search_or_filter/helpers.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/search_or_filter/helpers.tsx
new file mode 100644
index 00000000000000..77257e367c6f58
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/search_or_filter/helpers.tsx
@@ -0,0 +1,90 @@
+/*
+ * 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 { EuiSpacer, EuiText } from '@elastic/eui';
+import React from 'react';
+import styled from 'styled-components';
+
+import { AndOrBadge } from '../and_or_badge';
+
+import * as i18n from './translations';
+import { KqlMode } from '../../../../timelines/store/timeline/model';
+
+const AndOrContainer = styled.div`
+  position: relative;
+  top: -1px;
+`;
+
+AndOrContainer.displayName = 'AndOrContainer';
+
+interface ModeProperties {
+  mode: KqlMode;
+  description: string;
+  kqlBarTooltip: string;
+  placeholder: string;
+  selectText: string;
+}
+
+export const modes: { [key in KqlMode]: ModeProperties } = {
+  filter: {
+    mode: 'filter',
+    description: i18n.FILTER_DESCRIPTION,
+    kqlBarTooltip: i18n.FILTER_KQL_TOOLTIP,
+    placeholder: i18n.FILTER_KQL_PLACEHOLDER,
+    selectText: i18n.FILTER_KQL_SELECTED_TEXT,
+  },
+  search: {
+    mode: 'search',
+    description: i18n.SEARCH_DESCRIPTION,
+    kqlBarTooltip: i18n.SEARCH_KQL_TOOLTIP,
+    placeholder: i18n.SEARCH_KQL_PLACEHOLDER,
+    selectText: i18n.SEARCH_KQL_SELECTED_TEXT,
+  },
+};
+
+export const options = [
+  {
+    value: modes.filter.mode,
+    inputDisplay: (
+      <AndOrContainer>
+        <AndOrBadge type="and" />
+        {modes.filter.selectText}
+      </AndOrContainer>
+    ),
+    dropdownDisplay: (
+      <>
+        <AndOrBadge type="and" />
+        <strong>{modes.filter.selectText}</strong>
+        <EuiSpacer size="xs" />
+        <EuiText size="s" color="subdued">
+          <p className="euiTextColor--subdued">{modes.filter.description}</p>
+        </EuiText>
+      </>
+    ),
+  },
+  {
+    value: modes.search.mode,
+    inputDisplay: (
+      <AndOrContainer>
+        <AndOrBadge type="or" />
+        {modes.search.selectText}
+      </AndOrContainer>
+    ),
+    dropdownDisplay: (
+      <>
+        <AndOrBadge type="or" />
+        <strong>{modes.search.selectText}</strong>
+        <EuiSpacer size="xs" />
+        <EuiText size="s" color="subdued">
+          <p className="euiTextColor--subdued">{modes.search.description}</p>
+        </EuiText>
+      </>
+    ),
+  },
+];
+
+export const getPlaceholderText = (kqlMode: KqlMode): string =>
+  kqlMode === 'filter' ? i18n.FILTER_KQL_PLACEHOLDER : i18n.SEARCH_KQL_PLACEHOLDER;
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/search_or_filter/index.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/search_or_filter/index.tsx
new file mode 100644
index 00000000000000..22fbaadf2e816e
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/search_or_filter/index.tsx
@@ -0,0 +1,242 @@
+/*
+ * 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 { getOr } from 'lodash/fp';
+import React, { useCallback } from 'react';
+import { connect, ConnectedProps } from 'react-redux';
+import { Dispatch } from 'redux';
+import deepEqual from 'fast-deep-equal';
+
+import {
+  Filter,
+  FilterManager,
+  IIndexPattern,
+} from '../../../../../../../../src/plugins/data/public';
+import { BrowserFields } from '../../../../common/containers/source';
+import { convertKueryToElasticSearchQuery } from '../../../../common/lib/keury';
+import {
+  KueryFilterQuery,
+  SerializedFilterQuery,
+  State,
+  inputsModel,
+  inputsSelectors,
+} from '../../../../common/store';
+import { timelineActions, timelineSelectors } from '../../../store/timeline';
+import { KqlMode, TimelineModel, EventType } from '../../../../timelines/store/timeline/model';
+import { timelineDefaults } from '../../../../timelines/store/timeline/defaults';
+import { dispatchUpdateReduxTime } from '../../../../common/components/super_date_picker';
+import { SearchOrFilter } from './search_or_filter';
+
+interface OwnProps {
+  browserFields: BrowserFields;
+  filterManager: FilterManager;
+  indexPattern: IIndexPattern;
+  timelineId: string;
+}
+
+type Props = OwnProps & PropsFromRedux;
+
+const StatefulSearchOrFilterComponent = React.memo<Props>(
+  ({
+    applyKqlFilterQuery,
+    browserFields,
+    dataProviders,
+    eventType,
+    filters,
+    filterManager,
+    filterQuery,
+    filterQueryDraft,
+    from,
+    fromStr,
+    indexPattern,
+    isRefreshPaused,
+    kqlMode,
+    refreshInterval,
+    savedQueryId,
+    setFilters,
+    setKqlFilterQueryDraft,
+    setSavedQueryId,
+    timelineId,
+    to,
+    toStr,
+    updateEventType,
+    updateKqlMode,
+    updateReduxTime,
+  }) => {
+    const applyFilterQueryFromKueryExpression = useCallback(
+      (expression: string, kind) =>
+        applyKqlFilterQuery({
+          id: timelineId,
+          filterQuery: {
+            kuery: {
+              kind,
+              expression,
+            },
+            serializedQuery: convertKueryToElasticSearchQuery(expression, indexPattern),
+          },
+        }),
+      [indexPattern, timelineId]
+    );
+
+    const setFilterQueryDraftFromKueryExpression = useCallback(
+      (expression: string, kind) =>
+        setKqlFilterQueryDraft({
+          id: timelineId,
+          filterQueryDraft: {
+            kind,
+            expression,
+          },
+        }),
+      [timelineId]
+    );
+
+    const setFiltersInTimeline = useCallback(
+      (newFilters: Filter[]) =>
+        setFilters({
+          id: timelineId,
+          filters: newFilters,
+        }),
+      [timelineId]
+    );
+
+    const setSavedQueryInTimeline = useCallback(
+      (newSavedQueryId: string | null) =>
+        setSavedQueryId({
+          id: timelineId,
+          savedQueryId: newSavedQueryId,
+        }),
+      [timelineId]
+    );
+
+    const handleUpdateEventType = useCallback(
+      (newEventType: EventType) =>
+        updateEventType({
+          id: timelineId,
+          eventType: newEventType,
+        }),
+      [timelineId]
+    );
+
+    return (
+      <SearchOrFilter
+        applyKqlFilterQuery={applyFilterQueryFromKueryExpression}
+        browserFields={browserFields}
+        dataProviders={dataProviders}
+        eventType={eventType}
+        filters={filters}
+        filterManager={filterManager}
+        filterQuery={filterQuery}
+        filterQueryDraft={filterQueryDraft}
+        from={from}
+        fromStr={fromStr}
+        indexPattern={indexPattern}
+        isRefreshPaused={isRefreshPaused}
+        kqlMode={kqlMode!}
+        refreshInterval={refreshInterval}
+        savedQueryId={savedQueryId}
+        setFilters={setFiltersInTimeline}
+        setKqlFilterQueryDraft={setFilterQueryDraftFromKueryExpression!}
+        setSavedQueryId={setSavedQueryInTimeline}
+        timelineId={timelineId}
+        to={to}
+        toStr={toStr}
+        updateEventType={handleUpdateEventType}
+        updateKqlMode={updateKqlMode!}
+        updateReduxTime={updateReduxTime}
+      />
+    );
+  },
+  (prevProps, nextProps) => {
+    return (
+      prevProps.eventType === nextProps.eventType &&
+      prevProps.filterManager === nextProps.filterManager &&
+      prevProps.from === nextProps.from &&
+      prevProps.fromStr === nextProps.fromStr &&
+      prevProps.to === nextProps.to &&
+      prevProps.toStr === nextProps.toStr &&
+      prevProps.isRefreshPaused === nextProps.isRefreshPaused &&
+      prevProps.refreshInterval === nextProps.refreshInterval &&
+      prevProps.timelineId === nextProps.timelineId &&
+      deepEqual(prevProps.browserFields, nextProps.browserFields) &&
+      deepEqual(prevProps.dataProviders, nextProps.dataProviders) &&
+      deepEqual(prevProps.filters, nextProps.filters) &&
+      deepEqual(prevProps.filterQuery, nextProps.filterQuery) &&
+      deepEqual(prevProps.filterQueryDraft, nextProps.filterQueryDraft) &&
+      deepEqual(prevProps.indexPattern, nextProps.indexPattern) &&
+      deepEqual(prevProps.kqlMode, nextProps.kqlMode) &&
+      deepEqual(prevProps.savedQueryId, nextProps.savedQueryId) &&
+      deepEqual(prevProps.timelineId, nextProps.timelineId)
+    );
+  }
+);
+StatefulSearchOrFilterComponent.displayName = 'StatefulSearchOrFilterComponent';
+
+const makeMapStateToProps = () => {
+  const getTimeline = timelineSelectors.getTimelineByIdSelector();
+  const getKqlFilterQueryDraft = timelineSelectors.getKqlFilterQueryDraftSelector();
+  const getKqlFilterQuery = timelineSelectors.getKqlFilterKuerySelector();
+  const getInputsTimeline = inputsSelectors.getTimelineSelector();
+  const getInputsPolicy = inputsSelectors.getTimelinePolicySelector();
+  const mapStateToProps = (state: State, { timelineId }: OwnProps) => {
+    const timeline: TimelineModel = getTimeline(state, timelineId) ?? timelineDefaults;
+    const input: inputsModel.InputsRange = getInputsTimeline(state);
+    const policy: inputsModel.Policy = getInputsPolicy(state);
+    return {
+      dataProviders: timeline.dataProviders,
+      eventType: timeline.eventType ?? 'raw',
+      filterQuery: getKqlFilterQuery(state, timelineId)!,
+      filterQueryDraft: getKqlFilterQueryDraft(state, timelineId)!,
+      filters: timeline.filters!,
+      from: input.timerange.from,
+      fromStr: input.timerange.fromStr!,
+      isRefreshPaused: policy.kind === 'manual',
+      kqlMode: getOr('filter', 'kqlMode', timeline),
+      refreshInterval: policy.duration,
+      savedQueryId: getOr(null, 'savedQueryId', timeline),
+      to: input.timerange.to,
+      toStr: input.timerange.toStr!,
+    };
+  };
+  return mapStateToProps;
+};
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  applyKqlFilterQuery: ({ id, filterQuery }: { id: string; filterQuery: SerializedFilterQuery }) =>
+    dispatch(
+      timelineActions.applyKqlFilterQuery({
+        id,
+        filterQuery,
+      })
+    ),
+  updateEventType: ({ id, eventType }: { id: string; eventType: EventType }) =>
+    dispatch(timelineActions.updateEventType({ id, eventType })),
+  updateKqlMode: ({ id, kqlMode }: { id: string; kqlMode: KqlMode }) =>
+    dispatch(timelineActions.updateKqlMode({ id, kqlMode })),
+  setKqlFilterQueryDraft: ({
+    id,
+    filterQueryDraft,
+  }: {
+    id: string;
+    filterQueryDraft: KueryFilterQuery;
+  }) =>
+    dispatch(
+      timelineActions.setKqlFilterQueryDraft({
+        id,
+        filterQueryDraft,
+      })
+    ),
+  setSavedQueryId: ({ id, savedQueryId }: { id: string; savedQueryId: string | null }) =>
+    dispatch(timelineActions.setSavedQueryId({ id, savedQueryId })),
+  setFilters: ({ id, filters }: { id: string; filters: Filter[] }) =>
+    dispatch(timelineActions.setFilters({ id, filters })),
+  updateReduxTime: dispatchUpdateReduxTime(dispatch),
+});
+
+export const connector = connect(makeMapStateToProps, mapDispatchToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export const StatefulSearchOrFilter = connector(StatefulSearchOrFilterComponent);
diff --git a/x-pack/plugins/siem/public/components/timeline/search_or_filter/pick_events.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/search_or_filter/pick_events.tsx
similarity index 96%
rename from x-pack/plugins/siem/public/components/timeline/search_or_filter/pick_events.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/search_or_filter/pick_events.tsx
index 3117bae7452864..85097f93464b34 100644
--- a/x-pack/plugins/siem/public/components/timeline/search_or_filter/pick_events.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/search_or_filter/pick_events.tsx
@@ -8,7 +8,7 @@ import { EuiHealth, EuiSuperSelect } from '@elastic/eui';
 import React, { memo } from 'react';
 import styled from 'styled-components';
 
-import { EventType } from '../../../store/timeline/model';
+import { EventType } from '../../../../timelines/store/timeline/model';
 import * as i18n from './translations';
 
 interface EventTypeOptionItem {
diff --git a/x-pack/plugins/siem/public/components/timeline/search_or_filter/search_or_filter.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/search_or_filter/search_or_filter.tsx
similarity index 93%
rename from x-pack/plugins/siem/public/components/timeline/search_or_filter/search_or_filter.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/search_or_filter/search_or_filter.tsx
index 0b8ed71135744f..388085d1361f37 100644
--- a/x-pack/plugins/siem/public/components/timeline/search_or_filter/search_or_filter.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/search_or_filter/search_or_filter.tsx
@@ -8,11 +8,15 @@ import { EuiFlexGroup, EuiFlexItem, EuiSuperSelect, EuiToolTip } from '@elastic/
 import React from 'react';
 import styled, { createGlobalStyle } from 'styled-components';
 
-import { Filter, FilterManager, IIndexPattern } from '../../../../../../../src/plugins/data/public';
-import { BrowserFields } from '../../../containers/source';
-import { KueryFilterQuery, KueryFilterQueryKind } from '../../../store';
-import { KqlMode, EventType } from '../../../store/timeline/model';
-import { DispatchUpdateReduxTime } from '../../super_date_picker';
+import {
+  Filter,
+  FilterManager,
+  IIndexPattern,
+} from '../../../../../../../../src/plugins/data/public';
+import { BrowserFields } from '../../../../common/containers/source';
+import { KueryFilterQuery, KueryFilterQueryKind } from '../../../../common/store';
+import { KqlMode, EventType } from '../../../../timelines/store/timeline/model';
+import { DispatchUpdateReduxTime } from '../../../../common/components/super_date_picker';
 import { DataProvider } from '../data_providers/data_provider';
 import { QueryBarTimeline } from '../query_bar';
 
diff --git a/x-pack/plugins/siem/public/components/timeline/search_or_filter/translations.ts b/x-pack/plugins/siem/public/timelines/components/timeline/search_or_filter/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/search_or_filter/translations.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/search_or_filter/translations.ts
diff --git a/x-pack/plugins/siem/public/components/timeline/search_super_select/index.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/search_super_select/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/search_super_select/index.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/search_super_select/index.tsx
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/selectable_timeline/index.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/selectable_timeline/index.tsx
new file mode 100644
index 00000000000000..fb3cb3f177ca04
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/selectable_timeline/index.tsx
@@ -0,0 +1,288 @@
+/*
+ * 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 {
+  EuiSelectable,
+  EuiHighlight,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiTextColor,
+  EuiSelectableOption,
+  EuiPortal,
+  EuiFilterGroup,
+  EuiFilterButton,
+} from '@elastic/eui';
+import { isEmpty } from 'lodash/fp';
+import React, { memo, useCallback, useMemo, useState, useEffect } from 'react';
+import { ListProps } from 'react-virtualized';
+import styled from 'styled-components';
+
+import { TimelineType, TimelineTypeLiteralWithNull } from '../../../../../common/types/timeline';
+
+import { useGetAllTimeline } from '../../../containers/all';
+import { SortFieldTimeline, Direction } from '../../../../graphql/types';
+import { isUntitled } from '../../open_timeline/helpers';
+import * as i18nTimeline from '../../open_timeline/translations';
+import { OpenTimelineResult } from '../../open_timeline/types';
+import { getEmptyTagValue } from '../../../../common/components/empty_value';
+
+import * as i18n from '../translations';
+
+const MyEuiFlexItem = styled(EuiFlexItem)`
+  display: inline-block;
+  max-width: 296px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const MyEuiFlexGroup = styled(EuiFlexGroup)`
+  padding 0px 4px;
+`;
+
+const EuiSelectableContainer = styled.div<{ isLoading: boolean }>`
+  .euiSelectable {
+    .euiFormControlLayout__childrenWrapper {
+      display: flex;
+    }
+    ${({ isLoading }) => `${
+      isLoading
+        ? `
+      .euiFormControlLayoutIcons {
+        display: none;
+      }
+      .euiFormControlLayoutIcons.euiFormControlLayoutIcons--right {
+        display: block;
+        left: 12px;
+        top: 12px;
+      }`
+        : ''
+    }
+    `}
+  }
+`;
+
+const ORIGINAL_PAGE_SIZE = 50;
+const POPOVER_HEIGHT = 260;
+const TIMELINE_ITEM_HEIGHT = 50;
+
+export interface GetSelectableOptions {
+  timelines: OpenTimelineResult[];
+  onlyFavorites: boolean;
+  timelineType?: TimelineTypeLiteralWithNull;
+  searchTimelineValue: string;
+}
+
+interface SelectableTimelineProps {
+  hideUntitled?: boolean;
+  getSelectableOptions: ({
+    timelines,
+    onlyFavorites,
+    timelineType,
+    searchTimelineValue,
+  }: GetSelectableOptions) => EuiSelectableOption[];
+  onClosePopover: () => void;
+  onTimelineChange: (timelineTitle: string, timelineId: string | null) => void;
+}
+
+const SelectableTimelineComponent: React.FC<SelectableTimelineProps> = ({
+  hideUntitled = false,
+  getSelectableOptions,
+  onClosePopover,
+  onTimelineChange,
+}) => {
+  const [pageSize, setPageSize] = useState(ORIGINAL_PAGE_SIZE);
+  const [heightTrigger, setHeightTrigger] = useState(0);
+  const [searchTimelineValue, setSearchTimelineValue] = useState('');
+  const [onlyFavorites, setOnlyFavorites] = useState(false);
+  const [searchRef, setSearchRef] = useState<HTMLElement | null>(null);
+  const { fetchAllTimeline, timelines, loading, totalCount: timelineCount } = useGetAllTimeline();
+
+  const onSearchTimeline = useCallback(val => {
+    setSearchTimelineValue(val);
+  }, []);
+
+  const handleOnToggleOnlyFavorites = useCallback(() => {
+    setOnlyFavorites(!onlyFavorites);
+  }, [onlyFavorites]);
+
+  const handleOnScroll = useCallback(
+    (
+      totalTimelines: number,
+      totalCount: number,
+      {
+        clientHeight,
+        scrollHeight,
+        scrollTop,
+      }: {
+        clientHeight: number;
+        scrollHeight: number;
+        scrollTop: number;
+      }
+    ) => {
+      if (totalTimelines < totalCount) {
+        const clientHeightTrigger = clientHeight * 1.2;
+        if (
+          scrollTop > 10 &&
+          scrollHeight - scrollTop < clientHeightTrigger &&
+          scrollHeight > heightTrigger
+        ) {
+          setHeightTrigger(scrollHeight);
+          setPageSize(pageSize + ORIGINAL_PAGE_SIZE);
+        }
+      }
+    },
+    [heightTrigger, pageSize]
+  );
+
+  const renderTimelineOption = useCallback((option, searchValue) => {
+    return (
+      <EuiFlexGroup
+        gutterSize="s"
+        justifyContent="spaceBetween"
+        alignItems="center"
+        responsive={false}
+      >
+        <EuiFlexItem grow={false}>
+          <EuiIcon type={`${option.checked === 'on' ? 'check' : 'none'}`} color="primary" />
+        </EuiFlexItem>
+        <EuiFlexItem grow={true}>
+          <EuiFlexGroup gutterSize="none" direction="column">
+            <MyEuiFlexItem data-test-subj="timeline" grow={false}>
+              <EuiHighlight search={searchValue}>
+                {isUntitled(option) ? i18nTimeline.UNTITLED_TIMELINE : option.title}
+              </EuiHighlight>
+            </MyEuiFlexItem>
+            <MyEuiFlexItem grow={false}>
+              <EuiTextColor color="subdued" component="span">
+                <small>
+                  {option.description != null && option.description.trim().length > 0
+                    ? option.description
+                    : getEmptyTagValue()}
+                </small>
+              </EuiTextColor>
+            </MyEuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiIcon
+            type={`${
+              option.favorite != null && isEmpty(option.favorite) ? 'starEmpty' : 'starFilled'
+            }`}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  }, []);
+
+  const handleTimelineChange = useCallback(
+    options => {
+      const selectedTimeline = options.filter(
+        (option: { checked: string }) => option.checked === 'on'
+      );
+      if (selectedTimeline != null && selectedTimeline.length > 0) {
+        onTimelineChange(
+          isEmpty(selectedTimeline[0].title)
+            ? i18nTimeline.UNTITLED_TIMELINE
+            : selectedTimeline[0].title,
+          selectedTimeline[0].id === '-1' ? null : selectedTimeline[0].id
+        );
+      }
+      onClosePopover();
+    },
+    [onClosePopover, onTimelineChange]
+  );
+
+  const favoritePortal = useMemo(
+    () =>
+      searchRef != null ? (
+        <EuiPortal insert={{ sibling: searchRef, position: 'after' }}>
+          <MyEuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+            <EuiFlexItem grow={false}>
+              <EuiFilterGroup>
+                <EuiFilterButton
+                  size="l"
+                  data-test-subj="only-favorites-toggle"
+                  hasActiveFilters={onlyFavorites}
+                  onClick={handleOnToggleOnlyFavorites}
+                >
+                  {i18nTimeline.ONLY_FAVORITES}
+                </EuiFilterButton>
+              </EuiFilterGroup>
+            </EuiFlexItem>
+          </MyEuiFlexGroup>
+        </EuiPortal>
+      ) : null,
+    [searchRef, onlyFavorites, handleOnToggleOnlyFavorites]
+  );
+
+  useEffect(() => {
+    fetchAllTimeline({
+      pageInfo: {
+        pageIndex: 1,
+        pageSize,
+      },
+      search: searchTimelineValue,
+      sort: {
+        sortField: SortFieldTimeline.updated,
+        sortOrder: Direction.desc,
+      },
+      onlyUserFavorite: onlyFavorites,
+      timelineType: TimelineType.default,
+    });
+  }, [onlyFavorites, pageSize, searchTimelineValue]);
+
+  return (
+    <EuiSelectableContainer isLoading={loading}>
+      <EuiSelectable
+        height={POPOVER_HEIGHT}
+        isLoading={loading && timelines.length === 0}
+        listProps={{
+          rowHeight: TIMELINE_ITEM_HEIGHT,
+          showIcons: false,
+          virtualizedProps: ({
+            onScroll: handleOnScroll.bind(
+              null,
+              timelines.filter(t => !hideUntitled || t.title !== '').length,
+              timelineCount
+            ),
+          } as unknown) as ListProps,
+        }}
+        renderOption={renderTimelineOption}
+        onChange={handleTimelineChange}
+        searchable
+        searchProps={{
+          'data-test-subj': 'timeline-super-select-search-box',
+          isLoading: loading,
+          placeholder: i18n.SEARCH_BOX_TIMELINE_PLACEHOLDER,
+          onSearch: onSearchTimeline,
+          incremental: false,
+          inputRef: (ref: HTMLElement) => {
+            setSearchRef(ref);
+          },
+        }}
+        singleSelection={true}
+        options={getSelectableOptions({
+          timelines,
+          onlyFavorites,
+          searchTimelineValue,
+          timelineType: TimelineType.default,
+        })}
+      >
+        {(list, search) => (
+          <>
+            {search}
+            {favoritePortal}
+            {list}
+          </>
+        )}
+      </EuiSelectable>
+    </EuiSelectableContainer>
+  );
+};
+
+export const SelectableTimeline = memo(SelectableTimelineComponent);
diff --git a/x-pack/plugins/siem/public/components/skeleton_row/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/timelines/components/timeline/skeleton_row/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/siem/public/components/skeleton_row/__snapshots__/index.test.tsx.snap
rename to x-pack/plugins/siem/public/timelines/components/timeline/skeleton_row/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/siem/public/timelines/components/timeline/skeleton_row/index.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/skeleton_row/index.test.tsx
new file mode 100644
index 00000000000000..b63359077bf2c9
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/skeleton_row/index.test.tsx
@@ -0,0 +1,45 @@
+/*
+ * 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 { mount, shallow } from 'enzyme';
+import React from 'react';
+
+import { TestProviders } from '../../../../common/mock';
+import { SkeletonRow } from './index';
+
+describe('SkeletonRow', () => {
+  test('it renders', () => {
+    const wrapper = shallow(<SkeletonRow />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('it renders the correct number of cells if cellCount is specified', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <SkeletonRow cellCount={10} />
+      </TestProviders>
+    );
+
+    expect(wrapper.find('.siemSkeletonRow__cell')).toHaveLength(10);
+  });
+
+  test('it applies row and cell styles when cellColor/cellMargin/rowHeight/rowPadding provided', () => {
+    const wrapper = mount(
+      <TestProviders>
+        <SkeletonRow cellColor="red" cellMargin="10px" rowHeight="100px" rowPadding="10px" />
+      </TestProviders>
+    );
+    const siemSkeletonRow = wrapper.find('.siemSkeletonRow').first();
+    const siemSkeletonRowCell = wrapper.find('.siemSkeletonRow__cell').last();
+
+    expect(siemSkeletonRow).toHaveStyleRule('height', '100px');
+    expect(siemSkeletonRow).toHaveStyleRule('padding', '10px');
+    expect(siemSkeletonRowCell).toHaveStyleRule('background-color', 'red');
+    expect(siemSkeletonRowCell).toHaveStyleRule('margin-left', '10px', {
+      modifier: '& + &',
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/components/skeleton_row/index.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/skeleton_row/index.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/components/skeleton_row/index.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/skeleton_row/index.tsx
diff --git a/x-pack/plugins/siem/public/components/timeline/styles.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/styles.tsx
similarity index 98%
rename from x-pack/plugins/siem/public/components/timeline/styles.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/styles.tsx
index 16fb57714829cc..aad80cbdfe3372 100644
--- a/x-pack/plugins/siem/public/components/timeline/styles.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/styles.tsx
@@ -8,8 +8,8 @@ import { EuiLoadingSpinner } from '@elastic/eui';
 import { rgba } from 'polished';
 import styled, { createGlobalStyle } from 'styled-components';
 
-import { EventType } from '../../store/timeline/model';
-import { IS_TIMELINE_FIELD_DRAGGING_CLASS_NAME } from '../drag_and_drop/helpers';
+import { EventType } from '../../../timelines/store/timeline/model';
+import { IS_TIMELINE_FIELD_DRAGGING_CLASS_NAME } from '../../../common/components/drag_and_drop/helpers';
 
 /**
  * TIMELINE BODY
diff --git a/x-pack/plugins/siem/public/components/timeline/timeline.test.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/timeline.test.tsx
similarity index 96%
rename from x-pack/plugins/siem/public/components/timeline/timeline.test.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/timeline.test.tsx
index 0d0ce79c77be7f..578f85fe9ddffe 100644
--- a/x-pack/plugins/siem/public/components/timeline/timeline.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/timeline.test.tsx
@@ -9,11 +9,11 @@ import React from 'react';
 import { MockedProvider } from 'react-apollo/test-utils';
 import useResizeObserver from 'use-resize-observer/polyfilled';
 
-import { timelineQuery } from '../../containers/timeline/index.gql_query';
-import { mockBrowserFields } from '../../containers/source/mock';
-import { Direction } from '../../graphql/types';
-import { defaultHeaders, mockTimelineData, mockIndexPattern } from '../../mock';
-import { TestProviders } from '../../mock/test_providers';
+import { timelineQuery } from '../../containers/index.gql_query';
+import { mockBrowserFields } from '../../../common/containers/source/mock';
+import { Direction } from '../../../graphql/types';
+import { defaultHeaders, mockTimelineData, mockIndexPattern } from '../../../common/mock';
+import { TestProviders } from '../../../common/mock/test_providers';
 
 import {
   DELETE_CLASS_NAME,
@@ -23,9 +23,9 @@ import {
 import { TimelineComponent, Props as TimelineComponentProps } from './timeline';
 import { Sort } from './body/sort';
 import { mockDataProviders } from './data_providers/mock/mock_data_providers';
-import { useMountAppended } from '../../utils/use_mount_appended';
+import { useMountAppended } from '../../../common/utils/use_mount_appended';
 
-jest.mock('../../lib/kibana');
+jest.mock('../../../common/lib/kibana');
 
 const mockUseResizeObserver: jest.Mock = useResizeObserver as jest.Mock;
 jest.mock('use-resize-observer/polyfilled');
diff --git a/x-pack/plugins/siem/public/components/timeline/timeline.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/timeline.tsx
similarity index 95%
rename from x-pack/plugins/siem/public/components/timeline/timeline.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/timeline.tsx
index cc3116235557f7..79d86e5b556d84 100644
--- a/x-pack/plugins/siem/public/components/timeline/timeline.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/timeline.tsx
@@ -10,11 +10,11 @@ import React, { useState, useMemo } from 'react';
 import styled from 'styled-components';
 
 import { FlyoutHeaderWithCloseButton } from '../flyout/header_with_close_button';
-import { BrowserFields } from '../../containers/source';
-import { TimelineQuery } from '../../containers/timeline';
-import { Direction } from '../../graphql/types';
-import { useKibana } from '../../lib/kibana';
-import { ColumnHeaderOptions, KqlMode, EventType } from '../../store/timeline/model';
+import { BrowserFields } from '../../../common/containers/source';
+import { TimelineQuery } from '../../containers/index';
+import { Direction } from '../../../graphql/types';
+import { useKibana } from '../../../common/lib/kibana';
+import { ColumnHeaderOptions, KqlMode, EventType } from '../../../timelines/store/timeline/model';
 import { defaultHeaders } from './body/column_headers/default_headers';
 import { Sort } from './body/sort';
 import { StatefulBody } from './body/stateful_body';
@@ -37,7 +37,7 @@ import {
   Filter,
   FilterManager,
   IIndexPattern,
-} from '../../../../../../src/plugins/data/public';
+} from '../../../../../../../src/plugins/data/public';
 
 const TimelineContainer = styled.div`
   height: 100%;
diff --git a/x-pack/plugins/siem/public/components/timeline/timeline_context.tsx b/x-pack/plugins/siem/public/timelines/components/timeline/timeline_context.tsx
similarity index 97%
rename from x-pack/plugins/siem/public/components/timeline/timeline_context.tsx
rename to x-pack/plugins/siem/public/timelines/components/timeline/timeline_context.tsx
index 25a0078b6066a6..7c1eadd8e8beda 100644
--- a/x-pack/plugins/siem/public/components/timeline/timeline_context.tsx
+++ b/x-pack/plugins/siem/public/timelines/components/timeline/timeline_context.tsx
@@ -6,7 +6,7 @@
 
 import React, { createContext, memo, useContext, useEffect, useState } from 'react';
 
-import { FilterManager } from '../../../../../../src/plugins/data/public';
+import { FilterManager } from '../../../../../../../src/plugins/data/public';
 
 import { TimelineAction } from './body/actions';
 
diff --git a/x-pack/plugins/siem/public/components/timeline/translations.ts b/x-pack/plugins/siem/public/timelines/components/timeline/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/components/timeline/translations.ts
rename to x-pack/plugins/siem/public/timelines/components/timeline/translations.ts
diff --git a/x-pack/plugins/siem/public/containers/timeline/all/index.gql_query.ts b/x-pack/plugins/siem/public/timelines/containers/all/index.gql_query.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/timeline/all/index.gql_query.ts
rename to x-pack/plugins/siem/public/timelines/containers/all/index.gql_query.ts
diff --git a/x-pack/plugins/siem/public/timelines/containers/all/index.tsx b/x-pack/plugins/siem/public/timelines/containers/all/index.tsx
new file mode 100644
index 00000000000000..bdab29953a249f
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/containers/all/index.tsx
@@ -0,0 +1,184 @@
+/*
+ * 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 { getOr, noop } from 'lodash/fp';
+import memoizeOne from 'memoize-one';
+import { useCallback, useState, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+
+import { OpenTimelineResult } from '../../components/open_timeline/types';
+import { errorToToaster, useStateToaster } from '../../../common/components/toasters';
+import {
+  GetAllTimeline,
+  PageInfoTimeline,
+  SortTimeline,
+  TimelineResult,
+} from '../../../graphql/types';
+import { inputsActions } from '../../../common/store/inputs';
+import { useApolloClient } from '../../../common/utils/apollo_context';
+
+import { allTimelinesQuery } from './index.gql_query';
+import * as i18n from '../../pages/translations';
+import { TimelineTypeLiteralWithNull } from '../../../../common/types/timeline';
+
+export interface AllTimelinesArgs {
+  fetchAllTimeline: ({
+    onlyUserFavorite,
+    pageInfo,
+    search,
+    sort,
+    timelineType,
+  }: AllTimelinesVariables) => void;
+  timelines: OpenTimelineResult[];
+  loading: boolean;
+  totalCount: number;
+}
+
+export interface AllTimelinesVariables {
+  onlyUserFavorite: boolean;
+  pageInfo: PageInfoTimeline;
+  search: string;
+  sort: SortTimeline;
+  timelineType: TimelineTypeLiteralWithNull;
+}
+
+export const ALL_TIMELINE_QUERY_ID = 'FETCH_ALL_TIMELINES';
+
+export const getAllTimeline = memoizeOne(
+  (variables: string, timelines: TimelineResult[]): OpenTimelineResult[] =>
+    timelines.map(timeline => ({
+      created: timeline.created,
+      description: timeline.description,
+      eventIdToNoteIds:
+        timeline.eventIdToNoteIds != null
+          ? timeline.eventIdToNoteIds.reduce((acc, note) => {
+              if (note.eventId != null) {
+                const notes = getOr([], note.eventId, acc);
+                return { ...acc, [note.eventId]: [...notes, note.noteId] };
+              }
+              return acc;
+            }, {})
+          : null,
+      favorite: timeline.favorite,
+      noteIds: timeline.noteIds,
+      notes:
+        timeline.notes != null
+          ? timeline.notes.map(note => ({ ...note, savedObjectId: note.noteId }))
+          : null,
+      pinnedEventIds:
+        timeline.pinnedEventIds != null
+          ? timeline.pinnedEventIds.reduce(
+              (acc, pinnedEventId) => ({ ...acc, [pinnedEventId]: true }),
+              {}
+            )
+          : null,
+      savedObjectId: timeline.savedObjectId,
+      title: timeline.title,
+      updated: timeline.updated,
+      updatedBy: timeline.updatedBy,
+    }))
+);
+
+export const useGetAllTimeline = (): AllTimelinesArgs => {
+  const dispatch = useDispatch();
+  const apolloClient = useApolloClient();
+  const [, dispatchToaster] = useStateToaster();
+  const [allTimelines, setAllTimelines] = useState<AllTimelinesArgs>({
+    fetchAllTimeline: noop,
+    loading: false,
+    totalCount: 0,
+    timelines: [],
+  });
+
+  const fetchAllTimeline = useCallback(
+    async ({ onlyUserFavorite, pageInfo, search, sort, timelineType }: AllTimelinesVariables) => {
+      let didCancel = false;
+      const abortCtrl = new AbortController();
+
+      const fetchData = async () => {
+        try {
+          if (apolloClient != null) {
+            setAllTimelines({
+              ...allTimelines,
+              loading: true,
+            });
+
+            const variables: GetAllTimeline.Variables = {
+              onlyUserFavorite,
+              pageInfo,
+              search,
+              sort,
+              timelineType,
+            };
+            const response = await apolloClient.query<
+              GetAllTimeline.Query,
+              GetAllTimeline.Variables
+            >({
+              query: allTimelinesQuery,
+              fetchPolicy: 'network-only',
+              variables,
+              context: {
+                fetchOptions: {
+                  abortSignal: abortCtrl.signal,
+                },
+              },
+            });
+            const totalCount = response?.data?.getAllTimeline?.totalCount ?? 0;
+            const timelines = response?.data?.getAllTimeline?.timeline ?? [];
+            if (!didCancel) {
+              dispatch(
+                inputsActions.setQuery({
+                  inputId: 'global',
+                  id: ALL_TIMELINE_QUERY_ID,
+                  loading: false,
+                  refetch: fetchData,
+                  inspect: null,
+                })
+              );
+              setAllTimelines({
+                fetchAllTimeline,
+                loading: false,
+                totalCount,
+                timelines: getAllTimeline(JSON.stringify(variables), timelines as TimelineResult[]),
+              });
+            }
+          }
+        } catch (error) {
+          if (!didCancel) {
+            errorToToaster({
+              title: i18n.ERROR_FETCHING_TIMELINES_TITLE,
+              error: error.body && error.body.message ? new Error(error.body.message) : error,
+              dispatchToaster,
+            });
+            setAllTimelines({
+              fetchAllTimeline,
+              loading: false,
+              totalCount: 0,
+              timelines: [],
+            });
+          }
+        }
+      };
+      fetchData();
+      return () => {
+        didCancel = true;
+        abortCtrl.abort();
+      };
+    },
+    [apolloClient, allTimelines]
+  );
+
+  useEffect(() => {
+    return () => {
+      dispatch(inputsActions.deleteOneQuery({ inputId: 'global', id: ALL_TIMELINE_QUERY_ID }));
+    };
+  }, [dispatch]);
+
+  return {
+    ...allTimelines,
+    fetchAllTimeline,
+  };
+};
diff --git a/x-pack/plugins/siem/public/timelines/containers/api.ts b/x-pack/plugins/siem/public/timelines/containers/api.ts
new file mode 100644
index 00000000000000..8afbec05938eb8
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/containers/api.ts
@@ -0,0 +1,118 @@
+/*
+ * 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 { fold } from 'fp-ts/lib/Either';
+import { identity } from 'fp-ts/lib/function';
+import { pipe } from 'fp-ts/lib/pipeable';
+
+import { throwErrors } from '../../../../case/common/api';
+import {
+  SavedTimeline,
+  TimelineResponse,
+  TimelineResponseType,
+} from '../../../common/types/timeline';
+import { TIMELINE_URL, TIMELINE_IMPORT_URL, TIMELINE_EXPORT_URL } from '../../../common/constants';
+
+import { KibanaServices } from '../../common/lib/kibana';
+import { ExportSelectedData } from '../../common/components/generic_downloader';
+
+import { createToasterPlainError } from '../../cases/containers/utils';
+import {
+  ImportDataProps,
+  ImportDataResponse,
+} from '../../alerts/containers/detection_engine/rules';
+
+interface RequestPostTimeline {
+  timeline: SavedTimeline;
+  signal?: AbortSignal;
+}
+
+interface RequestPatchTimeline<T = string> extends RequestPostTimeline {
+  timelineId: T;
+  version: T;
+}
+
+type RequestPersistTimeline = RequestPostTimeline & Partial<RequestPatchTimeline<null | string>>;
+
+const decodeTimelineResponse = (respTimeline?: TimelineResponse) =>
+  pipe(
+    TimelineResponseType.decode(respTimeline),
+    fold(throwErrors(createToasterPlainError), identity)
+  );
+
+const postTimeline = async ({ timeline }: RequestPostTimeline): Promise<TimelineResponse> => {
+  const response = await KibanaServices.get().http.post<TimelineResponse>(TIMELINE_URL, {
+    method: 'POST',
+    body: JSON.stringify({ timeline }),
+  });
+
+  return decodeTimelineResponse(response);
+};
+
+const patchTimeline = async ({
+  timelineId,
+  timeline,
+  version,
+}: RequestPatchTimeline): Promise<TimelineResponse> => {
+  const response = await KibanaServices.get().http.patch<TimelineResponse>(TIMELINE_URL, {
+    method: 'PATCH',
+    body: JSON.stringify({ timeline, timelineId, version }),
+  });
+
+  return decodeTimelineResponse(response);
+};
+
+export const persistTimeline = async ({
+  timelineId,
+  timeline,
+  version,
+}: RequestPersistTimeline): Promise<TimelineResponse> => {
+  if (timelineId == null) {
+    return postTimeline({ timeline });
+  }
+  return patchTimeline({
+    timelineId,
+    timeline,
+    version: version ?? '',
+  });
+};
+
+export const importTimelines = async ({
+  fileToImport,
+  overwrite = false,
+  signal,
+}: ImportDataProps): Promise<ImportDataResponse> => {
+  const formData = new FormData();
+  formData.append('file', fileToImport);
+
+  return KibanaServices.get().http.fetch<ImportDataResponse>(`${TIMELINE_IMPORT_URL}`, {
+    method: 'POST',
+    headers: { 'Content-Type': undefined },
+    query: { overwrite },
+    body: formData,
+    signal,
+  });
+};
+
+export const exportSelectedTimeline: ExportSelectedData = async ({
+  excludeExportDetails = false,
+  filename = `timelines_export.ndjson`,
+  ids = [],
+  signal,
+}): Promise<Blob> => {
+  const body = ids.length > 0 ? JSON.stringify({ ids }) : undefined;
+  const response = await KibanaServices.get().http.fetch<Blob>(`${TIMELINE_EXPORT_URL}`, {
+    method: 'POST',
+    body,
+    query: {
+      exclude_export_details: excludeExportDetails,
+      file_name: filename,
+    },
+    signal,
+    asResponse: true,
+  });
+
+  return response.body!;
+};
diff --git a/x-pack/plugins/siem/public/containers/timeline/delete/persist.gql_query.ts b/x-pack/plugins/siem/public/timelines/containers/delete/persist.gql_query.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/timeline/delete/persist.gql_query.ts
rename to x-pack/plugins/siem/public/timelines/containers/delete/persist.gql_query.ts
diff --git a/x-pack/plugins/siem/public/containers/timeline/details/index.gql_query.ts b/x-pack/plugins/siem/public/timelines/containers/details/index.gql_query.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/timeline/details/index.gql_query.ts
rename to x-pack/plugins/siem/public/timelines/containers/details/index.gql_query.ts
diff --git a/x-pack/plugins/siem/public/timelines/containers/details/index.tsx b/x-pack/plugins/siem/public/timelines/containers/details/index.tsx
new file mode 100644
index 00000000000000..1b84451b5cba62
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/containers/details/index.tsx
@@ -0,0 +1,70 @@
+/*
+ * 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 { getOr } from 'lodash/fp';
+import memoizeOne from 'memoize-one';
+import React from 'react';
+import { Query } from 'react-apollo';
+
+import { DEFAULT_INDEX_KEY } from '../../../../common/constants';
+import { DetailItem, GetTimelineDetailsQuery } from '../../../graphql/types';
+import { useUiSetting } from '../../../common/lib/kibana';
+
+import { timelineDetailsQuery } from './index.gql_query';
+
+export interface EventsArgs {
+  detailsData: DetailItem[] | null;
+  loading: boolean;
+}
+
+export interface TimelineDetailsProps {
+  children?: (args: EventsArgs) => React.ReactElement;
+  indexName: string;
+  eventId: string;
+  executeQuery: boolean;
+  sourceId: string;
+}
+
+const getDetailsEvent = memoizeOne(
+  (variables: string, detail: DetailItem[]): DetailItem[] => detail
+);
+
+const TimelineDetailsQueryComponent: React.FC<TimelineDetailsProps> = ({
+  children,
+  indexName,
+  eventId,
+  executeQuery,
+  sourceId,
+}) => {
+  const variables: GetTimelineDetailsQuery.Variables = {
+    sourceId,
+    indexName,
+    eventId,
+    defaultIndex: useUiSetting<string[]>(DEFAULT_INDEX_KEY),
+  };
+  return executeQuery ? (
+    <Query<GetTimelineDetailsQuery.Query, GetTimelineDetailsQuery.Variables>
+      query={timelineDetailsQuery}
+      fetchPolicy="network-only"
+      notifyOnNetworkStatusChange
+      variables={variables}
+    >
+      {({ data, loading, refetch }) =>
+        children!({
+          loading,
+          detailsData: getDetailsEvent(
+            JSON.stringify(variables),
+            getOr([], 'source.TimelineDetails.data', data)
+          ),
+        })
+      }
+    </Query>
+  ) : (
+    children!({ loading: false, detailsData: null })
+  );
+};
+
+export const TimelineDetailsQuery = React.memo(TimelineDetailsQueryComponent);
diff --git a/x-pack/plugins/siem/public/containers/timeline/favorite/persist.gql_query.ts b/x-pack/plugins/siem/public/timelines/containers/favorite/persist.gql_query.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/timeline/favorite/persist.gql_query.ts
rename to x-pack/plugins/siem/public/timelines/containers/favorite/persist.gql_query.ts
diff --git a/x-pack/plugins/siem/public/containers/timeline/index.gql_query.ts b/x-pack/plugins/siem/public/timelines/containers/index.gql_query.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/timeline/index.gql_query.ts
rename to x-pack/plugins/siem/public/timelines/containers/index.gql_query.ts
diff --git a/x-pack/plugins/siem/public/timelines/containers/index.tsx b/x-pack/plugins/siem/public/timelines/containers/index.tsx
new file mode 100644
index 00000000000000..76f6bdd36ecec0
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/containers/index.tsx
@@ -0,0 +1,199 @@
+/*
+ * 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 { getOr, uniqBy } from 'lodash/fp';
+import memoizeOne from 'memoize-one';
+import React from 'react';
+import { Query } from 'react-apollo';
+import { compose, Dispatch } from 'redux';
+import { connect, ConnectedProps } from 'react-redux';
+
+import { DEFAULT_INDEX_KEY } from '../../../common/constants';
+import { IIndexPattern } from '../../../../../../src/plugins/data/common/index_patterns';
+import {
+  GetTimelineQuery,
+  PageInfo,
+  SortField,
+  TimelineEdges,
+  TimelineItem,
+} from '../../graphql/types';
+import { inputsModel, inputsSelectors, State } from '../../common/store';
+import { withKibana, WithKibanaProps } from '../../common/lib/kibana';
+import { createFilter } from '../../common/containers/helpers';
+import { QueryTemplate, QueryTemplateProps } from '../../common/containers/query_template';
+import { EventType } from '../../timelines/store/timeline/model';
+import { timelineQuery } from './index.gql_query';
+import { timelineActions } from '../../timelines/store/timeline';
+import { SIGNALS_PAGE_TIMELINE_ID } from '../../alerts/components/signals';
+
+export interface TimelineArgs {
+  events: TimelineItem[];
+  id: string;
+  inspect: inputsModel.InspectQuery;
+  loading: boolean;
+  loadMore: (cursor: string, tieBreaker: string) => void;
+  pageInfo: PageInfo;
+  refetch: inputsModel.Refetch;
+  totalCount: number;
+  getUpdatedAt: () => number;
+}
+
+export interface CustomReduxProps {
+  clearSignalsState: ({ id }: { id?: string }) => void;
+}
+
+export interface OwnProps extends QueryTemplateProps {
+  children?: (args: TimelineArgs) => React.ReactNode;
+  eventType?: EventType;
+  id: string;
+  indexPattern?: IIndexPattern;
+  indexToAdd?: string[];
+  limit: number;
+  sortField: SortField;
+  fields: string[];
+}
+
+type TimelineQueryProps = OwnProps & PropsFromRedux & WithKibanaProps & CustomReduxProps;
+
+class TimelineQueryComponent extends QueryTemplate<
+  TimelineQueryProps,
+  GetTimelineQuery.Query,
+  GetTimelineQuery.Variables
+> {
+  private updatedDate: number = Date.now();
+  private memoizedTimelineEvents: (variables: string, events: TimelineEdges[]) => TimelineItem[];
+
+  constructor(props: TimelineQueryProps) {
+    super(props);
+    this.memoizedTimelineEvents = memoizeOne(this.getTimelineEvents);
+  }
+
+  public render() {
+    const {
+      children,
+      clearSignalsState,
+      eventType = 'raw',
+      id,
+      indexPattern,
+      indexToAdd = [],
+      isInspected,
+      kibana,
+      limit,
+      fields,
+      filterQuery,
+      sourceId,
+      sortField,
+    } = this.props;
+    const defaultKibanaIndex = kibana.services.uiSettings.get<string[]>(DEFAULT_INDEX_KEY);
+    const defaultIndex =
+      indexPattern == null || (indexPattern != null && indexPattern.title === '')
+        ? [
+            ...(['all', 'raw'].includes(eventType) ? defaultKibanaIndex : []),
+            ...(['all', 'signal'].includes(eventType) ? indexToAdd : []),
+          ]
+        : indexPattern?.title.split(',') ?? [];
+    const variables: GetTimelineQuery.Variables = {
+      fieldRequested: fields,
+      filterQuery: createFilter(filterQuery),
+      sourceId,
+      pagination: { limit, cursor: null, tiebreaker: null },
+      sortField,
+      defaultIndex,
+      inspect: isInspected,
+    };
+
+    return (
+      <Query<GetTimelineQuery.Query, GetTimelineQuery.Variables>
+        query={timelineQuery}
+        fetchPolicy="network-only"
+        notifyOnNetworkStatusChange
+        variables={variables}
+      >
+        {({ data, loading, fetchMore, refetch }) => {
+          this.setRefetch(refetch);
+          this.setExecuteBeforeRefetch(clearSignalsState);
+          this.setExecuteBeforeFetchMore(clearSignalsState);
+
+          const timelineEdges = getOr([], 'source.Timeline.edges', data);
+          this.setFetchMore(fetchMore);
+          this.setFetchMoreOptions((newCursor: string, tiebreaker?: string) => ({
+            variables: {
+              pagination: {
+                cursor: newCursor,
+                tiebreaker,
+                limit,
+              },
+            },
+            updateQuery: (prev, { fetchMoreResult }) => {
+              if (!fetchMoreResult) {
+                return prev;
+              }
+              return {
+                ...fetchMoreResult,
+                source: {
+                  ...fetchMoreResult.source,
+                  Timeline: {
+                    ...fetchMoreResult.source.Timeline,
+                    edges: uniqBy('node._id', [
+                      ...prev.source.Timeline.edges,
+                      ...fetchMoreResult.source.Timeline.edges,
+                    ]),
+                  },
+                },
+              };
+            },
+          }));
+          this.updatedDate = Date.now();
+          return children!({
+            id,
+            inspect: getOr(null, 'source.Timeline.inspect', data),
+            refetch: this.wrappedRefetch,
+            loading,
+            totalCount: getOr(0, 'source.Timeline.totalCount', data),
+            pageInfo: getOr({}, 'source.Timeline.pageInfo', data),
+            events: this.memoizedTimelineEvents(JSON.stringify(variables), timelineEdges),
+            loadMore: this.wrappedLoadMore,
+            getUpdatedAt: this.getUpdatedAt,
+          });
+        }}
+      </Query>
+    );
+  }
+
+  private getUpdatedAt = () => this.updatedDate;
+
+  private getTimelineEvents = (variables: string, timelineEdges: TimelineEdges[]): TimelineItem[] =>
+    timelineEdges.map((e: TimelineEdges) => e.node);
+}
+
+const makeMapStateToProps = () => {
+  const getQuery = inputsSelectors.timelineQueryByIdSelector();
+  const mapStateToProps = (state: State, { id }: OwnProps) => {
+    const { isInspected } = getQuery(state, id);
+    return {
+      isInspected,
+    };
+  };
+  return mapStateToProps;
+};
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  clearSignalsState: ({ id }: { id?: string }) => {
+    if (id != null && id === SIGNALS_PAGE_TIMELINE_ID) {
+      dispatch(timelineActions.clearEventsLoading({ id }));
+      dispatch(timelineActions.clearEventsDeleted({ id }));
+    }
+  },
+});
+
+const connector = connect(makeMapStateToProps, mapDispatchToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export const TimelineQuery = compose<React.ComponentClass<OwnProps>>(
+  connector,
+  withKibana
+)(TimelineQueryComponent);
diff --git a/x-pack/plugins/siem/public/containers/timeline/notes/persist.gql_query.ts b/x-pack/plugins/siem/public/timelines/containers/notes/persist.gql_query.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/timeline/notes/persist.gql_query.ts
rename to x-pack/plugins/siem/public/timelines/containers/notes/persist.gql_query.ts
diff --git a/x-pack/plugins/siem/public/containers/timeline/one/index.gql_query.ts b/x-pack/plugins/siem/public/timelines/containers/one/index.gql_query.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/timeline/one/index.gql_query.ts
rename to x-pack/plugins/siem/public/timelines/containers/one/index.gql_query.ts
diff --git a/x-pack/plugins/siem/public/containers/timeline/persist.gql_query.ts b/x-pack/plugins/siem/public/timelines/containers/persist.gql_query.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/timeline/persist.gql_query.ts
rename to x-pack/plugins/siem/public/timelines/containers/persist.gql_query.ts
diff --git a/x-pack/plugins/siem/public/containers/timeline/pinned_event/persist.gql_query.ts b/x-pack/plugins/siem/public/timelines/containers/pinned_event/persist.gql_query.ts
similarity index 100%
rename from x-pack/plugins/siem/public/containers/timeline/pinned_event/persist.gql_query.ts
rename to x-pack/plugins/siem/public/timelines/containers/pinned_event/persist.gql_query.ts
diff --git a/x-pack/plugins/siem/public/timelines/index.ts b/x-pack/plugins/siem/public/timelines/index.ts
new file mode 100644
index 00000000000000..5cce258b10d16e
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/index.ts
@@ -0,0 +1,24 @@
+/*
+ * 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 { SecuritySubPluginWithStore } from '../app/types';
+import { getTimelinesRoutes } from './routes';
+import { initialTimelineState, timelineReducer } from './store/timeline/reducer';
+import { TimelineState } from './store/timeline/types';
+
+export class Timelines {
+  public setup() {}
+
+  public start(): SecuritySubPluginWithStore<'timeline', TimelineState> {
+    return {
+      routes: getTimelinesRoutes(),
+      store: {
+        initialState: { timeline: initialTimelineState },
+        reducer: { timeline: timelineReducer },
+      },
+    };
+  }
+}
diff --git a/x-pack/plugins/siem/public/timelines/pages/index.tsx b/x-pack/plugins/siem/public/timelines/pages/index.tsx
new file mode 100644
index 00000000000000..55b4dc16c28410
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/pages/index.tsx
@@ -0,0 +1,71 @@
+/*
+ * 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 { ApolloConsumer } from 'react-apollo';
+import { Switch, Route, Redirect } from 'react-router-dom';
+
+import { ChromeBreadcrumb } from '../../../../../../src/core/public';
+
+import { TimelineType } from '../../../common/types/timeline';
+import { TAB_TIMELINES, TAB_TEMPLATES } from '../components/open_timeline/translations';
+import { getTimelinesUrl } from '../../common/components/link_to';
+import { TimelineRouteSpyState } from '../../common/utils/route/types';
+
+import { SiemPageName } from '../../app/types';
+
+import { TimelinesPage } from './timelines_page';
+import { PAGE_TITLE } from './translations';
+import { appendSearch } from '../../common/components/link_to/helpers';
+const timelinesPagePath = `/:pageName(${SiemPageName.timelines})/:tabName(${TimelineType.default}|${TimelineType.template})`;
+const timelinesDefaultPath = `/${SiemPageName.timelines}/${TimelineType.default}`;
+
+const TabNameMappedToI18nKey: Record<TimelineType, string> = {
+  [TimelineType.default]: TAB_TIMELINES,
+  [TimelineType.template]: TAB_TEMPLATES,
+};
+
+export const getBreadcrumbs = (
+  params: TimelineRouteSpyState,
+  search: string[]
+): ChromeBreadcrumb[] => {
+  let breadcrumb = [
+    {
+      text: PAGE_TITLE,
+      href: `${getTimelinesUrl(appendSearch(search[1]))}`,
+    },
+  ];
+
+  const tabName = params?.tabName;
+  if (!tabName) return breadcrumb;
+
+  breadcrumb = [
+    ...breadcrumb,
+    {
+      text: TabNameMappedToI18nKey[tabName],
+      href: '',
+    },
+  ];
+  return breadcrumb;
+};
+
+export const Timelines = React.memo(() => {
+  return (
+    <Switch>
+      <Route exact path={timelinesPagePath}>
+        <ApolloConsumer>{client => <TimelinesPage apolloClient={client} />}</ApolloConsumer>
+      </Route>
+      <Route
+        path={`/${SiemPageName.timelines}/`}
+        render={({ location: { search = '' } }) => (
+          <Redirect to={`${timelinesDefaultPath}${appendSearch(search)}`} />
+        )}
+      />
+    </Switch>
+  );
+});
+
+Timelines.displayName = 'Timelines';
diff --git a/x-pack/plugins/siem/public/pages/timelines/timelines_page.test.tsx b/x-pack/plugins/siem/public/timelines/pages/timelines_page.test.tsx
similarity index 92%
rename from x-pack/plugins/siem/public/pages/timelines/timelines_page.test.tsx
rename to x-pack/plugins/siem/public/timelines/pages/timelines_page.test.tsx
index ae95a1316a6002..0338163d8b79fb 100644
--- a/x-pack/plugins/siem/public/pages/timelines/timelines_page.test.tsx
+++ b/x-pack/plugins/siem/public/timelines/pages/timelines_page.test.tsx
@@ -4,15 +4,16 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { TimelinesPageComponent } from './timelines_page';
-import { useKibana } from '../../lib/kibana';
+import ApolloClient from 'apollo-client';
 import { shallow, ShallowWrapper } from 'enzyme';
 import React from 'react';
-import ApolloClient from 'apollo-client';
 
-jest.mock('../../pages/overview/events_by_dataset');
+import { useKibana } from '../../common/lib/kibana';
+import { TimelinesPageComponent } from './timelines_page';
+
+jest.mock('../../overview/components/events_by_dataset');
 
-jest.mock('../../lib/kibana', () => {
+jest.mock('../../common/lib/kibana', () => {
   return {
     useKibana: jest.fn(),
   };
@@ -21,7 +22,7 @@ describe('TimelinesPageComponent', () => {
   const mockAppollloClient = {} as ApolloClient<object>;
   let wrapper: ShallowWrapper;
 
-  describe('If the user is authorised', () => {
+  describe('If the user is authorized', () => {
     beforeAll(() => {
       ((useKibana as unknown) as jest.Mock).mockReturnValue({
         services: {
diff --git a/x-pack/plugins/siem/public/pages/timelines/timelines_page.tsx b/x-pack/plugins/siem/public/timelines/pages/timelines_page.tsx
similarity index 85%
rename from x-pack/plugins/siem/public/pages/timelines/timelines_page.tsx
rename to x-pack/plugins/siem/public/timelines/pages/timelines_page.tsx
index 73070d2b94aace..d00aef64204516 100644
--- a/x-pack/plugins/siem/public/pages/timelines/timelines_page.tsx
+++ b/x-pack/plugins/siem/public/timelines/pages/timelines_page.tsx
@@ -4,17 +4,16 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { EuiButton } from '@elastic/eui';
 import ApolloClient from 'apollo-client';
-import React, { useState, useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import styled from 'styled-components';
-
-import { EuiButton } from '@elastic/eui';
-import { HeaderPage } from '../../components/header_page';
-import { StatefulOpenTimeline } from '../../components/open_timeline';
-import { WrapperPage } from '../../components/wrapper_page';
-import { SpyRoute } from '../../utils/route/spy_routes';
+import { HeaderPage } from '../../common/components/header_page';
+import { WrapperPage } from '../../common/components/wrapper_page';
+import { useKibana } from '../../common/lib/kibana';
+import { SpyRoute } from '../../common/utils/route/spy_routes';
+import { StatefulOpenTimeline } from '../components/open_timeline';
 import * as i18n from './translations';
-import { useKibana } from '../../lib/kibana';
 
 const TimelinesContainer = styled.div`
   width: 100%;
diff --git a/x-pack/plugins/siem/public/pages/timelines/translations.ts b/x-pack/plugins/siem/public/timelines/pages/translations.ts
similarity index 100%
rename from x-pack/plugins/siem/public/pages/timelines/translations.ts
rename to x-pack/plugins/siem/public/timelines/pages/translations.ts
diff --git a/x-pack/plugins/siem/public/timelines/routes.tsx b/x-pack/plugins/siem/public/timelines/routes.tsx
new file mode 100644
index 00000000000000..50b8e1b8a71189
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/routes.tsx
@@ -0,0 +1,15 @@
+/*
+ * 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 { Route } from 'react-router-dom';
+
+import { Timelines } from './pages';
+import { SiemPageName } from '../app/types';
+
+export const getTimelinesRoutes = () => [
+  <Route path={`/:pageName(${SiemPageName.timelines})`} render={() => <Timelines />} />,
+];
diff --git a/x-pack/plugins/siem/public/timelines/store/timeline/actions.ts b/x-pack/plugins/siem/public/timelines/store/timeline/actions.ts
new file mode 100644
index 00000000000000..ba62c5b93012d9
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/store/timeline/actions.ts
@@ -0,0 +1,249 @@
+/*
+ * 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 actionCreatorFactory from 'typescript-fsa';
+
+import { Filter } from '../../../../../../../src/plugins/data/public';
+import { Sort } from '../../../timelines/components/timeline/body/sort';
+import {
+  DataProvider,
+  QueryOperator,
+} from '../../../timelines/components/timeline/data_providers/data_provider';
+import { KueryFilterQuery, SerializedFilterQuery } from '../../../common/store/types';
+
+import { EventType, KqlMode, TimelineModel, ColumnHeaderOptions } from './model';
+import { TimelineNonEcsData } from '../../../graphql/types';
+
+const actionCreator = actionCreatorFactory('x-pack/siem/local/timeline');
+
+export const addHistory = actionCreator<{ id: string; historyId: string }>('ADD_HISTORY');
+
+export const addNote = actionCreator<{ id: string; noteId: string }>('ADD_NOTE');
+
+export const addNoteToEvent = actionCreator<{ id: string; noteId: string; eventId: string }>(
+  'ADD_NOTE_TO_EVENT'
+);
+
+export const upsertColumn = actionCreator<{
+  column: ColumnHeaderOptions;
+  id: string;
+  index: number;
+}>('UPSERT_COLUMN');
+
+export const addProvider = actionCreator<{ id: string; provider: DataProvider }>('ADD_PROVIDER');
+
+export const applyDeltaToWidth = actionCreator<{
+  id: string;
+  delta: number;
+  bodyClientWidthPixels: number;
+  minWidthPixels: number;
+  maxWidthPercent: number;
+}>('APPLY_DELTA_TO_WIDTH');
+
+export const applyDeltaToColumnWidth = actionCreator<{
+  id: string;
+  columnId: string;
+  delta: number;
+}>('APPLY_DELTA_TO_COLUMN_WIDTH');
+
+export const createTimeline = actionCreator<{
+  id: string;
+  dataProviders?: DataProvider[];
+  dateRange?: {
+    start: number;
+    end: number;
+  };
+  filters?: Filter[];
+  columns: ColumnHeaderOptions[];
+  itemsPerPage?: number;
+  kqlQuery?: {
+    filterQuery: SerializedFilterQuery | null;
+    filterQueryDraft: KueryFilterQuery | null;
+  };
+  show?: boolean;
+  sort?: Sort;
+  showCheckboxes?: boolean;
+  showRowRenderers?: boolean;
+}>('CREATE_TIMELINE');
+
+export const pinEvent = actionCreator<{ id: string; eventId: string }>('PIN_EVENT');
+
+export const removeColumn = actionCreator<{
+  id: string;
+  columnId: string;
+}>('REMOVE_COLUMN');
+
+export const removeProvider = actionCreator<{
+  id: string;
+  providerId: string;
+  andProviderId?: string;
+}>('REMOVE_PROVIDER');
+
+export const showTimeline = actionCreator<{ id: string; show: boolean }>('SHOW_TIMELINE');
+
+export const unPinEvent = actionCreator<{ id: string; eventId: string }>('UN_PIN_EVENT');
+
+export const updateTimeline = actionCreator<{
+  id: string;
+  timeline: TimelineModel;
+}>('UPDATE_TIMELINE');
+
+export const addTimeline = actionCreator<{
+  id: string;
+  timeline: TimelineModel;
+}>('ADD_TIMELINE');
+
+export const startTimelineSaving = actionCreator<{
+  id: string;
+}>('START_TIMELINE_SAVING');
+
+export const endTimelineSaving = actionCreator<{
+  id: string;
+}>('END_TIMELINE_SAVING');
+
+export const updateIsLoading = actionCreator<{
+  id: string;
+  isLoading: boolean;
+}>('UPDATE_LOADING');
+
+export const updateColumns = actionCreator<{
+  id: string;
+  columns: ColumnHeaderOptions[];
+}>('UPDATE_COLUMNS');
+
+export const updateDataProviderEnabled = actionCreator<{
+  id: string;
+  enabled: boolean;
+  providerId: string;
+  andProviderId?: string;
+}>('TOGGLE_PROVIDER_ENABLED');
+
+export const updateDataProviderExcluded = actionCreator<{
+  id: string;
+  excluded: boolean;
+  providerId: string;
+  andProviderId?: string;
+}>('TOGGLE_PROVIDER_EXCLUDED');
+
+export const dataProviderEdited = actionCreator<{
+  andProviderId?: string;
+  excluded: boolean;
+  field: string;
+  id: string;
+  operator: QueryOperator;
+  providerId: string;
+  value: string | number;
+}>('DATA_PROVIDER_EDITED');
+
+export const updateDataProviderKqlQuery = actionCreator<{
+  id: string;
+  kqlQuery: string;
+  providerId: string;
+}>('PROVIDER_EDIT_KQL_QUERY');
+
+export const updateHighlightedDropAndProviderId = actionCreator<{
+  id: string;
+  providerId: string;
+}>('UPDATE_DROP_AND_PROVIDER');
+
+export const updateDescription = actionCreator<{ id: string; description: string }>(
+  'UPDATE_DESCRIPTION'
+);
+
+export const updateKqlMode = actionCreator<{ id: string; kqlMode: KqlMode }>('UPDATE_KQL_MODE');
+
+export const setKqlFilterQueryDraft = actionCreator<{
+  id: string;
+  filterQueryDraft: KueryFilterQuery;
+}>('SET_KQL_FILTER_QUERY_DRAFT');
+
+export const applyKqlFilterQuery = actionCreator<{
+  id: string;
+  filterQuery: SerializedFilterQuery;
+}>('APPLY_KQL_FILTER_QUERY');
+
+export const updateIsFavorite = actionCreator<{ id: string; isFavorite: boolean }>(
+  'UPDATE_IS_FAVORITE'
+);
+
+export const updateIsLive = actionCreator<{ id: string; isLive: boolean }>('UPDATE_IS_LIVE');
+
+export const updateItemsPerPage = actionCreator<{ id: string; itemsPerPage: number }>(
+  'UPDATE_ITEMS_PER_PAGE'
+);
+
+export const updateItemsPerPageOptions = actionCreator<{
+  id: string;
+  itemsPerPageOptions: number[];
+}>('UPDATE_ITEMS_PER_PAGE_OPTIONS');
+
+export const updateTitle = actionCreator<{ id: string; title: string }>('UPDATE_TITLE');
+
+export const updatePageIndex = actionCreator<{ id: string; activePage: number }>(
+  'UPDATE_PAGE_INDEX'
+);
+
+export const updateProviders = actionCreator<{ id: string; providers: DataProvider[] }>(
+  'UPDATE_PROVIDERS'
+);
+
+export const updateRange = actionCreator<{ id: string; start: number; end: number }>(
+  'UPDATE_RANGE'
+);
+
+export const updateSort = actionCreator<{ id: string; sort: Sort }>('UPDATE_SORT');
+
+export const updateAutoSaveMsg = actionCreator<{
+  timelineId: string | null;
+  newTimelineModel: TimelineModel | null;
+}>('UPDATE_AUTO_SAVE');
+
+export const showCallOutUnauthorizedMsg = actionCreator('SHOW_CALL_OUT_UNAUTHORIZED_MSG');
+
+export const setSavedQueryId = actionCreator<{
+  id: string;
+  savedQueryId: string | null;
+}>('SET_TIMELINE_SAVED_QUERY');
+
+export const setFilters = actionCreator<{
+  id: string;
+  filters: Filter[];
+}>('SET_TIMELINE_FILTERS');
+
+export const setSelected = actionCreator<{
+  id: string;
+  eventIds: Readonly<Record<string, TimelineNonEcsData[]>>;
+  isSelected: boolean;
+  isSelectAllChecked: boolean;
+}>('SET_TIMELINE_SELECTED');
+
+export const clearSelected = actionCreator<{
+  id: string;
+}>('CLEAR_TIMELINE_SELECTED');
+
+export const setEventsLoading = actionCreator<{
+  id: string;
+  eventIds: string[];
+  isLoading: boolean;
+}>('SET_TIMELINE_EVENTS_LOADING');
+
+export const clearEventsLoading = actionCreator<{
+  id: string;
+}>('CLEAR_TIMELINE_EVENTS_LOADING');
+
+export const setEventsDeleted = actionCreator<{
+  id: string;
+  eventIds: string[];
+  isDeleted: boolean;
+}>('SET_TIMELINE_EVENTS_DELETED');
+
+export const clearEventsDeleted = actionCreator<{
+  id: string;
+}>('CLEAR_TIMELINE_EVENTS_DELETED');
+
+export const updateEventType = actionCreator<{ id: string; eventType: EventType }>(
+  'UPDATE_EVENT_TYPE'
+);
diff --git a/x-pack/plugins/siem/public/store/timeline/defaults.ts b/x-pack/plugins/siem/public/timelines/store/timeline/defaults.ts
similarity index 80%
rename from x-pack/plugins/siem/public/store/timeline/defaults.ts
rename to x-pack/plugins/siem/public/timelines/store/timeline/defaults.ts
index 9203720e2e28ce..e0f142bd61d03f 100644
--- a/x-pack/plugins/siem/public/store/timeline/defaults.ts
+++ b/x-pack/plugins/siem/public/timelines/store/timeline/defaults.ts
@@ -4,11 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { TimelineType } from '../../../common/types/timeline';
-
-import { Direction } from '../../graphql/types';
-import { DEFAULT_TIMELINE_WIDTH } from '../../components/timeline/body/constants';
-import { defaultHeaders } from '../../components/timeline/body/column_headers/default_headers';
+import { TimelineType } from '../../../../common/types/timeline';
+import { Direction } from '../../../graphql/types';
+import { DEFAULT_TIMELINE_WIDTH } from '../../../timelines/components/timeline/body/constants';
+import { defaultHeaders } from '../../../timelines/components/timeline/body/column_headers/default_headers';
 import { SubsetTimelineModel, TimelineModel } from './model';
 
 export const timelineDefaults: SubsetTimelineModel & Pick<TimelineModel, 'filters'> = {
diff --git a/x-pack/plugins/siem/public/store/timeline/epic.test.ts b/x-pack/plugins/siem/public/timelines/store/timeline/epic.test.ts
similarity index 97%
rename from x-pack/plugins/siem/public/store/timeline/epic.test.ts
rename to x-pack/plugins/siem/public/timelines/store/timeline/epic.test.ts
index 00aa20e0786009..6bee579206de45 100644
--- a/x-pack/plugins/siem/public/store/timeline/epic.test.ts
+++ b/x-pack/plugins/siem/public/timelines/store/timeline/epic.test.ts
@@ -4,14 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { Filter, esFilters } from '../../../../../../src/plugins/data/public';
-
-import { TimelineType } from '../../../common/types/timeline';
-
-import { Direction } from '../../graphql/types';
-
-import { TimelineModel } from './model';
+import { Filter, esFilters } from '../../../../../../../src/plugins/data/public';
+import { TimelineType } from '../../../../common/types/timeline';
+import { Direction } from '../../../graphql/types';
 import { convertTimelineAsInput } from './epic';
+import { TimelineModel } from './model';
 
 describe('Epic Timeline', () => {
   describe('#convertTimelineAsInput ', () => {
diff --git a/x-pack/plugins/siem/public/timelines/store/timeline/epic.ts b/x-pack/plugins/siem/public/timelines/store/timeline/epic.ts
new file mode 100644
index 00000000000000..7bb890292adf47
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/store/timeline/epic.ts
@@ -0,0 +1,394 @@
+/*
+ * 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 {
+  get,
+  has,
+  merge as mergeObject,
+  set,
+  omit,
+  isObject,
+  toString as fpToString,
+} from 'lodash/fp';
+import { Action } from 'redux';
+import { Epic } from 'redux-observable';
+import { from, Observable, empty, merge } from 'rxjs';
+import {
+  filter,
+  map,
+  startWith,
+  withLatestFrom,
+  debounceTime,
+  mergeMap,
+  concatMap,
+  delay,
+  takeUntil,
+} from 'rxjs/operators';
+
+import { esFilters, Filter, MatchAllFilter } from '../../../../../../../src/plugins/data/public';
+import { TimelineType } from '../../../../common/types/timeline';
+import { TimelineInput, ResponseTimeline, TimelineResult } from '../../../graphql/types';
+import { AppApolloClient } from '../../../common/lib/lib';
+import { addError } from '../../../common/store/app/actions';
+import { NotesById } from '../../../common/store/app/model';
+import { inputsModel } from '../../../common/store/inputs';
+
+import {
+  applyKqlFilterQuery,
+  addProvider,
+  dataProviderEdited,
+  removeColumn,
+  removeProvider,
+  updateColumns,
+  updateEventType,
+  updateDataProviderEnabled,
+  updateDataProviderExcluded,
+  updateDataProviderKqlQuery,
+  updateDescription,
+  updateKqlMode,
+  updateProviders,
+  updateRange,
+  updateSort,
+  upsertColumn,
+  updateTimeline,
+  updateTitle,
+  updateAutoSaveMsg,
+  setFilters,
+  setSavedQueryId,
+  startTimelineSaving,
+  endTimelineSaving,
+  createTimeline,
+  addTimeline,
+  showCallOutUnauthorizedMsg,
+} from './actions';
+import { ColumnHeaderOptions, TimelineModel } from './model';
+import { epicPersistNote, timelineNoteActionsType } from './epic_note';
+import { epicPersistPinnedEvent, timelinePinnedEventActionsType } from './epic_pinned_event';
+import { epicPersistTimelineFavorite, timelineFavoriteActionsType } from './epic_favorite';
+import { isNotNull } from './helpers';
+import { dispatcherTimelinePersistQueue } from './epic_dispatcher_timeline_persistence_queue';
+import { myEpicTimelineId } from './my_epic_timeline_id';
+import { ActionTimeline, TimelineById } from './types';
+import { persistTimeline } from '../../containers/api';
+import { ALL_TIMELINE_QUERY_ID } from '../../containers/all';
+
+interface TimelineEpicDependencies<State> {
+  timelineByIdSelector: (state: State) => TimelineById;
+  timelineTimeRangeSelector: (state: State) => inputsModel.TimeRange;
+  selectAllTimelineQuery: () => (state: State, id: string) => inputsModel.GlobalQuery;
+  selectNotesByIdSelector: (state: State) => NotesById;
+  apolloClient$: Observable<AppApolloClient>;
+}
+
+const timelineActionsType = [
+  applyKqlFilterQuery.type,
+  addProvider.type,
+  dataProviderEdited.type,
+  removeColumn.type,
+  removeProvider.type,
+  setFilters.type,
+  setSavedQueryId.type,
+  updateColumns.type,
+  updateDataProviderEnabled.type,
+  updateDataProviderExcluded.type,
+  updateDataProviderKqlQuery.type,
+  updateDescription.type,
+  updateEventType.type,
+  updateKqlMode.type,
+  updateProviders.type,
+  updateSort.type,
+  updateTitle.type,
+  updateRange.type,
+  upsertColumn.type,
+];
+
+const isItAtimelineAction = (timelineId: string | undefined) =>
+  timelineId && timelineId.toLowerCase().startsWith('timeline');
+
+export const createTimelineEpic = <State>(): Epic<
+  Action,
+  Action,
+  State,
+  TimelineEpicDependencies<State>
+> => (
+  action$,
+  state$,
+  {
+    selectAllTimelineQuery,
+    selectNotesByIdSelector,
+    timelineByIdSelector,
+    timelineTimeRangeSelector,
+    apolloClient$,
+  }
+) => {
+  const timeline$ = state$.pipe(map(timelineByIdSelector), filter(isNotNull));
+
+  const allTimelineQuery$ = state$.pipe(
+    map(state => {
+      const getQuery = selectAllTimelineQuery();
+      return getQuery(state, ALL_TIMELINE_QUERY_ID);
+    }),
+    filter(isNotNull)
+  );
+
+  const notes$ = state$.pipe(map(selectNotesByIdSelector), filter(isNotNull));
+
+  const timelineTimeRange$ = state$.pipe(map(timelineTimeRangeSelector), filter(isNotNull));
+
+  return merge(
+    action$.pipe(
+      withLatestFrom(timeline$),
+      filter(([action, timeline]) => {
+        const timelineId: string = get('payload.id', action);
+        const timelineObj: TimelineModel = timeline[timelineId];
+        if (action.type === addError.type) {
+          return true;
+        }
+        if (action.type === createTimeline.type && isItAtimelineAction(timelineId)) {
+          myEpicTimelineId.setTimelineId(null);
+          myEpicTimelineId.setTimelineVersion(null);
+        } else if (action.type === addTimeline.type && isItAtimelineAction(timelineId)) {
+          const addNewTimeline: TimelineModel = get('payload.timeline', action);
+          myEpicTimelineId.setTimelineId(addNewTimeline.savedObjectId);
+          myEpicTimelineId.setTimelineVersion(addNewTimeline.version);
+          return true;
+        } else if (
+          timelineActionsType.includes(action.type) &&
+          !timelineObj.isLoading &&
+          isItAtimelineAction(timelineId)
+        ) {
+          return true;
+        }
+        return false;
+      }),
+      debounceTime(500),
+      mergeMap(([action]) => {
+        dispatcherTimelinePersistQueue.next({ action });
+        return empty();
+      })
+    ),
+    dispatcherTimelinePersistQueue.pipe(
+      delay(500),
+      withLatestFrom(timeline$, apolloClient$, notes$, timelineTimeRange$),
+      concatMap(([objAction, timeline, apolloClient, notes, timelineTimeRange]) => {
+        const action: ActionTimeline = get('action', objAction);
+        const timelineId = myEpicTimelineId.getTimelineId();
+        const version = myEpicTimelineId.getTimelineVersion();
+
+        if (timelineNoteActionsType.includes(action.type)) {
+          return epicPersistNote(
+            apolloClient,
+            action,
+            timeline,
+            notes,
+            action$,
+            timeline$,
+            notes$,
+            allTimelineQuery$
+          );
+        } else if (timelinePinnedEventActionsType.includes(action.type)) {
+          return epicPersistPinnedEvent(
+            apolloClient,
+            action,
+            timeline,
+            action$,
+            timeline$,
+            allTimelineQuery$
+          );
+        } else if (timelineFavoriteActionsType.includes(action.type)) {
+          return epicPersistTimelineFavorite(
+            apolloClient,
+            action,
+            timeline,
+            action$,
+            timeline$,
+            allTimelineQuery$
+          );
+        } else if (timelineActionsType.includes(action.type)) {
+          return from(
+            persistTimeline({
+              timelineId,
+              version,
+              timeline: convertTimelineAsInput(timeline[action.payload.id], timelineTimeRange),
+            })
+          ).pipe(
+            withLatestFrom(timeline$, allTimelineQuery$),
+            mergeMap(([result, recentTimeline, allTimelineQuery]) => {
+              const savedTimeline = recentTimeline[action.payload.id];
+              const response: ResponseTimeline = get('data.persistTimeline', result);
+              const callOutMsg = response.code === 403 ? [showCallOutUnauthorizedMsg()] : [];
+
+              if (allTimelineQuery.refetch != null) {
+                (allTimelineQuery.refetch as inputsModel.Refetch)();
+              }
+
+              return [
+                response.code === 409
+                  ? updateAutoSaveMsg({
+                      timelineId: action.payload.id,
+                      newTimelineModel: omitTypenameInTimeline(savedTimeline, response.timeline),
+                    })
+                  : updateTimeline({
+                      id: action.payload.id,
+                      timeline: {
+                        ...savedTimeline,
+                        savedObjectId: response.timeline.savedObjectId,
+                        version: response.timeline.version,
+                        timelineType: response.timeline.timelineType ?? TimelineType.default,
+                        templateTimelineId: response.timeline.templateTimelineId ?? null,
+                        templateTimelineVersion: response.timeline.templateTimelineVersion ?? null,
+                        isSaving: false,
+                      },
+                    }),
+                ...callOutMsg,
+                endTimelineSaving({
+                  id: action.payload.id,
+                }),
+              ];
+            }),
+            startWith(startTimelineSaving({ id: action.payload.id })),
+            takeUntil(
+              action$.pipe(
+                withLatestFrom(timeline$),
+                filter(([checkAction, updatedTimeline]) => {
+                  if (
+                    checkAction.type === endTimelineSaving.type &&
+                    updatedTimeline[get('payload.id', checkAction)].savedObjectId != null
+                  ) {
+                    myEpicTimelineId.setTimelineId(
+                      updatedTimeline[get('payload.id', checkAction)].savedObjectId
+                    );
+                    myEpicTimelineId.setTimelineVersion(
+                      updatedTimeline[get('payload.id', checkAction)].version
+                    );
+                    return true;
+                  }
+                  return false;
+                })
+              )
+            )
+          );
+        }
+        return empty();
+      })
+    )
+  );
+};
+
+const timelineInput: TimelineInput = {
+  columns: null,
+  dataProviders: null,
+  description: null,
+  eventType: null,
+  filters: null,
+  kqlMode: null,
+  kqlQuery: null,
+  title: null,
+  timelineType: TimelineType.default,
+  templateTimelineVersion: null,
+  templateTimelineId: null,
+  dateRange: null,
+  savedQueryId: null,
+  sort: null,
+};
+
+export const convertTimelineAsInput = (
+  timeline: TimelineModel,
+  timelineTimeRange: inputsModel.TimeRange
+): TimelineInput =>
+  Object.keys(timelineInput).reduce<TimelineInput>((acc, key) => {
+    if (has(key, timeline)) {
+      if (key === 'kqlQuery') {
+        return set(`${key}.filterQuery`, get(`${key}.filterQuery`, timeline), acc);
+      } else if (key === 'dateRange') {
+        return set(`${key}`, { start: timelineTimeRange.from, end: timelineTimeRange.to }, acc);
+      } else if (key === 'columns' && get(key, timeline) != null) {
+        return set(
+          key,
+          get(key, timeline).map((col: ColumnHeaderOptions) => omit(['width', '__typename'], col)),
+          acc
+        );
+      } else if (key === 'filters' && get(key, timeline) != null) {
+        const filters = get(key, timeline);
+        return set(
+          key,
+          filters != null
+            ? filters.map((myFilter: Filter) => {
+                const basicFilter = omit(['$state'], myFilter);
+                return {
+                  ...basicFilter,
+                  meta: {
+                    ...basicFilter.meta,
+                    field:
+                      (esFilters.isMatchAllFilter(basicFilter) ||
+                        esFilters.isPhraseFilter(basicFilter) ||
+                        esFilters.isPhrasesFilter(basicFilter) ||
+                        esFilters.isRangeFilter(basicFilter)) &&
+                      basicFilter.meta.field != null
+                        ? convertToString(basicFilter.meta.field)
+                        : null,
+                    value:
+                      basicFilter.meta.value != null
+                        ? convertToString(basicFilter.meta.value)
+                        : null,
+                    params:
+                      basicFilter.meta.params != null
+                        ? convertToString(basicFilter.meta.params)
+                        : null,
+                  },
+                  ...(esFilters.isMatchAllFilter(basicFilter)
+                    ? {
+                        match_all: convertToString((basicFilter as MatchAllFilter).match_all),
+                      }
+                    : { match_all: null }),
+                  ...(esFilters.isMissingFilter(basicFilter) && basicFilter.missing != null
+                    ? { missing: convertToString(basicFilter.missing) }
+                    : { missing: null }),
+                  ...(esFilters.isExistsFilter(basicFilter) && basicFilter.exists != null
+                    ? { exists: convertToString(basicFilter.exists) }
+                    : { exists: null }),
+                  ...((esFilters.isQueryStringFilter(basicFilter) ||
+                    get('query', basicFilter) != null) &&
+                  basicFilter.query != null
+                    ? { query: convertToString(basicFilter.query) }
+                    : { query: null }),
+                  ...(esFilters.isRangeFilter(basicFilter) && basicFilter.range != null
+                    ? { range: convertToString(basicFilter.range) }
+                    : { range: null }),
+                  ...(esFilters.isRangeFilter(basicFilter) &&
+                  basicFilter.script !=
+                    null /* TODO remove it when PR50713 is merged || esFilters.isPhraseFilter(basicFilter) */
+                    ? { script: convertToString(basicFilter.script) }
+                    : { script: null }),
+                };
+              })
+            : [],
+          acc
+        );
+      }
+      return set(key, get(key, timeline), acc);
+    }
+    return acc;
+  }, timelineInput);
+
+const omitTypename = (key: string, value: keyof TimelineModel) =>
+  key === '__typename' ? undefined : value;
+
+const omitTypenameInTimeline = (
+  oldTimeline: TimelineModel,
+  newTimeline: TimelineResult
+): TimelineModel => JSON.parse(JSON.stringify(mergeObject(oldTimeline, newTimeline)), omitTypename);
+
+const convertToString = (obj: unknown) => {
+  try {
+    if (isObject(obj)) {
+      return JSON.stringify(obj);
+    }
+    return fpToString(obj);
+  } catch {
+    return '';
+  }
+};
diff --git a/x-pack/plugins/siem/public/store/timeline/epic_dispatcher_timeline_persistence_queue.ts b/x-pack/plugins/siem/public/timelines/store/timeline/epic_dispatcher_timeline_persistence_queue.ts
similarity index 100%
rename from x-pack/plugins/siem/public/store/timeline/epic_dispatcher_timeline_persistence_queue.ts
rename to x-pack/plugins/siem/public/timelines/store/timeline/epic_dispatcher_timeline_persistence_queue.ts
diff --git a/x-pack/plugins/siem/public/store/timeline/epic_favorite.ts b/x-pack/plugins/siem/public/timelines/store/timeline/epic_favorite.ts
similarity index 95%
rename from x-pack/plugins/siem/public/store/timeline/epic_favorite.ts
rename to x-pack/plugins/siem/public/timelines/store/timeline/epic_favorite.ts
index 6a1dadb8a59f59..0fd8e983085f7f 100644
--- a/x-pack/plugins/siem/public/store/timeline/epic_favorite.ts
+++ b/x-pack/plugins/siem/public/timelines/store/timeline/epic_favorite.ts
@@ -12,9 +12,9 @@ import { Epic } from 'redux-observable';
 import { from, Observable, empty } from 'rxjs';
 import { filter, mergeMap, withLatestFrom, startWith, takeUntil } from 'rxjs/operators';
 
-import { persistTimelineFavoriteMutation } from '../../containers/timeline/favorite/persist.gql_query';
-import { PersistTimelineFavoriteMutation, ResponseFavoriteTimeline } from '../../graphql/types';
-import { addError } from '../app/actions';
+import { persistTimelineFavoriteMutation } from '../../containers/favorite/persist.gql_query';
+import { PersistTimelineFavoriteMutation, ResponseFavoriteTimeline } from '../../../graphql/types';
+import { addError } from '../../../common/store/app/actions';
 import {
   endTimelineSaving,
   updateIsFavorite,
@@ -26,7 +26,7 @@ import { dispatcherTimelinePersistQueue } from './epic_dispatcher_timeline_persi
 import { refetchQueries } from './refetch_queries';
 import { myEpicTimelineId } from './my_epic_timeline_id';
 import { ActionTimeline, TimelineById } from './types';
-import { inputsModel } from '../inputs';
+import { inputsModel } from '../../../common/store/inputs';
 
 export const timelineFavoriteActionsType = [updateIsFavorite.type];
 
diff --git a/x-pack/plugins/siem/public/store/timeline/epic_note.ts b/x-pack/plugins/siem/public/timelines/store/timeline/epic_note.ts
similarity index 93%
rename from x-pack/plugins/siem/public/store/timeline/epic_note.ts
rename to x-pack/plugins/siem/public/timelines/store/timeline/epic_note.ts
index 3722a6ad8036ca..30b2566de1468f 100644
--- a/x-pack/plugins/siem/public/store/timeline/epic_note.ts
+++ b/x-pack/plugins/siem/public/timelines/store/timeline/epic_note.ts
@@ -12,11 +12,11 @@ import { Epic } from 'redux-observable';
 import { from, empty, Observable } from 'rxjs';
 import { filter, mergeMap, switchMap, withLatestFrom, startWith, takeUntil } from 'rxjs/operators';
 
-import { persistTimelineNoteMutation } from '../../containers/timeline/notes/persist.gql_query';
-import { PersistTimelineNoteMutation, ResponseNote } from '../../graphql/types';
-import { updateNote, addError } from '../app/actions';
-import { NotesById } from '../app/model';
-import { inputsModel } from '../inputs';
+import { persistTimelineNoteMutation } from '../../../timelines/containers/notes/persist.gql_query';
+import { PersistTimelineNoteMutation, ResponseNote } from '../../../graphql/types';
+import { updateNote, addError } from '../../../common/store/app/actions';
+import { NotesById } from '../../../common/store/app/model';
+import { inputsModel } from '../../../common/store/inputs';
 
 import {
   addNote,
diff --git a/x-pack/plugins/siem/public/store/timeline/epic_pinned_event.ts b/x-pack/plugins/siem/public/timelines/store/timeline/epic_pinned_event.ts
similarity index 95%
rename from x-pack/plugins/siem/public/store/timeline/epic_pinned_event.ts
rename to x-pack/plugins/siem/public/timelines/store/timeline/epic_pinned_event.ts
index a1281250ba72af..88c080bb78ccab 100644
--- a/x-pack/plugins/siem/public/store/timeline/epic_pinned_event.ts
+++ b/x-pack/plugins/siem/public/timelines/store/timeline/epic_pinned_event.ts
@@ -12,10 +12,10 @@ import { Epic } from 'redux-observable';
 import { from, Observable, empty } from 'rxjs';
 import { filter, mergeMap, startWith, withLatestFrom, takeUntil } from 'rxjs/operators';
 
-import { persistTimelinePinnedEventMutation } from '../../containers/timeline/pinned_event/persist.gql_query';
-import { PersistTimelinePinnedEventMutation, PinnedEvent } from '../../graphql/types';
-import { addError } from '../app/actions';
-import { inputsModel } from '../inputs';
+import { persistTimelinePinnedEventMutation } from '../../../timelines/containers/pinned_event/persist.gql_query';
+import { PersistTimelinePinnedEventMutation, PinnedEvent } from '../../../graphql/types';
+import { addError } from '../../../common/store/app/actions';
+import { inputsModel } from '../../../common/store/inputs';
 
 import {
   pinEvent,
diff --git a/x-pack/plugins/siem/public/timelines/store/timeline/helpers.ts b/x-pack/plugins/siem/public/timelines/store/timeline/helpers.ts
new file mode 100644
index 00000000000000..a8821779169c70
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/store/timeline/helpers.ts
@@ -0,0 +1,1324 @@
+/*
+ * 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 { getOr, omit, uniq, isEmpty, isEqualWith, union } from 'lodash/fp';
+
+import { Filter } from '../../../../../../../src/plugins/data/public';
+import { getColumnWidthFromType } from '../../../timelines/components/timeline/body/column_headers/helpers';
+import { Sort } from '../../../timelines/components/timeline/body/sort';
+import {
+  DataProvider,
+  QueryOperator,
+  QueryMatch,
+} from '../../../timelines/components/timeline/data_providers/data_provider';
+import { KueryFilterQuery, SerializedFilterQuery } from '../../../common/store/model';
+
+import { timelineDefaults } from './defaults';
+import { ColumnHeaderOptions, KqlMode, TimelineModel, EventType } from './model';
+import { TimelineById, TimelineState } from './types';
+import { TimelineNonEcsData } from '../../../graphql/types';
+
+const EMPTY_TIMELINE_BY_ID: TimelineById = {}; // stable reference
+
+export const isNotNull = <T>(value: T | null): value is T => value !== null;
+
+export const initialTimelineState: TimelineState = {
+  timelineById: EMPTY_TIMELINE_BY_ID,
+  autoSavedWarningMsg: {
+    timelineId: null,
+    newTimelineModel: null,
+  },
+  showCallOutUnauthorizedMsg: false,
+};
+
+interface AddTimelineHistoryParams {
+  id: string;
+  historyId: string;
+  timelineById: TimelineById;
+}
+
+export const addTimelineHistory = ({
+  id,
+  historyId,
+  timelineById,
+}: AddTimelineHistoryParams): TimelineById => {
+  const timeline = timelineById[id];
+
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      historyIds: uniq([...timeline.historyIds, historyId]),
+    },
+  };
+};
+
+interface AddTimelineNoteParams {
+  id: string;
+  noteId: string;
+  timelineById: TimelineById;
+}
+
+export const addTimelineNote = ({
+  id,
+  noteId,
+  timelineById,
+}: AddTimelineNoteParams): TimelineById => {
+  const timeline = timelineById[id];
+
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      noteIds: [...timeline.noteIds, noteId],
+    },
+  };
+};
+
+interface AddTimelineNoteToEventParams {
+  id: string;
+  noteId: string;
+  eventId: string;
+  timelineById: TimelineById;
+}
+
+export const addTimelineNoteToEvent = ({
+  id,
+  noteId,
+  eventId,
+  timelineById,
+}: AddTimelineNoteToEventParams): TimelineById => {
+  const timeline = timelineById[id];
+  const existingNoteIds = getOr([], `eventIdToNoteIds.${eventId}`, timeline);
+
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      eventIdToNoteIds: {
+        ...timeline.eventIdToNoteIds,
+        ...{ [eventId]: uniq([...existingNoteIds, noteId]) },
+      },
+    },
+  };
+};
+
+interface AddTimelineParams {
+  id: string;
+  timeline: TimelineModel;
+  timelineById: TimelineById;
+}
+
+/**
+ * Add a saved object timeline to the store
+ * and default the value to what need to be if values are null
+ */
+export const addTimelineToStore = ({
+  id,
+  timeline,
+  timelineById,
+}: AddTimelineParams): TimelineById => ({
+  ...timelineById,
+  [id]: {
+    ...timeline,
+    isLoading: timelineById[id].isLoading,
+  },
+});
+
+interface AddNewTimelineParams {
+  columns: ColumnHeaderOptions[];
+  dataProviders?: DataProvider[];
+  dateRange?: {
+    start: number;
+    end: number;
+  };
+  filters?: Filter[];
+  id: string;
+  itemsPerPage?: number;
+  kqlQuery?: {
+    filterQuery: SerializedFilterQuery | null;
+    filterQueryDraft: KueryFilterQuery | null;
+  };
+  show?: boolean;
+  sort?: Sort;
+  showCheckboxes?: boolean;
+  showRowRenderers?: boolean;
+  timelineById: TimelineById;
+}
+
+/** Adds a new `Timeline` to the provided collection of `TimelineById` */
+export const addNewTimeline = ({
+  columns,
+  dataProviders = [],
+  dateRange = { start: 0, end: 0 },
+  filters = timelineDefaults.filters,
+  id,
+  itemsPerPage = timelineDefaults.itemsPerPage,
+  kqlQuery = { filterQuery: null, filterQueryDraft: null },
+  sort = timelineDefaults.sort,
+  show = false,
+  showCheckboxes = false,
+  showRowRenderers = true,
+  timelineById,
+}: AddNewTimelineParams): TimelineById => ({
+  ...timelineById,
+  [id]: {
+    id,
+    ...timelineDefaults,
+    columns,
+    dataProviders,
+    dateRange,
+    filters,
+    itemsPerPage,
+    kqlQuery,
+    sort,
+    show,
+    savedObjectId: null,
+    version: null,
+    isSaving: false,
+    isLoading: false,
+    showCheckboxes,
+    showRowRenderers,
+  },
+});
+
+interface PinTimelineEventParams {
+  id: string;
+  eventId: string;
+  timelineById: TimelineById;
+}
+
+export const pinTimelineEvent = ({
+  id,
+  eventId,
+  timelineById,
+}: PinTimelineEventParams): TimelineById => {
+  const timeline = timelineById[id];
+
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      pinnedEventIds: {
+        ...timeline.pinnedEventIds,
+        ...{ [eventId]: true },
+      },
+    },
+  };
+};
+
+interface UpdateShowTimelineProps {
+  id: string;
+  show: boolean;
+  timelineById: TimelineById;
+}
+
+export const updateTimelineShowTimeline = ({
+  id,
+  show,
+  timelineById,
+}: UpdateShowTimelineProps): TimelineById => {
+  const timeline = timelineById[id];
+
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      show,
+    },
+  };
+};
+
+interface ApplyDeltaToCurrentWidthParams {
+  id: string;
+  delta: number;
+  bodyClientWidthPixels: number;
+  minWidthPixels: number;
+  maxWidthPercent: number;
+  timelineById: TimelineById;
+}
+
+export const applyDeltaToCurrentWidth = ({
+  id,
+  delta,
+  bodyClientWidthPixels,
+  minWidthPixels,
+  maxWidthPercent,
+  timelineById,
+}: ApplyDeltaToCurrentWidthParams): TimelineById => {
+  const timeline = timelineById[id];
+
+  const requestedWidth = timeline.width + delta * -1; // raw change in width
+  const maxWidthPixels = (maxWidthPercent / 100) * bodyClientWidthPixels;
+  const clampedWidth = Math.min(requestedWidth, maxWidthPixels);
+  const width = Math.max(minWidthPixels, clampedWidth); // if the clamped width is smaller than the min, use the min
+
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      width,
+    },
+  };
+};
+
+const queryMatchCustomizer = (dp1: QueryMatch, dp2: QueryMatch) => {
+  if (dp1.field === dp2.field && dp1.value === dp2.value && dp1.operator === dp2.operator) {
+    return true;
+  }
+  return false;
+};
+
+const addAndToProviderInTimeline = (
+  id: string,
+  provider: DataProvider,
+  timeline: TimelineModel,
+  timelineById: TimelineById
+): TimelineById => {
+  const alreadyExistsProviderIndex = timeline.dataProviders.findIndex(
+    p => p.id === timeline.highlightedDropAndProviderId
+  );
+  const newProvider = timeline.dataProviders[alreadyExistsProviderIndex];
+  const alreadyExistsAndProviderIndex = newProvider.and.findIndex(p => p.id === provider.id);
+  const { and, ...andProvider } = provider;
+
+  if (
+    isEqualWith(queryMatchCustomizer, newProvider.queryMatch, andProvider.queryMatch) ||
+    (alreadyExistsAndProviderIndex === -1 &&
+      newProvider.and.filter(itemAndProvider =>
+        isEqualWith(queryMatchCustomizer, itemAndProvider.queryMatch, andProvider.queryMatch)
+      ).length > 0)
+  ) {
+    return timelineById;
+  }
+
+  const dataProviders = [
+    ...timeline.dataProviders.slice(0, alreadyExistsProviderIndex),
+    {
+      ...timeline.dataProviders[alreadyExistsProviderIndex],
+      and:
+        alreadyExistsAndProviderIndex > -1
+          ? [
+              ...newProvider.and.slice(0, alreadyExistsAndProviderIndex),
+              andProvider,
+              ...newProvider.and.slice(alreadyExistsAndProviderIndex + 1),
+            ]
+          : [...newProvider.and, andProvider],
+    },
+    ...timeline.dataProviders.slice(alreadyExistsProviderIndex + 1),
+  ];
+
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      dataProviders,
+    },
+  };
+};
+
+const addProviderToTimeline = (
+  id: string,
+  provider: DataProvider,
+  timeline: TimelineModel,
+  timelineById: TimelineById
+): TimelineById => {
+  const alreadyExistsAtIndex = timeline.dataProviders.findIndex(p => p.id === provider.id);
+
+  if (alreadyExistsAtIndex > -1 && !isEmpty(timeline.dataProviders[alreadyExistsAtIndex].and)) {
+    provider.id = `${provider.id}-${
+      timeline.dataProviders.filter(p => p.id === provider.id).length
+    }`;
+  }
+
+  const dataProviders =
+    alreadyExistsAtIndex > -1 && isEmpty(timeline.dataProviders[alreadyExistsAtIndex].and)
+      ? [
+          ...timeline.dataProviders.slice(0, alreadyExistsAtIndex),
+          provider,
+          ...timeline.dataProviders.slice(alreadyExistsAtIndex + 1),
+        ]
+      : [...timeline.dataProviders, provider];
+
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      dataProviders,
+    },
+  };
+};
+
+interface AddTimelineColumnParams {
+  column: ColumnHeaderOptions;
+  id: string;
+  index: number;
+  timelineById: TimelineById;
+}
+
+/**
+ * Adds or updates a column. When updating a column, it will be moved to the
+ * new index
+ */
+export const upsertTimelineColumn = ({
+  column,
+  id,
+  index,
+  timelineById,
+}: AddTimelineColumnParams): TimelineById => {
+  const timeline = timelineById[id];
+  const alreadyExistsAtIndex = timeline.columns.findIndex(c => c.id === column.id);
+
+  if (alreadyExistsAtIndex !== -1) {
+    // remove the existing entry and add the new one at the specified index
+    const reordered = timeline.columns.filter(c => c.id !== column.id);
+    reordered.splice(index, 0, column); // ⚠️ mutation
+
+    return {
+      ...timelineById,
+      [id]: {
+        ...timeline,
+        columns: reordered,
+      },
+    };
+  }
+
+  // add the new entry at the specified index
+  const columns = [...timeline.columns];
+  columns.splice(index, 0, column); // ⚠️ mutation
+
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      columns,
+    },
+  };
+};
+
+interface RemoveTimelineColumnParams {
+  id: string;
+  columnId: string;
+  timelineById: TimelineById;
+}
+
+export const removeTimelineColumn = ({
+  id,
+  columnId,
+  timelineById,
+}: RemoveTimelineColumnParams): TimelineById => {
+  const timeline = timelineById[id];
+
+  const columns = timeline.columns.filter(c => c.id !== columnId);
+
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      columns,
+    },
+  };
+};
+
+interface ApplyDeltaToTimelineColumnWidth {
+  id: string;
+  columnId: string;
+  delta: number;
+  timelineById: TimelineById;
+}
+
+export const applyDeltaToTimelineColumnWidth = ({
+  id,
+  columnId,
+  delta,
+  timelineById,
+}: ApplyDeltaToTimelineColumnWidth): TimelineById => {
+  const timeline = timelineById[id];
+
+  const columnIndex = timeline.columns.findIndex(c => c.id === columnId);
+  if (columnIndex === -1) {
+    // the column was not found
+    return {
+      ...timelineById,
+      [id]: {
+        ...timeline,
+      },
+    };
+  }
+  const minWidthPixels = getColumnWidthFromType(timeline.columns[columnIndex].type!);
+  const requestedWidth = timeline.columns[columnIndex].width + delta; // raw change in width
+  const width = Math.max(minWidthPixels, requestedWidth); // if the requested width is smaller than the min, use the min
+
+  const columnWithNewWidth = {
+    ...timeline.columns[columnIndex],
+    width,
+  };
+
+  const columns = [
+    ...timeline.columns.slice(0, columnIndex),
+    columnWithNewWidth,
+    ...timeline.columns.slice(columnIndex + 1),
+  ];
+
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      columns,
+    },
+  };
+};
+
+interface AddTimelineProviderParams {
+  id: string;
+  provider: DataProvider;
+  timelineById: TimelineById;
+}
+
+export const addTimelineProvider = ({
+  id,
+  provider,
+  timelineById,
+}: AddTimelineProviderParams): TimelineById => {
+  const timeline = timelineById[id];
+
+  if (timeline.highlightedDropAndProviderId !== '') {
+    return addAndToProviderInTimeline(id, provider, timeline, timelineById);
+  } else {
+    return addProviderToTimeline(id, provider, timeline, timelineById);
+  }
+};
+
+interface ApplyKqlFilterQueryDraftParams {
+  id: string;
+  filterQuery: SerializedFilterQuery;
+  timelineById: TimelineById;
+}
+
+export const applyKqlFilterQueryDraft = ({
+  id,
+  filterQuery,
+  timelineById,
+}: ApplyKqlFilterQueryDraftParams): TimelineById => {
+  const timeline = timelineById[id];
+
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      kqlQuery: {
+        ...timeline.kqlQuery,
+        filterQuery,
+      },
+    },
+  };
+};
+
+interface UpdateTimelineKqlModeParams {
+  id: string;
+  kqlMode: KqlMode;
+  timelineById: TimelineById;
+}
+
+export const updateTimelineKqlMode = ({
+  id,
+  kqlMode,
+  timelineById,
+}: UpdateTimelineKqlModeParams): TimelineById => {
+  const timeline = timelineById[id];
+
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      kqlMode,
+    },
+  };
+};
+
+interface UpdateKqlFilterQueryDraftParams {
+  id: string;
+  filterQueryDraft: KueryFilterQuery;
+  timelineById: TimelineById;
+}
+
+export const updateKqlFilterQueryDraft = ({
+  id,
+  filterQueryDraft,
+  timelineById,
+}: UpdateKqlFilterQueryDraftParams): TimelineById => {
+  const timeline = timelineById[id];
+
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      kqlQuery: {
+        ...timeline.kqlQuery,
+        filterQueryDraft,
+      },
+    },
+  };
+};
+
+interface UpdateTimelineColumnsParams {
+  id: string;
+  columns: ColumnHeaderOptions[];
+  timelineById: TimelineById;
+}
+
+export const updateTimelineColumns = ({
+  id,
+  columns,
+  timelineById,
+}: UpdateTimelineColumnsParams): TimelineById => {
+  const timeline = timelineById[id];
+
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      columns,
+    },
+  };
+};
+
+interface UpdateTimelineDescriptionParams {
+  id: string;
+  description: string;
+  timelineById: TimelineById;
+}
+
+export const updateTimelineDescription = ({
+  id,
+  description,
+  timelineById,
+}: UpdateTimelineDescriptionParams): TimelineById => {
+  const timeline = timelineById[id];
+
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      description: description.endsWith(' ') ? `${description.trim()} ` : description.trim(),
+    },
+  };
+};
+
+interface UpdateTimelineTitleParams {
+  id: string;
+  title: string;
+  timelineById: TimelineById;
+}
+
+export const updateTimelineTitle = ({
+  id,
+  title,
+  timelineById,
+}: UpdateTimelineTitleParams): TimelineById => {
+  const timeline = timelineById[id];
+
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      title: title.endsWith(' ') ? `${title.trim()} ` : title.trim(),
+    },
+  };
+};
+
+interface UpdateTimelineEventTypeParams {
+  id: string;
+  eventType: EventType;
+  timelineById: TimelineById;
+}
+
+export const updateTimelineEventType = ({
+  id,
+  eventType,
+  timelineById,
+}: UpdateTimelineEventTypeParams): TimelineById => {
+  const timeline = timelineById[id];
+
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      eventType,
+    },
+  };
+};
+
+interface UpdateTimelineIsFavoriteParams {
+  id: string;
+  isFavorite: boolean;
+  timelineById: TimelineById;
+}
+
+export const updateTimelineIsFavorite = ({
+  id,
+  isFavorite,
+  timelineById,
+}: UpdateTimelineIsFavoriteParams): TimelineById => {
+  const timeline = timelineById[id];
+
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      isFavorite,
+    },
+  };
+};
+
+interface UpdateTimelineIsLiveParams {
+  id: string;
+  isLive: boolean;
+  timelineById: TimelineById;
+}
+
+export const updateTimelineIsLive = ({
+  id,
+  isLive,
+  timelineById,
+}: UpdateTimelineIsLiveParams): TimelineById => {
+  const timeline = timelineById[id];
+
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      isLive,
+    },
+  };
+};
+
+interface UpdateTimelineProvidersParams {
+  id: string;
+  providers: DataProvider[];
+  timelineById: TimelineById;
+}
+
+export const updateTimelineProviders = ({
+  id,
+  providers,
+  timelineById,
+}: UpdateTimelineProvidersParams): TimelineById => {
+  const timeline = timelineById[id];
+
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      dataProviders: providers,
+    },
+  };
+};
+
+interface UpdateTimelineRangeParams {
+  id: string;
+  start: number;
+  end: number;
+  timelineById: TimelineById;
+}
+
+export const updateTimelineRange = ({
+  id,
+  start,
+  end,
+  timelineById,
+}: UpdateTimelineRangeParams): TimelineById => {
+  const timeline = timelineById[id];
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      dateRange: {
+        start,
+        end,
+      },
+    },
+  };
+};
+
+interface UpdateTimelineSortParams {
+  id: string;
+  sort: Sort;
+  timelineById: TimelineById;
+}
+
+export const updateTimelineSort = ({
+  id,
+  sort,
+  timelineById,
+}: UpdateTimelineSortParams): TimelineById => {
+  const timeline = timelineById[id];
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      sort,
+    },
+  };
+};
+
+const updateEnabledAndProvider = (
+  andProviderId: string,
+  enabled: boolean,
+  providerId: string,
+  timeline: TimelineModel
+) =>
+  timeline.dataProviders.map(provider =>
+    provider.id === providerId
+      ? {
+          ...provider,
+          and: provider.and.map(andProvider =>
+            andProvider.id === andProviderId ? { ...andProvider, enabled } : andProvider
+          ),
+        }
+      : provider
+  );
+
+const updateEnabledProvider = (enabled: boolean, providerId: string, timeline: TimelineModel) =>
+  timeline.dataProviders.map(provider =>
+    provider.id === providerId
+      ? {
+          ...provider,
+          enabled,
+        }
+      : provider
+  );
+
+interface UpdateTimelineProviderEnabledParams {
+  id: string;
+  providerId: string;
+  enabled: boolean;
+  timelineById: TimelineById;
+  andProviderId?: string;
+}
+
+export const updateTimelineProviderEnabled = ({
+  id,
+  providerId,
+  enabled,
+  timelineById,
+  andProviderId,
+}: UpdateTimelineProviderEnabledParams): TimelineById => {
+  const timeline = timelineById[id];
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      dataProviders: andProviderId
+        ? updateEnabledAndProvider(andProviderId, enabled, providerId, timeline)
+        : updateEnabledProvider(enabled, providerId, timeline),
+    },
+  };
+};
+
+const updateExcludedAndProvider = (
+  andProviderId: string,
+  excluded: boolean,
+  providerId: string,
+  timeline: TimelineModel
+) =>
+  timeline.dataProviders.map(provider =>
+    provider.id === providerId
+      ? {
+          ...provider,
+          and: provider.and.map(andProvider =>
+            andProvider.id === andProviderId ? { ...andProvider, excluded } : andProvider
+          ),
+        }
+      : provider
+  );
+
+const updateExcludedProvider = (excluded: boolean, providerId: string, timeline: TimelineModel) =>
+  timeline.dataProviders.map(provider =>
+    provider.id === providerId
+      ? {
+          ...provider,
+          excluded,
+        }
+      : provider
+  );
+
+interface UpdateTimelineProviderExcludedParams {
+  id: string;
+  providerId: string;
+  excluded: boolean;
+  timelineById: TimelineById;
+  andProviderId?: string;
+}
+
+export const updateTimelineProviderExcluded = ({
+  id,
+  providerId,
+  excluded,
+  timelineById,
+  andProviderId,
+}: UpdateTimelineProviderExcludedParams): TimelineById => {
+  const timeline = timelineById[id];
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      dataProviders: andProviderId
+        ? updateExcludedAndProvider(andProviderId, excluded, providerId, timeline)
+        : updateExcludedProvider(excluded, providerId, timeline),
+    },
+  };
+};
+
+const updateProviderProperties = ({
+  excluded,
+  field,
+  operator,
+  providerId,
+  timeline,
+  value,
+}: {
+  excluded: boolean;
+  field: string;
+  operator: QueryOperator;
+  providerId: string;
+  timeline: TimelineModel;
+  value: string | number;
+}) =>
+  timeline.dataProviders.map(provider =>
+    provider.id === providerId
+      ? {
+          ...provider,
+          excluded,
+          queryMatch: {
+            ...provider.queryMatch,
+            field,
+            displayField: field,
+            value,
+            displayValue: value,
+            operator,
+          },
+        }
+      : provider
+  );
+
+const updateAndProviderProperties = ({
+  andProviderId,
+  excluded,
+  field,
+  operator,
+  providerId,
+  timeline,
+  value,
+}: {
+  andProviderId: string;
+  excluded: boolean;
+  field: string;
+  operator: QueryOperator;
+  providerId: string;
+  timeline: TimelineModel;
+  value: string | number;
+}) =>
+  timeline.dataProviders.map(provider =>
+    provider.id === providerId
+      ? {
+          ...provider,
+          and: provider.and.map(andProvider =>
+            andProvider.id === andProviderId
+              ? {
+                  ...andProvider,
+                  excluded,
+                  queryMatch: {
+                    ...andProvider.queryMatch,
+                    field,
+                    displayField: field,
+                    value,
+                    displayValue: value,
+                    operator,
+                  },
+                }
+              : andProvider
+          ),
+        }
+      : provider
+  );
+
+interface UpdateTimelineProviderEditPropertiesParams {
+  andProviderId?: string;
+  excluded: boolean;
+  field: string;
+  id: string;
+  operator: QueryOperator;
+  providerId: string;
+  timelineById: TimelineById;
+  value: string | number;
+}
+
+export const updateTimelineProviderProperties = ({
+  andProviderId,
+  excluded,
+  field,
+  id,
+  operator,
+  providerId,
+  timelineById,
+  value,
+}: UpdateTimelineProviderEditPropertiesParams): TimelineById => {
+  const timeline = timelineById[id];
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      dataProviders: andProviderId
+        ? updateAndProviderProperties({
+            andProviderId,
+            excluded,
+            field,
+            operator,
+            providerId,
+            timeline,
+            value,
+          })
+        : updateProviderProperties({
+            excluded,
+            field,
+            operator,
+            providerId,
+            timeline,
+            value,
+          }),
+    },
+  };
+};
+
+interface UpdateTimelineProviderKqlQueryParams {
+  id: string;
+  providerId: string;
+  kqlQuery: string;
+  timelineById: TimelineById;
+}
+
+export const updateTimelineProviderKqlQuery = ({
+  id,
+  providerId,
+  kqlQuery,
+  timelineById,
+}: UpdateTimelineProviderKqlQueryParams): TimelineById => {
+  const timeline = timelineById[id];
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      dataProviders: timeline.dataProviders.map(provider =>
+        provider.id === providerId ? { ...provider, ...{ kqlQuery } } : provider
+      ),
+    },
+  };
+};
+
+interface UpdateTimelineItemsPerPageParams {
+  id: string;
+  itemsPerPage: number;
+  timelineById: TimelineById;
+}
+
+export const updateTimelineItemsPerPage = ({
+  id,
+  itemsPerPage,
+  timelineById,
+}: UpdateTimelineItemsPerPageParams) => {
+  const timeline = timelineById[id];
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      itemsPerPage,
+    },
+  };
+};
+
+interface UpdateTimelinePageIndexParams {
+  id: string;
+  activePage: number;
+  timelineById: TimelineById;
+}
+
+export const updateTimelinePageIndex = ({
+  id,
+  activePage,
+  timelineById,
+}: UpdateTimelinePageIndexParams) => {
+  const timeline = timelineById[id];
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      activePage,
+    },
+  };
+};
+
+interface UpdateTimelinePerPageOptionsParams {
+  id: string;
+  itemsPerPageOptions: number[];
+  timelineById: TimelineById;
+}
+
+export const updateTimelinePerPageOptions = ({
+  id,
+  itemsPerPageOptions,
+  timelineById,
+}: UpdateTimelinePerPageOptionsParams) => {
+  const timeline = timelineById[id];
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      itemsPerPageOptions,
+    },
+  };
+};
+
+const removeAndProvider = (andProviderId: string, providerId: string, timeline: TimelineModel) => {
+  const providerIndex = timeline.dataProviders.findIndex(p => p.id === providerId);
+  const providerAndIndex = timeline.dataProviders[providerIndex].and.findIndex(
+    p => p.id === andProviderId
+  );
+  return [
+    ...timeline.dataProviders.slice(0, providerIndex),
+    {
+      ...timeline.dataProviders[providerIndex],
+      and: [
+        ...timeline.dataProviders[providerIndex].and.slice(0, providerAndIndex),
+        ...timeline.dataProviders[providerIndex].and.slice(providerAndIndex + 1),
+      ],
+    },
+    ...timeline.dataProviders.slice(providerIndex + 1),
+  ];
+};
+
+const removeProvider = (providerId: string, timeline: TimelineModel) => {
+  const providerIndex = timeline.dataProviders.findIndex(p => p.id === providerId);
+  return [
+    ...timeline.dataProviders.slice(0, providerIndex),
+    ...(timeline.dataProviders[providerIndex].and.length
+      ? [
+          {
+            ...timeline.dataProviders[providerIndex].and.slice(0, 1)[0],
+            and: [...timeline.dataProviders[providerIndex].and.slice(1)],
+          },
+        ]
+      : []),
+    ...timeline.dataProviders.slice(providerIndex + 1),
+  ];
+};
+
+interface RemoveTimelineProviderParams {
+  id: string;
+  providerId: string;
+  timelineById: TimelineById;
+  andProviderId?: string;
+}
+
+export const removeTimelineProvider = ({
+  id,
+  providerId,
+  timelineById,
+  andProviderId,
+}: RemoveTimelineProviderParams): TimelineById => {
+  const timeline = timelineById[id];
+
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      dataProviders: andProviderId
+        ? removeAndProvider(andProviderId, providerId, timeline)
+        : removeProvider(providerId, timeline),
+    },
+  };
+};
+
+interface SetDeletedTimelineEventsParams {
+  id: string;
+  eventIds: string[];
+  isDeleted: boolean;
+  timelineById: TimelineById;
+}
+
+export const setDeletedTimelineEvents = ({
+  id,
+  eventIds,
+  isDeleted,
+  timelineById,
+}: SetDeletedTimelineEventsParams): TimelineById => {
+  const timeline = timelineById[id];
+
+  const deletedEventIds = isDeleted
+    ? union(timeline.deletedEventIds, eventIds)
+    : timeline.deletedEventIds.filter(currentEventId => !eventIds.includes(currentEventId));
+
+  const selectedEventIds = Object.fromEntries(
+    Object.entries(timeline.selectedEventIds).filter(
+      ([selectedEventId]) => !deletedEventIds.includes(selectedEventId)
+    )
+  );
+
+  const isSelectAllChecked =
+    Object.keys(selectedEventIds).length > 0 ? timeline.isSelectAllChecked : false;
+
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      deletedEventIds,
+      selectedEventIds,
+      isSelectAllChecked,
+    },
+  };
+};
+
+interface SetLoadingTimelineEventsParams {
+  id: string;
+  eventIds: string[];
+  isLoading: boolean;
+  timelineById: TimelineById;
+}
+
+export const setLoadingTimelineEvents = ({
+  id,
+  eventIds,
+  isLoading,
+  timelineById,
+}: SetLoadingTimelineEventsParams): TimelineById => {
+  const timeline = timelineById[id];
+
+  const loadingEventIds = isLoading
+    ? union(timeline.loadingEventIds, eventIds)
+    : timeline.loadingEventIds.filter(currentEventId => !eventIds.includes(currentEventId));
+
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      loadingEventIds,
+    },
+  };
+};
+
+interface SetSelectedTimelineEventsParams {
+  id: string;
+  eventIds: Record<string, TimelineNonEcsData[]>;
+  isSelectAllChecked: boolean;
+  isSelected: boolean;
+  timelineById: TimelineById;
+}
+
+export const setSelectedTimelineEvents = ({
+  id,
+  eventIds,
+  isSelectAllChecked = false,
+  isSelected,
+  timelineById,
+}: SetSelectedTimelineEventsParams): TimelineById => {
+  const timeline = timelineById[id];
+
+  const selectedEventIds = isSelected
+    ? { ...timeline.selectedEventIds, ...eventIds }
+    : omit(Object.keys(eventIds), timeline.selectedEventIds);
+
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      selectedEventIds,
+      isSelectAllChecked,
+    },
+  };
+};
+
+interface UnPinTimelineEventParams {
+  id: string;
+  eventId: string;
+  timelineById: TimelineById;
+}
+
+export const unPinTimelineEvent = ({
+  id,
+  eventId,
+  timelineById,
+}: UnPinTimelineEventParams): TimelineById => {
+  const timeline = timelineById[id];
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      pinnedEventIds: omit(eventId, timeline.pinnedEventIds),
+    },
+  };
+};
+
+interface UpdateHighlightedDropAndProviderIdParams {
+  id: string;
+  providerId: string;
+  timelineById: TimelineById;
+}
+
+export const updateHighlightedDropAndProvider = ({
+  id,
+  providerId,
+  timelineById,
+}: UpdateHighlightedDropAndProviderIdParams): TimelineById => {
+  const timeline = timelineById[id];
+
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      highlightedDropAndProviderId: providerId,
+    },
+  };
+};
+
+interface UpdateSavedQueryParams {
+  id: string;
+  savedQueryId: string | null;
+  timelineById: TimelineById;
+}
+
+export const updateSavedQuery = ({
+  id,
+  savedQueryId,
+  timelineById,
+}: UpdateSavedQueryParams): TimelineById => {
+  const timeline = timelineById[id];
+
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      savedQueryId,
+    },
+  };
+};
+
+interface UpdateFiltersParams {
+  id: string;
+  filters: Filter[];
+  timelineById: TimelineById;
+}
+
+export const updateFilters = ({ id, filters, timelineById }: UpdateFiltersParams): TimelineById => {
+  const timeline = timelineById[id];
+
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      filters,
+    },
+  };
+};
diff --git a/x-pack/plugins/siem/public/timelines/store/timeline/index.ts b/x-pack/plugins/siem/public/timelines/store/timeline/index.ts
new file mode 100644
index 00000000000000..48042ddf899108
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/store/timeline/index.ts
@@ -0,0 +1,20 @@
+/*
+ * 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 { AnyAction, Reducer } from 'redux';
+import * as timelineActions from './actions';
+import * as timelineSelectors from './selectors';
+import { TimelineState } from './types';
+
+export { timelineActions, timelineSelectors };
+
+export interface TimelinePluginState {
+  timeline: TimelineState;
+}
+
+export interface TimelinePluginReducer {
+  timeline: Reducer<TimelineState, AnyAction>;
+}
diff --git a/x-pack/plugins/siem/public/store/timeline/manage_timeline_id.tsx b/x-pack/plugins/siem/public/timelines/store/timeline/manage_timeline_id.tsx
similarity index 100%
rename from x-pack/plugins/siem/public/store/timeline/manage_timeline_id.tsx
rename to x-pack/plugins/siem/public/timelines/store/timeline/manage_timeline_id.tsx
diff --git a/x-pack/plugins/siem/public/timelines/store/timeline/model.ts b/x-pack/plugins/siem/public/timelines/store/timeline/model.ts
new file mode 100644
index 00000000000000..1957abafbcc716
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/store/timeline/model.ts
@@ -0,0 +1,160 @@
+/*
+ * 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 { Filter } from '../../../../../../../src/plugins/data/public';
+
+import { TimelineTypeLiteralWithNull } from '../../../../common/types/timeline';
+import { DataProvider } from '../../../timelines/components/timeline/data_providers/data_provider';
+import { Sort } from '../../../timelines/components/timeline/body/sort';
+import { PinnedEvent, TimelineNonEcsData } from '../../../graphql/types';
+import { KueryFilterQuery, SerializedFilterQuery } from '../../../common/store/model';
+
+export const DEFAULT_PAGE_COUNT = 2; // Eui Pager will not render unless this is a minimum of 2 pages
+export type KqlMode = 'filter' | 'search';
+export type EventType = 'all' | 'raw' | 'signal';
+
+export type ColumnHeaderType = 'not-filtered' | 'text-filter';
+
+/** Uniquely identifies a column */
+export type ColumnId = string;
+
+/** The specification of a column header */
+export interface ColumnHeaderOptions {
+  aggregatable?: boolean;
+  category?: string;
+  columnHeaderType: ColumnHeaderType;
+  description?: string;
+  example?: string;
+  format?: string;
+  id: ColumnId;
+  label?: string;
+  linkField?: string;
+  placeholder?: string;
+  type?: string;
+  width: number;
+}
+
+export interface TimelineModel {
+  /** The columns displayed in the timeline */
+  columns: ColumnHeaderOptions[];
+  /** The sources of the event data shown in the timeline */
+  dataProviders: DataProvider[];
+  /** Events to not be rendered **/
+  deletedEventIds: string[];
+  /** A summary of the events and notes in this timeline */
+  description: string;
+  /** Typoe of event you want to see in this timeline */
+  eventType?: EventType;
+  /** A map of events in this timeline to the chronologically ordered notes (in this timeline) associated with the event */
+  eventIdToNoteIds: Record<string, string[]>;
+  filters?: Filter[];
+  /** The chronological history of actions related to this timeline */
+  historyIds: string[];
+  /** The chronological history of actions related to this timeline */
+  highlightedDropAndProviderId: string;
+  /** Uniquely identifies the timeline */
+  id: string;
+  /** If selectAll checkbox in header is checked **/
+  isSelectAllChecked: boolean;
+  /** Events to be rendered as loading **/
+  loadingEventIds: string[];
+  savedObjectId: string | null;
+  /** When true, this timeline was marked as "favorite" by the user */
+  isFavorite: boolean;
+  /** When true, the timeline will update as new data arrives */
+  isLive: boolean;
+  /** The number of items to show in a single page of results */
+  itemsPerPage: number;
+  /** Displays a series of choices that when selected, become the value of `itemsPerPage` */
+  itemsPerPageOptions: number[];
+  /** determines the behavior of the KQL bar */
+  kqlMode: KqlMode;
+  /** the KQL query in the KQL bar */
+  kqlQuery: {
+    filterQuery: SerializedFilterQuery | null;
+    filterQueryDraft: KueryFilterQuery | null;
+  };
+  /** Title */
+  title: string;
+  /** timelineType: default | template */
+  timelineType: TimelineTypeLiteralWithNull;
+  /** an unique id for template timeline */
+  templateTimelineId: string | null;
+  /** null for default timeline, number for template timeline */
+  templateTimelineVersion: number | null;
+  /** Notes added to the timeline itself. Notes added to events are stored (separately) in `eventIdToNote` */
+  noteIds: string[];
+  /** Events pinned to this timeline */
+  pinnedEventIds: Record<string, boolean>;
+  pinnedEventsSaveObject: Record<string, PinnedEvent>;
+  /** Specifies the granularity of the date range (e.g. 1 Day / Week / Month) applicable to the mini-map */
+  dateRange: {
+    start: number;
+    end: number;
+  };
+  savedQueryId?: string | null;
+  /** Events selected on this timeline -- eventId to TimelineNonEcsData[] mapping of data required for batch actions **/
+  selectedEventIds: Record<string, TimelineNonEcsData[]>;
+  /** When true, show the timeline flyover */
+  show: boolean;
+  /** When true, shows checkboxes enabling selection. Selected events store in selectedEventIds **/
+  showCheckboxes: boolean;
+  /** When true, shows additional rowRenderers below the PlainRowRenderer **/
+  showRowRenderers: boolean;
+  /**  Specifies which column the timeline is sorted on, and the direction (ascending / descending) */
+  sort: Sort;
+  /** Persists the UI state (width) of the timeline flyover */
+  width: number;
+  /** timeline is saving */
+  isSaving: boolean;
+  isLoading: boolean;
+  version: string | null;
+}
+
+export type SubsetTimelineModel = Readonly<
+  Pick<
+    TimelineModel,
+    | 'columns'
+    | 'dataProviders'
+    | 'deletedEventIds'
+    | 'description'
+    | 'eventType'
+    | 'eventIdToNoteIds'
+    | 'highlightedDropAndProviderId'
+    | 'historyIds'
+    | 'isFavorite'
+    | 'isLive'
+    | 'isSelectAllChecked'
+    | 'itemsPerPage'
+    | 'itemsPerPageOptions'
+    | 'kqlMode'
+    | 'kqlQuery'
+    | 'title'
+    | 'timelineType'
+    | 'templateTimelineId'
+    | 'templateTimelineVersion'
+    | 'loadingEventIds'
+    | 'noteIds'
+    | 'pinnedEventIds'
+    | 'pinnedEventsSaveObject'
+    | 'dateRange'
+    | 'selectedEventIds'
+    | 'show'
+    | 'showCheckboxes'
+    | 'showRowRenderers'
+    | 'sort'
+    | 'width'
+    | 'isSaving'
+    | 'isLoading'
+    | 'savedObjectId'
+    | 'version'
+  >
+>;
+
+export interface TimelineUrl {
+  id: string;
+  isOpen: boolean;
+}
diff --git a/x-pack/plugins/siem/public/store/timeline/my_epic_timeline_id.ts b/x-pack/plugins/siem/public/timelines/store/timeline/my_epic_timeline_id.ts
similarity index 100%
rename from x-pack/plugins/siem/public/store/timeline/my_epic_timeline_id.ts
rename to x-pack/plugins/siem/public/timelines/store/timeline/my_epic_timeline_id.ts
diff --git a/x-pack/plugins/siem/public/timelines/store/timeline/reducer.test.ts b/x-pack/plugins/siem/public/timelines/store/timeline/reducer.test.ts
new file mode 100644
index 00000000000000..65c78ca8efdb2a
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/store/timeline/reducer.test.ts
@@ -0,0 +1,2254 @@
+/*
+ * 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 { cloneDeep, set } from 'lodash/fp';
+
+import { TimelineType } from '../../../../common/types/timeline';
+
+import {
+  IS_OPERATOR,
+  DataProvider,
+  DataProvidersAnd,
+} from '../../../timelines/components/timeline/data_providers/data_provider';
+import { defaultColumnHeaderType } from '../../../timelines/components/timeline/body/column_headers/default_headers';
+import {
+  DEFAULT_COLUMN_MIN_WIDTH,
+  DEFAULT_TIMELINE_WIDTH,
+} from '../../../timelines/components/timeline/body/constants';
+import { getColumnWidthFromType } from '../../../timelines/components/timeline/body/column_headers/helpers';
+import { Direction } from '../../../graphql/types';
+import { defaultHeaders } from '../../../common/mock';
+
+import {
+  addNewTimeline,
+  addTimelineProvider,
+  addTimelineToStore,
+  applyDeltaToTimelineColumnWidth,
+  removeTimelineColumn,
+  removeTimelineProvider,
+  updateTimelineColumns,
+  updateTimelineDescription,
+  updateTimelineItemsPerPage,
+  updateTimelinePerPageOptions,
+  updateTimelineProviderEnabled,
+  updateTimelineProviderExcluded,
+  updateTimelineProviders,
+  updateTimelineRange,
+  updateTimelineShowTimeline,
+  updateTimelineSort,
+  updateTimelineTitle,
+  upsertTimelineColumn,
+} from './helpers';
+import { ColumnHeaderOptions } from './model';
+import { timelineDefaults } from './defaults';
+import { TimelineById } from './types';
+
+const timelineByIdMock: TimelineById = {
+  foo: {
+    dataProviders: [
+      {
+        and: [],
+        id: '123',
+        name: 'data provider 1',
+        enabled: true,
+        queryMatch: {
+          field: '',
+          value: '',
+          operator: IS_OPERATOR,
+        },
+
+        excluded: false,
+        kqlQuery: '',
+      },
+    ],
+    columns: [],
+    description: '',
+    deletedEventIds: [],
+    eventIdToNoteIds: {},
+    highlightedDropAndProviderId: '',
+    historyIds: [],
+    id: 'foo',
+    savedObjectId: null,
+    isFavorite: false,
+    isLive: false,
+    isSelectAllChecked: false,
+    isLoading: false,
+    itemsPerPage: 25,
+    itemsPerPageOptions: [10, 25, 50],
+    kqlMode: 'filter',
+    kqlQuery: { filterQuery: null, filterQueryDraft: null },
+    loadingEventIds: [],
+    title: '',
+    timelineType: TimelineType.default,
+    templateTimelineVersion: null,
+    templateTimelineId: null,
+    noteIds: [],
+    pinnedEventIds: {},
+    pinnedEventsSaveObject: {},
+    dateRange: {
+      start: 0,
+      end: 0,
+    },
+    selectedEventIds: {},
+    show: true,
+    showCheckboxes: false,
+    showRowRenderers: true,
+    sort: {
+      columnId: '@timestamp',
+      sortDirection: Direction.desc,
+    },
+    width: DEFAULT_TIMELINE_WIDTH,
+    isSaving: false,
+    version: null,
+  },
+};
+
+const columnsMock: ColumnHeaderOptions[] = [
+  defaultHeaders[0],
+  defaultHeaders[1],
+  defaultHeaders[2],
+];
+
+describe('Timeline', () => {
+  describe('#add saved object Timeline to store ', () => {
+    test('should return a timelineModel with default value and not just a timelineResult ', () => {
+      const update = addTimelineToStore({
+        id: 'foo',
+        timeline: {
+          ...timelineByIdMock.foo,
+        },
+        timelineById: timelineByIdMock,
+      });
+
+      expect(update).toEqual({
+        foo: {
+          ...timelineByIdMock.foo,
+          show: true,
+        },
+      });
+    });
+  });
+
+  describe('#addNewTimeline', () => {
+    test('should return a new reference and not the same reference', () => {
+      const update = addNewTimeline({
+        id: 'bar',
+        columns: defaultHeaders,
+        timelineById: timelineByIdMock,
+      });
+      expect(update).not.toBe(timelineByIdMock);
+    });
+
+    test('should add a new timeline', () => {
+      const update = addNewTimeline({
+        id: 'bar',
+        columns: timelineDefaults.columns,
+        timelineById: timelineByIdMock,
+      });
+      expect(update).toEqual({
+        foo: timelineByIdMock.foo,
+        bar: set('id', 'bar', timelineDefaults),
+      });
+    });
+
+    test('should add the specified columns to the timeline', () => {
+      const barWithEmptyColumns = set('id', 'bar', timelineDefaults);
+      const barWithPopulatedColumns = set('columns', defaultHeaders, barWithEmptyColumns);
+
+      const update = addNewTimeline({
+        id: 'bar',
+        columns: defaultHeaders,
+        timelineById: timelineByIdMock,
+      });
+      expect(update).toEqual({
+        foo: timelineByIdMock.foo,
+        bar: barWithPopulatedColumns,
+      });
+    });
+  });
+
+  describe('#updateTimelineShowTimeline', () => {
+    test('should return a new reference and not the same reference', () => {
+      const update = updateTimelineShowTimeline({
+        id: 'foo',
+        show: false,
+        timelineById: timelineByIdMock,
+      });
+      expect(update).not.toBe(timelineByIdMock);
+    });
+
+    test('should change show from true to false', () => {
+      const update = updateTimelineShowTimeline({
+        id: 'foo',
+        show: false, // value we are changing from true to false
+        timelineById: timelineByIdMock,
+      });
+      expect(update).toEqual(set('foo.show', false, timelineByIdMock));
+    });
+  });
+
+  describe('#upsertTimelineColumn', () => {
+    let timelineById: TimelineById = {};
+    let columns: ColumnHeaderOptions[] = [];
+    let columnToAdd: ColumnHeaderOptions;
+
+    beforeEach(() => {
+      timelineById = cloneDeep(timelineByIdMock);
+      columns = cloneDeep(columnsMock);
+      columnToAdd = {
+        category: 'event',
+        columnHeaderType: defaultColumnHeaderType,
+        description:
+          'The action captured by the event.\nThis 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',
+        aggregatable: true,
+        width: DEFAULT_COLUMN_MIN_WIDTH,
+      };
+    });
+
+    test('should return a new reference and not the same reference', () => {
+      const update = upsertTimelineColumn({
+        column: columnToAdd,
+        id: 'foo',
+        index: 0,
+        timelineById,
+      });
+
+      expect(update).not.toBe(timelineById);
+    });
+
+    test('should add a new column to an empty collection of columns', () => {
+      const expectedColumns = [columnToAdd];
+      const update = upsertTimelineColumn({
+        column: columnToAdd,
+        id: 'foo',
+        index: 0,
+        timelineById,
+      });
+
+      expect(update).toEqual(set('foo.columns', expectedColumns, timelineById));
+    });
+
+    test('should add a new column to an existing collection of columns at the beginning of the collection', () => {
+      const expectedColumns = [columnToAdd, ...columns];
+      const mockWithExistingColumns = set('foo.columns', columns, timelineById);
+
+      const update = upsertTimelineColumn({
+        column: columnToAdd,
+        id: 'foo',
+        index: 0,
+        timelineById: mockWithExistingColumns,
+      });
+
+      expect(update).toEqual(set('foo.columns', expectedColumns, mockWithExistingColumns));
+    });
+
+    test('should add a new column to an existing collection of columns in the middle of the collection', () => {
+      const expectedColumns = [columns[0], columnToAdd, columns[1], columns[2]];
+      const mockWithExistingColumns = set('foo.columns', columns, timelineById);
+
+      const update = upsertTimelineColumn({
+        column: columnToAdd,
+        id: 'foo',
+        index: 1,
+        timelineById: mockWithExistingColumns,
+      });
+
+      expect(update).toEqual(set('foo.columns', expectedColumns, mockWithExistingColumns));
+    });
+
+    test('should add a new column to an existing collection of columns at the end of the collection', () => {
+      const expectedColumns = [...columns, columnToAdd];
+      const mockWithExistingColumns = set('foo.columns', columns, timelineById);
+
+      const update = upsertTimelineColumn({
+        column: columnToAdd,
+        id: 'foo',
+        index: expectedColumns.length - 1,
+        timelineById: mockWithExistingColumns,
+      });
+
+      expect(update).toEqual(set('foo.columns', expectedColumns, mockWithExistingColumns));
+    });
+
+    columns.forEach((column, i) => {
+      test(`should upsert (NOT add a new column) a column when already exists at the same index (${i})`, () => {
+        const mockWithExistingColumns = set('foo.columns', columns, timelineById);
+
+        const update = upsertTimelineColumn({
+          column,
+          id: 'foo',
+          index: i,
+          timelineById: mockWithExistingColumns,
+        });
+
+        expect(update).toEqual(set('foo.columns', columns, mockWithExistingColumns));
+      });
+    });
+
+    test('should allow the 1st column to be moved to the 2nd column', () => {
+      const expectedColumns = [columns[1], columns[0], columns[2]];
+      const mockWithExistingColumns = set('foo.columns', columns, timelineById);
+
+      const update = upsertTimelineColumn({
+        column: columns[0],
+        id: 'foo',
+        index: 1,
+        timelineById: mockWithExistingColumns,
+      });
+
+      expect(update).toEqual(set('foo.columns', expectedColumns, mockWithExistingColumns));
+    });
+
+    test('should allow the 1st column to be moved to the 3rd column', () => {
+      const expectedColumns = [columns[1], columns[2], columns[0]];
+      const mockWithExistingColumns = set('foo.columns', columns, timelineById);
+
+      const update = upsertTimelineColumn({
+        column: columns[0],
+        id: 'foo',
+        index: 2,
+        timelineById: mockWithExistingColumns,
+      });
+
+      expect(update).toEqual(set('foo.columns', expectedColumns, mockWithExistingColumns));
+    });
+
+    test('should allow the 2nd column to be moved to the 1st column', () => {
+      const expectedColumns = [columns[1], columns[0], columns[2]];
+      const mockWithExistingColumns = set('foo.columns', columns, timelineById);
+
+      const update = upsertTimelineColumn({
+        column: columns[1],
+        id: 'foo',
+        index: 0,
+        timelineById: mockWithExistingColumns,
+      });
+
+      expect(update).toEqual(set('foo.columns', expectedColumns, mockWithExistingColumns));
+    });
+
+    test('should allow the 2nd column to be moved to the 3rd column', () => {
+      const expectedColumns = [columns[0], columns[2], columns[1]];
+      const mockWithExistingColumns = set('foo.columns', columns, timelineById);
+
+      const update = upsertTimelineColumn({
+        column: columns[1],
+        id: 'foo',
+        index: 2,
+        timelineById: mockWithExistingColumns,
+      });
+
+      expect(update).toEqual(set('foo.columns', expectedColumns, mockWithExistingColumns));
+    });
+
+    test('should allow the 3rd column to be moved to the 1st column', () => {
+      const expectedColumns = [columns[2], columns[0], columns[1]];
+      const mockWithExistingColumns = set('foo.columns', columns, timelineById);
+
+      const update = upsertTimelineColumn({
+        column: columns[2],
+        id: 'foo',
+        index: 0,
+        timelineById: mockWithExistingColumns,
+      });
+
+      expect(update).toEqual(set('foo.columns', expectedColumns, mockWithExistingColumns));
+    });
+
+    test('should allow the 3rd column to be moved to the 2nd column', () => {
+      const expectedColumns = [columns[0], columns[2], columns[1]];
+      const mockWithExistingColumns = set('foo.columns', columns, timelineById);
+
+      const update = upsertTimelineColumn({
+        column: columns[2],
+        id: 'foo',
+        index: 1,
+        timelineById: mockWithExistingColumns,
+      });
+
+      expect(update).toEqual(set('foo.columns', expectedColumns, mockWithExistingColumns));
+    });
+  });
+
+  describe('#addTimelineProvider', () => {
+    test('should return a new reference and not the same reference', () => {
+      const update = addTimelineProvider({
+        id: 'foo',
+        provider: {
+          and: [],
+          id: '567',
+          name: 'data provider 2',
+          enabled: true,
+          queryMatch: {
+            field: '',
+            value: '',
+            operator: IS_OPERATOR,
+          },
+
+          excluded: false,
+          kqlQuery: '',
+        },
+        timelineById: timelineByIdMock,
+      });
+      expect(update).not.toBe(timelineByIdMock);
+    });
+
+    test('should add a new timeline provider', () => {
+      const providerToAdd: DataProvider = {
+        and: [],
+        id: '567',
+        name: 'data provider 2',
+        enabled: true,
+        queryMatch: {
+          field: '',
+          value: '',
+          operator: IS_OPERATOR,
+        },
+
+        excluded: false,
+        kqlQuery: '',
+      };
+      const update = addTimelineProvider({
+        id: 'foo',
+        provider: providerToAdd,
+        timelineById: timelineByIdMock,
+      });
+      const addedDataProvider = timelineByIdMock.foo.dataProviders.concat(providerToAdd);
+      expect(update).toEqual(set('foo.dataProviders', addedDataProvider, timelineByIdMock));
+    });
+
+    test('should NOT add a new timeline provider if it already exists and the attributes "and" is empty', () => {
+      const providerToAdd: DataProvider = {
+        and: [],
+        id: '123',
+        name: 'data provider 1',
+        enabled: true,
+        queryMatch: {
+          field: '',
+          value: '',
+          operator: IS_OPERATOR,
+        },
+
+        excluded: false,
+        kqlQuery: '',
+      };
+      const update = addTimelineProvider({
+        id: 'foo',
+        provider: providerToAdd,
+        timelineById: timelineByIdMock,
+      });
+      expect(update).toEqual(timelineByIdMock);
+    });
+
+    test('should add a new timeline provider if it already exists and the attributes "and" is NOT empty', () => {
+      const myMockTimelineByIdMock = cloneDeep(timelineByIdMock);
+      myMockTimelineByIdMock.foo.dataProviders[0].and = [
+        {
+          id: '456',
+          name: 'and data provider 1',
+          enabled: true,
+          excluded: false,
+          kqlQuery: '',
+          queryMatch: {
+            field: '',
+            value: '',
+            operator: IS_OPERATOR,
+          },
+        },
+      ];
+      const providerToAdd: DataProvider = {
+        and: [],
+        id: '123',
+        name: 'data provider 1',
+        enabled: true,
+        queryMatch: {
+          field: '',
+          value: '',
+          operator: IS_OPERATOR,
+        },
+
+        excluded: false,
+        kqlQuery: '',
+      };
+      const update = addTimelineProvider({
+        id: 'foo',
+        provider: providerToAdd,
+        timelineById: myMockTimelineByIdMock,
+      });
+      expect(update).toEqual(set('foo.dataProviders[1]', providerToAdd, myMockTimelineByIdMock));
+    });
+
+    test('should UPSERT an existing timeline provider if it already exists', () => {
+      const providerToAdd: DataProvider = {
+        and: [],
+        id: '123',
+        name: 'my name changed',
+        enabled: true,
+        queryMatch: {
+          field: '',
+          value: '',
+          operator: IS_OPERATOR,
+        },
+        excluded: false,
+        kqlQuery: '',
+      };
+      const update = addTimelineProvider({
+        id: 'foo',
+        provider: providerToAdd,
+        timelineById: timelineByIdMock,
+      });
+      expect(update).toEqual(set('foo.dataProviders[0].name', 'my name changed', timelineByIdMock));
+    });
+  });
+
+  describe('#removeTimelineColumn', () => {
+    test('should return a new reference and not the same reference', () => {
+      // pre-populate a new mock with existing columns:
+      const mockWithExistingColumns = set('foo.columns', columnsMock, timelineByIdMock);
+
+      const update = removeTimelineColumn({
+        id: 'foo',
+        columnId: columnsMock[0].id,
+        timelineById: mockWithExistingColumns,
+      });
+
+      expect(update).not.toBe(timelineByIdMock);
+    });
+
+    test('should remove just the first column when the id matches', () => {
+      const expectedColumns = [columnsMock[1], columnsMock[2]];
+
+      // pre-populate a new mock with existing columns:
+      const mockWithExistingColumns = set('foo.columns', columnsMock, timelineByIdMock);
+
+      const update = removeTimelineColumn({
+        id: 'foo',
+        columnId: columnsMock[0].id,
+        timelineById: mockWithExistingColumns,
+      });
+
+      expect(update).toEqual(set('foo.columns', expectedColumns, mockWithExistingColumns));
+    });
+
+    test('should remove just the last column when the id matches', () => {
+      const expectedColumns = [columnsMock[0], columnsMock[1]];
+
+      // pre-populate a new mock with existing columns:
+      const mockWithExistingColumns = set('foo.columns', columnsMock, timelineByIdMock);
+
+      const update = removeTimelineColumn({
+        id: 'foo',
+        columnId: columnsMock[2].id,
+        timelineById: mockWithExistingColumns,
+      });
+
+      expect(update).toEqual(set('foo.columns', expectedColumns, mockWithExistingColumns));
+    });
+
+    test('should remove just the middle column when the id matches', () => {
+      const expectedColumns = [columnsMock[0], columnsMock[2]];
+
+      // pre-populate a new mock with existing columns:
+      const mockWithExistingColumns = set('foo.columns', columnsMock, timelineByIdMock);
+
+      const update = removeTimelineColumn({
+        id: 'foo',
+        columnId: columnsMock[1].id,
+        timelineById: mockWithExistingColumns,
+      });
+
+      expect(update).toEqual(set('foo.columns', expectedColumns, mockWithExistingColumns));
+    });
+
+    test('should not modify the columns if the id to remove was not found', () => {
+      const expectedColumns = cloneDeep(columnsMock);
+
+      // pre-populate a new mock with existing columns:
+      const mockWithExistingColumns = set('foo.columns', columnsMock, timelineByIdMock);
+
+      const update = removeTimelineColumn({
+        id: 'foo',
+        columnId: 'does.not.exist',
+        timelineById: mockWithExistingColumns,
+      });
+
+      expect(update).toEqual(set('foo.columns', expectedColumns, mockWithExistingColumns));
+    });
+  });
+
+  describe('#applyDeltaToColumnWidth', () => {
+    test('should return a new reference and not the same reference', () => {
+      const delta = 50;
+      // pre-populate a new mock with existing columns:
+      const mockWithExistingColumns = set('foo.columns', columnsMock, timelineByIdMock);
+
+      const update = applyDeltaToTimelineColumnWidth({
+        id: 'foo',
+        columnId: columnsMock[0].id,
+        delta,
+        timelineById: mockWithExistingColumns,
+      });
+
+      expect(update).not.toBe(timelineByIdMock);
+    });
+
+    test('should update (just) the specified column of type `date` when the id matches, and the result of applying the delta is greater than the min width for a date column', () => {
+      const aDateColumn = columnsMock[0];
+      const delta = 50;
+      const expectedToHaveNewWidth = {
+        ...aDateColumn,
+        width: getColumnWidthFromType(aDateColumn.type!) + delta,
+      };
+      const expectedColumns = [expectedToHaveNewWidth, columnsMock[1], columnsMock[2]];
+
+      // pre-populate a new mock with existing columns:
+      const mockWithExistingColumns = set('foo.columns', columnsMock, timelineByIdMock);
+
+      const update = applyDeltaToTimelineColumnWidth({
+        id: 'foo',
+        columnId: aDateColumn.id,
+        delta,
+        timelineById: mockWithExistingColumns,
+      });
+
+      expect(update).toEqual(set('foo.columns', expectedColumns, mockWithExistingColumns));
+    });
+
+    test('should NOT update (just) the specified column of type `date` when the id matches, because the result of applying the delta is less than the min width for a date column', () => {
+      const aDateColumn = columnsMock[0];
+      const delta = -50; // this will be less than the min
+      const expectedToHaveNewWidth = {
+        ...aDateColumn,
+        width: getColumnWidthFromType(aDateColumn.type!), // we expect the minimum
+      };
+      const expectedColumns = [expectedToHaveNewWidth, columnsMock[1], columnsMock[2]];
+
+      // pre-populate a new mock with existing columns:
+      const mockWithExistingColumns = set('foo.columns', columnsMock, timelineByIdMock);
+
+      const update = applyDeltaToTimelineColumnWidth({
+        id: 'foo',
+        columnId: aDateColumn.id,
+        delta,
+        timelineById: mockWithExistingColumns,
+      });
+
+      expect(update).toEqual(set('foo.columns', expectedColumns, mockWithExistingColumns));
+    });
+
+    test('should update (just) the specified non-date column when the id matches, and the result of applying the delta is greater than the min width for the column', () => {
+      const aNonDateColumn = columnsMock[1];
+      const delta = 50;
+      const expectedToHaveNewWidth = {
+        ...aNonDateColumn,
+        width: getColumnWidthFromType(aNonDateColumn.type!) + delta,
+      };
+      const expectedColumns = [columnsMock[0], expectedToHaveNewWidth, columnsMock[2]];
+
+      // pre-populate a new mock with existing columns:
+      const mockWithExistingColumns = set('foo.columns', columnsMock, timelineByIdMock);
+
+      const update = applyDeltaToTimelineColumnWidth({
+        id: 'foo',
+        columnId: aNonDateColumn.id,
+        delta,
+        timelineById: mockWithExistingColumns,
+      });
+
+      expect(update).toEqual(set('foo.columns', expectedColumns, mockWithExistingColumns));
+    });
+
+    test('should NOT update the specified non-date column when the id matches, because the result of applying the delta is less than the min width for the column', () => {
+      const aNonDateColumn = columnsMock[1];
+      const delta = -50;
+      const expectedToHaveNewWidth = {
+        ...aNonDateColumn,
+        width: getColumnWidthFromType(aNonDateColumn.type!),
+      };
+      const expectedColumns = [columnsMock[0], expectedToHaveNewWidth, columnsMock[2]];
+
+      // pre-populate a new mock with existing columns:
+      const mockWithExistingColumns = set('foo.columns', columnsMock, timelineByIdMock);
+
+      const update = applyDeltaToTimelineColumnWidth({
+        id: 'foo',
+        columnId: aNonDateColumn.id,
+        delta,
+        timelineById: mockWithExistingColumns,
+      });
+
+      expect(update).toEqual(set('foo.columns', expectedColumns, mockWithExistingColumns));
+    });
+  });
+
+  describe('#addAndProviderToTimelineProvider', () => {
+    test('should add a new and provider to an existing timeline provider', () => {
+      const providerToAdd: DataProvider = {
+        and: [],
+        id: '567',
+        name: 'data provider 2',
+        enabled: true,
+        queryMatch: {
+          field: 'handsome',
+          value: 'garrett',
+          operator: IS_OPERATOR,
+        },
+        excluded: false,
+        kqlQuery: '',
+      };
+
+      const newTimeline = addTimelineProvider({
+        id: 'foo',
+        provider: providerToAdd,
+        timelineById: timelineByIdMock,
+      });
+
+      newTimeline.foo.highlightedDropAndProviderId = '567';
+
+      const andProviderToAdd: DataProvider = {
+        and: [],
+        id: '568',
+        name: 'And Data Provider',
+        enabled: true,
+        queryMatch: {
+          field: 'smart',
+          value: 'frank',
+          operator: IS_OPERATOR,
+        },
+
+        excluded: false,
+        kqlQuery: '',
+      };
+
+      const update = addTimelineProvider({
+        id: 'foo',
+        provider: andProviderToAdd,
+        timelineById: newTimeline,
+      });
+      const indexProvider = update.foo.dataProviders.findIndex(i => i.id === '567');
+      const addedAndDataProvider = update.foo.dataProviders[indexProvider].and[0];
+      const { and, ...expectedResult } = andProviderToAdd;
+      expect(addedAndDataProvider).toEqual(expectedResult);
+      newTimeline.foo.highlightedDropAndProviderId = '';
+    });
+
+    test('should add another and provider because it is not a duplicate', () => {
+      const providerToAdd: DataProvider = {
+        and: [
+          {
+            id: '568',
+            name: 'And Data Provider',
+            enabled: true,
+            queryMatch: {
+              field: 'smart',
+              value: 'garrett',
+              operator: IS_OPERATOR,
+            },
+            excluded: false,
+            kqlQuery: '',
+          },
+        ],
+        id: '567',
+        name: 'data provider 1',
+        enabled: true,
+        queryMatch: {
+          field: 'handsome',
+          value: 'frank',
+          operator: IS_OPERATOR,
+        },
+        excluded: false,
+        kqlQuery: '',
+      };
+
+      const newTimeline = addTimelineProvider({
+        id: 'foo',
+        provider: providerToAdd,
+        timelineById: timelineByIdMock,
+      });
+
+      newTimeline.foo.highlightedDropAndProviderId = '567';
+
+      const andProviderToAdd: DataProvider = {
+        and: [],
+        id: '569',
+        name: 'And Data Provider',
+        enabled: true,
+        queryMatch: {
+          field: 'happy',
+          value: 'andrewG',
+          operator: IS_OPERATOR,
+        },
+        excluded: false,
+        kqlQuery: '',
+      };
+      // temporary, we will have to decouple DataProvider & DataProvidersAnd
+      // that's bigger a refactor than just fixing a bug
+      delete andProviderToAdd.and;
+      const update = addTimelineProvider({
+        id: 'foo',
+        provider: andProviderToAdd,
+        timelineById: newTimeline,
+      });
+
+      expect(update).toEqual(set('foo.dataProviders[1].and[1]', andProviderToAdd, newTimeline));
+      newTimeline.foo.highlightedDropAndProviderId = '';
+    });
+
+    test('should NOT add another and provider because it is a duplicate', () => {
+      const providerToAdd: DataProvider = {
+        and: [
+          {
+            id: '568',
+            name: 'And Data Provider',
+            enabled: true,
+            queryMatch: {
+              field: 'smart',
+              value: 'garrett',
+              operator: IS_OPERATOR,
+            },
+            excluded: false,
+            kqlQuery: '',
+          },
+        ],
+        id: '567',
+        name: 'data provider 1',
+        enabled: true,
+        queryMatch: {
+          field: 'handsome',
+          value: 'frank',
+          operator: IS_OPERATOR,
+        },
+        excluded: false,
+        kqlQuery: '',
+      };
+
+      const newTimeline = addTimelineProvider({
+        id: 'foo',
+        provider: providerToAdd,
+        timelineById: timelineByIdMock,
+      });
+
+      newTimeline.foo.highlightedDropAndProviderId = '567';
+
+      const andProviderToAdd: DataProvider = {
+        and: [],
+        id: '569',
+        name: 'And Data Provider',
+        enabled: true,
+        queryMatch: {
+          field: 'smart',
+          value: 'garrett',
+          operator: IS_OPERATOR,
+        },
+        excluded: false,
+        kqlQuery: '',
+      };
+      const update = addTimelineProvider({
+        id: 'foo',
+        provider: andProviderToAdd,
+        timelineById: newTimeline,
+      });
+
+      expect(update).toEqual(newTimeline);
+      newTimeline.foo.highlightedDropAndProviderId = '';
+    });
+  });
+
+  describe('#updateTimelineColumns', () => {
+    test('should return a new reference and not the same reference', () => {
+      const update = updateTimelineColumns({
+        id: 'foo',
+        columns: columnsMock,
+        timelineById: timelineByIdMock,
+      });
+      expect(update).not.toBe(timelineByIdMock);
+    });
+
+    test('should update a timeline with new columns', () => {
+      const update = updateTimelineColumns({
+        id: 'foo',
+        columns: columnsMock,
+        timelineById: timelineByIdMock,
+      });
+      expect(update).toEqual(set('foo.columns', [...columnsMock], timelineByIdMock));
+    });
+  });
+
+  describe('#updateTimelineDescription', () => {
+    const newDescription = 'a new description';
+
+    test('should return a new reference and not the same reference', () => {
+      const update = updateTimelineDescription({
+        id: 'foo',
+        description: newDescription,
+        timelineById: timelineByIdMock,
+      });
+      expect(update).not.toBe(timelineByIdMock);
+    });
+
+    test('should update the timeline description', () => {
+      const update = updateTimelineDescription({
+        id: 'foo',
+        description: newDescription,
+        timelineById: timelineByIdMock,
+      });
+      expect(update).toEqual(set('foo.description', newDescription, timelineByIdMock));
+    });
+
+    test('should always trim all leading whitespace and allow only one trailing space', () => {
+      const update = updateTimelineDescription({
+        id: 'foo',
+        description: '      breathing room      ',
+        timelineById: timelineByIdMock,
+      });
+      expect(update).toEqual(set('foo.description', 'breathing room ', timelineByIdMock));
+    });
+  });
+
+  describe('#updateTimelineTitle', () => {
+    const newTitle = 'a new title';
+
+    test('should return a new reference and not the same reference', () => {
+      const update = updateTimelineTitle({
+        id: 'foo',
+        title: newTitle,
+        timelineById: timelineByIdMock,
+      });
+      expect(update).not.toBe(timelineByIdMock);
+    });
+
+    test('should update the timeline title', () => {
+      const update = updateTimelineTitle({
+        id: 'foo',
+        title: newTitle,
+        timelineById: timelineByIdMock,
+      });
+      expect(update).toEqual(set('foo.title', newTitle, timelineByIdMock));
+    });
+
+    test('should always trim all leading whitespace and allow only one trailing space', () => {
+      const update = updateTimelineTitle({
+        id: 'foo',
+        title: '      room at the back      ',
+        timelineById: timelineByIdMock,
+      });
+      expect(update).toEqual(set('foo.title', 'room at the back ', timelineByIdMock));
+    });
+  });
+
+  describe('#updateTimelineProviders', () => {
+    test('should return a new reference and not the same reference', () => {
+      const update = updateTimelineProviders({
+        id: 'foo',
+        providers: [
+          {
+            and: [],
+            id: '567',
+            name: 'data provider 2',
+            enabled: true,
+            queryMatch: {
+              field: '',
+              value: '',
+              operator: IS_OPERATOR,
+            },
+
+            excluded: false,
+            kqlQuery: '',
+          },
+        ],
+        timelineById: timelineByIdMock,
+      });
+      expect(update).not.toBe(timelineByIdMock);
+    });
+
+    test('should add update a timeline with new providers', () => {
+      const providerToAdd: DataProvider = {
+        and: [],
+        id: '567',
+        name: 'data provider 2',
+        enabled: true,
+        queryMatch: {
+          field: '',
+          value: '',
+          operator: IS_OPERATOR,
+        },
+
+        excluded: false,
+        kqlQuery: '',
+      };
+      const update = updateTimelineProviders({
+        id: 'foo',
+        providers: [providerToAdd],
+        timelineById: timelineByIdMock,
+      });
+      expect(update).toEqual(set('foo.dataProviders', [providerToAdd], timelineByIdMock));
+    });
+  });
+
+  describe('#updateTimelineRange', () => {
+    test('should return a new reference and not the same reference', () => {
+      const update = updateTimelineRange({
+        id: 'foo',
+        start: 23,
+        end: 33,
+        timelineById: timelineByIdMock,
+      });
+      expect(update).not.toBe(timelineByIdMock);
+    });
+
+    test('should update the timeline range', () => {
+      const update = updateTimelineRange({
+        id: 'foo',
+        start: 23,
+        end: 33,
+        timelineById: timelineByIdMock,
+      });
+      expect(update).toEqual(
+        set(
+          'foo.dateRange',
+          {
+            start: 23,
+            end: 33,
+          },
+          timelineByIdMock
+        )
+      );
+    });
+  });
+
+  describe('#updateTimelineSort', () => {
+    test('should return a new reference and not the same reference', () => {
+      const update = updateTimelineSort({
+        id: 'foo',
+        sort: {
+          columnId: 'some column',
+          sortDirection: Direction.desc,
+        },
+        timelineById: timelineByIdMock,
+      });
+      expect(update).not.toBe(timelineByIdMock);
+    });
+
+    test('should update the timeline range', () => {
+      const update = updateTimelineSort({
+        id: 'foo',
+        sort: {
+          columnId: 'some column',
+          sortDirection: Direction.desc,
+        },
+        timelineById: timelineByIdMock,
+      });
+      expect(update).toEqual(
+        set(
+          'foo.sort',
+          { columnId: 'some column', sortDirection: Direction.desc },
+          timelineByIdMock
+        )
+      );
+    });
+  });
+
+  describe('#updateTimelineProviderEnabled', () => {
+    test('should return a new reference and not the same reference', () => {
+      const update = updateTimelineProviderEnabled({
+        id: 'foo',
+        providerId: '123',
+        enabled: false, // value we are updating from true to false
+        timelineById: timelineByIdMock,
+      });
+      expect(update).not.toBe(timelineByIdMock);
+    });
+
+    test('should return a new reference for data provider and not the same reference of data provider', () => {
+      const update = updateTimelineProviderEnabled({
+        id: 'foo',
+        providerId: '123',
+        enabled: false, // value we are updating from true to false
+        timelineById: timelineByIdMock,
+      });
+      expect(update.foo.dataProviders).not.toBe(timelineByIdMock.foo.dataProviders);
+    });
+
+    test('should update the timeline provider enabled from true to false', () => {
+      const update = updateTimelineProviderEnabled({
+        id: 'foo',
+        providerId: '123',
+        enabled: false, // value we are updating from true to false
+        timelineById: timelineByIdMock,
+      });
+      const expected: TimelineById = {
+        foo: {
+          id: 'foo',
+          savedObjectId: null,
+          columns: [],
+          dataProviders: [
+            {
+              and: [],
+              id: '123',
+              name: 'data provider 1',
+              enabled: false, // This value changed from true to false
+              excluded: false,
+              kqlQuery: '',
+              queryMatch: {
+                field: '',
+                value: '',
+                operator: IS_OPERATOR,
+              },
+            },
+          ],
+          deletedEventIds: [],
+          description: '',
+          eventIdToNoteIds: {},
+          highlightedDropAndProviderId: '',
+          historyIds: [],
+          isFavorite: false,
+          isLive: false,
+          isSelectAllChecked: false,
+          isLoading: false,
+          kqlMode: 'filter',
+          kqlQuery: { filterQuery: null, filterQueryDraft: null },
+          loadingEventIds: [],
+          title: '',
+          timelineType: TimelineType.default,
+          templateTimelineVersion: null,
+          templateTimelineId: null,
+          noteIds: [],
+          dateRange: {
+            start: 0,
+            end: 0,
+          },
+          selectedEventIds: {},
+          show: true,
+          showRowRenderers: true,
+          showCheckboxes: false,
+          sort: {
+            columnId: '@timestamp',
+            sortDirection: Direction.desc,
+          },
+          pinnedEventIds: {},
+          pinnedEventsSaveObject: {},
+          itemsPerPage: 25,
+          itemsPerPageOptions: [10, 25, 50],
+          width: DEFAULT_TIMELINE_WIDTH,
+          isSaving: false,
+          version: null,
+        },
+      };
+      expect(update).toEqual(expected);
+    });
+
+    test('should update only one data provider and not two data providers', () => {
+      const multiDataProvider = timelineByIdMock.foo.dataProviders.concat({
+        and: [],
+        id: '456',
+        name: 'data provider 1',
+        enabled: true,
+        excluded: false,
+        kqlQuery: '',
+        queryMatch: {
+          field: '',
+          value: '',
+          operator: IS_OPERATOR,
+        },
+      });
+      const multiDataProviderMock = set('foo.dataProviders', multiDataProvider, timelineByIdMock);
+      const update = updateTimelineProviderEnabled({
+        id: 'foo',
+        providerId: '123',
+        enabled: false, // value we are updating from true to false
+        timelineById: multiDataProviderMock,
+      });
+      const expected: TimelineById = {
+        foo: {
+          id: 'foo',
+          savedObjectId: null,
+          columns: [],
+          dataProviders: [
+            {
+              and: [],
+              id: '123',
+              name: 'data provider 1',
+              enabled: false, // value we are updating from true to false
+              excluded: false,
+              kqlQuery: '',
+              queryMatch: {
+                field: '',
+                value: '',
+                operator: IS_OPERATOR,
+              },
+            },
+            {
+              and: [],
+              id: '456',
+              name: 'data provider 1',
+              enabled: true,
+              excluded: false,
+              kqlQuery: '',
+              queryMatch: {
+                field: '',
+                value: '',
+                operator: IS_OPERATOR,
+              },
+            },
+          ],
+          description: '',
+          deletedEventIds: [],
+          eventIdToNoteIds: {},
+          highlightedDropAndProviderId: '',
+          historyIds: [],
+          isFavorite: false,
+          isLive: false,
+          isSelectAllChecked: false,
+          isLoading: false,
+          kqlMode: 'filter',
+          kqlQuery: { filterQuery: null, filterQueryDraft: null },
+          loadingEventIds: [],
+          title: '',
+          timelineType: TimelineType.default,
+          templateTimelineVersion: null,
+          templateTimelineId: null,
+          noteIds: [],
+          dateRange: {
+            start: 0,
+            end: 0,
+          },
+          selectedEventIds: {},
+          show: true,
+          showRowRenderers: true,
+          showCheckboxes: false,
+          sort: {
+            columnId: '@timestamp',
+            sortDirection: Direction.desc,
+          },
+          pinnedEventIds: {},
+          pinnedEventsSaveObject: {},
+          itemsPerPage: 25,
+          itemsPerPageOptions: [10, 25, 50],
+          width: DEFAULT_TIMELINE_WIDTH,
+          isSaving: false,
+          version: null,
+        },
+      };
+      expect(update).toEqual(expected);
+    });
+  });
+
+  describe('#updateTimelineAndProviderEnabled', () => {
+    let timelineByIdwithAndMock: TimelineById = timelineByIdMock;
+    beforeEach(() => {
+      const providerToAdd: DataProvider = {
+        and: [
+          {
+            id: '568',
+            name: 'And Data Provider',
+            enabled: true,
+            queryMatch: {
+              field: '',
+              value: '',
+              operator: IS_OPERATOR,
+            },
+
+            excluded: false,
+            kqlQuery: '',
+          },
+        ],
+        id: '567',
+        name: 'data provider 1',
+        enabled: true,
+        queryMatch: {
+          field: '',
+          value: '',
+          operator: IS_OPERATOR,
+        },
+
+        excluded: false,
+        kqlQuery: '',
+      };
+
+      timelineByIdwithAndMock = addTimelineProvider({
+        id: 'foo',
+        provider: providerToAdd,
+        timelineById: timelineByIdMock,
+      });
+    });
+
+    test('should return a new reference and not the same reference', () => {
+      const update = updateTimelineProviderEnabled({
+        id: 'foo',
+        providerId: '567',
+        enabled: false, // value we are updating from true to false
+        timelineById: timelineByIdwithAndMock,
+        andProviderId: '568',
+      });
+      expect(update).not.toBe(timelineByIdwithAndMock);
+    });
+
+    test('should return a new reference for and data provider and not the same reference of data and provider', () => {
+      const update = updateTimelineProviderEnabled({
+        id: 'foo',
+        providerId: '567',
+        enabled: false, // value we are updating from true to false
+        timelineById: timelineByIdwithAndMock,
+        andProviderId: '568',
+      });
+      expect(update.foo.dataProviders).not.toBe(timelineByIdMock.foo.dataProviders);
+    });
+
+    test('should update the timeline and provider enabled from true to false', () => {
+      const update = updateTimelineProviderEnabled({
+        id: 'foo',
+        providerId: '567',
+        enabled: false, // value we are updating from true to false
+        timelineById: timelineByIdwithAndMock,
+        andProviderId: '568',
+      });
+      const indexProvider = update.foo.dataProviders.findIndex(i => i.id === '567');
+      expect(update.foo.dataProviders[indexProvider].and[0].enabled).toEqual(false);
+    });
+
+    test('should update only one and data provider and not two and data providers', () => {
+      const indexProvider = timelineByIdwithAndMock.foo.dataProviders.findIndex(
+        i => i.id === '567'
+      );
+      const multiAndDataProvider = timelineByIdwithAndMock.foo.dataProviders[
+        indexProvider
+      ].and.concat({
+        id: '456',
+        name: 'new and data provider',
+        enabled: true,
+        queryMatch: {
+          field: '',
+          value: '',
+          operator: IS_OPERATOR,
+        },
+
+        excluded: false,
+        kqlQuery: '',
+      });
+      const multiAndDataProviderMock = set(
+        `foo.dataProviders[${indexProvider}].and`,
+        multiAndDataProvider,
+        timelineByIdwithAndMock
+      );
+      const update = updateTimelineProviderEnabled({
+        id: 'foo',
+        providerId: '567',
+        enabled: false, // value we are updating from true to false
+        timelineById: multiAndDataProviderMock,
+        andProviderId: '568',
+      });
+      const oldAndProvider = update.foo.dataProviders[indexProvider].and.find(i => i.id === '568');
+      const newAndProvider = update.foo.dataProviders[indexProvider].and.find(i => i.id === '456');
+      expect(oldAndProvider!.enabled).toEqual(false);
+      expect(newAndProvider!.enabled).toEqual(true);
+    });
+  });
+
+  describe('#updateTimelineProviderExcluded', () => {
+    test('should return a new reference and not the same reference', () => {
+      const update = updateTimelineProviderExcluded({
+        id: 'foo',
+        providerId: '123',
+        excluded: true, // value we are updating from false to true
+        timelineById: timelineByIdMock,
+      });
+      expect(update).not.toBe(timelineByIdMock);
+    });
+
+    test('should return a new reference for data provider and not the same reference of data provider', () => {
+      const update = updateTimelineProviderExcluded({
+        id: 'foo',
+        providerId: '123',
+        excluded: true, // value we are updating from false to true
+        timelineById: timelineByIdMock,
+      });
+      expect(update.foo.dataProviders).not.toBe(timelineByIdMock.foo.dataProviders);
+    });
+
+    test('should update the timeline provider excluded from true to false', () => {
+      const update = updateTimelineProviderExcluded({
+        id: 'foo',
+        providerId: '123',
+        excluded: true, // value we are updating from false to true
+        timelineById: timelineByIdMock,
+      });
+      const expected: TimelineById = {
+        foo: {
+          id: 'foo',
+          savedObjectId: null,
+          columns: [],
+          dataProviders: [
+            {
+              and: [],
+              id: '123',
+              name: 'data provider 1',
+              enabled: true,
+              excluded: true, // This value changed from true to false
+              kqlQuery: '',
+              queryMatch: {
+                field: '',
+                value: '',
+                operator: IS_OPERATOR,
+              },
+            },
+          ],
+          description: '',
+          deletedEventIds: [],
+          eventIdToNoteIds: {},
+          highlightedDropAndProviderId: '',
+          historyIds: [],
+          isFavorite: false,
+          isLive: false,
+          isSelectAllChecked: false,
+          isLoading: false,
+          kqlMode: 'filter',
+          kqlQuery: { filterQuery: null, filterQueryDraft: null },
+          loadingEventIds: [],
+          title: '',
+          timelineType: TimelineType.default,
+          templateTimelineVersion: null,
+          templateTimelineId: null,
+          noteIds: [],
+          dateRange: {
+            start: 0,
+            end: 0,
+          },
+          selectedEventIds: {},
+          show: true,
+          showRowRenderers: true,
+          showCheckboxes: false,
+          sort: {
+            columnId: '@timestamp',
+            sortDirection: Direction.desc,
+          },
+          pinnedEventIds: {},
+          pinnedEventsSaveObject: {},
+          itemsPerPage: 25,
+          itemsPerPageOptions: [10, 25, 50],
+          width: DEFAULT_TIMELINE_WIDTH,
+          isSaving: false,
+          version: null,
+        },
+      };
+      expect(update).toEqual(expected);
+    });
+
+    test('should update only one data provider and not two data providers', () => {
+      const multiDataProvider = timelineByIdMock.foo.dataProviders.concat({
+        and: [],
+        id: '456',
+        name: 'data provider 1',
+        enabled: true,
+        excluded: false,
+        kqlQuery: '',
+        queryMatch: {
+          field: '',
+          value: '',
+          operator: IS_OPERATOR,
+        },
+      });
+      const multiDataProviderMock = set('foo.dataProviders', multiDataProvider, timelineByIdMock);
+      const update = updateTimelineProviderExcluded({
+        id: 'foo',
+        providerId: '123',
+        excluded: true, // value we are updating from false to true
+        timelineById: multiDataProviderMock,
+      });
+      const expected: TimelineById = {
+        foo: {
+          id: 'foo',
+          savedObjectId: null,
+          columns: [],
+          dataProviders: [
+            {
+              and: [],
+              id: '123',
+              name: 'data provider 1',
+              enabled: true,
+              excluded: true, // value we are updating from false to true
+              kqlQuery: '',
+              queryMatch: {
+                field: '',
+                value: '',
+                operator: IS_OPERATOR,
+              },
+            },
+            {
+              and: [],
+              id: '456',
+              name: 'data provider 1',
+              enabled: true,
+              excluded: false,
+              kqlQuery: '',
+              queryMatch: {
+                field: '',
+                value: '',
+                operator: IS_OPERATOR,
+              },
+            },
+          ],
+          description: '',
+          deletedEventIds: [],
+          eventIdToNoteIds: {},
+          highlightedDropAndProviderId: '',
+          historyIds: [],
+          isFavorite: false,
+          isLive: false,
+          isSelectAllChecked: false,
+          isLoading: false,
+          kqlMode: 'filter',
+          kqlQuery: { filterQuery: null, filterQueryDraft: null },
+          loadingEventIds: [],
+          title: '',
+          timelineType: TimelineType.default,
+          templateTimelineId: null,
+          templateTimelineVersion: null,
+          noteIds: [],
+          dateRange: {
+            start: 0,
+            end: 0,
+          },
+          selectedEventIds: {},
+          show: true,
+          showRowRenderers: true,
+          showCheckboxes: false,
+          sort: {
+            columnId: '@timestamp',
+            sortDirection: Direction.desc,
+          },
+          pinnedEventIds: {},
+          pinnedEventsSaveObject: {},
+          itemsPerPage: 25,
+          itemsPerPageOptions: [10, 25, 50],
+          width: DEFAULT_TIMELINE_WIDTH,
+          isSaving: false,
+          version: null,
+        },
+      };
+      expect(update).toEqual(expected);
+    });
+  });
+
+  describe('#updateTimelineAndProviderExcluded', () => {
+    let timelineByIdwithAndMock: TimelineById = timelineByIdMock;
+    beforeEach(() => {
+      const providerToAdd: DataProvider = {
+        and: [
+          {
+            id: '568',
+            name: 'And Data Provider',
+            enabled: true,
+            queryMatch: {
+              field: '',
+              value: '',
+              operator: IS_OPERATOR,
+            },
+
+            excluded: false,
+            kqlQuery: '',
+          },
+        ],
+        id: '567',
+        name: 'data provider 1',
+        enabled: true,
+        queryMatch: {
+          field: '',
+          value: '',
+          operator: IS_OPERATOR,
+        },
+
+        excluded: false,
+        kqlQuery: '',
+      };
+
+      timelineByIdwithAndMock = addTimelineProvider({
+        id: 'foo',
+        provider: providerToAdd,
+        timelineById: timelineByIdMock,
+      });
+    });
+
+    test('should return a new reference and not the same reference', () => {
+      const update = updateTimelineProviderExcluded({
+        id: 'foo',
+        providerId: '567',
+        excluded: true, // value we are updating from true to false
+        timelineById: timelineByIdwithAndMock,
+        andProviderId: '568',
+      });
+      expect(update).not.toBe(timelineByIdwithAndMock);
+    });
+
+    test('should return a new reference for and data provider and not the same reference of data and provider', () => {
+      const update = updateTimelineProviderExcluded({
+        id: 'foo',
+        providerId: '567',
+        excluded: true, // value we are updating from false to true
+        timelineById: timelineByIdwithAndMock,
+        andProviderId: '568',
+      });
+      expect(update.foo.dataProviders).not.toBe(timelineByIdMock.foo.dataProviders);
+    });
+
+    test('should update the timeline and provider excluded from true to false', () => {
+      const update = updateTimelineProviderExcluded({
+        id: 'foo',
+        providerId: '567',
+        excluded: true, // value we are updating from true to false
+        timelineById: timelineByIdwithAndMock,
+        andProviderId: '568',
+      });
+      const indexProvider = update.foo.dataProviders.findIndex(i => i.id === '567');
+      expect(update.foo.dataProviders[indexProvider].and[0].enabled).toEqual(true);
+    });
+
+    test('should update only one and data provider and not two and data providers', () => {
+      const indexProvider = timelineByIdwithAndMock.foo.dataProviders.findIndex(
+        i => i.id === '567'
+      );
+      const multiAndDataProvider = timelineByIdwithAndMock.foo.dataProviders[
+        indexProvider
+      ].and.concat({
+        id: '456',
+        name: 'new and data provider',
+        enabled: true,
+        queryMatch: {
+          field: '',
+          value: '',
+          operator: IS_OPERATOR,
+        },
+
+        excluded: false,
+        kqlQuery: '',
+      });
+      const multiAndDataProviderMock = set(
+        `foo.dataProviders[${indexProvider}].and`,
+        multiAndDataProvider,
+        timelineByIdwithAndMock
+      );
+      const update = updateTimelineProviderExcluded({
+        id: 'foo',
+        providerId: '567',
+        excluded: true, // value we are updating from true to false
+        timelineById: multiAndDataProviderMock,
+        andProviderId: '568',
+      });
+      const oldAndProvider = update.foo.dataProviders[indexProvider].and.find(i => i.id === '568');
+      const newAndProvider = update.foo.dataProviders[indexProvider].and.find(i => i.id === '456');
+      expect(oldAndProvider!.excluded).toEqual(true);
+      expect(newAndProvider!.excluded).toEqual(false);
+    });
+  });
+
+  describe('#updateTimelineItemsPerPage', () => {
+    test('should return a new reference and not the same reference', () => {
+      const update = updateTimelineItemsPerPage({
+        id: 'foo',
+        itemsPerPage: 10, // value we are updating from 5 to 10
+        timelineById: timelineByIdMock,
+      });
+      expect(update).not.toBe(timelineByIdMock);
+    });
+
+    test('should update the items per page from 25 to 50', () => {
+      const update = updateTimelineItemsPerPage({
+        id: 'foo',
+        itemsPerPage: 50, // value we are updating from 25 to 50
+        timelineById: timelineByIdMock,
+      });
+      const expected: TimelineById = {
+        foo: {
+          id: 'foo',
+          savedObjectId: null,
+          columns: [],
+          dataProviders: [
+            {
+              and: [],
+              id: '123',
+              name: 'data provider 1',
+              enabled: true,
+              queryMatch: {
+                field: '',
+                value: '',
+                operator: IS_OPERATOR,
+              },
+
+              excluded: false,
+              kqlQuery: '',
+            },
+          ],
+          description: '',
+          deletedEventIds: [],
+          eventIdToNoteIds: {},
+          highlightedDropAndProviderId: '',
+          historyIds: [],
+          isFavorite: false,
+          isLive: false,
+          isSelectAllChecked: false,
+          isLoading: false,
+          kqlMode: 'filter',
+          kqlQuery: { filterQuery: null, filterQueryDraft: null },
+          loadingEventIds: [],
+          title: '',
+          timelineType: TimelineType.default,
+          templateTimelineVersion: null,
+          templateTimelineId: null,
+          noteIds: [],
+          dateRange: {
+            start: 0,
+            end: 0,
+          },
+          selectedEventIds: {},
+          show: true,
+          showRowRenderers: true,
+          showCheckboxes: false,
+          sort: {
+            columnId: '@timestamp',
+            sortDirection: Direction.desc,
+          },
+          pinnedEventIds: {},
+          pinnedEventsSaveObject: {},
+          itemsPerPage: 50,
+          itemsPerPageOptions: [10, 25, 50],
+          width: DEFAULT_TIMELINE_WIDTH,
+          isSaving: false,
+          version: null,
+        },
+      };
+      expect(update).toEqual(expected);
+    });
+  });
+
+  describe('#updateTimelinePerPageOptions', () => {
+    test('should return a new reference and not the same reference', () => {
+      const update = updateTimelinePerPageOptions({
+        id: 'foo',
+        itemsPerPageOptions: [100, 200, 300], // value we are updating from [5, 10, 20]
+        timelineById: timelineByIdMock,
+      });
+      expect(update).not.toBe(timelineByIdMock);
+    });
+
+    test('should update the items per page options from [10, 25, 50] to [100, 200, 300]', () => {
+      const update = updateTimelinePerPageOptions({
+        id: 'foo',
+        itemsPerPageOptions: [100, 200, 300], // value we are updating from [10, 25, 50]
+        timelineById: timelineByIdMock,
+      });
+      const expected: TimelineById = {
+        foo: {
+          columns: [],
+          dataProviders: [
+            {
+              and: [],
+              id: '123',
+              name: 'data provider 1',
+              enabled: true,
+              queryMatch: {
+                field: '',
+                value: '',
+                operator: IS_OPERATOR,
+              },
+
+              excluded: false,
+              kqlQuery: '',
+            },
+          ],
+          description: '',
+          deletedEventIds: [],
+          eventIdToNoteIds: {},
+          highlightedDropAndProviderId: '',
+          historyIds: [],
+          isFavorite: false,
+          isLive: false,
+          isSelectAllChecked: false,
+          isLoading: false,
+          id: 'foo',
+          savedObjectId: null,
+          kqlMode: 'filter',
+          kqlQuery: { filterQuery: null, filterQueryDraft: null },
+          loadingEventIds: [],
+          title: '',
+          timelineType: TimelineType.default,
+          templateTimelineVersion: null,
+          templateTimelineId: null,
+          noteIds: [],
+          dateRange: {
+            start: 0,
+            end: 0,
+          },
+          selectedEventIds: {},
+          show: true,
+          showRowRenderers: true,
+          showCheckboxes: false,
+          sort: {
+            columnId: '@timestamp',
+            sortDirection: Direction.desc,
+          },
+          pinnedEventIds: {},
+          pinnedEventsSaveObject: {},
+          itemsPerPage: 25,
+          itemsPerPageOptions: [100, 200, 300], // updated
+          width: DEFAULT_TIMELINE_WIDTH,
+          isSaving: false,
+          version: null,
+        },
+      };
+      expect(update).toEqual(expected);
+    });
+  });
+
+  describe('#removeTimelineProvider', () => {
+    test('should return a new reference and not the same reference', () => {
+      const update = removeTimelineProvider({
+        id: 'foo',
+        providerId: '123',
+        timelineById: timelineByIdMock,
+      });
+      expect(update).not.toBe(timelineByIdMock);
+    });
+
+    test('should remove a timeline provider', () => {
+      const update = removeTimelineProvider({
+        id: 'foo',
+        providerId: '123',
+        timelineById: timelineByIdMock,
+      });
+      expect(update).toEqual(set('foo.dataProviders', [], timelineByIdMock));
+    });
+
+    test('should remove only one data provider and not two data providers', () => {
+      const multiDataProvider = timelineByIdMock.foo.dataProviders.concat({
+        and: [],
+        id: '456',
+        name: 'data provider 2',
+        enabled: true,
+        queryMatch: {
+          field: '',
+          value: '',
+          operator: IS_OPERATOR,
+        },
+
+        excluded: false,
+        kqlQuery: '',
+      });
+      const multiDataProviderMock = set('foo.dataProviders', multiDataProvider, timelineByIdMock);
+      const update = removeTimelineProvider({
+        id: 'foo',
+        providerId: '123',
+        timelineById: multiDataProviderMock,
+      });
+      const expected: TimelineById = {
+        foo: {
+          columns: [],
+          dataProviders: [
+            {
+              and: [],
+              id: '456',
+              name: 'data provider 2',
+              enabled: true,
+              queryMatch: {
+                field: '',
+                value: '',
+                operator: IS_OPERATOR,
+              },
+
+              excluded: false,
+              kqlQuery: '',
+            },
+          ],
+          description: '',
+          deletedEventIds: [],
+          eventIdToNoteIds: {},
+          highlightedDropAndProviderId: '',
+          historyIds: [],
+          id: 'foo',
+          savedObjectId: null,
+          isFavorite: false,
+          isLive: false,
+          isSelectAllChecked: false,
+          isLoading: false,
+          kqlMode: 'filter',
+          kqlQuery: { filterQuery: null, filterQueryDraft: null },
+          loadingEventIds: [],
+          title: '',
+          timelineType: TimelineType.default,
+          templateTimelineVersion: null,
+          templateTimelineId: null,
+          noteIds: [],
+          dateRange: {
+            start: 0,
+            end: 0,
+          },
+          selectedEventIds: {},
+          show: true,
+          showRowRenderers: true,
+          showCheckboxes: false,
+          sort: {
+            columnId: '@timestamp',
+            sortDirection: Direction.desc,
+          },
+          pinnedEventIds: {},
+          pinnedEventsSaveObject: {},
+          itemsPerPage: 25,
+          itemsPerPageOptions: [10, 25, 50],
+          width: DEFAULT_TIMELINE_WIDTH,
+          isSaving: false,
+          version: null,
+        },
+      };
+      expect(update).toEqual(expected);
+    });
+
+    test('should remove only first provider and not nested andProvider', () => {
+      const dataProviders: DataProvider[] = [
+        {
+          and: [],
+          id: '111',
+          name: 'data provider 1',
+          enabled: true,
+          queryMatch: {
+            field: '',
+            value: '',
+            operator: IS_OPERATOR,
+          },
+
+          excluded: false,
+          kqlQuery: '',
+        },
+        {
+          and: [],
+          id: '222',
+          name: 'data provider 2',
+          enabled: true,
+          queryMatch: {
+            field: '',
+            value: '',
+            operator: IS_OPERATOR,
+          },
+
+          excluded: false,
+          kqlQuery: '',
+        },
+        {
+          and: [],
+          id: '333',
+          name: 'data provider 3',
+          enabled: true,
+          queryMatch: {
+            field: '',
+            value: '',
+            operator: IS_OPERATOR,
+          },
+
+          excluded: false,
+          kqlQuery: '',
+        },
+      ];
+
+      const multiDataProviderMock = set('foo.dataProviders', dataProviders, timelineByIdMock);
+
+      const andDataProvider: DataProvidersAnd = {
+        id: '211',
+        name: 'And Data Provider',
+        enabled: true,
+        queryMatch: {
+          field: '',
+          value: '',
+          operator: IS_OPERATOR,
+        },
+
+        excluded: false,
+        kqlQuery: '',
+      };
+
+      const nestedMultiAndDataProviderMock = set(
+        'foo.dataProviders[1].and',
+        [andDataProvider],
+        multiDataProviderMock
+      );
+
+      const update = removeTimelineProvider({
+        id: 'foo',
+        providerId: '222',
+        timelineById: nestedMultiAndDataProviderMock,
+      });
+      expect(update).toEqual(
+        set(
+          'foo.dataProviders',
+          [
+            nestedMultiAndDataProviderMock.foo.dataProviders[0],
+            { ...andDataProvider, and: [] },
+            nestedMultiAndDataProviderMock.foo.dataProviders[2],
+          ],
+          timelineByIdMock
+        )
+      );
+    });
+
+    test('should remove only the first provider and keep multiple nested andProviders', () => {
+      const multiDataProvider: DataProvider[] = [
+        {
+          and: [
+            {
+              enabled: true,
+              id: 'socket_closed-MSoH7GoB9v5HJNSHRYj1-user_name-root',
+              name: 'root',
+              excluded: false,
+              kqlQuery: '',
+              queryMatch: {
+                field: 'user.name',
+                value: 'root',
+                operator: ':',
+              },
+            },
+            {
+              enabled: true,
+              id: 'executed-yioH7GoB9v5HJNSHKnp5-auditd_result-success',
+              name: 'success',
+              excluded: false,
+              kqlQuery: '',
+              queryMatch: {
+                field: 'auditd.result',
+                value: 'success',
+                operator: ':',
+              },
+            },
+          ],
+          enabled: true,
+          excluded: false,
+          id: 'hosts-table-hostName-suricata-iowa',
+          name: 'suricata-iowa',
+          kqlQuery: '',
+          queryMatch: {
+            field: 'host.name',
+            value: 'suricata-iowa',
+            operator: ':',
+          },
+        },
+      ];
+
+      const multiDataProviderMock = set('foo.dataProviders', multiDataProvider, timelineByIdMock);
+
+      const update = removeTimelineProvider({
+        id: 'foo',
+        providerId: 'hosts-table-hostName-suricata-iowa',
+        timelineById: multiDataProviderMock,
+      });
+
+      expect(update).toEqual(
+        set(
+          'foo.dataProviders',
+          [
+            {
+              enabled: true,
+              id: 'socket_closed-MSoH7GoB9v5HJNSHRYj1-user_name-root',
+              name: 'root',
+              excluded: false,
+              kqlQuery: '',
+              queryMatch: {
+                field: 'user.name',
+                value: 'root',
+                operator: ':',
+              },
+              and: [
+                {
+                  enabled: true,
+                  id: 'executed-yioH7GoB9v5HJNSHKnp5-auditd_result-success',
+                  name: 'success',
+                  excluded: false,
+                  kqlQuery: '',
+                  queryMatch: {
+                    field: 'auditd.result',
+                    value: 'success',
+                    operator: ':',
+                  },
+                },
+              ],
+            },
+          ],
+          timelineByIdMock
+        )
+      );
+    });
+    test('should remove only the first AND provider when the first AND is deleted, and there are multiple andProviders', () => {
+      const multiDataProvider: DataProvider[] = [
+        {
+          and: [
+            {
+              enabled: true,
+              id: 'socket_closed-MSoH7GoB9v5HJNSHRYj1-user_name-root',
+              name: 'root',
+              excluded: false,
+              kqlQuery: '',
+              queryMatch: {
+                field: 'user.name',
+                value: 'root',
+                operator: ':',
+              },
+            },
+            {
+              enabled: true,
+              id: 'executed-yioH7GoB9v5HJNSHKnp5-auditd_result-success',
+              name: 'success',
+              excluded: false,
+              kqlQuery: '',
+              queryMatch: {
+                field: 'auditd.result',
+                value: 'success',
+                operator: ':',
+              },
+            },
+          ],
+          enabled: true,
+          excluded: false,
+          id: 'hosts-table-hostName-suricata-iowa',
+          name: 'suricata-iowa',
+          kqlQuery: '',
+          queryMatch: {
+            field: 'host.name',
+            value: 'suricata-iowa',
+            operator: ':',
+          },
+        },
+      ];
+
+      const multiDataProviderMock = set('foo.dataProviders', multiDataProvider, timelineByIdMock);
+
+      const update = removeTimelineProvider({
+        andProviderId: 'socket_closed-MSoH7GoB9v5HJNSHRYj1-user_name-root',
+        id: 'foo',
+        providerId: 'hosts-table-hostName-suricata-iowa',
+        timelineById: multiDataProviderMock,
+      });
+
+      expect(update).toEqual(
+        set(
+          'foo.dataProviders',
+          [
+            {
+              and: [
+                {
+                  enabled: true,
+                  id: 'executed-yioH7GoB9v5HJNSHKnp5-auditd_result-success',
+                  name: 'success',
+                  excluded: false,
+                  kqlQuery: '',
+                  queryMatch: {
+                    field: 'auditd.result',
+                    value: 'success',
+                    operator: ':',
+                  },
+                },
+              ],
+              enabled: true,
+              excluded: false,
+              id: 'hosts-table-hostName-suricata-iowa',
+              name: 'suricata-iowa',
+              kqlQuery: '',
+              queryMatch: {
+                field: 'host.name',
+                value: 'suricata-iowa',
+                operator: ':',
+              },
+            },
+          ],
+          timelineByIdMock
+        )
+      );
+    });
+
+    test('should remove only the second AND provider when the second AND is deleted, and there are multiple andProviders', () => {
+      const multiDataProvider: DataProvider[] = [
+        {
+          and: [
+            {
+              enabled: true,
+              id: 'socket_closed-MSoH7GoB9v5HJNSHRYj1-user_name-root',
+              name: 'root',
+              excluded: false,
+              kqlQuery: '',
+              queryMatch: {
+                field: 'user.name',
+                value: 'root',
+                operator: ':',
+              },
+            },
+            {
+              enabled: true,
+              id: 'executed-yioH7GoB9v5HJNSHKnp5-auditd_result-success',
+              name: 'success',
+              excluded: false,
+              kqlQuery: '',
+              queryMatch: {
+                field: 'auditd.result',
+                value: 'success',
+                operator: ':',
+              },
+            },
+          ],
+          enabled: true,
+          excluded: false,
+          id: 'hosts-table-hostName-suricata-iowa',
+          name: 'suricata-iowa',
+          kqlQuery: '',
+          queryMatch: {
+            field: 'host.name',
+            value: 'suricata-iowa',
+            operator: ':',
+          },
+        },
+      ];
+
+      const multiDataProviderMock = set('foo.dataProviders', multiDataProvider, timelineByIdMock);
+
+      const update = removeTimelineProvider({
+        andProviderId: 'executed-yioH7GoB9v5HJNSHKnp5-auditd_result-success',
+        id: 'foo',
+        providerId: 'hosts-table-hostName-suricata-iowa',
+        timelineById: multiDataProviderMock,
+      });
+
+      expect(update).toEqual(
+        set(
+          'foo.dataProviders',
+          [
+            {
+              and: [
+                {
+                  enabled: true,
+                  id: 'socket_closed-MSoH7GoB9v5HJNSHRYj1-user_name-root',
+                  name: 'root',
+                  excluded: false,
+                  kqlQuery: '',
+                  queryMatch: {
+                    field: 'user.name',
+                    value: 'root',
+                    operator: ':',
+                  },
+                },
+              ],
+              enabled: true,
+              excluded: false,
+              id: 'hosts-table-hostName-suricata-iowa',
+              name: 'suricata-iowa',
+              kqlQuery: '',
+              queryMatch: {
+                field: 'host.name',
+                value: 'suricata-iowa',
+                operator: ':',
+              },
+            },
+          ],
+          timelineByIdMock
+        )
+      );
+    });
+  });
+});
diff --git a/x-pack/plugins/siem/public/store/timeline/reducer.ts b/x-pack/plugins/siem/public/timelines/store/timeline/reducer.ts
similarity index 100%
rename from x-pack/plugins/siem/public/store/timeline/reducer.ts
rename to x-pack/plugins/siem/public/timelines/store/timeline/reducer.ts
diff --git a/x-pack/plugins/siem/public/timelines/store/timeline/refetch_queries.ts b/x-pack/plugins/siem/public/timelines/store/timeline/refetch_queries.ts
new file mode 100644
index 00000000000000..f5a30ed831bd68
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/store/timeline/refetch_queries.ts
@@ -0,0 +1,24 @@
+/*
+ * 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 { allTimelinesQuery } from '../../../timelines/containers/all/index.gql_query';
+import { Direction } from '../../../graphql/types';
+import { DEFAULT_SORT_FIELD } from '../../../timelines/components/open_timeline/constants';
+
+export const refetchQueries = [
+  {
+    query: allTimelinesQuery,
+    variables: {
+      search: '',
+      pageInfo: {
+        pageIndex: 1,
+        pageSize: 10,
+      },
+      sort: { sortField: DEFAULT_SORT_FIELD, sortOrder: Direction.desc },
+      onlyUserFavorite: false,
+    },
+  },
+];
diff --git a/x-pack/plugins/siem/public/timelines/store/timeline/selectors.ts b/x-pack/plugins/siem/public/timelines/store/timeline/selectors.ts
new file mode 100644
index 00000000000000..03e9d722ac93e6
--- /dev/null
+++ b/x-pack/plugins/siem/public/timelines/store/timeline/selectors.ts
@@ -0,0 +1,76 @@
+/*
+ * 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 { createSelector } from 'reselect';
+
+import { isFromKueryExpressionValid } from '../../../common/lib/keury';
+import { State } from '../../../common/store/reducer';
+
+import { TimelineModel } from './model';
+import { AutoSavedWarningMsg, TimelineById } from './types';
+
+const selectTimelineById = (state: State): TimelineById => state.timeline.timelineById;
+
+const selectAutoSaveMsg = (state: State): AutoSavedWarningMsg => state.timeline.autoSavedWarningMsg;
+
+const selectCallOutUnauthorizedMsg = (state: State): boolean =>
+  state.timeline.showCallOutUnauthorizedMsg;
+
+export const selectTimeline = (state: State, timelineId: string): TimelineModel =>
+  state.timeline.timelineById[timelineId];
+
+export const autoSaveMsgSelector = createSelector(selectAutoSaveMsg, autoSaveMsg => autoSaveMsg);
+
+export const timelineByIdSelector = createSelector(
+  selectTimelineById,
+  timelineById => timelineById
+);
+
+export const getShowCallOutUnauthorizedMsg = () =>
+  createSelector(
+    selectCallOutUnauthorizedMsg,
+    showCallOutUnauthorizedMsg => showCallOutUnauthorizedMsg
+  );
+
+export const getTimelines = () => timelineByIdSelector;
+
+export const getTimelineByIdSelector = () => createSelector(selectTimeline, timeline => timeline);
+
+export const getEventsByIdSelector = () => createSelector(selectTimeline, timeline => timeline);
+
+export const getKqlFilterQuerySelector = () =>
+  createSelector(selectTimeline, timeline =>
+    timeline &&
+    timeline.kqlQuery &&
+    timeline.kqlQuery.filterQuery &&
+    timeline.kqlQuery.filterQuery.kuery
+      ? timeline.kqlQuery.filterQuery.kuery.expression
+      : null
+  );
+
+export const getKqlFilterQueryDraftSelector = () =>
+  createSelector(selectTimeline, timeline =>
+    timeline && timeline.kqlQuery ? timeline.kqlQuery.filterQueryDraft : null
+  );
+
+export const getKqlFilterKuerySelector = () =>
+  createSelector(selectTimeline, timeline =>
+    timeline &&
+    timeline.kqlQuery &&
+    timeline.kqlQuery.filterQuery &&
+    timeline.kqlQuery.filterQuery.kuery
+      ? timeline.kqlQuery.filterQuery.kuery
+      : null
+  );
+
+export const isFilterQueryDraftValidSelector = () =>
+  createSelector(
+    selectTimeline,
+    timeline =>
+      timeline &&
+      timeline.kqlQuery &&
+      isFromKueryExpressionValid(timeline.kqlQuery.filterQueryDraft)
+  );
diff --git a/x-pack/plugins/siem/public/store/timeline/types.ts b/x-pack/plugins/siem/public/timelines/store/timeline/types.ts
similarity index 100%
rename from x-pack/plugins/siem/public/store/timeline/types.ts
rename to x-pack/plugins/siem/public/timelines/store/timeline/types.ts
diff --git a/x-pack/plugins/siem/public/utils/route/index.test.tsx b/x-pack/plugins/siem/public/utils/route/index.test.tsx
deleted file mode 100644
index e777d281ed51ab..00000000000000
--- a/x-pack/plugins/siem/public/utils/route/index.test.tsx
+++ /dev/null
@@ -1,205 +0,0 @@
-/*
- * 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 { mount } from 'enzyme';
-import React from 'react';
-
-import { HostsTableType } from '../../store/hosts/model';
-import { RouteSpyState } from './types';
-import { ManageRoutesSpy } from './manage_spy_routes';
-import { SpyRouteComponent } from './spy_routes';
-import { useRouteSpy } from './use_route_spy';
-
-type Action = 'PUSH' | 'POP' | 'REPLACE';
-const pop: Action = 'POP';
-
-const defaultLocation = {
-  hash: '',
-  pathname: '/hosts',
-  search: '',
-  state: '',
-};
-
-export const mockHistory = {
-  action: pop,
-  block: jest.fn(),
-  createHref: jest.fn(),
-  go: jest.fn(),
-  goBack: jest.fn(),
-  goForward: jest.fn(),
-  length: 2,
-  listen: jest.fn(),
-  location: defaultLocation,
-  push: jest.fn(),
-  replace: jest.fn(),
-};
-
-const dispatchMock = jest.fn();
-const mockRoutes: RouteSpyState = {
-  pageName: '',
-  detailName: undefined,
-  tabName: undefined,
-  search: '',
-  pathName: '/',
-  history: mockHistory,
-};
-
-const mockUseRouteSpy: jest.Mock = useRouteSpy as jest.Mock;
-jest.mock('./use_route_spy', () => ({
-  useRouteSpy: jest.fn(),
-}));
-
-describe('Spy Routes', () => {
-  describe('At Initialization of the app', () => {
-    beforeEach(() => {
-      dispatchMock.mockReset();
-      dispatchMock.mockClear();
-    });
-    test('Make sure we update search state first', () => {
-      const pathname = '/';
-      mockUseRouteSpy.mockImplementation(() => [mockRoutes, dispatchMock]);
-      mount(
-        <ManageRoutesSpy>
-          <SpyRouteComponent
-            location={{ hash: '', pathname, search: '?importantQueryString="really"', state: '' }}
-            history={mockHistory}
-            match={{
-              isExact: false,
-              path: pathname,
-              url: pathname,
-              params: {
-                pageName: undefined,
-                detailName: '',
-                tabName: HostsTableType.hosts,
-                search: '',
-                flowTarget: undefined,
-              },
-            }}
-          />
-        </ManageRoutesSpy>
-      );
-
-      expect(dispatchMock.mock.calls[0]).toEqual([
-        {
-          type: 'updateSearch',
-          search: '?importantQueryString="really"',
-        },
-      ]);
-    });
-
-    test('Make sure we update search state first and then update the route but keeping the initial search', () => {
-      const pathname = '/hosts/allHosts';
-      mockUseRouteSpy.mockImplementation(() => [mockRoutes, dispatchMock]);
-      mount(
-        <ManageRoutesSpy>
-          <SpyRouteComponent
-            location={{ hash: '', pathname, search: '?importantQueryString="really"', state: '' }}
-            history={mockHistory}
-            match={{
-              isExact: false,
-              path: pathname,
-              url: pathname,
-              params: {
-                pageName: 'hosts',
-                detailName: undefined,
-                tabName: HostsTableType.hosts,
-                search: '?IdoNotWantToSeeYou="true"',
-                flowTarget: undefined,
-              },
-            }}
-          />
-        </ManageRoutesSpy>
-      );
-
-      expect(dispatchMock.mock.calls[0]).toEqual([
-        {
-          type: 'updateSearch',
-          search: '?importantQueryString="really"',
-        },
-      ]);
-
-      expect(dispatchMock.mock.calls[1]).toEqual([
-        {
-          route: {
-            detailName: undefined,
-            history: mockHistory,
-            pageName: 'hosts',
-            pathName: pathname,
-            tabName: HostsTableType.hosts,
-          },
-          type: 'updateRouteWithOutSearch',
-        },
-      ]);
-    });
-  });
-
-  describe('When app is running', () => {
-    beforeEach(() => {
-      dispatchMock.mockReset();
-      dispatchMock.mockClear();
-    });
-    test('Update route should be updated when there is changed detected', () => {
-      const pathname = '/hosts/allHosts';
-      const newPathname = `hosts/${HostsTableType.authentications}`;
-      mockUseRouteSpy.mockImplementation(() => [mockRoutes, dispatchMock]);
-      const wrapper = mount(
-        <SpyRouteComponent
-          location={{ hash: '', pathname, search: '?importantQueryString="really"', state: '' }}
-          history={mockHistory}
-          match={{
-            isExact: false,
-            path: pathname,
-            url: pathname,
-            params: {
-              pageName: 'hosts',
-              detailName: undefined,
-              tabName: HostsTableType.hosts,
-              search: '?IdoNotWantToSeeYou="true"',
-              flowTarget: undefined,
-            },
-          }}
-        />
-      );
-
-      dispatchMock.mockReset();
-      dispatchMock.mockClear();
-
-      wrapper.setProps({
-        location: {
-          hash: '',
-          pathname: newPathname,
-          search: '?updated="true"',
-          state: '',
-        },
-        match: {
-          isExact: false,
-          path: newPathname,
-          url: newPathname,
-          params: {
-            pageName: 'hosts',
-            detailName: undefined,
-            tabName: HostsTableType.authentications,
-            search: '',
-          },
-        },
-      });
-      wrapper.update();
-      expect(dispatchMock.mock.calls[0]).toEqual([
-        {
-          route: {
-            detailName: undefined,
-            history: mockHistory,
-            pageName: 'hosts',
-            pathName: newPathname,
-            tabName: HostsTableType.authentications,
-            search: '?updated="true"',
-          },
-          type: 'updateRoute',
-        },
-      ]);
-    });
-  });
-});
diff --git a/x-pack/plugins/siem/public/utils/route/types.ts b/x-pack/plugins/siem/public/utils/route/types.ts
deleted file mode 100644
index 17b312a427c435..00000000000000
--- a/x-pack/plugins/siem/public/utils/route/types.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-/*
- * 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 * as H from 'history';
-import React from 'react';
-import { RouteComponentProps } from 'react-router-dom';
-
-import { TimelineType } from '../../../common/types/timeline';
-
-import { HostsTableType } from '../../store/hosts/model';
-import { NetworkRouteType } from '../../pages/network/navigation/types';
-import { FlowTarget } from '../../graphql/types';
-
-export type SiemRouteType = HostsTableType | NetworkRouteType | TimelineType;
-export interface RouteSpyState {
-  pageName: string;
-  detailName: string | undefined;
-  tabName: SiemRouteType | undefined;
-  search: string;
-  pathName: string;
-  history?: H.History;
-  flowTarget?: FlowTarget;
-  state?: Record<string, string | undefined>;
-}
-
-export interface HostRouteSpyState extends RouteSpyState {
-  tabName: HostsTableType | undefined;
-}
-
-export interface NetworkRouteSpyState extends RouteSpyState {
-  tabName: NetworkRouteType | undefined;
-}
-
-export interface TimelineRouteSpyState extends RouteSpyState {
-  tabName: TimelineType | undefined;
-}
-
-export type RouteSpyAction =
-  | {
-      type: 'updateSearch';
-      search: string;
-    }
-  | {
-      type: 'updateRouteWithOutSearch';
-      route: Pick<
-        RouteSpyState,
-        'pageName' & 'detailName' & 'tabName' & 'pathName' & 'history' & 'state'
-      >;
-    }
-  | {
-      type: 'updateRoute';
-      route: RouteSpyState;
-    };
-
-export interface ManageRoutesSpyProps {
-  children: React.ReactNode;
-}
-
-export type SpyRouteProps = RouteComponentProps<{
-  pageName: string | undefined;
-  detailName: string | undefined;
-  tabName: HostsTableType | undefined;
-  search: string;
-  flowTarget: FlowTarget | undefined;
-}> & {
-  state?: Record<string, string | undefined>;
-};
diff --git a/x-pack/plugins/siem/public/utils/saved_query_services/index.tsx b/x-pack/plugins/siem/public/utils/saved_query_services/index.tsx
deleted file mode 100644
index 335398177f0f43..00000000000000
--- a/x-pack/plugins/siem/public/utils/saved_query_services/index.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-/*
- * 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 { useState, useEffect } from 'react';
-import {
-  SavedQueryService,
-  createSavedQueryService,
-} from '../../../../../../src/plugins/data/public';
-
-import { useKibana } from '../../lib/kibana';
-
-export const useSavedQueryServices = () => {
-  const kibana = useKibana();
-  const client = kibana.services.savedObjects.client;
-
-  const [savedQueryService, setSavedQueryService] = useState<SavedQueryService>(
-    createSavedQueryService(client)
-  );
-
-  useEffect(() => {
-    setSavedQueryService(createSavedQueryService(client));
-  }, [client]);
-  return savedQueryService;
-};
diff --git a/x-pack/test/api_integration/apis/siem/authentications.ts b/x-pack/test/api_integration/apis/siem/authentications.ts
index b89a1448d5fe6f..2a9a6d669f3fd0 100644
--- a/x-pack/test/api_integration/apis/siem/authentications.ts
+++ b/x-pack/test/api_integration/apis/siem/authentications.ts
@@ -6,7 +6,7 @@
 
 import expect from '@kbn/expect';
 
-import { authenticationsQuery } from '../../../../plugins/siem/public/containers/authentications/index.gql_query';
+import { authenticationsQuery } from '../../../../plugins/siem/public/hosts/containers/authentications/index.gql_query';
 import { GetAuthenticationsQuery } from '../../../../plugins/siem/public/graphql/types';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
diff --git a/x-pack/test/api_integration/apis/siem/hosts.ts b/x-pack/test/api_integration/apis/siem/hosts.ts
index 0a2ee9c82bce22..8acf87d88c5fa8 100644
--- a/x-pack/test/api_integration/apis/siem/hosts.ts
+++ b/x-pack/test/api_integration/apis/siem/hosts.ts
@@ -13,9 +13,9 @@ import {
   GetHostsTableQuery,
   HostsFields,
 } from '../../../../plugins/siem/public/graphql/types';
-import { HostOverviewQuery } from '../../../../plugins/siem/public/containers/hosts/overview/host_overview.gql_query';
-import { HostFirstLastSeenGqlQuery } from '../../../../plugins/siem/public/containers/hosts/first_last_seen/first_last_seen.gql_query';
-import { HostsTableQuery } from '../../../../plugins/siem/public/containers/hosts/hosts_table.gql_query';
+import { HostOverviewQuery } from '../../../../plugins/siem/public/hosts/containers/hosts/overview/host_overview.gql_query';
+import { HostFirstLastSeenGqlQuery } from '../../../../plugins/siem/public/hosts/containers/hosts/first_last_seen/first_last_seen.gql_query';
+import { HostsTableQuery } from '../../../../plugins/siem/public/hosts/containers/hosts/hosts_table.gql_query';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 const FROM = new Date('2000-01-01T00:00:00.000Z').valueOf();
diff --git a/x-pack/test/api_integration/apis/siem/ip_overview.ts b/x-pack/test/api_integration/apis/siem/ip_overview.ts
index 2f1a792aff25bf..c0ed9cd2da8427 100644
--- a/x-pack/test/api_integration/apis/siem/ip_overview.ts
+++ b/x-pack/test/api_integration/apis/siem/ip_overview.ts
@@ -5,7 +5,7 @@
  */
 
 import expect from '@kbn/expect';
-import { ipOverviewQuery } from '../../../../plugins/siem/public/containers/ip_overview/index.gql_query';
+import { ipOverviewQuery } from '../../../../plugins/siem/public/network/containers/ip_overview/index.gql_query';
 import { GetIpOverviewQuery } from '../../../../plugins/siem/public/graphql/types';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
diff --git a/x-pack/test/api_integration/apis/siem/kpi_host_details.ts b/x-pack/test/api_integration/apis/siem/kpi_host_details.ts
index 30f9f6f04a2423..c108a6dcbc7497 100644
--- a/x-pack/test/api_integration/apis/siem/kpi_host_details.ts
+++ b/x-pack/test/api_integration/apis/siem/kpi_host_details.ts
@@ -5,7 +5,7 @@
  */
 
 import expect from '@kbn/expect';
-import { kpiHostDetailsQuery } from '../../../../plugins/siem/public/containers/kpi_host_details/index.gql_query';
+import { kpiHostDetailsQuery } from '../../../../plugins/siem/public/hosts/containers/kpi_host_details/index.gql_query';
 import { GetKpiHostDetailsQuery } from '../../../../plugins/siem/public/graphql/types';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
diff --git a/x-pack/test/api_integration/apis/siem/kpi_hosts.ts b/x-pack/test/api_integration/apis/siem/kpi_hosts.ts
index 2303b9ecfb78fd..ed4a19f2d7d996 100644
--- a/x-pack/test/api_integration/apis/siem/kpi_hosts.ts
+++ b/x-pack/test/api_integration/apis/siem/kpi_hosts.ts
@@ -5,7 +5,7 @@
  */
 
 import expect from '@kbn/expect';
-import { kpiHostsQuery } from '../../../../plugins/siem/public/containers/kpi_hosts/index.gql_query';
+import { kpiHostsQuery } from '../../../../plugins/siem/public/hosts/containers/kpi_hosts/index.gql_query';
 import { GetKpiHostsQuery } from '../../../../plugins/siem/public/graphql/types';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
diff --git a/x-pack/test/api_integration/apis/siem/kpi_network.ts b/x-pack/test/api_integration/apis/siem/kpi_network.ts
index 22e133e48bbd2b..28f7c80eb32042 100644
--- a/x-pack/test/api_integration/apis/siem/kpi_network.ts
+++ b/x-pack/test/api_integration/apis/siem/kpi_network.ts
@@ -5,7 +5,7 @@
  */
 
 import expect from '@kbn/expect';
-import { kpiNetworkQuery } from '../../../../plugins/siem/public/containers/kpi_network/index.gql_query';
+import { kpiNetworkQuery } from '../../../../plugins/siem/public/network/containers/kpi_network/index.gql_query';
 import { GetKpiNetworkQuery } from '../../../../plugins/siem/public/graphql/types';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
diff --git a/x-pack/test/api_integration/apis/siem/network_dns.ts b/x-pack/test/api_integration/apis/siem/network_dns.ts
index 1eba41e238c819..590727362d7ae8 100644
--- a/x-pack/test/api_integration/apis/siem/network_dns.ts
+++ b/x-pack/test/api_integration/apis/siem/network_dns.ts
@@ -5,7 +5,7 @@
  */
 
 import expect from '@kbn/expect';
-import { networkDnsQuery } from '../../../../plugins/siem/public/containers/network_dns/index.gql_query';
+import { networkDnsQuery } from '../../../../plugins/siem/public/network/containers/network_dns/index.gql_query';
 import {
   Direction,
   GetNetworkDnsQuery,
diff --git a/x-pack/test/api_integration/apis/siem/network_top_n_flow.ts b/x-pack/test/api_integration/apis/siem/network_top_n_flow.ts
index 6ab7945e9000d6..19948967c18090 100644
--- a/x-pack/test/api_integration/apis/siem/network_top_n_flow.ts
+++ b/x-pack/test/api_integration/apis/siem/network_top_n_flow.ts
@@ -5,7 +5,7 @@
  */
 
 import expect from '@kbn/expect';
-import { networkTopNFlowQuery } from '../../../../plugins/siem/public/containers/network_top_n_flow/index.gql_query';
+import { networkTopNFlowQuery } from '../../../../plugins/siem/public/network/containers/network_top_n_flow/index.gql_query';
 import {
   Direction,
   FlowTargetSourceDest,
diff --git a/x-pack/test/api_integration/apis/siem/overview_host.ts b/x-pack/test/api_integration/apis/siem/overview_host.ts
index 95dbb44e30c41c..fe9d04a16c626f 100644
--- a/x-pack/test/api_integration/apis/siem/overview_host.ts
+++ b/x-pack/test/api_integration/apis/siem/overview_host.ts
@@ -7,7 +7,7 @@
 import expect from '@kbn/expect';
 
 import { DEFAULT_INDEX_PATTERN } from '../../../../plugins/siem/common/constants';
-import { overviewHostQuery } from '../../../../plugins/siem/public/containers/overview/overview_host/index.gql_query';
+import { overviewHostQuery } from '../../../../plugins/siem/public/overview/containers//overview_host/index.gql_query';
 import { GetOverviewHostQuery } from '../../../../plugins/siem/public/graphql/types';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
diff --git a/x-pack/test/api_integration/apis/siem/overview_network.ts b/x-pack/test/api_integration/apis/siem/overview_network.ts
index ef7d82d2ea8d96..1b8354e0632f1c 100644
--- a/x-pack/test/api_integration/apis/siem/overview_network.ts
+++ b/x-pack/test/api_integration/apis/siem/overview_network.ts
@@ -5,7 +5,7 @@
  */
 
 import expect from '@kbn/expect';
-import { overviewNetworkQuery } from '../../../../plugins/siem/public/containers/overview/overview_network/index.gql_query';
+import { overviewNetworkQuery } from '../../../../plugins/siem/public/overview/containers/overview_network/index.gql_query';
 import { GetOverviewNetworkQuery } from '../../../../plugins/siem/public/graphql/types';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
diff --git a/x-pack/test/api_integration/apis/siem/saved_objects/notes.ts b/x-pack/test/api_integration/apis/siem/saved_objects/notes.ts
index 75670374b6f632..76c4afb08466e0 100644
--- a/x-pack/test/api_integration/apis/siem/saved_objects/notes.ts
+++ b/x-pack/test/api_integration/apis/siem/saved_objects/notes.ts
@@ -8,7 +8,7 @@ import expect from '@kbn/expect';
 import gql from 'graphql-tag';
 
 import { FtrProviderContext } from '../../../ftr_provider_context';
-import { persistTimelineNoteMutation } from '../../../../../plugins/siem/public/containers/timeline/notes/persist.gql_query';
+import { persistTimelineNoteMutation } from '../../../../../plugins/siem/public/timelines/containers/notes/persist.gql_query';
 
 export default function({ getService }: FtrProviderContext) {
   const esArchiver = getService('esArchiver');
diff --git a/x-pack/test/api_integration/apis/siem/saved_objects/pinned_events.ts b/x-pack/test/api_integration/apis/siem/saved_objects/pinned_events.ts
index 39055e971d1185..4d24ea98821529 100644
--- a/x-pack/test/api_integration/apis/siem/saved_objects/pinned_events.ts
+++ b/x-pack/test/api_integration/apis/siem/saved_objects/pinned_events.ts
@@ -7,7 +7,7 @@
 import expect from '@kbn/expect';
 
 import { FtrProviderContext } from '../../../ftr_provider_context';
-import { persistTimelinePinnedEventMutation } from '../../../../../plugins/siem/public/containers/timeline/pinned_event/persist.gql_query';
+import { persistTimelinePinnedEventMutation } from '../../../../../plugins/siem/public/timelines/containers/pinned_event/persist.gql_query';
 
 export default function({ getService }: FtrProviderContext) {
   const esArchiver = getService('esArchiver');
diff --git a/x-pack/test/api_integration/apis/siem/saved_objects/timeline.ts b/x-pack/test/api_integration/apis/siem/saved_objects/timeline.ts
index 2d9f576ef37e95..b6f272b8d75408 100644
--- a/x-pack/test/api_integration/apis/siem/saved_objects/timeline.ts
+++ b/x-pack/test/api_integration/apis/siem/saved_objects/timeline.ts
@@ -15,9 +15,9 @@ import ApolloClient from 'apollo-client';
 
 import { FtrProviderContext } from '../../../ftr_provider_context';
 
-import { deleteTimelineMutation } from '../../../../../plugins/siem/public/containers/timeline/delete/persist.gql_query';
-import { persistTimelineFavoriteMutation } from '../../../../../plugins/siem/public/containers/timeline/favorite/persist.gql_query';
-import { persistTimelineMutation } from '../../../../../plugins/siem/public/containers/timeline/persist.gql_query';
+import { deleteTimelineMutation } from '../../../../../plugins/siem/public/timelines/containers/delete/persist.gql_query';
+import { persistTimelineFavoriteMutation } from '../../../../../plugins/siem/public/timelines/containers/favorite/persist.gql_query';
+import { persistTimelineMutation } from '../../../../../plugins/siem/public/timelines/containers/persist.gql_query';
 import { TimelineResult } from '../../../../../plugins/siem/public/graphql/types';
 
 export default function({ getService }: FtrProviderContext) {
diff --git a/x-pack/test/api_integration/apis/siem/sources.ts b/x-pack/test/api_integration/apis/siem/sources.ts
index 2338d4ce45c8db..b17280703c9463 100644
--- a/x-pack/test/api_integration/apis/siem/sources.ts
+++ b/x-pack/test/api_integration/apis/siem/sources.ts
@@ -5,7 +5,7 @@
  */
 
 import expect from '@kbn/expect';
-import { sourceQuery } from '../../../../plugins/siem/public/containers/source/index.gql_query';
+import { sourceQuery } from '../../../../plugins/siem/public/common/containers/source/index.gql_query';
 import { SourceQuery } from '../../../../plugins/siem/public/graphql/types';
 
 import { FtrProviderContext } from '../../ftr_provider_context';
diff --git a/x-pack/test/api_integration/apis/siem/timeline.ts b/x-pack/test/api_integration/apis/siem/timeline.ts
index de57b0c3f469fb..14cc957d98eb8f 100644
--- a/x-pack/test/api_integration/apis/siem/timeline.ts
+++ b/x-pack/test/api_integration/apis/siem/timeline.ts
@@ -6,7 +6,7 @@
 
 import expect from '@kbn/expect';
 
-import { timelineQuery } from '../../../../plugins/siem/public/containers/timeline/index.gql_query';
+import { timelineQuery } from '../../../../plugins/siem/public/timelines/containers/index.gql_query';
 import { Direction, GetTimelineQuery } from '../../../../plugins/siem/public/graphql/types';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
diff --git a/x-pack/test/api_integration/apis/siem/timeline_details.ts b/x-pack/test/api_integration/apis/siem/timeline_details.ts
index f88d5355f22c1c..920879cf9cf3ef 100644
--- a/x-pack/test/api_integration/apis/siem/timeline_details.ts
+++ b/x-pack/test/api_integration/apis/siem/timeline_details.ts
@@ -7,7 +7,7 @@
 import expect from '@kbn/expect';
 import { sortBy } from 'lodash';
 
-import { timelineDetailsQuery } from '../../../../plugins/siem/public/containers/timeline/details/index.gql_query';
+import { timelineDetailsQuery } from '../../../../plugins/siem/public/timelines/containers/details/index.gql_query';
 import { DetailItem, GetTimelineDetailsQuery } from '../../../../plugins/siem/public/graphql/types';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
diff --git a/x-pack/test/api_integration/apis/siem/tls.ts b/x-pack/test/api_integration/apis/siem/tls.ts
index e4e8b5db3d7e38..8ee2ef43efe386 100644
--- a/x-pack/test/api_integration/apis/siem/tls.ts
+++ b/x-pack/test/api_integration/apis/siem/tls.ts
@@ -5,7 +5,7 @@
  */
 
 import expect from '@kbn/expect';
-import { tlsQuery } from '../../../../plugins/siem/public/containers/tls/index.gql_query';
+import { tlsQuery } from '../../../../plugins/siem/public/network/containers/tls/index.gql_query';
 import {
   Direction,
   TlsFields,
diff --git a/x-pack/test/api_integration/apis/siem/uncommon_processes.ts b/x-pack/test/api_integration/apis/siem/uncommon_processes.ts
index c9674e740f76d9..325f2f83e53df6 100644
--- a/x-pack/test/api_integration/apis/siem/uncommon_processes.ts
+++ b/x-pack/test/api_integration/apis/siem/uncommon_processes.ts
@@ -6,7 +6,7 @@
 
 import expect from '@kbn/expect';
 
-import { uncommonProcessesQuery } from '../../../../plugins/siem/public/containers/uncommon_processes/index.gql_query';
+import { uncommonProcessesQuery } from '../../../../plugins/siem/public/hosts/containers/uncommon_processes/index.gql_query';
 import { GetUncommonProcessesQuery } from '../../../../plugins/siem/public/graphql/types';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
diff --git a/x-pack/test/api_integration/apis/siem/users.ts b/x-pack/test/api_integration/apis/siem/users.ts
index c8ea1be7d3f11d..c6ac571e86eb33 100644
--- a/x-pack/test/api_integration/apis/siem/users.ts
+++ b/x-pack/test/api_integration/apis/siem/users.ts
@@ -5,7 +5,7 @@
  */
 
 import expect from '@kbn/expect';
-import { usersQuery } from '../../../../plugins/siem/public/containers/users/index.gql_query';
+import { usersQuery } from '../../../../plugins/siem/public/network/containers/users/index.gql_query';
 import {
   Direction,
   UsersFields,