[ILM] TS conversion of Index Management plugin extension

x-pack/plugins/index_lifecycle_management/__jest__/extend_index_management.test.js → x-pack/plugins/index_lifecycle_management/__jest__/extend_index_management.test.tsx

@@ -8,7 +8,8 @@ import moment from 'moment-timezone';
 import axios from 'axios';
 import axiosXhrAdapter from 'axios/lib/adapters/xhr';
 
-import { mountWithIntl } from '../../../test_utils/enzyme_helpers';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
+import { usageCollectionPluginMock } from '../../../../src/plugins/usage_collection/public/mocks';
 import {
   retryLifecycleActionExtension,
   removeLifecyclePolicyActionExtension,
@@ -23,11 +24,13 @@ import { init as initUiMetric } from '../public/application/services/ui_metric';
 // We need to init the http with a mock for any tests that depend upon the http service.
 // For example, add_lifecycle_confirm_modal makes an API request in its componentDidMount
 // lifecycle method. If we don't mock this, CI will fail with "Call retries were exceeded".
-initHttp(axios.create({ adapter: axiosXhrAdapter }), (path) => path);
-initUiMetric({ reportUiStats: () => {} });
+// This expects HttpSetup but we're giving it AxiosInstance.
+// @ts-ignore
+initHttp(axios.create({ adapter: axiosXhrAdapter }));
+initUiMetric(usageCollectionPluginMock.createSetupContract());
 
 jest.mock('../../../plugins/index_management/public', async () => {
-  const { indexManagementMock } = await import('../../../plugins/index_management/public/mocks.ts');
+  const { indexManagementMock } = await import('../../../plugins/index_management/public/mocks');
   return indexManagementMock.createSetup();
 });
 
@@ -115,7 +118,7 @@ const indexWithLifecycleError = {
 
 moment.tz.setDefault('utc');
 
-const getUrlForApp = (appId, options) => {
+const getUrlForApp = (appId: string, options: any) => {
   return appId + '/' + (options ? options.path : '');
 };
 
@@ -175,10 +178,10 @@ describe('extend index management', () => {
 
   describe('add lifecycle policy action extension', () => {
     test('should return null when index has index lifecycle policy', () => {
-      const extension = addLifecyclePolicyActionExtension(
-        { indices: [indexWithLifecyclePolicy] },
-        getUrlForApp
-      );
+      const extension = addLifecyclePolicyActionExtension({
+        indices: [indexWithLifecyclePolicy],
+        getUrlForApp,
+      });
       expect(extension).toBeNull();
     });
 
@@ -195,8 +198,8 @@ describe('extend index management', () => {
         indices: [indexWithoutLifecyclePolicy],
         getUrlForApp,
       });
-      expect(extension.renderConfirmModal).toBeDefined;
-      const component = extension.renderConfirmModal(jest.fn());
+      expect(extension?.renderConfirmModal).toBeDefined();
+      const component = extension!.renderConfirmModal(jest.fn());
       const rendered = mountWithIntl(component);
       expect(rendered.exists('.euiModal--confirmation'));
     });

x-pack/plugins/index_lifecycle_management/public/application/services/api.ts

@@ -12,7 +12,7 @@ import {
   UIM_POLICY_ATTACH_INDEX_TEMPLATE,
   UIM_POLICY_DETACH_INDEX,
   UIM_INDEX_RETRY_STEP,
-} from '../constants/ui_metric';
+} from '../constants';
 
 import { trackUiMetric } from './ui_metric';
 import { sendGet, sendPost, sendDelete, useRequest } from './http';
@@ -78,7 +78,11 @@ export const removeLifecycleForIndex = async (indexNames: string[]) => {
   return response;
 };
 
-export const addLifecyclePolicyToIndex = async (body: GenericObject) => {
+export const addLifecyclePolicyToIndex = async (body: {
+  indexName: string;
+  policyName: string;
+  alias: string;
+}) => {
   const response = await sendPost(`index/add`, body);
   // Only track successful actions.
   trackUiMetric(METRIC_TYPE.COUNT, UIM_POLICY_ATTACH_INDEX);

x-pack/plugins/index_lifecycle_management/public/extend_index_management/components/add_lifecycle_confirm_modal.js → x-pack/plugins/index_lifecycle_management/public/extend_index_management/components/add_lifecycle_confirm_modal.tsx

@@ -8,6 +8,8 @@ import React, { Component, Fragment } from 'react';
 import { get } from 'lodash';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { ApplicationStart } from 'kibana/public';
+
 import {
   EuiLink,
   EuiSelect,
@@ -26,9 +28,25 @@ import {
 import { loadPolicies, addLifecyclePolicyToIndex } from '../../application/services/api';
 import { showApiError } from '../../application/services/api_errors';
 import { toasts } from '../../application/services/notification';
+import { PolicyFromES } from '../../application/services/policies/types';
+
+interface Props {
+  indexName: string;
+  closeModal: () => void;
+  index: any;
+  reloadIndices: () => void;
+  getUrlForApp: ApplicationStart['getUrlForApp'];
+}
+
+interface State {
+  selectedPolicyName: string;
+  selectedAlias: string;
+  policies: PolicyFromES[];
+  policyError?: string;
+}
 
-export class AddLifecyclePolicyConfirmModal extends Component {
-  constructor(props) {
+export class AddLifecyclePolicyConfirmModal extends Component<Props, State> {
+  constructor(props: Props) {
     super(props);
     this.state = {
       policies: [],
@@ -81,7 +99,7 @@ export class AddLifecyclePolicyConfirmModal extends Component {
       );
     }
   };
-  renderAliasFormElement = (selectedPolicy) => {
+  renderAliasFormElement = (selectedPolicy?: PolicyFromES) => {
     const { selectedAlias } = this.state;
     const { index } = this.props;
     const showAliasSelect =
@@ -109,15 +127,15 @@ export class AddLifecyclePolicyConfirmModal extends Component {
               defaultMessage="Policy {policyName} is configured for rollover,
                 but index {indexName} does not have an alias, which is required for rollover."
               values={{
-                policyName: selectedPolicy.name,
+                policyName: selectedPolicy?.name,
                 indexName: index.name,
               }}
             />
           </EuiCallOut>
         </Fragment>
       );
     }
-    const aliasOptions = aliases.map((alias) => {
+    const aliasOptions = aliases.map((alias: string) => {
       return {
         text: alias,
         value: alias,
@@ -155,7 +173,7 @@ export class AddLifecyclePolicyConfirmModal extends Component {
     const { policies, selectedPolicyName, policyError } = this.state;
     const selectedPolicy = selectedPolicyName
       ? policies.find((policy) => policy.name === selectedPolicyName)
-      : null;
+      : undefined;
 
     const options = policies.map(({ name }) => {
       return {
@@ -188,7 +206,7 @@ export class AddLifecyclePolicyConfirmModal extends Component {
             options={options}
             value={selectedPolicyName}
             onChange={(e) => {
-              this.setState({ policyError: null, selectedPolicyName: e.target.value });
+              this.setState({ policyError: undefined, selectedPolicyName: e.target.value });
             }}
           />
         </EuiFormRow>
@@ -198,7 +216,7 @@ export class AddLifecyclePolicyConfirmModal extends Component {
   }
   async componentDidMount() {
     try {
-      const policies = await loadPolicies(false, this.props.httpClient);
+      const policies = await loadPolicies(false);
       this.setState({ policies });
     } catch (err) {
       showApiError(

x-pack/plugins/index_lifecycle_management/public/extend_index_management/components/index_lifecycle_summary.js → x-pack/plugins/index_lifecycle_management/public/extend_index_management/components/index_lifecycle_summary.tsx

@@ -24,9 +24,17 @@ import {
   EuiPopoverTitle,
 } from '@elastic/eui';
 
+import { ApplicationStart } from 'kibana/public';
 import { getPolicyPath } from '../../application/services/navigation';
 
-const getHeaders = () => {
+interface Headers {
+  policy: string;
+  phase: string;
+  action: string;
+  action_time_millis: string;
+  failed_step: string;
+}
+const getHeaders = (): Headers => {
   return {
     policy: i18n.translate(
       'xpack.indexLifecycleMgmt.indexLifecycleMgmtSummary.headers.lifecyclePolicyHeader',
@@ -60,8 +68,18 @@ const getHeaders = () => {
     ),
   };
 };
-export class IndexLifecycleSummary extends Component {
-  constructor(props) {
+
+interface Props {
+  index: any;
+  getUrlForApp: ApplicationStart['getUrlForApp'];
+}
+interface State {
+  showStackPopover: boolean;
+  showPhaseExecutionPopover: boolean;
+}
+
+export class IndexLifecycleSummary extends Component<Props, State> {
+  constructor(props: Props) {
     super(props);
     this.state = {
       showStackPopover: false,
@@ -80,7 +98,7 @@ export class IndexLifecycleSummary extends Component {
   closePhaseExecutionPopover = () => {
     this.setState({ showPhaseExecutionPopover: false });
   };
-  renderStackPopoverButton(ilm) {
+  renderStackPopoverButton(ilm: any) {
     if (!ilm.stack_trace) {
       return null;
     }
@@ -105,10 +123,7 @@ export class IndexLifecycleSummary extends Component {
       </EuiPopover>
     );
   }
-  renderPhaseExecutionPopoverButton(ilm) {
-    if (!ilm.phase_execution) {
-      return null;
-    }
+  renderPhaseExecutionPopoverButton(ilm: any) {
     const button = (
       <EuiLink onClick={this.togglePhaseExecutionPopover}>
         <FormattedMessage
@@ -153,11 +168,14 @@ export class IndexLifecycleSummary extends Component {
       index: { ilm = {} },
     } = this.props;
     const headers = getHeaders();
-    const rows = {
+    const rows: {
+      left: JSX.Element[];
+      right: JSX.Element[];
+    } = {
       left: [],
       right: [],
     };
-    Object.keys(headers).forEach((fieldName, arrayIndex) => {
+    Object.entries(headers).forEach(([fieldName, label], arrayIndex) => {
       const value = ilm[fieldName];
       let content;
       if (fieldName === 'action_time_millis') {
@@ -176,21 +194,25 @@ export class IndexLifecycleSummary extends Component {
         content = value;
       }
       content = content || '-';
-      const cell = [
-        <EuiDescriptionListTitle key={fieldName}>
-          <strong>{headers[fieldName]}</strong>
-        </EuiDescriptionListTitle>,
-        <EuiDescriptionListDescription key={fieldName + '_desc'}>
-          {content}
-        </EuiDescriptionListDescription>,
-      ];
+      const cell = (
+        <Fragment>
+          <EuiDescriptionListTitle key={fieldName}>
+            <strong>{label}</strong>
+          </EuiDescriptionListTitle>
+          <EuiDescriptionListDescription key={fieldName + '_desc'}>
+            {content}
+          </EuiDescriptionListDescription>
+        </Fragment>
+      );
       if (arrayIndex % 2 === 0) {
         rows.left.push(cell);
       } else {
         rows.right.push(cell);
       }
     });
-    rows.right.push(this.renderPhaseExecutionPopoverButton(ilm));
+    if (ilm.phase_execution) {
+      rows.right.push(this.renderPhaseExecutionPopoverButton(ilm));
+    }
     return rows;
   }