[ILM] Convert node details flyout to TS

x-pack/plugins/index_lifecycle_management/__jest__/components/edit_policy.test.js

@@ -253,6 +253,9 @@ describe('edit policy', () => {
     beforeEach(() => {
       server.respondImmediately = true;
       httpRequestsMockHelpers.setNodesListResponse({});
+      httpRequestsMockHelpers.setNodesDetailsResponse('attribute:true', [
+        { nodeId: 'testNodeId', stats: { name: 'testNodeName', host: 'testHost' } },
+      ]);
     });
 
     test('should show number required error when trying to save empty warm phase', async () => {
@@ -395,7 +398,9 @@ describe('edit policy', () => {
       rendered.update();
       const flyoutButton = findTestSubject(rendered, 'warm-viewNodeDetailsFlyoutButton');
       expect(flyoutButton.exists()).toBeTruthy();
-      flyoutButton.simulate('click');
+      await act(async () => {
+        await flyoutButton.simulate('click');
+      });
       rendered.update();
       expect(rendered.find('.euiFlyout').exists()).toBeTruthy();
     });
@@ -404,6 +409,9 @@ describe('edit policy', () => {
     beforeEach(() => {
       server.respondImmediately = true;
       httpRequestsMockHelpers.setNodesListResponse({});
+      httpRequestsMockHelpers.setNodesDetailsResponse('attribute:true', [
+        { nodeId: 'testNodeId', stats: { name: 'testNodeName', host: 'testHost' } },
+      ]);
     });
     test('should allow 0 for phase timing', async () => {
       const rendered = mountWithIntl(component);
@@ -470,7 +478,9 @@ describe('edit policy', () => {
       rendered.update();
       const flyoutButton = findTestSubject(rendered, 'cold-viewNodeDetailsFlyoutButton');
       expect(flyoutButton.exists()).toBeTruthy();
-      flyoutButton.simulate('click');
+      await act(async () => {
+        await flyoutButton.simulate('click');
+      });
       rendered.update();
       expect(rendered.find('.euiFlyout').exists()).toBeTruthy();
     });

x-pack/plugins/index_lifecycle_management/__jest__/components/helpers/http_requests.ts

@@ -25,9 +25,18 @@ const registerHttpRequestMockHelpers = (server: SinonFakeServer) => {
     ]);
   };
 
+  const setNodesDetailsResponse = (nodeAttributes: string, response: HttpResponse = []) => {
+    server.respondWith(`/api/index_lifecycle_management/nodes/${nodeAttributes}/details`, [
+      200,
+      { 'Content-Type': 'application/json' },
+      JSON.stringify(response),
+    ]);
+  };
+
   return {
     setPoliciesResponse,
     setNodesListResponse,
+    setNodesDetailsResponse,
   };
 };
 

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/cold_phase/cold_phase.js

@@ -34,15 +34,13 @@ import { SetPriorityInput } from '../set_priority_input';
 export class ColdPhase extends PureComponent {
   static propTypes = {
     setPhaseData: PropTypes.func.isRequired,
-    showNodeDetailsFlyout: PropTypes.func.isRequired,
 
     isShowingErrors: PropTypes.bool.isRequired,
     errors: PropTypes.object.isRequired,
   };
   render() {
     const {
       setPhaseData,
-      showNodeDetailsFlyout,
       phaseData,
       errors,
       isShowingErrors,
@@ -114,7 +112,6 @@ export class ColdPhase extends PureComponent {
                 <NodeAllocation
                   phase={PHASE_COLD}
                   setPhaseData={setPhaseData}
-                  showNodeDetailsFlyout={showNodeDetailsFlyout}
                   errors={errors}
                   phaseData={phaseData}
                   isShowingErrors={isShowingErrors}

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/node_allocation/node_allocation.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { Fragment } from 'react';
+import React, { Fragment, useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import {
@@ -20,11 +20,11 @@ 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;
-  showNodeDetailsFlyout: (nodeAttrs: any) => void;
   errors: any;
   phaseData: any;
   isShowingErrors: boolean;
@@ -48,13 +48,16 @@ const learnMoreLink = (
 export const NodeAllocation: React.FunctionComponent<Props> = ({
   phase,
   setPhaseData,
-  showNodeDetailsFlyout,
   errors,
   phaseData,
   isShowingErrors,
 }) => {
   const { isLoading, data: nodes, error, sendRequest } = useLoadNodes();
 
+  const [selectedNodeAttrsForDetails, setSelectedNodeAttrsForDetails] = useState<string | null>(
+    null
+  );
+
   if (isLoading) {
     return (
       <Fragment>
@@ -162,7 +165,7 @@ export const NodeAllocation: React.FunctionComponent<Props> = ({
           data-test-subj={`${phase}-viewNodeDetailsFlyoutButton`}
           flush="left"
           iconType="eye"
-          onClick={() => showNodeDetailsFlyout(phaseData[PHASE_NODE_ATTRS])}
+          onClick={() => setSelectedNodeAttrsForDetails(phaseData[PHASE_NODE_ATTRS])}
         >
           <FormattedMessage
             id="xpack.indexLifecycleMgmt.editPolicy.viewNodeDetailsButton"
@@ -172,6 +175,13 @@ export const NodeAllocation: React.FunctionComponent<Props> = ({
       ) : null}
       {learnMoreLink}
       <EuiSpacer size="m" />
+
+      {selectedNodeAttrsForDetails ? (
+        <NodeAttrsDetails
+          selectedNodeAttrs={selectedNodeAttrsForDetails}
+          close={() => setSelectedNodeAttrsForDetails(null)}
+        />
+      ) : null}
     </Fragment>
   );
 };

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/node_attrs_details/index.js → x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/node_attrs_details/index.ts

@@ -4,4 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { NodeAttrsDetails } from './node_attrs_details.container';
+export { NodeAttrsDetails } from './node_attrs_details';

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/node_attrs_details/node_attrs_details.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 React from 'react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+import {
+  EuiFlyoutBody,
+  EuiFlyout,
+  EuiTitle,
+  EuiInMemoryTable,
+  EuiSpacer,
+  EuiPortal,
+  EuiLoadingContent,
+  EuiCallOut,
+  EuiButton,
+} from '@elastic/eui';
+
+import { useLoadNodeDetails } from '../../../../services/api';
+
+interface Props {
+  close: () => void;
+  selectedNodeAttrs: string;
+}
+
+export const NodeAttrsDetails: React.FunctionComponent<Props> = ({ close, selectedNodeAttrs }) => {
+  const { data, isLoading, error, sendRequest } = useLoadNodeDetails(selectedNodeAttrs);
+  let content;
+  if (isLoading) {
+    content = <EuiLoadingContent lines={3} />;
+  } else if (error) {
+    const { statusCode, message } = error;
+    content = (
+      <EuiCallOut
+        title={
+          <FormattedMessage
+            id="xpack.indexLifecycleMgmt.editPolicy.nodeDetailsLoadingFailedTitle"
+            defaultMessage="Unable to load node attribute details"
+          />
+        }
+        color="danger"
+      >
+        <p>
+          {message} ({statusCode})
+        </p>
+        <EuiButton onClick={sendRequest} iconType="refresh" color="danger">
+          <FormattedMessage
+            id="xpack.indexLifecycleMgmt.editPolicy.nodeDetailsReloadButton"
+            defaultMessage="Try again"
+          />
+        </EuiButton>
+      </EuiCallOut>
+    );
+  } else {
+    content = (
+      <EuiInMemoryTable
+        items={data || []}
+        columns={[
+          {
+            field: 'nodeId',
+            name: i18n.translate('xpack.indexLifecycleMgmt.nodeAttrDetails.idField', {
+              defaultMessage: 'ID',
+            }),
+          },
+          {
+            field: 'stats.name',
+            name: i18n.translate('xpack.indexLifecycleMgmt.nodeAttrDetails.nameField', {
+              defaultMessage: 'Name',
+            }),
+          },
+          {
+            field: 'stats.host',
+            name: i18n.translate('xpack.indexLifecycleMgmt.nodeAttrDetails.hostField', {
+              defaultMessage: 'Host',
+            }),
+          },
+        ]}
+        pagination={true}
+        sorting={true}
+      />
+    );
+  }
+  return (
+    <EuiPortal>
+      <EuiFlyout ownFocus onClose={close}>
+        <EuiFlyoutBody>
+          <EuiTitle>
+            <h2>
+              <FormattedMessage
+                id="xpack.indexLifecycleMgmt.nodeAttrDetails.title"
+                defaultMessage="Nodes that contain the attribute {selectedNodeAttrs}"
+                values={{ selectedNodeAttrs }}
+              />
+            </h2>
+          </EuiTitle>
+          <EuiSpacer size="s" />
+          {content}
+        </EuiFlyoutBody>
+      </EuiFlyout>
+    </EuiPortal>
+  );
+};

x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/warm_phase/warm_phase.js

@@ -38,7 +38,6 @@ import { MinAgeInput } from '../min_age_input';
 export class WarmPhase extends PureComponent {
   static propTypes = {
     setPhaseData: PropTypes.func.isRequired,
-    showNodeDetailsFlyout: PropTypes.func.isRequired,
 
     isShowingErrors: PropTypes.bool.isRequired,
     errors: PropTypes.object.isRequired,
@@ -47,7 +46,6 @@ export class WarmPhase extends PureComponent {
   render() {
     const {
       setPhaseData,
-      showNodeDetailsFlyout,
       phaseData,
       errors,
       isShowingErrors,
@@ -152,7 +150,6 @@ export class WarmPhase extends PureComponent {
                 <NodeAllocation
                   phase={PHASE_WARM}
                   setPhaseData={setPhaseData}
-                  showNodeDetailsFlyout={showNodeDetailsFlyout}
                   errors={errors}
                   phaseData={phaseData}
                   isShowingErrors={isShowingErrors}