[ILM] Convert node details flyout to TS

elastic · Jul 31, 2020 · b380789 · b380789
1 parent 10f8bea
commit b380789
Show file tree

Hide file tree

Showing 14 changed files with 137 additions and 191 deletions.
diff --git a/...le_management/public/application/sections/edit_policy/components/cold_phase/cold_phase.js b/...le_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}

diff --git a/...ent/public/application/sections/edit_policy/components/node_allocation/node_allocation.js b/...ent/public/application/sections/edit_policy/components/node_allocation/node_allocation.js
@@ -12,6 +12,7 @@ import { EuiSelect, EuiButtonEmpty, EuiCallOut, EuiSpacer, EuiLoadingSpinner } f
 import { PHASE_NODE_ATTRS } from '../../../../constants';
 import { LearnMoreLink } from '../../../components/learn_more_link';
 import { ErrableFormRow } from '../../form_errors';
+import { NodeAttrsDetails } from '../node_attrs_details';
 
 const learnMoreLinks = (
   <Fragment>
@@ -30,20 +31,24 @@ const learnMoreLinks = (
 );
 
 export class NodeAllocation extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isShowingNodeDetailsFlyout: false,
+      selectedNodeAttrsForDetails: undefined,
+    };
+  }
+
   componentDidMount() {
     this.props.fetchNodes();
   }
 
+  showNodeDetailsFlyout = (selectedNodeAttrsForDetails) => {
+    this.setState({ isShowingNodeDetailsFlyout: true, selectedNodeAttrsForDetails });
+  };
+
   render() {
-    const {
-      phase,
-      setPhaseData,
-      isShowingErrors,
-      phaseData,
-      showNodeDetailsFlyout,
-      nodeOptions,
-      errors,
-    } = this.props;
+    const { phase, setPhaseData, isShowingErrors, phaseData, nodeOptions, errors } = this.props;
     if (!nodeOptions) {
       return (
         <Fragment>
@@ -100,9 +105,10 @@ export class NodeAllocation extends Component {
         {!!phaseData[PHASE_NODE_ATTRS] ? (
           <EuiButtonEmpty
             data-test-subj={`${phase}-viewNodeDetailsFlyoutButton`}
+            style={{ maxWidth: 400 }}
             flush="left"
             iconType="eye"
-            onClick={() => showNodeDetailsFlyout(phaseData[PHASE_NODE_ATTRS])}
+            onClick={() => this.showNodeDetailsFlyout(phaseData[PHASE_NODE_ATTRS])}
           >
             <FormattedMessage
               id="xpack.indexLifecycleMgmt.editPolicy.viewNodeDetailsButton"
@@ -114,6 +120,13 @@ export class NodeAllocation extends Component {
         )}
         {learnMoreLinks}
         <EuiSpacer size="m" />
+
+        {this.state.isShowingNodeDetailsFlyout ? (
+          <NodeAttrsDetails
+            selectedNodeAttrs={this.state.selectedNodeAttrsForDetails}
+            close={() => this.setState({ isShowingNodeDetailsFlyout: false })}
+          />
+        ) : null}
       </Fragment>
     );
   }

diff --git a/...cy/components/node_attrs_details/index.js → ...cy/components/node_attrs_details/index.ts b/...cy/components/node_attrs_details/index.js → ...cy/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';
diff --git a/...cation/sections/edit_policy/components/node_attrs_details/node_attrs_details.container.js b/...cation/sections/edit_policy/components/node_attrs_details/node_attrs_details.container.js
diff --git a/...blic/application/sections/edit_policy/components/node_attrs_details/node_attrs_details.js b/...blic/application/sections/edit_policy/components/node_attrs_details/node_attrs_details.js
diff --git a/...lic/application/sections/edit_policy/components/node_attrs_details/node_attrs_details.tsx b/...lic/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, error: errorString, message } = error;
+    content = (
+      <EuiCallOut
+        title={
+          <FormattedMessage
+            id="xpack.indexLifecycleMgmt.editPolicy.nodeDetailsLoadingFailedTitle"
+            defaultMessage="Unable to load node attribute details."
+          />
+        }
+        color="danger"
+      >
+        <p>
+          {statusCode}: {errorString}. {message}
+        </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>
+  );
+};
diff --git a/...le_management/public/application/sections/edit_policy/components/warm_phase/warm_phase.js b/...le_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}

diff --git a/...plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.js b/...plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.js
@@ -38,7 +38,6 @@ import {
 import { toasts } from '../../services/notification';
 import { findFirstError } from '../../services/find_errors';
 import { LearnMoreLink } from '../components';
-import { NodeAttrsDetails } from './components/node_attrs_details';
 import { PolicyJsonFlyout } from './components/policy_json_flyout';
 import { ErrableFormRow } from './form_errors';
 import { HotPhase } from './components/hot_phase';
@@ -56,8 +55,6 @@ export class EditPolicy extends Component {
     super(props);
     this.state = {
       isShowingErrors: false,
-      isShowingNodeDetailsFlyout: false,
-      selectedNodeAttrsForDetails: undefined,
       isShowingPolicyJsonFlyout: false,
     };
   }
@@ -124,10 +121,6 @@ export class EditPolicy extends Component {
     }
   };
 
-  showNodeDetailsFlyout = (selectedNodeAttrsForDetails) => {
-    this.setState({ isShowingNodeDetailsFlyout: true, selectedNodeAttrsForDetails });
-  };
-
   togglePolicyJsonFlyout = () => {
     this.setState(({ isShowingPolicyJsonFlyout }) => ({
       isShowingPolicyJsonFlyout: !isShowingPolicyJsonFlyout,
@@ -291,15 +284,13 @@ export class EditPolicy extends Component {
 
               <WarmPhase
                 errors={errors[PHASE_WARM]}
-                showNodeDetailsFlyout={this.showNodeDetailsFlyout}
                 isShowingErrors={isShowingErrors && !!findFirstError(errors[PHASE_WARM], false)}
               />
 
               <EuiHorizontalRule />
 
               <ColdPhase
                 errors={errors[PHASE_COLD]}
-                showNodeDetailsFlyout={this.showNodeDetailsFlyout}
                 isShowingErrors={isShowingErrors && !!findFirstError(errors[PHASE_COLD], false)}
               />
 
@@ -370,13 +361,6 @@ export class EditPolicy extends Component {
                 </EuiFlexItem>
               </EuiFlexGroup>
 
-              {this.state.isShowingNodeDetailsFlyout ? (
-                <NodeAttrsDetails
-                  selectedNodeAttrs={this.state.selectedNodeAttrsForDetails}
-                  close={() => this.setState({ isShowingNodeDetailsFlyout: false })}
-                />
-              ) : null}
-
               {this.state.isShowingPolicyJsonFlyout ? (
                 <PolicyJsonFlyout
                   policyName={selectedPolicyName || ''}