diff --git a/x-pack/plugins/index_lifecycle_management/__jest__/components/edit_policy.test.js b/x-pack/plugins/index_lifecycle_management/__jest__/components/edit_policy.test.js
index 943f663a025d84..c6da347ed8cfef 100644
--- a/x-pack/plugins/index_lifecycle_management/__jest__/components/edit_policy.test.js
+++ b/x-pack/plugins/index_lifecycle_management/__jest__/components/edit_policy.test.js
@@ -5,16 +5,23 @@
  */
 
 import React from 'react';
+import { act } from 'react-dom/test-utils';
 import moment from 'moment-timezone';
 import { Provider } from 'react-redux';
 // axios has a $http like interface so using it to simulate $http
 import axios from 'axios';
 import axiosXhrAdapter from 'axios/lib/adapters/xhr';
-import sinon from 'sinon';
 import { findTestSubject } from '@elastic/eui/lib/test';
 
+import { init as initHttpRequests } from './helpers/http_requests';
+import {
+  notificationServiceMock,
+  fatalErrorsServiceMock,
+} from '../../../../../src/core/public/mocks';
+import { usageCollectionPluginMock } from '../../../../../src/plugins/usage_collection/public/mocks';
+
 import { mountWithIntl } from '../../../../test_utils/enzyme_helpers';
-import { fetchedPolicies, fetchedNodes } from '../../public/application/store/actions';
+import { fetchedPolicies } from '../../public/application/store/actions';
 import { indexLifecycleManagementStore } from '../../public/application/store';
 import { EditPolicy } from '../../public/application/sections/edit_policy';
 import { init as initHttp } from '../../public/application/services/http';
@@ -33,15 +40,17 @@ import {
   policyNameMustBeDifferentErrorMessage,
   policyNameAlreadyUsedErrorMessage,
   maximumDocumentsRequiredMessage,
-} from '../../public/application/store/selectors/lifecycle';
+} from '../../public/application/store/selectors';
 
-initHttp(axios.create({ adapter: axiosXhrAdapter }), (path) => path);
-initUiMetric({ reportUiStats: () => {} });
-initNotification({
-  addDanger: () => {},
-});
+initHttp(axios.create({ adapter: axiosXhrAdapter }));
+initUiMetric(usageCollectionPluginMock.createSetupContract());
+initNotification(
+  notificationServiceMock.createSetupContract().toasts,
+  fatalErrorsServiceMock.createSetupContract()
+);
 
 let server;
+let httpRequestsMockHelpers;
 let store;
 const policy = {
   phases: {
@@ -70,9 +79,11 @@ for (let i = 0; i < 105; i++) {
 window.scrollTo = jest.fn();
 window.TextEncoder = null;
 let component;
-const activatePhase = (rendered, phase) => {
+const activatePhase = async (rendered, phase) => {
   const testSubject = `enablePhaseSwitch-${phase}`;
-  findTestSubject(rendered, testSubject).simulate('click');
+  await act(async () => {
+    await findTestSubject(rendered, testSubject).simulate('click');
+  });
   rendered.update();
 };
 const expectedErrorMessages = (rendered, expectedErrorMessages) => {
@@ -120,16 +131,13 @@ describe('edit policy', () => {
     store = indexLifecycleManagementStore();
     component = (
       <Provider store={store}>
-        <EditPolicy getUrlForApp={() => {}} />
+        <EditPolicy history={{ push: () => {} }} getUrlForApp={() => {}} />
       </Provider>
     );
     store.dispatch(fetchedPolicies(policies));
-    server = sinon.fakeServer.create();
-    server.respondWith('/api/index_lifecycle_management/policies', [
-      200,
-      { 'Content-Type': 'application/json' },
-      JSON.stringify(policies),
-    ]);
+    ({ server, httpRequestsMockHelpers } = initHttpRequests());
+
+    httpRequestsMockHelpers.setPoliciesResponse(policies);
   });
   describe('top level form', () => {
     test('should show error when trying to save empty form', () => {
@@ -242,48 +250,53 @@ describe('edit policy', () => {
     });
   });
   describe('warm phase', () => {
-    test('should show number required error when trying to save empty warm phase', () => {
+    beforeEach(() => {
+      server.respondImmediately = true;
+      httpRequestsMockHelpers.setNodesListResponse({});
+    });
+
+    test('should show number required error when trying to save empty warm phase', async () => {
       const rendered = mountWithIntl(component);
       noRollover(rendered);
       setPolicyName(rendered, 'mypolicy');
-      activatePhase(rendered, 'warm');
+      await activatePhase(rendered, 'warm');
       setPhaseAfter(rendered, 'warm', '');
       save(rendered);
       expectedErrorMessages(rendered, [numberRequiredMessage]);
     });
-    test('should allow 0 for phase timing', () => {
+    test('should allow 0 for phase timing', async () => {
       const rendered = mountWithIntl(component);
       noRollover(rendered);
       setPolicyName(rendered, 'mypolicy');
-      activatePhase(rendered, 'warm');
+      await activatePhase(rendered, 'warm');
       setPhaseAfter(rendered, 'warm', 0);
       save(rendered);
       expectedErrorMessages(rendered, []);
     });
-    test('should show positive number required error when trying to save warm phase with -1 for after', () => {
+    test('should show positive number required error when trying to save warm phase with -1 for after', async () => {
       const rendered = mountWithIntl(component);
       noRollover(rendered);
       setPolicyName(rendered, 'mypolicy');
-      activatePhase(rendered, 'warm');
+      await activatePhase(rendered, 'warm');
       setPhaseAfter(rendered, 'warm', -1);
       save(rendered);
       expectedErrorMessages(rendered, [positiveNumberRequiredMessage]);
     });
-    test('should show positive number required error when trying to save warm phase with -1 for index priority', () => {
+    test('should show positive number required error when trying to save warm phase with -1 for index priority', async () => {
       const rendered = mountWithIntl(component);
       noRollover(rendered);
       setPolicyName(rendered, 'mypolicy');
-      activatePhase(rendered, 'warm');
+      await activatePhase(rendered, 'warm');
       setPhaseAfter(rendered, 'warm', 1);
       setPhaseIndexPriority(rendered, 'warm', -1);
       save(rendered);
       expectedErrorMessages(rendered, [positiveNumberRequiredMessage]);
     });
-    test('should show positive number required above zero error when trying to save warm phase with 0 for shrink', () => {
+    test('should show positive number required above zero error when trying to save warm phase with 0 for shrink', async () => {
       const rendered = mountWithIntl(component);
       noRollover(rendered);
       setPolicyName(rendered, 'mypolicy');
-      activatePhase(rendered, 'warm');
+      await activatePhase(rendered, 'warm');
       findTestSubject(rendered, 'shrinkSwitch').simulate('click');
       rendered.update();
       setPhaseAfter(rendered, 'warm', 1);
@@ -293,11 +306,11 @@ describe('edit policy', () => {
       save(rendered);
       expectedErrorMessages(rendered, [positiveNumbersAboveZeroErrorMessage]);
     });
-    test('should show positive number above 0 required error when trying to save warm phase with -1 for shrink', () => {
+    test('should show positive number above 0 required error when trying to save warm phase with -1 for shrink', async () => {
       const rendered = mountWithIntl(component);
       noRollover(rendered);
       setPolicyName(rendered, 'mypolicy');
-      activatePhase(rendered, 'warm');
+      await activatePhase(rendered, 'warm');
       setPhaseAfter(rendered, 'warm', 1);
       findTestSubject(rendered, 'shrinkSwitch').simulate('click');
       rendered.update();
@@ -307,11 +320,11 @@ describe('edit policy', () => {
       save(rendered);
       expectedErrorMessages(rendered, [positiveNumbersAboveZeroErrorMessage]);
     });
-    test('should show positive number required above zero error when trying to save warm phase with 0 for force merge', () => {
+    test('should show positive number required above zero error when trying to save warm phase with 0 for force merge', async () => {
       const rendered = mountWithIntl(component);
       noRollover(rendered);
       setPolicyName(rendered, 'mypolicy');
-      activatePhase(rendered, 'warm');
+      await activatePhase(rendered, 'warm');
       setPhaseAfter(rendered, 'warm', 1);
       findTestSubject(rendered, 'forceMergeSwitch').simulate('click');
       rendered.update();
@@ -321,11 +334,11 @@ describe('edit policy', () => {
       save(rendered);
       expectedErrorMessages(rendered, [positiveNumbersAboveZeroErrorMessage]);
     });
-    test('should show positive number above 0 required error when trying to save warm phase with -1 for force merge', () => {
+    test('should show positive number above 0 required error when trying to save warm phase with -1 for force merge', async () => {
       const rendered = mountWithIntl(component);
       noRollover(rendered);
       setPolicyName(rendered, 'mypolicy');
-      activatePhase(rendered, 'warm');
+      await activatePhase(rendered, 'warm');
       setPhaseAfter(rendered, 'warm', 1);
       findTestSubject(rendered, 'forceMergeSwitch').simulate('click');
       rendered.update();
@@ -335,43 +348,43 @@ describe('edit policy', () => {
       save(rendered);
       expectedErrorMessages(rendered, [positiveNumbersAboveZeroErrorMessage]);
     });
-    test('should show spinner for node attributes input when loading', () => {
+    test('should show spinner for node attributes input when loading', async () => {
+      server.respondImmediately = false;
       const rendered = mountWithIntl(component);
       noRollover(rendered);
       setPolicyName(rendered, 'mypolicy');
-      activatePhase(rendered, 'warm');
+      await activatePhase(rendered, 'warm');
       expect(rendered.find('.euiLoadingSpinner').exists()).toBeTruthy();
       expect(rendered.find('.euiCallOut--warning').exists()).toBeFalsy();
       expect(getNodeAttributeSelect(rendered, 'warm').exists()).toBeFalsy();
     });
-    test('should show warning instead of node attributes input when none exist', () => {
-      store.dispatch(fetchedNodes({}));
+    test('should show warning instead of node attributes input when none exist', async () => {
       const rendered = mountWithIntl(component);
       noRollover(rendered);
       setPolicyName(rendered, 'mypolicy');
-      activatePhase(rendered, 'warm');
+      await activatePhase(rendered, 'warm');
       expect(rendered.find('.euiLoadingSpinner').exists()).toBeFalsy();
       expect(rendered.find('.euiCallOut--warning').exists()).toBeTruthy();
       expect(getNodeAttributeSelect(rendered, 'warm').exists()).toBeFalsy();
     });
-    test('should show node attributes input when attributes exist', () => {
-      store.dispatch(fetchedNodes({ 'attribute:true': ['node1'] }));
+    test('should show node attributes input when attributes exist', async () => {
+      httpRequestsMockHelpers.setNodesListResponse({ 'attribute:true': ['node1'] });
       const rendered = mountWithIntl(component);
       noRollover(rendered);
       setPolicyName(rendered, 'mypolicy');
-      activatePhase(rendered, 'warm');
+      await activatePhase(rendered, 'warm');
       expect(rendered.find('.euiLoadingSpinner').exists()).toBeFalsy();
       expect(rendered.find('.euiCallOut--warning').exists()).toBeFalsy();
       const nodeAttributesSelect = getNodeAttributeSelect(rendered, 'warm');
       expect(nodeAttributesSelect.exists()).toBeTruthy();
       expect(nodeAttributesSelect.find('option').length).toBe(2);
     });
-    test('should show view node attributes link when attribute selected and show flyout when clicked', () => {
-      store.dispatch(fetchedNodes({ 'attribute:true': ['node1'] }));
+    test('should show view node attributes link when attribute selected and show flyout when clicked', async () => {
+      httpRequestsMockHelpers.setNodesListResponse({ 'attribute:true': ['node1'] });
       const rendered = mountWithIntl(component);
       noRollover(rendered);
       setPolicyName(rendered, 'mypolicy');
-      activatePhase(rendered, 'warm');
+      await activatePhase(rendered, 'warm');
       expect(rendered.find('.euiLoadingSpinner').exists()).toBeFalsy();
       expect(rendered.find('.euiCallOut--warning').exists()).toBeFalsy();
       const nodeAttributesSelect = getNodeAttributeSelect(rendered, 'warm');
@@ -388,61 +401,65 @@ describe('edit policy', () => {
     });
   });
   describe('cold phase', () => {
-    test('should allow 0 for phase timing', () => {
+    beforeEach(() => {
+      server.respondImmediately = true;
+      httpRequestsMockHelpers.setNodesListResponse({});
+    });
+    test('should allow 0 for phase timing', async () => {
       const rendered = mountWithIntl(component);
       noRollover(rendered);
       setPolicyName(rendered, 'mypolicy');
-      activatePhase(rendered, 'cold');
+      await activatePhase(rendered, 'cold');
       setPhaseAfter(rendered, 'cold', 0);
       save(rendered);
       expectedErrorMessages(rendered, []);
     });
-    test('should show positive number required error when trying to save cold phase with -1 for after', () => {
+    test('should show positive number required error when trying to save cold phase with -1 for after', async () => {
       const rendered = mountWithIntl(component);
       noRollover(rendered);
       setPolicyName(rendered, 'mypolicy');
-      activatePhase(rendered, 'cold');
+      await activatePhase(rendered, 'cold');
       setPhaseAfter(rendered, 'cold', -1);
       save(rendered);
       expectedErrorMessages(rendered, [positiveNumberRequiredMessage]);
     });
-    test('should show spinner for node attributes input when loading', () => {
+    test('should show spinner for node attributes input when loading', async () => {
+      server.respondImmediately = false;
       const rendered = mountWithIntl(component);
       noRollover(rendered);
       setPolicyName(rendered, 'mypolicy');
-      activatePhase(rendered, 'cold');
+      await activatePhase(rendered, 'cold');
       expect(rendered.find('.euiLoadingSpinner').exists()).toBeTruthy();
       expect(rendered.find('.euiCallOut--warning').exists()).toBeFalsy();
       expect(getNodeAttributeSelect(rendered, 'cold').exists()).toBeFalsy();
     });
-    test('should show warning instead of node attributes input when none exist', () => {
-      store.dispatch(fetchedNodes({}));
+    test('should show warning instead of node attributes input when none exist', async () => {
       const rendered = mountWithIntl(component);
       noRollover(rendered);
       setPolicyName(rendered, 'mypolicy');
-      activatePhase(rendered, 'cold');
+      await activatePhase(rendered, 'cold');
       expect(rendered.find('.euiLoadingSpinner').exists()).toBeFalsy();
       expect(rendered.find('.euiCallOut--warning').exists()).toBeTruthy();
       expect(getNodeAttributeSelect(rendered, 'cold').exists()).toBeFalsy();
     });
-    test('should show node attributes input when attributes exist', () => {
-      store.dispatch(fetchedNodes({ 'attribute:true': ['node1'] }));
+    test('should show node attributes input when attributes exist', async () => {
+      httpRequestsMockHelpers.setNodesListResponse({ 'attribute:true': ['node1'] });
       const rendered = mountWithIntl(component);
       noRollover(rendered);
       setPolicyName(rendered, 'mypolicy');
-      activatePhase(rendered, 'cold');
+      await activatePhase(rendered, 'cold');
       expect(rendered.find('.euiLoadingSpinner').exists()).toBeFalsy();
       expect(rendered.find('.euiCallOut--warning').exists()).toBeFalsy();
       const nodeAttributesSelect = getNodeAttributeSelect(rendered, 'cold');
       expect(nodeAttributesSelect.exists()).toBeTruthy();
       expect(nodeAttributesSelect.find('option').length).toBe(2);
     });
-    test('should show view node attributes link when attribute selected and show flyout when clicked', () => {
-      store.dispatch(fetchedNodes({ 'attribute:true': ['node1'] }));
+    test('should show view node attributes link when attribute selected and show flyout when clicked', async () => {
+      httpRequestsMockHelpers.setNodesListResponse({ 'attribute:true': ['node1'] });
       const rendered = mountWithIntl(component);
       noRollover(rendered);
       setPolicyName(rendered, 'mypolicy');
-      activatePhase(rendered, 'cold');
+      await activatePhase(rendered, 'cold');
       expect(rendered.find('.euiLoadingSpinner').exists()).toBeFalsy();
       expect(rendered.find('.euiCallOut--warning').exists()).toBeFalsy();
       const nodeAttributesSelect = getNodeAttributeSelect(rendered, 'cold');
@@ -457,11 +474,11 @@ describe('edit policy', () => {
       rendered.update();
       expect(rendered.find('.euiFlyout').exists()).toBeTruthy();
     });
-    test('should show positive number required error when trying to save with -1 for index priority', () => {
+    test('should show positive number required error when trying to save with -1 for index priority', async () => {
       const rendered = mountWithIntl(component);
       noRollover(rendered);
       setPolicyName(rendered, 'mypolicy');
-      activatePhase(rendered, 'cold');
+      await activatePhase(rendered, 'cold');
       setPhaseAfter(rendered, 'cold', 1);
       setPhaseIndexPriority(rendered, 'cold', -1);
       save(rendered);
@@ -469,20 +486,20 @@ describe('edit policy', () => {
     });
   });
   describe('delete phase', () => {
-    test('should allow 0 for phase timing', () => {
+    test('should allow 0 for phase timing', async () => {
       const rendered = mountWithIntl(component);
       noRollover(rendered);
       setPolicyName(rendered, 'mypolicy');
-      activatePhase(rendered, 'delete');
+      await activatePhase(rendered, 'delete');
       setPhaseAfter(rendered, 'delete', 0);
       save(rendered);
       expectedErrorMessages(rendered, []);
     });
-    test('should show positive number required error when trying to save delete phase with -1 for after', () => {
+    test('should show positive number required error when trying to save delete phase with -1 for after', async () => {
       const rendered = mountWithIntl(component);
       noRollover(rendered);
       setPolicyName(rendered, 'mypolicy');
-      activatePhase(rendered, 'delete');
+      await activatePhase(rendered, 'delete');
       setPhaseAfter(rendered, 'delete', -1);
       save(rendered);
       expectedErrorMessages(rendered, [positiveNumberRequiredMessage]);
diff --git a/x-pack/plugins/index_lifecycle_management/__jest__/components/helpers/http_requests.ts b/x-pack/plugins/index_lifecycle_management/__jest__/components/helpers/http_requests.ts
new file mode 100644
index 00000000000000..b5c941beef1818
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/__jest__/components/helpers/http_requests.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 sinon, { SinonFakeServer } from 'sinon';
+
+type HttpResponse = Record<string, any> | any[];
+
+const registerHttpRequestMockHelpers = (server: SinonFakeServer) => {
+  const setPoliciesResponse = (response: HttpResponse = []) => {
+    server.respondWith('/api/index_lifecycle_management/policies', [
+      200,
+      { 'Content-Type': 'application/json' },
+      JSON.stringify(response),
+    ]);
+  };
+
+  const setNodesListResponse = (response: HttpResponse = []) => {
+    server.respondWith('/api/index_lifecycle_management/nodes/list', [
+      200,
+      { 'Content-Type': 'application/json' },
+      JSON.stringify(response),
+    ]);
+  };
+
+  return {
+    setPoliciesResponse,
+    setNodesListResponse,
+  };
+};
+
+export const init = () => {
+  const server = sinon.fakeServer.create();
+
+  // Define default response for unhandled requests.
+  // We make requests to APIs which don't impact the component under test, e.g. UI metric telemetry,
+  // and we can mock them all with a 200 instead of mocking each one individually.
+  server.respondWith([200, {}, 'DefaultSinonMockServerResponse']);
+
+  const httpRequestsMockHelpers = registerHttpRequestMockHelpers(server);
+
+  return {
+    server,
+    httpRequestsMockHelpers,
+  };
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/components/learn_more_link.js b/x-pack/plugins/index_lifecycle_management/public/application/sections/components/learn_more_link.js
deleted file mode 100644
index 2284b9e39835ce..00000000000000
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/components/learn_more_link.js
+++ /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 { EuiLink } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n/react';
-
-import { createDocLink } from '../../services/documentation';
-
-export class LearnMoreLink extends React.PureComponent {
-  render() {
-    const { href, docPath, text } = this.props;
-    let url;
-    if (docPath) {
-      url = createDocLink(docPath);
-    } else {
-      url = href;
-    }
-    const content = text ? (
-      text
-    ) : (
-      <FormattedMessage id="xpack.indexLifecycleMgmt.learnMore" defaultMessage="Learn more" />
-    );
-    return (
-      <EuiLink href={url} target="_blank">
-        {content}
-      </EuiLink>
-    );
-  }
-}
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/components/learn_more_link.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/components/learn_more_link.tsx
new file mode 100644
index 00000000000000..623ff982438d7a
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/components/learn_more_link.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, { ReactNode } from 'react';
+import { EuiLink } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+import { createDocLink } from '../../services/documentation';
+
+interface Props {
+  docPath: string;
+  text?: ReactNode;
+}
+
+export const LearnMoreLink: React.FunctionComponent<Props> = ({ docPath, text }) => {
+  const content = text ? (
+    text
+  ) : (
+    <FormattedMessage id="xpack.indexLifecycleMgmt.learnMore" defaultMessage="Learn more" />
+  );
+  return (
+    <EuiLink href={createDocLink(docPath)} target="_blank" external={true}>
+      {content}
+    </EuiLink>
+  );
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/node_allocation/index.js b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/node_allocation/index.ts
similarity index 79%
rename from x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/node_allocation/index.js
rename to x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/node_allocation/index.ts
index 9138c6a30cfad0..4675ab46ee501c 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/node_allocation/index.js
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/node_allocation/index.ts
@@ -4,4 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { NodeAllocation } from './node_allocation.container';
+export { NodeAllocation } from './node_allocation';
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/node_allocation/node_allocation.container.js b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/node_allocation/node_allocation.container.js
deleted file mode 100644
index 0ddfcbb940aa48..00000000000000
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/node_allocation/node_allocation.container.js
+++ /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 { connect } from 'react-redux';
-
-import { getNodeOptions } from '../../../../store/selectors';
-import { fetchNodes } from '../../../../store/actions';
-import { NodeAllocation as PresentationComponent } from './node_allocation';
-
-export const NodeAllocation = connect(
-  (state) => ({
-    nodeOptions: getNodeOptions(state),
-  }),
-  {
-    fetchNodes,
-  }
-)(PresentationComponent);
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/node_allocation/node_allocation.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/node_allocation/node_allocation.tsx
new file mode 100644
index 00000000000000..841fb26e083f92
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/node_allocation/node_allocation.tsx
@@ -0,0 +1,185 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * 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, { Fragment, useState } from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
+import {
+  EuiSelect,
+  EuiButtonEmpty,
+  EuiCallOut,
+  EuiSpacer,
+  EuiLoadingSpinner,
+  EuiButton,
+} from '@elastic/eui';
+
+import { PHASE_NODE_ATTRS } from '../../../../constants';
+import { LearnMoreLink } from '../../../components/learn_more_link';
+import { ErrableFormRow } from '../../form_errors';
+import { useLoadNodes } from '../../../../services/api';
+import { NodeAttrsDetails } from '../node_attrs_details';
+
+interface Props {
+  phase: string;
+  setPhaseData: (dataKey: string, value: any) => void;
+  errors: any;
+  phaseData: any;
+  isShowingErrors: boolean;
+}
+
+const learnMoreLink = (
+  <Fragment>
+    <EuiSpacer size="m" />
+    <LearnMoreLink
+      text={
+        <FormattedMessage
+          id="xpack.indexLifecycleMgmt.editPolicy.learnAboutShardAllocationLink"
+          defaultMessage="Learn about shard allocation"
+        />
+      }
+      docPath="modules-cluster.html#cluster-shard-allocation-settings"
+    />
+  </Fragment>
+);
+
+export const NodeAllocation: React.FunctionComponent<Props> = ({
+  phase,
+  setPhaseData,
+  errors,
+  phaseData,
+  isShowingErrors,
+}) => {
+  const { isLoading, data: nodes, error, sendRequest } = useLoadNodes();
+
+  const { selectedNodeAttrsForDetails, setSelectedNodeAttrsForDetails } = useState(null);
+
+  if (isLoading) {
+    return (
+      <Fragment>
+        <EuiLoadingSpinner size="xl" />
+        <EuiSpacer size="m" />
+      </Fragment>
+    );
+  }
+
+  if (error) {
+    const { error: errorString, statusCode, message } = error;
+    return (
+      <Fragment>
+        <EuiCallOut
+          style={{ maxWidth: 400 }}
+          title={
+            <FormattedMessage
+              id="xpack.indexLifecycleMgmt.editPolicy.nodeAttributesLoadingFailedTitle"
+              defaultMessage="Unable to load node attributes."
+            />
+          }
+          color="danger"
+        >
+          <p>
+            {statusCode}: {errorString}. {message}
+          </p>
+          <EuiButton onClick={sendRequest} iconType="refresh" color="danger">
+            <FormattedMessage
+              id="xpack.indexLifecycleMgmt.editPolicy.nodeAttributesReloadButton"
+              defaultMessage="Try again"
+            />
+          </EuiButton>
+        </EuiCallOut>
+
+        <EuiSpacer size="xl" />
+      </Fragment>
+    );
+  }
+
+  let nodeOptions = Object.keys(nodes).map((attrs) => ({
+    text: `${attrs} (${nodes[attrs].length})`,
+    value: attrs,
+  }));
+
+  nodeOptions.sort((a, b) => a.value.localeCompare(b.value));
+  if (nodeOptions.length) {
+    nodeOptions = [
+      {
+        text: i18n.translate('xpack.indexLifecycleMgmt.editPolicy.defaultNodeAllocation', {
+          defaultMessage: "Default allocation (don't use attributes)",
+        }),
+        value: '',
+      },
+      ...nodeOptions,
+    ];
+  }
+  if (!nodeOptions.length) {
+    return (
+      <Fragment>
+        <EuiCallOut
+          style={{ maxWidth: 400 }}
+          title={
+            <FormattedMessage
+              id="xpack.indexLifecycleMgmt.editPolicy.nodeAttributesMissingLabel"
+              defaultMessage="No node attributes configured in elasticsearch.yml"
+            />
+          }
+          color="warning"
+        >
+          <FormattedMessage
+            id="xpack.indexLifecycleMgmt.editPolicy.nodeAttributesMissingDescription"
+            defaultMessage="You can't control shard allocation without node attributes."
+          />
+          {learnMoreLink}
+        </EuiCallOut>
+
+        <EuiSpacer size="xl" />
+      </Fragment>
+    );
+  }
+
+  return (
+    <Fragment>
+      <ErrableFormRow
+        id={`${phase}-${PHASE_NODE_ATTRS}`}
+        label={i18n.translate('xpack.indexLifecycleMgmt.editPolicy.nodeAllocationLabel', {
+          defaultMessage: 'Select a node attribute to control shard allocation',
+        })}
+        errorKey={PHASE_NODE_ATTRS}
+        isShowingErrors={isShowingErrors}
+        errors={errors}
+      >
+        <EuiSelect
+          id={`${phase}-${PHASE_NODE_ATTRS}`}
+          value={phaseData[PHASE_NODE_ATTRS] || ' '}
+          options={nodeOptions}
+          onChange={(e) => {
+            setPhaseData(PHASE_NODE_ATTRS, e.target.value);
+          }}
+        />
+      </ErrableFormRow>
+      {!!phaseData[PHASE_NODE_ATTRS] ? (
+        <EuiButtonEmpty
+          style={{ maxWidth: 400 }}
+          data-test-subj={`${phase}-viewNodeDetailsFlyoutButton`}
+          flush="left"
+          iconType="eye"
+          onClick={() => setSelectedNodeAttrsForDetails(phaseData[PHASE_NODE_ATTRS])}
+        >
+          <FormattedMessage
+            id="xpack.indexLifecycleMgmt.editPolicy.viewNodeDetailsButton"
+            defaultMessage="View a list of nodes attached to this configuration"
+          />
+        </EuiButtonEmpty>
+      ) : null}
+      {learnMoreLink}
+      <EuiSpacer size="m" />
+
+      {selectedNodeAttrsForDetails ? (
+        <NodeAttrsDetails
+          selectedNodeAttrs={selectedNodeAttrsForDetails}
+          close={() => setSelectedNodeAttrsForDetails(null)}
+        />
+      ) : null}
+    </Fragment>
+  );
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form_errors.js b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form_errors.tsx
similarity index 57%
rename from x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form_errors.js
rename to x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form_errors.tsx
index 28ebad209ad967..a3278b6c231b94 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form_errors.js
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form_errors.tsx
@@ -4,10 +4,22 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { cloneElement, Children, Fragment } from 'react';
-import { EuiFormRow } from '@elastic/eui';
+import React, { cloneElement, Children, Fragment, ReactElement } from 'react';
+import { EuiFormRow, EuiFormRowProps } from '@elastic/eui';
 
-export const ErrableFormRow = ({ errorKey, isShowingErrors, errors, children, ...rest }) => {
+type Props = EuiFormRowProps & {
+  errorKey: string;
+  isShowingErrors: boolean;
+  errors: Record<string, string[]>;
+};
+
+export const ErrableFormRow: React.FunctionComponent<Props> = ({
+  errorKey,
+  isShowingErrors,
+  errors,
+  children,
+  ...rest
+}) => {
   return (
     <EuiFormRow
       isInvalid={isShowingErrors && errors[errorKey].length > 0}
@@ -16,7 +28,7 @@ export const ErrableFormRow = ({ errorKey, isShowingErrors, errors, children, ..
     >
       <Fragment>
         {Children.map(children, (child) =>
-          cloneElement(child, {
+          cloneElement(child as ReactElement, {
             isInvalid: isShowingErrors && errors[errorKey].length > 0,
           })
         )}
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/services/api.ts b/x-pack/plugins/index_lifecycle_management/public/application/services/api.ts
index bc1034e56fe156..61de37bbfad11a 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/services/api.ts
+++ b/x-pack/plugins/index_lifecycle_management/public/application/services/api.ts
@@ -21,9 +21,13 @@ interface GenericObject {
   [key: string]: any;
 }
 
-export async function loadNodes() {
-  return await sendGet(`nodes/list`);
-}
+export const useLoadNodes = () => {
+  return useRequest({
+    path: `nodes/list`,
+    method: 'get',
+    initialData: [],
+  });
+};
 
 export const useLoadNodeDetails = (selectedNodeAttrs: string) => {
   return useRequest({
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/services/http.ts b/x-pack/plugins/index_lifecycle_management/public/application/services/http.ts
index 0b5f39a52c13fd..fb1a651b5f550e 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/services/http.ts
+++ b/x-pack/plugins/index_lifecycle_management/public/application/services/http.ts
@@ -8,7 +8,6 @@ import { HttpSetup } from 'src/core/public';
 import {
   UseRequestConfig,
   useRequest as _useRequest,
-  Error,
 } from '../../../../../../src/plugins/es_ui_shared/public';
 
 interface GenericObject {
@@ -43,6 +42,8 @@ export function sendDelete(path: string) {
   return _httpClient.delete(getFullPath(path));
 }
 
-export const useRequest = (config: UseRequestConfig) => {
-  return _useRequest<any, Error>(_httpClient, { ...config, path: getFullPath(config.path) });
+export const useRequest = <T = any, E = { statusCode: number; error: string; message: string }>(
+  config: UseRequestConfig
+) => {
+  return _useRequest<T, E>(_httpClient, { ...config, path: getFullPath(config.path) });
 };
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/store/actions/nodes.js b/x-pack/plugins/index_lifecycle_management/public/application/store/actions/nodes.js
index 41d82128178cba..3f1c00db621a75 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/store/actions/nodes.js
+++ b/x-pack/plugins/index_lifecycle_management/public/application/store/actions/nodes.js
@@ -3,30 +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 { i18n } from '@kbn/i18n';
 import { createAction } from 'redux-actions';
-import { showApiError } from '../../services/api_errors';
-import { loadNodes } from '../../services/api';
 import { SET_SELECTED_NODE_ATTRS } from '../../constants';
 
 export const setSelectedNodeAttrs = createAction(SET_SELECTED_NODE_ATTRS);
 export const setSelectedPrimaryShardCount = createAction('SET_SELECTED_PRIMARY_SHARED_COUNT');
 export const setSelectedReplicaCount = createAction('SET_SELECTED_REPLICA_COUNT');
-export const fetchedNodes = createAction('FETCHED_NODES');
-let fetchingNodes = false;
-export const fetchNodes = () => async (dispatch) => {
-  try {
-    if (!fetchingNodes) {
-      fetchingNodes = true;
-      const nodes = await loadNodes();
-      dispatch(fetchedNodes(nodes));
-    }
-  } catch (err) {
-    const title = i18n.translate('xpack.indexLifecycleMgmt.editPolicy.nodeInfoErrorMessage', {
-      defaultMessage: 'Error loading node attribute information',
-    });
-    showApiError(err, title);
-  } finally {
-    fetchingNodes = false;
-  }
-};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/store/reducers/nodes.js b/x-pack/plugins/index_lifecycle_management/public/application/store/reducers/nodes.js
index adbd126e8c2370..383e61b5aacde2 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/store/reducers/nodes.js
+++ b/x-pack/plugins/index_lifecycle_management/public/application/store/reducers/nodes.js
@@ -5,11 +5,7 @@
  */
 
 import { handleActions } from 'redux-actions';
-import {
-  fetchedNodes,
-  setSelectedPrimaryShardCount,
-  setSelectedReplicaCount,
-} from '../actions/nodes';
+import { setSelectedPrimaryShardCount, setSelectedReplicaCount } from '../actions';
 
 const defaultState = {
   isLoading: false,
@@ -22,13 +18,6 @@ const defaultState = {
 
 export const nodes = handleActions(
   {
-    [fetchedNodes](state, { payload: nodes }) {
-      return {
-        ...state,
-        isLoading: false,
-        nodes,
-      };
-    },
     [setSelectedPrimaryShardCount](state, { payload }) {
       let selectedPrimaryShardCount = parseInt(payload);
       if (isNaN(selectedPrimaryShardCount)) {
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/store/selectors/nodes.js b/x-pack/plugins/index_lifecycle_management/public/application/store/selectors/nodes.js
index 519c8cf01e565a..72bfd4b15a78ad 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/store/selectors/nodes.js
+++ b/x-pack/plugins/index_lifecycle_management/public/application/store/selectors/nodes.js
@@ -4,28 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { createSelector } from 'reselect';
-
 export const getNodes = (state) => state.nodes.nodes;
 
-export const getNodeOptions = createSelector([(state) => getNodes(state)], (nodes) => {
-  if (!nodes) {
-    return null;
-  }
-
-  const options = Object.keys(nodes).map((attrs) => ({
-    text: `${attrs} (${nodes[attrs].length})`,
-    value: attrs,
-  }));
-
-  options.sort((a, b) => a.value.localeCompare(b.value));
-  if (options.length) {
-    return [{ text: "Default allocation (don't use attributes)", value: '' }, ...options];
-  } else {
-    return options;
-  }
-});
-
 export const getSelectedPrimaryShardCount = (state) => state.nodes.selectedPrimaryShardCount;
 
 export const getSelectedReplicaCount = (state) =>
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index a540ffb6b1c1fc..6abadbde97037b 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -8207,7 +8207,6 @@
     "xpack.indexLifecycleMgmt.editPolicy.nodeAllocationLabel": "シャードの割当をコントロールするノード属性を選択",
     "xpack.indexLifecycleMgmt.editPolicy.nodeAttributesMissingDescription": "ノード属性なしではシャードの割り当てをコントロールできません。",
     "xpack.indexLifecycleMgmt.editPolicy.nodeAttributesMissingLabel": "elasticsearch.yml でノード属性が構成されていません",
-    "xpack.indexLifecycleMgmt.editPolicy.nodeInfoErrorMessage": "ノード属性の情報の読み込み中にエラーが発生しました",
     "xpack.indexLifecycleMgmt.editPolicy.numberRequiredError": "数字が必要です。",
     "xpack.indexLifecycleMgmt.editPolicy.phaseCold.minimumAgeLabel": "コールドフェーズのタイミング",
     "xpack.indexLifecycleMgmt.editPolicy.phaseCold.minimumAgeUnitsAriaLabel": "コールドフェーズのタイミングの単位",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index cc4c39b05e8eb0..71d97181dc4fdd 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -8209,7 +8209,6 @@
     "xpack.indexLifecycleMgmt.editPolicy.nodeAllocationLabel": "选择节点属性来控制分片分配",
     "xpack.indexLifecycleMgmt.editPolicy.nodeAttributesMissingDescription": "没有节点属性，将无法控制分片分配。",
     "xpack.indexLifecycleMgmt.editPolicy.nodeAttributesMissingLabel": "elasticsearch.yml 中未配置任何节点属性",
-    "xpack.indexLifecycleMgmt.editPolicy.nodeInfoErrorMessage": "加载节点属性信息时出错",
     "xpack.indexLifecycleMgmt.editPolicy.numberRequiredError": "数字必填。",
     "xpack.indexLifecycleMgmt.editPolicy.phaseCold.minimumAgeLabel": "冷阶段计时",
     "xpack.indexLifecycleMgmt.editPolicy.phaseCold.minimumAgeUnitsAriaLabel": "冷阶段计时单位",